[CSS] voor dummies - deel 13 | Digital Corner (DIG/DEV)

maandag 5 oktober 2009 @ 19:37:02 #76

Roy_T

quote:
Op maandag 5 oktober 2009 19:12 schreef Swetsenegger het volgende:

Dus je denkt dat de gemiddelde commerciele ontwikkelaar voor 5 linkjes liever een stuk css ontwikkeld dan gewoon 5 linkjes achter elkaar zet als er geen 'knop' idee noodzakelijk is? Ik denk van niet en ik geef 'm groot gelijk.

Sterker nog: dat weet ik wel zeker.

maandag 5 oktober 2009 @ 19:40:49 #77

Light

quote:
Op maandag 5 oktober 2009 12:53 schreef woopehh het volgende:
Weet er iemand trouwens wel een manier om het zonder quirksmode aan te zetten voor elkaar te krijgen? Liever wat hackjes dan dat of tabellen/frames :p

Daar zijn wel oplossingen voor. Even uit m'n hoofd: html en body een height: 100% meegeven. De container waar de site in moet komen ook een height: 100% en een margin-bottom van min de footerhoogte. Als laatste elementen in de container zet je een clearfooter (met dezeflde hoogte als de footer) en de footer zelf. De clearfooter moet voorkomen dat er tekst door de footer kan lopen (vanwege de negatieve margin-bottom van de container).

Height zou ook min-height kunnen zijn, dat weet ik niet zeker meer. Als je menu en content een andere achtergrond wilt geven, moet je eens zoeken op faux columns.

--
Oh, ik lees nu dat de content-div een scrollbalk moet krijgen bij teveel tekst. Punt 1, dat wil je niet.
Als je het toch doet, zul je waarschijnlijk naar javascript moeten grijpen om de hoogte van de content-div in te stellen. Met alleen css ga je dat niet redden, voor zover ik weet althans.

fokstok.nl

FOK!-Schrikkelbaas maandag 5 oktober 2009 @ 20:11:14 #78

Swetsenegger

Egocentrische Narcist

quote:
Op maandag 5 oktober 2009 19:37 schreef Roy_T het volgende:

[..]

Sterker nog: dat weet ik wel zeker.

Tja das fijn. Ik heb andere ervaringen. Wat wil je nu bereiken met dit soort stupide oneliners?

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

FOK!-Schrikkelbaas maandag 5 oktober 2009 @ 20:18:26 #79

Swetsenegger

Egocentrische Narcist

quote:
Op maandag 5 oktober 2009 19:31 schreef snkr-xxx het volgende:
Voordat HTML 5 overal ondersteund wordt zijn we wel weer een tijdje verder..
Al werk ik nu ook niet in HTML 4 maar in XHTML 1 dus waarschijnlijk ga ik eerder over op XHTML 2.

Ik persoonlijk ben gewoon iemand die er van houdt net werk af te leveren, dus ik werk graag semantisch en met Doctype Strict en alles ook valid. Maar goed, ik ben hiervoor opgeleid, heb hier plezier in en mijn werkgever hecht hier ook erg veel waarde aan.
Moet zeggen dat als bijv front enden je beroep is, dat dit toch echt wel aspecten zijn die een hedendaagse werkgever van je verwacht hoor. Je zal er raar van opkijken.

Semantiek is simpelweg voor interpretatie vatbaar. En een website hooft echt niet semantisch correct te zijn om te valideren.

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

maandag 5 oktober 2009 @ 21:25:40 #80

woopehh

quote:
Op maandag 5 oktober 2009 19:40 schreef Light het volgende:

[..]

Daar zijn wel oplossingen voor. Even uit m'n hoofd: html en body een height: 100% meegeven. De container waar de site in moet komen ook een height: 100% en een margin-bottom van min de footerhoogte. Als laatste elementen in de container zet je een clearfooter (met dezeflde hoogte als de footer) en de footer zelf. De clearfooter moet voorkomen dat er tekst door de footer kan lopen (vanwege de negatieve margin-bottom van de container).

Height zou ook min-height kunnen zijn, dat weet ik niet zeker meer. Als je menu en content een andere achtergrond wilt geven, moet je eens zoeken op faux columns.

--
Oh, ik lees nu dat de content-div een scrollbalk moet krijgen bij teveel tekst. Punt 1, dat wil je niet.
Als je het toch doet, zul je waarschijnlijk naar javascript moeten grijpen om de hoogte van de content-div in te stellen. Met alleen css ga je dat niet redden, voor zover ik weet althans.

Nog een reden die ik aan kan dragen voor het niet willen van die scrollbalk? (Het is niet voor mezelf)

maandag 5 oktober 2009 @ 21:39:40 #81

n8n

Pragmatisch

quote:
Op maandag 5 oktober 2009 11:58 schreef woopehh het volgende:
Iemand enig idee hoe ik dit voor alle browsers (IE<6 hoeft niet) voor elkaar krijg? (zonder quirksmode)

[ afbeelding ]

Het kan wel:

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Work in progress.</title>
   <link rel="stylesheet" href="default.css" type="text/css" media="screen"/>
</head>

<body>

   <div id="header">



   </div>

   <div class="navigation container">

      <div id="navigation">

         <ul>
            <li>Optie 05</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>

            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>

            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>

            <li>Optie 01</li>
            <li>Optie 01</li>
            <li>Optie 01</li>
         </ul>



      </div>
   </div>

   <div class="content container">

      <div id="content">

         <p>
         Horem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
         <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
         <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>

         <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>

      </div>
   </div>

   <div id="footer">



   </div>

</body>

</html>

CSS

/* RESET CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0 none;
   font-weight: inherit;
   font-style: inherit;
   font-size: 100%;
   line-height: 1.6;
   font-family: inherit;
   text-align: left;
   vertical-align: baseline;
}

a img, :link img, :visited img {
   border: 0 none;
}

ol, ul {
   list-style: none;
}

a {
   text-decoration: none;
   border: 0 none;
}

body {
   font-family: Helvetica, Arial;
   font-size: 62.5%;
}

/* DIV BASICS */

body {
   height: auto;
   width: 100%;
   background: yellow;
}

#header {
   height: 200px;
   width: 100%;
   background: black;
   position: fixed;
   background: red;
   z-index: 5;
}

#navigation, #content {
   width: 100%;
   height: auto;
   position: absolute;
   margin: 200px 0 0 0;
   padding: 0 0 20px 0;
   z-index: 0;
}

.navigation, .content {
   height: auto;
   position: absolute;
}

.navigation {
   width: 25%;
   margin: 0 75% 0 0;
}

.content {
   width: 75%;
   margin: 0 0 0 25%;
}

#footer {
   background: green;
   height: 20px;
   width: 100%;
   position: fixed;
   top: 100%;
   margin: -20px 0 0 0;
}

/* DIV SPECIFICS */

#content {

}

/* ETC. */

Getest onder Safari 4, Opera 10 & Firefox 3.5
^{En ja ik gebruik een reset css maar dat is een andere discussie}

“Specialization is for insects”.—Robert Heinlein

maandag 5 oktober 2009 @ 22:15:55 #82

Dhr.Donder

quote:
Op maandag 5 oktober 2009 21:39 schreef n8n het volgende:

[..]

Het kan wel:

[ afbeelding ]
[ code verwijderd ]

Getest onder Safari 4, Opera 10 & Firefox 3.5
^{En ja ik gebruik een reset css maar dat is een andere discussie}

Tip: open 'm niet met IE. En al helemáál niet met IE6. Scheelt je een hoop frustraties.

maandag 5 oktober 2009 @ 22:20:03 #83

n8n

Pragmatisch

quote:
Op maandag 5 oktober 2009 22:15 schreef Dhr.Donder het volgende:

[..]

Tip: open 'm niet met IE. En al helemáál niet met IE6. Scheelt je een hoop frustraties.

Trekken 7 en 8 'm ook niet dan, want dat is wel zorgelijk

“Specialization is for insects”.—Robert Heinlein

dinsdag 6 oktober 2009 @ 10:27:57 #84

n8n

Pragmatisch

Kan iemand trouwens ff een screenshot onder IE7/8 produceren? Heb er nu zelf geen mogelijkheid toe en ben wel benieuwd

“Specialization is for insects”.—Robert Heinlein

dinsdag 6 oktober 2009 @ 10:44:49 #85

Dhr.Donder

quote:
Op dinsdag 6 oktober 2009 10:27 schreef n8n het volgende:
Kan iemand trouwens ff een screenshot onder IE7/8 produceren? Heb er nu zelf geen mogelijkheid toe en ben wel benieuwd

is browsershots.org down dan?

dinsdag 6 oktober 2009 @ 10:51:39 #86

n8n

Pragmatisch

quote:
Op dinsdag 6 oktober 2009 10:44 schreef Dhr.Donder het volgende:

[..]

is browsershots.org down dan?

Kan op mijn eigen computer niet van internet gebruik maken en op deze geen website hosten, mede omdat de ftp-poort geblokkerd is

“Specialization is for insects”.—Robert Heinlein

dinsdag 6 oktober 2009 @ 11:12:39 #87

Roy_T

quote:
Op maandag 5 oktober 2009 20:11 schreef Swetsenegger het volgende:

Tja das fijn. Ik heb andere ervaringen. Wat wil je nu bereiken met dit soort stupide oneliners?

Jij stelt een vraag, ik geef antwoord. Validatie is gewoon overrated; ik kan een site bouwen met tabellen waar Google e.d. niets mee kunnen en die prima valideert. Maar dat is nog geen reden om het te doen.

Semantiek is zoveel meer belangrijker dan validatie, etc. Als je dat niet wilt snappen, prima. Dan hoef ik verder niet uit te leggen waar HTML voor is (betekenis geven aan data, niet de weergave ervan op een grafische manier).

dinsdag 6 oktober 2009 @ 11:41:07 #88

Dhr.Donder

quote:
Op dinsdag 6 oktober 2009 11:12 schreef Roy_T het volgende:

Dan hoef ik verder niet uit te leggen waar HTML voor is (betekenis geven aan data, niet de weergave ervan op een grafische manier).

...En dan toch doen heh..

dinsdag 6 oktober 2009 @ 13:37:19 #89

woopehh

quote:
Op maandag 5 oktober 2009 22:15 schreef Dhr.Donder het volgende:

[..]

Tip: open 'm niet met IE. En al helemáál niet met IE6. Scheelt je een hoop frustraties.

Haha ja het was dus wél de bedoeling dat het in ie6 zou werken

dinsdag 6 oktober 2009 @ 13:43:36 #90

Dhr.Donder

quote:
Op dinsdag 6 oktober 2009 13:37 schreef woopehh het volgende:

[..]

Haha ja het was dus wél de bedoeling dat het in ie6 zou werken

Dan ook een tip voor jou: maak je site zo dattie perfect werkt in standard-compliant browsers en IE7 en IE8, en zorg dat'ie in IE6 opzich wel bruikbaar, maar heb schijt aan glitches en layout-imperfecties.

woensdag 7 oktober 2009 @ 21:56:45 #91

Banzaiaap

Tony Rocky Horror

Verdorie, dacht dat ik wel wat wist van CSS maar het schiet hier nu een beetje te kort.

http://youtubehd.banzaidesign.nl

De box rechtsonderin, met de "Want to Share?" header erboven, zit naar beneden verschoven. Why?

Niet in IE getest, dus gewoon lekker in Firefox of Safari openen.

FOK!-Schrikkelbaas woensdag 7 oktober 2009 @ 22:29:19 #92

Swetsenegger

Egocentrische Narcist

quote:
Op dinsdag 6 oktober 2009 11:12 schreef Roy_T het volgende:

[..]

Jij stelt een vraag, ik geef antwoord.

Retorische vragen ontgaan je blijkbaar.

quote:
Validatie is gewoon overrated; ik kan een site bouwen met tabellen waar Google e.d. niets mee kunnen en die prima valideert. Maar dat is nog geen reden om het te doen.

Dat was dan ook geen punt van mij

quote:
Semantiek is zoveel meer belangrijker dan validatie, etc. Als je dat niet wilt snappen, prima.

Wijs me even aan waar ik precies zeg dat semantiek uberhaupt NIET belangrijk is? Ik zeg dat semantiek
a. voor interpretatie vatbaar is
b. je door kan slaan in je semantische dwangneurose.

quote:
Dan hoef ik verder niet uit te leggen waar HTML voor is (betekenis geven aan data, niet de weergave ervan op een grafische manier).

En als jij niet wil snappen dat het gewoon voor kan komen dat je 5 linkjes achter elkaar zet omdat je... 5 linkjes nodig hebt zonder dat je daar een lijst omheen gaat bouwen INCLUSIEF css omdat ik anders simpelweg 5 linkjes onder elkaar krijgt in plaats van naast elkaar zoals het bedoeld was hoef ik je niet uit te leggen dat er zoiets bestaat als rendement.

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

donderdag 8 oktober 2009 @ 02:32:41 #93

Dhr.Donder

quote:
Op woensdag 7 oktober 2009 21:56 schreef Banzaiaap het volgende:
Verdorie, dacht dat ik wel wat wist van CSS maar het schiet hier nu een beetje te kort.

http://youtubehd.banzaidesign.nl

De box rechtsonderin, met de "Want to Share?" header erboven, zit naar beneden verschoven. Why?

Niet in IE getest, dus gewoon lekker in Firefox of Safari openen.

Omdat #sidebar ul in de weg staat.

Had je deze nog niet?

donderdag 8 oktober 2009 @ 10:09:12 #94

Banzaiaap

Tony Rocky Horror

quote:
Op donderdag 8 oktober 2009 02:32 schreef Dhr.Donder het volgende:

[..]

Omdat #sidebar ul in de weg staat.

Had je deze nog niet?

Okee even kijken, die heb ik wel hoor, maar zelfs daarmee kon ik het niet vinden..

maandag 12 oktober 2009 @ 17:38:33 #95

Banzaiaap

Tony Rocky Horror

Hmm, waarom krijgt de OL in de comments div geen hoogte door de content die er in zit?

http://youtubehd.banzaidesign.nl/gymkhana-awesome/

Hij collapsed nu gewoon die hele div..

maandag 12 oktober 2009 @ 17:43:38 #96

Roy_T

Zonder te kijken: je zal de li's vast floaten

maandag 12 oktober 2009 @ 17:50:32 #97

Dhr.Donder

quote:
Op maandag 12 oktober 2009 17:38 schreef Banzaiaap het volgende:
Hmm, waarom krijgt de OL in de comments div geen hoogte door de content die er in zit?

http://youtubehd.banzaidesign.nl/gymkhana-awesome/

Hij collapsed nu gewoon die hele div..

Omdat je alle elementen uit de natuurlijke float haalt.

element met clear:both eronder knallen, of de parent overflow:hidden geven, heeft als side-effect het zelfde resultaat.

maandag 12 oktober 2009 @ 21:26:32 #98

Banzaiaap

Tony Rocky Horror

Gelukt!!

Nu nog die crossbrowser rommel opruimen. Ik durf em niet eens in Internet Explorer te openen.

dinsdag 13 oktober 2009 @ 10:31:11 #99

Banzaiaap

Tony Rocky Horror

Ik klop hier nog maar een keer aan. Laatste keer, hopelijk. Als je op de pagina van een video kijkt, zijn alle div's niet opgevuld in de achtergrond. Dit gebeurt sowieso in IE 7.

http://www.youtubehd.nl/2009/10/8-bit-trip/

dinsdag 13 oktober 2009 @ 12:06:31 #100

LeeHarveyOswald

Weet iemand waarom met onderstaande code, mijn <div id='top'> niet gewoon blijft zweven bovenin?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#top {
   display: block;
   position: fixed;
   top: 10px;
   left: 10px;
   height: 40px;
   z-index: 999;
   background-color: red;
   border:1px solid black;

   }

#content {
    Position: relative;
}

mijn "top" div scrolled nu gewoon mee, en dat is niet de bedoeling :P

Op mijn blackberry gaat dit wel goed, onder Chrome wisselend, en in IE8 doet hij het niet .. De website is voor mobiele layout, dus enkel IE die niet mee werkt is geen ramp.

Ah, en de zwevende balk "trilt" bij het scrollen op mn blackberry, is dat te verhelpen? :) Alvast dank!

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

[CSS] voor dummies - deel 13

» digital corner

» development

» digital corner

» development