Forum PHP.pl > Divy

Pomoc - Szukaj - Użytkownicy - Kalendarz

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

Balas

5.02.2006, 14:44:17

Mam kod :

[HTML] pobierz, plaintext 
<div id="container">
 
<div id="logo">logo</div>
 
<div id="menu">cos </div>
<div id="tresc">cos 2  </div>
 
<div id="stopka">cos 3 ;D </div>
</div>
[HTML] pobierz, plaintext

A tu CSS:

Kod

#container {
  border: 1px solid #d5d5d5;
  background-color: #01a568;
  padding: 1px;
  width: 500px;
  float: left;
  margin: auto;
}

#logo {
  background-color: #ffffff;
  text-align: left;
  margin-bottom: 1px;
  float: left;
  width: 496px;
}

#menu {
  background-color: #ffffff;
  border-top: 1px solid #d5d5d5;
  float: left;
  width: 200px;
}

#tresc {
  background-color: #ffffff;
  border-top: 1px solid #d5d5d5;
  border-left: 1px solid #d5d5d5;
  float: right;
  width: 295px;
}

#stopka {
  background-color: #ffffff;
  border-top: 1px solid #d5d5d5;
  float: right;
  width: 496px;
  margin-top: 1px;
}

Otoz problemy przyspaza mi ustawienie tego po srodku oraz nie wiem jak zrobic, aby DIV menu sie rozciagal na ta sama dlugosc co tresc. Ma ktos jakies pomysly

I jeszcze jedno... o ile ten kod dobrze dziala pod IE to w FF sie rozsypuja szerokosci, gdy zrobie pod FF to w IE sie rozjezdza :/

ens0re

5.02.2006, 14:56:54

Kod

* {
margin: 0;
padding: 0;
border: 0;
}

body {
background-color: #fff;
margin: 0;
padding: 0;
margin: 0 auto;
}

#container {
border: 1px solid #d5d5d5;
background-color: #01a568;
padding: 1px;
width: 500px;
margin: 0 auto;
}

#logo {
background-color: #ffffff;
text-align: left;
margin-bottom: 1px;
width: 496px;
height: XXpx; //zamiast XX jakas wartosc
}

#menu {
background-color: #ffffff;
border-top: 1px solid #d5d5d5;
float: left;
width: 200px;
height: auto; //albo sproboj 100%
}

#tresc {
background-color: #ffffff;
border-top: 1px solid #d5d5d5;
border-left: 1px solid #d5d5d5;
float: right;
width: 295px;
height: auto; // albo 100%
}

#stopka {
background-color: #ffffff;
border-top: 1px solid #d5d5d5;
clear: both;
width: 496px;
height: XXpx; // tutaj zamiast XX tez dajesz jakas wartosc
margin-top: 1px;
}

Zobacz teraz jak jest..

Balas

5.02.2006, 15:07:47

Teraz jest po srodku :] ale nadal sie nie rozciaga

(to akurat moge przebolec i dac samemu wysokosc na sztywno) i nadal inaczej wyglada pod FF i IE

ens0re

5.02.2006, 15:18:21

[HTML] pobierz, plaintext 
<!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>
<style type="text/css">
 
* {
margin: 0;
padding: 0;
border: 0;
}
 
body {
background-color: blue;
margin: 0;
padding: 0;
text-align: center;
}
 
#glowny {
margin: 0 auto;
padding: 0;
width: 700px;
text-align: center;
}
 
#top {
width: 700px;
height: 100px;
background-color: red;
}
 
#lewe {
width: 200px;
background-color: green;
float: left;
}
 
#srodek {
width: 500px;
background-color: lightskyblue;
float: left;
}
 
 
#stopka {
width: 700px;
height: 20px;
background-color: pink;
clear: both;
}
 
</style>
 
<body>
<div id="glowny">
<div id="top">top</div>
<div id="lewe">Lewe menu</div>
<div id="srodek">Srodek</div>
<div id="stopka">Stopka</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

Sprawdz taki kod i dostosuj go do swoich potrzeb..

Balas

5.02.2006, 15:27:25

Dzieki :] teraz wszystko chodzi jak trzeba

Kod

body {
background-color: #ffffff;
text-align: center;
}

#container {
  margin: 0 auto;
  border: 1px solid #d5d5d5;
  background-color: #01a568;
  padding: 1px;
  width: 500px;
  text-align: center;
}

#logo {
  background-color: #ffffff;
  text-align: left;
  margin-bottom: 1px;
  width: 500px;
  height: 100px;
}

#menu {
  background-color: #ffffff;
  border-top: 1px solid #d5d5d5;
  width: 150px;
  float: left;
}

#tresc {
  background-color: #ffffff;
  border-top: 1px solid #d5d5d5;
  border-left: 1px solid #d5d5d5;
  margin-left: 1px;
  width: 348px;
  float: left;
}

#stopka {
  width: 500px;
  height: 20px;
  clear: both;
  background-color: #ffffff;
  border-top: 1px solid #01a568;
}

Zajec

7.02.2006, 20:40:09

Maniacy semantycznego kodu oszczędzają na każdym jednym zaczniku ;-)

Kod

body {
background-color: #ffffff;
text-align: center;
}

#container {
margin: 0 auto;
border: 1px solid #d5d5d5;
background-color: #01a568;
padding: 1px;
width: 500px;
text-align: center;
}

Kod

html {
background-color: #fff;
}

body {
margin: 0 auto;
width: 500px;
padding: 1px;
border: 1px solid #d5d5d5;
background-color: #01a568;
text-align: center;
}

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.