Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html] kolejny raz div'y
Forum PHP.pl > Forum > Przedszkole
coolart
13.01.2008, 23:58:04
witam mam problem z divami a konkretniej z ustawieniem diva na środku. problemu nie ma kiedy div nie ma w sobie innych div'ow lecz kiedy już jakiś jest w środku główny div, nie chce sie główny div ustawić na środku.

http://www.fotosik.pl/pokaz_obrazek/be0be3a90295137b.html

[HTML] pobierz, plaintext 
  1. <body>
  2. <div id="strona">
  3. 	<div id="baner">baner</div>
  4. 	<div id="cmenu">
  5. 	..:: Link1 :: Link2 :: Link3 :: Link4 :: Link5 :: Link6 :: Link7 :: Link8 ::..
  6. 	</div>
  7.   <div id="lewa"><? include"menu/lmenu.inc"; ?></div>
  8.   <div id="prawa"><? include"menu/rmenu.inc"; ?></div>
  9. 	<div id="center"><? include"menu/tresc.php"; ?></div>
  10. </div>
  11. </body>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. div{
  2. 		padding: 0px; 
  3. 		border: none; 
  4. 		margin: 0px auto 0px auto; 
  5. 		width: 760px; 
  6. }
  7. #strona {
  8. 		padding: 0px; 
  9. 		border: none; 
  10. 		margin: 0px; 
  11. 		width: 760px; 
  12. 		float   : inherit;
  13. }
  14. #baner {
  15.     border  : 1px solid white;
  16. 		margin  : 2px 0px;
  17. 		background: #494949;
  18.     padding : 0px;
  19.     width   : 758px;
  20.     float   : top;
  21. 		font-size: 10px;
  22. 		text-align: center;
  23. 		}
  24. #cmenu {
  25.     border  : 1px solid white;
  26. 		margin  : 2px 0px;
  27. 		background: #494949;
  28.     padding : 0px;
  29.     width   : 758px;
  30.     float   : top;
  31. 		font-size: 10px;
  32. 		text-align: center;
  33. 		}
  34. #lewa {
  35.     margin  : 0px;
  36.     border  : 1px solid white;
  37. 		background: #494949;
  38.     padding : 0px;
  39.     width   : 150px;
  40.     float   : left;
  41. }
  42. #center {
  43.     border  : 1px solid white;
  44. 		background: #494949;
  45.     padding : 0px;
  46.     width   : 448px;
  47.     float   : top;
  48. }
  49. #prawa {
  50.     margin  : 0px;
  51.     border  : 1px solid white;
  52. 		background: #494949;
  53.     padding : 0px;
  54.     width   : 150px;
  55.     float   : right;
  56. }
[HTML] pobierz, plaintext


jak ten główny div <div id="strona"> ustawić na środku?
dodam ze w programie ked wszystko ladnie lezy a w firefox'ie zjezdza do lewej
Jerem!asz
14.01.2008, 00:02:05
spróbuj
#body {
text-align: center;
}

do #strona zamień na margin:0px auto;
grzesiek_g
14.01.2008, 00:35:33
Pierwszy raz widzę by można było wykonać float:top. Zrób tak jak radzi Jerem!asz, a do tego usuń z deklaracji dla div: margin:0 auto;. Nie rozumię po co nadajesz najpierw właściwość by później w każdym przypadku ją kasować poprarzez margin:0 (zresztą podobnie jak nadanie wszystkim divom szerokości 760px, a później i tak to nadpisujesz.
c0cr0ach
14.01.2008, 00:36:42
Id strona musi zawierać:

[HTML] pobierz, plaintext 
  1. #strona {
  2.       margin: auto;
  3. }
[HTML] pobierz, plaintext
coolart
14.01.2008, 00:45:04
nie chodzi o treść a o div o id strona który ustawi sie na środku wraz z układem jaki jest na obrazku, chodzi tylko o przesuniecie na środek tak jak to sie robi z tabelami 
[HTML] pobierz, plaintext 
  1. <div align="center"><center>
  2. {reszta}
  3. <center></div>
[HTML] pobierz, plaintext

juz dziala, tylko nie wiem czy to estetycznie i bezpieczne
grzesiek_g
14.01.2008, 00:49:42 
[HTML] pobierz, plaintext 
  1. #strona {
  2.    width:760px;
  3.    margin:0 auto;
  4. }
[HTML] pobierz, plaintext

Zadziała to również w IE6, oczywiście jeśli nie wprowadzisz jej w quirks mode. ale jeśli w pierwszej linii dokumentu dasz prawidłowe DOCTYPE, np dla html 4.01 strict, lub xhtml 1.0 strict to będzie wszystko OK.
A jeśli boisz się tego daj dla body: text-align:center;
coolart
14.01.2008, 18:12:54
dobra kod html wyglada tak
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
  <meta http-equiv="Content-type" content="application/xhtml+xml; charset=iso-8859-2" />
  <meta name="Description" content="prywatna strona'" />
  <LINK REL="stylesheet" type="text/css" HREF="style.css">
  <title>..:: site 4 site ::..</title>
</head>
<body>
<div id="strona">
    <div id="baner">baner</div>
    <div id="cmenu">
    ...:: Link1 :: Link2 :: Link3 :: Link4 :: Link5 :: Link6 :: Link7 :: Link8 ::.
    </div>
  <div id="lewa"><? include"menu/lmenu.inc"; ?></div>
  <div id="prawa"><? include"menu/rmenu.inc"; ?></div>
  <div id="center"><? include"menu/tresc.php"; ?></div>
</div>
</body>
</html>


Kod
body
    {
     background: #000000;
     margin: 0px;
     padding: 0px;
     font-size: 10px;
     font-family: verdana, tahoma;
     color: #ffffff;
     text-align: left;
    
}

div{
        margin: auto;
        padding: 0px;
        border: none;
        margin: 0px auto 0px auto;
        width: 760px;
}

a
    {color: #9a0000;
    }
a:visited
    {color: #c60000;
    }
a:hover
    {color: #cb8583;
    }
#strona {
        margin: auto;
        border: none;
        width: 760px;
        float: none;
}
#baner {
    border  : 1px solid white;
        margin  : 2px 0px 2px;
        background: #494949;
    width   : 760px;
        float: none;
        text-align: center;
        }
#cmenu {
    border  : 1px solid white;
        margin  : 2px 0px 2px;
        background: #494949;
    width   : 760px;
        float: none;
        font-size: 10px;
        text-align: center;
        }
#lewa {
    border  : 1px solid white;
        background: #494949;
    padding : 0px;
    width   : 150px;
        float: left;
}
#center {
        margin: 0px 2px;
    border  : 1px solid white;
        background: #494949;
    width   : 450px;
        float: left
}
#prawa {
    border  : 1px solid white;
        background: #494949;
    width   : 150px;
        float: right;
        }

#ntytul {
     background: #868686;
     font-weight: bold;
     font-size: 11px;
     text-align: left;
     background: #494949;
   width   : 440px;
     float:left;
}
#tresc {
     font-size: 10px;
     text-align: left;
     background: #494949;
   width   : 440px;
     float: left;
     }

poprawiłem css'a, co do menu to tylko prowizorka chociaż zastanawiałem sie nad taki lecz po powiększeniu krechy wylatują ale chyba będę inaczej to robił. ale dziki za poradnik z menu.
div i center musi zostać ponieważ całość zlatuje do lewej strony a nie na środek.
grzesiek
Cytat
Nie wiem czemu nadajesz im szerokość o 2 px mniejszą, by strona wyglądała na rozjechaną?

nie bo jak daje 100% ro rozjeżdżają sie. wole stosować twarde reguły w koncu to div ma mnie słuchać a nie ja jego.
jeszcze dzisiaj trochę poćwiczę z tymi div'ami bo jeszcze całkiem ich nie rozumie i dzięki za linki pomocne będą
grzesiek_g
14.01.2008, 18:39:10
Powiedz mi, gdzie masz tu float:top? Już wcześniej zwracałem ci na to uwagę.
http://www.w3.org/TR/REC-CSS2/visuren.html#floats

Menu robi się w ul li, przykłady: http://www.cssplay.co.uk/menus/

Wyrzuć wszystkie style dla znacznika top, one tylko zamęt tworzą a nic nie resetują.

[HTML] pobierz, plaintext 
  1. #strona {
  2.     width:760px;
  3.     margin:0 auto;
  4.     /* i wyrzuć ten float z tego znacznika*/
  5. }
[HTML] pobierz, plaintext


Ogólnie reszcie div-ów, które mają mieć taką samą szerokość jak #strona nadawaj width:100%;float:left; Nie wiem czemu nadajesz im szerokość o 2 px mniejszą, by strona wyglądała na rozjechaną?
Tutaj coś o pozycjonowaniu, wogóle polecam przeczytanie całego kursu: http://kurs.browsehappy.pl/CSS/Float
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.