Forum PHP.pl > [HTML][CSS]

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]

Forum PHP.pl > Forum > Przedszkole

DawPi

20.12.2008, 17:45:14

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

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

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

Zmorcia

20.12.2008, 17:48:02

Kod

.content {
width: 960px;
}

lub

Kod

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

DawPi

20.12.2008, 18:15:01

To niestety nie to.

ziqzaq

20.12.2008, 18:58:25

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)?

DawPi

20.12.2008, 19:25:37

Pełny HTML:

CODE

ziqzaq

20.12.2008, 19:48:42

Hmm to samo co przedtem (brakuje html'a, albo css - używam tych styli w pierwszego postu

). 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 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tytul</title>
<style type="text/css">
#ct-main { width: 960px; margin: 0 auto; }
#ct-top { height: 60px; border: 1px solid #000; }
#ct-middle { border: 1px solid #000; }
#ct-bottom { height: 60px; border: 1px solid #000; }
#ct-content { border: 1px solid #000; margin: 0 170px 0 0; }
#ct-rmenu { float: right; border: 1px solid #000; width: 160px; margin: 0; padding: 0; }
.clear { clear: both; }
ul { margin: 0; padding: 0; list-style-type: none; }
li { margin: 0; padding: 0; }
</style>
</head>
<body>
 
<div id="ct-main">
	<div id="ct-top">Zawartość nagłówka</div><!-- Nagłówek/logo strony -->
	<div id="ct-middle"><!-- Cała środkowa część -->
		<div id="ct-rmenu"><!-- Menu po prawej stronie -->
			<ul>
				<li>menu</li>
				<li>menu</li>
				<li>menu</li>
			</ul>
		</div>
		<div id="ct-content"><!-- Zawartość strony -->
		Jakaś zawartość strony
		</div>
		<div class="clear"><!-- --></div>
	</div>
	<div id="ct-bottom">Zawartość stopki</div><!-- Zawartość stopki -->
</div>
 
</body>
</html>
[HTML] pobierz, plaintext

albo (do tego powyżej) na sztywno szerokość zawartości strony

[HTML] pobierz, plaintext 
#ct-content { border: 1px solid #000; width: 790px; float: left; }
[HTML] pobierz, plaintext

DawPi

20.12.2008, 19:51:22

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!

ziqzaq

20.12.2008, 20:14:05

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.

DawPi

20.12.2008, 20:24:02

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

ziqzaq

20.12.2008, 20:48:56

Oto chodziło

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 
<div id="ct-middle">
    <div id="ct-menu">Tutaj zawartość menu</div>
    <div id="ct-content">Tutaj zawartość strony (teksty itd.)</div>
    <div class="clear"><!-- --></div><!-- TUTAJ CZYŚCIMY OPŁYWANIE - CZYLI FLOAT -->
</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ć

DawPi

20.12.2008, 21:02:45

Wiedziałem gdzie napisać.

Perfetto.

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.