Forum PHP.pl > [css] divy a rozdzielczosc

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [css] divy a rozdzielczosc

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

pmallek

26.07.2008, 19:58:52

Poraz pierwszy robie szablon strony za pomoca css'a (div'ami) i mam drobny problem zwiazany z roznymi rozdzielczosciami.. jezeli zrobie 'kod' dla 1024/768:

[HTML] pobierz, plaintext 
#top {
	width: 780px;
	background-color: #000000;
	color: #fff;
}
 
#MENU {
	width: 200px;
	float: left;
	overflow: hidden;
	background-color: #000000;
}
 
#INFORMACJE {
	width: 50px;
	float: right;
	overflow: hidden;
	background-color: #000000;
}
 
#TRESC1 {
	width: 250px;
	float: left;
	overflow: hidden;
	background-color: #969696;
}
 
#TRESC2 {
	width: 250px;
	float: left;
	overflow: hidden;
	background-color: #969696;
}
 
#STOPKA {
	clear: both;
	width: 100%;
	background-color: #000000;
}
[HTML] pobierz, plaintext

a układ:

[HTML] pobierz, plaintext 
<html>
<head>
<link rel="Stylesheet" type="text/css" href="style.css" />
</head>
</html>
<div id="TOP">TOP</div>
<div id="MENU">MENU</div>
<div id="TRESC1">TRESC 1</div>
<div id="TRESC2">TRESC 2</div>
<div id="INFORMACJE">INFORMACJE</div>
<div id="STOPKA">STOPKA</div>
</html>
[HTML] pobierz, plaintext

to jest wmiare ale dla tej podanej rozdzielczosci... natomiast gdy bierzemy inna - z wieksza szerokoscia... robia sie dziury, teoretyczne rozwiazanie problemu to zrobienie zeby wszystko 'trzymalo sie qpy' i zostalo w jakis sposob wyposrodkowane, tylko jak to zrobic?

TroYan

27.07.2008, 01:34:57

stary, nie mozesz sobie wszystkiego dać sztywno a stopki 100% bo to lipa wygląda, albo decydujesz się wszystko na procenty (katorga żeby wszystko dopasować jak dla mnie, ale może masz talent

) albo piksele.

nie wiem po co dałeś divowi informacje float right, jeśli powyliczyasz wszystkie divy żeby miały razem width:7 80px (tyle co cały układ), daj informacją float left, width: 80px; (tyle tam brakowało). co do wypośrodkowania obejmujesz wszystko jednym divem (przykładowo div body) i dajesz mu width: 780px; i margin: 0 auto;

kody:

[HTML] pobierz, plaintext 
<html>
<head>
<link rel="Stylesheet" type="text/css" href="style.css" />
</head>
</html>
<div id="body">
       <div id="TOP">TOP</div>
       <div id="MENU">MENU</div>
       <div id="TRESC1">TRESC 1</div>
       <div id="TRESC2">TRESC 2</div>
       <div id="INFORMACJE">INFORMACJE</div>
       <div id="STOPKA">STOPKA</div>
</div>  //koniec diva body
 
</html>
[HTML] pobierz, plaintext

css (doklej body, zmien informacje):

Kod

#body {

width: 780px;
margin: 0 auto;

}

#INFORMACJE {
width: 80px;
float: left;
overflow: hidden;
background-color: #000000;
}

pmallek

27.07.2008, 14:54:14

Ok, troche przemyslalem i zrobilem to faktycznie wszystko %, czasem trzeba zrobic mala przerwe a potem wszystko staje sie oczywiste:)

Tomplus

27.07.2008, 16:09:50

Ciekawe rzeczy o centrowaniu dowiesz się tutaj i o innych rzeczach z użyciem CSS.

http://perfectionorvanity.com/2006/04/19/w...trowaniu-w-css/

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.