[CSS] voor dummies - Deel 7 | Digital Corner (DIG)

vrijdag 3 augustus 2007 @ 00:32:24 #101

DorentuZ

quote:
Op donderdag 2 augustus 2007 21:13 schreef Ewaldus het volgende:

[..]

je moet de div wel een breedte geven, als je dan margin: 0 auto geeft is het goed.
Dit geeft aan: margin-top: 0 (en tegenovergestelde ook want die is niet aangegeven) en margin-left en margin-right zijn auto.
als je semantisch code schrijft, bijv de margin en dan 4 waarden geeft (bijv. margin: 5px 10px 3px 15px;) dan is dat clockwise: top right bottom left.
Als je invult: margin: 5px 10px 3px; dan is de margin-left 10px, want dat is rechts ook.

Voor zover ik weet heeft een block-level element altijd een breedte van 100%. Dus je hoeft geen breedte mee te geven. De hoogte daarentegen heeft geen standaard waarde (of die is 0).

zaterdag 4 augustus 2007 @ 11:24:58 #102

CraZaay

prettig gestoord

quote:
Op vrijdag 3 augustus 2007 00:32 schreef DorentuZ het volgende:

[..]

Voor zover ik weet heeft een block-level element altijd een breedte van 100%. Dus je hoeft geen breedte mee te geven. De hoogte daarentegen heeft geen standaard waarde (of die is 0).

Een block-level element neemt de volledige breedte in, maar dan heb je dus niets aan "margin: 0 auto", omdat er dan niets te centreren valt

zaterdag 4 augustus 2007 @ 14:46:30 #103

Ewaldus

Save the cheerleader

quote:
Op zaterdag 4 augustus 2007 11:24 schreef CraZaay het volgende:

[..]

Een block-level element neemt de volledige breedte in, maar dan heb je dus niets aan "margin: 0 auto", omdat er dan niets te centreren valt

niets

maandag 6 augustus 2007 @ 11:25:33 #104

Darkomen

Ik heb een div, met de classname, 'entrybox' daarin staat een img, deze wil ik aanspreken zonder de link zelf een class of id te geven.

maandag 6 augustus 2007 @ 13:06:36 #105

SuperRembo

Sinds 1998

Als er 1 img in staat dan kan dat met "div.entrybox img", als er meer plaatjes in staan wordt het lastig / onmogelijk.

maandag 6 augustus 2007 @ 13:08:38 #106

Darkomen

gaat idd maar om 1 plaatje, had vanalles geprobeerd, maar geen spatie

Tnx

woensdag 15 augustus 2007 @ 20:08:30 #107

Chandler

Ik zit met het volgende.

Door een foutje in Firefox krijg ik het volgende niet werkend. Ik wil voor een website adsense (skyscraper) gaan gebruiken. Echter zit mijn complete website in een 'container' en deze is precies in het midden van de brouwser gepositioneerd. Nu wil ik graag aan de rechterkant (ongv 25 pixels vanaf de huidige 'container' de sky scraper plaatsen. Met de volgende code lukt dit in IE maar in Firefox staat hij links van de container en loopt een stukje in de container over!

1
2
3
4
5
6
7
8
9
10
11

body {
    width: 721px;
    margin: 15px auto;
    background: url(../../../layout/img/body_bg.gif) center top repeat-y;
}

#kop {
    width: 721px;
    height: 93px;
    background: url(../../../layout/img/kop_bg.gif) no-repeat;
}

en zo plaats ik het

1
2
3
4
5
6
7

<body>

<div id="ad"><div style="margin-top: 150px; border: 1px solid black; width: 200px; text-align: left;"><h3>test</h3></div></div>

<div id="kop">etc etc etc</div>

etc etc etc

Echter werkt dit dus niet in Firefox! hoe kan ik dit oplossen? CSS of een stukje javascript? :X

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 15 augustus 2007 @ 20:27:14 #108

DorentuZ

quote:
Op woensdag 15 augustus 2007 20:08 schreef Chandler het volgende:
Ik zit met het volgende.

Door een foutje in Firefox krijg ik het volgende niet werkend. Ik wil voor een website adsense (skyscraper) gaan gebruiken. Echter zit mijn complete website in een 'container' en deze is precies in het midden van de brouwser gepositioneerd. Nu wil ik graag aan de rechterkant (ongv 25 pixels vanaf de huidige 'container' de sky scraper plaatsen. Met de volgende code lukt dit in IE maar in Firefox staat hij links van de container en loopt een stukje in de container over!
[ code verwijderd ]

en zo plaats ik het
[ code verwijderd ]

Echter werkt dit dus niet in Firefox! hoe kan ik dit oplossen? CSS of een stukje javascript?

Absoluut positioneren?

woensdag 15 augustus 2007 @ 20:44:11 #109

Chandler

Ik vergat #ad nog

1
2
3
4
5
6
7
8
9

#ad {
width: 1000px; /* 200PX advertentie breedte */
position: absolute;
top: 0px;
left: 50%;
margin: 0px 0px 0px -400px;
z-index: 50;
text-align: right;
}

oftewel absoluut gepositioneerd :)

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 15 augustus 2007 @ 23:27:53 #110

Wouser

Even vraagje hoe zorg ik ervoor dat tekst 'dotted' onderstreept wordt?

donderdag 16 augustus 2007 @ 07:53:57 #111

Chandler

border-bottom: 1px dotted #kleur

of http://www.google.nl/search?hl=nl&sa=X&oi=spell&resnum=0&ct=result&cd=1&q=link+dotted+css&spell=1

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 16 augustus 2007 @ 10:31:35 #112

Wouser

<abbr title="Laughing Out Loud" style="border-bottom: 1px dotted #FF3333;">lol</abbr>

Werkt niet

? In IE7...

donderdag 16 augustus 2007 @ 10:38:53 #113

Geqxon

Dotted lines van 1px worden in IE6 overigens dashed.

donderdag 16 augustus 2007 @ 12:12:39 #114

Fliepke

Serieuze waarheid

Ik heb een navigatiemenu en in FF krijg ik voor ieder item, zo'n
>>
In IE komt dit niet voor.

Hoe zorg ik ervoor dat dit niet gebeurd in FF

(het gaat overigens om het standaard Wordpress thema )

donderdag 16 augustus 2007 @ 15:56:24 #115

Chandler

Heeft iemand nog een oplossing voor mijn probleempje?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 16 augustus 2007 @ 16:24:59 #116

DorentuZ

quote:
Op donderdag 16 augustus 2007 15:56 schreef Chandler het volgende:
Heeft iemand nog een oplossing voor mijn probleempje?

Geen idee of 't werkt, maar maak eens een container voor je hele site (om alles in 't midden te zetten, kan in dit geval ook de body zijn geloof ik). Die positioneer je relatief (gewoon position: relative; meegeven, niets anders). Vervolgens positioneer je de ad op (breedte container + afstand 'spacer')px vanaf de linkerkant.

Hoop dat 't te begrijpen is?

donderdag 16 augustus 2007 @ 17:00:13 #117

Chandler

Ik begrijp je! echter zit ik met een aantal beperkingen

Had gehoopt dat eventueel gebruik van javascript icm stylesheets een uitkomst zou kunnen bieden

bv

schermbreedte / 2 + helft van container + 20px = begin positie nieuwe container voor adsense

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 16 augustus 2007 @ 17:03:34 #118

Geqxon

quote:
Op donderdag 16 augustus 2007 17:00 schreef Chandler het volgende:
Ik begrijp je! echter zit ik met een aantal beperkingen

Had gehoopt dat eventueel gebruik van javascript icm stylesheets een uitkomst zou kunnen bieden

bv

schermbreedte / 2 + helft van container + 20px = begin positie nieuwe container voor adsense

Of je pakt de "left" attribuut van de container, en plakt daar 1050 pixels aan.

donderdag 16 augustus 2007 @ 17:35:00 #119

Chandler

Hoe zie je dat dan voor ogen? ook m.b.v. Javascript oid?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 16 augustus 2007 @ 20:11:16 #120

CraZaay

prettig gestoord

Gebruik geen javascript voor je lay-out, daar is het nog steeds niet voor bedoelt

donderdag 16 augustus 2007 @ 22:29:31 #121

Geqxon

quote:
Op donderdag 16 augustus 2007 20:11 schreef CraZaay het volgende:
Gebruik geen javascript voor je lay-out, daar is het nog steeds niet voor bedoelt

Ook niet als het onmogelijk is het cross-browser compatible te maken? Ik heb wel eens puntjes gehad waar ik zo gek van werd dat ik het met javascript gedaan heb.

Al waren dat wel kleinigheidjes, je Google Ads wil je niet in de mist zien gaan.

vrijdag 17 augustus 2007 @ 00:11:50 #122

Chandler

quote:
Op donderdag 16 augustus 2007 22:29 schreef Geqxon het volgende:

[..]

Ook niet als het onmogelijk is het cross-browser compatible te maken? Ik heb wel eens puntjes gehad waar ik zo gek van werd dat ik het met javascript gedaan heb.

Al waren dat wel kleinigheidjes, je Google Ads wil je niet in de mist zien gaan.

Dat heb ik dus ook

in IE ziet mijn oplossing er gewoon goed uit maar firefox doet weer eens 'te' standaard

The people who lost my respect will never get a capital letter for their name again.
Like trump...

vrijdag 17 augustus 2007 @ 08:19:09 #123

CraZaay

prettig gestoord

quote:
Op donderdag 16 augustus 2007 22:29 schreef Geqxon het volgende:

[..]

Ook niet als het onmogelijk is het cross-browser compatible te maken? Ik heb wel eens puntjes gehad waar ik zo gek van werd dat ik het met javascript gedaan heb.

Al waren dat wel kleinigheidjes, je Google Ads wil je niet in de mist zien gaan.

Wat mij betreft niet nee. Da's hetzelfde als toch nog even 1 dingetje met een tabel positioneren wat mij betreft.

Chandler, anderen hebben hetzelfde probleem gehad en dit ook gewoon met CSS opgelost vermoed ik. Verder Google'en dus

vrijdag 17 augustus 2007 @ 08:31:53 #124

Chandler

Dat heb ik dus gedaan maar kon niets vinden dat mij een bevredigend antwoord kon geven

The people who lost my respect will never get a capital letter for their name again.
Like trump...

dinsdag 16 oktober 2007 @ 16:07:25 #125

markiemark

FR 1908

tvptje! zocht hier laatst naar ;-)

Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..

zondag 18 november 2007 @ 22:41:10 #126

Chandler

Ik zit met een klein probleempje.

Code:

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

                    <div style="background-color: #%postbackcolor%;">
                        <div class="itembox" style="margin-bottom: 20px; background-color: #%postbackcolor%;">
                             <a href="/profile/%posterid%/%postername%.html">%postername%</a> <br />
                             op %postdate% <br />
                             %postericon%<br />
                             <a href="/forum/postedit/%postid%"><img src="/layout/images/forum/edit.gif" border="0"></a>
                             <a href="/forum/postreply/%topicid%/%postid%"><img src="/layout/images/forum/quote.gif" border="0"></a>
                             <a href="/profile/%posterid%/%postername%.html" rel="nofollow"><img src="/layout/images/forum/profile.gif" border="0"></a>
                             <a href="/catch/images/user/%postername%" rel="nofollow"><img src="/layout/images/forum/fish.gif" border="0"></a>
                        </div>
                        <div class="itemlongbox" style="background-color: #%postbackcolor%;">
                              %posttext%
                        </div>
                    </div>

UItkomst in HTML

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

<div style="background-color: #ebfbff;">
                        <div class="itembox" style="margin-bottom: 20px; background-color: #ebfbff;">
                             <a href="/profile/1/Eric Bruggema.html">Eric Bruggema</a> <br />
                             op 0-0-0000 @ 0:00 <br />
                             <img class="foto" src="/cache/profiles/1.jpg" width="100" alt="gebruikers foto" /></a><br />
                             <a href="/forum/postedit/82"><img src="/layout/images/forum/edit.gif" border="0"></a>
                             <a href="/forum/postreply/14/82"><img src="/layout/images/forum/quote.gif" border="0"></a>
                             <a href="/profile/1/Eric Bruggema.html" rel="nofollow"><img src="/layout/images/forum/profile.gif" border="0"></a>
                             <a href="/catch/images/user/Eric Bruggema" rel="nofollow"><img src="/layout/images/forum/fish.gif" border="0"></a>
                        </div>
                        <div class="itemlongbox" style="background-color: #ebfbff;">
                              <blockquote><font size="1" face="verdana, arial, helvetica">quote:</font><hr><b>Op 18-11-2007 @ 13:11 schreef Eric Bruggema het volgende: </b><br />
Whaha<hr></blockquote><br />
<br />
Topf!
                        </div>
                    </div>

Dit is een stukje voor mijn forum, nu wil ik graag de achtergrond een bepaalde kleur geven (bv ieder oneven post) maar nu wil ik doen middels een divje (geen tabellen gebruiken dus) maar als ik de eerste DIV voor background-color wil gebruiken krijg ik dit niet voor elkaar.

Zie afbeelding:

(en vooral letten op de 'aanwijzers

')

Ik hoop dat iemand mij kan vertellen wat ik fout doe!

[ Bericht 33% gewijzigd door Chandler op 18-11-2007 22:44:54 (meer info) ]

The people who lost my respect will never get a capital letter for their name again.
Like trump...

zondag 18 november 2007 @ 23:28:18 #127

CraZaay

prettig gestoord

En de relevante CSS? Ik gok dat 'itembox' en 'itemlongbox' een 'float' of 'position: absolute' property hebben, waardoor ze uit de flow gehaald worden en de buitenste DIV daarom geen hoogte meer heeft.

En doe je URL's (zoals "/catch/images/user/Eric Bruggema") eens even lekker encoderen (en maak je HTML eens netjes door die icoontjes gewoon in de CSS te zetten)

En als je dan toch bezig bent: die URL's zou ik lekker formatteren d.m.v. een helperfunctie, als je URL's dan anders worden hoef je ze alleen in die helper aan te passen.

zondag 18 november 2007 @ 23:30:09 #128

CraZaay

prettig gestoord

-dubbel-

maandag 19 november 2007 @ 09:31:48 #129

Chandler

@CraZaay; je hebt helemaal gelijk; ze worden idd uit de flow gehaald maar hoe kan ik deze dan toch laten omvatten door de 'onderliggende' div?

En ja ik moet nog een hoop werk verrichten m.b.t. SEO

en CSS optimalisatie maar ben nog maar net begonnen met het forum

The people who lost my respect will never get a capital letter for their name again.
Like trump...

maandag 19 november 2007 @ 10:27:23 #130

CraZaay

prettig gestoord

Daar zijn verschillende opties voor, allemaal makkelijk te vinden

maandag 19 november 2007 @ 10:41:15 #131

Bigs

Volgens mij werkt het in dit geval wel als je je buitenste div 'overflow: auto;' geeft. Zo niet dan zet je onderaan in je buitenste div een element met clear: both;

maandag 19 november 2007 @ 11:01:55 #132

Chandler

@CraZaay; makkelijk te vinden idd, in een post onder jou post

@Bigs; die overflow werkte idd. En clear both had ik al gebruikt voor het eindigen van de 'float' maar vriendelijk bedankt voor je kennis

Nu probeer ik mijn forum code te optimaliseren maar lukt iets niet

css

1
2
3
4
5

.postEdit {
    background: url('/layout/images/forum/edit.gif') no-repeat;
    width: 18px;
    height: 13px;
}

dan krijg ik dit te zien

met html

1	<a class="postEdit" href="/forum/postedit/%postid%" title="Bewerk bericht">b</a>

Nu snap ik niet waarom de afbeeldingen er zo 'raar' uitzien en hoe ik de tekst (tenzij de afbeelding niet geladen kan worden) kan laten verdwijnen!

[ Bericht 69% gewijzigd door Chandler op 19-11-2007 11:24:07 ]

The people who lost my respect will never get a capital letter for their name again.
Like trump...

maandag 19 november 2007 @ 16:17:24 #133

CraZaay

prettig gestoord

Heb je je link wel "display: block" gegeven? Het is standaard een inline element, en die hebben geen definieerbare breedte/hoogte.

maandag 19 november 2007 @ 22:40:46 #134

Chandler

dat had ik inderdaad vergeten

wat een stomme fout, is er trouwens ook een mogelijkheid om de tekst van deze a href onzichtbaar te maken? zodat het wel te indexeren is voor een searchengine of anders dat je wel de tekst ziet als de CSS niet geladen kon worden?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

dinsdag 20 november 2007 @ 10:28:17 #135

CraZaay

prettig gestoord

Iets opzoeken doet geen pijn, maar goed:

text-indent: -9999px;
overflow: hidden;

dinsdag 20 november 2007 @ 10:50:50 #136

Chandler

Ik heb gezocht maar weet vaak niet hoe je bepaalde zaken benoemd!

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 21 november 2007 @ 11:17:57 #137

Trigalti

Doet maar wat!

Ik ben gister al de hele middag bezig geweest naar een oplossing te zoeken, maar krijg het niet voor mekaar.. Moet wel vermelden dat ik pas gister begonnen ben met me in CSS te verdiepen, wilde gewoon wel eens weten hoe ik een website in elkaar draai.
Het volgende:

Het zit dus zo: Het menu bestaat uit een div, daar zitten een aantal plaatjes in, die plaatjes zijn allemaal links. In Firefox zitten de plaatjes gewoon aan elkaar geplakt, gebruik de float functie in CSS. In IE daarentegen, zitten er grote ruimtes tussen de plaatjes, en wordt het laatste plaatje helemaal niet weergeven (wel in de broncode).

Hier mijn css script:

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

body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #EDEDED;
   background-color: #505050;
   margin: 0px;
   padding: 0px;
   text-align: center;
}

html, body {
height: 100%; /* héél belangrijk */
}

/* Alle fonts */

p {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: EDEDED;
   text-align: left;
}

.geen_border {
   border: 0px ;
   padding: 0px;
   marging: 0px;
}

/* ALLE DIVS */

#inhoud {

   background-color: 373737;
   position: relative;
   margin: 0px auto;
   padding:0px;
   width: 700px;
   height: 100%;
}

#header {
   position: absolute;
   top: 0px;
   left: 16px;
   height: 124px;
   width: 667px;
   background-image: url(plaatjes/header.jpg);
}

/* Het complete menu */

#menu {
   background-color: #000000;
   position: absolute;
   left: 0px;
   top: 124px;
   height: 24px;
   width: 667px;
   float: left;
}

img   {
float: left;
border-style: none;
padding: 0px;
margin: 0px;
}

/* Tekstvak */

#tekst {
   background-color: #3C3C3C;
   position: absolute;
   left: 16px;
   top: 148px;
   height: 82.4%;
   width: 667px;
}

/* Einde alle DIV's*/

------------------

woensdag 21 november 2007 @ 14:32:43 #138

Trigalti

Doet maar wat!

Heb al een andere oplossing gevonden.. Afbeelding in 1 deel gehouden, en er met behulp van een <li> systeem in css tekst onder gezet, dus onzichtbare links gemaakt onder de afbeelding welke ieder een grootte hebben van zoveel * zoveel pixels, en wat margin aan de linkerkant.

------------------

vrijdag 14 december 2007 @ 11:08:55 #139

De_Hertog

Aut bibat, aut abeat

Ik wil een tabel een blokje achtergrond per regel geven. Oftewel: de achtergrond moet van links naar rechts de hele div vullen, maar van boven naar beneden moet er steeds een lijntje tussen zitten. Helaas werkt margin en padding niet op regels van een tabel afzonderlijk, en als ik display:block doe treedt precies het omgekeerde effect op. Hoe kan ik de regels afzonderlijk een vullende achtergrond geven?

Mary had a little lamb
Then Mary had dessert

donderdag 20 december 2007 @ 13:15:52 #140

Geqxon

Is het mogelijk om een two-column layout te maken, zonder gebruik van DIVs te maken? Op het moment heb ik dus twee div's, en mede omdat de tekst halverwege een zin naar de tweede kolom gaat vind ik dit er niet uit zien..

donderdag 20 december 2007 @ 13:30:27 #141

Bigs

quote:
Op donderdag 20 december 2007 13:15 schreef Geqxon het volgende:
Is het mogelijk om een two-column layout te maken, zonder gebruik van DIVs te maken? Op het moment heb ik dus twee div's, en mede omdat de tekst halverwege een zin naar de tweede kolom gaat vind ik dit er niet uit zien..

Alleen met CSS3 of -mozilla extensies.. voorlopig nog niet dus.

http://developer.mozilla.org/en/docs/CSS3_Columns

donderdag 20 december 2007 @ 13:38:17 #142

Geqxon

Jammer. Dit is natuurlijk niet doodzonde, maar het was wel leuk geweest. Bedankt voor je antwoord.

dinsdag 8 januari 2008 @ 12:54:40 #143

Geqxon

Het voelt haast als een helpdesk aan, maar toch weer een leuke uitdaging: Een nette tagcloud.

De HTM zoals ik het gebruik:

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

<ul class="cloud">
   <li class="pop_1"><a href="#">Adithada</a></li>
   <li class="pop_1"><a href="#">Aikido</a></li>
   <li class="pop_1"><a href="#">Akroteri Punching</a></li>
   <li class="pop_3"><a href="#">Arnis</a></li>
   <li class="pop_1"><a href="#">Bafaquan</a></li>
   <li class="pop_1"><a href="#">Baguazhang</a></li>
   <li class="pop_4"><a href="#">Bajiquan</a></li>
   <li class="pop_1"><a href="#">Bak Mei</a></li>
   <li class="pop_1"><a href="#">Bando</a></li>
   <li class="pop_3"><a href="#">Banshay</a></li>
   <li class="cloudcloser"> </li>
</ul>

Dit is een simpele unordered list, zodat ik het in dit gedeelte zo strak als mogelijk kan maken, en ik met CSS alle vrijheid heb om er leuk me te kunnen spelen.

Het CSS gedeelte zoals ik dat dusfar geschreven heb:

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

.cloud{
   width: 100%;

   margin: 0px;
   padding: 0px;

   border: 1px #808080 dashed;
}

.cloud li{
   height: 25px;
   float: left;

   margin: 5px;

   white-space: nowrap;
   line-height: 25px;

   list-style-type: none;
}

   .cloud li.pop_5{
      font-size: 1.7em;
      font-weight: bold;
   }

   .cloud li.pop_4{
      font-size: 1.7em;
   }

   .cloud li.pop_3{
      font-size: 1.3em;
   }

   .cloud li.pop_2{
      font-size: 1.0em;
   }

   .cloud li.pop_1{
      font-size: 0.8em;
   }

   .cloud li.cloudcloser{
      height: 0px;
      float: none;
      clear: left;

      font-size: 0em;
   }

Ik gebruik op het moment een "cloudcloser" om te zorgen dat de unordered list niet 0px hoog is, in verband met het feit dat alle list-elements floaten. Naar mijn mening niet netjes, zou dit anders kunnen?

dinsdag 8 januari 2008 @ 14:09:10 #144

Bigs

Volgens mij biedt ook hier de overflow: auto; truuk weer uitkomst (die eigenschap toevoegen aan je .cloud klasse).

dinsdag 8 januari 2008 @ 14:14:07 #145

super-muffin

Een overflow: auto doet de truuk inderdaad.

Overigens is een tagcloud niet echt een lijst.

de .cloudcloser zou je ook nog een clear: both kunnen mee geven inplaats van left.

Steam - SC2

dinsdag 8 januari 2008 @ 14:15:28 #146

wobbel

Da WoBBeL King

Ik heb de volgende situatie:

1
2
3
4
5

<div id="wrap">

<div id="bottom">deze moet altijd onderaan komen</div>

</div>

Hoe zorg ik er nu voor dat div "bottom" altijd helemaal onderaan komt van div "wrap"?

Dus zo:

Blauw is "wrap", rood is "bottom"

Hosted VoIP SIP trunks Vast mobiel VoIP

dinsdag 8 januari 2008 @ 14:20:03 #147

super-muffin

1
2
3
4
5
6
7
8

#wrap {
   position: relative;
}

#bottom {
  position: absolute;
  bottom: 0;
}

Uit m'n hoofd. :)

Steam - SC2

dinsdag 8 januari 2008 @ 14:22:40 #148

wobbel

Da WoBBeL King

quote:
Op dinsdag 8 januari 2008 14:20 schreef super-muffin het volgende:

[ code verwijderd ]

Uit m'n hoofd.

werkt niet...dan komt ie op de bodem van de pagina

[ Bericht 3% gewijzigd door wobbel op 08-01-2008 14:41:04 ]

Hosted VoIP SIP trunks Vast mobiel VoIP

dinsdag 8 januari 2008 @ 14:26:33 #149

Geqxon

quote:
Op dinsdag 8 januari 2008 14:09 schreef Bigs het volgende:
Volgens mij biedt ook hier de overflow: auto; truuk weer uitkomst (die eigenschap toevoegen aan je .cloud klasse).

Bedankt, nooit geweten dat een "leeg" object vol met floaters zo makkelijk als dit "passend" te maken is. Bijpassend is het ook erg fijn dat mijn tagcloud nu meegroeit als ik in bijvoorbeeld Firefox inzoom.

quote:
Op dinsdag 8 januari 2008 14:14 schreef super-muffin het volgende:
Een overflow: auto doet de truuk inderdaad.
Overigens is een tagcloud niet echt een lijst.

de .cloudcloser zou je ook nog een clear: both kunnen mee geven inplaats van left.

Als data zie het zelf als een lijst met items, waarbij ik met de opmaak er iets leuk aan toevoeg. Wanneer iemand dan geen CSS gebruikt ziet hij het als een simpel lijstje met linkjes. Dat is handig voor screenreaders en dergelijken.

donderdag 10 januari 2008 @ 10:07:35 #150

donroyco

dus niet Donroyco

Zijn er nu twee topics

[CSS] voor dummies - Deel 7

Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(

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

[CSS] voor dummies - Deel 7

» digital corner

» digital corner