[CSS & JavaScipt] Potrzebna pomoc z Layoutem

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.

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>
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

0

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

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

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>
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.

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.

0

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

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