Css/slice Check.

**R Schuurman** · 10-11-2010, 12:28

Hallo,

Ik ben hier al enige tijd lid, maar wil nu graag serieus bezig met websites.
daarom heb ik mijn eerste pagina gebased.

http://portfolio.aftereffect.nl

ben benieuwt of deze goed is. en dan vooral de stijl.
in Validator worden geen fouten gevonden.

maar twijfel erg of er niet teveel div'jes zijn.

Graag hoor ik van jullie,

Met vriendelijke groet,
R Schuurman

**Marcel van Vrouwerf** · 10-11-2010, 13:03

het is inderdaad een weldaad aan DIV-jes

>>
line 57 column 5 - Fout: end tag for element "div" which is not open

**J. Veuger** · 10-11-2010, 13:25

Vergeet niet ook de normale validator te draaien: http://validator.w3.org/check?uri=ht...Inline&group=0

Tevens is je code vrij slordig.
Je hebt heel vaak lege divjes onnodige lang gemaakt (code-wise):

Code:

<div id="rechts">             </div>

Kan simpelweg leeggemaakt worden, of op de volgende regel (laatste heeft mijn voorkeur):

Code:

<div id="rechts"> 
</div>

Daarbij tab je te weinig. Zoals het moet (of nja, moet natuurlijk niet. maar dit is gebruikelijk):

Code:

<html>
    <head>
        <title>Mijn pagina</title>
    </head>
    <body>
        <!-- content -->
    </body>
</html>

etc. etc. :P

Marcel was mij al voor met eerste gedeelte.

**R Schuurman** · 10-11-2010, 13:25

Dank voor je reactie

Origineel gepost door Marcel van Vrouwerf

>>
line 57 column 5 - Fout: end tag for element "div" which is not open

Aangepast! dankje

het is inderdaad een weldaad aan DIV-jes

Zoals ik al dacht. hoe is dit het slimst op te lossen? of ligt het ook veel aan het ontwerp (overigens niet van mij!)

**J. Veuger** · 10-11-2010, 13:31

Additionele info:
Je hebt bijv. bij je foto-divjes voor elke div een aparte ID. Je kan dit combineren met een aparte ID & standaard class.

Dan krijg je bijv. in je CSS dit:

Code:

.fotos
{
    float: left;
    width: 134px;
    height: 134px;
}
#foto1
{
	background: #000 url(../images/foto3.gif) no-repeat top left;
}

#foto2
{
	width: 133px;
	background: #000 url(../images/foto4.gif) no-repeat top left;
}

Je kan zo in je id-clausules dubbele declaraties tegen elkaar wegstrepen (en ze toevoegen aan de fotos class).

**Robin L** · 10-11-2010, 13:35

Origineel gepost door R Schuurman

Dank voor je reactie

Aangepast! dankje

Zoals ik al dacht. hoe is dit het slimst op te lossen? of ligt het ook veel aan het ontwerp (overigens niet van mij!)

Het ligt niet echt aan de layout, langzamerhand krijg je vanzelf wel door welke tags je voor welke dingen gebruikt en hoe je een layout het beste kan indelen qua div'jes e.d. Hier een paar handige tips;

- Als je een ID aan een div meegeeft is deze uniek, deze mag dus geen 2 keer voorkomen in de code. Mijn voorkeur gaat meestal uit naar 1 tot max 5 ID's, en de rest classes per layout.
- Classes kan je zovaak gebruiken als je wilt in een layout, en je kan (elk geschikt element) schijnbaar 2000 classes meegeven (niet dat je dit ooit zal doen, maar goed).
- Als je verder werkt in een div, tab je weer 1 stukje verder. voorbeeld.
- Probeer tags te begrijpen, <p> voor teksten, <h1> voor belangrijkste tekst, <table> voor gegevens, h2,h3 etc voor kopjes, <ul><li> voor lijsten et cetera.
- Probeer ook ruimte tussen je regels te houden en daardoor de code voor jezelf en anderen overzichtelijk te houden, dit onderandere middels comments, empty lines en tabs.

**Stefan Visser** · 10-11-2010, 13:36

Paar tips:

Probeer voor je menu met een "unsorted list (<ul>)" te werken.
Werk ook met tabs voor je divjes, zo word het overzichtelijker.
Gebruiker een goede editor , die divjes automatisch sluit. ( dreamweaver, notepad++ )
Probeer met een logische opbouw te werken, nu krijg je spaghetti divjes.

Voor jouw website zou ik zo werken:

PHP Code:


<!-- alle je meta stuff -->



<div id="TopMenu">

    <ul>

        <li><a href='#'>Linkje</a></li>

        <li><a href='#'>Linkje</a></li>

        <li><a href='#'>Linkje</a></li>        

    </ul>

</div>



<div id="Container">

    <div id="Header">

    <!-- Title div hoeft niet je kan je h1 ook de waarden meegeven -->

        <div class="title">

            <h1>Portfolio R Schuurman</h1>

        </div>

        

        <div class="content">

            <img src='#' alt='' />

            <h2></h2>

            <p>Lipsum dolar si met.</p>

        </div>

    </div>

    

    <div id="Content">

    

        <h1>Latest Work</h1>

            

            <!-- Zijn goede oplossingen voor, je kan bijvoorbeeld weer een ul gebruiken -->

            <ul>

            <li>leeg</li>

            <li>plaatje</li>

            <li>leeg</li>

            <li>plaatje</li>

            <li>leeg</li>

            <ul>

            

            <ul>

            <li>plaatje</li>

            <li>plaatje</li>

            <li>plaatje</li>

            <li>plaatje</li>

            <li>plaatje</li>

            <ul>

        

    </div>

    

    <div id="Footer">

        Spreekt voor zich

    </div>

</div>

Aanvullend bericht:

Origineel gepost door Robin L

Het ligt niet echt aan de layout, langzamerhand krijg je vanzelf wel door welke tags je voor welke dingen gebruikt en hoe je een layout het beste kan indelen qua div'jes e.d. Hier een paar handige tips;

- Als je een ID aan een div meegeeft is deze uniek, deze mag dus geen 2 keer voorkomen in de code. Mijn voorkeur gaat meestal uit naar 1 tot max 5 ID's, en de rest classes per layout.
- Classes kan je zovaak gebruiken als je wilt in een layout, en je kan (elk geschikt element) schijnbaar 2000 classes meegeven (niet dat je dit ooit zal doen, maar goed).
- Als je verder werkt in een div, tab je weer 1 stukje verder. voorbeeld.
- Probeer tags te begrijpen, <p> voor teksten, <h1> voor belangrijkste tekst, <table> voor gegevens, h2,h3 etc voor kopjes, <ul><li> voor lijsten et cetera.
- Probeer ook ruimte tussen je regels te houden en daardoor de code voor jezelf en anderen overzichtelijk te houden, dit onderandere middels comments, empty lines en tabs.

ID's moeten uniek zijn ja, maar je kan wel een id in een id gebruiken

voorbeeld:

PHP Code:


<div id="Containter">

    <div id="Menu">

    </div>



    <div id="Header">

    </div>



    <div id="Content">

    </div>



    <div id="Footer">

    </div>

</div>

Of heb ik dat verkeerd ?

**Robin L** · 10-11-2010, 15:44

Origineel gepost door Stefan Visser

Paar tips:

Probeer voor je menu met een "unsorted list (<ul>)" te werken.
Werk ook met tabs voor je divjes, zo word het overzichtelijker.
Gebruiker een goede editor , die divjes automatisch sluit. ( dreamweaver, notepad++ )
Probeer met een logische opbouw te werken, nu krijg je spaghetti divjes.

Voor jouw website zou ik zo werken:

PHP Code:


<!-- alle je meta stuff -->



<div id="TopMenu">

    <ul>

        <li><a href='#'>Linkje</a></li>

        <li><a href='#'>Linkje</a></li>

        <li><a href='#'>Linkje</a></li>        

    </ul>

</div>



<div id="Container">

    <div id="Header">

    <!-- Title div hoeft niet je kan je h1 ook de waarden meegeven -->

        <div class="title">

            <h1>Portfolio R Schuurman</h1>

        </div>

        

        <div class="content">

            <img src='#' alt='' />

            <h2></h2>

            <p>Lipsum dolar si met.</p>

        </div>

    </div>

    

    <div id="Content">

    

        <h1>Latest Work</h1>

            

            <!-- Zijn goede oplossingen voor, je kan bijvoorbeeld weer een ul gebruiken -->

            <ul>

            <li>leeg</li>

            <li>plaatje</li>

            <li>leeg</li>

            <li>plaatje</li>

            <li>leeg</li>

            <ul>

            

            <ul>

            <li>plaatje</li>

            <li>plaatje</li>

            <li>plaatje</li>

            <li>plaatje</li>

            <li>plaatje</li>

            <ul>

        

    </div>

    

    <div id="Footer">

        Spreekt voor zich

    </div>

</div>

Aanvullend bericht:

ID's moeten uniek zijn ja, maar je kan wel een id in een id gebruiken

voorbeeld:

PHP Code:


<div id="Containter">

    <div id="Menu">

    </div>



    <div id="Header">

    </div>



    <div id="Content">

    </div>



    <div id="Footer">

    </div>

</div>

Of heb ik dat verkeerd ?

Tuurlijk kan je een ID in een ID gebruiken, maar 't is maar net waar je voorkeur naar uitgaat, persoonlijk geef ik alleen de belangrijkste elementen een ID mee (header, container, footer etc).

**R Schuurman** · 11-11-2010, 14:10

Allereerst bedankt voor alle reacties!

als editor gebruik ik trouwens dreamweaver.

ik heb inmiddels een 2e versie gemaakt: http://portfolio.aftereffect.nl/
.css en .html gevalideerd.

heb me ook proberen te houden aan het tab'en. En volgens mij is dit goed gegaan.

heb nu nog maar 5 id's gebruikt (container, menu, header, content en footer) is dit goed zo?

ik heb geprobeerd zoveel mogelijk clasules omhoog te plaatsen (height van foto's bijvoorbeeld genoemd in ul)

heb mijn slice ook aangepast, zodat deze in minder stukjes lag. is dit beter? (oude hier)

verder heb ik mijn content aangepast zoals Stefan Visser zei. echter heb ik de <li> een class gegeven en dan via .css een achtergrond. was dit de bedoeling? of moet ik via html een plaatje invoegen?

graag hoor ik van jullie.

Met vriendelijke groet,
R Schuurman

**Robin L** · 11-11-2010, 16:09

Origineel gepost door R Schuurman

Allereerst bedankt voor alle reacties!

als editor gebruik ik trouwens dreamweaver.

ik heb inmiddels een 2e versie gemaakt: http://portfolio.aftereffect.nl/
.css en .html gevalideerd.

heb me ook proberen te houden aan het tab'en. En volgens mij is dit goed gegaan.

heb nu nog maar 5 id's gebruikt (container, menu, header, content en footer) is dit goed zo?

ik heb geprobeerd zoveel mogelijk clasules omhoog te plaatsen (height van foto's bijvoorbeeld genoemd in ul)

heb mijn slice ook aangepast, zodat deze in minder stukjes lag. is dit beter? (oude hier)

verder heb ik mijn content aangepast zoals Stefan Visser zei. echter heb ik de <li> een class gegeven en dan via .css een achtergrond. was dit de bedoeling? of moet ik via html een plaatje invoegen?

graag hoor ik van jullie.

Met vriendelijke groet,
R Schuurman

Geweldig, duidelijk verbetering, vind je niet?

Inderdaad goed en duidelijk gebruik gemaakt van tabs (overzichtelijkheid for the win!), goed gebruik van listings (ul,li) kopjes met H tags, tekst met P tags, en (bij mij tenminste) zie ik de layout in (zo goed als) alle browsers zoals hij hoort. :-) Mijn complimenten!

Voor de rest zijn er natuurlijk altijd wel verbeterpunten, maar ik twijfel er niet over dat je deze zelf wel zult gaan ontdekken :-) (Browser compatibiliteit et cetera)

**RubenP** · 12-11-2010, 17:30

Code:

<li class="fotonaastlinks"><!--fotonaastlinks!--></li>
<li class="foto3"><!--foto3!--></li>
<li class="foto4"><!--foto4!--></li>
<li class="foto5"><!--foto5!--></li> 
<li class="foto6"><!--foto6!--></li>
<li class="foto7"><!--foto7!--></li>
<li class="fotonaastrechts"><!--fotonaastrechts!--></li>

Wat is dit nou weer? Waarom zet je alle afbeeldingen in de css?
Dit is helemaal niet de bedoeling van css, zet de afbeeldingen gewoon in je html!

Code:

<li><a href="index.html">contact</a></li>
<li><a href="index.html">services</a></li>
<li><a href="index.html">gallery</a></li>
<li><a href="index.html">about</a></li>
<li><a href="hierbeniknognooitgeweest.html">home</a></li>

Werk van links naar rechts, het is erg onlogisch als je achterstevoren werkt.

Code:

<div class="tussenstuk"></div>

Al eens gehoord van margin?

Voorderest een <li> wordt gebruikt als opsomming, hoe krijg je het bedacht om dit te gebruiken op een paar plaatjes naast elkaar te zetten?

**Stefan Visser** · 13-11-2010, 20:29

Origineel gepost door RubenP

Code:

<li class="fotonaastlinks"><!--fotonaastlinks!--></li>
<li class="foto3"><!--foto3!--></li>
<li class="foto4"><!--foto4!--></li>
<li class="foto5"><!--foto5!--></li> 
<li class="foto6"><!--foto6!--></li>
<li class="foto7"><!--foto7!--></li>
<li class="fotonaastrechts"><!--fotonaastrechts!--></li>

Wat is dit nou weer? Waarom zet je alle afbeeldingen in de css?
Dit is helemaal niet de bedoeling van css, zet de afbeeldingen gewoon in je html!

Code:

<li><a href="index.html">contact</a></li>
<li><a href="index.html">services</a></li>
<li><a href="index.html">gallery</a></li>
<li><a href="index.html">about</a></li>
<li><a href="hierbeniknognooitgeweest.html">home</a></li>

Werk van links naar rechts, het is erg onlogisch als je achterstevoren werkt.

Code:

<div class="tussenstuk"></div>

Al eens gehoord van margin?

Voorderest een <li> wordt gebruikt als opsomming, hoe krijg je het bedacht om dit te gebruiken op een paar plaatjes naast elkaar te zetten?

Over de plaatjes ben ik het eens, die horen gewoon in je layout met de img tag.

De li staat echter voor list item. de ul voor een unsorted list.

wat deze list als content heeft maakt niets uit, de ts gebruiket de ul om zijn foto´s te listen waar helemaal niets mis mee is.

**Raymond Nijland** · 22-11-2010, 14:56

Probeer je website ook in lagen op te bouwen net zo iets als je met een design zou doen.
Zet dan eerst in grove lijnen de site neer en maak je dan nog niet druk om margins en paddings, kan later ook nog.

Begin met xhtml document zet daar minimale xhtml tags in om het document zo goed mogelijk te omschreven, dan begin je pas met de css en begin je met de achtergrond en langzaam aan naar boven begint te werken achtergrond, site container, header enzovoorts dan begint de site een grove vorm te krijgen. Als het grove werk is gedaan kun je gaan beginnen met de margins en paddings toe te voegen alleen je moet er dan wel rekening mee houden dat bij het gebruik van paddings de box groter wordt en je dus de width kleiner moet maken.

Misschien dat je ook eens moet gaan lezen hoe Semantische (x)html opgebouwd hoort te wezen.
Er zijn wel erg veel overbodige divisies (divs) in de xhtml.

Hopelijk kun je wat met deze aanwijzingen, gewoon vol houden dan kom je er wel

Css/slice Check.

Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Css/slice Check.

Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Re: Css/slice Check.

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Inloggen