Forum PHP.pl > [css] Struktura strony. Przejście ztabelek na divy podejście 2

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [css] Struktura strony. Przejście ztabelek na divy podejście 2

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

starach

24.01.2007, 23:01:55

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Centrum Projektowe</title>
</head>
<style type="text/css">
body { font:x-small Verdana, Arial, Helvetica, sans-serif; background-color:#CCCCCC; color:#333333; padding:15px; }
div#main { width:780px; background-color:#999999; display:block; margin:0 auto; }
div#main div.left_frame { width:150px; background-color:#00CC00; display:inline; }
div#main div.right_frame { width:630px; background-color:#99FF00; display:inline; }
</style>
<body>
<div id="main">
<div class="left_frame"> </div>
<div class="right_frame"> </div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

Co należy zrobić żeby wyświetlały się te dwa divy obok siebie, i miały szerokość taką jak ustalona właściwością width: ?
Wiem że mógłbym skorzystać z float:left i right ale przeczytałem gdzieś że nie należy stosować tego typu techniki. Moim drugim problemem jest to że jeśli użyję float na elementach wewnątrz div'a owy div zwinie mi się do góry tak jakby nic w nim nie było.
Proszę o radę i podpowiedź.

chlebik

24.01.2007, 23:49:29

Domyslam sie, ze chcesz po prostu miec 2 DIVy obok siebie. Mysle, ze jesli masz ustalona z gory szerokosc w pikselach to mozna sie pokusic i na sztywno rozmiescic DIVy na stronie gdzie nadrzednym kontenerem jest po prostu znacznik BODY. Chyba, ze caly layout bedzie sie dalej zmienial i takie rozwiazanie nie jest odpowiednie. Oto kod (ramki dodalem by bylo widac co i gdzie jest):

[HTML] pobierz, plaintext 
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
 
<title>Centrum Projektowe</title>
 
</head>
 
<style type="text/css">
body {background-color:#CCCCCC; color:#333333; padding:15px; }
 
.left_frame { width:150px; background-color:#00CC00; position: absolute; 
top: 5%; left: 0; right: auto; border: 2px dotted #yellow;}
.right_frame { width:630px; background-color:#99FF00; position: absolute;
 top: 5%; right: 0; left: auto; border: 2px dotted #yellow;}
 
</style>
 
<body>
 
<div class="left_frame">to jest lewy DIV </div>
<div class="right_frame">to jest prawy DIV </div>
 
 
</body>
 
</html>
[HTML] pobierz, plaintext

Ps. Gdzie wyczytales o tym "float"

starach

25.01.2007, 00:24:17

Ee ale ja chce to mieć po środku a nie po bokach.
Pozycjonowanie za pomocą atrybutu position odpada ( chyba )
poza tym myślałem że podacie mi jakieś Vadeemecum pozycjonowania.
Za pomocą jakich atrybutów należy to robić aby uzyskać dany efekt.

Nie pamiętam na jakiej stronie ale gdzieś przeczytałem że może skończyć się to dziwnymi efektami na stronie. Niestety autor nie określił o co dokładnie mu chodziło a owy tekst czytałem ponad pół roku temu.

chlebik

25.01.2007, 00:38:53

http://forumweb.e-vip.pl/viewtopic.php?t=15012

Pod tym linkiem znajdziesz wylozone pare rzeczy - czesto jest on na tym forum przywolywany.

Natomiast co do Twojego problemu - rzecz jest prosta - albo pozycjonujesz DIVy za pomoca "position: " albo konstruujesz kolejne kontenery i umiejetnie operujac "padding" i "margin" doprowadzasz do porzadanego stanu (najlepiej zrobic to po prostu w BODY lub jednym kontenerze nadrzednym). Jesli mam kontynuowac swoja wersje to zastosuj po prostu (przy sztywnych wielkosciach DIVow i powiedzmy 180px marginesie z kazdej ze stron):

[HTML] pobierz, plaintext 
<style type="text/css">
body {background-color:#CCCCCC; color:#333333; padding:15px; }
.left_frame { width:150px; background-color:#00CC00; position: absolute; 
top: 5%; left: 180px; right: auto; border: 2px dotted #yellow;}
.right_frame { width:630px; background-color:#99FF00; position: absolute;
 top: 5%; right: 180px; left: 303px; border: 2px dotted #yellow;}
 
</style>
[HTML] pobierz, plaintext

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.