[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...
    pi_24199762
    iemand nog een idee
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24238330
    Iemand meer? kom er echt niet uit; niets werkt
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24244017
    laat maar mensen; ik flikker dit project de prullenbak in alsmede mijn css shit... gaat nergensmeer over
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24291293
    Ik heb een tabel die ik in het midden van mijn pagina wil centreren.

    Gebruikte css code;
    1
    2
    3
    4
    5
    6
    7    		table.login
    {
    text-align: center;
    color: #000000;
    font-family: tahoma;
    font-size: 10px;
    }


    Gebruikte html van tabel;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12    		<form method="POST" action="login.php">
    <table border="0" cellpadding="0" cellspacing="0" width="40%">
      <tr>
        <td width="50%" align="center">Login</td>
        <td width="50%" align="center"><input type="text" name="login" size="20"></td>
      </tr>
      <tr>
        <td width="50%" align="center">Wachtwoord</td>
        <td width="50%" align="center"><input type="password" name="wachtwoord" size="20"></td>
      </tr>
    </table>
    </form>


    Maar hij centreert hem niet in de midden van mijn pagina.
    Hij zet hem ongeveer op 25%.

    Wat is er fout ?

    (saban is css-newbie)
    ne okuyon, bokmu var?
      donderdag 30 december 2004 @ 12:28:49 #105
    44679 Leshy
    Held met sokken.
    pi_24295412
    Voeg margin: auto; toe aan de CSS voor je table.
    pi_24301727
    quote:
    Op donderdag 30 december 2004 12:28 schreef Leshy het volgende:
    Voeg margin: auto; toe aan de CSS voor je table.
    Werkt nog steeds niet, hij is ongeveer 5-10pixels meer naar links getrokken.
    ne okuyon, bokmu var?
      donderdag 30 december 2004 @ 19:41:15 #107
    44679 Leshy
    Held met sokken.
    pi_24303742
    Zet eens een border van 1px rond de form zelf (form {border: 1px solid #f00}), en kijk of die netjes de volledige breedte van je pagina gebruikt.
    pi_24434838
    iemand tips bij het volgende css gebeuren (gecoded samen met Roonaan!)

    http://upload.bruggema.nl/files/test5.html

    Foutjes
    IE - linkje afbeelding
    - Klopt het menu niet, als je klikt op een van de 3 menu's verschijnt het 'submenu' er niet direct onder
    - Verschuift 1 van de 'menutjes' ietsje naar beneden bij een klik op z'n menu

    FF/MOZ - linkje afbeelding
    - Staan de 'thumbs' niet zoals bij IE..

    Iemand een idee?

    [ Bericht 19% gewijzigd door Chandler op 06-01-2005 17:05:45 ]
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24435203
    1
    2
    3    		<li onclick="swap(this);"><span class="menubutton">GALLERIES</span>
                     <ul class="submenu">GALLERIES HIDDEN!</ul>
                 </li>

    die UL is nogal sleazy coding, dit is geen Unordered List, gebruik dan liever een SPAN.
    de extra witruimte in IE komt waarschijnlijk omdat een UL een display: block heeft, maar de beste manier om dit te voorkomen is door je html-code ook semantisch correct op te zetten

    de witte achtergrond in Mozilla zou wel eens kunnen komen omdat je de shorthand propety niet geheel toepast zoals het hoort, probeer daar een background-color: #FFF; van te maken (alhoewel hij dat bij 'top' wel #3d3d32 accepteerd, en in het bottomelement wel de achtergrond wit maakt.. is 'content' misschien een reserved woord (content is natuurlijk ook een CSS2-property zelf ...))
    "Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
    pi_24435290
    Die LI & UL heb ik ingebouwd op reacties van gotters en vooral Roonaan, en hoe bedoel je semantisch correct? dit is volgens vele mensen 100% correct

    ennuh background-color:#fff; werkt helaas niet
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24436028
    ik doel op
    1<ul class="submenu">GALLERIES HIDDEN!</ul>
    een UL is een unordered list, welke inderdaad een goede optie is als je met een lijstje links werkt (zoals dat navigatiemenuutje zelf), maar deze moet altijd merdere LI's bevatten (of een UL ook 1 LI mag bevatten is een kwestie van discussie, volgens de DTD mag het wel, maar eigenlijk denk ik dat in zo'n geval het erg twijfelachtig is of het begrip 'list' nog wel van toepassing is)..

    verder, nooit zomaar mensen op hun woord vertrouwen omdat ze 'gotters' zouden zijn en dat dat een kwaliteitsgarantie zou zijn, er zijn ook genoeg idioten zonder kennis die daar het tot in de crew redden, net als intelligente mensen die liever hier op Fok! posten
    "Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
    pi_24437398
    Dus ik zou beter iets anders moeten gaan bedenken voor
    1<ul class="submenu">GALLERIES HIDDEN!</ul>
    Misschien zoals je zelf vermelde een span of iets dergelijks?

    Ennuh nee ik vertrouw gotters eingelijk voor zover ik ze zie; ben er reeds 2x gebanned om 'twijfel' achtige topics... 't is daar idd vriendjes politiek gericht

    maar dat terzijde; heb je misschien een oplossing gevonden voor de 'background' want helaas werkte je idee niet
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
      donderdag 6 januari 2005 @ 21:10:09 #113
    44679 Leshy
    Held met sokken.
    pi_24439321
    http://www.leshy.net/dev/bruggema.html

    Ik heb je basic layout even overnieuw gedaan. Je gebruikt nogal veel wrapper divs, wat in het geheel niet noodzakelijk is. En ja, die unordered lists moet je inderdaad even oplossen - bovendien werkt je JavaScript voor het menu niet in Opera, ik heb te weinig verstand van JavaScript om te zien wat er niet correct aan is
    pi_24440350
    Tnx leshy, maar weet jij nu ook de oplossing voor IE? dat de menu's naar beneden springen? ik zie dat jij ook UL hebt gebruikt...
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24440569
    Ik heb het even iets aangepast en gewoon de ul's verwijderd en in een andere div gestopt en deze ergens anders geplaatst.. zie resultaat.

    http://upload.bruggema.nl/files/leshy.html

    ben best tevreden, echter scheelt het toch weer een paar pixels in FF en in IE is'tie nu helemaal goed ik wordt gek!
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24449126
    better use .submenu a {display:block;} ipv al die <br/>'s
    pi_24450378
    ok tnx roonaan
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24458997
    Iemand nog tips voor me gallery, laatste versie staat op http://upload.bruggema.nl/files/leshy.html , zelf vind ik de 'plaatjes' niet zo mooi binnen de nieuwe layout iemand die hier misschien mooiere suggesties voor/over heeft?
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24462743
    Je thumbnails zijn zwaar verneukt. Het lijkt er op dat je ze met de GD-library verkleint. Misschien kun je een wat hogere waarde nemen voor de kwaliteit? En verder vraag ik me af waarom je de Google-layout gebruikt. Ik neem aan dat daar een copyright op zit?
    » Help mee met DrugsMag.nl! «
    Chillosophy, Gras is groen
    pi_24462778
    Heliospan, let svp niet op de thumbnails deze zijn idd minder mooi maar't gaat nu even om de 1e layout die je ziet; wanneer je doorklikt zie je idd de oude 'google a like' gallery layout die ik nu aan't aanpassen ben. Dus wil graag nu meer comments op de huidige layout (leshy.html)
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24463102
    Heh, okay. Ik bedoel het allemaal niet te negatief, maar ik vind de layout niet zo denderend:
    - Extreem grote knopjes (waarom?)
    - Onleesbare tekst in de menuutjes van de knopjes (blauwgroen en wit op lichtblauw leest niet fijn, gebruik een hoger contrast)
    - Storend achtergrondplaatje achter "Loaded gallery: testtest". Maakt het alleen maar moeilijker leesbaar.
    - Persoonlijk zou ik veel borders toevoegen (misschien kwestie van smaak). Om #content, #contentmenu en #top bijvoorbeeld. Dat geeft de pagina een strakkere layout, met duidelijke afscheidingen.
    - Meer en kleinere foto's per rij zou ook leuk zijn. Vier passen er makkelijk op als je de afbeeldingen een beetje kleiner maakt. Ik denk dat het ook leuk staat als je achter de achtergrond van de foto's één vaste kleur geeft (alleen lichtblauw ipv lichtblauw + wit) en tussen elke foto een cellspacing/padding open laat, die een andere achtergrondkleur heeft (bijvoorbeeld wit)
    - De copyright 'in' de pagina ipv 'onder' de pagina en de pagina door laten lopen tot de bodem.

    Misschien kun je er wat mee
    » Help mee met DrugsMag.nl! «
    Chillosophy, Gras is groen
    pi_24463165
    Gelukkig heliospan; kritiek is altijd welkom.

    - Extreem grote knopjes (waarom?)
    > Omdat er een menu achter zit

    - Storend achtergrondplaatje achter "Loaded gallery: testtest". Maakt het alleen maar moeilijker leesbaar.
    > Daar moet ik idd nog wat op bedenken.

    - Persoonlijk zou ik veel borders toevoegen (misschien kwestie van smaak). Om #content, #contentmenu en #top bijvoorbeeld. Dat geeft de pagina een strakkere layout, met duidelijke afscheidingen.
    > ben zelf niet zo'n border persoon maar zal eens kijken wat het verschil is.

    - Meer en kleinere foto's per rij zou ook leuk zijn. Vier passen er makkelijk op als je de afbeeldingen een beetje kleiner maakt. Ik denk dat het ook leuk staat als je achter de achtergrond van de foto's één vaste kleur geeft (alleen lichtblauw ipv lichtblauw + wit) en tussen elke foto een cellspacing/padding open laat, die een andere achtergrondkleur heeft (bijvoorbeeld wit)
    > ja de plaatjes daar ging me vraag in de 1e instantie ook over (had ik beter even beter kunnen melden maar goed) ik wil dit op gebruikersbasis laten zien, dus wanneer de user zegt 2 plaatjes dat er dan 2 pics naast elkaar staan en zegt de user 4 dan 4... etc

    - De copyright 'in' de pagina ipv 'onder' de pagina en de pagina door laten lopen tot de bodem.
    > Hmm, ik zal eens kijken wat ik hiervan kan maken...
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
      zaterdag 8 januari 2005 @ 13:56:06 #123
    25090 SqueaK
    "Pis nooit tegen de wind
    pi_24463387
    ik wil 2 cellen naast elkaar... in de ene cel komt een foto.... en in de cel daarlangs komt tekst...

    de tekst komt dan dus langs de foto te staan.... Nu heb ik die 2 cellen zo gemaakt:
    quote:
    #update-foto {
    background: #d8d8d8;
    width: 100px;
    height: 100px;
    margin-left: 10px;
    margin-top: 20px;
    }

    #update-tekst {
    background: #e0e0e0;
    width: 400px;
    height: 100px;
    margin-left: 110px;
    margin-top: 20px;
    }
    maar dan gaat het er zo uit zien:


    dan gaat de update-tekst er dus onder staan... die grijze vlakken moeten gewoon lang selkaar
      zaterdag 8 januari 2005 @ 13:59:36 #124
    44679 Leshy
    Held met sokken.
    pi_24463454
    Voeg een float: left; toe aan je #update-foto.
      zaterdag 8 januari 2005 @ 14:07:43 #125
    693 ChOas
    ** Warning: Choking hazard **
    pi_24463584
    quote:
    Op zaterdag 8 januari 2005 02:32 schreef Chandler het volgende:
    Iemand nog tips voor me gallery, laatste versie staat op http://upload.bruggema.nl/files/leshy.html , zelf vind ik de 'plaatjes' niet zo mooi binnen de nieuwe layout iemand die hier misschien mooiere suggesties voor/over heeft?
    Krijg nou tandjes! ik sta op sommige van die fotos
    "I contend that we are both atheists. I just believe in one fewer god than you do.
    When you understand why you dismiss all the other possible gods, you will understand why I dismiss yours."
    [Stephen Roberts]
    pi_24463596
    leshy: ook nog tips voor mij?
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
      zaterdag 8 januari 2005 @ 14:24:29 #127
    25090 SqueaK
    "Pis nooit tegen de wind
    pi_24463856
    quote:
    Op zaterdag 8 januari 2005 13:59 schreef Leshy het volgende:
    Voeg een float: left; toe aan je #update-foto.
    jaa dat werkt ! alleen dat brengt een volgend probleempje mee.... een witte ruimte:



    hoe gaat die weg ?

    dit is de code nu:
    quote:
    #update {
    background: Red;
    color: #ffffff;
    width: 500px;
    margin: 15px auto auto auto;
    }

    #update-foto {
    background: #d8d8d8;
    width: 100px;
    height: 100px;
    margin: auto auto auto 15px;
    float: left;
    }

    #update-tekst {
    background: #e0e0e0;
    width: 400px;
    height: 100px;
    margin: auto auto auto 100px;
    }
    pi_24464026
    padding: 0? werkt dat?
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
      zaterdag 8 januari 2005 @ 14:54:57 #129
    25090 SqueaK
    "Pis nooit tegen de wind
    pi_24464377
    quote:
    Op zaterdag 8 januari 2005 14:32 schreef Chandler het volgende:
    padding: 0? werkt dat?
    nee werkt niet ..
    pi_24464463
    ennuh waarom gebruik je margin: auto auto auto auto 15px; gebruik dan alleen de margin-<???>: 15px;

    ennuh Heliospan, die borders waren een goed idee; verder heb ik een kader om de titel heen gezet en lijkt er nu al wat meer op... nog meer tips?

    ChOas: Fok 5 jaar BBQ meeting?
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
      zaterdag 8 januari 2005 @ 15:11:39 #131
    44679 Leshy
    Held met sokken.
    pi_24464671
    quote:
    Op zaterdag 8 januari 2005 14:08 schreef Chandler het volgende:
    leshy: ook nog tips voor mij?
    Ik ben het grotendeels eens met de bovenstaande dingen die al gezegd zijn
    quote:
    Op zaterdag 8 januari 2005 14:24 schreef SqueaK het volgende:
    jaa dat werkt ! alleen dat brengt een volgend probleempje mee.... een witte ruimte:
    Ah, de befaamde 3px MSIE bug. Ik weet niet wat je huidige HTML-code is, maar waarschijnlijk wordt het wat geklooi, met dank aan Microsoft
      zaterdag 8 januari 2005 @ 15:13:29 #132
    693 ChOas
    ** Warning: Choking hazard **
    pi_24464699
    quote:
    Op zaterdag 8 januari 2005 14:59 schreef Chandler het volgende:


    ChOas: Fok 5 jaar BBQ meeting?
    Ah, ja dat kan! daar was ik

    Was het leuk ?
    "I contend that we are both atheists. I just believe in one fewer god than you do.
    When you understand why you dismiss all the other possible gods, you will understand why I dismiss yours."
    [Stephen Roberts]
    pi_24464753
    quote:
    Op zaterdag 8 januari 2005 15:11 schreef Leshy het volgende:
    Ik ben het grotendeels eens met de bovenstaande dingen die al gezegd zijn
    Hmm... LOL, maar verder niet ideeen die ik misschien kan overnemen?
    quote:
    Op zaterdag 8 januari 2005 15:13 schreef ChOas het volgende:
    Ah, ja dat kan! daar was ik

    Was het leuk ?
    Ja idd, het was leuk alleen niet geneukt.... hehe
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
      zaterdag 8 januari 2005 @ 15:21:12 #134
    25090 SqueaK
    "Pis nooit tegen de wind
    pi_24464805
    quote:
    Op zaterdag 8 januari 2005 14:59 schreef Chandler het volgende:
    ennuh waarom gebruik je margin: auto auto auto auto 15px; gebruik dan alleen de margin-<???>: 15px;
    ja ok heb je gelijk in... maar dat neemt niet weg dat ik nog steeds dat probleem van die witte rand heb...
    pi_24464860
    hmm.. zoals leshy al zei; dat het een 'bug' is in IE, is in FF het probleem ook aanwezig? (ff - firefox / mozilla)
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24464984
    quote:
    Op zaterdag 8 januari 2005 14:59 schreef Chandler het volgende:
    ennuh Heliospan, die borders waren een goed idee; verder heb ik een kader om de titel heen gezet en lijkt er nu al wat meer op... nog meer tips?
    Ziet er inderdaad al een heel stuk beter uit! Die copyright onderaan ook, precies wat ik bedoelde
    Ik blijf die knopjes echt te groot vinden. Ik kan me een layout van je herinneren voor een pollscript, die je samen met 'programer' maakte (ofzo? mijn geheugen is wazig ). In die layout kon je snel switchen tussen verschillende menu-onderdelen, omdat de hele pagina in 1x geladen werd. Misschien kun je iets dergelijks nu weer gebruiken. Dat als je op het knopje 'settings' klikt de #content vervangen wordt met de instellingenpagina. Dan zit het allemaal ook niet zo krap op elkaar. Maar dit is een idee, je moet natuurlijk doen wat je zelf wil.

    Klein bugje nog bij die uitschuifmenuutjes; uitschuifmenuutjes blijven staan als je op een andere klikt ipv ze eerst wegklikt. Ik denk dat er een foutje zit in de openClose-functie, maar die kan ik zo even niet ontdekken. (In Firefox overigens).

    En om nog eens terug te komen op de knopjes: Als je ze nu eens horizontaal neerzet, nemen ze al een stuk minder ruimte in beslag. Ook is de hoogte nu enigzins overbodig, er is veel ongebruikte ruimte. Ik maakte even een schetsje in Photoshop als voorbeeld:


    Hoewel het er niet erg mooi uit ziet snap je het idee vast wel
    » Help mee met DrugsMag.nl! «
    Chillosophy, Gras is groen
      zaterdag 8 januari 2005 @ 16:21:38 #137
    25090 SqueaK
    "Pis nooit tegen de wind
    pi_24465718
    ik ben pas bezig in css maar wat een geouwhoer met die browsers zeg... ziet het er goed uit in I.E., dan ziet het er in FF weer kut uit... ziet het er in FF goed uit dan ziet het er in I.E. weer beroerd uit
    pi_24465924
    Ik zie nu pas dat dit het CSS voor dummies-topic is. Ik dacht het site check topic Excuses voor al het offtopic geblaat.
    » Help mee met DrugsMag.nl! «
    Chillosophy, Gras is groen
    pi_24467177
    quote:
    Op zaterdag 8 januari 2005 15:34 schreef Heliospan het volgende:
    Ziet er inderdaad al een heel stuk beter uit! Die copyright onderaan ook, precies wat ik bedoelde
    quote:
    Ik blijf die knopjes echt te groot vinden. Ik kan me een layout van je herinneren voor een pollscript, die je samen met 'programer' maakte (ofzo? mijn geheugen is wazig ). In die layout kon je snel switchen tussen verschillende menu-onderdelen, omdat de hele pagina in 1x geladen werd.
    http://gfxpoll.bruggema.nl
    quote:
    Misschien kun je iets dergelijks nu weer gebruiken. Dat als je op het knopje 'settings' klikt de #content vervangen wordt met de instellingenpagina. Dan zit het allemaal ook niet zo krap op elkaar. Maar dit is een idee, je moet natuurlijk doen wat je zelf wil.
    Die instellingen pagina kan ook als een 'volgende' pagina beschouwd worden zoals ik in de huidige layout (http://gallery.bruggema.nl) gebruik.
    quote:
    Klein bugje nog bij die uitschuifmenuutjes; uitschuifmenuutjes blijven staan als je op een andere klikt ipv ze eerst wegklikt. Ik denk dat er een foutje zit in de openClose-functie, maar die kan ik zo even niet ontdekken. (In Firefox overigens).
    Hmm, hier heb ik daar geen problemen mee....
    quote:
    En om nog eens terug te komen op de knopjes: Als je ze nu eens horizontaal neerzet, nemen ze al een stuk minder ruimte in beslag. Ook is de hoogte nu enigzins overbodig, er is veel ongebruikte ruimte. Ik maakte even een schetsje in Photoshop als voorbeeld:
    [afbeelding]
    Nou vind het idee wel mooi, ik zal eens gaan kijken wat ik er van kan bakken, echter wanneer ik met zulk soort buttons ga werken, zal ik de content gewoon moeten vervangen, juist het idee aan de linkerkant was bedoeld om zaken het zelfde te houden...
    quote:
    Hoewel het er niet erg mooi uit ziet snap je het idee vast wel
    Helemaal ennuh dat offtopic gelul; ga der maar GOED mee door
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
      zaterdag 8 januari 2005 @ 20:02:34 #140
    25090 SqueaK
    "Pis nooit tegen de wind
    pi_24469765
    ik heb een klein probleempje met IE en FF....

    open deze site http://www.furoreschoonmaakservice.nl/test/ maar eens in beide browsers...

    In internet explorer gaat het fout....in firefox gaat het wel goed.... waar kan het aan liggen ?

    dit is de code:
    (als ik "float: left" weghaal bij de "update-foto" cel dan gaat ie wel op de goede plaats staan, maar dan gaan de andere cellen er onder staan)
    quote:
    /* Basis */
    body {
    font: normal 10pt Arial, sans, sans-serif, monospace;
    color: Red;
    background: #C6C1B4;
    margin: 0px;
    padding: 0px;
    }

    span {
    display: none;
    }

    /* Container */
    #container {
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    width: 560px;
    position: relative;
    border: 0px;
    text-align: left;
    }

    /* Cel met de kopafbeelding erin */
    #header {
    background: #000000;
    width: 560px;
    height: 80px;
    padding: 1px;
    }

    /* De hoofdcel waar alles in komt */
    #hoofdcel {
    background: #ffffff;
    color: #000000;
    width: 560px;
    height: 500px;
    margin: 0px 0px 0px 0px;
    padding: 1px;
    }

    /* De cel waar de kop 'laatste update' komt te staan */
    #update {
    background: Red;
    color: #ffffff;
    width: 500px;
    height: 15px;
    margin-left: 30px;
    margin-top: 15px;
    }

    /* De cel waar de foto in komt van de laatst toegevoegde film */
    #update-foto {
    background: #e0e0e0;
    width: 100px;
    height: 100px;
    float: left;
    margin-left: 30px;

    }

    /* De cel waar de informatie in komt van de laatst toegevoegde film */
    #update-tekst {
    background: #e0e0e0;
    width: 400px;
    height: 100px;
    margin-left: 130px;
    }

    /* De cel waar de letters van het alfabet in komen */
    #alfabet {
    background: Red;
    color: #ffffff;
    width: 500px;
    height: 15px;
    margin-left: 30px;
    margin-top: 15px;
    }

    /* De cel waar de titels in komen */
    #films {
    background: #d8d8d8;
    width: 500px;
    height: auto;
    margin-left: 30px;
    }

    /* De onderste cel van alles */
    #celonder {
    background: #b7b7b7;
    color: #000000;
    width: 560px;
    height: 15px;
    }


    [ Bericht 40% gewijzigd door SqueaK op 08-01-2005 20:10:45 ]
      zondag 9 januari 2005 @ 11:14:44 #141
    25090 SqueaK
    "Pis nooit tegen de wind
    pi_24480858
    iemand ?
    pi_24491382
    quote:
    Op zondag 9 januari 2005 11:14 schreef SqueaK het volgende:
    iemand ? Leshy?
    » Help mee met DrugsMag.nl! «
    Chillosophy, Gras is groen
    pi_24491604
    Helio; ikheb een voorbeeldje gemaakt; kom echter niet zo verder

    http://upload.bruggema.nl/files/helio.html

    - wanneer ik #top aanpas verdwijnt me 'logo'.
    - menutjes naast elkaar met spacing krijg ik niet voor elkaar.
    - borders ook niet mooi (zijn weer weg gehaald)
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24497963
    quote:
    Op zaterdag 8 januari 2005 20:02 schreef SqueaK het volgende:
    ik heb een klein probleempje met IE en FF....

    open deze site http://www.furoreschoonmaakservice.nl/test/ maar eens in beide browsers...

    In internet explorer gaat het fout....in firefox gaat het wel goed.... waar kan het aan liggen ?

    dit is de code:
    (als ik "float: left" weghaal bij de "update-foto" cel dan gaat ie wel op de goede plaats staan, maar dan gaan de andere cellen er onder staan)
    [..]
    Als je de overtollige whitespaces (hardreturns,tabs, etc) binnen <div id="header"> weghaalt gaat het in IE ook goed.
    pi_24518658
    http://c-q.nl/dnorm/

    In FireFox lijnt ie m'n menubalk en content wel in het midden uit, maar in IE niet. Heb al vanalles geprobeerd, site is ook via de w3 standaard.
      dinsdag 11 januari 2005 @ 16:54:56 #146
    25090 SqueaK
    "Pis nooit tegen de wind
    pi_24519462
    quote:
    Op dinsdag 11 januari 2005 15:45 schreef DutchBlood het volgende:
    http://c-q.nl/dnorm/

    In FireFox lijnt ie m'n menubalk en content wel in het midden uit, maar in IE niet. Heb al vanalles geprobeerd, site is ook via de w3 standaard.
    misschien als je voor je menu table margin: auto; doet ?
    pi_24519646
    DB: Voor IE moet de doctype op de eerste regel staan wil het werken en uit quirk mode springen
    pi_24520200
    quote:
    Op dinsdag 11 januari 2005 17:13 schreef Roönaän het volgende:
    DB: Voor IE moet de doctype op de eerste regel staan wil het werken en uit quirk mode springen
    Wat is IE toch een kutbrowser.

    Of is het de bedoeling dat de doctype op regel 1 staat?

    Thnx voor je hulp iig .
    pi_24520303
    doctype op regel 1.
    pi_24520375
    quote:
    Op dinsdag 11 januari 2005 19:02 schreef Roönaän het volgende:
    doctype op regel 1.
    Ok.
    pi_24522661
    Ik probeer met css een div met ronde hoeken te maken. Dit kan met deze techniek: http://www.456bereastreet(...)easer_box_revisited/

    Ik snap die techniek alleen niet helemaal. De flexibele breedte, maar niet de flexibele lengte van de box. Want de 'zijkant' van het voorbeeld(http://www.456bereastreet.com/lab/teaser/flexible/tsr-l.gif) is maar 114px hoog.

    Kan iemand mij uitleggen hoe dit werkt?
      dinsdag 11 januari 2005 @ 23:22:05 #152
    44679 Leshy
    Held met sokken.
    pi_24523396
    quote:
    Op dinsdag 11 januari 2005 22:31 schreef DutchBlood het volgende:
    Kan iemand mij uitleggen hoe dit werkt?
    De borders langs de zijkant en de bovenkant zijn gewoon CSS-borders die netjes met breedte en hoogte meegaan. Hij gebruikt vier elementen om de plaatjes voor de hoeken als achtergrond weer te geven:
  • De teaser-div (hoek linksboven)
  • De <h3> (hoek rechtsboven)
  • Een wrapper div (hoek linksonder)
  • Een link met display:block; (hoek rechtsonder)
    • pi_24526780
    quote:
    Op zondag 9 januari 2005 21:52 schreef Chandler het volgende:
    Helio; ikheb een voorbeeldje gemaakt; kom echter niet zo verder

    http://upload.bruggema.nl/files/helio.html

    - wanneer ik #top aanpas verdwijnt me 'logo'.
    - menutjes naast elkaar met spacing krijg ik niet voor elkaar.
    - borders ook niet mooi (zijn weer weg gehaald)
    Deze miste ik even, sorry.
    Ik ben bang dat ik niet zo'n CSS-held ben. Over het algemeen kloot ik net zo lang door tot het in elke browser goed werkt. Ik heb even met je code gekloot, maar nu werken de menuutjes niet meer . Het resultaat kun je hier zien, maar je hebt er waarschijnlijk niks aan, want het werkt voor geen meter. Sorry, maar ik hoop dat het je op een andere manier nog lukt. Ik ga weer verder met iets waar ik me wel in kan redden; PHP
    » Help mee met DrugsMag.nl! «
    Chillosophy, Gras is groen
    pi_24529638
    No prob Helio; al ziet het resultaat er toch al best leuk uit vind ik zelf
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
      zaterdag 22 januari 2005 @ 11:50:05 #155
    42555 Tomek
    Take on the world!
    pi_24685673
    Hier ook nog maar even posten dan. Aangezien het andere topic (terecht) dichtgesmeten is.
    Chandler hier ben ik

    Overigens heb ik nog geen oplossing gevonden. iemand vroeg of ik een doctype had, en ja die heb ik

    Ik heb dus een mooi menu in elkaar geflanst met <ul> en <li> units

    Wil ik alleen nog even de tekstkleur van een link in een actieve <li> aanpassen, op dezer wijze:

    1
    2
    3
    4    		li:hover {background-color:#EAF0B8; color:#000000; z-index:15;}
    li:hover a:link{color:#000000;}
    li:hover a:visited{color:#000000;}
    li:hover a:hover{color:#000000;}


    Firefox geen probleem natuurlijk, maar internet explorer snapt er weer geen bout van

    Of doe ik iets verkeerd

    dan heb ik nog een vraag:
    voor dat menu heb ik nu in mijn stylesheet allemaal van dit soort regels gebruikt:

    1
    2
    3    		ul {list-style:none; width:138px; background-color:#9AB77F;}   

    li {position:relative; padding:3px; background-color:#9AB77F; z-index:9;}


    onder andere. maar als ik nu ergens een simpele opsomming wil maken, bijvoorbeeld:

    1
    2
    3
    4
    5    		<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    </ul>


    dan gebruikt hij daar natuurlijk ook die stylesheets voor, dus komt het er net zo uit te zien als mijn menu

    weet iemand hoe ik bovenstaand opsomming kan stylen naar default instelling zeg maar?

    mijn dank zal groot zijn
      zaterdag 22 januari 2005 @ 13:18:41 #156
    44679 Leshy
    Held met sokken.
    pi_24686999
    quote:
    Op zaterdag 22 januari 2005 11:50 schreef Tomek het volgende:
    Firefox geen probleem natuurlijk, maar internet explorer snapt er weer geen bout van
    Internet Explorer herkent alleen :hover op een <a> element.
    quote:
    weet iemand hoe ik bovenstaand opsomming kan stylen naar default instelling zeg maar?
    Het is eenvoudiger om je menu gewoon iets van <ul id='menu'> te maken, en de CSS voor het menu via ul#menu {...} te regelen
      zaterdag 22 januari 2005 @ 13:53:57 #157
    42555 Tomek
    Take on the world!
    pi_24687531
    quote:
    Op zaterdag 22 januari 2005 13:18 schreef Leshy het volgende:

    [..]

    Internet Explorer herkent alleen :hover op een <a> element.
    [..]
    daar gebruik ik dus een speciaal bestandje voor die er voor zorgt dat internet explorer het wel herkent.
    hover werkt nu in internet explorer al wel over <li> bijvoorbeeld. maar ik zal daar nog eens naar kijken. dat bestandje heb ik niet zelf gemaakt, en snap er ook weinig van.
    quote:
    Het is eenvoudiger om je menu gewoon iets van <ul id='menu'> te maken, en de CSS voor het menu via ul#menu {...} te regelen
    dat was ook mijn plan, ik wou het alleen andersom doen. maar weet jij toevallig welke css styles ik moet gebruiken om de <ul> en <li> weer als standaard te krijgen?
    pi_24688093
    ff een vraagje:
    Klopt het dat als je body { margin: 0; } gebruikt, dat dat hetzelfde is als marginwidth, marginheight, leftmargin en topmargin bij elkaar? En wordt dat door de meeste browsers ondersteunt?
      zaterdag 22 januari 2005 @ 15:25:10 #159
    42555 Tomek
    Take on the world!
    pi_24688998
    quote:
    Op zaterdag 22 januari 2005 14:29 schreef Maffioso het volgende:
    ff een vraagje:
    Klopt het dat als je body { margin: 0; } gebruikt, dat dat hetzelfde is als marginwidth, marginheight, leftmargin en topmargin bij elkaar? En wordt dat door de meeste browsers ondersteunt?
    ja das hetzelfde, alleen opera doet er moeilijk over geloof ik.
      zaterdag 22 januari 2005 @ 16:12:01 #160
    44679 Leshy
    Held met sokken.
    pi_24689708
    quote:
    Op zaterdag 22 januari 2005 13:53 schreef Tomek het volgende:
    daar gebruik ik dus een speciaal bestandje voor die er voor zorgt dat internet explorer het wel herkent.
    In dat geval raakt MSIE misschien in de war omdat je twee :hover elementen gebruikt. Ik zou proberen gewoon li:hover te gebruiken met een speciale class voor de list items. Of, als je inderdaad de methode gebruikt om het menu een id te geven, dan kun je volstaan met ul#menu li:hover {...}.
    quote:
    dat was ook mijn plan, ik wou het alleen andersom doen.
    Is nogal een omslachtige methode, maar voor de default CSS styles die je nodig hebt kun je misschien even hier kijken.
    quote:
    Op zaterdag 22 januari 2005 14:29 schreef Maffioso het volgende:
    Klopt het dat als je body { margin: 0; } gebruikt, dat dat hetzelfde is als marginwidth, marginheight, leftmargin en topmargin bij elkaar?
    Ja, en het wordt ondersteund door alle browsers, inclusief Opera.

    Echter is Opera de enige browser voor zover ik weet, die in plaats van een margin op de body het meer correcte padding toepast, dus voor hetzelfde effect daar zul je body {margin: 0; padding: 0;} moeten gebruiken.
      zaterdag 22 januari 2005 @ 16:18:53 #161
    42555 Tomek
    Take on the world!
    pi_24689806
    quote:
    Op zaterdag 22 januari 2005 16:12 schreef Leshy het volgende:

    Is nogal een omslachtige methode, maar voor de default CSS styles die je nodig hebt kun je misschien even hier kijken.
    mja, nou het punt is. ik gebruik in mijn style ook dingen als :
    1li li, ul li


    das om genestelde listitems bijvoorbeeld te verbergen. maar ik vermoed dat waneer ik die allemaal ga aanroepen met <li id="menu"> , en vervolgens li#menu{bladiebla} dat het dan niet meer werkt.
    dan moet ik namelijk ook
    1li#menu li#menu, ul#menu li#menu

    gaan gebruiken en ik betwijfel of dat gaat werken.

    tis een beetje lastig uit te leggen

    maar bedankt voor de link, ik ga daar eens kijken
      zaterdag 22 januari 2005 @ 16:21:49 #162
    42555 Tomek
    Take on the world!
    pi_24689850
    Overigens Leshy, jij als Operah deskundige

    Weet jij hoe het kan dat als ik het volgende in mijn <header> tags heb staan
    1<LINK REL="STYLESHEET" HREF="stylesheet.css" TYPE="text/css">


    dat operah dan niet meer reageert op <center>

    Ik weet het, het klinkt vreemd maar het is echt zo.
    Doe ik dan iets als <center><table><tr><td></td></tr></table></tcenter> dan wordt dat dus niet gecentreerd. haal ik die stylesheet weg, dan weer wel

      zaterdag 22 januari 2005 @ 16:22:05 #163
    44679 Leshy
    Held met sokken.
    pi_24689858
    Mja, dan geldt opnieuw, ondersteunde MSIE maar child selectors.

    Anders kon je gewoon ul#menu>li gebruiken, heb je geen last van geneste list items
      zaterdag 22 januari 2005 @ 16:23:37 #164
    42555 Tomek
    Take on the world!
    pi_24689883
    quote:
    Op zaterdag 22 januari 2005 16:22 schreef Leshy het volgende:
    Mja, dan geldt opnieuw, ondersteunde MSIE maar child selectors.

    Anders kon je gewoon ul#menu>li gebruiken, heb je geen last van geneste list items
    idd, maar mocht je er belang bij hebben. ik heb een bestandje die je moet includen die er vervolgens voor zorgt dat bijvoorbeeld die hovers ook allemaal werken in internet explorer.
      zaterdag 22 januari 2005 @ 16:26:46 #165
    44679 Leshy
    Held met sokken.
    pi_24689943
    quote:
    Op zaterdag 22 januari 2005 16:21 schreef Tomek het volgende:
    dat operah dan niet meer reageert op <center>
    Geen idee. Net even zelf een testbestandje gemaakt, maar leverde geen problemen op. Mogelijk staat er iets in je stylesheet wat het effect van <center> teniet doet, geen idee.

    Overigens is <center> sowieso nutteloos, daar heb je CSS voor
      zaterdag 22 januari 2005 @ 16:30:05 #166
    44679 Leshy
    Held met sokken.
    pi_24689998
    quote:
    Op zaterdag 22 januari 2005 16:23 schreef Tomek het volgende:
    idd, maar mocht je er belang bij hebben. ik heb een bestandje die je moet includen die er vervolgens voor zorgt dat bijvoorbeeld die hovers ook allemaal werken in internet explorer.
    Ik ken het, het IE7 project. Op zich wel erg handig, mogelijk dat ik het nog eens ga gebruiken als ik het zelf nodig heb
      zaterdag 22 januari 2005 @ 16:30:34 #167
    42555 Tomek
    Take on the world!
    pi_24690010
    quote:
    Op zaterdag 22 januari 2005 16:26 schreef Leshy het volgende:

    [..]

    Geen idee. Net even zelf een testbestandje gemaakt, maar leverde geen problemen op. Mogelijk staat er iets in je stylesheet wat het effect van <center> teniet doet, geen idee.

    Overigens is <center> sowieso nutteloos, daar heb je CSS voor
    volgens mij had ik het zelfs met een lege stylesheet geprobeerd, maar dat weet ik niet zeker.
    ik zal nog eens kijken of er inderdaad niet ergens iets staat dat overruled.
    pi_24691121
    Hulde voor Tomek

    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24694071
    quote:
    Op zaterdag 22 januari 2005 16:21 schreef Tomek het volgende:
    Overigens Leshy, jij als Operah deskundige

    Weet jij hoe het kan dat als ik het volgende in mijn <header> tags heb staan
    [ code verwijderd ]

    dat operah dan niet meer reageert op <center>

    Ik weet het, het klinkt vreemd maar het is echt zo.
    Doe ik dan iets als <center><table><tr><td></td></tr></table></tcenter> dan wordt dat dus niet gecentreerd. haal ik die stylesheet weg, dan weer wel

    Niet inline elementen kan je niet centreren met text-align:center;

    Daarvoor heet het immers ook text-align.

    Dit is btw ook in IE zo als je deze uit quirksmode haalt met een goede doctype.

    Wil je block-type elementen centreren zul je margin-left:auto;margin-right:auto; moeten gebruiken of wanneer toepasselijk margin:0 auto;.
    pi_24694141
    quote:
    Op zaterdag 22 januari 2005 16:22 schreef Leshy het volgende:
    Mja, dan geldt opnieuw, ondersteunde MSIE maar child selectors.

    Anders kon je gewoon ul#menu>li gebruiken, heb je geen last van geneste list items
    Makkelijkste oplossing is om je li's een classname te geven.

    -r-
      zondag 23 januari 2005 @ 14:35:33 #171
    42555 Tomek
    Take on the world!
    pi_24706469
    Ok, ik ben dus nog steeds bezig met mijn menu. Het begint er al aardig op te lijken.
    Maar nu is er nog 1 ding wat ik niet voor elkaar krijg. In zoverre, niet in internet explorer.
    Het menu staat hier http://www.not-allowed.nl/menu/menu.html

    en wat ik nog wil is het volgende:

    als je met de muis over een kop heengaat, of over een sub dan wil ik dat dan de kleur van de tekst verandert. het klinkt eenvoudig maar het lukt me niet.

    de style die je krijgt als je over kop of sub heengaat is li#head:hover en li#sub:hover

    nu verander ik de kleur van de links op de volgende manier:
    1li#head:hover a:link, visited{color:red;}


    dit werkt in firefox, maar niet in internet explorer. weet iemand hoe ik dit in internet explorer ook aan de gang kan krijgen? ik wil het eigenlijk niet met een javascript doen en zo de class veranderen, maar echt met css.

    iemand?
    pi_24706976
    Ik heb een achtergrond image gemaakt van 750px breed en 10px hoog. Hoe kan ik die met css zo gebruiken dat hoe hoog het browserwindow ook is die achtergrond image altijd totaan beneden doorgaat?

    Vroeger kan dat in html gewoon door een table een hoogte van 100% mee te geven, maar dat mag helaas niet meer. Dus hoe doe ik dat in css?
      zondag 23 januari 2005 @ 15:08:57 #173
    42555 Tomek
    Take on the world!
    pi_24707024
    quote:
    Op zondag 23 januari 2005 15:05 schreef Maffioso het volgende:
    Ik heb een achtergrond image gemaakt van 750px breed en 10px hoog. Hoe kan ik die met css zo gebruiken dat hoe hoog het browserwindow ook is die achtergrond image altijd totaan beneden doorgaat?

    Vroeger kan dat in html gewoon door een table een hoogte van 100% mee te geven, maar dat mag helaas niet meer. Dus hoe doe ik dat in css?
    http://www.w3schools.com/css/css_background.asp

    nu mijn vraag weer

    pi_24707835
    quote:
    Op zondag 23 januari 2005 15:08 schreef Tomek het volgende:

    [..]

    http://www.w3schools.com/css/css_background.asp

    nu mijn vraag weer

    1<li id="head" onmouseover="this.className='hover';" onmouseout="this.className='';">


    En zoek het verder zelf maar uit, want dat schijnt jouw houding ten opzichte van anderen ook te zijn
    pi_24709232
    Ok ik ben nog steeds bezig met mijn achtergrond die ik altijd over de hele hoogte van het browservenster wil zien.
    Ik heb dit in mijn css script staan:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12    		body {
       margin: 0;
    }
    #maincontainer {
       position: absolute;
       width: 750px;
       height: 100%;
       top: 0px;
       left: 50%;
       margin-left: -375px;
       background-image: url(images/bg_main.gif);
    }


    In Firefox werkt het prima alleen in IE zie ik het plaatje maar 1 keer staan en gaat hij niet door naar beneden. Weet iemand hoe ik dat op kan lossen?

    Zie hier resultaat: http://home.quicknet.nl/mw/prive/pjlammers/test/test.htm
    pi_24709846
    probeer het eens met:
    1body {margin:0; padding:0; height:100%; width:100%;}


    -r-
    pi_24710725
    Thnx man! werkt perfect.
    pi_24711243
    quote:
    Op zondag 23 januari 2005 15:08 schreef Tomek het volgende:

    [..]

    nu mijn vraag weer

    IE kent :hover alleen voor A-elementen.

    Dat kan je op 2 manieren oplossen: de html aanpassen, of javascript toevoegen.
    Voor de javascriptoplossing zou je bijvoorbeeld whatever:hover kunnen gebruiken.

    Maar zo'n menu kan met alleen CSS ook wel, dat lijkt mij de mooiste oplossing.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
      maandag 24 januari 2005 @ 00:51:05 #179
    42555 Tomek
    Take on the world!
    pi_24716344
    quote:
    Op zondag 23 januari 2005 15:57 schreef Roönaän het volgende:

    [..]
    [ code verwijderd ]

    En zoek het verder zelf maar uit, want dat schijnt jouw houding ten opzichte van anderen ook te zijn
    Nou zeg, zo was dat helemaal niet bedoeld hoor

    Ik had verwacht dat hij er met die link wel uit zou komen.

    Ik heb op zijn minste geprobeerd te helpen. Die andere opmerking was meer als grapje bedoeld.
      maandag 24 januari 2005 @ 01:52:35 #180
    42555 Tomek
    Take on the world!
    pi_24717186
    Ik kom er nog steeds niet uit. Is er iemand die misschien een tip kan geven. Ik heb het geprobeerd op de manier van Ronaan:

    deze aangemaakt:
    1
    2    		#blauw {blablabla}
    #blauw a:link, visited, hover{color:blauw;}


    en de <li> als volgt:
    1<li id="folder" onmouseover="this.id='blauw';" onmouseout="this.id='folder'">


    Firefox werkt weer prima, linkjes worden blauw. Maar internet explorer doet het niet. Het vreemde is dat hij bepaalde dingen wel overneemt uit #blauw. Als ik de background-image verander, dan verandert die wel. Maar de linktekst verandert gewoon niet.

    Ik snap het niet meer

    [ Bericht 8% gewijzigd door Tomek op 24-01-2005 12:05:04 ]
      maandag 24 januari 2005 @ 03:30:08 #181
    44679 Leshy
    Held met sokken.
    pi_24717712
    Geef eens een link naar een site in kwestie, is waarschijnlijk een stuk handiger dan al die losse snippets
    pi_24718314
    quote:
    Op maandag 24 januari 2005 01:52 schreef Tomek het volgende:
    Ik kom er nog steeds niet uit. Is er iemand die misschien een tip kan geven. Ik heb het geprobeerd op de manier van Ronaan:

    deze aangemaakt:
    [ code verwijderd ]

    en de <li> als volgt:
    [ code verwijderd ]

    Firefox werkt weer prima, linkjes worden blauw. Maar internet explorer doet het niet. Het vreemde is dat hij bepaalde dingen wel overneemt uit #blauw. Als ik de background-image verander, dan verandert die wel. Maar de linktekst verandert gewoon niet.

    Ik snap het niet meer
    Deze code wordt toegepast op een link, een "visited"-element en een "hover"-element. Dat werkt dus niet.
    1#blauw a:link, visited, hover{color:blauw;}

    moet zijn
    1#blauw a:link, #blauw a:visited, #blauw a:hover{color:blauw;}


    Een id veranderen lijkt me geen handige aanpak. Je kan beter de class veranderen
    1<li id="folder" onmouseover="this.className='highlight';" onmouseout="this.className='''">

    css:
    1
    2    		#folder { color: #000; }
    #folder.highlight {color: #f00; }


    (Je post is wat breed vind je niet? )
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
      maandag 24 januari 2005 @ 12:04:06 #183
    42555 Tomek
    Take on the world!
    pi_24721407
    quote:
    Op maandag 24 januari 2005 03:30 schreef Leshy het volgende:
    Geef eens een link naar een site in kwestie, is waarschijnlijk een stuk handiger dan al die losse snippets
    http://www.not-allowed.nl/menu/menu.html

    ik wil dus de tekstkleur aanpassen van de li:hovers
      maandag 24 januari 2005 @ 12:06:12 #184
    42555 Tomek
    Take on the world!
    pi_24721444
    quote:
    Op maandag 24 januari 2005 07:41 schreef SuperRembo het volgende:

    [..]

    Deze code wordt toegepast op een link, een "visited"-element en een "hover"-element. Dat werkt dus niet.
    [ code verwijderd ]

    moet zijn
    [ code verwijderd ]

    Een id veranderen lijkt me geen handige aanpak. Je kan beter de class veranderen
    [ code verwijderd ]

    css:
    [ code verwijderd ]

    (Je post is wat breed vind je niet? )
    ik had ook al
    #blauw a:link{}
    #blauw a:visited{}
    #blauw a:hover{}

    geprobeerd, maar dat wou ook niet.
      maandag 24 januari 2005 @ 15:59:14 #185
    22567 innovation
    Don't look at the sun
    pi_24725215
    ik ben geen dummie met css maar vorige topic is gesloten .. dus dan maar hier



    oi. Ik zit met het probleem
    dat ik die faux colums na te doen. maar de bg wil niet lukken
    anders gezecht
    ik hebt 1 div. (met bg)
    en daar in 2 divjes naast elkaar.
    als ik die 2 weg laat zie ik de bg wel. maar met de 2 divs er in zie ik de bg niet meer.
    en ik kan maar niet uit vinden hoe het komt

    http://clusius.ath.cx/512/test1.html is waar de test site op staat.

    ps: die twee divjes hebben een transparant bg.
    poebeer houd van Knorretje2712 http://www.clusius.com,Alain Lecluse
    pi_24725355
    ten eerste, mooie cleane style van de site...
    ten tweede, als ik content_bg.png wil bekijken, zie ik ook niets... klopt het plaatje wel?

    excuus, plaatje zie ik wel...
    als je dit er eens van maakt...
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10    		#side {
        margin: 0 30px 0 405px;
        background: transparent;
        padding: 10px;
        font-size: 11px;
        letter-spacing: 3px;
        line-height: 20px;
        width: 260px;
        text-align: right;
    }
      maandag 24 januari 2005 @ 17:00:36 #187
    22567 innovation
    Don't look at the sun
    pi_24725833
    hmm nu zie je dus wel de bg door side heen maar waar side op houd niet meer.
    en het was juist de bedoeling da tie tot onder door blijft lopen.

    [ Bericht 87% gewijzigd door innovation op 24-01-2005 17:09:08 ]
    poebeer houd van Knorretje2712 http://www.clusius.com,Alain Lecluse
    pi_24726026
    klopt... je hebt een footer aangemaakt met clear:both... zorg ervoor dat deze direct na de twee divs komt...
      maandag 24 januari 2005 @ 17:43:36 #189
    22567 innovation
    Don't look at the sun
    pi_24726525
    dankje dankje dankje. het schijnt te werken
    poebeer houd van Knorretje2712 http://www.clusius.com,Alain Lecluse
    pi_24798555
    Ik ben wil graag onderaan mn site een balkje maken met copyright gegevens e.d.
    Ik gebruik hier een aparte layer voor en werk met CSS.

    Nu kan ik wel alles vanuit de linkerbovenhoek uitlijnen.
    Dit hieronder lijnt ie bv uit in de linker bovenhoek:
    quote:
    margin-top: 10px;
    margin-left: 2px;
    Maar ik meen dat dit ook vanaf onder kon?

    Ik wil graag dat balkje 5px vanaf onder uitlijnen. Iemand een ideetje?

    pi_24798616
    padding-top? padding-bottom?
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24798900
    Padding is toch voor het uitlijnen in een layer. Om de tekst bijvoorbeeld 10 px vanaf de rand te zetten? Ik wil de layer 5 px vanaf de onderkant van mn site uitlijnen.
    pi_24800365
    toch?
    pi_24800632
    position:absolute;bottom:5px;
    pi_24802423
    hier staat een klein begin van een fotoalbumscriptje waar ik mee bezig ben. Onderaan wil ik een horizontale scrollbalk in de DIV hebben als er meer thumbnails staan dan in het scherm passen. Hoewel ik geen <br/>-tags gebruik bij de afbeeldingen, gaan ze toch onder elkaar staan (en komt er een verticale scrollbalk). Hoe fix ik dit?
    » Help mee met DrugsMag.nl! «
    Chillosophy, Gras is groen
    pi_24803302
    quote:
    Op vrijdag 28 januari 2005 18:37 schreef Heliospan het volgende:
    hier staat een klein begin van een fotoalbumscriptje waar ik mee bezig ben. Onderaan wil ik een horizontale scrollbalk in de DIV hebben als er meer thumbnails staan dan in het scherm passen. Hoewel ik geen <br/>-tags gebruik bij de afbeeldingen, gaan ze toch onder elkaar staan (en komt er een verticale scrollbalk). Hoe fix ik dit?
    display: inline?
    pi_24804341
    quote:
    Op vrijdag 28 januari 2005 18:37 schreef Heliospan het volgende:
    hier staat een klein begin van een fotoalbumscriptje waar ik mee bezig ben. Onderaan wil ik een horizontale scrollbalk in de DIV hebben als er meer thumbnails staan dan in het scherm passen. Hoewel ik geen <br/>-tags gebruik bij de afbeeldingen, gaan ze toch onder elkaar staan (en komt er een verticale scrollbalk). Hoe fix ik dit?
    Je kan bij de wrap elementen van css kijken.

    Wat je ook kan doen is een extra div erin kwakken met een voldoende breedte, maar dat is niet echt de oplossing lijkt me.
    pi_24804787
    1white-space: nowrap;


    deed het hem, bedankt
    » Help mee met DrugsMag.nl! «
    Chillosophy, Gras is groen
    pi_24808844
    Iemand een idee of ik ook een hover op images kan gebruiken zonder dat ik van het a (href) element gebruik maak? ik gebruik namelijk een onClick event en dat werkt net zo goed.. zonder display in de status balk

    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24809540
    Bij deze heb ik gelezen dat IE iig niet hovert op andere elementen dan a (href) IE :R

    ennuh het volgende, zie mijn 1e gescripte UBB editor, nu zie je de plaatjes daarboven, de CSS gaat ergens in de fout en ik zie geen 'border' boven op ennuh 't ziet er gewoon niet echt fancy uit.. Iemand tips?

    Tnx
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24811995
    Hij is IE-only, jammer.

    Als je een witte border maakt op een witte achtergrond dan zie je 'm niet. Lijk me logisch.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_24812123
    Klopt, dat had ik vannochtend nog even aangepast maar iemand die een betere variant weet... Ennuh ik wil um nog FF klaar maken maar dat is nou niet zo simpel
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24812888
    Ik zou 'm eerst crossbrowser maken en me daarna pas zorgen maken over een mouseover effect van een knopje.

    Die popups voor kleur en lettertype werken wel, maar het lijkt me mooier (en mss nog makkelijker te maken) als je die extra opties als dropdown bij 't knopje toont.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_24812975
    Ja met een soort vallende layer bedoel je? of heb je een klein voorbeeldje voor me?
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24815042
    Nou ok dan
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_24817201
    Vet man! wat een style!!!!! ziet er echt verdomde nice uit
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24817320
    Er zitten nog wat schoonheidsfoutjes in. De positioning in IE is niet helemaal goed. En er zou maar 1 panel tegelijk open moeten zijn.
    Maar dat is aan jou
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_24818099
    haha tnx, ik ben al even bezig; leuk is dat alleen blijf ik toch mijn routines m.b.t het maken van de html gebruiken, maar dat gaat ook lekker z'n gangetje... een voorbeeldje..

    http://upload.bruggema.nl/files/editor.html
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24900543
    Ik heb het volgende plaatje van me designer gekregen



    en dat wil ik bereiken met het volgende stukje css en html

    CSS
    1
    2
    3
    4
    5    		.imagereplycontainer 
    {
        margin-top: 10px;
        width: 380px;
    }


    en HTML (h1 zit in een andere container dus vergeet die ff)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11    		 
            <h1>React</h1>
            <form method="post" action="gallery/react/%image_id%" style="display:inline;">
            <div class="imagereplycontainer">
            <textarea name="text" cols=1 rows=1 style="width: 384px; height: 40px;"></textarea>
                <div style="text-align: right;">
                    <input type="text" value="<name>" name="user" style="width: 100px">
                    <input type="image" src="layout/default/elements/button-send.jpg" ALT="Send">
                </div>
            </div>
            </form>


    Nu krijg ik echter als resultaat



    weet iemand hoe ik het 'username' vakje en de button goed krijg? tnx
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24900931
    Denk dat je een float right op de button moet doen, of een float:left op de textfield. Moet je niet vergeten een clear:both div te adden.
    pi_24901990
    volgens mij komt je zo verder in de buurt:
    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    		<style type="text/css">
    FORM.imagereplycontainer 
    {
        margin-top: 10px;
        width: 380px;
       display: inline;
    }
    FORM.imagereplycontainer UL, FORM.imagereplycontainer UL LI
    {
        list-style: none; 
       margin: 0; padding: 0;
    }
    FORM.imagereplycontainer UL LI
    {
        text-align: right;
    }
    FORM.imagereplycontainer UL LI TEXTAREA
    {
       width: 384px; height: 40px;
       border: 1px solid #ccc;
       overflow: auto;
    }
    FORM.imagereplycontainer UL LI INPUT
    {
       width: 100px; height: 1em;
       border: 1px solid #ccc;
    }
    FORM.imagereplycontainer UL LI BUTTON
    {
       width: 100px; height: 1em;
       border: 0;
       padding: 0; margin: 0;
    }
    FORM.imagereplycontainer UL LI BUTTON IMG
    {
       border: 0; padding: 0; margin: 0;
    }
    </style>

    <h1>React</h1>
    <form method="post" action="gallery/react/%25image_id%25" class="imagereplycontainer">
       <ul>
          <li> <label for="myTexarea">insert your text</label>
             <textarea name="myTexarea" id="myTexarea"></textarea></li>
          <li> <label for="myTexarea">username</label>
             <input type="text" value="name" name="user" id="user">
             <button type="submit"><img src="layout/default/elements/button-send.jpg" alt="Send"><button></li>
       </ul>
    </form>


    doordat je de css-styles duidelijk scheidt van de HTML-code ben je veel flexibeler, voor je HTML-code is het dan essentieel dat deze een goede beschrijving is van de inhoud, in dit geval een form...

    Het gebruik van een Unordered List is een eigenschap die veel HTML-bouwers die veel met CSS doen snel overnemen, en welke ook enigszins terughoudend moet worden behandeld (pas op dat je het gebruik van UL's niet gaat overdoen, ik heb al mensen gezien die data-strukturen die gewoon tabulaire data waren, ipv in eennormale table, toch in lelijk genestte UL-LI's neergezet werden uit css-gewoonte) ...

    In deze structuur zie je ook een zeker zwaktepunt, namelijk dat de button direkt in dezelfde LI als het input-veld staat, wat voor gebruikers verwarrend kan zijn, omdat het de indruk wekt dat die submit enkel geldig is voor dat specifieke veld (als een 'file-upload-veld') .. hier ligt die 'fout' echter al aan het design zelf, en kan je in de HTMLstruktuur daar weinig aan doen.
    "Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
    pi_24901999
    Inderdaad Roonaan, met een float: right op de button en dan die voor het textveld zetten is het gelukt!!! tnx
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24902601
    quote:
    Op donderdag 3 februari 2005 14:06 schreef RM-rf het volgende:
    volgens mij komt je zo verder in de buurt:
    [ code verwijderd ]
    RM-rf, je moet me hier niet op vastpinnen, maar is CSS niet hoofdletter gevoelig, dwz dat FORM#a alleen matched met <FORM id="a"> en niet met <form id="a">?

    Dit vroeg ik mij af, omdat ik jou (als enige eigenlijk) altijd in css de tags in uppercase zie schrijven.
    quote:
    <ul><li>....</li></ul>
    Is een fieldset in deze zaak niet sematisch correcter?

    -r-
    pi_24902915
    quote:
    Op donderdag 3 februari 2005 14:36 schreef Roönaän het volgende:

    Dit vroeg ik mij af, omdat ik jou (als enige eigenlijk) altijd in css de tags in uppercase zie schrijven.
    css is niet hoofdlettergevoelig, ik heb zelf de gewoonte om alle tag-selectoren altijd in hoofdletters te zetten, maar dat is gewoon een leesbaarheid-issue, zo kun je makkelijk de tag-selectoren uit de code halen...

    In XML is de element-selector echter wel case-sensitive. (wat in theorie het ook bij XHTML zou zijn, echter dat komst niet echt ter sprake zolang XHTML gewoon verzonden wordt met text/html mimetype)
    "Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
    pi_24905495
    Tag-names zijn niet case sensitive, classnames wel!
    Testje
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_24954873
    Ik ben even verder gegaan met mijn UBB editor echter heb ik 1 probleem met het menutje..

    als ik een mouseover heb op een 'button' dan springt de rest één pixel naar rechts

    http://editor.bruggema.nl/editor.html

    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24959009
    Probleem is half opgelost laat staan dat de buttons in IE er fancy uitzien maar in FF de plaatjes als het ware iets anders er uit zien
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24961364
    -edit-
    pi_24964203
    why -edit-?
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24967289
    quote:
    Op maandag 7 februari 2005 01:58 schreef Chandler het volgende:
    why -edit-?
    Ze leken er goed uit te zien, tot ik de rollover probeerde.
    pi_24968228
    Yep en waar het in zit nobody knows
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24977463
    Ik zit vast .

    http://nitespeed.servebeer.com/ns/

    In FireFox werkt het als een tiet, snel geladen en 100% valide code.
    Open je het in IE dan zijn de borders anders, en is mijn menu divje niet meer zo hoog als de content hoog is.

    Ik heb express de menu div inherent gemaakt aan de content div, zodat 100% height er voor zou zorgen dat hij de hoogte van mijn content div zou overnemen...

    niet dus !
    We'll keep on whispering our mantras.
    pi_24977519
    Om te zorgen dat IE in strict mode springt moet de doctype op de eerste regel staan. Dit betekend dus dat je je <?xml definitie weg moet halen, wil je dat het in ie er netjes uitziet. Om dit te compenseren zou je een text/xml header kunnen produceren aan de serverkant natuurlijk.
    pi_24977616
    quote:
    Op maandag 7 februari 2005 21:46 schreef Roönaän het volgende:
    Om te zorgen dat IE in strict mode springt moet de doctype op de eerste regel staan. Dit betekend dus dat je je <?xml definitie weg moet halen, wil je dat het in ie er netjes uitziet. Om dit te compenseren zou je een text/xml header kunnen produceren aan de serverkant natuurlijk.
    Goed, gedaan wat je hebt gezegd en de borders zijn nu inderdaad hetzelfde waardoor de IMG perfect blijft in IE en FF. Helaas was dit nog geen goede oplossing voor mijn menu div.

    Update:

    Een hoop geklooi later weet ik nog niet hoe ik dit het beste kan oplossen, de vraag blijft dus:
    "Hoe zorg ik ervoor dat mijn menu div even hoog is als mijn content div?"

    [ Bericht 13% gewijzigd door NiteSpeed op 07-02-2005 23:53:44 ]
    We'll keep on whispering our mantras.
    pi_24980318
    @Roonaan, heb jij misschien een idee m.b.t mijn buttons?
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_24992365
    Ik weet niet of dit een css vraagje is of gewoon html (ik denk het laatste) maar jullie weten het vast ook wel.
    Ik heb 2 tabellen die boven elkaar staan, nu wil ik een beetje ruimte tussen de 2 tabellen, een halve <br> ongeveer. Maar ik weet niet hoe ik dit voor elkaar kan krijgen.... Ik kan niks doen met de border van de tabel want ik wil er een 1px border is, en die heeft een andere kleur dan de achtergrond.

    [ Bericht 0% gewijzigd door _Mal_ op 08-02-2005 21:47:03 ]
    pi_24993330
    quote:
    Op dinsdag 8 februari 2005 21:00 schreef _Mal_ het volgende:
    Ik weet niet of dit een css vraagje is of gewoon html (ik denk het laatste) maar jullie weten het vast ook wel.
    Ik heb 2 tabellen die boven elkaar staan, nu wil ik een beetje ruimte tussen de 2 tabellen, een halve <br> ongeveer. Maar ik weet niet hoe ik dit voor elkaar kan krijgen.... Ik kan niks doen met de border van de tabel want ik wil er een 1px border is, en die heeft een andere kleur dan de achtergrond.
    Spelen met je margins in simpele HTML kan een hoop schelen.

    Goed, twee tables dus.
    Ik zou met CSS een margin er aan toevoegen, bijvoorbeeld:

    [code]
    .table2 {
    top-margin: 5px;
    }

    <table class="table2">
    We'll keep on whispering our mantras.
    pi_24994759
    tnx Roonaan
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_25003641
    @Nitespeed Dat werkt niet.... als ik die regel toevoeg gebeurt er niks
    Vogelaars.nl
    pi_25004080
    quote:
    Op woensdag 9 februari 2005 11:10 schreef ikke_ook het volgende:
    @Nitespeed Dat werkt niet.... als ik die regel toevoeg gebeurt er niks
    Een beetje interpretatievermogen mag wel hoor

    1
    2
    3
    4
    5
    6    		<table id="table1">
    ..
    </table>
    <table id="table2" style="margin-top:0.5em;">
    ..
    </table>


    -r-
    pi_25004180
    quote:
    Op woensdag 9 februari 2005 11:45 schreef Roönaän het volgende:

    [..]

    Een beetje interpretatievermogen mag wel hoor
    [ code verwijderd ]

    -r-
    haha, ik had het al wel zo geprobeerd hoor Misschien was mn post niet al te duidelijk. Maar ik had het al in mn css veranderd, en ik had ook al geprobeerd zoals jij zei maar er gebeurt helemaal niks......

    Wat is trouwens het verschil van het gebruik van class="menu" of id="menu" ? Je moet dan #menu in de stylesheet zetten toch?Maar is er verder ook nog verschil?

    --edit--
    Stom...ik maakte een stomme type fout, het werkt toch wel Bedankt!! (bovenstaande vraag blijft wel openstaan

    [ Bericht 25% gewijzigd door ikke_ook op 09-02-2005 12:06:58 ]
    Vogelaars.nl
    pi_25005122
    Verschil tussen een id en een class is (behalve de # en de . in de stylesheet) dat een id uniek is en maar voor één element binnen een document gebruikt mag worden, en dat een class aan een heleboel elementen kan worden toegekend.

    Daarnaast kan een element maar één id hebben, maar wel verschillende classes.

    -r-
    pi_25010643
    Roonaan, kan je even kijken naar mijn 'height' probleem?
    Mijn menu moet even groot blijven als mijn content layer.
    We'll keep on whispering our mantras.
    pi_25019886
    Nitespeed,

    Op het moment krijg ik een 404 op http://nitespeed.servebeer.com/ns/.

    Stuur me anders even een mailtje of zie sig.

    -r-
    pi_25023574
    ik heb een probleempje met me divjes..

    ik wil namelijk 1 div laten zweven boven de rest van de divjes:

    #login {
    width: 274px;
    display: block;
    background-image: url(login.png);
    position: relative;
    left: 51px;
    margin: 0px;
    top: -400px;
    height: 135px;
    margin:0 auto;
    text-align: left;
    }

    het divje staat onder de rest van de divjes. maar door de positie zweeft het divje boven de rest van de divjes alleen krijg ik nu onderaan de pagina wel een groot wit vlak waar niks zit (wit) maar dus wel ruimte inneemt op me pagina nu krijg ik dus een scrollbalk waar ik niet op zit te wachten. hoe krijg ik het voormelkaar dat die div dus



    dus dat blauwe geselecteerde is de oorspronkelijk plaats van het login divje en dat wil i kweg hebben..
    De enige echte BaggerUser!
    Riemen
    fiets kopen
    pi_25023815
    Gebruik position:absolute.

    -r-
    pi_25024124
    ja maar hoe krijg ik hem als ik hem absolue heb in het midden ?
    als ik left: auto; doe staat tie nog net niet in het midden
    en text-align: center; helpt in dit geval ook niet
    De enige echte BaggerUser!
    Riemen
    fiets kopen
    pi_25024553
    1
    2
    3
    4
    5
    6
    7
    8    		#login {
       background-image: url(login.png);
       position: absolute;
       top: 25px; left: 50%;
       width: 274px; height: 135px; 
       margin-left: -137px;
       text-align: left;
    }
    "Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
    pi_25024725
    ja wat werkt wel alleen jammer dat als ik me browser kleiner maak (zodat ik een scrollbalk krijg hij gaat verschuiven wat niet echt netjes is maar verder ziet het er normaal gesproken wel goed uit nu
    De enige echte BaggerUser!
    Riemen
    fiets kopen
    pi_25025259
    quote:
    Op donderdag 10 februari 2005 15:15 schreef BaggerUser het volgende:
    ja maar hoe krijg ik hem als ik hem absolue heb in het midden ?
    als ik left: auto; doe staat tie nog net niet in het midden
    en text-align: center; helpt in dit geval ook niet
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17    		#login {
      position:absolute;
      left:0px;
      top:100px;
      width:100%;
    }

    #innerlogin {
      position:relative;
      margin:0px auto;
    }

    <div id="login">
    <div id="innerlogin">
    ..
    </div>
    </div>
    pi_25028989
    Ik kwam deze pagina tegen tijdens het surfen: http://www.tizag.com/cssT/

    Een wat uigebreide tutorial dan die van w3schools.
      vrijdag 11 februari 2005 @ 12:24:07 #243
    74523 BaggerUser
    ModderFokker!
    pi_25038174
    ben ik weer
    heb nog een klein probleempje wat voor een groot deel al is opgelost maar 1 deel wil niet lukken.

    ik heb een div in een andere div maar:
    als ik height:100% doe neemt hij 100% van de schermgrootte
    maar ik wil 100% van de div hebben waar die inzit.. hoe kan ik dit regelen
    De enige echte BaggerUser!
    Riemen
    fiets kopen
    pi_25038635
    Height definieren van de buitenste div.
      vrijdag 11 februari 2005 @ 12:55:05 #245
    74523 BaggerUser
    ModderFokker!
    pi_25038723
    de buitenste div staat op 100%
    daarin zitten bovenaan een paar divs die samen een paar 100 pixel zijn..
    en dan staat de div die de rest van de div moet vullen zegmaar.. maar die neemt dus de waarde 100% van het scherm en niet van de overige ruimte
    De enige echte BaggerUser!
    Riemen
    fiets kopen
    pi_25039309
    Nee, die neemt de 100% aan van de buitenste div. 100% is natuurlijk niet hetzelfde als "de overgebleven ruimte".
      vrijdag 11 februari 2005 @ 13:57:24 #247
    74523 BaggerUser
    ModderFokker!
    pi_25039771
    hoe kan ik dan zorgen dat de overgebleven ruimte opgevult wordt ?..
    aangezien de buitenste ook elke keer moet verranderen ?..
    De enige echte BaggerUser!
    Riemen
    fiets kopen
    pi_25039994
    Hoe kan ik iets centreren in een divje? Als ik dat met text-align:center; doe, dan werkt dat in Firefox alleen met tekst en niet met andere objecten.
    http://www.schwaproductions.nl/
    pi_25045597
    quote:
    Op vrijdag 11 februari 2005 14:08 schreef schwa78 het volgende:
    Hoe kan ik iets centreren in een divje? Als ik dat met text-align:center; doe, dan werkt dat in Firefox alleen met tekst en niet met andere objecten.
    Daarom heet het ook text-align

    Hoe je objecten kan centreren staat bijvoorbeeld uitgelegd bij SimpleBits.com.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_25061864
    Ik ben bezig met een nieuwe site, http://belegspel.c-q.nl/.

    Nu probeer ik alleen om de banner en de 'Belegspel.nl' tekst naast elkaar te krijgen. En met display: inline wil het niet lukken.

    De bankbiljetten en de tekst + banner staan allebei in een aparte div.
    pi_25062901
    De banner image heeft nu display:block
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_25064368
    quote:
    Op zaterdag 12 februari 2005 21:41 schreef SuperRembo het volgende:
    De banner image heeft nu display:block
    Nu niet meer, maar dit maakt niks uit....
    pi_25064707
    1
    2
    3
    4    		<div style="border:1px solid #000;width:600px;">
       <div style="width:200px;float:left;">Title</div>
       <div style="width:300px;">Banner</div>
    </div>

    Misschien hier en daar nog een height zetten of een <div style="clear:both"></div> na de header.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_25071012
    quote:
    Op zaterdag 12 februari 2005 23:22 schreef SuperRembo het volgende:

    [ code verwijderd ]

    Misschien hier en daar nog een height zetten of een <div style="clear:both"></div> na de header.
    Thnx, het is gelukt .
      zondag 13 februari 2005 @ 13:05:48 #255
    74523 BaggerUser
    ModderFokker!
    pi_25071235
    ik heb een tijdje lopen zoeken maar ik kan nog steeds niet echt vinden hoe ik met een div de overgebleven ruimte van een andere div kan opvullen..

    of is dit gewoon niet mogelijk?
    De enige echte BaggerUser!
    Riemen
    fiets kopen
      zondag 13 februari 2005 @ 13:05:49 #256
    74523 BaggerUser
    ModderFokker!
    pi_25071236
    ik heb een tijdje lopen zoeken maar ik kan nog steeds niet echt vinden hoe ik met een div de overgebleven ruimte van een andere div kan opvullen..

    of is dit gewoon niet mogelijk?
    De enige echte BaggerUser!
    Riemen
    fiets kopen
      zondag 13 februari 2005 @ 13:08:55 #257
    74523 BaggerUser
    ModderFokker!
    pi_25071287
    ?
    hoe kan ik 2 keer hetzelfde bericht posten dat kan toch niet ..
    De enige echte BaggerUser!
    Riemen
    fiets kopen
    pi_25076514
    als je met snel reageren 2x snel achter elkaar op invoeren klikt kun je een dubbelpost maken.
    Vogelaars.nl
    pi_25077161
    quote:
    Op zondag 13 februari 2005 13:05 schreef BaggerUser het volgende:
    ik heb een tijdje lopen zoeken maar ik kan nog steeds niet echt vinden hoe ik met een div de overgebleven ruimte van een andere div kan opvullen..

    of is dit gewoon niet mogelijk?
    Als je van te voren niet de afmetingen weet, heb je daar nog steeds een table voor nodig.
    Voor zover ik weet dan
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
      zondag 13 februari 2005 @ 23:02:24 #260
    74523 BaggerUser
    ModderFokker!
    pi_25077732
    quote:
    Op zondag 13 februari 2005 21:48 schreef ikke_ook het volgende:
    als je met snel reageren 2x snel achter elkaar op invoeren klikt kun je een dubbelpost maken.
    normaal kreeg je dan een melding dat je neit 2 keer hetzelfde bericht kon posten zeker uitgezet
    De enige echte BaggerUser!
    Riemen
    fiets kopen
      zondag 13 februari 2005 @ 23:07:09 #261
    46383 Tiemie
    sowieso wel!
    pi_25077825
    http://www.lampenzen.nl/pics.php

    ik heb daar in een td een aantal links staan en deze werken onder IE perfect, maar onder mozilla werkt de link maar "half". Alleen als je op het begin van de link klikt kun je de link openen. .

    ik d8 dat het misschien aan de spaties in de namen lag, omdat na de spatie de link niet meer klikbaar is.

    dus heb ik met str_replace() spaties vervangen door $nbsp; maar dat helpt ook niet.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11    		 <td class="msgbody"> 
    <a href="pics.php?id=9">[12-02-05] Achterhoek Arena</a><br />
    <a href="pics.php?id=8">[12-02-05] @ Ayhan</a><br />
    <a href="pics.php?id=7">[10-02-05] @ Bringenborg</a><br />
    <a href="pics.php?id=6">[15-01-05] Mark-k & sammy's</a><br />
    <a href="pics.php?id=5">[14-01-05] @ Tim</a><br />
    <a href="pics.php?id=4">[08-01-05] verjaardag rob</a><br />
    <a href="pics.php?id=3">[07-01-05] @ sammy's</a><br />
    <a href="pics.php?id=2">[19-12-04] verjaardag jeremy & koen</a><br />
    <a href="pics.php?id=1">[10-12-04] @ tim</a><br />
     </td>



    iemand een idee hoe dat komt?
    pi_25077897
    quote:
    Op zondag 13 februari 2005 23:07 schreef Tiemie het volgende:
    http://www.lampenzen.nl/pics.php

    ik heb daar in een td een aantal links staan en deze werken onder IE perfect, maar onder mozilla werkt de link maar "half". Alleen als je op het begin van de link klikt kun je de link openen. .

    ik d8 dat het misschien aan de spaties in de namen lag, omdat na de spatie de link niet meer klikbaar is.

    dus heb ik met str_replace() spaties vervangen door $nbsp; maar dat helpt ook niet.
    [ code verwijderd ]

    iemand een idee hoe dat komt?
    Spaties in links moeten geen probleem op leveren.

    Werkt het wel als je ze buiten de tabel haalt?
      zondag 13 februari 2005 @ 23:18:45 #263
    46383 Tiemie
    sowieso wel!
    pi_25078041
    quote:
    Op zondag 13 februari 2005 23:10 schreef DutchBlood het volgende:

    [..]

    Spaties in links moeten geen probleem op leveren.

    Werkt het wel als je ze buiten de tabel haalt?
    Ja dat werkt wél ja, maar het is wel de bedoeling dat het in die tabel blijft staan.
    pi_25079304
    quote:
    Op zondag 13 februari 2005 23:18 schreef Tiemie het volgende:

    [..]

    Ja dat werkt wél ja, maar het is wel de bedoeling dat het in die tabel blijft staan.
    Het lijkt alsof er iets fout gaat met de positionering van het geheel, ik kan de linkjes namelijk ook niet selecteren. (ook niet met Caret Browsing (F7) aan)...
    pi_25081956
    De div met id=rechts staat er voor.
    Waar zouden we zijn zonder de DOM-inspector
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
      maandag 14 februari 2005 @ 09:36:12 #266
    46383 Tiemie
    sowieso wel!
    pi_25082638
    .

    en hoe los ik dat op?
    pi_25085706
    quote:
    Op maandag 14 februari 2005 09:36 schreef Tiemie het volgende:
    .

    en hoe los ik dat op?
    Maak die div kleiner/minder breed?
    pi_25099798
    Ik heb weer eens een vaag probleem:
    Ik wil hier 3 divs naast elk zetten (dit kunnen er ook meer of minder zijn) in die div staat een image, dan een br, en dan een text. En daar gaat het fout, ze worden niet naast elkaar geplaatst.
    Haal ik de br weg uit de div dan is er geen probleem dan staan de images naast elkaar maar dan staat de text naast de image ipv eronder.
    Hoe los ik dit op?

    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    		<style type="text/css">
    .thumb
    {
    display:inline;
    border:1px solid #000000;
    }
    </style>

    <div class="thumb">
    <img src="thumbs/1_2_1_2test_dsc00212.jpg"><br><b style="color:#ff6600;">Waiting for approval.</b></div>
       

    <div class="thumb">
    <img src="thumbs/1_2_1_2test_dsc00212.jpg"><br><b style="color:#ff6600;">Waiting for approval.</b></div>
       

    <div class="thumb">
    <img src="thumbs/1_2_1_2test_dsc00212.jpg"><br><b style="color:#ff6600;">Waiting for approval.</b></div>
       
    <br />

    <div class="thumb">
    <img src="thumbs/1_2_1_2test_dsc00212.jpg"><br><b style="color:#ff6600;">Waiting for approval.</b></div>
       

    <div class="thumb">
    <img src="thumbs/1_2_1_2test_dsc00212.jpg"><br><b style="color:#ff6600;">Waiting for approval.</b></div>
       

    <div class="thumb">
    <img src="thumbs/1_2_1_2test_dsc00212.jpg"><br><b style="color:#ff6600;">Waiting for approval.</b></div>
       
    pi_25100043
    1
    2
    3
    4
    5
    6
    7
    8    		<style type="text/css">
    .thumb
    {
      float: left;
      width: 33%;
       border:1px solid #000000;
    }
    </style>


    overigens, volgens mij zou je kunnen overwegen een UL (Unordered List) te gebruiken in je HTML:
    1
    2
    3
    4
    5
    6    		<UL>
       <LI> <img /> 
           Waiting for approval </LI>
       <LI> <img /> 
          Waiting for approval </LI>
    </UL>

    en dan werkelijk alle styles ook echt via CSS doen:
    1
    2
    3
    4
    5
    6
    7
    8
    9    		UL LI  {
       list-style: none;
       display: block;
       border:1px solid #000;
       width: 33%;
       float: left;
       color: #F60;
       font-weight: bold;
    }
    "Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
    pi_25101284
    Tnx, dat ga ik dus met een UL regelen
    pi_25109323
    Ik heb hierp/url] 3 boxes.
    [url=http://www.toycular.nl/v2/css/style.css]Dit     is de CSS.

    Bij de linker en de rechterste box loopt de 'rand' goed 'eromheen'.
    Bij de middelste box loopt mijn border/rand niet eromheen maar eroverheen.
    Wat is er verkeerd
    ne okuyon, bokmu var?
    pi_25109925
    Enige wat ik kan bedenken is dat het te maken heeft met je position:absolute.

    Maar zoals het er nu uitziet is het een IE only iets.
    pi_25109945
    quote:
    Op woensdag 16 februari 2005 10:48 schreef Roönaän het volgende:
    Enige wat ik kan bedenken is dat het te maken heeft met je position:absolute.

    Maar zoals het er nu uitziet is het een IE only iets.
    Ik heb hier geen FF en ik weet ook niet hoe ik het kan oplossen voor andere browsers.
    Ben nog een CSS-noob...
    ne okuyon, bokmu var?
      woensdag 16 februari 2005 @ 13:47:09 #274
    18008 hornage
    FOK! Movie Trivia-Prijsmeester
    pi_25112771
    quote:
    Op dinsdag 15 februari 2005 14:01 schreef RM-rf het volgende:

    [ code verwijderd ]

    overigens, volgens mij zou je kunnen overwegen een UL (Unordered List) te gebruiken in je HTML:
    [ code verwijderd ]

    en dan werkelijk alle styles ook echt via CSS doen:
    [ code verwijderd ]
    Dit is een mooi stukje code om een lijst te maken. Ik wil nu nog aan elk item van de lijst van button dingen toevoegen als hover, active, link etc. Kan ik dat dan op deze manier doen?

    1
    2
    3
    4    		LI:hover {
       color: red;
       text-decoration: none;
    }
    Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
    pi_25113920
    quote:
    Op woensdag 16 februari 2005 13:47 schreef hornage het volgende:

    Dit is een mooi stukje code om een lijst te maken. Ik wil nu nog aan elk item van de lijst van button dingen toevoegen als hover, active, link etc. Kan ik dat dan op deze manier doen?
    [ code verwijderd ]
    ´
    Je mag het doen, en je schept valide CSS volgens de CSS1 specificatie:
    http://www.w3.org/TR/REC-(...)namic-pseudo-classes

    Maar het nadeel is wel dat MS Internet Explorer enkel :hover over A-elementen ondersteund, in dat geval zou je dus alsnog een <a> aan je HTML-code moeten toevoegen (wat natuurlijk, als je element sowieso wilt linken, eigenlijk ook de methode is die semantisch correct is, beter dan een link enkel via javascript maken en via CSS een 'schijnlink' creeeren)
    "Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
      donderdag 17 februari 2005 @ 00:16:09 #276
    46383 Tiemie
    sowieso wel!
    pi_25119498
    quote:
    Op maandag 14 februari 2005 13:50 schreef DutchBlood het volgende:

    [..]

    Maak die div kleiner/minder breed?
    was alles maar zo simpel.

    dankje! !
    pi_25130217
    Ik snap het niet denk ik. Ik gebruik dit:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14    		.menu, .menu:visited
     { 
    color: #333; 
    font-size: 7.5pt; 
    font-family: Verdana, Arial; 
    text-decoration: none; 
    background-color: #ff8c00; 
    letter-spacing: -1px; 
    display: block; 
    margin: 1px; 
    padding: 5px; 
    width: 160px; 
    border: outset 1px #fff 
    }


    Maar de visited werkt wel en de standaard niet. Dat geeft ie een lettertype van 9 pt en een lijn onder de link. Hoe kan dat en hoe krijg ik dat weg?
    Geloven is zeker weten dat je het niet weet.
    Geloven maakt meer kapot dan je lief is.
    Vloeken is aangeleerd...geloven ook.
    pi_25130289
    Probeer het eens met
    a.menu of a.menu:link

    -r-
    pi_25130477
    quote:
    Op donderdag 17 februari 2005 18:50 schreef Roönaän het volgende:
    Probeer het eens met
    a.menu of a.menu:link

    -r-
    Was ik al mee bezig maar bovenstaande werkt ook. Of beter gezegd, werkte eerder ook.

    [ Bericht 1% gewijzigd door wonko op 17-02-2005 20:41:02 ]
    Geloven is zeker weten dat je het niet weet.
    Geloven maakt meer kapot dan je lief is.
    Vloeken is aangeleerd...geloven ook.
      FOK!-Schrikkelbaas zaterdag 26 februari 2005 @ 19:43:20 #280
    1972 Swetsenegger
    Egocentrische Narcist
    pi_25269564
    Hoe los ik dit op:



    De content in het blauwe of witte vlak varieren onafhankelijk van elkaar in hoogte. Ik wil uiteindelijk bereiken dat uiteraard de footer onder aanblijft en dat het witte vlak en het blauwe vlak altijd even hoog zijn.

    Dus als het witte vlak 2 maal zoveel content heeft als het blauwe vlak, moet het blauwe vlak dus gewoon opvullen.

    Ik krijg het niet voor elkaar met divjes. Iemand een tip?
     | FOK! Schrikkelbaasch
    pi_25270257
    quote:
    Op zaterdag 26 februari 2005 19:43 schreef Swetsenegger het volgende:
    Hoe los ik dit op:

    [afbeelding]

    De content in het blauwe of witte vlak varieren onafhankelijk van elkaar in hoogte. Ik wil uiteindelijk bereiken dat uiteraard de footer onder aanblijft en dat het witte vlak en het blauwe vlak altijd even hoog zijn.

    Dus als het witte vlak 2 maal zoveel content heeft als het blauwe vlak, moet het blauwe vlak dus gewoon opvullen.

    Ik krijg het niet voor elkaar met divjes. Iemand een tip?
    Maak twee divjes, die je onder elkaar zet.
    1. Blauwe en witte div container
    2. Footer

    en 1. bestaat dan wederom uit twee divjes die je naast elkaar zet?
      FOK!-Schrikkelbaas zaterdag 26 februari 2005 @ 21:02:05 #282
    1972 Swetsenegger
    Egocentrische Narcist
    pi_25270863
    quote:
    Op zaterdag 26 februari 2005 20:22 schreef DutchBlood het volgende:

    [..]

    Maak twee divjes, die je onder elkaar zet.
    1. Blauwe en witte div container
    2. Footer

    en 1. bestaat dan wederom uit twee divjes die je naast elkaar zet?
    Dat heb ik dus, maar de divjes in de container vullen natuurlijk niet op tot de hoogte van de container wanneer de inhoud kleiner is.



    Het blauwe vlak vult zo niet op tot de hoogte van de container
     | FOK! Schrikkelbaasch
    pi_25271362
    Als de linker div altijd groter is dan de rechter, dan geef je de container een blauwe achtergrond en de linker div een witte achtergrond.
    Anders kan je de container een wit/blauw achtergrond plaatje geven.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
      FOK!-Schrikkelbaas zondag 27 februari 2005 @ 09:07:20 #284
    1972 Swetsenegger
    Egocentrische Narcist
    pi_25278395
    quote:
    Op zaterdag 26 februari 2005 21:31 schreef SuperRembo het volgende:
    Als de linker div altijd groter is dan de rechter, dan geef je de container een blauwe achtergrond en de linker div een witte achtergrond.
    Helaas is dat niet het geval
    quote:
    Anders kan je de container een wit/blauw achtergrond plaatje geven.
    Hmz, dat had een oplossing geweest.
    Maar aangezien het toch om content gaat heb ik in de container div maar een tabel geplaatst
     | FOK! Schrikkelbaasch
    pi_25278911
    quote:
    Op zondag 27 februari 2005 09:07 schreef Swetsenegger het volgende:

    [..]

    Helaas is dat niet het geval
    [..]

    Hmz, dat had een oplossing geweest.
    Maar aangezien het toch om content gaat heb ik in de container div maar een tabel geplaatst
    Een table voor de layout? Zondaar!

    Een voorbeeldje van de oplossing met een achtergrondplaatje .
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
      FOK!-Schrikkelbaas zondag 27 februari 2005 @ 10:58:14 #286
    1972 Swetsenegger
    Egocentrische Narcist
    pi_25278920
    quote:
    Op zondag 27 februari 2005 10:57 schreef SuperRembo het volgende:

    [..]

    Een table voor de layout? Zondaar!
    Nee dus.
    De lay-out is div, de content is table
    quote:
    Een voorbeeldje van de oplossing met een achtergrondplaatje .
    ff checken.
     | FOK! Schrikkelbaasch
    pi_25395595
    Vraagje he

    Hoe kan ik alleen een checkbox en radio button aanpassen in css zonder dat ik het input type veld verander?
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
      zondag 6 maart 2005 @ 15:16:48 #288
    3677 SuperRembo
    Sinds 1998
    pi_25396683
    In CCS2 heb je ook attribute selectors. Firefox en Opera7 ondersteunen dat, Internet Explorer naturrlijk weer niet

    1
    2
    3
    4
    5
    6    		input[type=checkbox] {
        color: red;
    }
    input[type=radio] {
        color: blue;
    }
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_25400400
    Maar dus onmogelijk met IE klote microsoft weer
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_25407652
    quote:
    Op zondag 6 maart 2005 13:51 schreef Chandler het volgende:
    Vraagje he

    Hoe kan ik alleen een checkbox en radio button aanpassen in css zonder dat ik het input type veld verander?
    Je kan toch classes toekennen?
    pi_25407658
    quote:
    Op zondag 27 februari 2005 10:58 schreef Swetsenegger het volgende:

    [..]

    Nee dus.
    De lay-out is div, de content is table
    [..]

    ff checken.
    Je kan de blauwe achtergrond div toch een containerdiv van degene met de witte achtergrond maken? Of past dat niet in jouw format?
    pi_25408039
    true roonaan, eens ff kijken of ik een transparant plaatje als 'achtergrond' kan gebruiken ofzo... hehe
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_25430558
    Zucht... irritante verschillen tussen FF en IE...
    Kan iemand even een kijkje nemen op een projectsite van me en dan met name naar de verschillen? In IE ziet het er simpelweg niet uit. In FF vind ik het best een gail layoutje. Ik vraag me alleen af waarom het er nu weer zo verneukt uit ziet.

    Om bij de bron te kunnen, moet je even rechtermuisknopklikken linksonder op de pagina, onder "Pagina geladen". Dit is niet een lame antirechtermuisknop-scriptje, maar een poging om minder dataverkeer kwijt te zijn en snellere rendertijden. Ik ben er nog wat mee aan het experimenteren.

    en de stylesheets voor de fp staan hier en hier
    » Help mee met DrugsMag.nl! «
    Chillosophy, Gras is groen
    pi_25432132
    quote:
    Op dinsdag 8 maart 2005 21:06 schreef Heliospan het volgende:
    Zucht... irritante verschillen tussen FF en IE...
    Kan iemand even een kijkje nemen op een projectsite van me en dan met name naar de verschillen? In IE ziet het er simpelweg niet uit. In FF vind ik het best een gail layoutje. Ik vraag me alleen af waarom het er nu weer zo verneukt uit ziet.

    Om bij de bron te kunnen, moet je even rechtermuisknopklikken linksonder op de pagina, onder "Pagina geladen". Dit is niet een lame antirechtermuisknop-scriptje, maar een poging om minder dataverkeer kwijt te zijn en snellere rendertijden. Ik ben er nog wat mee aan het experimenteren.

    en de stylesheets voor de fp staan hier en hier
    Ik krijg een Forbidden melding.
    pi_25433786
    Mijn excuses. Ik heb de fout inmiddels gerepareerd. De site is even offline om het nog niet publiekelijk te maken. Ik was even vergeten mijn post leeg te editen hier
    » Help mee met DrugsMag.nl! «
    Chillosophy, Gras is groen
    pi_25442356
    hoop dat jullie me kunnen helpen, ik ben bezig met een paginaatje.. daar zit een div in, die 100px vanaf de linkerkant moet staan, en 100px van de bovenkant. dit is geen probleem, maar om de div (ongeacht de resolutie..) 10px van de rechterkant af te houden wil me niet lukken.. zelfde geldt voor de onderkant. ik heb het op de volgende manier gedaan

    mn css
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20    		html, body {
       width: 100%;
       height: 100%;
       margin: 0px;
       background-image:url(../img/bg.png);
       font-family:Verdana, Arial, Helvetica, sans-serif;
       font-size:11px;
    }

    div.content {
       position: absolute;
       left: 100px;
       top: 100px;
       right: 10px;
       bottom: 10px;
       right: 10px;
       bottom: 10px;
       border: 1px solid #111111; 
       width: auto;
       height: auto;


    het vreemde.. in firefox werkt het wel zoals ik het wil!

    [ Bericht 3% gewijzigd door markiemark op 09-03-2005 16:12:37 ]
    Amsterdam, stad van hash en coke,
    Waar de vrouwen zich vrouwelijk gedragen..
    En de mannen ook..
    pi_25452496
    schopje..
    Amsterdam, stad van hash en coke,
    Waar de vrouwen zich vrouwelijk gedragen..
    En de mannen ook..
    pi_25453309
    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    		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
       <title></title>
       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
       <meta http-equiv="Content-Language" content="en-us">
       <style type="text/css">
       
    html {
       margin: 0;
       padding: 0;
    }
    body {
       margin: 100px 10px 10px 100px;
       padding: 0;
    }

    div#content {
       height: 100%;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
       border: 1px solid #000;
    }

       </style>
    </head>
    <body>

    <div id="content">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    </div>

    </body>
    </html>


    Gebaseerd op de eerste oplossing van Quirksmode.org - 100% height.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_25453411
    hmmz.. dit kan ik wel gewoon in een aparte css file laten staan? heb het even geprobeerd, maar het zit nog wat buggy... kan omdat ik hem nog niet helemaal goed heb staan qua argumenten.. maar dat vind ik het belangrijkste..
    Amsterdam, stad van hash en coke,
    Waar de vrouwen zich vrouwelijk gedragen..
    En de mannen ook..
    pi_25453874
    Dit werkt alleen in quirks mode, niet in strict mode. Je moet er dus wel de goeie doctype bij hebben staan.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_25453948
    ok dat heb ik gevonden op die site die je zei.. ik probeer het ff met het doctype er in, want dat had ik nog neit gedaan..
    Amsterdam, stad van hash en coke,
    Waar de vrouwen zich vrouwelijk gedragen..
    En de mannen ook..
    actieve topics nieuwe topics
    abonnement Unibet Coolblue Bitvavo
    [CSS] voor dummies.
    Index

    » digital corner

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