[CSS] Problem z float.

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
Hawk
Przelotem
Przelotem
Posty: 209
Rejestracja: ndz gru 22, 2002 9:34 pm

[CSS] Problem z float.

Post autor: Hawk »

Mam pewien problem, mam na stronie 3 elementy blokowe - kontener, lewa i prawa (umieszczone wewnątrz kontenera). Jeśli w elemencie lewa umieszczę jakieś inne elementy blokowe - a z ustawionym display: block to lewa i prawa "wychodzą" poza kontener. Czy ktoś by mi mógł powiedzieć co jest źle?

[xml]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<meta name="generator" content="WebSite PRO 4.3" />
<title></title>
<style type="text/css" media="all">
div#kontener {
background-color: #eeeeee;
margin: auto;
width: 700px;
height: 30px;
}
div#lewa {
float: left;
width: 300px;
}
div#prawa {
float: left;
width: 400px;
}
a {
margin: 2px 0 2px 0;
}
a#link1 {
display: block;
background-color: #ff0000;
width: 300px;
height: 20px;
}
a#link2 {
display: block;
background-color: #ff0000;
width: 300px;
height: 20px;
}
a#link3 {
display: block;
background-color: #ff0000;
width: 300px;
height: 20px;
}
</style>
</head>
<body>
<div id="kontener">
<div id="lewa">
<a id="link1" href="#"></a>
<a id="link2" href="#"></a>
<a id="link3" href="#"></a>
</div>
<div id="prawa">
Jakiś tekst.
</div>
</div>
</body>
</html>
[/xml]
Marcin Kalisz
Nowy
Nowy
Posty: 62
Rejestracja: sob lis 26, 2005 12:29 pm

Re: [CSS] Problem z float.

Post autor: Marcin Kalisz »

Nadaj kontenerowi float: left i zmień wysokość na auto.

Inne pomysły nie przychodzą mi do głowy, co oznacza, że czas się położyć 8O
Marcin Kalisz
Nowy
Nowy
Posty: 62
Rejestracja: sob lis 26, 2005 12:29 pm

Re: [CSS] Problem z float.

Post autor: Marcin Kalisz »

Już jako osoba wypoczęta dodam, że bardziej praktyczne jest wykorzystanie footera z właściwością clear: left. Footer oczywiście znajdował się będzie w kontenerze pod przyciskami... można wtedy uniknąć pływania dla kontenera i tym samym zniwelować problem pozycjonowania po środku strony :-D

Wcześniejszy sposób nie jest niestety najszczęśliwszy :!:
Hawk
Przelotem
Przelotem
Posty: 209
Rejestracja: ndz gru 22, 2002 9:34 pm

Re: [CSS] Problem z float.

Post autor: Hawk »

To rozwiązanie działa częściowo - tzn. wysokość jest dobra, ale kontener ląduje po lewej stronie ekranu, a chciałbym żeby był na środku.

Próbowałem ustawiać wysokość kontenera na sztywno, działa dobrze póki nie dam za dużo tekstu bo wtedy problem się powtarza.
123456
Zaczyna działać
Zaczyna działać
Posty: 514
Rejestracja: sob paź 28, 2006 1:19 pm

...

Post autor: 123456 »

1. Wysokosc kontenera na "auto"
2. Za div'em "prawa" dodac:

Kod: Zaznacz cały

<br style="clear:left;"/>
Malo eleganckie rozwiazanie ale dziala.
Hawk
Przelotem
Przelotem
Posty: 209
Rejestracja: ndz gru 22, 2002 9:34 pm

Re: [CSS] Problem z float.

Post autor: Hawk »

Działa wszystko :) - dzięki wielkie.
Marcin Kalisz
Nowy
Nowy
Posty: 62
Rejestracja: sob lis 26, 2005 12:29 pm

Re: [CSS] Problem z float.

Post autor: Marcin Kalisz »

1. Wysokosc kontenera na "auto"
2. Za div'em "prawa" dodac:
Kod:
<br style="clear:left;"/>

Malo eleganckie rozwiazanie ale dziala.
Na wszelki wypadek proponuję wrócić w górę strony... Footer i tak pewnie pojawi się w stronie więc nonsensem jest wykorzystywać taką "łatę" jak pusty znacznik. Lepiej użyć do tego stopki o czym napisałem post wcześniej :idea:
Hawk
Przelotem
Przelotem
Posty: 209
Rejestracja: ndz gru 22, 2002 9:34 pm

Re: [CSS] Problem z float.

Post autor: Hawk »

Footer się pojawi ale pod kontenerem, inaczej niestety zrobić nie mogę, więc chyba rozwiązanie proponowane przez 123456 będzie najlepsze.
Marcin Kalisz
Nowy
Nowy
Posty: 62
Rejestracja: sob lis 26, 2005 12:29 pm

Re: [CSS] Problem z float.

Post autor: Marcin Kalisz »

Zrób więc ten footer pod kontenerem, choć podejrzewam, że nie ma takiego powodu, dla którego musiałbyś tak komplikować sobie projekt.
ODPOWIEDZ