[CSS] Algemene vragen: boxes, margin, padding, positions

[Verwijderd]

Ben dus bezig met een pagina, met daarin CSS, de pagina is opgedeeld in een aantal delen. Allemaal vlakken over een achter grond.

Header, Content en menus. Links en rechts menus/vlakken. Een menu/vlak onderdeel bestaat uit een kopvlak en een vlak met de items.

Nu kunnen er 2 menus onder elkaar komen. Hoe zorg ik nu dat die positie relatief is van het bovenliggend menu?

ik heb al lopen klooten met margin enzo, het is iets kleins maar ik kom er niet uit.
Ook het ancestor parent en child gedeelte is erg lastig.

www.mieras.org/css_test/
Hier staat de opzet, hoop dat iemand die gouden tip/css code heeft

[Dark Blue]

Misschien is het handig als je een site over CSS gaat doorlezen, daarop staat vaak precies aangegeven waarvoor padding en margin bedoeld zijn. Ik weet het ook niet altijd maar opzoeken is dan de beste methode.
Hier: http://www.w3schools.com/css/
Hier: http://css.pagina.nl/ <-- een door de bomen het bos niet meer zien site, sorry

Ik snap dat je hier graag een groot topic met algemene vragen van wilt maken, maar de search biedt je al een hoop oplossingen - want serieus, ik wil je graag helpen maar je vragen zijn waarschijnlijk al gesteld.

zoekwoorden voor de search zijn dus css, positionering, al je margins paddings en andere termen... topics die snel zijn gesloten bevatten soms in de sluitpost nog een handige link naar een topic wat direct antwoord op de gestelde vraag geeft.

Succes!

[ Voor 9% gewijzigd door Dark Blue op 12-07-2004 15:30 ]

[Verwijderd]

Verwijderd schreef op 12 juli 2004 @ 15:04:
Nu kunnen er 2 menus onder elkaar komen. Hoe zorg ik nu dat die positie relatief is van het bovenliggend menu?

Door 'm in een DIV te zetten welke deel uitmaakt van het bovenste menu

Padding = 'bekleding', oftewel aan de binnenkant. Margin=kantlijn, oftewel aan de buitenkant.


als ik een blokje maak, is het zeg maar zo:

code:

     margin
   +---------+
   | padding |
 m |p       p| m
 a |a       a| a
 r |d       d| r
 g |d       d| g
 i |i       i| i
 n |n       n| n
   |g       g|
   | padding |
   +---------+
     margin

[ Voor 3% gewijzigd door Verwijderd op 12-07-2004 15:15 ]

[Verwijderd]

Ik weet het, alles is ook al geweest, maar dan toch net niet

Heb ook al wat doorgezocht, maar op 'de' sites, w3 htmlhandleiding etc. Staat het zo enorm beknopt, en de ene term volgt de ander alweer op. Zodat je na een stukje lezen meestal met nog meer vragen zit dan je al zat.

Maar DIV's in DIV's is dus de truuk? Volgens mij had ik dat ook al gedaan, maar dan krijg je dus problemen met margins en paddings..

http://www.thenoodleincident.com/

Dit vind ik trouwens een erg relaxte site.

[Verwijderd]

Ik zie niet in hoe je dan problemen moet krijgen met padding en margin?

Als ik bv dit doe:

code:

<div>mijnmenu
  <div>mijnmenu 2</div>
</div>

krijg ik keurig netjes dit in mijn browser:

code:

mijnmenu
mijnmenu2

recht onder elkaar. De positie van de 2e div is dan relatief tov. de 1e. Als ik bv.

code:

<style>
  .test {position: relative;
         left:100px;
        }
</style>
<div>mijnmenu
  <div class="test">mijnmenu 2</div>
</div>

krijg ik netjes dit:

code:

mijnmenu
                           mijnmenu2

[ Voor 11% gewijzigd door Verwijderd op 12-07-2004 15:53 ]

[CrashOne]

Maak van je menu eens een list, gooi die in een div welke relative is.

Dan heb je de oplossing voor je probleem en je hebt een netter menu.

[Verwijderd]

code:

+------------------------------------------+
|                                          |         
+------+-+------------------------+-+------+
|      | |                        | |      |
+------+ |                        | +------+
|        |                        |        |
+------+ |                        | +------|
|      | |                        | |      |
|      | |                        | |      |
|      | |                        | |      |
|      | |                        | |      |
|      | |                        | |      |
|------+ |                        | |      |
|        |                        | |      |
+--------+------------------------+-+------+

Ok bedankt iig al, dat met die Divs in Divs ga ik even proberen, alleen volgens mij is het lastige, dat ik 3 kolommen heb.. maar dat kom ik vanzelf wel tegen (hopelijk niet).

Bedankt ik kan wel weer even voorruit

[ Voor 6% gewijzigd door Verwijderd op 12-07-2004 16:23 ]