Codeer vragen

Hallo,

ben sinds vandaag begonnen met slicen/coderen alleen ik loop tegen een paar problemen op. Namelijk de header en het content laten doorlopen... hoe doe ik dit? Dus header helemaal in de breedte en content dat het mooi doorloopt.

http://twissy.rapifia.nl/coderen

Alvast bedankt,
Vadid

width:100% ?

Maartenl schreef:

width:100% ?

Dit is de style.css, waar moet ik het aanpassen?

/* CSS Document */
/*  Stylesheet | Author: Marjolein KFB Design 2011 */
body { height: 100%; margin: 0; padding: 0; background:#e8e8e8 repeat-x; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:e8e8e8; }
html{ height: 100%; }

#container {width:900px; margin:0 auto;} 
#header {background: url(afbeeldingen/header.gif); width: 900px; height: 160px; margin: 0;}
#header h1 {font-size: 30px; color:#f1f1f0; margin:0; padding:120px 0 0 100px; } 
#menu {background: url(afbeeldingen/menu.gif); width: 900px; height: 27px; margin: 0;}
#menuitems {text-align: center; padding-top: 3px;} 
#menuitems a {font-size: 11px; color: #f1f1f0; text-decoration: none;}
#menuitems a:hover { color: #cedfe8;}
#content {background: url(afbeeldingen/content1.gif); width: 900px; margin: 0; overflow:hidden;} 
#left { width: 195px; margin: 10px 0 0 50px; float:left;}
#right { width: 580px; margin: 10px 0 0 30px; float:left;}
#footer {background: url(afbeeldingen/footer.jpg); width: 900px; height: 35px; margin: 0;}
#footer h2 {font-size: 9px; color:#f1f1f0; text-align: center; padding-top: 2px; margin: 0;}

Vadid schreef:

Eerdere citaten tonen

Maartenl schreef:

width:100% ?

Dit is de style.css, waar moet ik het aanpassen?

/* CSS Document */
/*  Stylesheet | Author: Marjolein KFB Design 2011 */
body { height: 100%; margin: 0; padding: 0; background:#e8e8e8 repeat-x; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:e8e8e8; }
html{ height: 100%; }

#container {width:900px; margin:0 auto;} 
#header {background: url(afbeeldingen/header.gif); width: 900px; height: 160px; margin: 0;}
#header h1 {font-size: 30px; color:#f1f1f0; margin:0; padding:120px 0 0 100px; } 
#menu {background: url(afbeeldingen/menu.gif); width: 900px; height: 27px; margin: 0;}
#menuitems {text-align: center; padding-top: 3px;} 
#menuitems a {font-size: 11px; color: #f1f1f0; text-decoration: none;}
#menuitems a:hover { color: #cedfe8;}
#content {background: url(afbeeldingen/content1.gif); width: 900px; margin: 0; overflow:hidden;} 
#left { width: 195px; margin: 10px 0 0 50px; float:left;}
#right { width: 580px; margin: 10px 0 0 30px; float:left;}
#footer {background: url(afbeeldingen/footer.jpg); width: 900px; height: 35px; margin: 0;}
#footer h2 {font-size: 9px; color:#f1f1f0; text-align: center; padding-top: 2px; margin: 0;}

Bij container neem ik aan ?

Ikzelf vind hoe jij je CSS "uitlijnd" een beetje moeilijk om te zien, ik heb het even veranderd hoe ik het doe, maar dat is jou keuze:

/* CSS Document */
/*  Stylesheet | Author: Marjolein KFB Design 2011 */
body { height: 100%; margin: 0; padding: 0; background:#e8e8e8 repeat-x; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:e8e8e8; }
html{ height: 100%; }

#container {
width:900px;
margin:0 auto;
} 
#header {
background: url(afbeeldingen/header.gif);
width: 900px; 
height: 160px; 
margin: 0;
}

#header h1 {
font-size: 30px; 
color:#f1f1f0; 
margin:0; 
padding:120px 0 0 100px; } 

#menu {
background: url(afbeeldingen/menu.gif); 
width: 900px; 
height: 27px; 
margin: 0;
}

#menuitems {
text-align: center; 
padding-top: 3px;
} 

#menuitems a {
font-size: 11px; 
color: #f1f1f0;
text-decoration: none;
}

#menuitems a:hover {
color: #cedfe8;
}

#content {
background: url(afbeeldingen/content1.gif); 
width: 900px; 
margin: 0; 
overflow:hidden;
}
 
#left { 
width: 195px; 
margin: 10px 0 0 50px; 
float:left;
}

#right { 
width: 580px; 
margin: 10px 0 0 30px; 
float:left;
}

#footer {
background: url(afbeeldingen/footer.jpg); 
width: 900px; 
height: 35px; 
margin: 0;
}

#footer h2 {
font-size: 9px; 
color:#f1f1f0; 
text-align: center; 
padding-top: 2px; 
margin: 0;
}

Het is een hoop groter, maar het is veel overzichtelijker

Maartenl schreef:

Eerdere citaten tonen

Vadid schreef:

Eerdere citaten tonen

Maartenl schreef:

width:100% ?

Dit is de style.css, waar moet ik het aanpassen?

/* CSS Document */
/*  Stylesheet | Author: Marjolein KFB Design 2011 */
body { height: 100%; margin: 0; padding: 0; background:#e8e8e8 repeat-x; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:e8e8e8; }
html{ height: 100%; }

#container {width:900px; margin:0 auto;} 
#header {background: url(afbeeldingen/header.gif); width: 900px; height: 160px; margin: 0;}
#header h1 {font-size: 30px; color:#f1f1f0; margin:0; padding:120px 0 0 100px; } 
#menu {background: url(afbeeldingen/menu.gif); width: 900px; height: 27px; margin: 0;}
#menuitems {text-align: center; padding-top: 3px;} 
#menuitems a {font-size: 11px; color: #f1f1f0; text-decoration: none;}
#menuitems a:hover { color: #cedfe8;}
#content {background: url(afbeeldingen/content1.gif); width: 900px; margin: 0; overflow:hidden;} 
#left { width: 195px; margin: 10px 0 0 50px; float:left;}
#right { width: 580px; margin: 10px 0 0 30px; float:left;}
#footer {background: url(afbeeldingen/footer.jpg); width: 900px; height: 35px; margin: 0;}
#footer h2 {font-size: 9px; color:#f1f1f0; text-align: center; padding-top: 2px; margin: 0;}

Bij container neem ik aan ?

Dan komt ie half dubbel.. hmm naja eerst content oplossen.

toevoeging op 22 mei 2012, 1921:

Sanderc schreef:

Ikzelf vind hoe jij je CSS "uitlijnd" een beetje moeilijk om te zien, ik heb het even veranderd hoe ik het doe, maar dat is jou keuze:

/* CSS Document */
/*  Stylesheet | Author: Marjolein KFB Design 2011 */
body { height: 100%; margin: 0; padding: 0; background:#e8e8e8 repeat-x; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:e8e8e8; }
html{ height: 100%; }

#container {
width:900px;
margin:0 auto;
} 
#header {
background: url(afbeeldingen/header.gif);
width: 900px; 
height: 160px; 
margin: 0;
}

#header h1 {
font-size: 30px; 
color:#f1f1f0; 
margin:0; 
padding:120px 0 0 100px; } 

#menu {
background: url(afbeeldingen/menu.gif); 
width: 900px; 
height: 27px; 
margin: 0;
}

#menuitems {
text-align: center; 
padding-top: 3px;
} 

#menuitems a {
font-size: 11px; 
color: #f1f1f0;
text-decoration: none;
}

#menuitems a:hover {
color: #cedfe8;
}

#content {
background: url(afbeeldingen/content1.gif); 
width: 900px; 
margin: 0; 
overflow:hidden;
}
 
#left { 
width: 195px; 
margin: 10px 0 0 50px; 
float:left;
}

#right { 
width: 580px; 
margin: 10px 0 0 30px; 
float:left;
}

#footer {
background: url(afbeeldingen/footer.jpg); 
width: 900px; 
height: 35px; 
margin: 0;
}

#footer h2 {
font-size: 9px; 
color:#f1f1f0; 
text-align: center; 
padding-top: 2px; 
margin: 0;
}

Het is een hoop groter, maar het is veel overzichtelijker
Vind ik juist niet, maar dat is je eigen mening hé

header door laten lopen in de achtergrond?
Knip een stukje header uit en plaats deze in de body en laten herhalen met repeat-x en body op width: 100% zetten

Marjolein schreef:

header door laten lopen in de achtergrond?
Knip een stukje header uit en plaats deze in de body en laten herhalen met repeat-x en body op width: 100% zetten

Dat doe ik erna, wil liever eerst het content probleem oplossen

En leg je content probleem eens uitgebreid uit, dan kan ik mss helpen

PM gestuurd naar Sanderc, andere hulp mag ook

Ik zal subiet eens op mijn laptop er naar kijken

Vadid schreef:

Eerdere citaten tonen

Marjolein schreef:

header door laten lopen in de achtergrond?

Knip een stukje header uit en plaats deze in de body en laten herhalen met repeat-x en body op width: 100% zetten

Dat doe ik erna, wil liever eerst het content probleem oplossen

gewoon je afbeelding aanpassen zodat het mooi doorloopt?

Marjolein schreef:

Eerdere citaten tonen

Vadid schreef:

Eerdere citaten tonen

Marjolein schreef:

header door laten lopen in de achtergrond?

Knip een stukje header uit en plaats deze in de body en laten herhalen met repeat-x en body op width: 100% zetten

Dat doe ik erna, wil liever eerst het content probleem oplossen

gewoon je afbeelding aanpassen zodat het mooi doorloopt?

Maar hoe? Dat lukt dus niet..

Hoe wil je het dan?
Moet die gradient erin blijven en in heel je content of alleen het bovenste stukje?
Misschien kun je anders het ontwerp laten zien zodat ik kan kijken wat de bedoeling precies is?

Dit was het originele ontwerp, is al het een en ander aan veranderd zoals je ziet.