FOK!forum / Digital Corner / [CSS] site opmaak... HELP!!!
STFUmaandag 22 december 2003 @ 13:08
Allen,
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:
<span class="kop">kop</span>
<span class="midden">midden</span>
<span class="voet">voet</span>
CSS
code:
.kop {align:center; valign:top;}
.midden {align:center; valign:middle;}
.voet {align:center; valign:bottom;}
Alleen het werkt voor geen meter, wat doe ik fout?
RM-rfmaandag 22 december 2003 @ 13:12
quote:
Op maandag 22 december 2003 13:08 schreef STFU het volgende:
Alleen het werkt voor geen meter, wat doe ik fout?
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).

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]

breytenmaandag 22 december 2003 @ 13:12
Gebruik in dit geval geen span's, maar div-jes . Die komen standaard op hun eigen 'regel' zeg maar
franticmaandag 22 december 2003 @ 13:12
Heb je de css file "geimporteerd" in je html file?
STFUmaandag 22 december 2003 @ 13:13
en ik heb van iemand gehoord dat DIVjes komen te vervallen in vernieuwde browsers, klopt dit?
Wekkomaandag 22 december 2003 @ 13:14
text-align is het trouwens volgens . Of <div align="center">. maar dat is geen CSS.
quote:
en ik heb van iemand gehoord dat DIVjes komen te vervallen in vernieuwde browsers, klopt dit?
onzin.

[Dit bericht is gewijzigd door Wekko op 22-12-2003 13:15]

bluebitmaandag 22 december 2003 @ 13:15
je kunt idd beter div gebruiken, die zijn toch iets fijner om mee te positioneren..
breytenmaandag 22 december 2003 @ 13:16
quote:
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?
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
sopmaandag 22 december 2003 @ 13:21
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?!

RM-rfmaandag 22 december 2003 @ 13:30
quote:
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

nope, DIV is onderdeel van de Block Text-module van XHTML2, bv om presentaties in verschillende 'slides' in te delen;
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)

sopmaandag 22 december 2003 @ 13:40
Ik heb een voorbeeldje en tevens vraagje:
code:
<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>

hier een link van alles in aktie:
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?!

STFUmaandag 22 december 2003 @ 14:04
quote:
Op maandag 22 december 2003 13:12 schreef frantic het volgende:
Heb je de css file "geimporteerd" in je html file?
extern (include)
STFUmaandag 22 december 2003 @ 14:27
quote:
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?!

Nee niet dat mij bijstaat.
sopmaandag 22 december 2003 @ 14:34
quote:
Op maandag 22 december 2003 14:27 schreef STFU het volgende:

[..]

Nee niet dat mij bijstaat.

Klopt, hier had xf0rz op gereageerd. Site Checks deel 23 - aub GEEN spam!

ik was wat abuis.

STFUmaandag 22 december 2003 @ 14:36
quote:
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.

maar jij gebruikt de float optie! maar hoe kan je hem met float centreren?
RM-rfmaandag 22 december 2003 @ 14:41
code:
<!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>

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.

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.

sopmaandag 22 december 2003 @ 14:47
quote:
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?

text-align van .container of desnoods de body op center zetten.
sopmaandag 22 december 2003 @ 14:53
quote:
Op maandag 22 december 2003 14:41 schreef RM-rf het volgende:
-knip-
-edit- Ik moet mijn bek houden en gewoon eerst kijken wat iemand nou precies heeft gepost
Thanx RM-rf
STFUmaandag 22 december 2003 @ 19:45
damn, ik heb heel wat links afgespoort en gegoogled maar ik kom er niet uit.

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:
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;
}

op verzoek van aantal heb ik <span> omgezet naar <div>.
Wie kan me helpen?

edit: in bovenstaande code zit niet de container van sob verwerkt

ELTinomaandag 22 december 2003 @ 21:51
quote:
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-
Al eens hier gekeken?
code:
body {
     text-align: center;
}

#center {
     margin-left: auto;
     margin-right: auto;
     text-align: left;
}

Is al genoeg om verticaal en horizontaal te centreren...
STFUmaandag 22 december 2003 @ 22:14
....
[/code]

Is al genoeg om verticaal en horizontaal te centreren...
[/quote]
hmmzzz.... waarom werkt dat niet bij mij?
zie hier: CSS voorbeeld!

ELTinomaandag 22 december 2003 @ 22:45
De volgende code werkt wel
code:
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
            }

Wat heb ik nou gedaan?

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.

STFUmaandag 22 december 2003 @ 22:52
quote:
Op maandag 22 december 2003 22:45 schreef ELTino het volgende:
De volgende code werkt wel
code:
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
            }

Wat heb ik nou gedaan?

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.

ja ik vroeg me al af waar dat verschil in zat 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?

ELTinomaandag 22 december 2003 @ 23:02
Het moet trouwens body>#center zijn ipv #content

My fault

Maar je hoeft voor die mozilla fix niks speciaals in je source te zetten.

sopmaandag 22 december 2003 @ 23:03
Ik heb het wat netter opgelost, al zeg ik het zelf .
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;
}

STFUmaandag 22 december 2003 @ 23:13
alles werkt prima! bedankt jongens.. alleen snap ik niet waarom hij tot op de top niet uitvult en tot op de bodem niet uitvult.
zie resultaat: http://www.flashfreakz.com/opmaak.html

??

sopmaandag 22 december 2003 @ 23:25
body margin op 0px zetten
STFUdinsdag 23 december 2003 @ 00:22
quote:
Op maandag 22 december 2003 23:25 schreef sop het volgende:
body margin op 0px zetten
JE BENT GEWELDIG

Amen

Chandlerdinsdag 23 december 2003 @ 13:15
quote:
Op dinsdag 23 december 2003 00:22 schreef STFU het volgende:

[..]

JE BENT GEWELDIG

Amen

hijs extreem goed
sopdinsdag 23 december 2003 @ 13:16

it never hurts to help...
Chandlerdinsdag 23 december 2003 @ 13:18
Yeah!!!
STFUdinsdag 23 december 2003 @ 15:47