[CSS & JavaScipt] Potrzebna pomoc z Layoutem

Odpowiedz Nowy wątek
2007-02-09 21:26

Rejestracja: 17 lat temu

Ostatnio: 11 lat temu

0

Witam serdecznie.

Siedzę nad layoutem strony od paru godzin i nie potrafię uzyskać zgodności pod IE i FireFoxem :/ Nie zamieszczam kodu, bo próbowałem kilku rozwiązań i żadne nie działało, a nie wiem w którym kierunku w ogóle iść. Nie chcę robić layoutu w tabelkach. CSSowe tabele "display:table;" nie działają pod IE. Jak robię "float:left;" w divach, a potem daję "< BR >" to w IE się pokazuje separator, a w FireFoxie nie... Brak mi już sił i nie wiem jak się za to zabrać. Napiszcie proszę w jaki sposób powinienem uzyskać zamierzony efekt. Nie oczekuję gotowego rozwiązania, ale jedynie wskazówek.

user image

W niebieskim prostokącie po lewej będzie MENU, a po prawej Logo. Czerwone pola to po prostu marginesy, aby niebieski prostokąt nie "rozjechał się" na szerokich monitorach. Zielony pasek to zawartość.
Chciałbym aby wielkości prostokątów się dostosywały do wielkości przeglądarki. Czerwone powinny mieć wielkość gdzieś 20% strony. Zielony pasek celowo nie jest tej samej szerokości co niebieski, ale w ramach kompromisu mogę się zgodzić na taką samą szerokość.

Tak więc zwracam się do Was, drodzy forumowicze, z pytaniem.. Jak to zrobić? Divy, tabele, FLOAT czy może w jakiś inny sposób?

Pozdrawiam.


"A wise man questions contains half an answer"

Pozostało 580 znaków

nav
2007-02-09 21:31
nav

Rejestracja: 16 lat temu

Ostatnio: 3 lata temu

Lokalizacja: Warszawa

0

Chodzi o coś takiego?

<body style="text-align: center">
  <div style="margin: 0 20%;">
    Menu
  </div>
  <div style="margin: 0 25%">
    Treść
  </div>
</body>

utf-8 rlz! ٩(ಥ_ಥ)۶

Pozostało 580 znaków

2007-02-10 09:23

Rejestracja: 17 lat temu

Ostatnio: 11 lat temu

0

Edit:

Oka dzięki Twojemu pomysłowi wpadłem na inny i prezentuję go poniżej:

<body>

<div id="container">

<div class="top_panel">
    <div class="cell" id="left_margin" style="background-color:#0000FF">1</div>
    <div class="cell" id="panel" style="background-color:#CC0066">2</div>
    <div class="cell" id="right_margin" style="background-color:#0099FF">3</div>
</div>

</div>
</body>

I do tego następujacy styl:

body {
    background-color: #990000;
}

div.top_panel div#panel{
    width:60%;
    height:90px;
}

div.top_panel div#left_margin{
    width:20%;
    height:90px;
}

div.top_panel div#right_margin{
    width:20%;
    height:90px;
}

div.cell{
    float:left;
}

div#container {
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:90px;
    background-color:green;
}

W Mozilli oczywiście wszystko OK. Natomiast IE pozostawia około 20pikseli wolnego miejsca z prawej strony. Wiecie może jak temu zaradzić?

Poniżej zrzut:
user image


"A wise man questions contains half an answer"

Pozostało 580 znaków

nav
2007-02-10 11:24
nav

Rejestracja: 16 lat temu

Ostatnio: 3 lata temu

Lokalizacja: Warszawa

0

html, body{margin:0;padding:0}


utf-8 rlz! ٩(ಥ_ಥ)۶

Pozostało 580 znaków

2007-02-10 11:42

Rejestracja: 17 lat temu

Ostatnio: 11 lat temu

0

Dzięki! Faktycznie to rozwiązało problem!

Ale zauważyłem następny ;-) Otóż gdy zmniejszam lub rozszerzam stronkę czasami (naprawdę nie wiem od czego to zależy) ostatni DIV mi się "wysypuje", tzn. pojawia się zupełnie na dole. Zielony kolor to kontener, w którym umieściłem moje 3 DIVy. Wiecie czemu się tak dzieje? Problem pojawia się zarówno w IE jak i Mozilli...

Screen:

user image


"A wise man questions contains half an answer"

Pozostało 580 znaków

nav
2007-02-10 12:00
nav

Rejestracja: 16 lat temu

Ostatnio: 3 lata temu

Lokalizacja: Warszawa

0

Caly czas nie wiem, czemu rozbijasz marginesy na dwa dodatkowe divy. Chyba, że musisz mieć je osobno. Ale ja bym zrobił tak:

<div>
  <div style="margin: 0 20% 0 25%">
    Srodek
  </div>
</div>

Jeśli chcesz umieścić jakieś dane w tych marginesach, skorzystaj z floata:

<div>
  <div style="float:left">
    Lewy margines
  </div>
  <div style="margin: 0 20% 0 25%">
    Srodek
  </div>
</div>
</div>

utf-8 rlz! ٩(ಥ_ಥ)۶

Pozostało 580 znaków

2007-02-10 12:39

Rejestracja: 17 lat temu

Ostatnio: 11 lat temu

0

Hhhmm niestety trochę się gubię w tym co opisałeś. Mógłbyś to odnieść do elementów z mojego kodu źródłowego?

A te dwa marginesowe divy póki co będą posiadać tylko tło w postaci obrazka (takiego samego dla obu), ale w przyszłości fajnie by było mieć moliwość umieścić w każdym z nich inne elementy.


"A wise man questions contains half an answer"

Pozostało 580 znaków

nav
2007-02-10 12:53
nav

Rejestracja: 16 lat temu

Ostatnio: 3 lata temu

Lokalizacja: Warszawa

0
<div class="top_panel" style="background-color:#0099FF">
        <div style="float:left; background-color:#FF00FF; width:20%">Lewy margines</div>
        <div style="float:right; background-color:#FF00FF; width:20%">prawy margines</div>
        <div class="cell" id="panel" style="background-color:#CC0066; margin: 0 20%;">2</div>
</div>

width:60%; w css nie będzie raczej potrzebne.


utf-8 rlz! ٩(ಥ_ಥ)۶

Pozostało 580 znaków

2007-02-10 13:06

Rejestracja: 17 lat temu

Ostatnio: 11 lat temu

0

Ok no faktycznie działa :-) A jak dołożyć tam jeszcze ten prawy margines?


"A wise man questions contains half an answer"

Pozostało 580 znaków

Odpowiedz

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0