Uporczywe divy

[Smigol]

Witam mam pewien problem z divami, otóż chciałbym aby menu było trochę nietypowe i wykorzystałem w tym celu już tabelkę, ale nie wyszło, dlatego postanowiłem wziąć się za divy, ale przy pewnym punkcie pojawiły się problemy, mianowicie div zamiast ustawić się z prawej strony sąsiedniego elementu ustawia się z prawej strony, ale jedną linijkę niżej, widać to na mojej stronie: www.anubis-team.pl, ale nie mam pojęcia co z tym zrobić, pokażę wam jeszcze kody theme.php oraz styles.css:

theme.php:

Kod:

    echo "<div id='top' width='100%'>";
    echo
    "
    <div id='link1'>
        <ul>
        <li>
            <a href=''>Strona główna</a>
        </li>
        </ul>
    </div>
    
    <div id='link2'>
        <ul>
        <li>
            <a href=''>Strona główna</a>
        </li>
        </ul>    
    </div>
    
    <div id='link3'>
        <ul>
        <li>
            <a href=''>Strona główna</a>
        </li>
        </ul>
    </div>    
    
    <div id='link4'>
        <ul>
        <li>
            <a href=''>Strona główna</a>
        </li>
        </ul>
    </div>    
    
    <div id='link5'>
        <ul>
        <li>
            <a href=''>Strona główna</a>
        </li>
        </ul>
    </div>    
    
    <div id='link6'>
        <ul>
        <li>
            <a href=''>Strona główna</a>
        </li>
        </ul>
    </div>    
    ";
    
    echo "</div>";

styles.css:

Kod:

#top
{
    margin : 0 auto;
}

#link1
{
    text-align:center;
    height:30px;
    width:130px;
    margin: 0 auto;
}

#link2
{
    text-align:center;
    height:30px;
    width:130px;
    float:left;
}

#link3
{
    text-align:center;
    height:30px;
    width:130px;
    float:right;
    overflow: hidden;
}

#link4
{
    text-align:center;
    height:30px;
    width:130px;
}

#link5
{
    text-align:center;
    height:30px;
    width:130px;
    margin: 0 auto;
    overflow: hidden;
    }

#link6
{
    text-align:center;
    height:30px;
    width:130px;
    float: right;
}

Próbowałem w różny sposób to naprawić np. poprzez clear itp., ale nic mi nie wychodzi dlatego przyszedłem tutaj, mam nadzieję, że ktoś mi pomoże ;].

[sunpietro]

twój kod html to koszmar
naucz się poprawnie pisac html, a potem zobaczysz dlaczego pewne rzeczy ci nie działały
znacznik "li" musi się zawsze znajdować w "ul" lub "ol"
napisz ten kod od nowa

[Smigol]

Ok, przepraszam ;]. Zaraz się tym zajmę. Poprawiłem, ale chyba nie w tym <ul> była rzecz.

[Ancik]

Witaj,

Przede wszystkim dlaczego nie zrobisz menu w postaci listy, tylko każdą częśc tej listy umieszczasz w osobnym divie? np. tak:

Kod:

<div id="menu">
  <ul>
      <li>link1</li>
      <li>link1</li>
      <li>link1</li>
      <li>link1</li>
   </ul>
</div>

[Pedro84]

Przede wszystkim dlaczego nie zrobisz menu w postaci listy, tylko każdą częśc tej listy umieszczasz w osobnym divie? np. tak:

I bez żadnego diva, sama lista wystarczy.

[Smigol]

Bo to menu ma być na około obrazka dlatego wynikła ta sytuacja. W środku będzie obrazek, a na około niego linki w takim jakby pseudo kole/elpsie. Proste menu opartę na liście, o której mówicie potrafię zrobić bez problemu i wygląda nawet ładnie, ale mi to nie wystarczy, chciałem wprowadzić trochę innowacji i nie wiem czy za daleko nie poszedłem z moim pomysłem, chociaż jakbym wrócił do tabelki to już bym wiedział jak to zrobić, ale skoro divy są lepsze to czekam na waszą odpowiedź.

[Kartofelek]

position:absolute; top; bottom; left; rigth oraz marginesy - wszystko także z ujemnymi wartościami. Zwykła lista w zupełności wystarczy.

[Smigol]

Zrobiłem to nawet w tabelce, ale komórki nie mają określonej przeze mnie szerokości tylko jakby dostosowują się do tabeli, przez co obrazki nie są na swoim miejscu, znowu próbując z divami wszystko do pewnego momentu pięknie, ale sypie się jak są 3 pseudo komórki bo zrobiłem taką pseudo tabelę z divów, znowu każdy element z tej linii 3 komórek jest o linię niżej od poprzedniego, w ogóle to jakieś poprane jest, może spróbuję na tej liście jak mówicie.

[Ancik]

Tak jak napisał powyżej Kartofelek. Każdy przycisk z menu wypozycjonuj absolutnie wokół obrazka.

[Smigol]

Tylko jak to wszystko wypozycjonować, żeby działało na wszystkich rozdzielczościach, bo tu mam właśnie problem, bo na mojej 1680x1050 by było ładnie pięknie a u kogoś z rozdzielczością 1024:768 już niezbyt, próbowałem z procentami, ale też się rozjeżdżała, mam 2 komputery dlatego mogę sprawdzić jak to wygląda na różnych rozdzielczościach.