Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Divy - problem
Balas
post
Post #1





Grupa: Zarejestrowani
Postów: 347
Pomógł: 0
Dołączył: 27.08.2005
Skąd: Inowrocław

Ostrzeżenie: (0%)
-----

Mam kod :
[HTML] pobierz, plaintext 
  1. <div id="container">
  2.  
  3. <div id="logo">logo</div>
  4.  
  5. <div id="menu">cos (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif) </div>
  6. <div id="tresc">cos 2 (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)  </div>
  7.  
  8. <div id="stopka">cos 3 ;D </div>
  9. </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 (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) (IMG:http://forum.php.pl/style_emoticons/default/snitch.gif)

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 :/

Ten post edytował OnE.Killer 5.02.2006, 14:48:05
Go to the top of the page
+Quote Post
ens0re
post
Post #2





Grupa: Zarejestrowani
Postów: 143
Pomógł: 0
Dołączył: 23.08.2005
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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..

Ten post edytował ens0re 5.02.2006, 14:59:36
Go to the top of the page
+Quote Post
Balas
post
Post #3





Grupa: Zarejestrowani
Postów: 347
Pomógł: 0
Dołączył: 27.08.2005
Skąd: Inowrocław

Ostrzeżenie: (0%)
-----

Teraz jest po srodku :] ale nadal sie nie rozciaga (IMG:http://forum.php.pl/style_emoticons/default/sad.gif) (to akurat moge przebolec i dac samemu wysokosc na sztywno) i nadal inaczej wyglada pod FF i IE (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

Ten post edytował OnE.Killer 5.02.2006, 15:12:14
Go to the top of the page
+Quote Post
ens0re
post
Post #4





Grupa: Zarejestrowani
Postów: 143
Pomógł: 0
Dołączył: 23.08.2005
Skąd: Warszawa

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <style type="text/css">
  6.  
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. border: 0;
  11. }
  12.  
  13. body {
  14. background-color: blue;
  15. margin: 0;
  16. padding: 0;
  17. text-align: center;
  18. }
  19.  
  20. #glowny {
  21. margin: 0 auto;
  22. padding: 0;
  23. width: 700px;
  24. text-align: center;
  25. }
  26.  
  27. #top {
  28. width: 700px;
  29. height: 100px;
  30. background-color: red;
  31. }
  32.  
  33. #lewe {
  34. width: 200px;
  35. background-color: green;
  36. float: left;
  37. }
  38.  
  39. #srodek {
  40. width: 500px;
  41. background-color: lightskyblue;
  42. float: left;
  43. }
  44.  
  45.  
  46. #stopka {
  47. width: 700px;
  48. height: 20px;
  49. background-color: pink;
  50. clear: both;
  51. }
  52.  
  53. </style>
  54.  
  55. <body>
  56. <div id="glowny">
  57. <div id="top">top</div>
  58. <div id="lewe">Lewe menu</div>
  59. <div id="srodek">Srodek</div>
  60. <div id="stopka">Stopka</div>
  61. </div>
  62. </body>
  63. </html>
[HTML] pobierz, plaintext

Sprawdz taki kod i dostosuj go do swoich potrzeb..
Go to the top of the page
+Quote Post
Balas
post
Post #5





Grupa: Zarejestrowani
Postów: 347
Pomógł: 0
Dołączył: 27.08.2005
Skąd: Inowrocław

Ostrzeżenie: (0%)
-----

Dzieki :] teraz wszystko chodzi jak trzeba (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif)

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;
}
Go to the top of the page
+Quote Post
Zajec
post
Post #6





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

Ostrzeżenie: (0%)
-----

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;
}
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 00:33
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn