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

Problema HTML e CSS, immagine centrata. Come faccio? Opzioni
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?
Sponsor
Inviato: Tuesday, April 05, 2011 2:40:38 PM

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

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

inibiscilo in #mainbar
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!
lui49
Inviato: Tuesday, April 05, 2011 8:57:22 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,833
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 ;
}
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!
lui49
Inviato: Wednesday, April 06, 2011 6:53:25 PM
Rank: AiutAmico

Iscritto dal : 5/4/2003
Posts: 2,833
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.....
alevin96
Inviato: Wednesday, April 06, 2011 10:45:53 PM
Rank: Newbie

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


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.