abonnement bol.com Unibet Coolblue
  vrijdag 15 juni 2007 @ 10:19:56 #1
12880 CraZaay
prettig gestoord
  vrijdag 15 juni 2007 @ 10:20:43 #2
12880 CraZaay
prettig gestoord
pi_50478341
quote:
Op vrijdag 15 juni 2007 09:01 schreef Tuvai.net het volgende:
En tóch werkt het voor vrijwel iedereen.

Maf hé?
Enkel en alleen dankzij de foutcorrectie van de browsers. Die gaan over op quirks mode en dan maken ze er alsnog wel iets fatsoenlijks van
pi_50478732
Lichtelijk offtopic, maar ik vroeg mij af wat jullie van de volgende methode vinden:

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
<div id="header">
   <div class="title">Voorbeeldpagina</div>
   <div class="menubar">Menu</div>
</div>

<div id="paneleft">
   <div class="title">Hondenrassen:</div>
   <div class="items"><ul></ul></div>
   <div class="title">Kattenrassen:</div>
   <div class="items"><ul></ul></div>
</div>

<div id="paneright">
   <div class="title">Schildpadden:</div>
   <div class="items"><ul></ul></div>
   <div class="title">Apen:</div>
   <div class="items"><ul></ul></div>
</div>

<style type="text/css">

/* HEADER ID */
#header{
   width: 600px;
}

/* CLASS TITLE IN HEADER ID */
#header .title {
   text-align: right;
   line-height: 6px;
}

/* CLASS MENUBAR IN HEADER ID */
#header .menubar .....

/* CLASS TITLE IN PANELEFT & PANERIGHT */
#paneleft .header, #paneright .header {
   font-family: Verdana, Tahoma, Arial;
}

/* CLASS TITLE IN PANELEFT */
#paneleft .header {
   text-align: left;
}

/* CLASS TITLE IN PANERIGHT */
#paneright .title {
   text-align: right;
}

/* GLOBAL UL IN CLASS TITLE IN PANELEFT & PANERIGHT */
#paneleft .title ul, #paneright .title ul{
   display: inline;
}

</style>


In gebruik de class "title" dus voor twee doeleinden, maar maak in de stylesheet duidelijk onderscheid tussen de twee verschillende typen, doordat ik kijk in welke div ze zitten. Dit om classnamen als "leftpanetitle" of "headermenubar" te voorkomen. Maar is dit nou netjes? Of schop ik zo de complete semantiek naar de maan?
pi_50479246
Kan wel zo hoor.. maar ik zou van die titel in je header een h1 element maken. Is wat meer semantisch verantwoord (als je het toch goed wil doen).
pi_50480003
Ik heb een hele grappige footer... In Mozilla FF en Opera 9 doet-ie het goed. In IE7 begint-ie in het midden van mijn pagina en loopt dan vrolijk rechts van het scherm af. De lengte van de footer is wél goed!

Mijn code:

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
* {
    margin:                0px;
    padding:               0px;
  }
  
  body {
    background-color:      #FFFFFF;
    font-size:             15px;
    font-family:           Arial, Helvetica;
    text-align:            center;
  }

  html, body {
    height:                100%;
  }

  #container {
    position:              relative;
    min-height:            100%;
    height:                100%;
  }

  #wrapper {
    margin-left:           auto;
    margin-right:          auto;
    padding-bottom:        60px;
    width:                 620px;
  }

  #content {
    text-align:            justify;
  }

  html>body #container {
    height: auto;
  }

  #footer {
    bottom:                0;
    position:              absolute;
    text-align:            center;
    width:                 100%;
    background:            #FF0000;
  }


Note: dit is niet de volledige CSS code maar alleen de relevante blokken.

HTML code:
1
2
3
4
5
6
7
8
9
10
11
  <body class="default">
    <div id="container" class="container">
      <div id="wrapper" class="wrapper">
        <div id="content" class="content">
          Content hier.
        </div> <!-- content //-->
      </div> <!-- wrapper //-->
      <div id="footer" class="footer">
        <p class="footer">Bla</p>
      </div> <!-- footer //-->
    </div> <!-- container //-->


Plaatjes:
Mozilla: klik

IE7: klik

Iemand een ideetje wat ik fout doe? Code en CSS komen door de w3c-validatie heen.
Code als XHTML 1.0 Transitional.
Iemand dood maken met een blije mus is nooit grappig...
  vrijdag 15 juni 2007 @ 11:29:34 #6
12880 CraZaay
prettig gestoord
pi_50480549
quote:
Op vrijdag 15 juni 2007 10:51 schreef Bigs het volgende:
Kan wel zo hoor.. maar ik zou van die titel in je header een h1 element maken. Is wat meer semantisch verantwoord (als je het toch goed wil doen).
Ja, en de andere titels ook headers van maken. De divs die je voor de titels gebruikt kunnen dan weg. De divs om je lists kunnen ook verdwijnenn. Je kunt in de CSS immers prima de elementen als referentie gebruiken: "#paneleft h2" en "#paneleft ul".

"paneleft" en "paneright" omschrijven de presentatie, en niet de structuur. Even aanpassen naar iets wat over de inhoud zegt dus

De tip van de dag is dus: structureer je pagina zo logisch mogelijk met de html elementen die je tot je beschikking hebt, en voeg eventueel later extra hooks toe als dat voor je design noodzakelijk is (vaak niet). Voor alles een div of span gebruiken is net zo erg als opmaak door middel van tabellen naar mijn mening. Headings, lists (unordered, ordered, definition), paragraphs, emphasis, e.d. zijn niet voor niets uitgevonden En zo hebben alternatieve user agents er ook nog iets aan (Google, visueel gehandicapten, mobile devices zonder CSS, etc)
pi_50480579
quote:
Op vrijdag 15 juni 2007 11:14 schreef DikkeSmikkel het volgende:
Ik heb een hele grappige footer... In Mozilla FF en Opera 9 doet-ie het goed. In IE7 begint-ie in het midden van mijn pagina en loopt dan vrolijk rechts van het scherm af. De lengte van de footer is wél goed!

Mijn code:
[ code verwijderd ]

Note: dit is niet de volledige CSS code maar alleen de relevante blokken.

HTML code:
[ code verwijderd ]

Plaatjes:
Mozilla: klik

IE7: klik

Iemand een ideetje wat ik fout doe? Code en CSS komen door de w3c-validatie heen.
Code als XHTML 1.0 Transitional.
Je margin-left en margin-right, wat gebeurt er als je dat vervangt door een:

"margin: 0 auto"

?
pi_50480822
quote:
Op vrijdag 15 juni 2007 11:29 schreef CraZaay het volgende:

[..]

Ja, en de andere titels ook headers van maken. De divs die je voor de titels gebruikt kunnen dan weg. De divs om je lists kunnen ook verdwijnenn. Je kunt in de CSS immers prima de elementen als referentie gebruiken: "#paneleft h2" en "#paneleft ul".

"paneleft" en "paneright" omschrijven de presentatie, en niet de structuur. Even aanpassen naar iets wat over de inhoud zegt dus

De tip van de dag is dus: structureer je pagina zo logisch mogelijk met de html elementen die je tot je beschikking hebt, en voeg eventueel later extra hooks toe als dat voor je design noodzakelijk is (vaak niet). Voor alles een div of span gebruiken is net zo erg als opmaak door middel van tabellen naar mijn mening. Headings, lists (unordered, ordered, definition), paragraphs, emphasis, e.d. zijn niet voor niets uitgevonden En zo hebben alternatieve user agents er ook nog iets aan (Google, visueel gehandicapten, mobile devices zonder CSS, etc)
Het zou perfect zijn om tekst en opmaak gescheiden te houden, maar dat is helaas niet altijd mogelijk. Om een werkend geheel te krijg zul je toch echt her en der divs moeten nesten, en ook divs aanmaken voor het design. Denk bijvoorbeeld aan afrondingen, ronde hoeken..

Maar goed, mijn voorbeeld ging puur over geneste divs en classes met dezelfde namen
pi_50481259
quote:
Op vrijdag 15 juni 2007 11:29 schreef CraZaay het volgende:

[..]

Ja, en de andere titels ook headers van maken. De divs die je voor de titels gebruikt kunnen dan weg. De divs om je lists kunnen ook verdwijnenn. Je kunt in de CSS immers prima de elementen als referentie gebruiken: "#paneleft h2" en "#paneleft ul".

"paneleft" en "paneright" omschrijven de presentatie, en niet de structuur. Even aanpassen naar iets wat over de inhoud zegt dus

De tip van de dag is dus: structureer je pagina zo logisch mogelijk met de html elementen die je tot je beschikking hebt, en voeg eventueel later extra hooks toe als dat voor je design noodzakelijk is (vaak niet). Voor alles een div of span gebruiken is net zo erg als opmaak door middel van tabellen naar mijn mening. Headings, lists (unordered, ordered, definition), paragraphs, emphasis, e.d. zijn niet voor niets uitgevonden En zo hebben alternatieve user agents er ook nog iets aan (Google, visueel gehandicapten, mobile devices zonder CSS, etc)
Mja ik zat te twijfelen of hij daar nou h2's voor moet gebruiken.

Een algemene h2 met de tekst 'Menu' is prima, maar voor de onderverdeling van het menu zou ik een geneste UL of iets gebruiken. Met h2's kun je dan de content in stukken verdelen.
  vrijdag 15 juni 2007 @ 11:54:22 #10
12880 CraZaay
prettig gestoord
pi_50481379
quote:
Op vrijdag 15 juni 2007 11:36 schreef Geqxon het volgende:

[..]

Het zou perfect zijn om tekst en opmaak gescheiden te houden, maar dat is helaas niet altijd mogelijk. Om een werkend geheel te krijg zul je toch echt her en der divs moeten nesten, en ook divs aanmaken voor het design. Denk bijvoorbeeld aan afrondingen, ronde hoeken..

Maar goed, mijn voorbeeld ging puur over geneste divs en classes met dezelfde namen
Je hebt vrijwel altijd extra hooks nodig ja, maar veel minder dan de meeste mensen denken. Ik snap je vraag, en dezelfde namen zijn geen probleem, maar in jouw geval heb je zoveel nesting zeer waarchijnlijk helemaal niet nodig.

En er is een verschil tussen extra hooks toevoegen voor de opmaak en, zoals in jouw voorbeeld, gewoon helemaal geen structuur aangeven.
  vrijdag 15 juni 2007 @ 11:55:16 #11
12880 CraZaay
prettig gestoord
pi_50481408
quote:
Op vrijdag 15 juni 2007 11:50 schreef Bigs het volgende:

[..]

Mja ik zat te twijfelen of hij daar nou h2's voor moet gebruiken.

Een algemene h2 met de tekst 'Menu' is prima, maar voor de onderverdeling van het menu zou ik een geneste UL of iets gebruiken. Met h2's kun je dan de content in stukken verdelen.
Als je een h2 "menu" hebt en je hebt daaronder weer kopjes met een opsomming eronder, dan zijn dat dus h3's met lists imo
pi_50481485
quote:
Op vrijdag 15 juni 2007 11:55 schreef CraZaay het volgende:

[..]

Als je een h2 "menu" hebt en je hebt daaronder weer kopjes met een opsomming eronder, dan zijn dat dus h3's met lists imo
Dat geeft inderdaad wel minder rotzooi. Dan houden we het daar op Aan de slag Geqxon!
pi_50481622
quote:
Op vrijdag 15 juni 2007 11:30 schreef Geqxon het volgende:

[..]

Je margin-left en margin-right, wat gebeurt er als je dat vervangt door een:

"margin: 0 auto"

?
Als ik

1
2
3
4
5
6
  #wrapper {
    margin-left:           0 auto;
    margin-right:          0 auto;
    padding-bottom:        60px;
    width:                 620px;
  }


er van maak dan veranderd er niets. In Mozilla blijft hij het doen, in IE7 blijft de footer halverwege beginnen en vrolijk van het scherm aflopen... ;(
Iemand dood maken met een blije mus is nooit grappig...
  vrijdag 15 juni 2007 @ 12:12:30 #14
12880 CraZaay
prettig gestoord
pi_50481935
Dat zei 'ie niet "margin: 0 auto" is iets anders dan "margin-left: 0 auto"
pi_50481952
quote:
Op vrijdag 15 juni 2007 11:54 schreef CraZaay het volgende:

[..]

Je hebt vrijwel altijd extra hooks nodig ja, maar veel minder dan de meeste mensen denken. Ik snap je vraag, en dezelfde namen zijn geen probleem, maar in jouw geval heb je zoveel nesting zeer waarchijnlijk helemaal niet nodig.

En er is een verschil tussen extra hooks toevoegen voor de opmaak en, zoals in jouw voorbeeld, gewoon helemaal geen structuur aangeven.
Om een voorbeeld van mijn huidige pagina te geven:

[-] Een div om alles gecentreerd te krijgen, met daarin:

[-] [-] Een div gevuld met een slogan (het slogan is een image, de div heeft een padding)

[-] [-] Een menu-div, met daarin:
[-] [-] [-] Een balk-div, met daarin:
[-] [-] [-] [-] Meerdere button divs, allemaal gefloat, met een vaste breedte
[-] [-] [-] Een tweede balk-div, met daarin:
[-] [-] [-] [-] Gefloat meerdere onderdelen van de balk: Afgeronde linkerkant, balkdelen afgeronde rechterkant

[-] [-] Een midden-div, met daarin:
[-] [-] [-] Een gefloat linkermenu-div, met daarin:
[-] [-] [-] [-] Een div met de class "title" per onderdeel, en in een LI voor elk subitem
[-] [-] [-] Een slogan.
[-] [-] [-] Een div genaamd hoofdcontent
[-] [-] [-] Een div als verticale lijn links van de hoofdcontent
[-] [-] [-] Een div als verticale lijn rechts van de hoofdcontent
[-] [-] [-] Twee kleine afrondingshoekjes als div

[-] [-] Een div met het bedrijfslogo, die een top en left van nul hebben, en bovenaan de container plakt
  vrijdag 15 juni 2007 @ 12:32:53 #16
12880 CraZaay
prettig gestoord
pi_50482603
quote:
Op vrijdag 15 juni 2007 12:13 schreef Geqxon het volgende:

[..]

Om een voorbeeld van mijn huidige pagina te geven:
In html was het (voor mij) duidelijker geweest, maar dit quote wel makkelijker
quote:
[-] Een div om alles gecentreerd te krijgen, met daarin:
Prima, gebruik ik ook altijd.
quote:
[-] [-] Een div gevuld met een slogan (het slogan is een image, de div heeft een padding)
Kan prima als <h2> of <p> met een achtergrondafbeelding en de tekst middels css verborgen.
quote:
[-] [-] Een menu-div, met daarin:
Prima
quote:
[-] [-] [-] Een balk-div, met daarin:
<ul>
quote:
[-] [-] [-] [-] Meerdere button divs, allemaal gefloat, met een vaste breedte
<li> i.c.m. <a>
quote:
[-] [-] [-] Een tweede balk-div, met daarin:
[-] [-] [-] [-] Gefloat meerdere onderdelen van de balk: Afgeronde linkerkant, balkdelen afgeronde rechterkant
Prima op te lossen door deze als achtergrondafbeeldingen van de menu-div en balk-ul te gebruiken. Schaalt het nog prima mee ook.
quote:
[-] [-] Een midden-div, met daarin:
[-] [-] [-] Een gefloat linkermenu-div, met daarin:
Prima
quote:
[-] [-] [-] [-] Een div met de class "title" per onderdeel, en in een LI voor elk subitem
<h2> voor de titels, <ul> voor de items (zoals je al hebt)
quote:
[-] [-] [-] Een slogan.
<p>
quote:
[-] [-] [-] Een div genaamd hoofdcontent
Heb je die nodig? De inhoud komt automatisch rechts van de float immers.
quote:
[-] [-] [-] Een div als verticale lijn links van de hoofdcontent
[-] [-] [-] Een div als verticale lijn rechts van de hoofdcontent
[-] [-] [-] Twee kleine afrondingshoekjes als div
Lijnen aan de hoofdcontent-div hangen of als achtergrondafbeelding hiervan gebruiken (of als afbeelding aan de midden-div, als je de hoofdcontent-div laat vervallen. Of een combi met de lijnen aan de midden-div en de afrondingshoeken als achtergrond voor de hoofdcontent-div?
quote:
[-] [-] Een div met het bedrijfslogo, die een top en left van nul hebben, en bovenaan de container plakt
Roept om een <h1>

Ik zeg niet dat dit zaligmakend is en er leiden absoluut meerdere wegen naar Rome (en zonder grafisch ontwerp is het moeilijker te bepalen), maar zoveel hooks als jij gebruikt is naar mijn mening niet nodig.
pi_50482832
Bedankt voor het commentaar

Vergeet ik er wel bij te melden dat de website vrij grafisch is, en her en der het één en ander niet gelijk in een header kan, maar ik heb wel wat dingetjes overgenomen

De div genaamd hoofdcontent is bijvoorbeeld een losse div, omdat ik er dan een border om kan zetten, en rechts onderin de hoek een gefade achtergrond kan plaatsen.

Laatste puntje, alle moet dynamisch blijven. Ik kan dus veel met afbeeldingen met absolute waarde werken, maar dat gaat niet alles worden. Dan ben ik helaas aangewezen om veel met divs te "tekenen". Niet netjes, maar so far werkt het best goed

Nogmaal: Bedankt!
pi_50482878
Ik zit met een klein vaag iets. (stukje uit het vorige topic) maar er komt wat bij!



Ik wil graag de cijfers op 2 pixels van de top en 2pixels van rechts maar dit krijg ik niet voor elkaar. Ik heb van alles geprobeerd maar helaas....

Tevens wilde ik de div die in de stylesheet staat onderbrengen in .comment maar helaas krijg ik dan dat het nummer in de commentaarbox wegvalt die krijg ik dan helemaal niet meer te zien, en als ik deze dus laat staan zijn alle divs opeens position: relatieve;

Stylesheet
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
.comment {
    padding: 0; 
    margin-bottom: 20px; 
    height: 75px; 
    background-color: #d0c3ac; 
    border: 1px solid #c8b99e; 
    width; 90%;
}

.comment .big {
    position: absolute;
    top: 0;
    color: #d8cfbd;
    font-family: "Times New Roman", Times, serif;
    font-size: 77px;
    z-index: 10;
    margin: 0px;
    padding: 0px;
    padding-top: 0px;
    width: 100%;
    text-align: right;
}

.comment .body {
    padding: 5px;
    z-index: 10;
}

.comment .date   { 
    font-style: italic;
    font-size: 10px;
    display: inline;
    font-weight: bold;
}

.comment .author {
    font-size: 13px;
    padding: 0 0 2px 0;
    font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

div {
    position: relative;
}


Just say hi!
pi_50482945
En wat ik aan mijn ontwerp vergeet: Het is een template, en gaat uiteindelijk gevuld worden met HTML 4.0 tabelletjes die ranzig geindent zijn.

pi_50483627
quote:
Op vrijdag 15 juni 2007 12:12 schreef CraZaay het volgende:
Dat zei 'ie niet "margin: 0 auto" is iets anders dan "margin-left: 0 auto"
Oops

Nouja, hetzelfde resultaat. IE7 werkt nog steeds niet.
Iemand dood maken met een blije mus is nooit grappig...
pi_50486508
Thuis dit boek maar eens bestellen.
  vrijdag 15 juni 2007 @ 14:40:31 #22
12880 CraZaay
prettig gestoord
pi_50487422
quote:
Op vrijdag 15 juni 2007 12:40 schreef Geqxon het volgende:
Bedankt voor het commentaar

Vergeet ik er wel bij te melden dat de website vrij grafisch is, en her en der het één en ander niet gelijk in een header kan, maar ik heb wel wat dingetjes overgenomen

De div genaamd hoofdcontent is bijvoorbeeld een losse div, omdat ik er dan een border om kan zetten, en rechts onderin de hoek een gefade achtergrond kan plaatsen.

Laatste puntje, alle moet dynamisch blijven. Ik kan dus veel met afbeeldingen met absolute waarde werken, maar dat gaat niet alles worden. Dan ben ik helaas aangewezen om veel met divs te "tekenen". Niet netjes, maar so far werkt het best goed

Nogmaal: Bedankt!
Graag gedaan en het was absoluut opbouwend bedoeld. En inderdaad, in de gevallen dat er nog een achtergrond enzo nodig is heb je vaak meer divs nodig. Al combineer ik dat vaak door gewoon een afbeelding van 2000 pixels hoog maken met daarin (bijvoorbeeld) borders links en rechts en onderin de gradient. Positioneren op de bottom van de div en het werkt. Alleen te doen uiteraard wanneer je afbeeldingen er niet extreem groot door worden (iets groter dan normaal is geen probleem, aangezien afbeeldingen beter gecached worden dan de html). Qua dynamiek werkt het dan meestal ook prima.

Maar goed, erg situatie-afhankelijk inderdaad.
  vrijdag 15 juni 2007 @ 14:43:45 #23
12880 CraZaay
prettig gestoord
pi_50487529
quote:
Op vrijdag 15 juni 2007 14:16 schreef Geqxon het volgende:
Thuis dit boek maar eens bestellen.
Heel aardig boek. Misschien zal ik binnenkort eens wat book reviews schrijven, heb wel een stuk of 10 tot 15 boeken over html, css, javascript, accessibilty en usability die de moeite waard zijn.

edit: Deze kan ik ook zeker aanraden. Hierin staan veel html elementen waarvan je het bestaan niet wist of die je nooit gebruikt omdat je de betekenis niet kende. Zeker kopen als je je html skills wilt verbeteren (wat mij betreft eerst dat, en dan css).

En nog een tip: wanneer je 4 (engelstalige) boeken in 1 keer koopt kun je dat het beste bij Amazon doen (mits je een creditcard hebt). Het duurt dan wel 2 tot 3 weken, maar je bent bij 4 boeken dan al snel 40 euro goedkoper uit dan bij Bol.com (4 boeken, omdat anders de verzendkosten relatief te hoog zijn).

[ Bericht 38% gewijzigd door CraZaay op 15-06-2007 14:50:31 ]
pi_50493160
quote:
Op vrijdag 15 juni 2007 12:42 schreef Chandler het volgende:
Ik zit met een klein vaag iets. (stukje uit het vorige topic) maar er komt wat bij!

[afbeelding]

Ik wil graag de cijfers op 2 pixels van de top en 2pixels van rechts maar dit krijg ik niet voor elkaar. Ik heb van alles geprobeerd maar helaas....

Tevens wilde ik de div die in de stylesheet staat onderbrengen in .comment maar helaas krijg ik dan dat het nummer in de commentaarbox wegvalt die krijg ik dan helemaal niet meer te zien, en als ik deze dus laat staan zijn alle divs opeens position: relatieve;

Stylesheet
[ code verwijderd ]

Een wilde gok voor je eerste probleem: zet je line-height op 0, en dan met negatieve top en right totdat het goed staat.
pi_50496787
tnx super-muffin, dan nog alleen die andere vraag.

die div verneukt mijn layout, hoe kan ik deze div alleen maar gelden voor .comment (dit heb ik reeds geprobeerd maar dan zie ik de tekst niet meer)

vb http://www.gfxpoll.com/index.php?page=show&id=2021 en ga dan maar eens met de muis over het menu (gele) heen, dan sprint opeens de inhoud 10px naar links... als ik de div weghaal verdwijnt de nummering van de commentaar regels #1 #2 etc..

Just say hi!
abonnement bol.com Unibet Coolblue
Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')