[CSS/HTML] Dwa obiekty na tym samym poziomie

[Loku]

Witam serdecznie. Mam problem dość prosty i zapewne wielu z Was będzie po cichu myślało, że jestem niedorozwinięty umysłowo, ale trudno.

Chodzi dokładniej o to, że:

Mam dajmy na to dwa menu - menu srodkowe(to główne) i menu boczne. Teraz gdy robię divy w css i daje tam rzeczy takie jak margin: 0 auto oraz jakies tlo i inne dodatki(nie istotne jakie) i wpisuje to do htmla z kodem np: <div id = 'menuglowne'>menu glowne </div> i potem robię to samo z menu bocznym i teraz zaczynają się schody - gdzie mam umieścić do licha ciężkiego diva z menu bocznym, aby mi nie uciekało "pod" albo "nad" menu srodkowe? Oczywiście używam float: left. Ale dalej nie są te oba menu na tej samej wysokości.

Z góry dziękuję za pomoc, pozdrawiam!

[Heyek]

Cześć, nie przejmuj się swoim poziomem. Każdy z nas kiedyś zaczynał i miał banalnie śmieszne problemy. Śmiało pytaj.

Co do twojego problemu nie wiem za bardzo o co ci chodzi Z tego co zrozumiałem to chcesz umieścić menu boczne obok menu głównego. Div działa podobnie jak nowy akapit. Jeśli umieścisz jednego diva pod drugim, to będą one pod sobą. jeśli chcesz żeby oba menu były w jednym poziomie to ustaw w stylu divu głównego margines od lewej szerokości menu lewego, a w menu bocznym, po lewej stronie ustaw margines minusowy wysokości głównego menu.

Przykład:

Kod:

#menu-główne{
width: 500px;
height: 100px;
margin-left: 220px;
}

#menu-boczne-lewe{
width: 200px;
height: 300px;
margin-top: -100px;
}

Da się to jeszcze zrobić lepiej technicznie, ale to będzie działało.
Życzę powodzenia i wytrwałości w nauce Będziesz miał problem to nie krępuj się i pisz.

[Loku]

Myślałem, żeby tak to zrobić. Ale moim zdaniem jest to mało hmm, jakby to ująć - dynamiczne? No ale jak mówisz, że akurat ten sposób zadziała to bardzo dobrze, zaraz to wykorzystam.

Dziękuję Ci za tą motywacje

Pozdrawiam i będę pytał z góry

[Bucky]

Kod:

<div id="wrap">
        
    <div id="menu_glowne">
        <ul id="menu">
            <li>menu1</li>
            <li>menu2</li>
            <li>menu3</li>
            <li>menu4</li>
        </ul>
    </div>
        
    <div id="menu_boczne">
        <ul>
            <li>menu1</li>
            <li>menu2</li>
            <li>menu3</li>
            <li>menu4</li>
        </ul>
    </div>
        
</div>

Kod:

* {
    padding: 0;
    margin: 0;
}

#wrap {
    width: 800px;
    margin: 0 auto;
}

#menu_glowne {
    width: 500px;
    float: left;
}

#menu_boczne {
    width: 300px;
    float: left;
}

#menu li {
    display: inline;
    padding-left: 10px;
}