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

donderdag 2 februari 2006 @ 14:35:41 #176

DutchBlood

-editje-

[ Bericht 96% gewijzigd door DutchBlood op 02-02-2006 14:45:49 ]

zaterdag 4 februari 2006 @ 21:41:16 #177

DutchBlood

Ik ben bezig met de volgende pagina:
http://www.altijdlente.net/webdesign/portfolio/
Ik heb een container voor de content. Daarin staat het menu. Wanneer ik nu echter een andere div, bijvoorbeeld iets wat lijkt op een tabel in die content-container plaats komen de randen achter het menu door.

Heeft er iemand enig idee hoe ik dit op kan lossen?

zaterdag 4 februari 2006 @ 21:55:03 #178

SuperRembo

Sinds 1998

Waarom geef je een div display: table-cell: (en dan ook nog een dubbele punt aan het eind)

Je stylesheet eindigd me di, ontbreekt daar niet iets

Ik denk dat er een margin-left van ongeveer 200px ontbreekt op de content div.

zaterdag 4 februari 2006 @ 22:29:18 #179

DutchBlood

quote:
Op zaterdag 4 februari 2006 21:55 schreef SuperRembo het volgende:
Waarom geef je een div display: table-cell: (en dan ook nog een dubbele punt aan het eind)
Je stylesheet eindigd me di, ontbreekt daar niet iets

Ik denk dat er een margin-left van ongeveer 200px ontbreekt op de content div.

Danku, margin-left van 250px deed het.

.

zaterdag 4 februari 2006 @ 23:12:07 #180

SuperRembo

Sinds 1998

Ik snap die div met display: table-cell nog niet. Wat wil je daar me bereiken?

zaterdag 4 februari 2006 @ 23:16:43 #181

DutchBlood

quote:
Op zaterdag 4 februari 2006 23:12 schreef SuperRembo het volgende:
Ik snap die div met display: table-cell nog niet. Wat wil je daar me bereiken?

Ik had \\\'m er in eerste instantie neergezet om die content div naast het menu te krijgen. Maar nu blijkt het zonder ook te werken...

Had ik nog een vraagje:
Als ik een afbeelding hebt, kan ik daar dan op een makkelijke manier de tekst linksbovenaan in een regel krijgen? Met een display:inline komt ie namelijk onderaan te staan.
En een float:left zorgt er weer voor dat de afbeelding op een of andere manier buiten de border valt.

zondag 5 februari 2006 @ 23:02:18 #182

DutchBlood

Heeft er iemand nog toevallig de stylez.css van mijn site van gisteren in zijn temporary internet files staan?

zondag 5 februari 2006 @ 23:22:40 #183

SuperRembo

Sinds 1998

Bedoel je deze?

maandag 6 februari 2006 @ 08:45:55 #184

DutchBlood

quote:
Op zondag 5 februari 2006 23:22 schreef SuperRembo het volgende:
Bedoel je deze?

Danku, danku!

.

vrijdag 10 februari 2006 @ 15:10:20 #185

papernote

Een echte.

Ik maak nog gebruik van een <marquee> op mijn site. Deze tag is echter niet toegestaan door de HTML validator van het W3C.

Deze geeft aan dat ik het effect moet bereiken door middel van CSS. Ik heb gezocht, maar ik kan geen CSS code vinden die dit doet.

Weet iemand het soms?

Schuimpje... mijn liefste. Verlaat mij nimmer weer...

vrijdag 10 februari 2006 @ 15:16:08 #186

Berkery

Fat bastard

Als je persé een scrollende tekst wilt hebben moet je gewoon marquee gebruiken, met CSS kan dit niet, met DHTML zal dit wel kunnen. Maar waarom moeilijk doen? Zelfs FF snapt <marquee>, en je krijgt heus niet de W3C politie op je dak.

No Dukes of Hazzard in the classroom

woensdag 1 maart 2006 @ 10:18:42 #187

Chandler

Ik ben bezig met de volgende; een layout zonder images ed, voor het realiseren van een projectje van mij. Echter is de layout in FF/IE totaal anders... en kan maar niet voor elkaar krijgen dat ze identiek er uit zien. De menu's zijn groter (hoger) in FF en in FF heb ik geen spacing onder 'onderdelen' die ik in IE wel heb

iemand een idee?

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

<!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="en" xml:lang="en">
<head>

    <title>test</title>
    <style type="text/css">

    * { font-family: Verdana; font-size: 13px;}
    h1 { font-size: 24px; border-bottom: 3px solid gray; margin-bottom: 5px;}
    h2 { font-size: 16px; padding-bottom: 5px; padding-top: 5px; }
    html { background: white;}
    body { margin: 0 auto; padding: 30px; background: #ddd; border-left: 1px solid gray; border-right: 1px solid gray;}
    #container { width: 600px; border-bottom: 3px solid gray;}

    #navcontainer { margin: 0; padding: 0; height: 22px; font: 13px Verdana, sans-serif; width: 100%; border-bottom: 1px solid #bbb; list-style-type: none; }
    #navlist li a#current:hover { border-bottom: 3px solid #f90; background: #eee; }
    #navlist li { float: left; margin: 0; padding: 0; width: auto; display: block; }
    #navlist li a, #navlist li a:link { font: 13px Verdana, sans-serif; color: #555; text-decoration: none; padding: 3px 5px 3px 5px; display: block; }
    #navlist li a:hover { font: 13px Verdana, sans-serif; color: #039; border-bottom: 3px solid #bbb; cursor: pointer; background: #eee; }
    #navlist li a#current, #navlist li a#current:link { color: #000; cursor: default; font-weight: bold; border-bottom: 3px solid #999; }

    #subcontainer { margin: 0; padding: 0; height: 15px; font: 9px Verdana, sans-serif; width: 100%; border-bottom: 1px solid #bbb; list-style-type: none; }
    .sublist ul { list-style-type: 0; }
    .sublist li, .sublist li a { list-style-type: none; text-decoration: none; color: gray; font: 9px Verdana, sans-serif; font-weight: bold; height: 15px; float: left; padding-top: 2px; padding-right: 10px;}
    .sublist li a:hover { color: black; list-style-type: none; text-decoration: none; }

    select { border: 1px solid gray; font: 9px Verdana, sans-serif; width: 250px; }
    .f_input { border: 1px solid gray; font: 9px Verdana, sans-serif; width: 250px;}
    .f_radio { border: 1px solid gray; width: 20px; }
    .f_check { border: 1px solid gray: width: 20px; }
    button { border: 1px solid gray; font: 9px Verdana, sans-serif; width: 250px; }
    textarea { border: 1px solid gray; width: 250px; height: 150px; }

    p { padding-left: 10px; padding-right: 10px; }
    .left { width: 200px; float: left; }
    .break { clear: both; }
    </style>

    <script language="javascript" type="javascript/text">
    </script>
</head>
<body>

    <div id="container">
        <h1>HEX2PHP Archive builder v2.0</h1>
        <div id="navcontainer">
            <ul id="navlist">
                <li id="active"><a href="#" id="current">Home</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Installer settings</a></li>
                <li><a href="#">Installer data</a></li>
                <li><a href="#">Help</a></li>
            </ul>
        </div>
        <div id="subcontainer">
            <ul class="sublist">
                <li><a href="#">Settings</a></li>
                <li><a href="#" id="current">Disclamer</a></li>
                <li><a href="#">Function checks</a></li>
            </ul>
        </div>
        <div id="subcontainer">
            <ul class="sublist">
                <li><a href="#" id="current">Files and paths</a></li>
                <li><a href="#">MySQL (database)</a></li>
            </ul>
        </div>

        <div id="home">

        </div>

        <div id="settings">

            <h2>Settings</h2>

            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse tortor lorem, pellentesque quis, tristique id, iaculis eu, augue. Sed aliquet, enim a gravida mollis, pede mauris commodo nunc, in mollis eros mauris et urna. Cras adipiscing. Praesent viverra rutrum purus. Aliquam scelerisque vehicula nisi. Duis at libero. In ornare interdum mi. Aenean eget dolor pulvinar enim commodo tempus. Nulla facilisi. In et libero. Donec nonummy, tortor eu dapibus tempus, lorem dui lobortis nunc, at sodales mi metus vel leo. </p>

            <div class="left">Pulldown optie</div>
            <div class="left">
                <select><option value="kut">Whahahahahahahaha</option></select>
            </div>
            <div class="break"></div>

            <div class="left">Input veld</div>
            <div class="left">
                <input class="f_input" type="text" name="test" value="invoerveld" />
            </div>
            <div class="break"></div>

            <div class="left">Button</div>
            <div class="left">
                <input class="f_input" type="button" name="test" value="Button" />
            </div>
            <div class="break"></div>

            <div class="left">Radio</div>
            <div class="left">
                Yes <input class="f_radio" type="radio" name="test" value="Button" />
                No <input class="f_radio" type="radio" name="test" value="Button" />
            </div>
            <div class="break"></div>

            <h2>Profiles</h2>

            <div class="left">Check</div>
            <div class="left">
                Yes <input class="f_check" type="checkbox" name="test" value="Button" />
                No <input class="f_check" type="checkbox" name="test" value="Button" />
            </div>
            <div class="break"></div>

            <div class="left">Textarea</div>
            <div class="left">
                <textarea name="input">tralalala</textarea>
            </div>
            <div class="break"></div>
        </div>
    </div>
</body>
</html>

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

woensdag 1 maart 2006 @ 13:37:09 #188

Tijn

Powered by MS Paint

Ik ben een kneus met CSS. Ik zit er altijd mee te kutten. Zo ook vandaag.

Wat ik wil maken is een site met deze structuur.

Wat ik zou willen is dat als de sidebar wat korter uitvalt het er zo uitziet en dat als de sidebar wat langer uitvalt het er zo uitziet.

Het lukt me echter niet. Ik krijg steeds constructies die er zo of zo uitzien.

Ik heb geprobeerd te werken met de sidebar en de content als float:right en float:left. Ik heb ook absolute plaatsing geprobeerd. Maar het blijft kut.

Kan iemand me uitleggen hoe ik het wèl moet aanpakken?

Verberg de nieuwsticker

woensdag 1 maart 2006 @ 13:59:31 #189

Autoreply

Wat is het bezwaar tegen tabellen?

BMW R 1100 GS

woensdag 1 maart 2006 @ 14:01:34 #190

Tijn

Powered by MS Paint

quote:
Op woensdag 1 maart 2006 13:59 schreef Autoreply het volgende:
Wat is het bezwaar tegen tabellen?

Wat mij betreft niets, maar ik dacht dat dat uit den boze was

Verberg de nieuwsticker

woensdag 1 maart 2006 @ 14:16:57 #191

SuperRembo

Sinds 1998

@Tijn:
Zet de content en sidebar divs beide in de main div. Zet net voor het einde van de main div een div met alleen clear:both.

woensdag 1 maart 2006 @ 14:20:15 #192

Litpho

quote:
Op woensdag 1 maart 2006 13:37 schreef Tijn het volgende:
Kan iemand me uitleggen hoe ik het wèl moet aanpakken?

Zoiets?

[ Bericht 85% gewijzigd door Litpho op 01-03-2006 14:22:11 (kut IE) ]

"If you are depressed you shouldn't be in C major!" - Rick Beato

woensdag 1 maart 2006 @ 14:21:33 #193

Tijn

Powered by MS Paint

quote:
Op woensdag 1 maart 2006 14:16 schreef SuperRembo het volgende:
@Tijn:
Zet de content en sidebar divs beide in de main div. Zet net voor het einde van de main div een div met alleen clear:both.

Geniaal! Het werkt!

Maar is zo'n oplossing niet een lapmiddel? Of is er gewoon geen manier om dit goed te krijgen zonder onzichtbare divs te maken?

Verberg de nieuwsticker

woensdag 1 maart 2006 @ 14:25:08 #194

SuperRembo

Sinds 1998

Misschien kan je in jouw geval de footer ook in de main div zetten en dan de clear:both op de footer.

woensdag 1 maart 2006 @ 14:30:18 #195

Tijn

Powered by MS Paint

Dat zou inderdaad ook wel werken. Maar dat vind ik qua structuur niet zo'n goeie oplossing. Ik ga me dan geheid een keer afvragen wat die dubbele </div> onderaan doet en haal het dan weg

Dan doe ik het liever met de onzichtbare div.

Maar dit is wel waarom ik zo'n moeite met CSS heb, zelfs voor simpele dingen die voor m'n gevoel heel clean zouden moeten kunnen, moet je rare bokkensprongen maken.

Verberg de nieuwsticker

woensdag 1 maart 2006 @ 16:21:16 #196

Chandler

Ik ben ook een kneus met css, maar gaat steeds iets beter... maar Sr, heb je geen idee wat er fout gaat bij mij?

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

woensdag 1 maart 2006 @ 17:26:49 #197

SuperRembo

Sinds 1998

Er zitten iig 2 kleine foutjes in je css.
Verder zullen de verschillen die je tussen IE en FF ziet wel komen door de verschillende box models (zie bijv quirksmode.org)

quote:
1. In the W3C box model, the width of an element gives the width of the content of the box, excluding padding and border.
2. In the traditional box model, the width of an element gives the width between the borders of the box, including padding and border.

Je geeft vaak de breedte (of hoogte) van een element en ook een border of padding. Daardoor zie je de verschillen.

Je gebruikt ook meerdere keren dezelfde id, terwijl een id uniek moet zijn. Daardoor werkt je "current" style niet goed. (Dat gaat ook in IE fout)

donderdag 2 maart 2006 @ 17:47:34 #198

Piles

Ik heb van deze site een menu gehaald, en het werkt perfect. Op 1 ding na.
Ik heb een aantal "hoofditems" naast elkaar, maar als het browser venster te smal word voor het totale menu, dan springt het laatste blokje naar de volgende regel. En dan werkt je menu niet meer zo lekker

Hoe zorg ik dat de hoofditems altijd naast elkaar blijven staan, en dat er dan gewoon een horizontale scrollbar komt. Ik heb al wat geprobeer met nowrap, en een div er omheen, maar dat werkt niet

Misschien dat jullie een oplossing weten?

vrijdag 3 maart 2006 @ 11:04:18 #199

Desdinova

Olaa

ik denk dat je moet kijken naar je float

As a rule, I never touch anything more sophisticated and delicate than myself.

vrijdag 3 maart 2006 @ 11:12:18 #200

Roonaan

Strictly

quote:
Op woensdag 1 maart 2006 14:21 schreef Tijn het volgende:
Geniaal! Het werkt!

Maar is zo'n oplossing niet een lapmiddel? Of is er gewoon geen manier om dit goed te krijgen zonder onzichtbare divs te maken?

De enige manier om te zorgen dat opvolgende content onder je floats begint is om een element te plaatsen dat geen floats dult aan een van beide of beide kanten.
Daarvoor kan je een lege clearing-div gebruiken zoals SR, of de clear-both toe te voegen aan je opvolgende content-element.

Verders is het zo dat floatende content de container div niet opstretchen in de hoogte. Om te zorgen dat je container toch de complete floats omvat kan je dat oplossen door te eindigen met een non-floating element; deze stretchen vervolgens je container wel op.

Omdat er vaak container divs zijn die enkel floatende elementen bevatten wordt weer de clearing-div gebruikt. Met of zonder content maakt eigenlijk niet uit, zolang je hij maar niet float :-)

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

[CSS] voor dummies - Deel 3

» digital corner

» digital corner