Forum PHP.pl > [CSS][HTML] Uswtanienie layoutu na DIV'ach

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML] Uswtanienie layoutu na DIV'ach

Elber

19.12.2010, 23:14:29

Witam, mam problem, otóż chcę ustawić wygląd strony następująco:

- szerokość strony 1000 px
- u samej góry na środku obrazek "logo" o wymiarach 1000x162 px
- pod obrazkiem 20 px przerwy
- następnie po lewej stronie DIV z menu o szerokości 225 px
- a po prawej stronie na tej samej wysokości pole o szerokości 775 px na tekst
- a pod tym na samym dole stopka - obrazek o wymiarach 1000x98 px

Problem mam z 2 polami obok siebie czyli lewym menu i prawym polu na tekst. Mój CSS wygląda tak:

Kod

body {

    margin: 0 auto;

    padding: 0px;

    width: 1000px;

    background-color: #ffffff;

    text-align: center;

    font-family: Arial;

}

div.gora {

    background-image: url('img/top.jpg');

    margin-bottom: 20px;

    width: 1000px;

    height: 162px;

}
div.main {

    margin: 0 auto;

    width: 1000px;

    height: 100%;

}
div.menu {

    width: 225px;

    float: left;

    text-align: left;

    vertical-align: top;

    overflow: hidden;

}
div.tresc {

    width: 775px;

    float: right;

    text-align: left;

    vertical-align: top;

    border:solid 1px #dadada;

    overflow: hidden;

}
div.stopka {

    background-image: url('img/stopka.png');

    width: 1000px;

    height: 98px;

}

Oraz chciałbym aby wysokość strony była automatycznie ustawiana w zależności ile tekstu jest w div'ie treść.

Bardzo proszę o szybką pomoc.

mikajlo

19.12.2010, 23:26:04

Ja jedynie mogę pomóc, jak podeślesz mi adres strony z aktualnym wyglądem.

Damonsson

19.12.2010, 23:50:14

W .main ustaw TYLKO tło dla .menu reszta znaczników jest zbędna.

w .tresc usuń width i float, a dodaj margin-left:225px

w .menu i .tresc overflow jest też chyba zbędne.

Elber

20.12.2010, 01:33:08

Poradziłem sobie troszeczkę inaczej, ale mam problem z obrazkiem w <ul><li>...otóż, tak wygląda html:

[HTML] pobierz, plaintext 
<div class="menu">
	<ul class="menu">
	<li><a href="/"><img src="img/logo.png"></a>
	</li>
	<br>
 
	<li>
	<a class="menu" href="kontakt">
	<img src="img/m_kontakt_d.png" alt="kontakt" onmouseover="change(this,'img/m_kontakt_u.png');" onmouseout="change(this,'img/m_kontakt_d.png');">
	</a>
	</li>
 
	<li>
	<a class="menu" href="dojazd">
	<img src="img/m_dojazd_d.png" alt="dojazd" onmouseover="change(this,'img/m_dojazd_u.png');" onmouseout="change(this,'img/m_dojazd_d.png');">
	</a>
	</li>
 
	<li>
	<a class="menu" href="oferta">
	<img src="img/m_oferta_d.png" alt="oferta" onmouseover="change(this,'img/m_oferta_u.png');" onmouseout="change(this,'img/m_oferta_d.png');">
	</a>
	</li>
 
	<li>
	<a class="menu" href="o_firmie">
	<img src="img/m_o_firmie_d.png" alt="o firmie" onmouseover="change(this,'img/m_o_firmie_u.png');" onmouseout="change(this,'img/m_o_firmie_d.png');">
	</a>
	</li>
 
	</ul>
	</div>
 
	<div class="tresc">
			cześć			cześć			cześć			cześć			cześć			cześć			
	</div>
 
[HTML] pobierz, plaintext

tak CSS:

Kod

body {

    margin: 0 auto;

    padding: 0px;

    width: 1000px;

    background-color: #ffffff;

    text-align: center;

    font-family: Arial;

}

div.top {

    background-image: url('img/top.jpg');

    margin-bottom: 20px;

    width: 1000px;

    height: 162px;

}

div.menu {

    margin-left:7px;

    width: 217px;

    float: left;

    border: solid 1px #dadada;

}

div.tresc {

    width: 763px;

    text-align: left;

    border:solid 1px #dadada;

    overflow: auto;

}

img {

    margin: 0px;

    border-width: 0px;

}

ul.menu {

    display: inline;

    text-align: center;

    list-style: none;

    font-family: Tahoma;

    color: #a9a9a9;

}

I problem jest następujący, że nie wiadomo czemu czarny obrazek w menu wyświetla w nowej linii od góry a nie na samej górze przy obramowaniu ....

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.