[css] aiuto modifica layout

**blur** · 09-08-2004, 20:08

ciao,

dunque ho questo problema.

ho questo css:

body{
margin:0px;
background: #fff;
margin-bottom:10px;
font-family: verdana, sans-serif, arial, impact, helvetica, Times New Roman ;
font-size: 0.8em;
color: #000;

}

#container {
width:100%;
\width:100%;
w\idth:100%;
border-top: 0px solid #354D69;
border-left: 0px solid #354D69;
border-right: 0px solid #354D69;
border-bottom:0px solid #354D69;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}

#banner {
float:right;
width:81%;
padding: 5px;
margin-bottom: 0px;
background-color: #fff;

}

#row
{
width:81%;
border:1px solid #ccc;
margin:0px 6px 0 6px;
border-top: 0px solid #ccc;
border-bottom: 1px solid #ccc;
padding:0;
background: #F5F5F5;
text-align:left;
}

#content {
min-height:700px;
height: auto !important;
padding: 5px;
margin-top: 5px;
margin-left: 182px;
margin-right: 182px;
background-color: #F5F6F1;
border:1px solid #ccc;
border-bottom: 0px;
}

#sidebar-a {
float: left;
min-height:700px;
height: auto !important;
height: 700px;
width: 182px;
\width: 182px;
w\idth: 182px;
margin: 0;
padding-top:5px;
border-right:0px solid #ccc;
}

#sidebar-b {
float: right;
min-height:700px;
height: auto !important;
height: 700px;
width: 182px;
\width: 182px;
w\idth: 182px;
margin: 0;
padding-top:5px;
/*margin-left: 5px;*/
border-right:0px solid #354D69;

}

#footer {
clear: both;
padding-top: 6px;
padding-bottom: 6px;
margin:0px 6px 0px 6px;
font-family: verdana, sans-serif, arial, impact, helvetica, Times New Roman ;
font-size: 0.7em;
text-align: center;
background-color: #EEEFEF;
border:1px solid #C3D6D6;
}

come potete vedere, ho impostato #banner e #row a 81% perchè volevo fare spazio a sx e portare in alto #sidebar-a, però non ho capito bene come fare.

l'immagine allegata spiega meglio quello che vorrei fare

grazie
ciauz

**Jerry Masslo** · 09-08-2004, 20:20

non è che ci risparmieresti anche di scrivere l'html?

**blur** · 09-08-2004, 20:27

beh, è abbastanza prevedibile no?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//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=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" media="screen" />

<style type="text/css">
@import "layout.css";</style>

</head>
<body>
<div id="container">

<div id="banner"></div>

<div id="row"></div>

<div id="sidebar-a"> </div>

<div id="content"></div>

<div id="footer"></div>

</div>

</body>
</html>

**Marcolino's** · 09-08-2004, 20:29

Voleva solo dirti: "non è che vuoi anche un panino, insieme al sito?"

**blur** · 09-08-2004, 20:34

veramente il sito c'è....

solo capire come allineare la colonna sx in alto...
chiedo troppo?

mi basta anche un'idea eh, tranquilli.

**Jerry Masslo** · 09-08-2004, 20:46

non volevo panini

solo non mi andava di scrivere quello che già avevi scritto e poi così hai dato pure la dtd

però ti pare il tuo codice da presentare in pubblico?

width:100%;
\width:100%;
w\idth:100%; /*a che ti servono gli hack se sono tutti uguali? */
border-top: 0px solid #354D69; /* e pure 4 bordi 4 tutti a zero? però colorati?*/
border-left: 0px solid #354D69;
border-right: 0px solid #354D69;
border-bottom:0px solid #354D69;
margin-left: auto;
margin-right: auto;

/*larghezza cento x cento e margin auto? */

se, forse, se ne parla dopo cena.

proprio non mi va di sollevare un ciglio in questo momento, si è capito?

**blur** · 09-08-2004, 20:56

vabbè i border sono il risultato di varie modifiche e non cancellati...non cambia niente se non sbaglio...

per il resto...

ok ci sentiamo dopo cena.

**Jerry Masslo** · 10-08-2004, 10:26

ti ho fatto una base, ho cambiato la dtd perché la tua mi pare fosse un misto tra strict e transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>blur</title>

<style type="text/css">
* {margin:0; padding:0}
html, body {height:100%}

body{
font-family: verdana, sans-serif, arial, impact, helvetica, Times New Roman ;
font-size:.8em;
}
#container {background:silver;
min-height:60%;
height:auto!important;
height:60%;
}
#sidebar-a {width:20%;
float:left
}
#banner {background:red;
width:80%;
float:right;
}
#row {background: fuchsia;
width:80%;
float:right
}
#container2 {background:gray;
width:80%;
float:right;
}
#content {background:lime;
width:70%;
float:left;
min-height:400px;
height:auto!important;
height:400px;

}
#sidebar-b {width:20%;
float:left
}
#footer {background:aqua}

.clear {clear:both}

</style>
</head>

<body>
<div id="container">
<div id="sidebar-a">lato sinistro lungo</div>

<div id="banner">un banner</div>

<div id="row">una riga</div>

<div id="container2">
<div id="content">un contenuto, così se è più lungo del lato destro</div>
<div id="sidebar-b">un altro lato</div>
</div>
<br class="clear" />
</div>

<div id="footer">footer</div>

</body>
</html>

**blur** · 10-08-2004, 10:57

grandissimo jerry

mi hai salvato da un esaurimento...sai com'è quando ti incasini, è una spirale da cui non esci. Proprio così, cancellare tutto e rifare da zero è la cosa migliore.
ho guardato il codice e effettivamente è molto più semplice e pulito.
vabbè vale il discorso fatto prima.
una cosa, cosa vuol dire quel

* {margin:0; padding:0} ?

ti ringrazio infinitamente.

**Jerry Masslo** · 10-08-2004, 11:38

Originariamente inviato da blur
grandissimo jerry

mi hai salvato da un esaurimento...sai com'è quando ti incasini, è una spirale da cui non esci. Proprio così, cancellare tutto e rifare da zero è la cosa migliore.
ho guardato il codice e effettivamente è molto più semplice e pulito.
vabbè vale il discorso fatto prima.
una cosa, cosa vuol dire quel

* {margin:0; padding:0} ?

ti ringrazio infinitamente.

in effetti spesso è più comodo ricominciare d'accapo

l'asterisco è un carattere jolly che intercetta tutti i selettori, uso mettere padding e margin a zero perché di default ogni selettore ha il suo magari diverso tra i vari browser così se qualcosa non va non dipenderà da quelli.

Discussione: [css] aiuto modifica layout

Strumenti discussione

Ricerca discussione

Visualizza

[css] aiuto modifica layout

Permessi di invio