Toon posts:

[CSS]margin-right en positie vraag

Pagina: 1
Acties:
  • 231 views sinds 30-01-2008
  • Reageer

woensdag 12 april 2006 16:36

Acties:

Verwijderd

Topicstarter
Ik probeer een layout te maken met alleen CSS.

Ik heb het volgende gemaakt:
PHP:
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

<body>
<div id="wrapper">
    <div id="navigation">
            <ul>
                <li><a href="#">standbouw</a></li>
                <li><a href="#">decoratie</a></li>
                <li><a href="#">verhuur</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </div>
    <div id="content">
        [img]"1.jpg"[/img]</img />
    </div>
    <div id="headerselectors">
        <ul>
            <li>standbouw</li>
        </ul>
    </div>
    <div id="selectors">
        <ul>
            <li>[img]"thumb1.jpg"[/img]</img /></li>
            <li>[img]"thumb1.jpg"[/img]</img /></li>
            <li>[img]"thumb1.jpg"[/img]</img /></li>
            <li>[img]"thumb1.jpg"[/img]</img /></li>
            <li>[img]"thumb1.jpg"[/img]</img /></li>
            <li>[img]"thumb1.jpg"[/img]</img /></li>
            <li>[img]"thumb1.jpg"[/img]</img /></li>
            <li>[img]"thumb1.jpg"[/img]</img /></li>
        </ul>
    </div>  
</div>
</body>


Met deze CSS
PHP:
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

/* CSS Document */
html, body {
    margin-top: 25px;
    padding: 0;
    background-color: #000;
    }
#wrapper {
    position: relative;
    width: 723px;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
    }

/* navigation */
#navigation {
    width: 723px;
    font-family: Arial, Helvetica, sans-serif;
    }
#navigation  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
#navigation li {
    border-bottom: 1px solid #000;
    background-color: #FFF;
    font-size: 11px;
    font-weight: bold;
    }
#navigation li a:link, #navigation li a:visited {
    display: block;
    color: #000;
    text-decoration: none;
    padding-left: 104px;
    }
#navigation li a:hover {
    display: block;
    background-color: #EFEFEF;
    text-decoration: none;
    }

/* content */
#content {
    margin-top: 20px;
    width: 723px;
    height: 366px;
    }

/* headerselectors */
#headerselectors {
    margin-top: 25px;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFF;
    }
#headerselectors ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
#headerselectors li {
    border-bottom: 1px solid #FFF;
    border-left: 90px solid #FFF;
    padding-left: 14px;
    }   

/* selectors */
#selectors ul {
    list-style-type: none;
    margin-left: 0px;
    padding-left: 0px;
}
#selectors li {
    float: left;
    margin-bottom: 50px;
    color: #333333;
    margin-right: 13px;
}
#selectors img {
    display: block;
}

Ik heb 2 problemen waarvan ik niet snap hoe ik dit kan aanpakken:

1:
Dat is dit stukje:
PHP:
1
2
3
4
5

    <div id="headerselectors">
        <ul>
            <li>standbouw</li>
        </ul>
    </div>

Wanneer ik dit niet in de wrapper div plaats wordt het weergeven zoals het moet volgens de bijhorende css.
Wanneer ik hem plaats in de wrapper div zoals boven aangegeven worden de borders niet weergeven in IE maar in FF wel.
Ik snap niet hoe dit kan?

2:
Ik wilde graag de plaatjes in de div selectors met zijn 4-en naast elkaar komen.
Dit gebeurt nu ook alleen heb ik een margin right van 13px ingesteld.
Ik zou graag willen dat de margin right bij het 4de plaatje op 0 staat zodat het linker plaatjes aan de kantlijn staat en het rechter plaatje ook.

Ik heb hier 2 links:

http://www.wens.speedxs.nl/index.html
http://www.wens.speedxs.nl/index2.html

Alvast bedankt voor enige input.

woensdag 12 april 2006 18:50

Acties:

Verwijderd

Topicstarter
ik ben er inmiddels acher dat als je position: relative; in de wrapper weghaald het probleem opgelost is.
alleen snap ik niet waarom?

en nog geen oplossing voor het plaatjes probleem?

woensdag 12 april 2006 19:03

Acties:
  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

Als je de plaatjes naast elkaar wil hebben kan je denk ik een stuk beter ze allemaal op float: left; zetten. Zie ook deze testcase (oud). Waarom gebruik je overigens niet [code=css] en [code=html] in plaats van [php] :? .

[ Voor 3% gewijzigd door JHS op 12-04-2006 19:03 ]

DM!

woensdag 12 april 2006 19:28

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 20-02 09:40

Sappie

De Parasitaire Capaciteit!

Verwijderd schreef op woensdag 12 april 2006 @ 16:36:
1:
Dat is dit stukje:
PHP:
1
2
3
4
5

    <div id="headerselectors">
        <ul>
            <li>standbouw</li>
        </ul>
    </div>

Wanneer ik dit niet in de wrapper div plaats wordt het weergeven zoals het moet volgens de bijhorende css.
Wanneer ik hem plaats in de wrapper div zoals boven aangegeven worden de borders niet weergeven in IE maar in FF wel.
Ik snap niet hoe dit kan?
IE wil je soms ook niet snappen. Waarschijnlijk los je dit wel op door op het bewuste list item (waarvan ik overigens niet begrijp dat je die in een ul zet) ook 'position: relative' toe te passen. Bovendien zie ik niet in waarom je je wrapper in jouw geval uberhaupt 'position: relative' geeft. Je positioneert immers niets absoluut ten opzichte van je wrapper.
2:
Ik wilde graag de plaatjes in de div selectors met zijn 4-en naast elkaar komen.
Dit gebeurt nu ook alleen heb ik een margin right van 13px ingesteld.
Ik zou graag willen dat de margin right bij het 4de plaatje op 0 staat zodat het linker plaatjes aan de kantlijn staat en het rechter plaatje ook.
Dan zul je aan elke laatste li (die je plaatjes bevatten) in de rij een margin-right van 0 moeten toekennen (door elke 4e li een bepaalde class te geven en die in je css te stylen bijvoorbeeld). Op een andere manier is dat (nog) niet mogelijk. Verder heeft JHS's voorbeeld 'last' van IE's double margin bug en is dat niet exact wat de TS bedoelt denk.

Als laatste nog wat tips:

- Je gebruikt op dit moment veel overbodige div's. De div's met id "navigation", "content", "headerselectors" en "selectors" kun je namelijk net zo goed weglaten om vervolgens de id's aan het enige element wat zich in die div bevindt toe te kennen.

- Het ontbreekt nog aan enige logische structuur in je html. Structuur die je normaal gesproken aanbrengt door middel van het gebruik van headings. Headings zoals je die ook gebruikt wanneer je een (fatsoenlijk) rapport oid op zou stellen.

Verder was het opstellen van een testcase voor ons wel ff handiger geweest om je probleem te analyseren in plaats van het gewoon neerplempen van je hele code :)

[ Voor 7% gewijzigd door Sappie op 12-04-2006 19:29 ]

Specs | Audioscrobbler

woensdag 12 april 2006 20:35

Acties:
  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

Sappie schreef op woensdag 12 april 2006 @ 19:28:
[...] Verder heeft JHS's voorbeeld 'last' van IE's double margin bug en is dat niet exact wat de TS bedoelt denk.
Ik begreep ook eerlijkgezegd niet zoveel van het verhaal. De double margin bug is natuurlijk omheen te werken met een iefix.css met halve margins :) .

DM!

woensdag 12 april 2006 23:48

Acties:

Verwijderd

Topicstarter
Ik zag code css en html niet staan in het rijtje.
Dit is mijn eerste css site.
Ik heb een boek gekocht CSS Anthology 101 essential tips.
Hier staan handige dingen in alleen niet voor wat je soms zou willen.
Maar dat zal vaak het geval zijn.

Ik zet die list item in een ul, simpelweg omdat dit ook in het boek stond.
Ik vroeg me eigenlijk al af waarom?
Maar dat zou dus niet hoeven?
Wordt de code een stuk kleiner.

Ik ga eens proberen om de ID in de ul te plaatsen, althans dat is denk ik wat je bedoelt?

donderdag 13 april 2006 00:16

Acties:

Verwijderd

Topicstarter
dit zou het toch moeten doen?
Cascading Stylesheet:
1
2
3
4

.margin0 {
    margin-right: 0px;
    padding-right: 0px;
    }


HTML:
1

<li class="margin0">[img]"thumb1.jpg"[/img]</img /></li>


Alleen gebeurt er niks.

p.s.

Ik dacht juist dat ik het goed bedacht had om alles in een div te zetten zodat je deze delen aan het uit kon zetten om bijvoorbeeld een adere div met andere content te laden.

Maar jullie denken dus van niet?

[ Voor 61% gewijzigd door Verwijderd op 13-04-2006 00:23 ]

donderdag 13 april 2006 06:37

Acties:
  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

Verwijderd schreef op donderdag 13 april 2006 @ 00:16:
Ik dacht juist dat ik het goed bedacht had om alles in een div te zetten zodat je deze delen aan het uit kon zetten om bijvoorbeeld een adere div met andere content te laden.

Maar jullie denken dus van niet?
Je kan ook net zo goed een ul met een id selecteren en op onzichtbaar zetten:
HTML:
1
2
3
4
5
6
7
8
9
10
11

<div id="nav">
  <ul>
    <li>Bla
  </ul>
</div>

<!-- versus -->

<ul id="nav">
  <li>Bla
</ul>
Cascading Stylesheet:
1
2
3

div#nav { display: none; } 
/* Versus */
ul#nav { display: none; }
Die div heeft in deze dus geen enkele meerwaarde, en zou alleen gebruikt moeten worden voor het groeperen van andere zaken :) .

DM!

donderdag 13 april 2006 09:32

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:32

crisp

Devver

Pixelated

JHS schreef op woensdag 12 april 2006 @ 20:35:
[...]
Ik begreep ook eerlijkgezegd niet zoveel van het verhaal. De double margin bug is natuurlijk omheen te werken met een iefix.css met halve margins :) .
Of beter: met een display:inline; op je floating element ;)
Verwijderd schreef op donderdag 13 april 2006 @ 00:16:
HTML:
1

<li class="margin0"><img src="thumb1.jpg" width="166" height="122"></img /></li>
Ah, je hebt de juiste code-tag gevonden ;)
Rood-onderlijnt duidt een fout aan in je syntax :)

Intentionally left blank

vrijdag 28 april 2006 11:19

Acties:

Verwijderd

Topicstarter
heb het als volgt opgelost:

HTML:
1
2
3
4
5
6
7
8

<li style="padding-right:19px;">[img]"thumb1.jpg"[/img]</li>
<li style="padding-right:19px;">[img]"thumb1.jpg"[/img]</li>
<li style="padding-right:20px;">[img]"thumb1.jpg"[/img]</li>
<li>[img]"thumb1.jpg"[/img]</li>
<li style="padding-right:19px;">[img]"thumb1.jpg"[/img]</li>
<li style="padding-right:19px;">[img]"thumb1.jpg"[/img]</li>
<li style="padding-right:20px;">[img]"thumb1.jpg"[/img]</li>
<li>[img]"thumb1.jpg"[/img]</li>
Pagina: 1
Reageer

Apple iPhone 17 LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2026 • Hosting door TrueFullstaq