Tutorials >
CSS >
Div element
|
|
 Gepost op: 23 oktober 2004 - 10:13 |
|
|
|
MySQL ver gevorderde
 |
Maarten, dit is eht een goede tutorial. heb er weer veel bij geleerd! Alleen wat bedoel je precies met container?
5/5 |
|
|
|
|
| Gepost op: 23 oktober 2004 - 12:16 |
|
|
|
 
Grafische gevorderde
|
als je bv hebt
<div id="blaat">
<div>blaat</div>
<div>aap</div>
</div>
dan is id="blaat" de container div, dus zeg maar wat alles omhult |
|
|
|
|
| Gepost op: 23 oktober 2004 - 22:07 |
|
|
|
MySQL ver gevorderde
|
|
|
|
|
| Gepost op: 30 oktober 2004 - 00:17 |
|
|
|
Moderator
|
Hmm, en als je het volgende wilt ?
+----------------+
| header |
+---+------------+
+ M | content |
+ e | |
+ n | |
+ u | |
+ | |
+---+------------+
+ footer |
+----------------+
+----------------+ +---+------------+ + M | content | + e | | + n | | + u | | + | | +---+------------+ + footer | +----------------+
Waarbij de content een variabele hoogte heeft - deze kan korter of langer dan de pagina-hoogte zijn, maar je wilt wel dat de footer altijd tegen de bodem van je browser geplakt zit zeg maar...
Ik ben gewend om met tabellen te werken, dus heb nog weinig gevoel voor DIV's... |
|
|
|
|
| Gepost op: 30 oktober 2004 - 19:35 |
|
|
|
Grafische gevorderde
|
in dat geval ga je met float werken, geen positioning.
Je zet gewoon dit zeg maar als setup
<div>header</div>
<div class="containter">
<div style="float:left;">Menu</div>
<div>Content</div>
</div>
<div>Footer</div>
Hierbij moet je wel opletten dat je clear:left goed toepast, ik kan me nu ff gaan vergissen, maar dan voeg je zowiets toe:
<div>header</div>
<div class="containter">
<div style="float:left;">Menu</div>
<div>Content</div>
<br style="clear: left;">
</div>
<div>Footer</div>
Op deze manier krijg je wel een enter eerst, maar je kunt ook gewoon een div toepassen of als het nodig is de visibility op hidden zetten. |
|
|
|
|
| Gepost op: 20 november 2004 - 13:24 |
|
|
|
Nieuw lid
|
het lukt mij niet om:
.header {
margin: 20px;
padding: 10px;
height: 100px;
}
.menu {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
.content {
top: 0;
margin-left: 200px;
margin-right: 15px;
}
<div class="header">Header</div>
<div class="menu">
Menu
</div>
<div class="content">
Floating Content
</div>
toe te passen. kan ik dit gewoon in een html editor doen? en dan alles in de body zetten? of hoe zit dat. want ik heb alles ingevoerd in de body van mijn pagina maar ik blijf bij de voorbeeld pagina alleen de tekst header,menu,content met al zijn variabelen zien...:\ |
|
|
|
|
| Gepost op: 20 november 2004 - 14:06 |
|
|
|
Grafische gevorderde
|
<head>
<style>
.header {
margin: 20px;
padding: 10px;
height: 100px;
}
.menu {
position: absolute;
left: 15px;
top: 160px;
width: 200px;
}
.content {
top: 0;
margin-left: 200px;
margin-right: 15px;
}
</style>
</head> |
|
|
|
|
| Gepost op: 01 december 2004 - 12:24 |
|
|
|
Nieuw lid
|
ik zie vaak op de meeste website's dat ze tabellen gebruiken. ik gebruik ook tabellen maar vind het niet zo fijn werken, toch..
wat zijn de nadelen van div; waarom zou ik ze niet gebruiken en wel tabellen? |
|
|
|
|
| Gepost op: 19 december 2004 - 11:17 |
|
|
|
PHP ver gevorderde
|
| ja, en heb je dan helemaal geen tabellen meer nodig? |
|
|
|
|
| Gepost op: 12 februari 2005 - 11:29 |
|
|
|
PHP expert
|
Nadelen van div?
Zijn er niet.
En je hebt wel nog tabellen nodig om data in weer te geven, maar niet voor je layout.
Citaat: deze kan korter of langer dan de pagina-hoogte zijn, maar je wilt wel dat de footer altijd tegen de bodem van je browser geplakt zit zeg maar...
Dat kan, maar dan moet je wel javascript gebruiken:
http://www.overhoor.info/vragen_maken.php?ID=1
Als je de pagina opslaat, en dan de tekst verwijderd, blijft de footer toch beneden |
|
|
|
|
| Gepost op: 17 maart 2005 - 15:32 |
|
|
|
Onbekend
|
Ligt het aan mij of werkt dit niet:
.links {
position: absolute;
left: 5px;
padding: 0px;
top: 0px;
width: 150px;
}
.midden {
margin-left: 150px;
padding: 0px;
margin-right: 150px;
top: 0px;
}
.rechts {
position: absolute;
right: 15px;
padding: 0px;
top: 0px;
width: 150px;
}
<div class="links">
Links
</div>
<div class="midden">
Midden
</div>
<div class="rechts">
Floating Rechts
</div>
.links { position: absolute; left: 5px; padding: 0px; top: 0px; width: 150px; } .midden { margin-left: 150px; padding: 0px; margin-right: 150px; top: 0px; } .rechts { position: absolute; right: 15px; padding: 0px; top: 0px; width: 150px; } <div class="links"> Links </div> <div class="midden"> Midden </div> <div class="rechts"> Floating Rechts </div>
|
|
|
|
|
| Gepost op: 16 april 2005 - 09:41 |
|
|
|
PHP expert
|
Wat werkt er niet dan?
Volgens mij zou dat moeten werken. |
|
|
|
|
| Gepost op: 04 juni 2005 - 09:53 |
|
|
|
PHP gevorderde
|
onClick en die dingen heten geen attributen, maar events!
en width en height zou bij de attributen moeten.
verder goeie tut. |
|
|
|
|
| Gepost op: 22 augustus 2005 - 15:37 |
|
|
|
HTML beginner
|
Ik wil graag 4 div's naast (of over) elkaar hebben. De opstelling moet zo worden:
Links - opvulling | center | opvulling - rechts
Hierbij moet opvulling van het blok "links" naar "rechts" lopen. Deze waarden zijn allemaal nog redelijk eenvoudig te geven aan de div's (volgens mij). Dan moet "center" eigenlijk de opvulling overlappen. Verder is denk ik aan de naam ook wel te zien dat "center" ook gecentreerd moet worden. Nu komen mij vragen:
- Hoe kan ik ervoor zorgen dat "center" ook daadwerkelijk in het midden van de pagina komt te staan? (alleen horizontaal gezien dus he)
- Als ik de div "center" in de code ná de div "opvulling" laat komen, overlapt deze dan ook "opvulling"?
Alvast bedankt voor jullie hulp.
Met vriendelijke groet,
Stijn Bertens |
|
|
|
|
| Gepost op: 05 maart 2007 - 12:02 |
|
|
|
PHP beginner
|
ik zie niet egt een voordeel in div's tov tables, je hebt weinig html, dat is dan ook het ENIGE voordeel volgens mij, ik vind div's nogal moeilijk om mee te werken.. je hebt HOPEN CSS, die je allemaal kan gaan aanpassen als je 1 ding veranderd wil aan je website.. doe mij maar tabellen 
PS: wel goede tutorial, vind div's gewoon niet handig
Een paar voordelen zijn
-Veel makkelijker in te delen, je zit niet altijd vast aan rows en colomns
-Veel beter aan te passen, elk stukje kun je laten doen wat je wilt
-Sneller, voor een tabel moet vakje 1 gemaakt zijn voordat vakje 2 kan worden gemaakt, bij div hangt het daar helemaal niet van af
-proffesioneler, een tabel is out of date, als iemand je code bekijkt geeft dat meteen je niveau aan |
|
|
|
|
| Gepost op: 08 januari 2008 - 21:45 |
|
|
|
Nieuw lid
|
Hallo het lukt me wel om een initieele pagina met 3 divs te maken een header boven aan, links een kolom met buttons/plaatjes die andere paginas oproepen en rechts de inhoud van de pagina.
Wat echter NIET lukt is als ik link een button indruk dat dit in het rechter stuk komt komt te staan terwijl de rest ( header en menu) in beeld blijven staan.
Hoe moet ik dit doen ( of hoort deze vraag in het forum?) |
|
|
|
|
| Gepost op: 01 februari 2008 - 17:46 |
|
|
|
PHP interesse
|
Ja, moet in forum.
Onmousemove Hetzelfde effect als bij onmousedown, alleen dan als je je muis eroverheen beweegt
Onmouseout Dit geeft hetzelfde effect als onmousemove
Onmouseover Het is misschien allemaal onnuttig, maar hetzelfde effect als onmousemove en onmousedown
Onmouseout werkt toch alleen als de muis uit de div gaat? Onmousemove wordt eerder gebruikt als je iets de muis wilt laten volgen oid en onmouseover is toch als je muis eroverheen beweegt?  |
|
|
|
|
| Gepost op: 30 januari 2009 - 09:25 |
|
|
|
Nieuw lid
|
Ik loop tegen een major probleem aan. Ik ben bezig met een proefwebsite, wat dingetjes uitproberen enzo, die ik wil opbouwen met DIV. (zie: http://www.esthermolenaar.nl) Nu wil ik graag de content in het midden, zoals dat nu ongeveer is. Daar buiten wil ik links een rechts een afbeelding die vanuit de hoeken lijkt te komen. Hieronder de CSS en de DIV code. Ik heb het gekopieerd van een andere site in mijn eigen site geplakt, maar het werkt niet. Ik heb al vanalles geprobeerd, maar het lukt niet. 
Waarschijnlijk doe ik ik fout in het DIV element of de volgorde, maar mijn inzicht in DIV is niet toereikend om er achter te komen wat ik fout doe. Wie kan mij helpen?
Btw, ik werk in Dreamweaver.
De code uit de style sheet:
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #003399;
background-color: #CC0099;
width: 600px;
border-right-width: 1px;
border-right-color: #000000;
margin-left: 300px;
margin-right: 300px;
}
#kop {
font-size: 19px;
color: #FFFFFF;
background-color: #666;
border-bottom-style: solid;
border-bottom-color: #333;
}
#navigatie {
float: left;
width: 160px;
margin-left: 10px;
padding-top: 1em;
}
#inhoud {
margin-top: 0px;
margin-right: 2em;
margin-bottom: 0px;
margin-left: 200px;
padding-top: 1em;
}
#footer {
background-color: #ccc;
clear: both;
padding-bottom: 1em;
padding-left: 200px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333;
}
#rechts
{
background-image: url(../Afbeeldingen/img1.jpg);
background-repeat: no-repeat;
margin: 0;
padding: 0;
width: auto;
}
#links
{
width: auto;
margin: 0;
padding: 0;
background-color: transparent;
background-image: url(../Afbeeldingen/Blossom.jpg); |
|
|
| Enkel aanvullende informatie is welkom. Geen prijzende of afkeurende reacties. |
|
|
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
