Aiutamici Forum
Benvenuto Ospite Cerca | Topic Attivi | Utenti | | Log In | Registra

Aiutamici Forum » Spazio Webmaster » HTML » Problema HTML e CSS, immagine centrata. Come faccio?

Problema HTML e CSS, immagine centrata. Come faccio? Opzioni
Topic Precedente · Topic Sucessivo
alevin96
Inviato: Tuesday, April 05, 2011 2:40:38 PM
Rank: Newbie

Iscritto dal : 4/2/2011
Posts: 6
Questo è il css

@charset "utf-8";
/* CSS Document */

/*Impostazioni del div container, dichiarato con id */
#container {
width:98%;
height:98%;
background:orange;
text-align:center;
font-size:18px;
position: absolute;
}

#mainbar {
background-position:center;
background:#30F;
text-align:center;
position:absolute;
}

#body { text-align:center;
}

questo è .html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<link rel=stylesheet href="prova.css" type="text/css">
<head>
</head>
<body>
<div id="container">
<div id="mainbar" align="center">
<p>Scegli una delle seguenti opzioni per collegarti al blog:</p>
<p>PC Desktop</p>
<p>Mobile Touch</p>
<p>Mobile NoTouch</p>
</div>
</div>
</body>
</html>

Devo centrare la mainbar. Come posso fare?
Torna in alto
 
Sponsor
Inviato: Tuesday, April 05, 2011 2:40:38 PM

 
Torna in alto
 
lui49
Inviato: Tuesday, April 05, 2011 3:30:12 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,845
/*position:absolute;*/

inibiscilo in #mainbar
Torna in alto
 
alevin96
Inviato: Tuesday, April 05, 2011 8:18:53 PM
Rank: Newbie

Iscritto dal : 4/2/2011
Posts: 6
lui49 ha scritto:
/*position:absolute;*/

inibiscilo in #mainbar


fatto ma niente ho messo margin: auto 0;

e me lo centra solo come pagina in modo orizzontale e non anche verticale!
Torna in alto
 
lui49
Inviato: Tuesday, April 05, 2011 8:57:22 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,845
margin: 25% 25% 25% 25%;


non va bene per te....io avevo modificato il css:

<style type="text/css">

#container {
width:98%;
height:98%;
text-align:center;
/*position: absolute;*/
}

body {
background:orange;
font-size:18px;
}

#mainbar {
background:#30F;
/*position:absolute;*/
margin: 25% 25% 25% 25%;
}

</style>


per dare una dimensione in larghezza alla mainbar conviene:

#mainbar {
width:400px;
background:#30F;
/*position:absolute;*/
text-align:center;
margin: 25% auto ;
}
Torna in alto
 
alevin96
Inviato: Tuesday, April 05, 2011 9:52:48 PM
Rank: Newbie

Iscritto dal : 4/2/2011
Posts: 6
lui49 ha scritto:
margin: 25% 25% 25% 25%;


non va bene per te....io avevo modificato il css:

<style type="text/css">

#container {
width:98%;
height:98%;
text-align:center;
/*position: absolute;*/
}

body {
background:orange;
font-size:18px;
}

#mainbar {
background:#30F;
/*position:absolute;*/
margin: 25% 25% 25% 25%;
}

</style>


per dare una dimensione in larghezza alla mainbar conviene:

#mainbar {
width:400px;
background:#30F;
/*position:absolute;*/
text-align:center;
margin: 25% auto ;
}


Grazie con questi consigli ho quasi risolto, adesso ho questi codici:
CSS
Code:
@charset "utf-8";
/* CSS Document */

/*Impostazioni del div container, dichiarato con id */
#container {
    width:98%;
    height:98%;
    background:orange;
    font-size:18px;
    position:absolute;
    left: 12px;
}
    
#mainbar {
    background:#30F;
    text-align:center;
    width:360px;
    margin:25% auto;
    }

#body {
text-align:center;
}


e html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<link rel=stylesheet href="prova.css" type="text/css">
<head>
</head>
<body>
<div id="container">
<div id="mainbar" align="center">
<p>Scegli una delle seguenti opzioni per collegarti al blog:</p>
<p>PC Desktop</p>
<p>Mobile Touch</p>
<p>Mobile NoTouch</p>
</div>
</div>
</body>
</html>


I problemi sono però:
- con Mozilla e IE nella parte di sotto rimane uno spazio bianco
- quando la pagina è molto piccola la parte di sopra rimane molto più grossa rispetto a quella di sotto e fa uscire la barra di scorrimento (tutti i browser)

si possono risolvere? comunque grazie per l' aiuto fino ad adesso!
Torna in alto
 
lui49
Inviato: Wednesday, April 06, 2011 6:53:25 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,845
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!--link rel=stylesheet href="prova.css" type="text/css"-->
<head>
<style type="text/css">

#container {
    width:98%;
    height:98%;
    background:orange;
    font-size:18px;
    position:absolute;
    left: 12px;
}
#mainbar {
    background:#30F;
    text-align:center;
    width:360px;
    height:250px;
    }
    
body {
background:#000;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<table width="100%" height="100%" border="0">
<tr>
<td valign="middle" align="center">
<div id="mainbar">
<p>Scegli una delle seguenti opzioni per collegarti al blog:</p>
<p>PC Desktop</p>
<p>Mobile Touch</p>
<p>Mobile NoTouch</p></td></tr></table>
</div>
</div>
</body>
</html>


prova così...ho messo io il colore di fondo per evidenziare il container.....
Torna in alto
 
alevin96
Inviato: Wednesday, April 06, 2011 10:45:53 PM
Rank: Newbie

Iscritto dal : 4/2/2011
Posts: 6
Grazie 1000
Torna in alto
 
Utenti presenti in questo topic
Guest

Aiutamici Forum » Spazio Webmaster » HTML » Problema HTML e CSS, immagine centrata. Come faccio?


Salta al Forum
Aggiunta nuovi Topic disabilitata in questo forum.
Risposte disabilitate in questo forum.
Eliminazione tuoi Post disabilitata in questo forum.
Modifica dei tuoi post disabilitata in questo forum.
Creazione Sondaggi disabilitata in questo forum.
Voto ai sondaggi disabilitato in questo forum.

Main Forum RSS : RSS

Aiutamici Theme
Powered by Yet Another Forum.net versione 1.9.1.8 (NET v2.0) - 3/29/2008
Copyright © 2003-2008 Yet Another Forum.net. All rights reserved.