[CSS/XHTML]Een paar vragen over mijn redesign.

[Verwijderd]

Ik heb mijn site, www.hiddedevries.nl, opnieuw ontworpen, en er nu voor gezorgd dat mijn site valid is. Ik heb hier naast me een boek liggen over redesign met XHTML en CSS, waar ik dankbaar gebruik van heb gemaakt. De basis van de site is nu af, en hij doet het prima. Dat wil zeggen, in Opera, Firefox en Safari. Maar in Internet Explorer blijkt hij niet helemaal goed te werken.

Ter illustratie:

Hoe kan ik dit oplossen?

Verder nog iets: bij 'Creaties' op mijn site heb ik een paar dingen die ik heb gemaakt staan. Links een thumbnail (float:left) , en rechts een beschrijving (float:right). Om alle creaties goed onder elkaar te krijgen heb ik dat nu opgelost door tussen 2 creaties '<br />' te zetten. Dat werkt goed, alles staat nu zoals ik het wil hebben. Maar ik meende gelezen te hebben dat je de tag <br /> zoveel mogelijk moet vermijden, dus is er hiervoor ook een oplossing in CSS?

Derde en laatste vraag: wat vinden jullie van het ontwerp?

Ik heb zelf al de nodige moeite gedaan, door goed het boek 'Modern Redesign' te bestuderen, en wat rond te neuzen op de site van het W3C, tot nu toe nog zonder succes..

[ Voor 4% gewijzigd door Verwijderd op 02-09-2005 09:15 ]

[rvm]

Voor dat W3C icoontje kun je voor de bijbehorende IMG tag "border: 0px" zetten, dan ben je van die omlijning af. In Firefox zie ik 'm overigens ook.

code:

<NOFRAMES>
Your browser does not support frames.
</NOFRAMES>

Als je daar dezelfde linkjes tussen plaatst die ook in je navigatiemenu zitten (of nog beter: een sitemap), dan kunnen je bezoekers ook met een niet-frames-ondersteundende browser toch redelijk makkelijk je website gebruiken.

[ Voor 54% gewijzigd door rvm op 02-09-2005 09:22 ]

[akakiwi]

Je gaat niet geloven hoe kinderachtig je de ruimte tussen je header en je menu op kunt lossen.
ipv

code:

<div id="Hoofd">
    [img]"afbeeldingen/hoofd.jpg"[/img]
</div>

moet je de enters weghalen.

code:

<div id="Hoofd">[img]"afbeeldingen/hoofd.jpg"[/img]</div>

Dit geldt overigens ALTIJD voor plaatjes. Als je plaatjes zonder ruimte (left, bottom) wilt hebben, moet je ze zonder ENTERS en SPATIES in je broncode zetten.
Datzelfde geldt dus OOK voor het w3c logo

[edwinistrator]

mooi verhaal over valid xhtml etc. op je site, maar je frameset is nog oldschool, zou je daar dan ook niet een valid xhtml frameset van maken?

[Clay]

die witte ruimte boven je menu in IE komt door dit stukkie in je css:

Cascading Stylesheet:

#navlist ul, #navlist li
{
   margin: 0;
   padding: 0;
   display: inline; /* deze */
   list-style-type: none;
}

Inline elementen worden heel anders gerendered dan block elementen. Het betekent meer "binnen een tekstregel" dan "op een lijn". Eigenlijk kan je dit soort dingen dan ook beter met block display en floats oplossen.

Die border rond je images kan je idd gewoon fixen met b.v. een

Cascading Stylesheet:

a img {
   border:0;
}

Om alle creaties goed onder elkaar te krijgen heb ik dat nu opgelost door tussen 2 creaties '<br />' te zetten. Dat werkt goed, alles staat nu zoals ik het wil hebben. Maar ik meende gelezen te hebben dat je de tag <br /> zoveel mogelijk moet vermijden, dus is er hiervoor ook een oplossing in CSS?

Daar heb je de css property "clear" voor (left of right). Een element met b.v. een clear:left; zal niet meer naast iets komen te staan dat float:left; heeft, maar eronder komen.

Derde en laatste vraag: wat vinden jullie van het ontwerp?

http://www.sitechecks.nl

akakiwi schreef op vrijdag 02 september 2005 @ 09:38:
Je gaat niet geloven hoe kinderachtig je de ruimte tussen je header en je menu op kunt lossen.
ipv

code:

<div id="Hoofd">
    [img]"afbeeldingen/hoofd.jpg"[/img]
</div>

moet je de enters weghalen.

code:

<div id="Hoofd">[img]"afbeeldingen/hoofd.jpg"[/img]</div>

Dit geldt overigens ALTIJD voor plaatjes. Als je plaatjes zonder ruimte (left, bottom) wilt hebben, moet je ze zonder ENTERS en SPATIES in je broncode zetten.
Datzelfde geldt dus OOK voor het w3c logo

Dat geldt alleen voor inline elementen. Met een goeie css file heb je hier geen last van, en hoef je de whitespace in je markup niet weg te halen.

[Verwijderd]

Ja, die frameset, dat is het vervelende, die is gemaakt door degene die mijn .nl domein verzorgd. Wat ik heb gemaakt is members.chello.nl/g.vries4/hiddedevries.nl/, en hij stuurt het zegmaar door daarnaartoe. Dus die frames daar kan ik niet zoveel aan doen .. Wel jammer opzich..

[Verwijderd]

Clay schreef op vrijdag 02 september 2005 @ 09:44:
die witte ruimte boven je menu in IE komt door dit stukkie in je css:

Cascading Stylesheet:

#navlist ul, #navlist li
{
   margin: 0;
   padding: 0;
   display: inline; /* deze */
   list-style-type: none;
}

Inline elementen worden heel anders gerendered dan block elementen. Het betekent meer "binnen een tekstregel" dan "op een lijn". Eigenlijk kan je dit soort dingen dan ook beter met block display en floats oplossen.

Maar als je block display:block doet, dan komen ze toch onder elkaar te staan? Dat display:inline is toch hetgene wat ervoorzorgt dat ze naastelkaar staan ipv onder elkaar.. ? (omdat ul en li normaal als block gedisplayed worden..)

en je schreef:
Dat geldt alleen voor inline elementen. Met een goeie css file heb je hier geen last van, en hoef je de whitespace in je markup niet weg te halen.

Heb je misschien ook tips voor de verbetering van die CSS-file dan? Ik ga dat met dat clear zo maar even proberen dan..

[ Voor 25% gewijzigd door Verwijderd op 02-09-2005 09:51 ]

[BtM909]

Verwijderd schreef op vrijdag 02 september 2005 @ 09:46:
Ja, die frameset, dat is het vervelende, die is gemaakt door degene die mijn .nl domein verzorgd. Wat ik heb gemaakt is members.chello.nl/g.vries4/hiddedevries.nl/, en hij stuurt het zegmaar door daarnaartoe. Dus die frames daar kan ik niet zoveel aan doen .. Wel jammer opzich..

Geen mogelijkheden om dat aan te laten passen? Desnoods geef je het goede voorbeeld
los van het feit of je wel of geen echt XHTML doet

[Verwijderd]

BtM909 schreef op vrijdag 02 september 2005 @ 09:50:
[...]

Geen mogelijkheden om dat aan te laten passen? Desnoods geef je het goede voorbeeld
los van het feit of je wel of geen echt XHTML doet

Hoe bedoel je ?

[BtM909]

Verwijderd schreef op vrijdag 02 september 2005 @ 09:51:
[...]

Hoe bedoel je ?

Op welke van de 2 zinnen slaat je vraag?

[Clay]

Verwijderd schreef op vrijdag 02 september 2005 @ 09:48:
[...]

Maar als je block display:block doet, dan komen ze toch onder elkaar te staan? Dat display:inline is toch hetgene wat ervoorzorgt dat ze naastelkaar staan ipv onder elkaar.. ? (omdat ul en li normaal als block gedisplayed worden..)

[...]

Heb je misschien ook tips voor de verbetering van die CSS-file dan? Ik ga dat met dat clear zo maar even proberen dan..

Een gevolg van display:inline; is dat het naast elkaar komt te staan, maar het is niet zo simpel dat je daarmee zomaar blokken (al dan niet met een opgegeven width en height) strak naast elkaar kan zetten. Met block komt het idd onder elkaar, daarom zeg ik ook met block en floats.

Inline moet je zien als een element binnen een tekstregel; hij kan aan het einde van de ene regel beginnen, en ergens aan het begin van de volgende ophouden. Het hoeft dus ook helemaal geen rechthoekige vorm te zijn, of zelfs maar uit 1 deel te bestaan. Dat er ruimte tussen 2 inline elementen komt is dan ineens ook logisch; net als tussen 2 woorden komt er tussen 2 inline elementen waar in de souce whitespace tussen staat een spatie.

[Verwijderd]

BtM909 schreef op vrijdag 02 september 2005 @ 09:56:
[...]

Op welke van de 2 zinnen slaat je vraag?

Beide

[BtM909]

Verwijderd schreef op vrijdag 02 september 2005 @ 09:58:
[...]

Beide

1. Geen mogelijkheden om dat aan te laten passen? Desnoods geef je het goede voorbeeld
2. los van het feit of je wel of geen echt XHTML doet

1. Je kan toch een XHTML frameset sturen naar degene die je .nl domein regelt. Wellicht dat ze het voor jou wel willen aanpassen

2. http://www.hixie.ch/advocacy/xhtml (bijvoorbeeld)

[Verwijderd]

@BtM909: Ja, kan ook wel denk ik..

Ik heb nog 1 vraagjes trouwens; hoe kan ik het onderste vak altijd helemaal door laten gaan tot de onderkant van de pagina? (zodat het niet meer afhankelijk is van de hoeveelheid tekst die erin staat?
Ik heb height: 100% geprobeerd, maar dat wil niet..

[sjaakaq]

Hoe doe je btw die grote eerste letter in IE? Ik weet dat het d.m.v. first-ellet oid kan, maar ik dacht dat IE dat niet snapte...

Of zet je die eerste letter gewoon in een aparte DIV ofzo?

[kaassouffle]

@leokennis: Check z'n broncode...

Bij mij is trouwens het onderste zwarte vak zeg maar... aan beide kanten een pixel breder dan het zwarte vak erboven... Dit alleen in IE, in Firefox zijn ze even breed...

[Verwijderd]

leokennis schreef op vrijdag 02 september 2005 @ 11:35:
Hoe doe je btw die grote eerste letter in IE? Ik weet dat het d.m.v. first-ellet oid kan, maar ik dacht dat IE dat niet snapte...

Of zet je die eerste letter gewoon in een aparte DIV ofzo?

In een aparte <span> en die van float:left en groot...

@kaassouffle: dat heb ik zelf net ook opgemerkt.. Weet iemand hoe dat te verhelpen is?