Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS]Szerokość strony, pozornie proste, ale nie umiem tego opanować
dnorus
post
Post #1





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 5.09.2010

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


cześć strona wygląda mniej więcej tak
div top
div naglowek
div tresc
div stopka

i css:

html, body {
background-color: #fff;
color: #000;
margin: 0 0 0 0;
padding: 0;
}

#KONTENER
{
width: 300px;
float: center;
border-style: double;
}

#NAGLOWEK {
background-color: chocolate;
text-align: center;
font-size: 24px;
border-bottom-style: double;
font-weight: bold;
}


#TRESC {
float: left;
text-align: center;
overflow: hidden;
background-color: #fff;
}

#STOPKA {
clear: both;
background-color: chocolate;
border-top-style: double;
text-align: center;
color: white;
}

Wpisuję w każdym możliwym miejscu te width i na różne sposoby - raz podaje wartość w px raz w % i za każdym razem ten sam efekt: strona rozciągnięta od lewej do prawej
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 8)
Mostrom
post
Post #2





Grupa: Zarejestrowani
Postów: 83
Pomógł: 3
Dołączył: 17.04.2007

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


Napisz do normalnie, umieść kody w znacznikach code i napisz konkretniej o co ci chodzi.
w celu robienia stron z CSS musisz nadawac divom klasy, np
Kod
<div class="tresc"></div>

dzięki temu w pliku CSS możesz odnieść się do tego tak:
Kod
.tresc { width: 500px; background-color: #ffffff }


Wtedy jak nadasz długość najbardziej zewnętrznemu divovi (obejmującego inne divy) wszystko będzie ci działać.

Ten post edytował Mostrom 5.09.2010, 16:03:03
Go to the top of the page
+Quote Post
dnorus
post
Post #3





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 5.09.2010

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


Tak to mam, nadaje divom id, wychodzi chyba na to samo;)

Konkretnie o to chodzi, że nie panuję nad CSS, zmieniam "width" w różnorakiej kombinacji i się nic nie dzieje. Oszczędzając prostych (podobnie jak ta wyżej) podpowiedzi: tak odświeżałem, zarówno stronę jak i pliki etc.
Go to the top of the page
+Quote Post
Mostrom
post
Post #4





Grupa: Zarejestrowani
Postów: 83
Pomógł: 3
Dołączył: 17.04.2007

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


To dziwne bo takie elementarne rzeczy powinny wychodzić...
tutaj masz przykład.. wszystko wychodzi
http://jsfiddle.net/ahhL9/
Go to the top of the page
+Quote Post
dnorus
post
Post #5





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 5.09.2010

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


hmm dzięki wielkie, może to coś z serwerem w takim razie, bo mam bardzo podobnie.
Będę szukał dziury gdzie indziej zatem;)
Dzięki
Go to the top of the page
+Quote Post
Mostrom
post
Post #6





Grupa: Zarejestrowani
Postów: 83
Pomógł: 3
Dołączył: 17.04.2007

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


A może masz podaną złą ścieżkę do pliku CSS?questionmark.gif
Go to the top of the page
+Quote Post
dnorus
post
Post #7





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 5.09.2010

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


dobra dobra, sam plik działa, tylko ta jedna właśność już średnio.
Zauważyłem, że jak coś zmieniam, odpalam stronę i muszę przynajmniej raz odświeżyć ją, więc może coś z tym związane;)
Go to the top of the page
+Quote Post
Hares
post
Post #8





Grupa: Zarejestrowani
Postów: 1
Pomógł: 0
Dołączył: 2.09.2010

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


Co do twojego kodu to nie ma czegoś takiego jak "float:center" (przynajmniej mi nie wiadomo), że strona Ci się rozsypywała to myślę ze dla tego że nie dodałeś reszty elementów w swój "kontener". Nad resztą kodu nie zastanawiałem się zobacz czy działa.

Twój kod lekko zmieniony w "kontener" i wycentrowany.
  1. <div id="kontener">
  2. <div id="naglowek">test</div>
  3. <div id"tresc">test</div>
  4. <div id"stopka">test</div>
  5. </div>


a w css:
  1. html, body {
  2. background-color: #fff;
  3. color: #000;
  4. margin: 0;
  5. padding: 0;
  6. }
  7.  
  8. #kontener
  9. {
  10. margin:0 auto;
  11. width: 900px;
  12. border-style: double;
  13. }
  14.  
  15. #naglowek {
  16. background-color: chocolate;
  17. text-align: center;
  18. font-size: 24px;
  19. border-bottom-style: double;
  20. font-weight: bold;
  21. }
  22.  
  23.  
  24. #tresc {
  25. float: left;
  26. text-align: center;
  27. overflow: hidden;
  28. background-color: #fff;
  29. }
  30.  
  31. #stopka {
  32. clear: both;
  33. background-color: chocolate;
  34. border-top-style: double;
  35. text-align: center;
  36. color: white;
  37. }
Go to the top of the page
+Quote Post
dnorus
post
Post #9





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 5.09.2010

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


Zadziałało, aczkolwiek robiąc więcej mam wrażenie, że wprowadzam jakieś modyfikacje, zaskakują, chce wrócić do poprzednich i już coś nie działa... no dobra dzięki wielkie, najwyraźniej nieład w kodzie jest głównym problemem.
Go to the top of the page
+Quote Post

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

 



RSS Aktualny czas: 22.08.2025 - 07:50