Problem z szablonem

[lukasz_zn]

Witam,

Od niedawna uczę się XHTML i CSS i tp. I mam taki problem, bo robię własny pierwszy szablon dla znajomego i nie wiem jak zrobić z nagłówkiem by były 3 divy, jeden lewy siwy na 50% strony, drugi z prawej strony czarny na 50%, a w środku na nich zdjęcie.I jeszcze dodatkowo ten czarny pasek z lewej strony(chociaż to można zrobic przez repeat-x). Tutaj tak bardzo wstępna próba szablonu, www.tssi.pl/inter/ (http://www.tssi.pl/inter/). Próbowałem przez z-index i absolute, ale wszystko idzie na lewo i nie chcą działać marginesy, a obrazek chciałbym by był na środku w różnych rozdzielczościach. Na tą chwilę mam prozaiczne rozwiązanie, bo mam rysynek siwo-czarny na 1960px x 2px i repeat-y + central, ale i tak nie wiem jak wstawić pasek z logiem.

A jeszcze żadne menu rozwijane nie chce działać jak wstawię (chowa się za divem pod menu, główny poziom jest, ale podrzędne chowają się. Musiałem z jakiegoś szablonu skopiować i trochę przerobić, ale dużo tego i nie wszystko kumam. Mam jeszcze sporo do poprawy, co sądzicie o kolorach menu ten pomarańcz i obramowanie, może jakieś propozycje. Kolejne menu produktów - co o tym sądzicie? Jeszcze wszędzie teksu nie mam poprawionego, oraz tej funkcji by moduł rozciągało na środek jak innego nie ma, tak jak strona startowa, ale będzie. Wszystkie sugestie i krytyki przyjmne, bo się ucze i lepiej uczyć się dobrze, niż nabyć złe nawyki. Z góry dzięki za pomoc.
3830


Edit:
Zrobione: dołączyłem kod XHTML i CSS

Zrobiłem trochę inaczej, ale działa, możecie sprawdzić czy może czegoś nie zamotałem:




<div id="strona">
<!--cal strona trzyma wszystko-->
<div id="gora_zew">
<div id="lewa"></div>
<div id="obrazek"></div>

body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #666;
margin: -10px;
}
h1 {
font-size: 16px;
}
h2 {
font-size: 14px;
}

#strona {
background-color: #666;
height: 100%;
}

#gora_zew { /*tutaj dałem kolor czarny, będzie trochę inny na całego diva*/
height: auto;
width: 102%;
background-color: #000;
overflow:hidden;

}
#lewa{
float: left;
margin-left:-500px; /* tutaj dałem - 500px, bo div z obrazkiem ma 1000, dało to połowę strony - 500px, co w efekcie wygląda tak chciałem, tylko kolory poprawię*/
width: 50%;
height:335px;
background-color: #FFF;
}

#obrazek {
background-image: url(../images/head_01.jpg);
height: 335px;
width: 1000px;
float:left
}
#menu_gora_tlo {
background-image: url(../images/z-pomaranczowym-2_06.jpg);
background-repeat: repeat-x;
background-position: center;
height: 35px;
width: 100%;
overflow: hidden;
}

Nie pomyślałem o marginesach minusowych, czytałem jakieś forum i gdzieś coś było, trochę innego, ale przypasowałem do tego co chciałem osiągnąć.
Pozdrawiam

[coliberek1]

Hej,
kiedyś mialam taki problem i rozwiązałam go tak:

w miejscu, gdzie maja być trzy moduły ustawione obok siebie utworzyłam nowy div wywołujący moduły z danej pozycji|


<div class="razem">
<jdoc:include type="modules" name="moja" style="xhtml" />
</div>

dla każdego z nmodułów na pozycji moja, Module Class Suffix trzeba dopisać przyrostek modułu (zaraz poniżej utworzy się go w css) np: -lewe
i w ten sposób każdy z tych trzech modułów będzie w divie moduletable-lewe

więc w css:


.razem {
overflow:hidden;
}
div.moduletable-lewe {
float:left;
width:150px;
itp
}


No i powinno zadzialać. A jeżeli każdy z tych modułów ma mieć inną szerokośc, to wtedy trzeba by bylo ustawić np moduletable-lewe1 {width:150px} , moduletable-lewe2 {width:500px;} i moduletable-lewe3{width:250px}

Pozdrowionka
Gosia