Webwereld

Divs meereken

Gestart doorDerksen31 reacties61 weergaven
Log in om mee te praten

32 berichten · pagina 2 van 3

Marjolein

Lid

Berichten
15.446
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
oke mooi smileJe css wordt dan:

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

body { height: 100%; margin: 0; padding: 0; background:#82accf; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }

#container {width:900px; margin:0 auto;} 

#header {background: url(header.png); width: 900px; height: 160px; margin: 0;}

#menu {background: url(menu.png); width: 900px; height: 20px; margin: 0;}
#menuitems {text-align: center; padding-top: 5px;} 
#menuitems a {font-size: 10px; color: #FFFFFF; text-decoration: none;} 
#menuitems a:hover { color: #f72d2d;}
#content {width: 900px; background-image: url(urlafbeelding); overflow:hidden; margin:0;}
#div1  {width:200px; margin: 0; text-align:center; padding-top: 5px; float:left} 
#div1 a {font-size: 10px; color: #FFFFFF; text-decoration: none;} 
#div1 a:hover { color: #f72d2d;}

#div2 {width:700px; margin: 0; text-align:center; padding-top: 5px; float:left} 
#div2 a {font-size: 10px; color: #FFFFFF; text-decoration: none;} 
#div2 a:hover { color: #f72d2d;}


vergeet niet je url even erin te zetten bij content

en je HTML:

<!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=iso-8859-1" />
<title>Heerenveen Nieuws</title>
<link href="style.css" rel="stylesheet" type="text/css" />


</head>

<body>
<div id="container">

<div id="header"><a href="index.html"><img src="logo.png" alt="sc Heerenveen"></a></div>

<div id="menu">
<div id="menuitems">
<a href="#">home</a> | <a href="#">nieuws</a> | <a href="#">fotos</a> | <a href="#">contact</a>
</div>
</div>

<div id="content">
<div id="div1"><br /><b>Link partners:</b><br /><br /><a href="http://www.feanfan.nl/">feanfan - Magazine sc Heerenveen</a><br /><br />
<a href="http://www.feanfans.nl/">feanfans - Uitgebreide foto reportages</a><br /><br /><a href="http://www.feanonline.nl/">feanonline - Fan site sc Heerenveen</a><br /><br /><a href="http://www.nieuwnoord.org/">nieuw noord - Sfeerteam nieuw noord</a><br /><br /><br />
<a href="http://www.nieuwnoord.org/portal/"><img src="nieuwnoord.png" alt="steun nieuw noord"></a><br /><br />
<a href="http://www.sc-heerenveen.nl/">sc Heerenveen - officiele club site</a>
</div>

<div id="div2">hoi<br />hoi<br /></div>
</div>



</div>

</body>
</html>
0
Derksen

Lid · Topicstarter

Berichten
30
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
dus ik hoef alleen deze .html en .css over te nemen de url te veranderen in de url van mijn plaatje en het is klaarredface
0
Marjolein

Lid

Berichten
15.446
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
als het goed is wel, als er nog iets niet klopt dan hoor ik het wel smile
0
Derksen

Lid · Topicstarter

Berichten
30
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Marjolein, ongelooflijk bedanktthumbsupworshippyecht super!

//wat ik me trouwens nog wel afvroeg, staan er nu geen overbodige dingen in mijn css bestand of html bestand? wil alles zo netjes mogelijk houden, dus alles wat nu voor niets meer dient kan er wel uit.

//2 berichten samengevoegd (die dubbelpostbeveiliging is er niet voor niets hè? yummie)
0
Derksen

Lid · Topicstarter

Berichten
30
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
wat ik me trouwens nog wel afvroeg, staan er nu geen overbodige dingen in mijn css bestand of html bestand? wil alles zo netjes mogelijk houden, dus alles wat nu voor niets meer dient kan er wel uit.
0
Marjolein

Lid

Berichten
15.446
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
nee, volgens mij is het zo wel goed.
Persoonlijk zou ik wel je html beter uitlijnen zodat het overzichtelijker is.
0
Derksen

Lid · Topicstarter

Berichten
30
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Marjolein schreef:
nee, volgens mij is het zo wel goed.
Persoonlijk zou ik wel je html beter uitlijnen zodat het overzichtelijker is.
Hoe bedoel je dit?clown
0
Marjolein

Lid

Berichten
15.446
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
zoiets, dat je met tabs werkt, dus dat een nieuwe regel iets verder inspringt.
Spoiler tonen
<!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=iso-8859-1" />
   <title>Heerenveen Nieuws</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

   <div id="header">
      <a href="index.html"><img src="logo.png" alt="sc Heerenveen"></a>
   </div>

      <div id="menu">
         <div id="menuitems">
            <a href="#">home</a> | 
            <a href="#">nieuws</a> | 
            <a href="#">fotos</a> | 
            <a href="#">contact</a>
         </div>
      </div>

      <div id="content">
         <div id="div1">
            <br /><b>Link partners:</b><br /><br /><a href="http://www.feanfan.nl/">feanfan - Magazine sc Heerenveen</a><br /><br /><a href="http://www.feanfans.nl/">feanfans - Uitgebreide foto reportages</a><br /><br /><a href="http://www.feanonline.nl/">feanonline - Fan site sc Heerenveen</a><br /><br /><a href="http://www.nieuwnoord.org/">nieuw noord - Sfeerteam nieuw noord</a><br /><br /><br />
<a href="http://www.nieuwnoord.org/portal/"><img src="nieuwnoord.png" alt="steun nieuw noord"></a><br /><br />
<a href="http://www.sc-heerenveen.nl/">sc Heerenveen - officiele club site</a>
         </div>

         <div id="div2">
            hoi<br />hoi<br />
         </div>
      </div>

</div>

</body>
</html>
0
Derksen

Lid · Topicstarter

Berichten
30
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
ooh oke,

waarom werkt deze code niet:

.css:
Spoiler tonen
/* CSS Document */

body { height: 100%; margin: 0; padding: 0; background:#82accf; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }

#container {width:900px; margin:0 auto;}

#header {background: url(header.png); width: 900px; height: 160px; margin: 0;}

#menu {background: url(menu.png); width: 900px; height: 20px; margin: 0;}
#menuitems {text-align: center; padding-top: 5px;}
#menuitems a {font-size: 10px; color: #FFFFFF; text-decoration: none;}
#menuitems a:hover { color: #f72d2d;}
#content {width: 900px; background-image: url(content.png); overflow:hidden; margin:0;}
#div1 {width:200px; margin: 0; text-align:center; padding-top: 5px; float:left}
#div1 a {font-size: 10px; color: #FFFFFF; text-decoration: none;}
#div1 a:hover { color: #f72d2d;}

#div2 {width:700px; margin: 0; text-align: left; padding: 5px; float:left}
#div2 a {font-size: 10px; color: #FFFFFF; text-decoration: none;}
#div2 a:hover { color: #f72d2d;}
de tekst komt nu in mijn menu balk te staat en hoort in het witte gedeelte, 5 px vanaf links en 5px van top
0
Ewan

Lid

Berichten
8.302
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Je bent na "left" een ; vergeten
0
Derksen

Lid · Topicstarter

Berichten
30
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Helpt nietfrown
0
Mextijs

Lid

Berichten
787
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Na float:left een ; vergeten bedoelt hij.
0
Marjolein

Lid

Berichten
15.446
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Derksen schreef:
Helpt nietfrown
ik denk eerder dat het aan je html ligt, kun je die even posten?
0
Derksen

Lid · Topicstarter

Berichten
30
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Marjolein schreef:
Eerdere citaten tonen
Derksen schreef:
Helpt nietfrown
ik denk eerder dat het aan je html ligt, kun je die even posten?
Wat laat maar dit is mijn htmlbiggrin
.html:
Spoiler tonen
en op de screen is dus te zien dat de tekst in het menu balk staat:
Spoiler tonen
Afbeelding
0
Marjolein

Lid

Berichten
15.446
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
oh zo, ik dacht dat je tekst in de blauwe balk erboven stond yummiemaar ik zie de fout al, zit toch in je css:

#div2 {width:700px; margin: 0; text-align: left; padding-top: 5px; float:left;}


padding moet padding-top zijn.

en als je het ook 5px naar links wil wordt div2 zo:

#div2 {width:695px; margin: 0; text-align: left; padding: 5px 0 0 5px; float:left;}
0

Jouw reactie

Deel je idee, stel een vraag of help een ander verder.

Editor laden…

Praat mee met de One2xs-community.

Inloggen om te reageren