- Home
- Categorie
- Coding e Sistemistica
- Coding
- aggiungere un div ad una colonna centrata
-
aggiungere un div ad una colonna centrata
Ciao a tutti!
Il mio sito è centrato rispetto alla pagina, ecco il codice
[PHP]body{
margin: 0;
padding: 0;
text-align: center;
background-color: #333;
padding-top: 20px;}
#centralone
{
width: 640px;
height: 625px;margin: auto; background: url("../images/home.png")no-repeat;
}[/PHP]
Adesso io vorrei aggiungere un div a destra del mio corpo centrato in modo che rimanga centrato solo il corpo e il mio nuovo div venga spostato a destra...
Come posso fare ?
-
Ciao pettedemon,
potresti provare semplicemente ad aggiungere il div nel flusso e con una regola css posizionarlo in modo assoluto.Questo ti dovrebbe venire facile perchè conosci a priori le dimensioni del DIV 'centralone'.
Ciao
-
Ciao mirkoagrati,
ci avevo provato ma non sono riuscito a ottenere nessun risultato
ecco il codice#centralone_home { width: 640px; height: 626px; margin: auto; background: url(../images/home.png) no-repeat; } #sponsor { width: 175px; height: 120px; background-color: white; position: absolute; top: 20px; right: 340px; }
e la pagina
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Documento senza titolo</title> <link rel="stylesheet" type="text/css" href="css/stile.css" /> </head> <body> <div id="centralone_home"> </div> <div id="sponsor"></div> </body> </html>
E al ridimensionamento della pagina si sposta e non resta più dove vorrei...
-
Ciao,
prova ad aggiungere la regola css:div{display: inline;}
e togli il posizionamento assoluto al secondo div.
Ciao
-
Non funziona, anzi non mi appare piu' nulla
-
Come non appare niente?
hai fatto così?:
[php]
body div{display: inline;}#sponsor
{width: 175px; height: 120px; background-color: white;
}
[/php]
-
Ti posto un po' di codice in piu' comunque continua a non apparire nulla, forse sbaglio io ..
[PHP]body{
margin: 0;
padding: 0;
text-align: center;
background-color: #333;
padding-top: 20px;}
html, body {
width: 100%;
}h1{
font-size: 35px;
text-decoration: none;
color: #603813;
}h1 a:link{
font-size: 35px;color:;
}
h1 a:visited{
font-size: 35px;
text-decoration: none;
color:;
}h1 a:hover{
font-size: 35px;
text-decoration: none;
color: #4D4D4D;
}h1 a:active{
font-size: 35px;
text-decoration: none;
color:;
}#centralone_home
{
width: 640px;
height: 626px;
margin: auto;
background: url(../images/home.png) no-repeat;}
#centralone_abbonati
{
width: 640px;
height: 626px;margin: auto;
background: url(../images/abbonati.png) no-repeat;
}
#centralone_grazie
{
width: 640px;
height: 435px;margin: auto; background: url(../images/grazie.png) no-repeat;
}
#centralone_archivio
{
width: 640px;margin: auto;
}
body div{display: inline;}
#sponsor
{width: 175px; height: 120px; background-color: white;
}
[/PHP]e il codice della pagina
[PHP]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento senza titolo</title>
<link rel="stylesheet" type="text/css" href="css/stile_p.css" />
</head><body>
<div id="centralone_home"></div>
<div id="sponsor"></div>
</body>
</html>
[/PHP]
-
Ciao,
con qualche modifica a me è apparso.
Prima di tutto devi inserire i contenuti nei div,
altrimenti che vedi?Io ho utilizzato FF 3.5.2.
Qui sotto il codice della pagina di test che mi sono creato in locale con i tuoi
post.[php]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento senza titolo</title>
<link rel="stylesheet" type="text/css" href="css/stile_p.css" /><style>
body{
margin: 0;
padding: 0;
text-align: center;
background-color: #333;
padding-top: 20px;}
html, body {
width: 100%;
}h1{
font-size: 35px;
text-decoration: none;
color: #603813;
}h1 a:link{
font-size: 35px;color:;
}
h1 a:visited{
font-size: 35px;
text-decoration: none;
color:;
}h1 a:hover{
font-size: 35px;
text-decoration: none;
color: #4D4D4D;
}h1 a:active{
font-size: 35px;
text-decoration: none;
color:;
}#centralone_home
{
width: 640px;
height: 626px;
margin: auto;
background-color: red;}
#centralone_abbonati
{
width: 640px;
height: 626px;margin: auto;
background: url(../images/abbonati.png) no-repeat;
}
#centralone_grazie
{
width: 640px;
height: 435px;margin: auto; background: url(../images/grazie.png) no-repeat;
}
#centralone_archivio
{
width: 640px;margin: auto;
}
body div{display: inline; border: 3px solid green; margin 10px;}
#sponsor
{width: 175px; height: 120px; background-color: white;
}
</style>
</head><body>
<div id="centralone_home">
centralone_home
</div>
<div id="sponsor">
sponsor
</div></body>
</html>[/php]Ciao
-
Ecco , prova adesso che ho inserito un po' di testo
[PHP]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento senza titolo</title>
<link rel="stylesheet" type="text/css" href="css/stile_p.css" /><style>
body{
margin: 0;
padding: 0;
text-align: center;
background-color: #333;
padding-top: 20px;}
html, body {
width: 100%;
}h1{
font-size: 35px;
text-decoration: none;
color: #603813;
}h1 a:link{
font-size: 35px;color:;
}
h1 a:visited{
font-size: 35px;
text-decoration: none;
color:;
}h1 a:hover{
font-size: 35px;
text-decoration: none;
color: #4D4D4D;
}h1 a:active{
font-size: 35px;
text-decoration: none;
color:;
}#centralone_home
{
width: 640px;
height: 626px;
margin: auto;
background-color: red;}
#centralone_abbonati
{
width: 640px;
height: 626px;margin: auto;
background: url(../images/abbonati.png) no-repeat;
}
#centralone_grazie
{
width: 640px;
height: 435px;margin: auto; background: url(../images/grazie.png) no-repeat;
}
#centralone_archivio
{
width: 640px;margin: auto;
}
body div{display: inline; border: 3px solid green; margin 10px;}
#sponsor
{width: 175px; height: 120px; background-color: white;
}
</style>
</head><body>
<div id="centralone_home">
centralone_home centralone_home centralone_home centralone_home centralone_home centralone_home centralone_home centralone_home centralone_home centralone_home
</div>
<div id="sponsor">
sponsor
</div></body>
</html> [/PHP]