[CSS] voor dummies - Deel 7

Index

» digital corner

actieve topics nieuwe topics
abonnement 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.
Steam - SC2
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!
pi_50500274
In welke browser is dat? Hier in IE6 ( ) is er niks aan de hand.
Steam - SC2
pi_50503241
IE 7 wel Helaas heb ik ook geen IE 6

Zo zie ik het nu (IE7 = fout)


Zo zou het moeten zijn (goed)


En dit is het resultaat van de

1
2
3		div {
     position: relative;
}
Just say hi!
pi_50512630
ik zit weer eens te klooien met divjes en css (minimaal aangezien ik er niet veel van kan...)
maar ik loop tegen een soort van margin probleem aan in IE7
zie hier de pagina (inclusief code) : http://home.mschol.eu/fok/index.html

1 ik zet alles in een container van 100% bij 100%, dan nog krijg ik in IE7/FF1.5 een witte rand eromheen.. kan dit worden opgelost of is dat onvermijdelijk?
2 wat ik ook probeer met de margin opties of padding opties, in IE7 staat tussen de left en center div een spatie ofzo.. hoe krijg ik die weg? (zodat ze naadloos opelkaar aansluiten?)


--edit--

eens bekeken in IE6 en ook daar heb ik het probleem van punt 2
iemand?

[ Bericht 8% gewijzigd door mschol op 16-06-2007 09:03:54 ]
pi_50512807
ik kan t effe niet vinden op w3schools, maar hoe krijg ik een tabel horizontaal gecentreerd?
0023
pi_50512830
align="center"
Just say hi!
pi_50513215
quote:
Op zaterdag 16 juni 2007 08:57 schreef Chandler het volgende:
align="center"
wel in css natuurlijk
0023
pi_50513440
style="text-align: center;"
Just say hi!
pi_50513494
quote:
Op zaterdag 16 juni 2007 10:07 schreef Chandler het volgende:
style="text-align: center;"
maar dat is enkel de tekst. Ik heb een pagina die bestaat uit tabellen,

table {

border-spacing:0px;
border-padding:0px;

}

daar wil ik die align tag tussen zodat ie centreert.
0023
pi_50514709
quote:
Op zaterdag 16 juni 2007 10:11 schreef ikJur het volgende:

[..]

maar dat is enkel de tekst. Ik heb een pagina die bestaat uit tabellen,

table {

border-spacing:0px;
border-padding:0px;

}

daar wil ik die align tag tussen zodat ie centreert.
margin-left: auto;
margin-right: auto;

Wel een doctype boven je html zetten zodat IE in standards mode werkt.
pi_50515200
quote:
Op zaterdag 16 juni 2007 11:28 schreef Bigs het volgende:

[..]

margin-left: auto;
margin-right: auto;

Wel een doctype boven je html zetten zodat IE in standards mode werkt.
hmm als ik dan een doctype erboven zet is heel het ontwerp verneukt.
0023
pi_50515997
quote:
Op zaterdag 16 juni 2007 11:52 schreef ikJur het volgende:

[..]

hmm als ik dan een doctype erboven zet is heel het ontwerp verneukt.
Dan wordt het tijd om je html/css kennis wat op te vijzelen en Firefox te installeren.
pi_50517086
quote:
Op zaterdag 16 juni 2007 08:33 schreef mschol het volgende:
ik zit weer eens te klooien met divjes en css (minimaal aangezien ik er niet veel van kan...)
maar ik loop tegen een soort van margin probleem aan in IE7
zie hier de pagina (inclusief code) : http://home.mschol.eu/fok/index.html

1 ik zet alles in een container van 100% bij 100%, dan nog krijg ik in IE7/FF1.5 een witte rand eromheen.. kan dit worden opgelost of is dat onvermijdelijk?
2 wat ik ook probeer met de margin opties of padding opties, in IE7 staat tussen de left en center div een spatie ofzo.. hoe krijg ik die weg? (zodat ze naadloos opelkaar aansluiten?)


--edit--

eens bekeken in IE6 en ook daar heb ik het probleem van punt 2
iemand?
??
hij klopt qua code wel volgens mij (W3 valideert em goed en in FF wordtie goed getoond..)
alleen in IE6/7 wordt tussen de center en left div een stukje van de containerdiv getoont?
pi_50517107
heeft niemand een oplossing voor mijn irritatie?

[CSS] voor dummies - Deel 7 en [CSS] voor dummies - Deel 7

Dit zou namelijk heel fijn zijn als het opgelost zou kunnen worden..
Just say hi!
pi_50517684
quote:
Op zaterdag 16 juni 2007 12:23 schreef Bigs het volgende:

[..]

Dan wordt het tijd om je html/css kennis wat op te vijzelen en Firefox te installeren.
heb em effe door de validator gehaald , bleken wat kleine foutjes in te zitten zoals een # vergeten voor een rgb-waarde en "px" vergeten bij de maten van tabellen.

nu werkt ie perfect: http://trimsalonpluto.nl/moneycats/
is een opdrachtje voor school
0023
pi_50519252
Tis alleen jammer van die achtergrond kleuren, of is dat ook de bedoeling?
Just say hi!
pi_50519471
quote:
Op zaterdag 16 juni 2007 14:27 schreef Chandler het volgende:
Tis alleen jammer van die achtergrond kleuren, of is dat ook de bedoeling?
je bedoelt als ie laad? ja dat zit er nog in omdat ik de tabellen altijd eerst allemaal aparte kleuren geef alvorens ik de slices erin stop. Te lui om eruit te halen
0023
pi_50519521
Iemand enig idee of UltraEdit32 toevallig ook in UltraEdit32 geprogrammeerd is?

Dat verklaard wel waarom het zo'n achterlijke kuteditor is.
pi_50522117
quote:
Op zaterdag 16 juni 2007 13:27 schreef ikJur het volgende:

[..]

heb em effe door de validator gehaald , bleken wat kleine foutjes in te zitten zoals een # vergeten voor een rgb-waarde en "px" vergeten bij de maten van tabellen.

nu werkt ie perfect: http://trimsalonpluto.nl/moneycats/
is een opdrachtje voor school
In Safari is ie volgens mij ook goed schreenshot
pi_50524634
quote:
Op zaterdag 16 juni 2007 16:54 schreef Bigs het volgende:

[..]

In Safari is ie volgens mij ook goed schreenshot
jups, prima heb hier trouwens thuis ook de beschikking over een mac

edit: die URL
0023
pi_50533659


Een div genaamd content, een div genaamd sidebar. In de sidebar drie divs, een afgeronde hoek boven, een div die enkel met kleur gevuld is, en een afgeronde hoek onder.

Nu wil ik de float net zo groot maken als de content waar hij naast staat, en daarbij het middelste vakje in de sidebar ook vullend. Kan dit? Misschien een soort van "clear" die ik over het hoofd zie?

Misschien moet ik maar een boek over "floats" aanschaffen
pi_50539642
Moeten het per se floats zijn? Ik zat aan zoiets te denken:

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		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
            
<html>
<head>
<title>Titel</title>
<style type="text/css">
#content {width: 800px; position: relative; padding: 8px 110px 8px 8px; background: yellow}
#sidebar {position: absolute; top: 0; bottom: 0; right: 0; width: 100px; background: green}
#boven {position: absolute; top: 0; width: 100%; background: yellow}
#midden {position: absolute; top: 0; bottom: 0; width: 100%; background: pink}
#beneden {position: absolute; bottom: 0; width: 100%; background: yellow}
</style>
</head>

<body>
<div id="content">
<p>Dit is de inhoud. Bladibladibla.</p>
<p>Dit is de inhoud. Bladibladibla.</p>
<p>Dit is de inhoud. Bladibladibla.</p>
<p>Dit is de inhoud. Bladibladibla.</p>
<p>Dit is de inhoud. Bladibladibla.</p>

<div id="sidebar">
 <div id="midden"></div>
 <div id="boven">Boven</div>
 <div id="beneden">Beneden</div>
</div>
</div>
</body>
</html>
pi_50544201
Dat zou ik kunnen doen, ware het niet dat absolute waarden niet gaan werken. Bottom: 0px en Top: 0px referrren namelijk naar de div waar dit vakje in staat. Ergo: De sidebar wordt net zo breed als het totale menu, en dus niet net zo breed als dit vakje. Dus ja, het moet met floats
  dinsdag 19 juni 2007 @ 11:09:33 #48
98312 Ewaldus
Save the cheerleader
pi_50607263
het gaat om het volgende :
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		#bodyAccessoiresLeftColumn h2 {
   color:#FF0000;
   font-size:12px;
   font-weight:bold;
   margin:24px 0pt;
   }

#bodyAccessoiresLeftColumn ul {
   margin:0 auto;
   padding:0 0 0 15px;
   list-style:none;
   line-height:16px;
   float:left;
   }
   
#bodyAccessoiresLeftColumn ul a {
   color:#FFFFFF;
   text-decoration:none;
   }

#bodyAccessoiresLeftColumn ul li {
   background:url(images/listBg.png) no-repeat;;
   width:132px;
   height:16px;
   padding:0 0 0 22px;
   margin:0pt 0pt 3px;
   }
   
#bodyAccessoiresLeftColumn ul li a img {
   border:none;
   float:right;
   }
   
.row {
   clear:both;
   width:400px;
   margin:0 auto;
   }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		   <div id="bodyAccessoiresLeftColumn">

      <div class="row">
         <ul>
            <h2>navigatie</h2>
            <li><a href="#">XE-345 STV<img src="images/meerInformatie.gif" /></a></li>
            <li><a href="#">TE-456 ANB<img src="images/meerInformatie.gif" /></a></li>
         </ul>
         
         <ul>
            <h2>speakers</h2>
            <li><a href="#">BRA-34Z<img src="images/meerInformatie.gif" /></a></li>
            <li><a href="#">BRA-36B<img src="images/meerInformatie.gif" /></a></li>
         </ul>
      </div>

hoe krijg ik het voor elkaar dat meerInformatie.gif rechts in de list komt?
Dus zo: http://www.ewaldvankampen.nl/upload/audio1.jpg
.
Als ik zorg dat de img float:right krijgt, komt hij te laag, en is het ontwerp niet meer zoals het zou moeten
niets
pi_50607375
Toch floaten, maar dan vertical-align: middle; aan de css van je img toevoegen.
  dinsdag 19 juni 2007 @ 11:25:19 #50
98312 Ewaldus
Save the cheerleader
pi_50607759
dan krijg je dus dit.
Terwijl er 2 UL's naast elkaar moeten staan e.d.
niets
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - Deel 7
Index

» digital corner

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