Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS], Rozciąganie diva w dół - problem
DawPi
post 20.12.2008, 17:45:14
Post #1





Grupa: Zarejestrowani
Postów: 39
Pomógł: 1
Dołączył: 6.05.2007
Skąd: Kraków

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

Witam,
przygotowuję swoją stronkę bazując na jednym z popularnych FM, jednak nie o tym chciałem. smile.gif

Otóż, to mój problem:


Jak widać główny div się nie rozciąga wg menu, a powinien. Szczerze powiem, że na CSS się aż tak nie znam i nie wiem jakie wartości ze stylu Wam przygotować by było to pomocne i Wam i mnie.

Tak wygląda kod szablonu:
Kod
<div id="topbar">
  <div class="content">
    <div class="wrap content">
    </div>
  </div>
</div>
<div id="subbar">
  <div class="content">
    <div class="wrap menu">

    </div>
  </div>
</div>
    <?=$content;?>
  <div id="footer">
  </div>

Wyciąłem nieistotne wpisy ( linki itd. ).

Kod CSS:
Kod
.content {
margin : 0 auto;
width : 960px;
}

#topbar {
height : 51px;
background : #000;
width : 100%;
color: #FFF;
}

#topbar .wrap {
    background: #3F4040;
    height: 51px;
    width: 958px
    
}

#topbar h1 {
    font : bold 2.0em Arial, sans-serif;
    color: #FFF;
    line-height: 51px;
    padding: 0 0 0 10px;
    background: inherit;
}
#topbar h1 a { color: #FFF }
#topbar h1 a:hover { color: #FFF; text-decoration: none }

#topbar .se {
    float: right;
    padding: 12px 10px 0 0;

}

#subbar {
    background: #F4F4F3;
    height: 34px;
    border-bottom: 1px solid #D6D6D6;
    width: 100%;
}

#subbar .rss {
    position: relative;
    right: 20px;
    top: 7px;
    width: 21px;
    height: 21px;
}



Za wszelką pomoc serdecznie dziękuję.
DawPi


--------------------
intermedia - profesjonalne rozwiązania Invision Power Board
Go to the top of the page
+Quote Post
Zmorcia
post 20.12.2008, 17:48:02
Post #2





Grupa: Zarejestrowani
Postów: 234
Pomógł: 5
Dołączył: 26.01.2008
Skąd: Lutcza

Ostrzeżenie: (20%)
X----

Kod
.content {
width: 960px;
}


lub

Kod
.content {
width: 960px;
height: auto;
}


Ten post edytował Zmorcia 20.12.2008, 17:48:59


--------------------
POMOGŁEM ? Wciśnij "Pomógł" , dzięki !
Go to the top of the page
+Quote Post
DawPi
post 20.12.2008, 18:15:01
Post #3





Grupa: Zarejestrowani
Postów: 39
Pomógł: 1
Dołączył: 6.05.2007
Skąd: Kraków

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

To niestety nie to.


--------------------
intermedia - profesjonalne rozwiązania Invision Power Board
Go to the top of the page
+Quote Post
ziqzaq
post 20.12.2008, 18:58:25
Post #4





Grupa: Zarejestrowani
Postów: 428
Pomógł: 128
Dołączył: 17.06.2007

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

IMHO to wygląda jakbyś miał dany "float" na (chyba) menu, ale go nie wyczyścił (np. "clear: both;").
Wkleiłem sobie ten twój kod i - w sumie - u mnie wygląda to całkiem inaczej (całkiem się rozjeżdża) np. zawartość strony (to co jest wyświetlane zamiast <?= $content ?>) wyświetla się poniżej stopki.
Może daj pełny kod html tego co masz na screenie? Nie ma tego dużo a nie trzeba będzie się domyślać jak ty to zrobiłeś tylko od razu się wklei do pliku.
Ewentualnie może jakiś link (chociażby do samego pliku html)?
Go to the top of the page
+Quote Post
DawPi
post 20.12.2008, 19:25:37
Post #5





Grupa: Zarejestrowani
Postów: 39
Pomógł: 1
Dołączył: 6.05.2007
Skąd: Kraków

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

Pełny HTML:
CODE

<html xmlns="http://www.w3.org/1999/xhtml">
<?=$header;?>
<body>
<div id="topbar">
<div class="content">
<div class="wrap content">
<h1></h1>
</div>
</div>
</div>
<div id="subbar">
<div class="content">
<div class="wrap menu">
<div class="right rss"></div>

</div>
</div>
</div>
<?=$content;?>
<div id="footer">
<?=$footer;?>
</div>
</body>
</html>


--------------------
intermedia - profesjonalne rozwiązania Invision Power Board
Go to the top of the page
+Quote Post
ziqzaq
post 20.12.2008, 19:48:42
Post #6





Grupa: Zarejestrowani
Postów: 428
Pomógł: 128
Dołączył: 17.06.2007

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

Hmm to samo co przedtem (brakuje html'a, albo css - używam tych styli w pierwszego postu winksmiley.jpg). Sprawdzałeś co wklejasz? Trudno pomóc jak nie wiadomo co tam masz w kodzie.
Spróbuję więc inaczej.
Oto jak bym do tego podszedł:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>tytul</title>
  6. <style type="text/css">
  7. #ct-main { width: 960px; margin: 0 auto; }
  8. #ct-top { height: 60px; border: 1px solid #000; }
  9. #ct-middle { border: 1px solid #000; }
  10. #ct-bottom { height: 60px; border: 1px solid #000; }
  11. #ct-content { border: 1px solid #000; margin: 0 170px 0 0; }
  12. #ct-rmenu { float: right; border: 1px solid #000; width: 160px; margin: 0; padding: 0; }
  13. .clear { clear: both; }
  14. ul { margin: 0; padding: 0; list-style-type: none; }
  15. li { margin: 0; padding: 0; }
  16. </style>
  17. </head>
  18. <body>
  19.  
  20. <div id="ct-main">
  21. 	<div id="ct-top">Zawartość nagłówka</div><!-- Nagłówek/logo strony -->
  22. 	<div id="ct-middle"><!-- Cała środkowa część -->
  23. 		<div id="ct-rmenu"><!-- Menu po prawej stronie -->
  24. 			<ul>
  25. 				<li>menu</li>
  26. 				<li>menu</li>
  27. 				<li>menu</li>
  28. 			</ul>
  29. 		</div>
  30. 		<div id="ct-content"><!-- Zawartość strony -->
  31. 		Jakaś zawartość strony
  32. 		</div>
  33. 		<div class="clear"><!-- --></div>
  34. 	</div>
  35. 	<div id="ct-bottom">Zawartość stopki</div><!-- Zawartość stopki -->
  36. </div>
  37.  
  38. </body>
  39. </html>
[HTML] pobierz, plaintext


albo (do tego powyżej) na sztywno szerokość zawartości strony
[HTML] pobierz, plaintext 
  1. #ct-content { border: 1px solid #000; width: 790px; float: left; }
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
DawPi
post 20.12.2008, 19:51:22
Post #7





Grupa: Zarejestrowani
Postów: 39
Pomógł: 1
Dołączył: 6.05.2007
Skąd: Kraków

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

Ups, zapomniałem podać CSS:
CODE

body {
padding : 0;
margin : 0;
font : 0.74em Arial, sans-serif;
line-height : 1.5em;
background : #F8F8F8;
color : #454545;
}

a {
color : #FF6603;
background : inherit;
text-decoration : none;
}
a:hover {
color : #FF6603;
background : inherit;
text-decoration : underline;
}
p {
margin : 5px 0;
}
h1 {
font : bold 1.8em Arial, Sans-Serif;
padding : 8px 0 4px 0;
margin : 0;
letter-spacing : -1px;
}
h2 {
font : bold 1.6em Arial, Sans-Serif;
letter-spacing : -1px;
}
h3 {
padding : 4px 0;
margin : 0;
}
img { border : 0 }
.right { float: right }


ul {
margin : 0;
padding : 0;
list-style : none;
}

hr {
height : 1px;
border-style : none;
color : #d0d0d0;
background-color : #c0c0c0;
margin : 10px 0;
}
ol {
padding : 0;
margin : 0;
}
.code {
padding : 3px 5px 3px 35px;
border : 1px solid #ccc;
list-style-type : decimal-leading-zero;
font-family : Courier;
}
.code code {
font-family : Monaco, "Courier New", Tahoma;
font-size : 1.2em;
}
.code li {
margin : 2px 0;
padding : 0 5px;
background : #F6F6E3;
}
.code li.t1 {
padding-left : 4ex;
}
.code li.t2 {
padding-left : 8ex;
}
.code li.t3 {
padding-left : 12ex;
}
.code li.t4 {
padding-left : 16ex;
}
.code li.t5 {
padding-left : 20ex;
}
.code li.t6 {
padding-left : 24ex;
}
.code li.t7 {
padding-left : 28ex;
}
.code li.t8 {
padding-left : 32ex;
}


.content {
margin : 0 auto;
width : 960px;
}

#topbar {
height : 51px;
background : #000;
width : 100%;
color: #FFF;
}

#topbar .wrap {
background: #3F4040;
height: 51px;
width: 958px

}

#topbar h1 {
font : bold 2.0em Arial, sans-serif;
color: #FFF;
line-height: 51px;
padding: 0 0 0 10px;
background: inherit;
}
#topbar h1 a { color: #FFF }
#topbar h1 a:hover { color: #FFF; text-decoration: none }

#topbar .se {
float: right;
padding: 12px 10px 0 0;

}

#subbar {
background: #F4F4F3;
height: 34px;
border-bottom: 1px solid #D6D6D6;
width: 100%;
}

#subbar .rss {
position: relative;
right: 20px;
top: 7px;
width: 21px;
height: 21px;
}

.menu {
background: #F7F7F6;
height: 34px;
line-height: 34px;
border-left: 1px solid #D6D6D6;
border-right: 1px solid #D6D6D6;
padding: 0;
margin: 0;
}

.menu a {
color : #74797E;
background : inherit;
text-decoration : none;
padding: 0 10px 0 10px;
line-height : 23px;
}
.menu a:hover, .menu .current {
color : #000;
background : inherit;
height : 23px;
text-decoration: underline
}
.menu ul {
list-style : none;
padding : 0;
margin : 0;
}
.menu li {
float : left;
margin : 0 0 0 0px;
display: inline;
}

#main {
width : 958px;
background: #FFF;
margin : 0px 0 0 0;
border-left: 1px solid #D6D6D6;
border-right: 1px solid #D6D6D6;
border-bottom: 1px solid #D6D6D6;
padding: 10px 0 0 0;
}
#main .padding {
padding: 10px;
}
.right_side {
float : right;
width : 391px;
background : inherit;
overflow : hidden;
}
.right_side .pad {
padding : 0 0 10px 17px;
}
.right_side p {
padding : 0 0 5px 5px;
}
.right_side ul {
padding : 3px 0 12px 0px;
}

.right_side li {
line-height : 22px;
list-style : none;
background: #f8f8f8 url(../images/li.gif) no-repeat left;
margin-bottom: 2px;
}
.right_side li a{
padding-left: 15px;
color: #74797E;

}


.right_side a:hover {
text-decoration : underline;
color: #000;
background: inherit;
}
.right_side h3 {
color : #eee;
font : bold 1.0em Arial, Sans-Serif;
background : #3F4040;
width : 100%;
height : 24px;
line-height : 22px;
text-indent : 10px;
font-weight: normal;
}

.right_side .sponsors {
margin-bottom: 5px;
width: 391px;
overflow: hidden;

}
.right_side .sponsors img.ml { margin-right: 5px; overflow: hidden }

.right_side .ls {
float: left;
width: 191px;
}

.right_side .rs {
float: right;
width: 191px;
}

.right_side .extra {
background : #F4F4F3;
color : #454545;
border-top: 4px solid #e5e5e5;
border-bottom: 4px solid #e5e5e5;
margin-bottom: 10px;
}

.right_side .extra .padding { padding: 10px }

.right_side2 {
float : right;
width : 233px;
background : inherit;
overflow : hidden;
}
.right_side2 .pad {
padding : 0 0 10px 17px;
}
.right_side2 p {
padding : 0 0 5px 5px;
}
.right_side2 ul {
padding : 3px 0 12px 0px;
}

.right_side2 li {
line-height : 22px;
list-style : none;
background: #f8f8f8 url(../images/li.gif) no-repeat left;
margin-bottom: 2px;
}
.right_side2 li a{
padding-left: 15px;
color: #74797E;

}


.right_side2 a:hover {
text-decoration : underline;
color: #000;
background: inherit;
}
.right_side2 h3 {
color : #eee;
font : bold 1.0em Arial, Sans-Serif;
background : #3F4040;
width : 100%;
height : 24px;
line-height : 22px;
text-indent : 10px;
font-weight: normal;
}

.right_side2 .sponsors {
margin-bottom: 5px;
width: 391px;
overflow: hidden;

}
.right_side2 .sponsors img.ml { margin-right: 5px; overflow: hidden }

.right_side2 .ls {
float: left;
width: 191px;
}

.right_side2 .rs {
float: right;
width: 191px;

}

.right_side2 .extra {
background : #F4F4F3;
color : #454545;
border-top: 4px solid #e5e5e5;
border-bottom: 4px solid #e5e5e5;
margin-bottom: 10px;
}

.right_side2 .extra .padding { padding: 10px }

#left_side {
background : inherit;
margin-bottom : 10px;
width : 527px;
color: #454545;
}
#left_side .intro {
background : #FDFDF0;
color : #454545;
border-bottom: 4px solid #F6F6E3
}
#left_side .intro .pad {
padding : 10px;
}
#left_side .intro a {
color : #FF6603;
text-decoration : none;
}
#left_side .intro a:hover {
color : #FF6603;
text-decoration : underline;
}
#left_side .mpart {
padding : 20px 0 0 0;
}
#left_side h2 {
background : inherit;
padding : 0;
margin : 0;
font : 1.8em verdana, Arial, Sans-Serif;
color: #3F4040
}
#left_side .mpart h3 {
background : inherit;
padding : 0;
margin : 0 0 15px 0;
font : 0.9em verdana, Arial, Sans-Serif;
color : #a5a5a5;
}
#left_side p {
color : #454545;
padding : 0;
text-align : justify;
}

#left_side img {
float : left;
padding : 0 10px 5px 0;
}
#left_side blockquote {
padding-left : 10px;
border-left : 3px solid #a7cc44;
margin : 10px 0 10px 25px;
}
.date {
padding : 7px 10px 0 0;
margin : 10px 0 20px 0;
text-align : right;
background : #F4F4F3;
height : 26px;
width: auto;
}
.date a {
color: #74797E;
background : inherit;
}
#left_side .rs {
float : right;
margin : 0 0 0 10px;
border : 1px solid #888;
padding : 5px;
background : inherit;
}
#left_side ul {
list-style-position : inside;
margin-left : 2px;
}
#left_side ul li {
list-style-type : square;
margin-left : 15px;
}
#left_side ul ul li {
list-style : none;
margin-left : 10px;
list-style-type : lower-alpha;
list-style-position : inside;
}
#left_side2 {
background : inherit;
margin-bottom : 10px;
width : 725px;
color: #454545;
}
#left_side2 .intro {
background : #FDFDF0;
color : #454545;
border-bottom: 4px solid #F6F6E3
}
#left_side2 .intro .pad {
padding : 10px;
}
#left_side2 .intro a {
color : #FF6603;
text-decoration : none;
}
#left_side2 .intro a:hover {
color : #FF6603;
text-decoration : underline;
}
#left_side2 .mpart {
padding : 20px 0 0 0;
}
#left_side2 h2 {
background : inherit;
padding : 0;
margin : 0;
font : 1.8em verdana, Arial, Sans-Serif;
color: #3F4040
}
#left_side2 .mpart h3 {
background : inherit;
padding : 0;
margin : 0 0 15px 0;
font : 0.9em verdana, Arial, Sans-Serif;
color : #a5a5a5;
}
#left_side2 p {
color : #454545;
padding : 0;
text-align : justify;
}

#left_side2 img {
float : left;
padding : 0 10px 5px 0;
}
#left_side2 blockquote {
padding-left : 10px;
border-left : 3px solid #a7cc44;
margin : 10px 0 10px 25px;
}
.date {
padding : 7px 10px 0 0;
margin : 10px 0 20px 0;
text-align : right;
background : #F4F4F3;
height : 26px;
width: auto;
}
.date a {
color: #74797E;
background : inherit;
}
#left_side2 .rs {
float : right;
margin : 0 0 0 10px;
border : 1px solid #888;
padding : 5px;
background : inherit;
}
#left_side2 ul {
list-style-position : inside;
margin-left : 2px;
}
#left_side2 ul li {
list-style-type : square;
margin-left : 15px;
}
#left_side2 ul ul li {
list-style : none;
margin-left : 10px;
list-style-type : lower-alpha;
list-style-position : inside;
}
#footer {
clear : both;
width : 100%;
margin : 0 0 6em 0;
padding : 10px 0px 0 10px;
color : #777;
background : inherit;
line-height : 1.7em;
}
#footer .right {
float : right;
padding-right: 20px;
}
#footer a {
text-decoration : none;
background : inherit;
}
#footer .fmenu {
background: inherit;
padding: 0;
margin: 0;
}

#footer .fmenu a {
color : #74797E;
background : inherit;
text-decoration : none;
padding: 0 10px 0 0px;
}
#footer .fmenu a:hover {
color : #000;
background : inherit;
text-decoration: underline
}
#footer .fmenu ul {
list-style : none;
padding : 0;
margin : 0;
}
#footer .fmenu li {
float : left;
margin : 0 10px 0 0px;
display: inline;
}

input.text { border: 1px solid #CCC; padding: 2px 5px 2px 5px; }


.block {
color: inherit;
background-color: #ffffcc;
border: 1px solid #eeeebb;
}

.block .inner {
background: transparent url(corner.png) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 10px;
}

.blockr {
background-color: #E3C0C0;
border-color: #992A2A -moz-use-text-color;
border-style:solid none;
border-width:1px 1px;
}

.blockr .innerr {
position: relative;
left: 2px;
top: 2px;
padding: 10px;
}

td {
border: 1px solid #eee;
padding: 4px;
}

td a {
color: #3F4040;
text-decoration: underline;
}

th {
color: inherit;
border: 1px solid #dddddd;
background-color: #f3f3f3;
padding: 4px;
}


Naprawdę bardzo dziękuję za pomoc i chęci! smile.gif


--------------------
intermedia - profesjonalne rozwiązania Invision Power Board
Go to the top of the page
+Quote Post
ziqzaq
post 20.12.2008, 20:14:05
Post #8





Grupa: Zarejestrowani
Postów: 428
Pomógł: 128
Dołączył: 17.06.2007

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

Pliz wrzuć do jakiegoś pliku html ten cały kod który podałeś (html + css), otwórz w jakiejś przeglądarce i zobacz efekty (nie wnikam we wstawki php oczywiście). Strona się sypie bo nie ma tam wszystkiego.
Za mało danych. Nie ma całego kodu, a nikomu nie będzie się chciało domyślać co tam ci się jeszcze generuje.
Masz w moim wcześniejszym poście przykład, pokombinuj na nim.
Go to the top of the page
+Quote Post
DawPi
post 20.12.2008, 20:24:02
Post #9





Grupa: Zarejestrowani
Postów: 39
Pomógł: 1
Dołączył: 6.05.2007
Skąd: Kraków

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

Przepraszam, moje niedopatrzenie. Oto 'poprawna' strona: http://ipslink.pl/test/


--------------------
intermedia - profesjonalne rozwiązania Invision Power Board
Go to the top of the page
+Quote Post
ziqzaq
post 20.12.2008, 20:48:56
Post #10





Grupa: Zarejestrowani
Postów: 428
Pomógł: 128
Dołączył: 17.06.2007

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

Oto chodziło winksmiley.jpg

Teraz do rzeczy.
Mój cytat:
Cytat
IMHO to wygląda jakbyś miał dany "float" na (chyba) menu, ale go nie wyczyścił (np. "clear: both;").

Mój uproszczony kod (ten który dałem wcześniej):
[HTML] pobierz, plaintext 
  1. <div id="ct-middle">
  2.     <div id="ct-menu">Tutaj zawartość menu</div>
  3.     <div id="ct-content">Tutaj zawartość strony (teksty itd.)</div>
  4.     <div class="clear"><!-- --></div><!-- TUTAJ CZYŚCIMY OPŁYWANIE - CZYLI FLOAT -->
  5. </div>
[HTML] pobierz, plaintext

Zauważ co jest pod divami z id "ct-menu" i "ct-content", przeczytaj komentarz w kodzie powyżej, i to co pisałem w pierwszym poście. Daję głowę że nie spróbowałeś tego w swoim kodzie i ręczę że to działa bo sprawdzałem twoją stronkę w Operze (edytując kod na żywo).
Ostatni mój tip dla Ciebie to to, że Twoim odpowiednikiem mojego diva z id="ct-middle" jest div z klasą class="padding" (w którym są divy z klasami "right_side2" i "left_side2").
Musi ci się udać winksmiley.jpg

Ten post edytował ziqzaq 20.12.2008, 20:51:37
Go to the top of the page
+Quote Post
DawPi
post 20.12.2008, 21:02:45
Post #11





Grupa: Zarejestrowani
Postów: 39
Pomógł: 1
Dołączył: 6.05.2007
Skąd: Kraków

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

Wiedziałem gdzie napisać.

Perfetto. winksmiley.jpg


--------------------
intermedia - profesjonalne rozwiązania Invision Power Board
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 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 Wersja Lo-Fi Aktualny czas: 27.06.2025 - 01:27
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn