Forum PHP.pl > [CSS]Problem z kodem CSS - strona się zniekształca

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]Problem z kodem CSS - strona się zniekształca

k4r3r

29.07.2011, 21:05:58

Witam!
Napisałem sobie właśnie stronkę w html i jej szkielet w CSS. Jest ona oparta na DIVach i jest (znaczy powinna być w 100%) elastyczna. Nie jest ona zupełnie elastyczna, gdyż nie rozciąga się, a zmniejszanie rozrzuca elementy :/
Oto kodzik:

index.html

[PHP] pobierz, plaintext 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css">
 
<body>
 
<div id="logo" name="logo" class="rogi">
<center><img src="logo.png"></center>
</div>
<div id="panel" name="panel" class="rogi">
LINK 1<br>
LINK 2
</div>
<div id="box" name="box" class="rogi">
BOX
</div>
<div id="footer" name="footer" class="rogi">
<center>Š 2011/2012 by No More Spite!</center>
</div>
 
</body>
[PHP] pobierz, plaintext

style.css

[PHP] pobierz, plaintext 
body {
background-repeat : no-repeat;
background-attachment : scroll;
background-position : center center;
min-width : 1024px;
max-width: 1920px;
margin-left : 0px;
margin-right : 0px;
color : #008900;
background-color : #0b0b0b;
}
div#logo {
height : 80px;
background-repeat : no-repeat;
background-position : center;
}
div#panel {
float : left;
background-color : #2c2c2c;
overflow : auto;
margin-top : 160px;
margin-left : 15px;
padding : 20px;
min-width:300px;
max-width:600px;
}
div#box {
float : left;
background-color : #2c2c2c;
overflow : auto;
margin-top : 160px;
margin-left : 50px;
padding : 20px;
min-width:800px;
max-width:1700px;
}
div#footer {
clear : both;
}
.a {
color : #e3c226;
}
.rogi {
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
}
[PHP] pobierz, plaintext

co tutaj jest źle?

Tutaj to wszystko na stronie:
karer.hsms.pl
Pozdrawiam!

lobopol

30.07.2011, 07:50:27

Co jest źle?
-Brak definicji dokument
-Brak tagów <html>
-Brak tagów <head>
-używanie <center>
-bardzo brzydki css np.:

[HTML] pobierz, plaintext 
background-repeat : no-repeat;
background-attachment : scroll;
background-position : center center;
min-width : 1024px;
max-width: 1920px;
margin-left : 0px;
margin-right : 0px;
color : #008900;
background-color : #0b0b0b;
[HTML] pobierz, plaintext

jest równoznaczne w tym wypadku z:

[HTML] pobierz, plaintext 
backgroundŁ#0b0b0bł
min-width : 1024px;
max-width: 1920px;
margin : 0;
[HTML] pobierz, plaintext

Ogólnie rzecz biorą moja rada jest jedna: Przeczytaj jakiś kurs odnośnie html/css bo na razie to cały ten kod jest po prostu tragiczny i całkowicie do wymiany

k4r3r

30.07.2011, 07:53:24

dobra, to moge zaraz poprawić... ale mi chodzi o tą elastyczność. Na 1920px. strona jest za mała, a na 1024px. wszystko jest bardzo małe. Co zrobić aby na każdej rozdzielczości wszystko było dopasowane do ekranu?

//Poprawiłem już stronkę...

lobopol

30.07.2011, 08:08:50

No proszę ciebie skąd ty bierzesz pomysły na taki kod? doctype jest zawsze na początku strony. Mogę ci pomóc, ale tylko wtedy gdy twoja strona przejdzie walidacje html (może się dzięki temu czegoś nauczysz)

mortus

30.07.2011, 08:11:03

Na początek poczytaj o różnych sposobach organizacji layoutu strony www. Jeśli artykuł byłby niezrozumiały, to szukaj w Google pod hasłami: fluid layout, elastic layout, fixed layout. Myślę, że któreś z tych rozwiązań przypadnie Ci do gustu.

k4r3r

30.07.2011, 08:22:19

Czytałem już te wszystkie flud layouty itd. Ale troche tego nie rozumiem... Czy może mi ktoś tylko pokazać jakby wyglądał ten kod jednak dobrze działający? Już się rozciąga itd. ale divy są za małe...

Temat do zamknięcia

. Dopiero teraz wpadłem na pomysł aby zrobićwidth w % ....Już wszystko ładnie działa, dziękuję za pomoc oraz pozdrawiam!

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.