[CSS] voor dummies.

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_22747475
Nou ik dacht als er dan ook 1 voor phpers is (meerdere zelfs ) dan mag er vast ook wel 1 voor CSS want ik zit met een probleem .. Voor het eerst ben ik zelf helemaal 100% css wezen schrijven met topstyle. Ik wil een bestaand iets (dat in flash is gemaakt) een beetje ombouwen naar css maar gaat natuulijk nog niet geheel zoals het zou moeten.

Wat wil ik?

Ik wil een overzicht maken met css, dit kan met tabellen, labels maar ook met divjes etc. Nu heb ik het even geprobeerd met divjes omdat ik die wel 'aardig' begrijp maar blijkbaar niet helemaal.

Een voorbeeld van wat ik wil hebben



en wat heb ik al

nu heb ik dit



met de volgende code
quote:
<style>
BODY {
color: Black;
background-color: #F2F1EF;
font-family: "Microsoft Sans Serif", sans-serif;
font-size: 11px;
}


.itemheader
{

border: 1px solid white;
width: 530px;
height: 15px;
}


.itemdesc
{
float: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #EBE9E6;
text-align: left;
border-bottom: 1px solid white;
}

.item
{
float: left;
background-color: #F2F1EF;
text-align: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
}

.itemtop
{
float: left;
background-color: #87CEFA;
text-align: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;

}

img {
display: inline;
}
</style>
<body>

<div class="itemheader">
<div class="itemdesc" style="width: 100px;">Test</div> <div class="itemdesc" style="width: 200px;">Object</div> <div class="itemdesc" style="width: 200px;">Function</div>
<div class="itemtop" style="width: 100px;">Test</div> <div class="item" style="width: 200px;">Obj</div> <div class="item" style="width: 200px;">Function</div>
<div class="item" style="width: 100px;">Test1231231</div> <div class="item" style="width: 200px;">Object</div> <div class="item" style="width: 200px;">Function</div>
<div class="item" style="width: 100px;">Test</div> <div class="item" style="width: 200px;">Object1412342134</div> <div class="item" style="width: 200px;">Function</div>
<div class="itemtop" style="width: 100px;">Test</div> <div class="item" style="width: 200px;">Object</div> <div class="item" style="width: 200px;">Function</div>
<div class="item" style="width: 100px;">Test</div> <div class="item" style="width: 200px;">Object</div> <div class="item" style="width: 200px;">Function</div>
<div class="itemtop" style="width: 100px;">Test</div> <div class="item" style="width: 200px;">Object</div> <div class="item" style="width: 200px;">Function</div>
</div>
heeft iemand misschien tips hoe ik dus bijvoorbeeld een plaatje kan invoegen? want als ik dat doe krijg je het volgende resultaat



dus het volgende stukje
quote:
<div class="itemtop" style="width: 100px;">Test</div> <div class="item" style="width: 200px;">Obj</div> <div class="item" style="width: 200px;">Function</div>
aangepast naar
quote:
<div class="itemtop" style="width: 100px;">Test<img src="c:/red.jpg"></div> <div class="item" style="width: 200px;">Obj</div> <div class="item" style="width: 200px;">Function</div>
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_22747625
eventjes waar je de fout ingaat:
het is geen oplossing om 'naar CSS te gaan' en dan een HTML-pagina gedachteloos om te plempen in allerlei DIV-tags ...
alsof HTML maar een tag heeft en dat de DIV is ...

HTML biedt een rijk scala aan tags die de waarde van de inhoud beschrijven, de onderlinge relatie tot andere elementen:
denk bv aan UL (unordered lists), TABLE voor Tabulaire data, H1 tm H6-tags voor Headers, P voor Paragraphs ... EM en STRONG, DIV voor Divisions en SPAN voor inline dingen ...

Probeer eerst je code net en correct zo op te zeggen dat het een goed overzicht biedt voor de ordening van je data, zonder je al tezeer direkt te bekommeren met layout, die je later kunt toevoegen door een paar tactisch egplaatste class of id-attributen..
vermijd zoveel mogelijk andere attributen, als zeker de inline style-attribuut, dat kan je meestal allemaal met een externe CSS oplossen ..

In dit geval,zoals de data eruitziet op dat screenshot, dat moeit je niet anders willen oplossen dan door een TABLE, dat is gewoonweg tabulaire data, en niks anders.

Wat betreft Plaatjes toevoegen ...
kijk eens naar de mogelijkheid om gewoon een plaatje als achtergrond-afbeelding toe te voegen:
quote:
background: url(img/red.jpg) no-repeat top left;
je kunt dan de positionering van de tekst in het element zelf makkelijk aanpassen door padding te gebruiken, wardoor de tekst 'achter' of 'naast' de afbeelding begint.
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_22766183
ok, dus voor 'tabel' data moet ik eingelijk altijd kiezen voor 'tabellen?' of zijn er meer mogelijkheden waarin ik het voorbeeld kan converteren?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_22772549
nu heb ik met behulp van de volgende css dit gemaakt.



en met mouse over




groen om even aan te geven wat het is
quote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>
</head>
<style>
BODY {
color: Black;
background-color: #F2F1EF;
font-family: verdana;
font-size: 11px;
}


.itemheader
{
border-left: 1px solid white;
border-right: 1px solid white;
border-top: 1px solid white;
border-bottom: 1px solid white;
height: 15px;
}

.itemheaderarrow
{
color:#000000;
font-family:webdings;
font-size:10;
text-decoration:none;
cursor:pointer;
}

.itemdesc
{
float: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
border-bottom: 1px solid white;
background-color: #EBE9E6;
}

.itemcell
{
background-color: #F2F1EF;
}

.itemcellon
{
background-color: Lime;
}

.item
{
float: left;
text-align: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
}

.itemtop
{
float: left;
background-color: #87CEFA;
text-align: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;

}

img {
display: inline;
}
</style>
<body>

<br/>

<table class=itemheader width="600" cellpadding="0" cellspacing="0">
<tr>
<td class=itemdesc width="30%">Test <font onclick="xx" class="itemheaderarrow" title="Ascending Order">5</font></td>
<td class=itemdesc width="10%">Cat </td>
<td class=itemdesc width="20%">Woei <font onclick="xx" class="itemheaderarrow" title="Ascending Order">5</font></td>
<td class=itemdesc width="40%">oeps</td>

</tr>
<tr class=itemcell onmouseover="className='itemcellon';" onmouseout="className='itemcell';">
<td class=item>Testjuh</td>
<td class=itemtop>kutje</td>
<td class=item>Woeiden</td>
<td class=item>oepsspeo, alleen suiker</td>
</tr>
<tr class=itemcell onmouseover="className='itemcellon';" onmouseout="className='itemcell';">
<td class=item>Testx</td>
<td class=item>kutie</td>
<td class=item>Woeis</td>
<td class=item>oepsenm, zonder melk</td>
</tr>
<tr class=itemcell onmouseover="className='itemcellon';" onmouseout="className='itemcell';">
<td class=item>Test</td>
<td class=item>kuttig</td>
<td class=item>Woeien</td>
<td class=item>oepsie, espresso enzovoorts.</td>
</tr>
</table>


</body>
</html>
Hebben jullie nog ideeen cq tips?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_22921219
Nou, ik heb ook een css probleem waar ik ff niet uit kom:

Ik wil met div's een layout maken voor een reactiesysteempje wat ik ff aan het bouwen ben.
Het moet er dus ongeveer net zo uitzien als FOK, dus:
-balkje aan linkerkant met username en ondertitel
-daarvan rechts: datum/tijd, bericht, handtekening (drie aparte div's onder elkaar)

Maar ik krijg het niet voor mekaar. Of de linkerbalk loopt niet mee met de hoogte van de rechter div's of die linkerbalk staat heel ergens anders.

Ik weet dat zoiets eenvoudig met een tabel kan, maar kan het ook met div's? Heb alles al geprobeerd maar het lukt me gewoon niet

Iemand ideeën?
Fotoboek
pi_22921531
Zet wat 'div's in een onzichtbare div zodat ze iig bij elkaar blijven.
Experimenteer met the posittion property. Hier wat leuke links:

http://www.alistapart.com/articles/practicalcss/
Practical CSS Layout Tips, Tricks, & Techniques: A List Apart

http://www.echoecho.com/csslayers.htm
CSS Layers - CSS tutorial
pi_22921628
quote:
Op donderdag 28 oktober 2004 21:28 schreef ReVeL het volgende:

Zet wat 'div's in een onzichtbare div zodat ze iig bij elkaar blijven.
Experimenteer met the posittion property. Hier wat leuke links:

http://www.alistapart.com/articles/practicalcss/
Practical CSS Layout Tips, Tricks, & Techniques: A List Apart

http://www.echoecho.com/csslayers.htm
CSS Layers - CSS tutorial
Ok thanx ga ik morgen ff doorspitten!
Fotoboek
  vrijdag 29 oktober 2004 @ 00:12:13 #8
44679 Leshy
Held met sokken.
pi_22923975
quote:
Op donderdag 21 oktober 2004 15:09 schreef Chandler het volgende:
Hebben jullie nog ideeen cq tips?
In plaats van elke td de class item mee te geven, kun je ook gewoon de volgende CSS selector gebruiken:

tr.itemcell td {...}

Scheelt je al weer flink wat code
pi_22927048
kun je eens wat uitleg geven Leshy?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  vrijdag 29 oktober 2004 @ 09:17:39 #10
44679 Leshy
Held met sokken.
pi_22927896
Het stuk
quote:
.itemcell
{
background-color: #F2F1EF;
}

.item
{
float: left;
text-align: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
}

[...]

<tr class=itemcell onmouseover="className='itemcellon';" onmouseout="className='itemcell';">
<td class=item>Test</td>
<td class=item>kuttig</td>
<td class=item>Woeien</td>
<td class=item>oepsie, espresso enzovoorts.</td>
</tr>
Valt in te korten tot
quote:
.itemcell {background-color: #F2F1EF;}
tr.itemcell td {padding: 5px;}

[...]

<tr class="itemcell" onmouseover="className='itemcellon';" onmouseout="className='itemcell';">
<td>Test</td>
<td>kuttig</td>
<td>Woeien</td>
<td>oepsie, espresso enzovoorts.</td>
</tr>
Je hebt maar één statement nodig voor padding, table cells hoef je niet te floaten omdat ze sowieso wel naast elkaar verschijnen, text-alignment is in table cells standaard al links, en op deze manier hoef je niet elke td een eigen classname mee te geven
pi_22935087
handig tip; ga er gelijk mee aan de slag
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_22935225
en inderdaad; scheelt nogal wat html code maar alle kleine helpen!
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_22944638
Hoe plaats ik een image in het midden?
Dmv css dus.


Heb al vanalles geprobeerd maar het wil niet werken.
pi_22945536
quote:
Op vrijdag 29 oktober 2004 22:37 schreef DutchBlood het volgende:
Hoe plaats ik een image in het midden?
Dmv css dus.
Bedoel je een enkel image in het midden als een soort van splash screen?

Want dan kan je zoiets proberen:

CSS
quote:
#deDiv{
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 360px;
margin-left: -150px;
margin-top: -180px;
}
HTML
quote:
<div id="deDiv"><img src="plaatje" width="300" height="360" alt="" /></div>
No Dukes of Hazzard in the classroom
pi_22945967
quote:
Op vrijdag 29 oktober 2004 23:12 schreef Berkery het volgende:

[..]

Bedoel je een enkel image in het midden als een soort van splash screen?

Want dan kan je zoiets proberen:

CSS
[..]

HTML
[..]
Thnx.

Als je grote images gebruikt kun je nog
overflow:hidden;

toevoegen aan #deDiv om eventuele scrollbars weg te werken. Dit alleen als je een pagina hebt met alleen het image erop natuurlijk.
pi_23525484
mensen, ik heb het volgende.

Voor het eerst (na de 1e post) ben ik bezig een site om te bouwen van veel HTML naar handig CSS nu wil ik echter een plaatje positioneren in mijn pagina, maar dit wil niet geheel lukken.

voorbeeld @ http://www.bruggema.nl/dasarto.com.new/

en het gaat om een van de laatste regels
quote:
<div style="position: float: right; top: 200px; left: 220px; height: 100px;"><img id="pic" src="./images/maten/meten1.gif"></div>
deze komt nu onder 'de tabel' te staan maar moet in het witte (midden) van het tabel, hoe kan ik deze daar laten verschijnen? ik maak al gebruik van header, middle, etc qua positioneer mogelijkheden.
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_23525563
ow en nog iets, hoe krijg ik de text Linkje / Linkje / Linkje helemaal onderaan in het 'header' divje? dus niet midden maar geheel rechts onderaan..
quote:
<div id="headerlocation">linkje / linkje / linkje</div>
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  dinsdag 23 november 2004 @ 21:06:23 #18
81237 releaze
best of both worlds
pi_23525763
chandler, kijk eens in mozilla/firefox naar je pagina...
zolang het er zo uitziet ga ik nieteens proberen te kijken waar het probleem ligt...
klinkt heel hard, maar dit is echt niks.

daarnaast vraag je om te helpen, maar heb je een rightclick disable erin gegooid. heel erg behulpzaam

bedoel het overigens niet allemaal zo bot als ik het neergezet heb, maar dit maakt "willen helpen" echt heel erg onaantrekkelijk, terwijl ik helpen in princiepe hardstikke leuk vind (of ik je ook van dienst kan zijn is dan nog maar de vraag, maar you get the point, right?)
pi_23525810
Haha, ik heb um zelf nog niet eens in Firefox bekeken en dat irrie anti bron bekijken zit in me js... even aanpasse...
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_23525831
quote:
Op dinsdag 23 november 2004 20:57 schreef Chandler het volgende:
mensen, ik heb het volgende.

Voor het eerst (na de 1e post) ben ik bezig een site om te bouwen van veel HTML naar handig CSS nu wil ik echter een plaatje positioneren in mijn pagina, maar dit wil niet geheel lukken.

voorbeeld @ http://www.bruggema.nl/dasarto.com.new/

en het gaat om een van de laatste regels
[..]

deze komt nu onder 'de tabel' te staan maar moet in het witte (midden) van het tabel, hoe kan ik deze daar laten verschijnen? ik maak al gebruik van header, middle, etc qua positioneer mogelijkheden.
haal de position: uit je style= dat scheelt een hoop.
pi_23525863
quote:
Op dinsdag 23 november 2004 20:59 schreef Chandler het volgende:
ow en nog iets, hoe krijg ik de text Linkje / Linkje / Linkje helemaal onderaan in het 'header' divje? dus niet midden maar geheel rechts onderaan..
[..]
<div class="header" style="position:relative;height:60px;width:700px;">
<div style="headerlocation" style="position:absolute;bottom:0px;right:0px;">something</div>
</div>
pi_23526088
vraagje.... waarom doe je het appart in een style="" en niet in je <style> ?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_23526123
quote:
Op dinsdag 23 november 2004 20:59 schreef Chandler het volgende:
ow en nog iets, hoe krijg ik de text Linkje / Linkje / Linkje helemaal onderaan in het 'header' divje? dus niet midden maar geheel rechts onderaan..
Bijvoorbeeld:
quote:
div{
height: 100px;
width: 200px;
display: table-cell;
vertical-align: bottom;
text-align: right;
border: 1px solid blue;
}
Werkt in de meeste browsers met goede CSS-2 ondersteuning IE niet dus
No Dukes of Hazzard in the classroom
pi_23526132
quote:
Op dinsdag 23 november 2004 21:06 schreef releaze het volgende:
Chandler, kijk eens in mozilla/firefox naar je pagina...
[/qoute]



[quote]
daarnaast vraag je om te helpen, maar heb je een rightclick disable erin gegooid. heel erg behulpzaam
idd, zelf geen last van gehad maar tja kan irrie zijn (verwijderd)
quote:
bedoel het overigens niet allemaal zo bot als ik het neergezet heb, maar dit maakt "willen helpen" echt heel erg onaantrekkelijk, terwijl ik helpen in princiepe hardstikke leuk vind (of ik je ook van dienst kan zijn is dan nog maar de vraag, maar you get the point, right?)
Ik heb er van geleerd en leer nog steeds; misschien nu een kijkje waard?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_23526643
quote:
Op dinsdag 23 november 2004 21:17 schreef Chandler het volgende:
vraagje.... waarom doe je het appart in een style="" en niet in je <style> ?
Omdat het voor op een forum is en het in principe voornamelijk duidelijk moet zijn. Hoe jij je classes en je id's toewijst zal me een zorg zijn, en is niet van belang voor het idee achter de position:absolute. Het herrschrijven is aan jou en jouw specifieke situatie
pi_23535005
Roonaan; maar even dat terzijde. Ik heb geprobeerd dit in mijn 'gedefenieerde' styles te verwerken maar gaat niet helemaal goed... zou ik alles wat jij in STYLE="" hebt gezet ook in mijn css sheet kunnen verwerken of is het af en toe handiger om dit juist niet te doen..
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_23535725
Nou, wat op zich het makkelijkste is, is om eerst alles in style="" te doen. Als je dat hebt werken kan je beginnen met classes toewijzen, misschien een extra id toevoegen, etc. Voor de overduidelijke layoutelementen "de grote divs" kan je natuurlijk wel meteen id's toekennen en een <style>block maken, maar voor het kleine grut gewoon bij style="" houden totdat het werkt.
pi_23539656
quote:
Op woensdag 24 november 2004 10:02 schreef Roönaän het volgende:

Nou, wat op zich het makkelijkste is, is om eerst alles in style="" te doen.
Sorry, maar daar ben ik het absoluut niet mee eens;
het is een valkuil waarin veel PHP'ers (of andere serverside scripters) snel vallen, omdat het handig lijkt en in eerste instantie veel tijd ermee lijkt te winnen,
immers die inline style-attributen kun je gewoon makkelijk in je bestaande code verweven, en je kunt dan in één file blijven werken,
je hoeft niet met een extern CSS-file of centraal scss-block te werken en daardoor hoef je niet echt overzicht te houden over je HTML-code...

vergelijk het met een serverside scripter die voor alles een soort van lineaire breiwerk-code schrijft, zonder te werken met functies of objecten...

Juist door te werken met verwijzingen, leren elementen te hergebruiken, dwing je zelf af om 'schoon' te werken; zowel met serverside scripting, alswel met HTML+CSS.

Juist door met een extern CSS-file te werken en zoveel mogelijk te streven naar hergebruik van code, blijft je gegenereerde code schoon en overzichtelijk, achteraf blijkt het juist eenvoudiger wijzigingen aan te brengen.

het verdient de voorkeur om te proberen zoveel mogelijk te werken met het toewijzen van css-styles aan complete tags:
quote:
P {
font-size: 12px;
}
eventueel kun je hierin onderverdling aanbrengen door te werken met een overkoepelend ID:
quote:
DIV#main P {
font-size: 11px;
}
om misschien wat kleine basis-tests te doen met CSS, kun je met het style-attribuut werken, echter wil je het correct leren is het ook belangrijk dat je zo snel mogelijk overgaat tot het compleet scheiden van layout (CSS) en content (HTML-tag-structuur).
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_23540477
Schat, het ging hier om positioning issues, niet om font-sizes.

Als ik bezig ben met positioning, doe ik dat met style attributes.

Je hoeft mij niet te vertellen hoe je css gebruikt aub.
pi_23541604
quote:
Op woensdag 24 november 2004 14:02 schreef Roönaän het volgende:
Schat, het ging hier om positioning issues, niet om font-sizes.

Als ik bezig ben met positioning, doe ik dat met style attributes.
Ook dat is gewoonweg af te raden, positionering behoort ook tot het 'layouten' (het regelen van de visuele presentatie van een bepaalde structuur) en te prefereren is om dit altijd gescheiden te houden van de HTML-datastruktuur:
Op het moment van schrijven van de code lijkt het misschien handig, maar als je achteraf wijzigingen aanbrengen in een layout, is het prettiger om hiervoor gewoon een gescheiden CSS-bestand te hoeven aanpassen, dan dat je daarbij hele brokken serverside scripting-code moet doorploegen op zoek naar specifieke style-attributen ...
quote:
Je hoeft mij niet te vertellen hoe je css gebruikt aub.
sorry hoor, het spijt me dat ik goedbedoelde raad geef, wat jij kennelijk in je alwetendheid als een belediging van je kunnen aanneemt, dat is echter zo niet bedoeld..
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_23542097
Ervanuitgaande dat het bestaan van templates wordt weggedacht heb je wat dat betreft gelijk...

Layouten doe je losstaand van je php code - als je goed bezig bent tenminste.
pi_23547420
Beste Roonaan, bedankt voor je info; ik heb even jou en de reactie van RM-rf gelezen en ben van mening dat ik zelf inderdaad wil werken dmv css in een stylesheet.. (dus extern van het html gebeuren). Dit omdat ik vaak grote zaken aan de layout vervang waardoor bijvoorbeeld een menu van links naar rechts kan verspringen. Dit zal een pokke werk worden wanneer ik bijvoorbeeld alles in style="" ga verwerken.

Nu ben ik al een stukje verder met mijn leersel over CSS maar is nog niet dat je zegt je van het.

maar heb nu al geleerd dat ik met DIV#main de div main kan aanspreken en daar dan de P, etc kan zetten... (beetje vaag verwoord mja dat zijn jullie wel gewend van mij )..

Ik ga lekker verder knutselen..

Ps. Roonaan; als ik die style zaken verplaats naar de stylesheet, doet het opeens vaag qua positioneren... is dit logisch?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_23547808
tevens rare zaken.

Footer text gecentreerd in IE maar niet in Mozilla
Padding en margins werken wel in IE voor 'menulink' maar weer niet voor Mozilla.
Div van het plaatje (dat veranderd bij het forumlier staat bij IE in de #data gedeelte maar bij Mozilla er helemaal buiten

Iemand ideeen? (source geupdated)
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_23548583
Voeg onderstaande maar eens toe aan #footer:
quote:
clear:both;
margin-left:auto;
margin-right:auto;
pi_23548633
Dat is een van de redenen waarom je eerst je layout op orde moet hebben voordat je begint met content te genereren.
pi_23548662
En voeg ook even een xhtml doctype toe, dat heeft een huge influence op het gedrag van IE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
pi_23548735
Om te zorgen dat #content de goede hoogte krijgt gebruik je niet height:100% maar zet je voor de </div> van content een clear:both div:

<div style="clear:both;"></div>

Divs met een float hebben geen hoogte voor de container div. Om te zorgen dat de container wel benul van de inhoud heeft moet je er een "vast" element onder kwakken die het floatgedrag opbreekt. Dat is de clear:both div.
pi_23549252
tnx roonaan; weer wat geleerd; maar toch ben ik nog niet helemaal wijs met clear:both; deze moet dan toch na de 'linker en rechter' cel?... en niet er voor? tevens heb ik in IE nu het juiste resultaat... maar toch blijft het menu (padding niet goed er uit springen...).
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_23549297
Je bedoelt de enorme whitespaces in het menu?
pi_23549346
nog iets raars; #content heeft voor 'zowel de divjes' de background op #fff staan, echter is de achtergrond kleur nu in IE wit en in Mozilla (grijs zoals de achtergrond kleur (body))
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_23549353
quote:
Op woensdag 24 november 2004 19:58 schreef Roönaän het volgende:
Je bedoelt de enorme whitespaces in het menu?
Juist, die heb je met IE wel maar in Mozilla niet

tevens nog een bugje, ik krijg geen borders bij #content; deze zouden er wel moeten zijn (IE wel Ff niet)

[ Bericht 18% gewijzigd door Chandler op 24-11-2004 22:25:24 ]
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_23561994
quote:
Op woensdag 24 november 2004 19:56 schreef Chandler het volgende:
tnx roonaan; weer wat geleerd; maar toch ben ik nog niet helemaal wijs met clear:both; deze moet dan toch na de 'linker en rechter' cel?... en niet er voor? tevens heb ik in IE nu het juiste resultaat... maar toch blijft het menu (padding niet goed er uit springen...).
let op het verschil tussen het msie boxmodel, en het standaard boxmodel van w3c, dat toegepast wordt door mozilla, opera en Safari, alswel door msie in non-quirky mode (dus valide code, mét een doctype, ik zou je echter aanraden msie6 gewoon in quirky mode te laten renderen, die is helaas minder buggy, dit kun je doen door en comment boven de doctype te zetten, mozilla negeert die, zoals hoort, maar msie schiet ervan in quirky mode)

het boxmodel van w3c houdt in dat borders, padding en margin bij de breedte en hoogte opgeteld worden, dus met padding: 5px, margin 5px en 5px border is een div van 100px breed 130px geworden in mozilla en non-quirky msie6, maar in quirky msie6 en msie5.5, msie5 blijft hij 100px, enkel wordt de content steeds verder 'samengedrukt'.

http://webdesign.about.com/cs/css/a/aaboxmodelhack.htm
http://www.quirksmode.org/css/box.html

de snelste oplossing is om de CSS3-propertie box-sizing: border-box; toe te voegen;
Mozilla ondersteund dat als -moz-box-sizing: border-box; en dit zal het boxmodel renderen zoals het oude boxmodel van msie..

dat is een snelle oplossing en zeker als je nog een beetje aan het leren bent best wel aan te raden, het oude msie-boxmodel heeft ook wel zijn prettige kanten:
Zoek je meer een uitdaging kun je echter proberen het w3c boxmodel aan te houden, zeker in zeer scalable fluid designs kan dat meer consistenter werken.

[ Bericht 7% gewijzigd door RM-rf op 25-11-2004 12:12:17 ]
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_23563441
quote:
Op woensdag 24 november 2004 14:52 schreef RM-rf het volgende:
Ook dat is gewoonweg af te raden, positionering behoort ook tot het 'layouten' (het regelen van de visuele presentatie van een bepaalde structuur) en te prefereren is om dit altijd gescheiden te houden van de HTML-datastruktuur:
Op het moment van schrijven van de code lijkt het misschien handig, maar als je achteraf wijzigingen aanbrengen in een layout, is het prettiger om hiervoor gewoon een gescheiden CSS-bestand te hoeven aanpassen, dan dat je daarbij hele brokken serverside scripting-code moet doorploegen op zoek naar specifieke style-attributen ...
Deze hele idiote gedachtegang (en daarmee de discussie) was er helemaal niet geweest als die kneuzen van W3C gewoon variabelen hadden geintroduceerd.

voorbeeldje (pseudo):
quote:
<html>
<style>
$color1 = #ff0000;

div.chapter {
background-color = $color1;
}
</style>

<body background-color="$color1">
</body>
</html>
Ja zo simpel kan het nou zijn, nu moeten de kneuzen van w3c het nog begrijpen...
pi_23564118
quote:
Op donderdag 25 november 2004 13:04 schreef markvleth het volgende:

[..]

Deze hele idiote gedachtegang (en daarmee de discussie) was er helemaal niet geweest als die kneuzen van W3C gewoon variabelen hadden geintroduceerd.

voorbeeldje (pseudo):
[..]

Ja zo simpel kan het nou zijn, nu moeten de kneuzen van w3c het nog begrijpen...
Kijk eens naar JSSS (JavaScript Style Sheets), de tegenhanger van Netscape voor CSS, geimplementeerd in netscape 4, dat had inderdaad die uitgebreidde scripting-mogelijkheden..

echter CSS is geen scripting taal, maar een statische vastlegging van properties en waardes,
Door juist je structuur in te delen en vervolgens met goed uitgedachte classes te werken

wat jij wilt is prima te doen door bv
quote:
<html>
<style>
.setGlobalBgColor, DIV.chapter {
background-color : #f00;
}
DIV.chapter {
font-size: 11pt;
}

</style>

<body class="setGlobalBgColor">
<div class="chapter setGlobalBgColor"></div>
</body>
</html>
Het heeft weinig zin om CSS als techniek allerlei mogelijkheden te geven die nu al best te doen zijn via javascript, mocht je scripting-elementen willen ..
het is een ideeen-gang die voornamelijk komt van het werken met scripting en dan kennlijk verwachten dat CSS ook aan bepaalde scripting-elementen zou moeten voldoen, omdat de auteuren hieraan gewend zijn ...

het zou de interpretatie van Stylesheets door userAgents een stuk zwaarder maken (die hebben dan gelijk ook een scripting-engine nodig), backwards compatibiliteit is een ramp, om maar niet te spreken over potentiele veiligheidslekken ( nu is css absoluut geen security-risico itt tot active scripting en dergelijke )..

het enige voordeel, luie auteuren van stylesheet hebben het dan wat makkelijker, omdat ze dan bij het publiceren van websites niet meer hoeven te vervallen tot preprocesing (wat overigens een veel makkelijkere oplossing is, zo moeilijk is het niet een search&replace All te doen op wat documenten)..

Er is nar ik meen wel een voorstel gedaan voor aliasses of pre-defines in CSS3, mogelijk een sperate module hiervoor (wat dus betekent dat je niet ervan afhankelijk zou moeten willen zijn ...)

Het is erg makkelijk mensen 'kneuzen' te noemen die kennelijk niet exact vanuit jouw gedachtegang werken, en die er daarom bewust voor kiezen om CSS geen scripting taal te laten zijn, ook al komen er ook regelmatig scripters mee in contact, die moeten dan gewoon moeten leren respect te hebben voor een eigen techniek, ipv te gaan 'eisen' dat die techniek zich aan hun gewoontes zou moeten aanpassen.
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_23564630
Enige wat ik graag zou zien in css is de ondersteuning voor de verschillende input types, voor de rest kan ik er zo goed als alles verder mee. Wat Markvleth voorsteld toont is nogal simplistisch vind ik. Als je zo graag zulke dingen in je stylesheet wilt, moet je maar een dynamisch serverside gegenereerde css bouwen.
pi_23564658
euh neen.
Je gaat direct de fout in, ik stel namelijk geen scripting voor maar puur een globale variabele. De klassen die je nu schrijft zijn ook niets anders dan variabele; je schrijft immers een klasse en past deze op een of meerdere elementen toe. Waarom alleen op klassen niveau en niet op attributen niveau?
pi_23566448
quote:
Op donderdag 25 november 2004 13:53 schreef Roönaän het volgende:
Enige wat ik graag zou zien in css is de ondersteuning voor de verschillende input types
Dat kan eenvoudig met attribute selectors, maar ja, Internet Explorer bla bla bla...
No Dukes of Hazzard in the classroom
pi_23572834
kleine vraag; je moet dus om zo'n boxmodel hack te hanteren de volgende regel hanteren? = hopelijk de juiste gedachte.

je moet de border*2+left&right margins/padding bij elkaar oprekenen en dan appart voor IE5/6 in en zonder quirk mode
quote:
#divnaam
{
width: 100px;
padding: 5px;
border: 5px solid black;
}

// maakt samen 5*2 + 5*2 = 20 oftewel 100 - 20 = 80.... toch?
* html #divnaam{
width: 100px; // met borders etc
width: 80px;
}
goed gedacht, ik zie dingen graag standaard en berekenbaar

[ Bericht 7% gewijzigd door Chandler op 27-11-2004 11:57:57 ]
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_23603415
iemand over de vorige post?

ps, ik wist niet dat soortement van rekenen ook werkte, zie quote
quote:
left: 20%+1; top: 157px;
+ 1!!!!
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_23604329
wat is css..?
  Lieve Belg zaterdag 27 november 2004 @ 12:12:59 #51
86282 Jump
[Belg.] Jump (de ~ (m.))
pi_23604608
quote:
Op zaterdag 27 november 2004 11:51 schreef Omkron het volgende:
wat is css..?
cascade style sheet


de opmaak van je webpagina kan je in een extern bestand plaatsen. als je ergens je tekstkleur wil wijzigen kan je dit eenvoudig doen in dat bestand, en alle tekst die aan dat gekoppend is wijzigd van van kleur

beter gezegd: gecentraliseerde opmaak
Op zondag 28 oktober 2007 01:07 schreef clumsy_clown het volgende:
Jump daarentegen, is wáy minder braaf en lief dan hij lijkt
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; «shmoop|dingen» jawel, jij bent Superjump
pi_23604886
quote:
Op donderdag 25 november 2004 19:39 schreef Chandler het volgende:
kleine vraag; je moet dus om zo'n boxmodel hack te hanteren de volgende regel hanteren? = hopelijk de juiste gedachte.

je moet de border*2+left&right margins/padding bij elkaar oprekenen en dan appart voor IE5/6 in en zonder quirk mode
[..]

goed gedacht, ik zie dingen graag standaard en berekenbaar
Ik hoop dat je ook met FireFox / Mozilla ofzo aan het testen bent
fokstok.nl
pi_23604957
juist met firefox
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_23862176
Is het mogelijk om met CSS text verticaal in een tabel te zetten?

Dus voor bijvoorbeeld een competitie schema.
  donderdag 9 december 2004 @ 20:29:55 #55
44679 Leshy
Held met sokken.
pi_23862658
Nope, dit komt pas met CSS3. De beste oplossing die je tot dan toe hebt, is gebruik maken van plaatjes ipv tekst.
pi_23863794
quote:
Op donderdag 9 december 2004 20:29 schreef Leshy het volgende:
Nope, dit komt pas met CSS3. De beste oplossing die je tot dan toe hebt, is gebruik maken van plaatjes ipv tekst.

Kijk, dit is dus complete nonsens.

Als het een willekeurige onbekende lengte tekst betreft is het erg ingewikkeld, maar uitgaande van jouw "suggestie" - een image, dus een fixed length tekst - is het zeer zeker mogelijk om vertikaal te centreren met css. Dat jij niet weet hoe is een tweede.

Verkeerd gelezen, hoog van de toren geblazen, en hard ervanaf gewaaid op mijn bek stuiterend.
  donderdag 9 december 2004 @ 21:29:57 #57
44679 Leshy
Held met sokken.
pi_23864107
quote:
Op donderdag 9 december 2004 21:16 schreef Roönaän het volgende:
Verkeerd gelezen
Geeft niet, deed ik ook eerst
  zaterdag 11 december 2004 @ 18:08:27 #58
92926 Joipoidoipoipoi
met broedsel incl. grote zus!
pi_23902325
Weet iemand hoe ik in een extern css-bestand de scrollbar op 'auto' zet? (Als ik op Google zoek, kom ik alleen maar onderwerpen over een gekleurde scrollbar tegen.)
"If you don't stop lying about me, I'll start telling the truth about you."
pi_23902493
quote:
Op zaterdag 11 december 2004 18:08 schreef Joipoidoipoipoi het volgende:
Weet iemand hoe ik in een extern css-bestand de scrollbar op 'auto' zet? (Als ik op Google zoek, kom ik alleen maar onderwerpen over een gekleurde scrollbar tegen.)
overflow: auto; .

http://www.w3schools.com/css/pr_pos_overflow.asp
pi_23964822
Ik heb een vraagje. Als ik een bepaalt stukje tekst een bepaalde opmaak wil geven met css doet ik dit altijd met <p class="klasse"></p> maar hier zitten altijd breaks omheen, dus je kunt op deze manier niet 2 stukken tekst van verschillende klassen zonder breaks achter elkaar typen.
Hier is vast wel een oplossing voor maar die weet ik dus niet en dat is dus waarom ik hier kom.
Vogelaars.nl
pi_23964928
Volgens mij heb ik nu alweer het antwoord gevonden op mijn eigen vraag...
<span class="klasse"></span> Klopt dat?of moet het volgens de standaards op een andere manier?
Vogelaars.nl
pi_23965180
Alleen dan werkt align="center" weer niet.... <span class="kop3" align="center">
Vogelaars.nl
pi_23965236
quote:
Op dinsdag 14 december 2004 12:45 schreef ikke_ook het volgende:
Ik heb een vraagje. Als ik een bepaalt stukje tekst een bepaalde opmaak wil geven met css doet ik dit altijd met <p class="klasse"></p> maar hier zitten altijd breaks omheen, dus je kunt op deze manier niet 2 stukken tekst van verschillende klassen zonder breaks achter elkaar typen.
Hier is vast wel een oplossing voor maar die weet ik dus niet en dat is dus waarom ik hier kom.
een P is een block-level element, oftewel het neemt standaard de gehele beschikbare breedte in (tenzij specifieke width gedefinieerd is), en erna komt een automatische 'clear' (tenzij het element 'float')
Ook een DIV is standaard een block-level element, alswel een FORM, een UL, de Heading-elementen (H1,H2,H3..) etc etc....

een Block-level element kan ook margins en paddings hebben (in het geval van de P veroorzaken de margins de extra tussenruimte)

aan de andere kant bestaan er ook 'inline' elementen, die gewoon meegaan in de flow van de tekst en geen 'clear' genereren,
bekende standaard 'inline' elementen zijn bv SPAN, maar ook <strong>, <em>, <adress>..

met behulp van CSS is de gehele visuele layout van ieder element te veranderen, dus een P is door
1
2
3		P {
   display: inline;
}
ook inline te maken alswel een SPAN kun je daarmee een block-element maken (mbhv "display: block;")

Maar dat moet je niet zomaar gan doen, de truc is eigenlijk dat je probeert te zorgen dat je HTML-code zelf redelijk sober en overzichtelijk blijft, het beste kun je dat doen door bv semantisch correcte code te gebruiken, dus altijd P's voor alinea's, H1,H2,H3 voor titels en subtitels

bijvoorbeeld:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19		<ul id="menu">
   <li> <a href="pagina1.html">linkje 1</a></li>
   <li> <a href="pagina2.html">linkje 2</a></li>
   <li> <a href="pagina3.html">linkje 3</a></li>
</ul>
<div id="mainBody">
   <h1>Een voorbeeldje van sematische HTML</h1>
 
   <h2>eerste subtitel</h2>
   <p> eerste paragraaf,die een <em>stukje tekst</em> bevat...</p>

   <h2>tweede subtitel</h2>
   <p> eerste paragraaf,welk <strong>ook</strong> weer wat tekstuele
     inhoud bevat...</p>
</div>
<div id="sideNotes">
   <h1> zijdelingse notities</h1>
   <p> bladieblah, nog wat tekst</p>
</div>


dit is dan weer te stylen door bv
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38		<style type="text/css">
HTML, BODY { width: 100%; height: 100%; padding: 0; margin: 0; }
UL { margin: 0; padding: 0; }
UL LI {  display: inline; list-style: none; }

DIV#mainBody {
   float: left;
   width: 75%;
}
DIV#mainBody H1 {
    font-size: 18px;
   color: red;
}
DIV#mainBody H2 {
    font-size: 14px;
    color: orange;
}
DIV#mainBody P {
    font-size: 11px;
    color: #333;
}
DIV#sideNotes {
  width: 25%;
  backgroundcolor: blue;
  color: white;
}
DIV#sideNotes H1 {
  font-size: 12px;
  margin: 3px 0 5px 0;
  padding: 0;
}
DIV#sideNotes P {
  font-size: 10px;
  margin: 1px 0 2px 0;
  padding: 0;
}

</style>
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_24028157
Ik ben een layout aan het ontwikkelen voor een nieuw project van me, die hier te vinden is. In Firefox ziet het er goed uit, precies zoals ik wil. Maar in IE ziet het er totaal niet uit. Contentboxen zijn zo breed als dat er tekst in staat.

Op deze manier:
1
2
3
4
5
6
7
8
9
10		         #user {
            position:       absolute;
            top:          20px;
            left:         246px;
            right:         20px;
            height:         14px;
            padding-left:   5px;
            border:       1px solid #000; 
            background:      #fee;
         }


... wil ik een bepaalde DIV gevuld hebben tot de rechterkant van het scherm, op 20 pixels na. In Firefox werkt dat, maar in IE dus niet. Hoe 'zeg' ik in CSS dat ik het helemaal gevuld wil hebben? (zie de link voor duidelijkheid)

-edit-
In Opera werkt het ook prima

[ Bericht 3% gewijzigd door Heliospan op 17-12-2004 02:57:18 ]
» Help mee met DrugsMag.nl! «
Chillosophy, Gras is groen
  vrijdag 17 december 2004 @ 03:21:23 #65
44679 Leshy
Held met sokken.
pi_24029125
Ik heb net eventjes naar je layout gekeken, en alhoewel uiteraard hulde voor het gebruik van CSS, toch een paar kleine dingetjes gezien.

  • CSS-waardes van 0 hebben geen achtervoegsel nodig. Dus gewoon 0 in plaats van 0px
  • Lettergroottes nooit in pixels weergeven, sommige browsers (MSIE) kunnen dan de lettergrootte niet meer aanpassen.
  • Absoluut positioneren is eigenlijk iets wat je niet of tenminste zo min mogelijk moet gebruiken. Op lagere resoluties en onder andere vage omstandigheden kan je layout dan vreemd gaan doen.
  • Gebruik geen XHTML-tags als je doctype HTML aangeeft. Dus gewoon <br> in plaats van <br/>.
  • Gebruik tags waar ze voor bedoeld zijn. <h?> tags zijn voor koppen en tussenkopjes, niet om willekeurige woorden vet en/of onderlijnd te maken.

    Ik ben dus even zo vrij geweest om wat te knutselen en heb een alternatieve versie van je site in elkaar geknutseld mbv CSS, op de manier waarop ik het zou aanpakken. Deze layout werkt zowel in Opera, MSIE als Firefox als het goed is

    En nee, ik kwam er zo gauw niet achter waarom in jouw versie MSIE idioot doet
    • pi_24030237
    Probeer het eens met een xhtml doctype
    pi_24032957
    quote:
    Op vrijdag 17 december 2004 03:21 schreef Leshy het volgende:

    Ik ben dus even zo vrij geweest om wat te knutselen en heb een alternatieve versie van je site in elkaar geknutseld mbv CSS, op de manier waarop ik het zou aanpakken. Deze layout werkt zowel in Opera, MSIE als Firefox als het goed is
    Leshy! Geweldig! Bedankt voor de moeite!
    quote:
  • Lettergroottes nooit in pixels weergeven, sommige browsers (MSIE) kunnen dan de lettergrootte niet meer aanpassen.
    • Ah, ik zat me al een hele tijd af te vragen waarom dat zo vreemd ging in IE. Weer wat geleerd
    quote:
  • Absoluut positioneren is eigenlijk iets wat je niet of tenminste zo min mogelijk moet gebruiken. Op lagere resoluties en onder andere vage omstandigheden kan je layout dan vreemd gaan doen.
    • Je hebt gelijk. Maar, ik had de pagina links uitgelijnd, waardoor de pagina er links (bij het logo, de navigatie en het menuutje) altijd hetzelfde uitzag en de rest mee zou resizen. Maar dat kan dus ook wel op een andere manier
    quote:
  • Gebruik tags waar ze voor bedoeld zijn. <h?> tags zijn voor koppen en tussenkopjes, niet om willekeurige woorden vet en/of onderlijnd te maken.
    • Ik zat even te testen hoe de validators hierop zouden reageren. Als ik <b>...</b> gebruik is het fout, als ik het op deze manier deed was het wel goed. Ik vond het al zo vreemd.

    Bedankt dat je hier zoveel tijd in hebt gestopt. Nu kan ik bijna weer verder met de dingen die ik veel leuker vind, scripten ipv designen
    » Help mee met DrugsMag.nl! «
    Chillosophy, Gras is groen
    pi_24082803
    Ik ben weer is met CSS verder gaan stoeien alleen kom ik even ergens niet uit.
    Ik wil graag op 1 regel iets links en rechts uitgelijnd hebben.
    Ik had zelf het volgende in gedachten:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20    		<style type="text/css">
    H5 {
       MARGIN: 0px; 
       FONT: 9px Arial, Geneva, Helvetica, sans-serif; 
       COLOR: #9a9acc; 
       TEXT-ALIGN: left;
       PADDING-LEFT: 10px 
    }

    H6 {
       MARGIN: 0px;
       FONT: 9px Arial, Geneva, Helvetica, sans-serif;
       COLOR: #9a9acc;
       TEXT-ALIGN: right;
       PADDING-RIGHT: 10px;
    }
    </style>

    <H5>een teskt</H5>
    <H6>andere tekst</H6>


    Er wordt wel links en rechts uitgelijnd alleen niet op 1 regel. De tekst andere tekst komt op een regel er onder, Kan Iemand mij vertellen hoe ik dit wel goed krijg ?
      zondag 19 december 2004 @ 16:05:06 #69
    44679 Leshy
    Held met sokken.
    pi_24083227
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11    		<style type='text/css'>
      .right {text-align: right;}
      .left {text-align: left; float: left;}
    </style>

    [...]

    <div class='right'>
      <span class='left'>Dit staat links</span>
      Dit staat rechts.
    </div>
    pi_24083577
    Bedank Leshy!

    Ik had ook met float zitten klooien alleen ik haalde dan text-align weg...
    pi_24084086
    Nu we toch bezig zijn, heb ik ook een vraagje

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12    		<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="20%" height="20">
      <tr>
        <td width="20%" height="23" align="center">
        <p align="center"><div class="menu"><a href="?surf=home">Home</a></div></td>
        <td width="20%" height="23" align="center">
        <p align="center"><div class="menu"><a href="?surf=results">Results</a></div></td>
        <td width="20%" height="23" align="center">
        <p align="center"><div class="menu"><a href="?surf=history">History</a></div></td>
        <td width="20%" height="23" align="center">
        <p align="center"><div class="menu"><a href="mailto:sinan[at]sinan06[dot]nl">Contact</a></div></td>
      </tr>
    </table>


    Hoe kan ik in 1 keer voor het hele tabel een lay-out meegeven.
    Nu heb ik bij ieder woord/zin apart <div class="menu">...</div/> vermeldt.
    ne okuyon, bokmu var?
      zondag 19 december 2004 @ 17:12:50 #72
    44679 Leshy
    Held met sokken.
    pi_24084659
    Voor een menu is het makkelijker een unordered list te gebruiken. Dit scheelt flink wat HTML-code, zeker wanneer je de CSS netjes in een extern bestand steekt.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24    		<style type='text/css'>
      ul#menu {
        list-style-type: none;
        margin-left: 0;
        width: 20%;
        text-align: center;
      }
      ul#menu li {
        display: inline;
        padding: 0 4px;
      }
      ul#menu li a {
        [CSS voor de links]
      }
    </style>

    [...]

    <ul id='menu'>
      <li><a href='?surf=home'>Home</a></li>
      <li><a href='?surf=results'>Results</a></li>
      <li><a href='?surf=history'>History</a></li>
      <li><a href='mailto:sinan[at]sinan06[dot].nl'>Contact</a></li>
    </ul>
    pi_24085559
    quote:
    Op zondag 19 december 2004 17:12 schreef Leshy het volgende:
    Voor een menu is het makkelijker een unordered list te gebruiken. Dit scheelt flink wat HTML-code, zeker wanneer je de CSS netjes in een extern bestand steekt.
    [ code verwijderd ]
    En als ik dit voor je links wil toepassen;

    1
    2
    3
    4
    5
    6
    7
    8    		a {
      color: #FFFFFF;
      border-bottom: 1px none;
      text-decoration: none;
    }
    a:hover {
      border-bottom: 1px dashed #FFFFFF;
    }


    Zo werkt het niet;
    1
    2
    3
    4
    5
    6
    7
    8    		  ul#menu li a {
        color: #FFFFFF;
        border-bottom: 1px none;
        text-decoration: none;
      }
      ul#menu li a:hover {
      border-bottom: 1px dashed #FFFFFF;
    }


    Wat doe ik verkeerd ?

    Dit is de menu
    ne okuyon, bokmu var?
    pi_24086154
    Wrom gebruik je overal single quotes?
    pi_24086181
    Maar waarschijnlijk moet je even goed refreshen, want het menu doet het hier wel..
      zondag 19 december 2004 @ 18:36:42 #76
    44679 Leshy
    Held met sokken.
    pi_24086384
    quote:
    Op zondag 19 december 2004 18:25 schreef Roönaän het volgende:
    Wrom gebruik je overal single quotes?
    Puur uit gewoonte
    quote:
    Op zondag 19 december 2004 18:00 schreef saban het volgende:
    Wat doe ik verkeerd ?
    Niets, zo moet het wel degelijk werken
    pi_24086402
    quote:
    Op zondag 19 december 2004 18:26 schreef Roönaän het volgende:
    Maar waarschijnlijk moet je even goed refreshen, want het menu doet het hier wel..
    Ik werk daar nog met divjes + html tabel, niet met de voorbeeld die ik kreeg, daarom werkt het
    ne okuyon, bokmu var?
    pi_24086516
    quote:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>index</title>
    <style type='text/css'>
    ul#menu {
    list-style-type: none;
    margin-left: 0;
    width: 20%;
    text-align: center;
    }
    ul#menu li {
    font-family: tahoma;
    font-size: 10px;
    display: inline;
    padding: 0 4px;
    color: #EEEEEE;
    }
    ul#menu li a {
    color: #EEEEEE;
    border-bottom: 1px none;
    text-decoration: none;
    }
    ul#menu li a:hover {
    border-bottom: 1px dashed #EEEEEE;
    }
    </style>
    </head>

    <body bgcolor="#000000">
    <ul id='menu'>
    <li><a href='?surf=home'>Home</a></li>
    <li><a href='?surf=results'>Results</a></li>
    <li><a href='?surf=history'>History</a></li>
    <li><a href='mailto:sinan[at]sinan06[dot].nl'>Contact</a></li>
    </ul>
    </body>

    </html>
    Ik zie geen dashed underline als ik met mn muis over de links heen ga ..
    ne okuyon, bokmu var?
    pi_24087331
    quote:
    Op zondag 19 december 2004 18:42 schreef saban het volgende:

    [..]

    Ik zie geen dashed underline als ik met mn muis over de links heen ga ..
    Ik wel, dus die CSS lijkt me in orde. Ondersteunt je browser wel dashed underline?
    fokstok.nl
      zondag 19 december 2004 @ 19:52:11 #80
    44679 Leshy
    Held met sokken.
    pi_24087815
    quote:
    Op zondag 19 december 2004 19:21 schreef Light het volgende:
    Ik wel, dus die CSS lijkt me in orde. Ondersteunt je browser wel dashed underline?
    MSIE ondersteunt wel dashed borders, dat is het probleem niet.

    Opera en Firefox hebben beiden geen probleem met het weergeven van de dashed border - en terecht omdat het gewoon correcte CSS is. MSIE echter laat weer zien dat het gewoon een drama is in het toepassen van CSS. Blijkbaar valt de border van de link buiten de <li>, ondanks dat deze er gewoon in staat.

    @saban:
    De oplossing is om deze regel toe te voegen aan je CSS:
    1* html ul#menu li {height: 13px;} /* MSIE hack */


    Dit is een stukje foute CSS dat alle browsers netjes negeren, zoals ze horen te doen. Natuurlijk weer met uitzondering van Internet Explorer, die het gewoon slikt. Let erop dat als je je tekstgrootte ooit aanpast, je ook even de hoogte in die regel verandert
    pi_24089326
    quote:
    Op zondag 19 december 2004 19:52 schreef Leshy het volgende:

    [..]

    MSIE ondersteunt wel dashed borders, dat is het probleem niet.

    Opera en Firefox hebben beiden geen probleem met het weergeven van de dashed border - en terecht omdat het gewoon correcte CSS is. MSIE echter laat weer zien dat het gewoon een drama is in het toepassen van CSS. Blijkbaar valt de border van de link buiten de <li>, ondanks dat deze er gewoon in staat.

    @saban:
    De oplossing is om deze regel toe te voegen aan je CSS:
    [ code verwijderd ]

    Dit is een stukje foute CSS dat alle browsers netjes negeren, zoals ze horen te doen. Natuurlijk weer met uitzondering van Internet Explorer, die het gewoon slikt. Let erop dat als je je tekstgrootte ooit aanpast, je ook even de hoogte in die regel verandert
    Aha, thx.
    Nu werkt het
    ne okuyon, bokmu var?
    pi_24121773
    Ik probeer het volgende voor elkaar te krijgen. qua layout opbouw dan in CSS.



    en heb reeds de volgende css opbouw + html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57    		<style>

    body
    {
        margin: 0px auto;
       
    }

    #main
    {
        width: 100%;
    }

    #left
    {
        float: left;
        width: 25px;
        background: #EAEAEA;
       
    }

    #middle
    {
        width: 500px;
        background: #000000;
    }


    #right
    {
        width: 100%;
        background: #904fff;

    }

    </style>

    <div id="main">
        <div id="left"></div>

        <div id="middle">
            <div id="header">
                <div id="headermenu">
                </div>

                <div id="headerlogo">
                </div>
            </div>


            <div id="middletext">InnerHTML</div>

            <div id="footer">(c) bladedieblaat</div>
        </div>
        
        </div id="right">Dit is de rechter kollom</div>
    </div>


    echter geeft dat niet echt het resultaat wat ik eerst wil, ik krijg bijvoorbeeld de tekst van de rechter kolom geheel niet rechts; ik heb veel geprobeerd steeeds weer overnieuw begonnen maar niets wilde baten... Iemand een idee?
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24125889
    Waarom doe je het niet met tabellen?
    pi_24126125
    ik zou het gewoon graag met divs willen zien; is handiger; overzichtelijker en ook moeilijker te realiseren
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24135904
    Lamaar. staat wel tekst in rechts.
    pi_24136638
    Hmm.. Er zit nog een whitespaceline tussen het submenu en de content. Maar voor de rest zie:
    http://foreverland.nl/docs/reports/chand.html
    pi_24143167
    Roonaan: Netties; ik zelf had dit in elkaar geknutseld (vannacht)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111    		<style>
    body
    {
        margin: 0px auto;
    }

    #cell
    {
        width: 100%;
        height: 500px;
    }

    #left
    {
        margin-left: 0px;
        position: absolute;
        width: 25px;
        height: 100%;
        background: green;
        background-image: url('left_bkgnd_fill.gif');
    }

    #middle
    {
        margin-left: 25px;
        position: absolute;
        width: 675px;
        height: 100%;
        background: #3d3d32;
    }

    #right
    {
        margin-left: 700px;
        position: absolute;
        width: 100%;
        height: 100%;
        background: blue;
        background-image: url('bluey.gif');
    }

    #menu
    {
        width: 250px;
    }

    #menuimage
    {
        margin-left: 250px;
        text-align: right;
        width: 425px;
    }

    #content
    {
        width: 675px;
        background: #ffffff;
    }

    #footer
    {
        padding-left: 10px;
        padding-top: 20px;
        height: 25px;
        font-size: 9px;
        color: #ffffff; 
        font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    .but
    {
        margin-top: 5px;
        padding-left: 10px;
        width: 225px;
        height: 26px;
        background: #5EB5D5;
        font-family: arial;
        font-size: 18px;
        color: #FFFFFF;
        text-decoration:none
    }

    .but:hover
    {
        margin-top: 5px;
        padding-left: 10px;
        width: 225px;
        height: 26px;
        background: #5EB5D5;
        font-family: arial;
        font-size: 18px;
        color: #000000;
        text-decoration:none
    }

    </style>

    <div id="cell">
        <div id="left"></div>
        <div id="middle">
            <div id="menu">
                <a href="#" class="but">Woei</a>
                <a href="#" class="but">Woei</a>
                <a href="#" class="but">Woei</a>
            </div>
            <div id="menuimage">IMAGE </div>
            <div id="content">testtest?</div>
            <div id="footer">(c) 2004 E. Bruggema, scripting & graphical all reserved by its rightfull owners</div>
        </div>

        <div id="right"></div>
    </div>

    met als uitkomst zie voorbeeld helemaal zelf gecoded
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24143293
    alleen staat de 'image' niet goed gepositioneerd? en ik snap dus niet waarom
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24162243


    Daar staat dus een groot vlak, en dan er links en rechts naast twee kleine vakjes (met Titel erin). Die vakjes wil ik een vaste breedte geven, dus bijv 150px. Dat lukt niet. Het zijn tabel cellen. Maar ze vormen zich dus naar de breedte van het content vak, iemand een idee?

    Een divje met een width van 150px did the trick.
    pi_24164108
    LOL Db; heb je ook een tips op mijn laatste CSS?
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24165384
    Waar moet IMAGE dan wel komen te staan?
    pi_24170146
    gewoon bovenaan; precies naast het menu...
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24171010
    tvp
    pi_24174781
    Misschien als je #middle een text-align: center; geeft. Maak dan wel de div voor je image kleiner.
    pi_24182107
    ik zal het eens proberen; nog een vraagje; is het mogelijk om een plaatje in #menu te zetten

    1
    2
    3
    4    		#menu
    {
        width: 250px;
    }


    maar dan moet het plaatje wel aan de rechterkant staan of moet ik daar dan ook weer een aparte 'style' voor maken?
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24182200
    quote:
    Op vrijdag 24 december 2004 16:07 schreef Chandler het volgende:
    ik zal het eens proberen; nog een vraagje; is het mogelijk om een plaatje in #menu te zetten
    [ code verwijderd ]

    maar dan moet het plaatje wel aan de rechterkant staan of moet ik daar dan ook weer een aparte 'style' voor maken?
    http://www.w3schools.com/css/css_reference.asp#background

    En dan dus waar je em wil hebben, en op no-repeat denk ik.
    pi_24182546
    tnx; het heeft inderdaad gewerkt!!! maar dat met die "IMAGE" werkt helaas nog steeds niet
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24183351
    Je moet hem denk ik absoluut positioneren. Of hem in de menu-div gooien, als je nl 2 div's hebt pakt ie automatisch een nieuwe regel.
    pi_24183942
    display:inline zou dan moeten werken dan pakt ie geen nieuwe regel; ik gaat verder kloten
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24183973
    b.t.w check de 'example' maar @ http://upload.bruggema.nl/files/test1.html
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    actieve topics nieuwe topics
    abonnement Unibet Coolblue Bitvavo
    [CSS] voor dummies.
    Index

    » digital corner

    Forum Opties
    Forumhop:
    Hop naar:
    (afkorting, bv 'KLB')