Voorheen gebruikte ik tabellen voor mijn opmaak.
Nu wil ik het beter aanpakken door te gaan werken met CSS en classes.
Alleen lukt het niet:
Ik heb 3 span tags opgezet, en die wil ik alle drie centreren onder elkaar.
HTML
code:CSS<span class="kop">kop</span>
<span class="midden">midden</span>
<span class="voet">voet</span>
code:Alleen het werkt voor geen meter, wat doe ik fout?.kop {align:center; valign:top;}
.midden {align:center; valign:middle;}
.voet {align:center; valign:bottom;}
Hank Evans: Hey, Ringworm! Yeah I'm talking to you, you toxic waste of life. You gonna pick up that butt or do I have to glue it to my shoe and stick it up your big pimply a-hole.
quote:probeer eerst een techniek te leren, bv door middel van http://www.w3schools.com/css/ en de essentie van deze techniek in te zien, ipv lukraak aan de slag te gaan en bij de eerste keer dat iets gebeurt waarvan je de oorzaak niet weet de handen in de lucht te gooien (wat snel zal zijn als je niet weet wat iets doet).
Op maandag 22 december 2003 13:08 schreef STFU het volgende:
Alleen het werkt voor geen meter, wat doe ik fout?
je gebruikt SPAN elementen, dit zijn inline elementen die meegaan met de (text-)flow, waarschijnlijk is het nuttiger als je DIV gebruikt.
verder moet je eens kijken naar de mogelijkheden van positionering in CSS (kijk ook naar het verschil tussen relative en absolute positioneren).
een goede site met uitgebreide voorbeelden voor css-based layouts is http://www.glish.com/css/
align is geen geldige css-propertie, er bestaat wel text-align, maar deze betreft de inhoud van het element, niet het element zelf, valign eensgelijks, er bestaat wel vertical-align, maar ook dat doet niet wat jij lijkt te willen.
[Dit bericht is gewijzigd door RM-rf op 22-12-2003 13:15]
. Die komen standaard op hun eigen 'regel' zeg maar
Hank Evans: Hey, Ringworm! Yeah I'm talking to you, you toxic waste of life. You gonna pick up that butt or do I have to glue it to my shoe and stick it up your big pimply a-hole.
. Of <div align="center">. maar dat is geen CSS.quote:onzin.
en ik heb van iemand gehoord dat DIVjes komen te vervallen in vernieuwde browsers, klopt dit?
[Dit bericht is gewijzigd door Wekko op 22-12-2003 13:15]
quote:Nee hoor, div is een standaard texttag van o.a. html4, xhtml 1.x. Niet meer van xhtml 2.0 als ik het goed heb, maar het zal nog heel wat jaartjes duren voor er geen xhtml1.x sites meer zijn, dus de browsers zullen ze gewoon moeten ondersteunen
Op maandag 22 december 2003 13:13 schreef STFU het volgende:
en ik heb van iemand gehoord dat DIVjes komen te vervallen in vernieuwde browsers, klopt dit?
En dat i.c.m. met een DIV die als 'container' functioneert.
Maar dat had de STFU volgens mij al in een ander topic gelezen?!
quote:nope, DIV is onderdeel van de Block Text-module van XHTML2, bv om presentaties in verschillende 'slides' in te delen;
Op maandag 22 december 2003 13:16 schreef breyten het volgende:Nee hoor, div is een standaard texttag van o.a. html4, xhtml 1.x. Niet meer van xhtml 2.0 als ik het goed heb, maar het zal nog heel wat jaartjes duren voor er geen xhtml1.x sites meer zijn, dus de browsers zullen ze gewoon moeten ondersteunen
http://www.w3.org/TR/xhtml2/mod-block-text.html#sec_8.4.
het wordt wel sterk beconcureert door het praktischer SECTION element, voor zaken waarvoor momenteel eerder DIV wordt toegepast.
Overigens is dit allemaal gebaseerd op een Working Draft voor XHTML2 (van 3 mei 2003), geen officiele richtlijn en zelfs als die dat is kan implementatie door browsers lang duren en gaat vrijwel nooit ten kostte van backwards compatibility (CSS2 komt uit 1998 en is nog steeds nauwelijks geimplementeerd door de allergrootste browser, explorer)
code:hier een link van alles in aktie:<style>
body {
font-family: veranda;
font-size: 10px;
font-decoration: none;
color: #000000;
}
.container { border: 1px solid #000000;
width: 600px;
}
.topbox { float: left;
width: 590px;
height: 100px;
border: 1px solid #000000;
background-color: #999900;
margin: 5px;
}
.leftbox { float: left;
width: 400px;
height: 400px;
border: 1px solid #000000;
background-color: #999900;
margin: 5px;
}
.rightbox { float: right;
width: 150px;
height: 100px;
border: 1px solid #000000;
background-color: #9999FF;
margin: 5px 0px 5px 5px;
}
.bottombox{ float: left;
width: 590px;
height: 100px;
border: 1px solid #000000;
background-color: #999900;
margin: 5px;
}</style>
<body>
<div Class="container">
<div class="topbox">
Dit is de topbox
</div>
<div class="leftbox">
Dit is de Linkerbox
</div>
<div class="rightbox">
Dit is de Rechterbox
</div>
<div class="bottombox">
Dit is de Bottombox
</div>
</div>
</body>
http://www28.brinkster.com/kennisbank/testing/divfloat.htm
Nu mijn vraag:
Ik wil dat de rechterbox (met de afwijkende kleur) zich met CSS even lang maakt als de linkerbox. Ook als die zich langer gaat maken doordat er bijvoorbeeld veel text in staat. Hoe doe ik dit?!
quote:extern (include)
Op maandag 22 december 2003 13:12 schreef frantic het volgende:
Heb je de css file "geimporteerd" in je html file?
Hank Evans: Hey, Ringworm! Yeah I'm talking to you, you toxic waste of life. You gonna pick up that butt or do I have to glue it to my shoe and stick it up your big pimply a-hole.
quote:Nee niet dat mij bijstaat.
Op maandag 22 december 2003 13:21 schreef sop het volgende:
Voor het positioneren gebruik ik altijd float: left/right
En dat i.c.m. met een DIV die als 'container' functioneert.Maar dat had de STFU volgens mij al in een ander topic gelezen?!
Hank Evans: Hey, Ringworm! Yeah I'm talking to you, you toxic waste of life. You gonna pick up that butt or do I have to glue it to my shoe and stick it up your big pimply a-hole.
quote:Klopt, hier had xf0rz op gereageerd. Site Checks deel 23 - aub GEEN spam!
Op maandag 22 december 2003 14:27 schreef STFU het volgende:[..]
Nee niet dat mij bijstaat.
ik was wat abuis.
quote:maar jij gebruikt de float optie! maar hoe kan je hem met float centreren?
Op maandag 22 december 2003 14:34 schreef sop het volgende:[..]
Klopt, hier had xf0rz op gereageerd. Site Checks deel 23 - aub GEEN spam!
ik was wat abuis.
Hank Evans: Hey, Ringworm! Yeah I'm talking to you, you toxic waste of life. You gonna pick up that butt or do I have to glue it to my shoe and stick it up your big pimply a-hole.
code:dit zou mijn oplossing zien, hierin kan je de breedte van .container makkelijk aanpassen, waarbij het rechter-content-block een vaste breedte heeft maar het linkerblock meeschaald.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
<title>Unbenannt</title>
<style>
body {
font-family: veranda;
font-size: 10px;
font-decoration: none;
color: #000000;
}
.container { border: 1px solid #000000;
width: 600px;
}
.topbox { height: 100px;
border: 1px solid #000000;
background-color: #999900;
margin: 5px;
}
#middle { position: relative;
margin: 5px; padding: 0px;
height: 400px;
}
.leftbox { height: 100%;
border: 1px solid #000000;
background-color: #999900;
margin-right: 155px;
}
.rightbox { position: absolute;
top: 0px; right: 0px;
width: 150px;
height: 100%;
border: 1px solid #000000;
background-color: #9999FF;
margin: 0px;
}
.bottombox{ height: 100px;
border: 1px solid #000000;
background-color: #999900;
margin: 5px;
}
</style>
</head>
<body>
<div Class="container">
<div class="topbox">
Dit is de topbox
</div>
<div id="middle">
<div class="leftbox">
Dit is de Linkerbox
</div>
<div class="rightbox">
Dit is de Rechterbox
</div>
</div>
<div class="bottombox">
Dit is de Bottombox
</div>
</div>
</body>
</html>
wil je de breedte van het rechterblock veranderen dan moet je echter ook de margin-right van de het linkerblock meeveranderen,
afhankelijk van je wensen kun je er echter veel mee doen.
het is verder zeer aan te raden om ID's te gebruiken voor eenmalig toegepaste elementen en CLASSes enkel te gebruiken juist voor zaken die meermaals op een pagina toegepast worden (overigens heeft het ook zin CLASSES met mate toe te passen en bij voorkeur direkt de Tags aan te spreken, eventueel binnen een ID-block)
Float is overigens niet voor alles goed toe te passen, enkel voor het binneplakken van bepaalde afbeeldingen binnen een flowtext, voor echte positionering voldoet het niet, aangezien het een vorm van het plaatsen van content inline is, er bestaat geen goede relatie meer met parent-elementen.
voor mooie columns kan het soms overzichtelijk zijn, maar het is zeker geen super-oplossing hiervoor een blijft veel nadelen hebben.
quote:text-align van .container of desnoods de body op center zetten.
Op maandag 22 december 2003 14:36 schreef STFU het volgende:[..]
maar jij gebruikt de float optie! maar hoe kan je hem met float centreren?
quote:-edit- Ik moet mijn bek houden en gewoon eerst kijken wat iemand nou precies heeft gepost
Op maandag 22 december 2003 14:41 schreef RM-rf het volgende:
-knip-
Thanx RM-rf
ik wil alleen weten hoe ik verticaal en horizontaal kan centreren, ik heb de container van sob al geprobeerd te gebruiken maar dat werkt bij mij ook niet 
code:op verzoek van aantal heb ik <span> omgezet naar <div>.body { text-align: center;
}html { height: 100%;
width: 100%;
}
#header { position: absolute;
top: 0px;
width: 500px;
height: 20%;
border: 0px solid #000000;
background-color: #333333;
margin: 0px;
}
#main { position: absolute;
top: 20%;
width: 500px;
height: 60%;
border: 0px solid #333333;
background-color: #444444;
margin: 0px;
}
#footer { position: absolute;
bottom: 0px;
width: 500px;
height: 20%;
border: 0px solid #333333;
background-color: #555555;
margin: 0px;
}
Wie kan me helpen?
edit: in bovenstaande code zit niet de container van sob verwerkt
Hank Evans: Hey, Ringworm! Yeah I'm talking to you, you toxic waste of life. You gonna pick up that butt or do I have to glue it to my shoe and stick it up your big pimply a-hole.
quote:Al eens hier gekeken?
Op maandag 22 december 2003 19:45 schreef STFU het volgende:
damn, ik heb heel wat links afgespoort en gegoogled maar ik kom er niet uit
.
-KNIP-
code:Is al genoeg om verticaal en horizontaal te centreren...body {
text-align: center;
}#center {
margin-left: auto;
margin-right: auto;
text-align: left;
}
[/code]
Is al genoeg om verticaal en horizontaal te centreren...
[/quote]
hmmzzz.... waarom werkt dat niet bij mij?
zie hier: CSS voorbeeld!
Hank Evans: Hey, Ringworm! Yeah I'm talking to you, you toxic waste of life. You gonna pick up that butt or do I have to glue it to my shoe and stick it up your big pimply a-hole.
code:Wat heb ik nou gedaan?body>#content {
margin-left:-305px;
margin-top:-260px;
}#center {
position:absolute;
left:50%;
top:50%;
width:590px;
height:500px;
margin-left:-295px;
margin-top:-250px;
}#header {
HEIGHT: 20%;
BACKGROUND-COLOR: #888888
}
#main {
HEIGHT: 60%;
BACKGROUND-COLOR: #777777
}
#footer {
HEIGHT: 20%;
BACKGROUND-COLOR: #666666
}
Ik heb een container gemaakt die op 50% van links zit en 50% van rechts. Hij is 590px breed en 500px lang. Je moet dan altijd de breedte en lengte delen door 2 en dat met een min wordt de margin-left en margin-top. Binnen die container kan je doen wat je wil en kan je dus 3 kleurvlakken maken. Als ik het goed heb, doet Mozilla altijd 10px bij een margin dus daarom is die body>#content.
quote:ja ik vroeg me al af waar dat verschil in zat
Op maandag 22 december 2003 22:45 schreef ELTino het volgende:
De volgende code werkt welcode:Wat heb ik nou gedaan?body>#content {
margin-left:-305px;
margin-top:-260px;
}#center {
position:absolute;
left:50%;
top:50%;
width:590px;
height:500px;
margin-left:-295px;
margin-top:-250px;
}#header {
HEIGHT: 20%;
BACKGROUND-COLOR: #888888
}
#main {
HEIGHT: 60%;
BACKGROUND-COLOR: #777777
}
#footer {
HEIGHT: 20%;
BACKGROUND-COLOR: #666666
}Ik heb een container gemaakt die op 50% van links zit en 50% van rechts. Hij is 590px breed en 500px lang. Je moet dan altijd de breedte en lengte delen door 2 en dat met een min wordt de margin-left en margin-top. Binnen die container kan je doen wat je wil en kan je dus 3 kleurvlakken maken. Als ik het goed heb, doet Mozilla altijd 10px bij een margin dus daarom is die body>#content.
bedankt, ik ben het langzamerhand een beetje aan het leren.tnx El Tino
ps: moet ik nu de body tag ook het ID content meegeven voor mozilla?
Hank Evans: Hey, Ringworm! Yeah I'm talking to you, you toxic waste of life. You gonna pick up that butt or do I have to glue it to my shoe and stick it up your big pimply a-hole.
My fault
Maar je hoeft voor die mozilla fix niks speciaals in je source te zetten.
maak van je stylesheet dit:
code:body {
text-align: center;
}
#center {
margin-left: auto;
margin-right: auto;
text-align: left;
height: 100%;
width: 590px;
}
html { height: 100%;
width: 100%;
}
#header { height: 20%;
border: 0px solid #000000;
background-color: #888888;
margin: 0px;
}
#main { height: 60%;
border: 0px solid #000000;
background-color: #777777;
margin: 0px;
}
#footer { height: 20%;
border: 0px solid #000000;
background-color: #666666;
margin: 0px;
}
|
|
