hyperlink
- Onderwerp starter willem008
- Startdatum
- Status
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Oef, wat 'n mazzel, niet tegenstrijdig 
Dat zou maar zo kunnen, want vraag 2 sitemakers hoe je 't moet doen en je krijgt 3 oplossingen.
csshunter heeft 't wat uitgebreider dan ik, zoals meestal, dus ik hoop dat je nu goed kunt kiezen.
Dat zou maar zo kunnen, want vraag 2 sitemakers hoe je 't moet doen en je krijgt 3 oplossingen.
csshunter heeft 't wat uitgebreider dan ik, zoals meestal, dus ik hoop dat je nu goed kunt kiezen.
TS
TS
willem008
Gebruiker
- Lid geworden
- 28 sep 2007
- Berichten
- 792
Nou ik heb even wat gemaakt het lukt denk wel heb de tekst met padding om maat gezet in het content.
Als ik de tekst in de header met padding wil verplaatsen wordt het een rommeltje de header gaat dan buiten het hoofdcontainer dat snap ik nog niet.
Verder als ik nu bijv een afbeelding in het content wil ,hoe pak ik dat het beste aan.
en ook bijv verschillende knopen in de menu balk
<!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" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Naamloos document</title>
</head>
<body bgcolor="#CCCCCC">
<div id="hoofdcontainer">
<div id="header">Wl.v.d.meer-Montage</div>
<div id="menu"></div>
<div id="content">wl vdmeer is een montage bedrijf voor</div>
</div>
</body>
</html>
css style
@charset "utf-8";
/* CSS Document */
#hoofdcontainer{
max-width: 1000px;
margin:0 auto;
background-color: #CCFFFF;
height: 500px;
width: 950px;
}
#menu {
background-color: #00FF00;
height: 350px;
float:left;
width:159px;
}
#content {
float:left;
background-color: #3333FF;
height: 250px;
width: 650px;
color:#FFFFFF;
padding-top: 50px;
padding-left: 30px;
}
#header {
background-color: #CCFF33;
height: 120px;
width: 950px;
text-align:center;
color: #FF0000;
background-image: url(image/Beeld_W%5B1%5D.L._vd_Meer.jpg);
background-repeat: no-repeat;
}
Als ik de tekst in de header met padding wil verplaatsen wordt het een rommeltje de header gaat dan buiten het hoofdcontainer dat snap ik nog niet.
Verder als ik nu bijv een afbeelding in het content wil ,hoe pak ik dat het beste aan.
en ook bijv verschillende knopen in de menu balk
<!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" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Naamloos document</title>
</head>
<body bgcolor="#CCCCCC">
<div id="hoofdcontainer">
<div id="header">Wl.v.d.meer-Montage</div>
<div id="menu"></div>
<div id="content">wl vdmeer is een montage bedrijf voor</div>
</div>
</body>
</html>
css style
@charset "utf-8";
/* CSS Document */
#hoofdcontainer{
max-width: 1000px;
margin:0 auto;
background-color: #CCFFFF;
height: 500px;
width: 950px;
}
#menu {
background-color: #00FF00;
height: 350px;
float:left;
width:159px;
}
#content {
float:left;
background-color: #3333FF;
height: 250px;
width: 650px;
color:#FFFFFF;
padding-top: 50px;
padding-left: 30px;
}
#header {
background-color: #CCFF33;
height: 120px;
width: 950px;
text-align:center;
color: #FF0000;
background-image: url(image/Beeld_W%5B1%5D.L._vd_Meer.jpg);
background-repeat: no-repeat;
}
Laatst bewerkt:
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Leuk dat je er zo mee bezig bent!
Ik kom eerst weer even zeuren over twee dingen die je niet vraagt
Als je nou toch nieuw begint, dan zou ik als doctype strict kiezen. Html of xhtml maakt dan eigenlijk (op het moment) niet zoveel uit. Dit is eigenlijk voor nieuwe sites bedoeld. Voordeel is dat je dan 'n waarschuwing krijgt als je 'n 'ouderwetse' methode voor opmaak gebruikt. In de toekomst mag dat helemaal niet meer, dus je site is dan ook gelijk klaar voor de eeuwigheid.
Strict doctype (heb xhtml genomen, omdat jij dat ook hebt):
In de bestandsnaam voor de afbeelding in de header zitten vreemde tekens. En hoofdletters. Ik zou echt alleen kleine letters, cijfers, _ en - gebruiken, en verder helemaal niets. Hier ga je vrijwel zeker problemen mee krijgen. Als 't niet in jouw computer is dan wel op internet of op 'n mac of op bsd of op wat dan ook.
Dit is trouwens wel het idee, wat je nu hebt.
Als je padding gebruikt in de header, mogelijk wordt de header dan te breed? (Ik raad maar even, maar heel veel mensen moeten hier in 't begin aan wennen.) De breedte van de header is 950 px. Als je nou bijvoorbeeld 50 px padding geeft, wordt die opgeteld bij die 950 px. Dus 50 + 950 + 50 = 1050 px: te breed.
Als je de breedte (in dit voorbeeld) 850 px zou maken, komt de uiteindelijke breedte met padding weer uit op 950 px.
Als dat 't niet is, dan moet je even de code hier neerzetten of 'n link.
De afbeeldingen kun je op allerlei manieren neerzetten. 'n Aantal pagina's van je site is hetzelfde, dus daar zou je dezelfde lay-out voor kunnen gebruiken. Bijvoorbeeld in #content weer twee divs maken: 1 voor de tekst, 1 voor de afbeeldingen.
Je kunt die divs dan weer naar links floaten en 'n breedte geven (dat levert in IE 6 vermoedelijk 'n koe van 'n fout op, maar dan kom je hier maar weer even roepen.)
'n Andere manier is om die twee divs absoluut neer te zetten, naast elkaar.
En binnen de ene div zet je dan de tekst, binnen de andere de afbeeldingen. Zoiets.
Of je geeft de div met de tekst 'n marge aan de rechterkant, en in die marge zet je dan de afbeeldingen absoluut gepositioneerd neer.
(Om te kunnen positioneren binnen 'n div moet je die div zelf ook 'n positie geven, anders kan het niet. Dus bij #container dan toevoegen: postion: relative; Dat heeft verder geen invloed, maar nu kun je kinderen van #container in #container positioneren.)
Binnen 'n menu zijn meer ingangen het beste (ook voor spraakbrowsers e.d.) en het makkelijkste te doen met 'n <ul>.
Omdat 'n <li> 'n blok-element is, komt elke link automatisch op 'n nieuwe regel te staan. En dan in de css iets als
Als je nou besluit om de kleur opeens goud in plaats van wit te maken, hoef je alleen maar op 1 plek in het css-bestand die kleur te veranderen.
De display: block; staat achter de <a> omdat dat 'n inline-element is. Dat betekent dat mensen exact op de tekst in de link moeten klikken. Als je er 'n blok-element van maakt, vult het de hele breedte van de <li> en wordt klikken geen behendigheidsoefening.
Edit: nog even over tekst en zo. Omdat je nu toch min of meer met iets nieuws begint, kun je ook relatief makkelijk je tekst gelijk indelen met <h>'s en zo. Tekst gewoon in 'n div. Alinea's in 'n <p> (levert gelijk wat ruimte op, prettiger leesbaar op 'n scherm).
<h1> voor de belangrijkste kop van de pagina. Onderkoppen: <h2>. En eventueel onder-onder-kop: <h3>.
Als de <h1> en zo te groot zijn, dan kun je lettergrootte e.d. prima aanpassen met css. Maar voor 'n zoekmachine (en spraakbrowsers e.d.) blijft de logische indeling dan toch bestaan.
Ik kom eerst weer even zeuren over twee dingen die je niet vraagt
Als je nou toch nieuw begint, dan zou ik als doctype strict kiezen. Html of xhtml maakt dan eigenlijk (op het moment) niet zoveel uit. Dit is eigenlijk voor nieuwe sites bedoeld. Voordeel is dat je dan 'n waarschuwing krijgt als je 'n 'ouderwetse' methode voor opmaak gebruikt. In de toekomst mag dat helemaal niet meer, dus je site is dan ook gelijk klaar voor de eeuwigheid.
Strict doctype (heb xhtml genomen, omdat jij dat ook hebt):
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">In de bestandsnaam voor de afbeelding in de header zitten vreemde tekens. En hoofdletters. Ik zou echt alleen kleine letters, cijfers, _ en - gebruiken, en verder helemaal niets. Hier ga je vrijwel zeker problemen mee krijgen. Als 't niet in jouw computer is dan wel op internet of op 'n mac of op bsd of op wat dan ook.
Dit is trouwens wel het idee, wat je nu hebt.
Als je padding gebruikt in de header, mogelijk wordt de header dan te breed? (Ik raad maar even, maar heel veel mensen moeten hier in 't begin aan wennen.) De breedte van de header is 950 px. Als je nou bijvoorbeeld 50 px padding geeft, wordt die opgeteld bij die 950 px. Dus 50 + 950 + 50 = 1050 px: te breed.
Als je de breedte (in dit voorbeeld) 850 px zou maken, komt de uiteindelijke breedte met padding weer uit op 950 px.
Als dat 't niet is, dan moet je even de code hier neerzetten of 'n link.
De afbeeldingen kun je op allerlei manieren neerzetten. 'n Aantal pagina's van je site is hetzelfde, dus daar zou je dezelfde lay-out voor kunnen gebruiken. Bijvoorbeeld in #content weer twee divs maken: 1 voor de tekst, 1 voor de afbeeldingen.
Je kunt die divs dan weer naar links floaten en 'n breedte geven (dat levert in IE 6 vermoedelijk 'n koe van 'n fout op, maar dan kom je hier maar weer even roepen.)
'n Andere manier is om die twee divs absoluut neer te zetten, naast elkaar.
En binnen de ene div zet je dan de tekst, binnen de andere de afbeeldingen. Zoiets.
Of je geeft de div met de tekst 'n marge aan de rechterkant, en in die marge zet je dan de afbeeldingen absoluut gepositioneerd neer.
(Om te kunnen positioneren binnen 'n div moet je die div zelf ook 'n positie geven, anders kan het niet. Dus bij #container dan toevoegen: postion: relative; Dat heeft verder geen invloed, maar nu kun je kinderen van #container in #container positioneren.)
Binnen 'n menu zijn meer ingangen het beste (ook voor spraakbrowsers e.d.) en het makkelijkste te doen met 'n <ul>.
HTML:
<div id=menu">
<ul>
<li><a href="eerste-link.html">Eerste link</a></li>
<li><a href="tweede-link.html">Eerste link</a></li>
<li><a href="derde-link.html">Eerste link</a></li>
<li><a href="vierde-link.html">Eerste link</a></li>
</ul>
</div>Omdat 'n <li> 'n blok-element is, komt elke link automatisch op 'n nieuwe regel te staan. En dan in de css iets als
Code:
li {width: 200px; height: 20px;}
li a {display: block;}
li a:hover {color: white;}De display: block; staat achter de <a> omdat dat 'n inline-element is. Dat betekent dat mensen exact op de tekst in de link moeten klikken. Als je er 'n blok-element van maakt, vult het de hele breedte van de <li> en wordt klikken geen behendigheidsoefening.
Edit: nog even over tekst en zo. Omdat je nu toch min of meer met iets nieuws begint, kun je ook relatief makkelijk je tekst gelijk indelen met <h>'s en zo. Tekst gewoon in 'n div. Alinea's in 'n <p> (levert gelijk wat ruimte op, prettiger leesbaar op 'n scherm).
<h1> voor de belangrijkste kop van de pagina. Onderkoppen: <h2>. En eventueel onder-onder-kop: <h3>.
Als de <h1> en zo te groot zijn, dan kun je lettergrootte e.d. prima aanpassen met css. Maar voor 'n zoekmachine (en spraakbrowsers e.d.) blijft de logische indeling dan toch bestaan.
Laatst bewerkt:
TS
TS
willem008
Gebruiker
- Lid geworden
- 28 sep 2007
- Berichten
- 792
even een ding ik heb nu
<body bgcolor="#CCCCCC">
<div id="hoofdcontainer">
<div id="header">Wl.v.d.meer-Montage</div>
<div id="menu"></div>
<div id="content">wl vdmeer is een montage bedrijf voor</div>
</div>
ik wil in het div content een afbeelding die ik dan ten opzichte van de randen van het div content kan positineren.
Hoe maak ik dat dan in mijn html
Zo ?
<div id="content"></div><div id="afbeelding"</div> ik werk met dreamweaver en hij geeft dan een foutmelding (tekst wordt geel)
en wat moet de style dan zijn om hem in dat content te kunnen positineren absolute of relatief ik neem aan absolute want relatief is toch ten opzichte van de natuurlijke flow ,hoor graag als het anders is
<body bgcolor="#CCCCCC">
<div id="hoofdcontainer">
<div id="header">Wl.v.d.meer-Montage</div>
<div id="menu"></div>
<div id="content">wl vdmeer is een montage bedrijf voor</div>
</div>
ik wil in het div content een afbeelding die ik dan ten opzichte van de randen van het div content kan positineren.
Hoe maak ik dat dan in mijn html
Zo ?
<div id="content"></div><div id="afbeelding"</div> ik werk met dreamweaver en hij geeft dan een foutmelding (tekst wordt geel)
en wat moet de style dan zijn om hem in dat content te kunnen positineren absolute of relatief ik neem aan absolute want relatief is toch ten opzichte van de natuurlijke flow ,hoor graag als het anders is
Laatst bewerkt:
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Van dreamweaver weet ik niets af, misschien 'n ander.
Ja, dat positioneren moet je even in de vingers krijgen.
De twee belangrijkste;
relative. De afbeelding (in dit geval) wordt gewoon op z'n normale plaats neergezet, alsof er helemaal geen position is opgegeven. DAARNA wordt de afbeelding verplaatst met wat je hebt opgegeven. Dus bij left: 10px; gaat de afbeelding 10 px naar links RELATIEF ten opzichte van waar hij normaal zou staan.
Hij wordt dus relatief ten opzichte van zichzelf verplaatst.
Maar hij blijft de oorspronkelijke ruimte innemen, al zie je hem daar niet meer staan. In bovenstaand geval krijg je links dus 'n lege ruimte van 10 px.
De tweede belangrijke manier: absoluut. Dan wordt verplaatst ten opzicht van iets anders. Dat 'anders' is het eerste ouder-element dat zelf 'n absolute of relatieve (of static, speelt hier niet) positie heeft. Als dat er niet is, wordt gepositioneerd ten opzichte van het venster van de browser.
Dus als je
img {position: absolute; left: 100px;} opgeeft, komt de img altijd op 100 px vanaf de linkerkant van het venster van de browser te staan. Ongeacht wat daar verder ook staat, desnoods vrolijk over iets anders heen. Absoluut positioneren is ook absoluut asociaal: het houdt geen enkele rekening met andere elementen.
Als je die img wilt positioneren ten opzichte van #content, dan moet je #content zelf 'n positie geven. Anders kan het niet.
Het is al voldoende om bij #content toe te voegen: position: relative;
Dan verandert er verder helemaal niets aan #content, maar de img komt nu met left: 100px; op 100 px vanaf de linkerkant van #content te staan.
Met right: 200px op 200 px vanaf de rechterkant van #content, enz.
Dus als je de img op 100 px van de linkerkant van #content wilt hebben:
css:
't Is even wennen, maar omdat je kunt bepalen ten opzichte waarvan die absolute positie geldt, blijk je uiteindelijk veel meer mogelijkheden te hebben.
En nu fladder ik de deur uit voor de rest van de dag!
Ja, dat positioneren moet je even in de vingers krijgen.
De twee belangrijkste;
relative. De afbeelding (in dit geval) wordt gewoon op z'n normale plaats neergezet, alsof er helemaal geen position is opgegeven. DAARNA wordt de afbeelding verplaatst met wat je hebt opgegeven. Dus bij left: 10px; gaat de afbeelding 10 px naar links RELATIEF ten opzichte van waar hij normaal zou staan.
Hij wordt dus relatief ten opzichte van zichzelf verplaatst.
Maar hij blijft de oorspronkelijke ruimte innemen, al zie je hem daar niet meer staan. In bovenstaand geval krijg je links dus 'n lege ruimte van 10 px.
De tweede belangrijke manier: absoluut. Dan wordt verplaatst ten opzicht van iets anders. Dat 'anders' is het eerste ouder-element dat zelf 'n absolute of relatieve (of static, speelt hier niet) positie heeft. Als dat er niet is, wordt gepositioneerd ten opzichte van het venster van de browser.
Dus als je
img {position: absolute; left: 100px;} opgeeft, komt de img altijd op 100 px vanaf de linkerkant van het venster van de browser te staan. Ongeacht wat daar verder ook staat, desnoods vrolijk over iets anders heen. Absoluut positioneren is ook absoluut asociaal: het houdt geen enkele rekening met andere elementen.
Als je die img wilt positioneren ten opzichte van #content, dan moet je #content zelf 'n positie geven. Anders kan het niet.
Het is al voldoende om bij #content toe te voegen: position: relative;
Dan verandert er verder helemaal niets aan #content, maar de img komt nu met left: 100px; op 100 px vanaf de linkerkant van #content te staan.
Met right: 200px op 200 px vanaf de rechterkant van #content, enz.
Dus als je de img op 100 px van de linkerkant van #content wilt hebben:
HTML:
<div id="content">
<img id="plaatje" src="blablabla" width="100" height="100" />
</div>css:
Code:
div#content {position: relative;}
img#plaatje {position: absolute; left: 100px;}'t Is even wennen, maar omdat je kunt bepalen ten opzichte waarvan die absolute positie geldt, blijk je uiteindelijk veel meer mogelijkheden te hebben.
En nu fladder ik de deur uit voor de rest van de dag!
Laatst bewerkt:
TS
TS
willem008
Gebruiker
- Lid geworden
- 28 sep 2007
- Berichten
- 792
Nou ik heb eens wat gemaakt.
Er zullen best nog wat fouten in zitten.
Ik zit nog even met dat menu ik heb die lijn gemaakt door het menu rechts een border mee te geven, ik weet niet of dat de juiste manier is.
verder wil ik zoals nu op mijn site ook heb ,als je over de links met je muis gaat dat het vakje kleurt, ben daar al een poosje mee bezig maar wil nog niet lukken.
Heb hem ook gecontroleert en er zitten toch nu al fouten in (waar ik niets van snap)
Ik heb hem ook getest in ff,ie6.ie7.opera en sarari en de verschillen zijn gering.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css layout</title>
<style type="text/css">
<!--
#hoofdcontainer {
max-width: 1000px;
margin:0 auto;
background-color: #14285f;
height: 500px;
width: 950px;
}
#header {
height: 120px;
width: 950px;
text-align:center;
color: #ffffff;
background-repeat: no-repeat;
background-color: #000000;
position: relative;
}
#menu {
background-color: #14285f;
height: 350px;
float:left;
width:159px;
font-family: Arial, Helvetica, sans-serif;
line-height: 30px;
font-size: 17px;
}
#content {
float:left;
background-color: #14285f;
height: 450px;
width: 757px;
color:#99ccff;
padding-top: 45px;
padding-left: 25px;
top: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
img#fotoboven {
position: absolute;
left: 750px;
top: 200px;
background-color: #FFFFFF;
}
img#fotoonder {
position: absolute;
left: 750px;
top: 400px;
background-color:#FFFFFF;
}
#logo {
background-color: #FFFFFF;
background:url(image/logo.jpg);
position: absolute;
left: 0px;
top: 0px;
}
#sublogo{
background-color: #FFFFFF;
background:url(image/logo.jpg);
position: absolute;
left: 200px;
top: 0px;
}
ul.navbar {
background:#14285f;
position: absolute;
height: 330px;
width: 125px;
left: 1px;
top: 200px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #99ccff;
list-style-type: none;
}
a:link {color:#ffffff; text-decoration:none;
}
a:visited {color:#ffffff; text-decoration:none;
}
a:hover {color:#000000; text-decoration:none;
}
a:active {color:#ffffff; text-decoration:none;
}
-->
</style>
</head>
<body bgcolor="#14285f">
<div id="hoofdcontainer">
<div id="header"><img id="logo" src="image/logo.jpg" width="140" height="120" alt="logo" /><img id="sublogo" src="image/proef.jpg" width="700" height="120" alt="sublogo" />
</div>
<div id="menu">
<ul class="navbar">
<li><a href="http://www.wlvdmeer-montage.nl" title="startpagina">Startpagina</a></li>
<li><a href="http://www.wlvdmeer-montage.nl/scherming.html" title="scherming">Scherming</a></li>
<li><a href="http://www.wlvdmeer-montage.nl/beluchting.html" title="beluchting">Beluchting</a></li>
<li><a href="http://www.wlvdmeer-montage.nl/hijsverwarming.html" title="hijsverwarming">Hijsverwarming</a></li>
<li><a href="http://www.wlvdmeer-montage.nl/scherming.html" title="hekwerken">Hekwerken</a></li>
<li><a href="http://www.wlvdmeer-montage.nl/materiaal.html" title="materiaal">Materiaal</a></li>
<li><a href="http://www.wlvdmeer-montage.nl/onderhoud.html" title="kasonderhoud">Kasonderhoud</a></li>
<li><a href="http://www.wlvdmeer-montage.nl/contact.html" title="contact">Contact</a></li>
<li><a href="http://www.wlvdmeer-montage.nl" title="webdesign">Webdesign</a></li>
<li><a href="http://www.wlvdmeer-montage.nl/sitemap.html" title="sitemap">Sitemap</a></li>
<li><a href="" title="fotoalbum">Fotoalbum</a></li>
</ul>
</div>
<div id="content"><img id="fotoboven" src="image/S7300284.JPG" width="200" height="130" alt="fotoboven" /><img id="fotoonder" src="image/logo.jpg" width="200" height="130" alt="fotoonder" />
<p><h3>Welkom op deze website</h3><br /><p>wlvdmeer is een montage bedrijf voor diversen montagewekzaamheden.<br />Op deze website geven we een overzicht van een aantal<br /> werkzaaamhedendie wij voor u kunnen verzorgen.<p>Voor meer informatie staan wij graag voor u klaar<p>En hopen in de toekomst mischien ook u van dienst te kunnen zijn.<p>Ook voor in en verkoop gebruikte materialen.<br />Voor het huidige aanbod kijk op de pagina materiaal.<p>Ik sta u graag te woord<br />Willem v/d meer</div>
</div>
</body>
</html>
Er zullen best nog wat fouten in zitten.
Ik zit nog even met dat menu ik heb die lijn gemaakt door het menu rechts een border mee te geven, ik weet niet of dat de juiste manier is.
verder wil ik zoals nu op mijn site ook heb ,als je over de links met je muis gaat dat het vakje kleurt, ben daar al een poosje mee bezig maar wil nog niet lukken.
Heb hem ook gecontroleert en er zitten toch nu al fouten in (waar ik niets van snap)
Ik heb hem ook getest in ff,ie6.ie7.opera en sarari en de verschillen zijn gering.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css layout</title>
<style type="text/css">
<!--
#hoofdcontainer {
max-width: 1000px;
margin:0 auto;
background-color: #14285f;
height: 500px;
width: 950px;
}
#header {
height: 120px;
width: 950px;
text-align:center;
color: #ffffff;
background-repeat: no-repeat;
background-color: #000000;
position: relative;
}
#menu {
background-color: #14285f;
height: 350px;
float:left;
width:159px;
font-family: Arial, Helvetica, sans-serif;
line-height: 30px;
font-size: 17px;
}
#content {
float:left;
background-color: #14285f;
height: 450px;
width: 757px;
color:#99ccff;
padding-top: 45px;
padding-left: 25px;
top: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
img#fotoboven {
position: absolute;
left: 750px;
top: 200px;
background-color: #FFFFFF;
}
img#fotoonder {
position: absolute;
left: 750px;
top: 400px;
background-color:#FFFFFF;
}
#logo {
background-color: #FFFFFF;
background:url(image/logo.jpg);
position: absolute;
left: 0px;
top: 0px;
}
#sublogo{
background-color: #FFFFFF;
background:url(image/logo.jpg);
position: absolute;
left: 200px;
top: 0px;
}
ul.navbar {
background:#14285f;
position: absolute;
height: 330px;
width: 125px;
left: 1px;
top: 200px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #99ccff;
list-style-type: none;
}
a:link {color:#ffffff; text-decoration:none;
}
a:visited {color:#ffffff; text-decoration:none;
}
a:hover {color:#000000; text-decoration:none;
}
a:active {color:#ffffff; text-decoration:none;
}
-->
</style>
</head>
<body bgcolor="#14285f">
<div id="hoofdcontainer">
<div id="header"><img id="logo" src="image/logo.jpg" width="140" height="120" alt="logo" /><img id="sublogo" src="image/proef.jpg" width="700" height="120" alt="sublogo" />
</div>
<div id="menu">
<ul class="navbar">
<li><a href="http://www.wlvdmeer-montage.nl" title="startpagina">Startpagina</a></li>
<li><a href="http://www.wlvdmeer-montage.nl/scherming.html" title="scherming">Scherming</a></li>
<li><a href="http://www.wlvdmeer-montage.nl/beluchting.html" title="beluchting">Beluchting</a></li>
<li><a href="http://www.wlvdmeer-montage.nl/hijsverwarming.html" title="hijsverwarming">Hijsverwarming</a></li>
<li><a href="http://www.wlvdmeer-montage.nl/scherming.html" title="hekwerken">Hekwerken</a></li>
<li><a href="http://www.wlvdmeer-montage.nl/materiaal.html" title="materiaal">Materiaal</a></li>
<li><a href="http://www.wlvdmeer-montage.nl/onderhoud.html" title="kasonderhoud">Kasonderhoud</a></li>
<li><a href="http://www.wlvdmeer-montage.nl/contact.html" title="contact">Contact</a></li>
<li><a href="http://www.wlvdmeer-montage.nl" title="webdesign">Webdesign</a></li>
<li><a href="http://www.wlvdmeer-montage.nl/sitemap.html" title="sitemap">Sitemap</a></li>
<li><a href="" title="fotoalbum">Fotoalbum</a></li>
</ul>
</div>
<div id="content"><img id="fotoboven" src="image/S7300284.JPG" width="200" height="130" alt="fotoboven" /><img id="fotoonder" src="image/logo.jpg" width="200" height="130" alt="fotoonder" />
<p><h3>Welkom op deze website</h3><br /><p>wlvdmeer is een montage bedrijf voor diversen montagewekzaamheden.<br />Op deze website geven we een overzicht van een aantal<br /> werkzaaamhedendie wij voor u kunnen verzorgen.<p>Voor meer informatie staan wij graag voor u klaar<p>En hopen in de toekomst mischien ook u van dienst te kunnen zijn.<p>Ook voor in en verkoop gebruikte materialen.<br />Voor het huidige aanbod kijk op de pagina materiaal.<p>Ik sta u graag te woord<br />Willem v/d meer</div>
</div>
</body>
</html>
peter vazed
Meubilair
- Lid geworden
- 8 sep 2000
- Berichten
- 7.972
25 fouten.
Simpel op te lossen.
Bekijk dit eens:
Simpel op te lossen.
Bekijk dit eens:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
css layout
</title>
<style type="text/css">
<!--
body
{
background-color: #14285f;
}
#hoofdcontainer {
max-width: 1000px;
margin:0 auto;
background-color: #14285f;
height: 500px;
width: 950px;
}
#header {
height: 120px;
width: 950px;
text-align:center;
color: #ffffff;
background-repeat: no-repeat;
background-color: #000000;
position: relative;
}
#menu {
background-color: #14285f;
height: 350px;
float:left;
width:159px;
font-family: Arial, Helvetica, sans-serif;
line-height: 30px;
font-size: 17px;
}
#content {
float:left;
background-color: #14285f;
height: 450px;
width: 757px;
color:#99ccff;
padding-top: 45px;
padding-left: 25px;
top: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
img#fotoboven {
position: absolute;
left: 750px;
top: 200px;
background-color: #FFFFFF;
}
img#fotoonder {
position: absolute;
left: 750px;
top: 400px;
background-color:#FFFFFF;
}
#logo {
background-color: #FFFFFF;
background:url(image/logo.jpg);
position: absolute;
left: 0px;
top: 0px;
}
#sublogo{
background-color: #FFFFFF;
background:url(image/logo.jpg);
position: absolute;
left: 200px;
top: 0px;
}
ul.navbar {
background:#14285f;
position: absolute;
height: 330px;
width: 125px;
left: 1px;
top: 200px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #99ccff;
list-style-type: none;
}
li:hover {background-color: #ff0000; color:#000000; text-decoration:none;
}
a:link {color:#ffffff; text-decoration:none;
}
a:visited {color:#ffffff; text-decoration:none;
}
a:hover {color:#000000; text-decoration:none;
}
a:active {color:#ffffff; text-decoration:none;
}
#info
{
width: 440px;
border: 1px solid #f000ff;
padding: 20px;
margin-left: 20px;
}
-->
</style>
</head>
<body>
<div id="hoofdcontainer">
<div id="header">
<img id="logo" src="image/logo.jpg" width="140" height="120" alt="logo" />
<img id="sublogo" src="image/proef.jpg" width="700" height="120" alt="sublogo" />
</div>
<div id="menu">
<ul class="navbar">
<li>
<a href="http://www.wlvdmeer-montage.nl" title="startpagina">Startpagina</a>
</li>
<li>
<a href="http://www.wlvdmeer-montage.nl/scherming.html" title="scherming">Scherming</a>
</li>
<li>
<a href="http://www.wlvdmeer-montage.nl/beluchting.html" title="beluchting">Beluchting</a>
</li>
<li>
<a href="http://www.wlvdmeer-montage.nl/hijsverwarming.html" title="hijsverwarming">Hijsverwarming</a>
</li>
<li>
<a href="http://www.wlvdmeer-montage.nl/scherming.html" title="hekwerken">Hekwerken</a>
</li>
<li>
<a href="http://www.wlvdmeer-montage.nl/materiaal.html" title="materiaal">Materiaal</a>
</li>
<li>
<a href="http://www.wlvdmeer-montage.nl/onderhoud.html" title="kasonderhoud">Kasonderhoud</a>
</li>
<li>
<a href="http://www.wlvdmeer-montage.nl/contact.html" title="contact">Contact</a>
</li>
<li>
<a href="http://www.wlvdmeer-montage.nl" title="webdesign">Webdesign</a>
</li>
<li>
<a href="http://www.wlvdmeer-montage.nl/sitemap.html" title="sitemap">Sitemap</a>
</li>
<li>
<a href="" title="fotoalbum">Fotoalbum</a>
</li>
</ul>
</div>
<div id="content">
<img id="fotoboven" src="image/S7300284.JPG" width="200" height="130" alt="fotoboven" />
<img id="fotoonder" src="image/logo.jpg" width="200" height="130" alt="fotoonder" />
<h3>
Welkom op deze website
</h3>
<br />
<hr style="width:95%; text-align: center;" />
<div id="info">
W.L. vd Meer is een montage bedrijf voor diversen montagewekzaamheden.
<br />
<br />
Op deze website geven we een overzicht van een aantal werkzaaamheden die wij
voor u kunnen verzorgen.
<br />
Voor meer informatie staan wij graag voor u klaar.
<br />
<br />
En hopen in de toekomst mischien ook u van dienst te kunnen zijn.
<br />
Ook voor in en verkoop gebruikte materialen.
<br />
Voor het huidige aanbod kijk op de pagina materiaal.
<br />
<br />
Ik sta u graag te woord.
<br />
<br />
Willem v/d Meer
</div>
</div>
</div>
</body>
</html>
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Hoi Willem,
Een kruispost met Peter, zie ik op het laatste moment.
[edit]O, en ook al jouw reactie daarop![/edit]
Ik had intussen dit opgeschreven:
Ik heb je pagina even hier neergezet.
Dat ziet er toch al heel aardig uit, toch?
En de css is 100% geldige code.
Er zijn enkele uitzonderingen bij: bv. binnen het <img src="" ...enz. /> element kan niets zitten (dat is alleen de afbeelding), maar dan moet zo'n element in xhtml afgesloten worden met />. In jouw code staat dat al correct.
Als je die </p>'s toevoegt, zal je zien dat alle andere onbegrijpelijke foutmeldingen opeens verdwenen zijn!
De style van elke link in die ul.navbar is dan:
Maar de links moeten niet altijd een achtergrondkleur krijgen, alleen bij er overheen bewegen ("hoveren"). Dan wordt het:
Nu hoeven we alleen nog maar te vertellen wat de achtergrondkleur dan moet worden, bijvoorbeeld:
Met vriendelijke groet,
CSShunter
Een kruispost met Peter, zie ik op het laatste moment.
[edit]O, en ook al jouw reactie daarop![/edit]
Ik had intussen dit opgeschreven:
Ik heb je pagina even hier neergezet.
Dat ziet er toch al heel aardig uit, toch?
En de css is 100% geldige code.
Zullen we even de resultaten van de html-validator bekijken?
- Regel 112: <body bgcolor="#14285f">
Code:
body {
background-color: #14285f;
}- regel 141: <p><h3>Welkom op deze website</h3><br /><p>wlvdmeer is ... enz.
- In de tekstregels staat steeds <p> voor het begin van een nieuwe alinea/regel, maar geen </p> aan het eind van die zin, voordat de nieuwe <p> begint.
HTML:
<h3>Dit is de kop</h3>
<p>Hier komt een alinea ... enz.</p>
<p>Dit is de volgende alinea ... enz.</p>Als je die </p>'s toevoegt, zal je zien dat alle andere onbegrijpelijke foutmeldingen opeens verdwenen zijn!
Met css is dat ook makkelijk op te lossen. Je begint met het element waar de links in zitten die die achtergrond moeten krijgen. Dat is de:
Code:
[FONT="Courier New"]ul.navbar[/FONT]
Code:
[FONT="Courier New"]ul.navbar a { ... enz. }[/FONT]
Code:
[FONT="Courier New"]ul.navbar a:hover { ... enz. }[/FONT]... en dan denk ik dat ik weet wat de volgende vraag gaat worden!
Met vriendelijke groet,
CSShunter
Laatst bewerkt:
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
De hover-oplossing hierboven zal ook in IE6 moeten werken.
IE6 kan géén hover-styles toekennen aan willekeurige elementen, maar alleen aan links.
Daarom werkt:
li:hover { ... }
niet in IE6, maar
li a:hover { ... }
wel in IE6.
In mijn code had het ook kunnen zijn:
ul.navbar li a:hover { ... }
maar omdat er binnen de <ul> geen andere elementen zitten dan de <li>'s, kan de li in het midden van de css ook gewoon weggelaten worden.
Ik denk dat het wel handig is de ul.navbar erbij te zetten, dan gaan eventuele links in een lijstje op een andere plaats op de pagina niet automatisch hetzelfde doen als in het menu, als je over die andere links heen muist.
CSShunter
IE6 kan géén hover-styles toekennen aan willekeurige elementen, maar alleen aan links.
Daarom werkt:
li:hover { ... }
niet in IE6, maar
li a:hover { ... }
wel in IE6.
In mijn code had het ook kunnen zijn:
ul.navbar li a:hover { ... }
maar omdat er binnen de <ul> geen andere elementen zitten dan de <li>'s, kan de li in het midden van de css ook gewoon weggelaten worden.
Ik denk dat het wel handig is de ul.navbar erbij te zetten, dan gaan eventuele links in een lijstje op een andere plaats op de pagina niet automatisch hetzelfde doen als in het menu, als je over die andere links heen muist.
CSShunter
TS
TS
willem008
Gebruiker
- Lid geworden
- 28 sep 2007
- Berichten
- 792
Heb weer even wat gemaak nog steeds zonder fouten ,met een ding zit ik toch een beetje
ik wil toch op diversen pagina's buiten het menu links nog een menu ik denk boven horizontaal maar ik weet nog niet hoe ik dan aanpak,ik heb nu staan link1 wil daarnaast nog meer linken link2 enz en ik wil ook meerder foto's plaatsen moet ik dan weer met tabel gaan werken of is dat uit de boze.
Graag een kleine hint zodat ik weer verder kan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
css layout materialen
</title>
<style type="text/css">
<!--
body
{
background-color: #14285f;
}
#hoofdcontainer {
max-width: 1000px;
margin:0 auto;
background-color: #14285f;
height: 800px;
width: 950px;
border: thin solid #FF0033;
}
#header {
height: 120px;
width: 950px;
text-align:center;
color: #ffffff;
background-repeat: no-repeat;
background-color: #000000;
position: relative;
}
#menu {
background-color: #14285f;
height: 425px;
float:left;
width:159px;
font-family: Arial, Helvetica, sans-serif;
line-height: 30px;
font-size: 17px;
border: thin solid #CCFF33;
}
#content {
float:left;
background-color: #14285f;
height: 450px;
width: 757px;
color:#99ccff;
padding-top: 45px;
padding-left: 10px;
top: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
border:thin solid #FFFFFF;
border:
}
img#fotoboven {
position: absolute;
left: 750px;
top: 200px;
background-color: #FFFFFF;
}
img#fotoonder {
position: absolute;
left: 750px;
top: 400px;
background-color:#FFFFFF;
}
#logo {
background-color: #FFFFFF;
background:url(image/logo.jpg);
position: absolute;
left: 0px;
top: 0px;
}
#sublogo{
background-color: #FFFFFF;
position: absolute;
left: 141px;
top: 0px;
}
#sublogo2{
background-color:#FFFFFF;
position:absolute;
left:342px;
top:0px;
}
#sublogo3{
background-color:#FFFFFF;
position:absolute;
left:543px;
top:0px;
}
#sublogo4{
background-color:#FFFFFF;
position:absolute;
left:758px;
top:0px;
}
ul.navbar {
background:#14285f;
position: absolute;
height: 330px;
width: 125px;
left: 1px;
top: 200px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #99ccff;
list-style-type: none;
}
li:hover {background-color: #000000; color:#000000; text-decoration:none;
}
a:link {color:#ffffff; text-decoration:none;
}
a:visited {color:#ffffff; text-decoration:none;
}
a:hover {color:#ffffff; text-decoration:none;
}
a:active {color:#ffffff; text-decoration:none;
}
#info
{
width: 35px;
height:15px;
border: 1px solid #ffffff;
padding-left:5px;
padding-top:0px;
margin-left: 0px;
background-color:#0066CC;
color:#FFFFFF;
}
#info2{
background-color:#ffffff;
color:#000000;
margin-left:10px;
margin-top:25px;
padding-left:10px;
padding-top:20px;
width:150px;
height:150px;
}
-->
</style>
</head>
<body>
<div id="hoofdcontainer">
<div id="header">
<img id="logo" src="image/logo.jpg" width="140" height="120" alt="logo"/>
<img id="sublogo" src="image/kas.jpg" width="200" height="120" alt="sublogo"/>
<img id="sublogo2" src="image/S7300284.JPG" width="200" height="120" alt="sublogo2"/>
<img id="sublogo3" src="image/screening1.jpg" width="214" height="120" alt="sublogo3"/>
<img id="sublogo4" src="image/Photo-0571.jpg" width="192" height="120" alt="sublogo4"/>
</div>
<div id="menu">
<ul class="navbar">
<li>
<a href="index.html" title="startpagina">Startpagina</a>
</li>
<li>
<a href="scherming.html" title="scherming">Scherming</a>
</li>
<li>
<a href="beluchting.html" title="beluchting">Beluchting</a>
</li>
<li>
<a href="hijsverwarming.html" title="hijsverwarming">Hijsverwarming</a>
</li>
<li>
<a href="hekwerken.html" title="hekwerken">Hekwerken</a>
</li>
<li>
<a href="materialen.html" title="materiaal">Materiaal</a>
</li>
<li>
<a href="kasonderhoud.html" title="kasonderhoud">Kasonderhoud</a>
</li>
<li>
<a href="http://montage.wlvdmeer-montage.nl/home" title="fotoalbum">Fotoalbum</a>
</li>
<li>
<a href="http://" title="webdesign">Webdesign</a>
</li>
<li>
<a href="sitemap.html" title="sitemap">Sitemap</a>
</li>
<li>
<a href="http://montage.wlvdmeer-montage.nl/#home" title="fotoalbum">Fotoalbum</a>
</li>
<li>
<a href="" title="teller">teller</a>
</li>
</ul>
</div>
<div id="content">
<img id="fotoboven" src="image/S7300284.JPG" width="200" height="130" alt="fotoboven" />
<img id="fotoonder" src="image/SNC00398.jpg" width="200" height="130" alt="fotoonder" />
<h3>
Materiaal aanbod
</h3>
<br />
<div id="info" title="info"><a href="beluchting.html" title="link1">link1</a>
</div>
<div id="info2" title="info2">info2
</div>
</div>
</div>
</body>
</html>
ik wil toch op diversen pagina's buiten het menu links nog een menu ik denk boven horizontaal maar ik weet nog niet hoe ik dan aanpak,ik heb nu staan link1 wil daarnaast nog meer linken link2 enz en ik wil ook meerder foto's plaatsen moet ik dan weer met tabel gaan werken of is dat uit de boze.
Graag een kleine hint zodat ik weer verder kan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
css layout materialen
</title>
<style type="text/css">
<!--
body
{
background-color: #14285f;
}
#hoofdcontainer {
max-width: 1000px;
margin:0 auto;
background-color: #14285f;
height: 800px;
width: 950px;
border: thin solid #FF0033;
}
#header {
height: 120px;
width: 950px;
text-align:center;
color: #ffffff;
background-repeat: no-repeat;
background-color: #000000;
position: relative;
}
#menu {
background-color: #14285f;
height: 425px;
float:left;
width:159px;
font-family: Arial, Helvetica, sans-serif;
line-height: 30px;
font-size: 17px;
border: thin solid #CCFF33;
}
#content {
float:left;
background-color: #14285f;
height: 450px;
width: 757px;
color:#99ccff;
padding-top: 45px;
padding-left: 10px;
top: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
border:thin solid #FFFFFF;
border:
}
img#fotoboven {
position: absolute;
left: 750px;
top: 200px;
background-color: #FFFFFF;
}
img#fotoonder {
position: absolute;
left: 750px;
top: 400px;
background-color:#FFFFFF;
}
#logo {
background-color: #FFFFFF;
background:url(image/logo.jpg);
position: absolute;
left: 0px;
top: 0px;
}
#sublogo{
background-color: #FFFFFF;
position: absolute;
left: 141px;
top: 0px;
}
#sublogo2{
background-color:#FFFFFF;
position:absolute;
left:342px;
top:0px;
}
#sublogo3{
background-color:#FFFFFF;
position:absolute;
left:543px;
top:0px;
}
#sublogo4{
background-color:#FFFFFF;
position:absolute;
left:758px;
top:0px;
}
ul.navbar {
background:#14285f;
position: absolute;
height: 330px;
width: 125px;
left: 1px;
top: 200px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #99ccff;
list-style-type: none;
}
li:hover {background-color: #000000; color:#000000; text-decoration:none;
}
a:link {color:#ffffff; text-decoration:none;
}
a:visited {color:#ffffff; text-decoration:none;
}
a:hover {color:#ffffff; text-decoration:none;
}
a:active {color:#ffffff; text-decoration:none;
}
#info
{
width: 35px;
height:15px;
border: 1px solid #ffffff;
padding-left:5px;
padding-top:0px;
margin-left: 0px;
background-color:#0066CC;
color:#FFFFFF;
}
#info2{
background-color:#ffffff;
color:#000000;
margin-left:10px;
margin-top:25px;
padding-left:10px;
padding-top:20px;
width:150px;
height:150px;
}
-->
</style>
</head>
<body>
<div id="hoofdcontainer">
<div id="header">
<img id="logo" src="image/logo.jpg" width="140" height="120" alt="logo"/>
<img id="sublogo" src="image/kas.jpg" width="200" height="120" alt="sublogo"/>
<img id="sublogo2" src="image/S7300284.JPG" width="200" height="120" alt="sublogo2"/>
<img id="sublogo3" src="image/screening1.jpg" width="214" height="120" alt="sublogo3"/>
<img id="sublogo4" src="image/Photo-0571.jpg" width="192" height="120" alt="sublogo4"/>
</div>
<div id="menu">
<ul class="navbar">
<li>
<a href="index.html" title="startpagina">Startpagina</a>
</li>
<li>
<a href="scherming.html" title="scherming">Scherming</a>
</li>
<li>
<a href="beluchting.html" title="beluchting">Beluchting</a>
</li>
<li>
<a href="hijsverwarming.html" title="hijsverwarming">Hijsverwarming</a>
</li>
<li>
<a href="hekwerken.html" title="hekwerken">Hekwerken</a>
</li>
<li>
<a href="materialen.html" title="materiaal">Materiaal</a>
</li>
<li>
<a href="kasonderhoud.html" title="kasonderhoud">Kasonderhoud</a>
</li>
<li>
<a href="http://montage.wlvdmeer-montage.nl/home" title="fotoalbum">Fotoalbum</a>
</li>
<li>
<a href="http://" title="webdesign">Webdesign</a>
</li>
<li>
<a href="sitemap.html" title="sitemap">Sitemap</a>
</li>
<li>
<a href="http://montage.wlvdmeer-montage.nl/#home" title="fotoalbum">Fotoalbum</a>
</li>
<li>
<a href="" title="teller">teller</a>
</li>
</ul>
</div>
<div id="content">
<img id="fotoboven" src="image/S7300284.JPG" width="200" height="130" alt="fotoboven" />
<img id="fotoonder" src="image/SNC00398.jpg" width="200" height="130" alt="fotoonder" />
<h3>
Materiaal aanbod
</h3>
<br />
<div id="info" title="info"><a href="beluchting.html" title="link1">link1</a>
</div>
<div id="info2" title="info2">info2
</div>
</div>
</div>
</body>
</html>
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Dat gaat er goed uitzien!
Tja, 't probleem is natuurlijk dat 'n scherm maar 'n beperkte ruimte heeft.
Dat menu, 't ligt eraan hoe groot het moet worden en zo. Kan 't niet in de ruimte die voor 't logo is gereserveerd (sublogo)? Omscrhijf 'n wat er ongeveer in moet en zo.
Is 't anders geen mogelijkheid om 'n paar ingangen van 't menu links uitklapbaar te maken? Dat scheelt ruimte.
Als die links gewoon naast link1 moeten komen, kun je ook weer gewoon zo'n <ul> gebruiken. Precies hetzelfde. Alleen moet je dan toevoegen:
Nu worden de links niet onder elkaar gezet, maar tegen elkaar aan 'gefloat', dus naast elkaar.
Wat die foto's betreft eigenlijk hetzelfde. Het ligt eraan hoeveel en zo. Als het er meer zijn dan op de pagina past, dan moet je gaan werken met 'n div die je kan scrollen. Hoewel dat niet echt ideaal is, want de meeste mensen scrollen liever niet.
Als je in de html die twee regels onder <div id="content"> vervangt door:
en dan de css voor die foto's (img#fotoboven en img#fotoonder) vervangt door:
Dan kun je bijvoorbeeld zes foto's kwijt. Ik heb ze even 'n border gegeven, anders zie je niets. Zomaar 'n mogelijkheid.
't float: right zorgt ervoor dat ze naar rechts naast elkaar worden gezet.
En de clear: right (bij elke even) zorgt ervoor dat die weer op 'n nieuwe regel wordt gezet.
Tabellen? O gruwel. Met divs en zo kun je veel preciezer werken. En 't is toegankelijker voor spraakbrowsers e.d, en dus voor zoekmachines. 't Is even lastig in 't begin, maar uiteindelijk is 't veel makkelijker.
Nog wat losse dingen. Als ik 't goed zie bestaat dat sublogo alleen uit 'n aantal afbeeldingen. Als die gewoon tegen elkaar aankomen, hoef je die helemaal niet te positioneren. 'n <img> komt gewoon op dezelfde regel als de vorige <img> te staan, netjes tegen elkaar aan.
Bij a:link, a:visited, a:hover, a:active zit mogelijk 'n foutje. Ik zou a:hover achteraan zetten, want anders werkt de hover niet als de link :active is.
Verder moet je nog toevoegen a:focus.
In Internet Explorer 6 en 7 (niet meer in acht) werkt :active foutief alsof het :focus is. :active is bij alle andere browsers (en in IE 8) als je op de link klikt.
Dus dan wordt 't
a:link, a:visited, a:active, a:focus, a:hover (tenzij je echt die andere volgorde wilt hebben).
En 'n deel van de css is te combineren. Omdat achter al die a:link enz. 't zelfde staat, kun je ook volstaan met:
ul#navbar a {color: #ffffff; text-decoration: none;}
Zo is er nog wat te combineren. Ik heb er ul#navbar voorgezet omdat je misschien ook nog wel gewone links ergens gaat krijgen. En dan zoek je je ongans waarom die niet van kleur verandert en niet wordt onderstreept (afdeling schade en schande, grinnik).
Nou, hoop dat je er wat aan hebt.
Tja, 't probleem is natuurlijk dat 'n scherm maar 'n beperkte ruimte heeft.
Dat menu, 't ligt eraan hoe groot het moet worden en zo. Kan 't niet in de ruimte die voor 't logo is gereserveerd (sublogo)? Omscrhijf 'n wat er ongeveer in moet en zo.
Is 't anders geen mogelijkheid om 'n paar ingangen van 't menu links uitklapbaar te maken? Dat scheelt ruimte.
Als die links gewoon naast link1 moeten komen, kun je ook weer gewoon zo'n <ul> gebruiken. Precies hetzelfde. Alleen moet je dan toevoegen:
Code:
ul#menu-2 li {float: left;}Wat die foto's betreft eigenlijk hetzelfde. Het ligt eraan hoeveel en zo. Als het er meer zijn dan op de pagina past, dan moet je gaan werken met 'n div die je kan scrollen. Hoewel dat niet echt ideaal is, want de meeste mensen scrollen liever niet.
Als je in de html die twee regels onder <div id="content"> vervangt door:
HTML:
<img class="fotolinks" src="image/S7300284.JPG" width="200" height="130" alt="fotoboven" />
<img class="fotorechts" src="image/SNC00398.jpg" width="200" height="130" alt="fotoonder" />
<img class="fotolinks" src="image/S7300284.JPG" width="200" height="130" alt="fotoboven" />
<img class="fotorechts" src="image/SNC00398.jpg" width="200" height="130" alt="fotoonder" />
<img class="fotolinks" src="image/S7300284.JPG" width="200" height="130" alt="fotoboven" />
<img class="fotorechts" src="image/SNC00398.jpg" width="200" height="130" alt="fotoonder" />en dan de css voor die foto's (img#fotoboven en img#fotoonder) vervangt door:
Code:
.fotorechts {float: right; width: 200px; height: 130px; border: red solid 1px;}
.fotolinks {float: right; clear: right; width: 200px; height: 130px; border: yellow solid 1px;}'t float: right zorgt ervoor dat ze naar rechts naast elkaar worden gezet.
En de clear: right (bij elke even) zorgt ervoor dat die weer op 'n nieuwe regel wordt gezet.
Tabellen? O gruwel. Met divs en zo kun je veel preciezer werken. En 't is toegankelijker voor spraakbrowsers e.d, en dus voor zoekmachines. 't Is even lastig in 't begin, maar uiteindelijk is 't veel makkelijker.
Nog wat losse dingen. Als ik 't goed zie bestaat dat sublogo alleen uit 'n aantal afbeeldingen. Als die gewoon tegen elkaar aankomen, hoef je die helemaal niet te positioneren. 'n <img> komt gewoon op dezelfde regel als de vorige <img> te staan, netjes tegen elkaar aan.
Bij a:link, a:visited, a:hover, a:active zit mogelijk 'n foutje. Ik zou a:hover achteraan zetten, want anders werkt de hover niet als de link :active is.
Verder moet je nog toevoegen a:focus.
In Internet Explorer 6 en 7 (niet meer in acht) werkt :active foutief alsof het :focus is. :active is bij alle andere browsers (en in IE 8) als je op de link klikt.
Dus dan wordt 't
a:link, a:visited, a:active, a:focus, a:hover (tenzij je echt die andere volgorde wilt hebben).
En 'n deel van de css is te combineren. Omdat achter al die a:link enz. 't zelfde staat, kun je ook volstaan met:
ul#navbar a {color: #ffffff; text-decoration: none;}
Zo is er nog wat te combineren. Ik heb er ul#navbar voorgezet omdat je misschien ook nog wel gewone links ergens gaat krijgen. En dan zoek je je ongans waarom die niet van kleur verandert en niet wordt onderstreept (afdeling schade en schande, grinnik).
Nou, hoop dat je er wat aan hebt.
Laatst bewerkt:
TS
TS
willem008
Gebruiker
- Lid geworden
- 28 sep 2007
- Berichten
- 792
Ok ga die eens rustig bekijken vanavond,
om op dat menu terug te komen ik heb nu in de pagina materiaal aanbod een uitklap menu
(formulier) daar wil ik denk van af, ik wil dan net onder de header horizontaal een menu,
Ik heb ook zitten denken aan een verticaal menu maar dat is denk geen mooi gezicht twee menu''s naast elkaar.
Verder nog een vraag ,als ik elementen in mijn content ga zetten hoe moet ik die dat
positineren.
In mijn geval heeft het content de eigenschap float left ,moet ik ze er dat absolute of relatief in zetten.
ik heb zo iets in gedachte ,ik zal het wel helemaal verkeert hebben gedaan hoewel hij nog steeds geen fouten geeft.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
css layout materialen
</title>
<style type="text/css">
<!--
body
{
background-color: #14285f;
}
#hoofdcontainer {
max-width: 1000px;
margin:0 auto;
background-color: #14285f;
height: 800px;
width: 950px;
border: thin solid #FF0033;
}
#header {
height: 120px;
width: 950px;
text-align:center;
color: #ffffff;
background-repeat: no-repeat;
background-color: #000000;
position: relative;
}
#menu {
background-color: #14285f;
height: 450px;
float:left;
width:159px;
font-family: Arial, Helvetica, sans-serif;
line-height: 30px;
font-size: 17px;
border: thin solid #CCFF33;
}
#content {
float:left;
background-color: #14285f;
height: 450px;
width: 757px;
color:#99ccff;
padding-top: 20px;
padding-left: 15px;
top: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
border:thin solid #FFFFFF;
border:
}
img#fotoboven {
position: absolute;
left: 750px;
top: 200px;
background-color: #FFFFFF;
}
img#fotoonder {
position: absolute;
left: 750px;
top: 400px;
background-color:#FFFFFF;
}
#logo {
background-color: #FFFFFF;
background:url(image/logo.jpg);
position: absolute;
left: 0px;
top: 0px;
}
#sublogo{
background-color: #FFFFFF;
position: absolute;
left: 141px;
top: 0px;
}
#sublogo2{
background-color:#FFFFFF;
position:absolute;
left:342px;
top:0px;
}
#sublogo3{
background-color:#FFFFFF;
position:absolute;
left:543px;
top:0px;
}
#sublogo4{
background-color:#FFFFFF;
position:absolute;
left:758px;
top:0px;
}
ul.navbar {
background:#14285f;
position: absolute;
height: 330px;
width: 125px;
left: 1px;
top: 200px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #99ccff;
list-style-type: none;
}
li:hover {background-color: #000000; color:#000000; text-decoration:none;
}
a:link {color:#ffffff; text-decoration:none;
}
a:visited {color:#ffffff; text-decoration:none;
}
a:hover {color:#ffffff; text-decoration:none;
}
a:active {color:#ffffff; text-decoration:none;
}
#link1
{
width: 95px;
height:15px;
border: 1px solid #ffffff;
padding-left:1px;
padding-top:0px;
margin-left: 0px;
background-color:#000000;
color:#ffffff;
position:absolute;
left: 200px;
top:190px;
}
#link2{
background-color:#000000;
color:#ffffff;
margin-left:102px;
margin-top:-17px;
padding-left:1px;
padding-top:0px;
width:105px;
height:15px;
border: 1px solid #FFFFFF;
position:absolute;
left: 203px;
top: 207px;
}
#link3{
background-color:#000000;
color:#ffffff;
text-align:center;
margin-left:102px;
margin-top:-17px;
padding-left:1px;
padding-top:0px;
width:105px;
height:15px;
border: 1px solid #FFFFFF;
position:absolute;
left: 318px;
top: 207px;
}
#link4{
background-color:#000000;
color:#ffffff;
text-align:center;
margin-left:102px;
margin-top:-12px;
padding-left:1px;
padding-top:0px;
width:105px;
height:15px;
border: 1px solid #FFFFFF;
position:absolute;
left: 432px;
top: 202px;
}
#link5{
background-color:#000000;
color:#ffffff;
text-align:center;
margin-left:102px;
margin-top:-12px;
padding-left:1px;
padding-top:0px;
width:105px;
height:15px;
border: 1px solid #FFFFFF;
position:absolute;
left: 545px;
top: 202px;
}
-->
</style>
</head>
<body>
<div id="hoofdcontainer">
<div id="header">
<img id="logo" src="image/logo.jpg" width="140" height="120" alt="logo"/>
<img id="sublogo" src="image/kas.jpg" width="200" height="120" alt="sublogo"/>
<img id="sublogo2" src="image/S7300284.JPG" width="200" height="120" alt="sublogo2"/>
<img id="sublogo3" src="image/screening1.jpg" width="214" height="120" alt="sublogo3"/>
<img id="sublogo4" src="image/Photo-0571.jpg" width="192" height="120" alt="sublogo4"/>
</div>
<div id="menu">
<ul class="navbar">
<li>
<a href="index.html" title="startpagina">Startpagina</a>
</li>
<li>
<a href="scherming.html" title="scherming">Scherming</a>
</li>
<li>
<a href="beluchting.html" title="beluchting">Beluchting</a>
</li>
<li>
<a href="hijsverwarming.html" title="hijsverwarming">Hijsverwarming</a>
</li>
<li>
<a href="hekwerken.html" title="hekwerken">Hekwerken</a>
</li>
<li>
<a href="materialen.html" title="materiaal">Materiaal</a>
</li>
<li>
<a href="kasonderhoud.html" title="kasonderhoud">Kasonderhoud</a>
</li>
<li>
<a href="http://montage.wlvdmeer-montage.nl/home" title="fotoalbum">Fotoalbum</a>
</li>
<li>
<a href="http://" title="webdesign">Webdesign</a>
</li>
<li>
<a href="sitemap.html" title="sitemap">Sitemap</a>
</li>
<li>
<a href="http://montage.wlvdmeer-montage.nl/#home" title="fotoalbum">Fotoalbum</a>
</li>
<li>
<a href="" title="teller">teller</a>
</li>
</ul>
</div>
<div id="content">
<br />
<br />
<br />
<br />
<br />
<br />
Wl.v.d.Meer voor levering gebruikte materialen.<p>Voor aanbod kijk in de gewenste categorie</p><br />Teveven zoeken wij nog gebruikte materialen.
<div id="link1"><a href="beluchting.html" title="beluchting">Teeltsystemen</a> </div>
<div id="link2"><a href="beluchting.html" title="beluchting">Teeltmaterialen</a> </div>
<div id="link3"><a href="beluchting.html" title="beluchting">Machines</a></div>
<div id="link4"><a href="beluchting.html" title="beluchting">Koelcellen</a></div>
<div id="link5"><a href="beluchting.html" title="beluchting">Spuitkarren</a></div>
</div>
</div>
</body>
</html>
om op dat menu terug te komen ik heb nu in de pagina materiaal aanbod een uitklap menu
(formulier) daar wil ik denk van af, ik wil dan net onder de header horizontaal een menu,
Ik heb ook zitten denken aan een verticaal menu maar dat is denk geen mooi gezicht twee menu''s naast elkaar.
Verder nog een vraag ,als ik elementen in mijn content ga zetten hoe moet ik die dat
positineren.
In mijn geval heeft het content de eigenschap float left ,moet ik ze er dat absolute of relatief in zetten.
ik heb zo iets in gedachte ,ik zal het wel helemaal verkeert hebben gedaan hoewel hij nog steeds geen fouten geeft.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
css layout materialen
</title>
<style type="text/css">
<!--
body
{
background-color: #14285f;
}
#hoofdcontainer {
max-width: 1000px;
margin:0 auto;
background-color: #14285f;
height: 800px;
width: 950px;
border: thin solid #FF0033;
}
#header {
height: 120px;
width: 950px;
text-align:center;
color: #ffffff;
background-repeat: no-repeat;
background-color: #000000;
position: relative;
}
#menu {
background-color: #14285f;
height: 450px;
float:left;
width:159px;
font-family: Arial, Helvetica, sans-serif;
line-height: 30px;
font-size: 17px;
border: thin solid #CCFF33;
}
#content {
float:left;
background-color: #14285f;
height: 450px;
width: 757px;
color:#99ccff;
padding-top: 20px;
padding-left: 15px;
top: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
border:thin solid #FFFFFF;
border:
}
img#fotoboven {
position: absolute;
left: 750px;
top: 200px;
background-color: #FFFFFF;
}
img#fotoonder {
position: absolute;
left: 750px;
top: 400px;
background-color:#FFFFFF;
}
#logo {
background-color: #FFFFFF;
background:url(image/logo.jpg);
position: absolute;
left: 0px;
top: 0px;
}
#sublogo{
background-color: #FFFFFF;
position: absolute;
left: 141px;
top: 0px;
}
#sublogo2{
background-color:#FFFFFF;
position:absolute;
left:342px;
top:0px;
}
#sublogo3{
background-color:#FFFFFF;
position:absolute;
left:543px;
top:0px;
}
#sublogo4{
background-color:#FFFFFF;
position:absolute;
left:758px;
top:0px;
}
ul.navbar {
background:#14285f;
position: absolute;
height: 330px;
width: 125px;
left: 1px;
top: 200px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #99ccff;
list-style-type: none;
}
li:hover {background-color: #000000; color:#000000; text-decoration:none;
}
a:link {color:#ffffff; text-decoration:none;
}
a:visited {color:#ffffff; text-decoration:none;
}
a:hover {color:#ffffff; text-decoration:none;
}
a:active {color:#ffffff; text-decoration:none;
}
#link1
{
width: 95px;
height:15px;
border: 1px solid #ffffff;
padding-left:1px;
padding-top:0px;
margin-left: 0px;
background-color:#000000;
color:#ffffff;
position:absolute;
left: 200px;
top:190px;
}
#link2{
background-color:#000000;
color:#ffffff;
margin-left:102px;
margin-top:-17px;
padding-left:1px;
padding-top:0px;
width:105px;
height:15px;
border: 1px solid #FFFFFF;
position:absolute;
left: 203px;
top: 207px;
}
#link3{
background-color:#000000;
color:#ffffff;
text-align:center;
margin-left:102px;
margin-top:-17px;
padding-left:1px;
padding-top:0px;
width:105px;
height:15px;
border: 1px solid #FFFFFF;
position:absolute;
left: 318px;
top: 207px;
}
#link4{
background-color:#000000;
color:#ffffff;
text-align:center;
margin-left:102px;
margin-top:-12px;
padding-left:1px;
padding-top:0px;
width:105px;
height:15px;
border: 1px solid #FFFFFF;
position:absolute;
left: 432px;
top: 202px;
}
#link5{
background-color:#000000;
color:#ffffff;
text-align:center;
margin-left:102px;
margin-top:-12px;
padding-left:1px;
padding-top:0px;
width:105px;
height:15px;
border: 1px solid #FFFFFF;
position:absolute;
left: 545px;
top: 202px;
}
-->
</style>
</head>
<body>
<div id="hoofdcontainer">
<div id="header">
<img id="logo" src="image/logo.jpg" width="140" height="120" alt="logo"/>
<img id="sublogo" src="image/kas.jpg" width="200" height="120" alt="sublogo"/>
<img id="sublogo2" src="image/S7300284.JPG" width="200" height="120" alt="sublogo2"/>
<img id="sublogo3" src="image/screening1.jpg" width="214" height="120" alt="sublogo3"/>
<img id="sublogo4" src="image/Photo-0571.jpg" width="192" height="120" alt="sublogo4"/>
</div>
<div id="menu">
<ul class="navbar">
<li>
<a href="index.html" title="startpagina">Startpagina</a>
</li>
<li>
<a href="scherming.html" title="scherming">Scherming</a>
</li>
<li>
<a href="beluchting.html" title="beluchting">Beluchting</a>
</li>
<li>
<a href="hijsverwarming.html" title="hijsverwarming">Hijsverwarming</a>
</li>
<li>
<a href="hekwerken.html" title="hekwerken">Hekwerken</a>
</li>
<li>
<a href="materialen.html" title="materiaal">Materiaal</a>
</li>
<li>
<a href="kasonderhoud.html" title="kasonderhoud">Kasonderhoud</a>
</li>
<li>
<a href="http://montage.wlvdmeer-montage.nl/home" title="fotoalbum">Fotoalbum</a>
</li>
<li>
<a href="http://" title="webdesign">Webdesign</a>
</li>
<li>
<a href="sitemap.html" title="sitemap">Sitemap</a>
</li>
<li>
<a href="http://montage.wlvdmeer-montage.nl/#home" title="fotoalbum">Fotoalbum</a>
</li>
<li>
<a href="" title="teller">teller</a>
</li>
</ul>
</div>
<div id="content">
<br />
<br />
<br />
<br />
<br />
<br />
Wl.v.d.Meer voor levering gebruikte materialen.<p>Voor aanbod kijk in de gewenste categorie</p><br />Teveven zoeken wij nog gebruikte materialen.
<div id="link1"><a href="beluchting.html" title="beluchting">Teeltsystemen</a> </div>
<div id="link2"><a href="beluchting.html" title="beluchting">Teeltmaterialen</a> </div>
<div id="link3"><a href="beluchting.html" title="beluchting">Machines</a></div>
<div id="link4"><a href="beluchting.html" title="beluchting">Koelcellen</a></div>
<div id="link5"><a href="beluchting.html" title="beluchting">Spuitkarren</a></div>
</div>
</div>
</body>
</html>
Laatst bewerkt:
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Ha, had ik net gereageerd, staat er intussen nieuwe code. Gelukkig nog niet verstuurd, m'n reactie.
Eerst even: boven in #content staat 'n hele serie <br />'s. Ook even wennen, maar 'n <br /> wordt eigenlijk alleen nog gebruikt waar hij voor is bedoeld: 1 nieuwe regel binnen 'n <p> of zo. Als je je padding-top bij #content iets hoger maakt, heb je geen <br />'s nodig. En die padding-top werkt gelijk voor álle pagina's, omdat die in 'n externe stylesheet komt te staan.
Als je dan besluit dat je 't 10 px hoger wilt hebben, hoef je niet op elke pagina 'n <br /> weg te halen, maar alleen in de stylesheet 1 cijfer te veranderen.
Dat tweede menu kan veel makkelijker. Dat kon je ook weer (zoals eigenlijk altijd 't beste is voor 'n menu) in 'n <ul> zetten. Dat is veel en veel minder werk, beter toegankelijk voor spraakbrowsers (en zoekmachines dus), makkelijker te wijzigen, enz.
Je zou zoiets kunnen doen.
En dan gewoon bovenin #content. Dus niet onder de tekst zoals nu. Het is veel makkelijker als de html (zoveel mogelijk) dezelfde volgorde heeft als op het scherm.
De css zou dan zoiets zijn:
Ik heb de ul 'n id gegeven om 'n botsing met de andere ul te voorkomen. Als je over 'n link hovert, kleurt deze zwart. Dat komt omdat die gewoon 'meelift' op de css voor de andere <ul>. Als je dat niet wilt moet je die andere <ul> 'n id geven.
Elke link zit nu in 'n <li>. 'n <li> begint op 'n nieuwe regel, om dat te voorkomen float ik ze. Omdat de woorden in de tekst nogal verschillend van lengte zijn, gebruik ik 'n padding voor wat afstand. Maar je kunt ook 'n vaste breedte gebruiken.
De border en zo moet nog wat worden bijgewerkt, want die is nu dubbel. Maar dit is 't idee.
Je zou ook 'n nieuwe div kunnen maken onder de header en dit menu daar neer kunnen zetten. Bij 'n tabel zou je dan 'n complete renovatie moeten uitvoeren, met divs kun je gewoon simpel 'n nieuwe div tussenvoegen. Tussen #header en #menu. Is maar net waar je dit tweede menu wilt hebben.
Wat betreft 't positioneren van dingen in #content: Je moet #content zien als 'n heel eigen hok, helemaal los van de rest. (Nou ja, min of meer.) Hoe je daar dingen in wilt gaan neerzetten kun je bepalen helemaal los van hoe je dat doet in de header, in 't menu, enz. (Klopt niet helemaal, soms beïnvloedt het elkaar, maar dat merk je snel genoeg.)
Dus je kunt binnen #content gewoon <p>'s gebruiken. Of gewoon 'n lang verhaal neerzetten zonder enige opmaak. Of 'n afbeelding floaten, of positioneren met position. Precies wat het makkelijkste uitkomt.
Er is maar 1 voorwaarde: als je position wilt gebruiken binnen #content, moet je #content in de css position: relative; geven. Dat heeft verder geen enkele invloed, maar anders kun je niet dingen binnen #content positioneren ten opzichte van #content.
position: absolute zou ik in principe zo weinig mogelijk gebruiken, omdat 't soms knap lastige bijwerkingen heeft. Als je bijvoorbeeld dat menu niet absoluut neerzet, zoals jij had gedaan, maar float, zoals ik heb gedaan, is er geen probleem als er #content van maat verandert. Bij absolute kan dat wel heel problematisch zijn.
Eerst even: boven in #content staat 'n hele serie <br />'s. Ook even wennen, maar 'n <br /> wordt eigenlijk alleen nog gebruikt waar hij voor is bedoeld: 1 nieuwe regel binnen 'n <p> of zo. Als je je padding-top bij #content iets hoger maakt, heb je geen <br />'s nodig. En die padding-top werkt gelijk voor álle pagina's, omdat die in 'n externe stylesheet komt te staan.
Als je dan besluit dat je 't 10 px hoger wilt hebben, hoef je niet op elke pagina 'n <br /> weg te halen, maar alleen in de stylesheet 1 cijfer te veranderen.
Dat tweede menu kan veel makkelijker. Dat kon je ook weer (zoals eigenlijk altijd 't beste is voor 'n menu) in 'n <ul> zetten. Dat is veel en veel minder werk, beter toegankelijk voor spraakbrowsers (en zoekmachines dus), makkelijker te wijzigen, enz.
Je zou zoiets kunnen doen.
HTML:
<ul id="menu-hor">
<li><a href="beluchting.html" title="beluchting">Teeltsystemen</a></li>
<li><a href="beluchting.html" title="beluchting">Teeltmaterialen</a></li>
<li><a href="beluchting.html" title="beluchting">Machines</a></li>
<li><a href="beluchting.html" title="beluchting">Koelcellen</a></li>
</ul>De css zou dan zoiets zijn:
Code:
ul#menu-hor {padding: 0; margin: 0; list-style: none;}
ul#menu-hor li {float: left; height: 15px; border: solid 1px #fff; padding: 0 10px;}Ik heb de ul 'n id gegeven om 'n botsing met de andere ul te voorkomen. Als je over 'n link hovert, kleurt deze zwart. Dat komt omdat die gewoon 'meelift' op de css voor de andere <ul>. Als je dat niet wilt moet je die andere <ul> 'n id geven.
Elke link zit nu in 'n <li>. 'n <li> begint op 'n nieuwe regel, om dat te voorkomen float ik ze. Omdat de woorden in de tekst nogal verschillend van lengte zijn, gebruik ik 'n padding voor wat afstand. Maar je kunt ook 'n vaste breedte gebruiken.
De border en zo moet nog wat worden bijgewerkt, want die is nu dubbel. Maar dit is 't idee.
Je zou ook 'n nieuwe div kunnen maken onder de header en dit menu daar neer kunnen zetten. Bij 'n tabel zou je dan 'n complete renovatie moeten uitvoeren, met divs kun je gewoon simpel 'n nieuwe div tussenvoegen. Tussen #header en #menu. Is maar net waar je dit tweede menu wilt hebben.
Wat betreft 't positioneren van dingen in #content: Je moet #content zien als 'n heel eigen hok, helemaal los van de rest. (Nou ja, min of meer.) Hoe je daar dingen in wilt gaan neerzetten kun je bepalen helemaal los van hoe je dat doet in de header, in 't menu, enz. (Klopt niet helemaal, soms beïnvloedt het elkaar, maar dat merk je snel genoeg.)
Dus je kunt binnen #content gewoon <p>'s gebruiken. Of gewoon 'n lang verhaal neerzetten zonder enige opmaak. Of 'n afbeelding floaten, of positioneren met position. Precies wat het makkelijkste uitkomt.
Er is maar 1 voorwaarde: als je position wilt gebruiken binnen #content, moet je #content in de css position: relative; geven. Dat heeft verder geen enkele invloed, maar anders kun je niet dingen binnen #content positioneren ten opzichte van #content.
position: absolute zou ik in principe zo weinig mogelijk gebruiken, omdat 't soms knap lastige bijwerkingen heeft. Als je bijvoorbeeld dat menu niet absoluut neerzet, zoals jij had gedaan, maar float, zoals ik heb gedaan, is er geen probleem als er #content van maat verandert. Bij absolute kan dat wel heel problematisch zijn.
Laatst bewerkt:
TS
TS
willem008
Gebruiker
- Lid geworden
- 28 sep 2007
- Berichten
- 792
ok bedankt
heb nu dat menu toegepast werk perfect, het is allemaal niet zo moeilijk als je het een keer gedaan heb .
maar zoals je al eerder heb opgemerkt als je het eenmaal snapt is het heel mooi dat css.
alleen je moet het even door hebben en de logica snappen.
Ik ga er dan nu ook maar mee door zodat ik mijn site met css op het web kan zetten,
maar het blijft moeilijk
heb nu dat menu toegepast werk perfect, het is allemaal niet zo moeilijk als je het een keer gedaan heb .
maar zoals je al eerder heb opgemerkt als je het eenmaal snapt is het heel mooi dat css.
alleen je moet het even door hebben en de logica snappen.
Ik ga er dan nu ook maar mee door zodat ik mijn site met css op het web kan zetten,
maar het blijft moeilijk
Laatst bewerkt:
TS
TS
willem008
Gebruiker
- Lid geworden
- 28 sep 2007
- Berichten
- 792
Goede dag
Ik zit met een foutje waar ik maar niet uitkom
Ik het in het content een tekstvak toegevoegt "tekstmat" hij heeft nu een hoogte van 25px
als ik nu in mij style #tekstmat de hoogte 80 maak gaan het hellemaal fout,ik heb alles geprobeert maar kom er echt niet uit ik weet zeker dat het simpel is alleen ik zie het nog niet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
css layout materialen
</title>
<style type="text/css">
<!--
body
{
background-color: #14285f;
}
#hoofdcontainer {
max-width: 1000px;
margin:0 auto;
background-color: #14285f;
height: 800px;
width: 950px;
border: thin solid #ffffff;
}
#header {
height: 120px;
width: 950px;
text-align:center;
color: #ffffff;
background-repeat: no-repeat;
background-color: #000000;
position: relative;
}
#menu {
background-color: #14285f;
height: 450px;
float:left;
width:159px;
font-family: Arial, Helvetica, sans-serif;
line-height: 30px;
font-size: 17px;
border: thin solid #14285f;
margin-left:2px;
}
#content {
float:left;
background-color: #14285f;
height: 500px;
width: 757px;
color:#99ccff;
padding-top: 20px;
padding-left: 15px;
top: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
border:thin solid #ffffff;
border:
}
img#fotoboven {
position: absolute;
left: 750px;
top: 200px;
background-color: #FFFFFF;
}
img#fotoonder {
position: absolute;
left: 750px;
top: 400px;
background-color:#FFFFFF;
}
#logo {
background-color: #FFFFFF;
background:url(image/logo.jpg);
position: absolute;
left: 0px;
top: 0px;
}
#sublogo{
background-color: #FFFFFF;
position: absolute;
left: 141px;
top: 0px;
}
#sublogo2{
background-color:#FFFFFF;
position:absolute;
left:342px;
top:0px;
}
#sublogo3{
background-color:#FFFFFF;
position:absolute;
left:543px;
top:0px;
}
#sublogo4{
background-color:#FFFFFF;
position:absolute;
left:758px;
top:0px;
}
ul.navbar {
background:#14285f;
position: absolute;
height: 330px;
width: 125px;
left: 1px;
top: 200px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #99ccff;
list-style-type: none;
}
li:hover {background-color: #000000; color:#000000; text-decoration:none;
}
a:link {color:#ffffff; text-decoration:none;
}
a:visited {color:#ffffff; text-decoration:none;
}
a:hover {color:#ffffff; text-decoration:none;
}
a:active {color:#ffffff; text-decoration:none;
}
ul#menu-hor {padding: 0; margin: 0; list-style: none;}
ul#menu-hor li {float: left; height: 15px; border: solid 1px #14285f; padding: 0 10px;}
#tekstmat{
position:relative;
left: 20px;
top: 75px;
background-color: #dcdcdc;
width:400px;
height:25px;
color:#000000;
padding-left:100px;
}
-->
</style>
</head>
<body>
<div id="hoofdcontainer">
<div id="header">
<img id="logo" src="image/logo.jpg" width="140" height="120" alt="logo"/>
<img id="sublogo" src="image/kas.jpg" width="200" height="120" alt="sublogo"/>
<img id="sublogo2" src="image/S7300284.JPG" width="200" height="120" alt="sublogo2"/>
<img id="sublogo3" src="image/screening1.jpg" width="214" height="120" alt="sublogo3"/>
<img id="sublogo4" src="image/Photo-0571.jpg" width="192" height="120" alt="sublogo4"/>
</div>
<div id="menu">
<ul class="navbar">
<li>
<a href="index.html" title="startpagina">Startpagina</a>
</li>
<li>
<a href="scherming.html" title="scherming">Scherming</a>
</li>
<li>
<a href="beluchting.html" title="beluchting">Beluchting</a>
</li>
<li>
<a href="hijsverwarming.html" title="hijsverwarming">Hijsverwarming</a>
</li>
<li>
<a href="hekwerken.html" title="hekwerken">Hekwerken</a>
</li>
<li>
<a href="materialen.html" title="materiaal">Materiaal</a>
</li>
<li>
<a href="kasonderhoud.html" title="kasonderhoud">Kasonderhoud</a>
</li>
<li>
<a href="http://montage.wlvdmeer-montage.nl/home" title="fotoalbum">Fotoalbum</a>
</li>
<li>
<a href="http://" title="webdesign">Webdesign</a>
</li>
<li>
<a href="sitemap.html" title="sitemap">Sitemap</a>
</li>
<li>
<a href="http://montage.wlvdmeer-montage.nl/#home" title="fotoalbum">Fotoalbum</a>
</li>
<li>
<a href="" title="teller">teller</a>
</li>
</ul>
</div>
<div id="content"><div id="tekstmat">tekstmat</div>
<ul id="menu-hor">
<li><a href="beluchting.html" title="beluchting">Teeltsystemen</a></li>
<li><a href="beluchting.html" title="beluchting">Teeltmaterialen</a></li>
<li><a href="beluchting.html" title="beluchting">Machines</a></li>
<li><a href="beluchting.html" title="beluchting">Koelcellen</a></li>
<li><a href="beluchting.html" title="beluchting">Elektra</a></li>
<li><a href="beluchting.html" title="beluchting">Motoren</a></li>
<li><a href="beluchting.html" title="beluchting">Spuitkarren</a></li>
<li><a href="beluchting.html" title="beluchting">Overige</a></li>
</ul>
</div>
</div>
</body>
</html>
Ik zit met een foutje waar ik maar niet uitkom
Ik het in het content een tekstvak toegevoegt "tekstmat" hij heeft nu een hoogte van 25px
als ik nu in mij style #tekstmat de hoogte 80 maak gaan het hellemaal fout,ik heb alles geprobeert maar kom er echt niet uit ik weet zeker dat het simpel is alleen ik zie het nog niet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
css layout materialen
</title>
<style type="text/css">
<!--
body
{
background-color: #14285f;
}
#hoofdcontainer {
max-width: 1000px;
margin:0 auto;
background-color: #14285f;
height: 800px;
width: 950px;
border: thin solid #ffffff;
}
#header {
height: 120px;
width: 950px;
text-align:center;
color: #ffffff;
background-repeat: no-repeat;
background-color: #000000;
position: relative;
}
#menu {
background-color: #14285f;
height: 450px;
float:left;
width:159px;
font-family: Arial, Helvetica, sans-serif;
line-height: 30px;
font-size: 17px;
border: thin solid #14285f;
margin-left:2px;
}
#content {
float:left;
background-color: #14285f;
height: 500px;
width: 757px;
color:#99ccff;
padding-top: 20px;
padding-left: 15px;
top: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
border:thin solid #ffffff;
border:
}
img#fotoboven {
position: absolute;
left: 750px;
top: 200px;
background-color: #FFFFFF;
}
img#fotoonder {
position: absolute;
left: 750px;
top: 400px;
background-color:#FFFFFF;
}
#logo {
background-color: #FFFFFF;
background:url(image/logo.jpg);
position: absolute;
left: 0px;
top: 0px;
}
#sublogo{
background-color: #FFFFFF;
position: absolute;
left: 141px;
top: 0px;
}
#sublogo2{
background-color:#FFFFFF;
position:absolute;
left:342px;
top:0px;
}
#sublogo3{
background-color:#FFFFFF;
position:absolute;
left:543px;
top:0px;
}
#sublogo4{
background-color:#FFFFFF;
position:absolute;
left:758px;
top:0px;
}
ul.navbar {
background:#14285f;
position: absolute;
height: 330px;
width: 125px;
left: 1px;
top: 200px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #99ccff;
list-style-type: none;
}
li:hover {background-color: #000000; color:#000000; text-decoration:none;
}
a:link {color:#ffffff; text-decoration:none;
}
a:visited {color:#ffffff; text-decoration:none;
}
a:hover {color:#ffffff; text-decoration:none;
}
a:active {color:#ffffff; text-decoration:none;
}
ul#menu-hor {padding: 0; margin: 0; list-style: none;}
ul#menu-hor li {float: left; height: 15px; border: solid 1px #14285f; padding: 0 10px;}
#tekstmat{
position:relative;
left: 20px;
top: 75px;
background-color: #dcdcdc;
width:400px;
height:25px;
color:#000000;
padding-left:100px;
}
-->
</style>
</head>
<body>
<div id="hoofdcontainer">
<div id="header">
<img id="logo" src="image/logo.jpg" width="140" height="120" alt="logo"/>
<img id="sublogo" src="image/kas.jpg" width="200" height="120" alt="sublogo"/>
<img id="sublogo2" src="image/S7300284.JPG" width="200" height="120" alt="sublogo2"/>
<img id="sublogo3" src="image/screening1.jpg" width="214" height="120" alt="sublogo3"/>
<img id="sublogo4" src="image/Photo-0571.jpg" width="192" height="120" alt="sublogo4"/>
</div>
<div id="menu">
<ul class="navbar">
<li>
<a href="index.html" title="startpagina">Startpagina</a>
</li>
<li>
<a href="scherming.html" title="scherming">Scherming</a>
</li>
<li>
<a href="beluchting.html" title="beluchting">Beluchting</a>
</li>
<li>
<a href="hijsverwarming.html" title="hijsverwarming">Hijsverwarming</a>
</li>
<li>
<a href="hekwerken.html" title="hekwerken">Hekwerken</a>
</li>
<li>
<a href="materialen.html" title="materiaal">Materiaal</a>
</li>
<li>
<a href="kasonderhoud.html" title="kasonderhoud">Kasonderhoud</a>
</li>
<li>
<a href="http://montage.wlvdmeer-montage.nl/home" title="fotoalbum">Fotoalbum</a>
</li>
<li>
<a href="http://" title="webdesign">Webdesign</a>
</li>
<li>
<a href="sitemap.html" title="sitemap">Sitemap</a>
</li>
<li>
<a href="http://montage.wlvdmeer-montage.nl/#home" title="fotoalbum">Fotoalbum</a>
</li>
<li>
<a href="" title="teller">teller</a>
</li>
</ul>
</div>
<div id="content"><div id="tekstmat">tekstmat</div>
<ul id="menu-hor">
<li><a href="beluchting.html" title="beluchting">Teeltsystemen</a></li>
<li><a href="beluchting.html" title="beluchting">Teeltmaterialen</a></li>
<li><a href="beluchting.html" title="beluchting">Machines</a></li>
<li><a href="beluchting.html" title="beluchting">Koelcellen</a></li>
<li><a href="beluchting.html" title="beluchting">Elektra</a></li>
<li><a href="beluchting.html" title="beluchting">Motoren</a></li>
<li><a href="beluchting.html" title="beluchting">Spuitkarren</a></li>
<li><a href="beluchting.html" title="beluchting">Overige</a></li>
</ul>
</div>
</div>
</body>
</html>
Laatst bewerkt:
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Daar zit wel vooruitgang in!
Waar je tegenaan loopt is iets waar je in 't begin even heel erg aan moet wennen, maar wat uiteindelijk ook handig kan zijn. (hoewel je dat op dit moment waarschijnlijk helemaal niet met me eens bent ) Overigens is er maar 'n beperkt aantal van dit soort nieuwe dingen, dus er is hoop.
Allereerst: #tekstmat moet onder #menu-hor komen. Dan is het veel makkelijker om dat in de html ook onder #menu-hor te zetten, in plaats van erboven. Als er geen reden is om dat niet te doen, is dezelfde volgorde altijd makkelijker. De html heeft van zichzelf de neiging om van boven naar beneden op het scherm te worden gezet, en die volg je dan.
Ik heb dus eerst
ónder #menu-hor gezet.
Als je het nu 75px hoog maakt, gaat 't wel goed.
Maar er is nog iets meer aan de hand. #tekstmat heeft 'n relatieve positie. Het wordt 75 px omlaag en 20 px naar rechts gezet. Echter: voor de rest van de pagina is het net alsof #tekstmat nog op de plaats staat zonder relatieve positie.
Jij hebt 't 75 px omlaag gezet, maar voor andere delen van de pagina is dat helemaal niet gebeurd. Dat is even heel lastig om in de vingers te krijgen, maar uiteindelijk blijkt ook dit zeer handig te zijn.
Wat er bij jou dus gebeurde: #tekstmat staat voor 't oog onder 't menu. Maar in werkelijkheid neemt 't nog de plaats in alsof je geen top:75 px hebt opgegeven. Dat gaat goed met 'n hoogte van 25 px, maar 75 px hoogte past niet boven 't menu.
Als #tekstmat ónder #menu-hor staat, kun je gewoon de hoogte 75 px maken.
position: relative (en helemaal position: absolute) gebruik ik alleen als het niet anders kan (en dat is heel vaak), juist vanwege dit soort problemen.
In dit geval zou je bij #tekstmat misschien ook dit kunnen doen:
Allereerst dus ónder menu-hor zetten in de html, dus waar 't ook op 't scherm komt te staan.
Vervolgens deze css:
(Je moet de maten natuurlijk nog even aanpassen).
De position: relative heb ik weggehaald, want die is hier waarschijnlijk niet nodig (ligt ook 'n beetje aan wat je verder nog gaat doen.)
De top en left heb ik vervangen door margin-left en margin-top.
Nu wordt #tekstmat echt verplaatst, dus ook voor de andere elementen op de pagina. Wat je nu ziet op het scherm is nu wat er ook écht gebeurt.
Tja, eenvoudig, als je 't eenmaal weet. Maar de meeste mensen vinden 't knap lastig om dit te leren. Ik heb in 't verleden ook regelmatig alle heiligen uit de hemel aangeroepen om 't netjes te zeggen. Ik vind 't prima gaan.
Edit: ha, csshunter was me net voor!
Waar je tegenaan loopt is iets waar je in 't begin even heel erg aan moet wennen, maar wat uiteindelijk ook handig kan zijn. (hoewel je dat op dit moment waarschijnlijk helemaal niet met me eens bent
) Overigens is er maar 'n beperkt aantal van dit soort nieuwe dingen, dus er is hoop.Allereerst: #tekstmat moet onder #menu-hor komen. Dan is het veel makkelijker om dat in de html ook onder #menu-hor te zetten, in plaats van erboven. Als er geen reden is om dat niet te doen, is dezelfde volgorde altijd makkelijker. De html heeft van zichzelf de neiging om van boven naar beneden op het scherm te worden gezet, en die volg je dan.
Ik heb dus eerst
HTML:
<div id="tekstmat">tekstmat</div>Als je het nu 75px hoog maakt, gaat 't wel goed.
Maar er is nog iets meer aan de hand. #tekstmat heeft 'n relatieve positie. Het wordt 75 px omlaag en 20 px naar rechts gezet. Echter: voor de rest van de pagina is het net alsof #tekstmat nog op de plaats staat zonder relatieve positie.
Jij hebt 't 75 px omlaag gezet, maar voor andere delen van de pagina is dat helemaal niet gebeurd. Dat is even heel lastig om in de vingers te krijgen, maar uiteindelijk blijkt ook dit zeer handig te zijn.
Wat er bij jou dus gebeurde: #tekstmat staat voor 't oog onder 't menu. Maar in werkelijkheid neemt 't nog de plaats in alsof je geen top:75 px hebt opgegeven. Dat gaat goed met 'n hoogte van 25 px, maar 75 px hoogte past niet boven 't menu.
Als #tekstmat ónder #menu-hor staat, kun je gewoon de hoogte 75 px maken.
position: relative (en helemaal position: absolute) gebruik ik alleen als het niet anders kan (en dat is heel vaak), juist vanwege dit soort problemen.
In dit geval zou je bij #tekstmat misschien ook dit kunnen doen:
Allereerst dus ónder menu-hor zetten in de html, dus waar 't ook op 't scherm komt te staan.
Vervolgens deze css:
Code:
#tekstmat{
margin-left: 20px;
margin-top: 75px;
background-color: #dcdcdc;
width:400px;
height:75px;
color:#000000;
padding-left:100px;
}De position: relative heb ik weggehaald, want die is hier waarschijnlijk niet nodig (ligt ook 'n beetje aan wat je verder nog gaat doen.)
De top en left heb ik vervangen door margin-left en margin-top.
Nu wordt #tekstmat echt verplaatst, dus ook voor de andere elementen op de pagina. Wat je nu ziet op het scherm is nu wat er ook écht gebeurt.
Tja, eenvoudig, als je 't eenmaal weet. Maar de meeste mensen vinden 't knap lastig om dit te leren. Ik heb in 't verleden ook regelmatig alle heiligen uit de hemel aangeroepen om 't netjes te zeggen. Ik vind 't prima gaan.
Edit: ha, csshunter was me net voor!
Laatst bewerkt:
- Status
