Forum PHP.pl > [CSS]Problem ze zbyt długim divem

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]Problem ze zbyt długim divem

AboutMe

6.04.2010, 12:55:27

Witam,

Czy ktoś wie dlaczego pierwszy post zawsze się rozszerza do długości sidebara?

[HTML] pobierz, plaintext 
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
 
 
<style>
 
body { 
    margin:0;
    padding:0; 
    background: black; 
    width: 100%;
}
 
 
#general {
    width: 1300px; height: auto;
}
#sidebar {
    padding: 10px 10px 0px 0px;
    float: left;
    width: 180px;
}
 
.sidebar-box {
    margin-top: 20px;
    margin-left: 0px;
    padding: 0px 0px 20px 0px;
    width: 160px; height: auto;
    border: 1px solid #626262;
    font: 11pt Verdana, Arial, sans-serif;
    color: #c3c3c3;
    background: black;
    background-repeat: repeat-y;
}
 
.sidebar-box li {
margin-left: 10px; 
margin-top: 5px; 
}
 
.sidebar-box-title {
    border-bottom: 1px solid #626262;
    padding: 0px 0px 5px 10px;
}
 
#content {
    width: 660px;
    margin-top: 20px;
    margin-left: 200px;
    padding: 10px 10px 10px 10px;
    font: 9pt Verdana, Arial, sans-serif;
    color: #c3c3c3;
}
 
.post {
    width: 670px;
    margin-top: 23px;
    padding: 10px 10px 10px 10px;
    background: black; 
    text-align: justify;
    border: 1px solid #626262;
}
 
 
 
.clear {
clear: both;
}
 
 
.post-title{
    font: 22pt Verdana, Arial, sans-serif;
}
 
.text {
    width: 540px;
    float: left;
    padding: 10px 3px 10px 0px;
}
 
.more-link {
    font: 16pt Verdana, Arial, sans-serif;
    padding: 15px;
    margin-top: 20px;
}
 
.info {
    width: 100px;
    float: right;
    font: 7pt Verdana, Arial, sans-serif;
    text-align: left;
    border-left: 1px dotted #626262;
    padding: 15px 3px 10px 10px;
}
 
 
.date {
    font: 9pt Arial, Verdana, sans-serif;
    color: white;
}
 
.time {
font-size: 15pt;
color: white;
}
 
 
</style>
 
 
</head>
<body>
 
 
 
<div id="general">
 
<div id="sidebar">
 
<div class="sidebar-box">
 
<div class="sidebar-box-title"><h3>Categories</h3></div><!--categories ends-->
 
 
	<li class="cat-item cat-item-23"><a href="23" title="View all posts filed under ac">ac</a> (3)
</li>
	<li class="cat-item cat-item-3"><a href="3" title="View all posts filed under Aenean">Aenean</a> (4)
 
</li>
	<li class="cat-item cat-item-28"><a href="28" title="View all posts filed under aliquam">aliquam</a> (3)
</li>
	<li class="cat-item cat-item-24"><a href="24" title="View all posts filed under ante">ante</a> (2)
</li>
	<li class="cat-item cat-item-4"><a href="4" title="View all posts filed under Blandit">Blandit</a> (4)
</li>
	<li class="cat-item cat-item-11"><a href="11" title="View all posts filed under Egestas">Egestas</a> (3)
 
</li>
	<li class="cat-item cat-item-26"><a href="26" title="View all posts filed under faucibus">faucibus</a> (3)
</li>
	<li class="cat-item cat-item-7"><a href="7" title="View all posts filed under Imperdiet">Imperdiet</a> (2)
</li>
	<li class="cat-item cat-item-5"><a href="5" title="View all posts filed under Ligula">Ligula</a> (4)
</li>
	<li class="cat-item cat-item-30"><a href="30" title="View all posts filed under mattis">mattis</a> (2)
 
</li>
	<li class="cat-item cat-item-6"><a href="6" title="View all posts filed under Mauris">Mauris</a> (4)
</li>
	<li class="cat-item cat-item-20"><a href="20" title="View all posts filed under Nam">Nam</a> (2)
</li>
	<li class="cat-item cat-item-27"><a href="27" title="View all posts filed under nibh">nibh</a> (1)
</li>
	<li class="cat-item cat-item-25"><a href="25" title="View all posts filed under Pellentesque">Pellentesque</a> (1)
 
</li>
 
 
 
</div><!--sidebar-box ends-->
 
 
 
</div><!--sidebar ends-->
 
 
<div id="content">
 
 
 
<div class="post">
<div class="text">
 
<h2><a href="?p=30" rel="bookmark" title="Fixed link Tristique">Tristique</a></h2>
 
 
<p>Suspendisse lacinia est in diam lobortis at aliquet leo dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam et ipsum nisl. Mauris congue, erat id pellentesque suscipit, nulla libero vulputate ipsum, eu suscipit nibh lorem nec velit. Aenean lacinia tincidunt ultrices. <br />
 <a href="?p=30#more-30" class="more-link">Read more ></a></p>
 
<div style="float:right"><h5><p><a href="?p=30#comments" title="Comment on Tristique">2 Comments ?</a></p></h5></div>
</div><!--text-->
 
<div class="info">
<img src="photo.png" alt="Photo" width="85" height="80" />
<p><h4>Posted by admin</h4>
<h4>April 3rd</h4>
 
<h4>2010</h4>
<span class="time">19:58</span>
 
<h6>Under:<br />
<a href="5" title="View all posts in Ligula" rel="category">Ligula</a><br /> <a href="6" title="View all posts in Mauris" rel="category">Mauris</a><br /> <a href="24" title="View all posts in ante" rel="category">ante</a><br /> <a href="26" title="View all posts in faucibus" rel="category">faucibus</a></h6>
</div><!--info-->
 
<div class="clear">
 
 
</div>
 
</div><!--post-->
 
 
 
<div class="post">
<div class="text">
 
<h2><a href="?p=28" rel="bookmark" title="Fixed link Quisque">Quisque</a></h2>
 
 
<p>Suspendisse lacinia est in diam lobortis at aliquet leo dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam et ipsum nisl. <br />
 <a href="?p=28#more-28" class="more-link">Read more ></a></p>
 
<div style="float:right"><h5><p><a href="?p=28#respond" title="Comment on Quisque">No Comments ?</a></p></h5></div>
</div><!--text-->
 
<div class="info">
<img src="photo.png" alt="Photo" width="85" height="80" />
<p><h4>Posted by admin</h4>
<h4>April 3rd</h4>
<h4>2010</h4>
 
<span class="time">9:57</span>
 
<h6>Under:<br />
<a href="3" title="View all posts in Aenean" rel="category">Aenean</a><br /> <a href="4" title="View all posts in Blandit" rel="category">Blandit</a></h6>
</div><!--info-->
 
 
<div class="clear">
 
 
</div>
 
</div><!--post-->
 
 
 
<div class="post">
<div class="text">
 
<h2><a href="?p=26" rel="bookmark" title="Fixed link Info">Info</a></h2>
 
 
<p>Suspendisse lacinia est in diam lobortis at aliquet leo dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam et ipsum nisl. <br />
 <a href="?p=26#more-26" class="more-link">Read more ></a></p>
 
<div style="float:right"><h5><p><a href="?p=26#respond" title="Comment on Info">No Comments ?</a></p></h5></div>
</div><!--text-->
 
<div class="info">
<img src="photo.png" alt="Photo" width="85" height="80" />
<p><h4>Posted by admin</h4>
<h4>April 3rd</h4>
<h4>2010</h4>
<span class="time">9:57</span>
 
<h6>Under:<br />
 
<a href="11" title="View all posts in Egestas" rel="category">Egestas</a><br /> <a href="6" title="View all posts in Mauris" rel="category">Mauris</a><br /> <a href="23" title="View all posts in ac" rel="category">ac</a><br /> <a href="28" title="View all posts in aliquam" rel="category">aliquam</a></h6>
</div><!--info-->
 
 
<div class="clear">
 
 
</div>
 
</div><!--post-->
 
 
 
<div class="post">
<div class="text">
 
<h2><a href="?p=22" rel="bookmark" title="Fixed link Etiam sodales fringilla">Etiam sodales fringilla</a></h2>
 
 
<p>Integer ligula nisi, condimentum vel vestibulum et, ornare ut enim. Morbi mattis velit purus. Sed ultrices neque in turpis suscipit non malesuada justo ornare.  Proin vel egestas tortor.<br />
 <a href="?p=22#more-22" class="more-link">Read more ></a></p>
 
<div style="float:right"><h5><p><a href="?p=22#respond" title="Comment on Etiam sodales fringilla">No Comments ?</a></p></h5></div>
 
</div><!--text-->
 
<div class="info">
<img src="photo.png" alt="Photo" width="85" height="80" />
<p><h4>Posted by admin</h4>
<h4>April 3rd</h4>
<h4>2010</h4>
<span class="time">7:34</span>
 
<h6>Under:<br />
<a href="4" title="View all posts in Blandit" rel="category">Blandit</a><br /> <a href="20" title="View all posts in Nam" rel="category">Nam</a><br /> <a href="23" title="View all posts in ac" rel="category">ac</a><br /> <a href="28" title="View all posts in aliquam" rel="category">aliquam</a><br /> <a href="26" title="View all posts in faucibus" rel="category">faucibus</a><br /> <a href="30" title="View all posts in mattis" rel="category">mattis</a></h6>
 
</div><!--info-->
 
 
<div class="clear">
 
 
</div>
 
</div><!--post-->
 
 
 
<div style="display:inline">
<h5><div style="float:left"><a href="?paged=2" ><<< Older Entries</a></div>
 
<div style="float:right"></div></h5>
</div>
 
 
 
</div><!--content ends-->
 
<div class="clear">
 
 
</div>
</div>
</div><!--general ends-->
[HTML] pobierz, plaintext

Skie

6.04.2010, 13:08:18

Pokaż lepiej wersje LIVE, bo tak samego tekstu to mało kto się podejmie przy poprawianiu.

AboutMe

6.04.2010, 13:19:40

Przecież wystarczy pobrać plik rozszerzeniem html i masz live

mortus

6.04.2010, 14:14:21

A w jakiej przeglądarce, bo u mnie jest w porządku, chociaż jest parę błędów:
1. w każdym div-ie info nie zamykasz znacznika <p>
2. w linii 311 używasz <<<, i to powoduje pewne błędy.

hieroshima

6.04.2010, 14:17:56

Spróbuj dać do diva id sidebar position: absolute; to będzie wyglądać tak:

#sidebar
{
position: absolute;
padding: 10px 10px 0px 0px;
float: left;
width: 180px;
}

AboutMe

6.04.2010, 14:28:30

Pod IE działa, tylko z FF i Operą jest problem.

Absolute nie wchodzi w grę bo strona jest centrowana.

hieroshima

6.04.2010, 14:31:03

co z tego, że jest centrowana? nic sie nie stanie z tym sidebarem sprawdzalem pod IE FF i Opera i bylo ok

AboutMe

6.04.2010, 14:39:10

To zmień rozdzielczość ekranu i zobaczysz czemu.

krzysztof_kf

6.04.2010, 15:43:38

Cytat(AboutMe @ 6.04.2010, 13:55:27 )

Witam,

Czy ktoś wie dlaczego pierwszy post zawsze się rozszerza do długości sidebara?

Hmm może dodaj jakąś szerokość dla akapitu p np

[HTML] pobierz, plaintext 
 
.text p {
width: 500px;
[HTML] pobierz, plaintext

jak ma ci się takie coś nie rozszerzać ? bez jakiejś wartości ...

pedro84

6.04.2010, 15:59:48

1. Kod słabej jakości
2. Po co dajesz pakujesz nagłówki w divy?
3. #general jest za długi, przy mniejszych rozdzielczościach się wywala.

Co Ci właściwie nie działa?

AboutMe

7.04.2010, 12:26:22

Chodzi mi o rozszerzanie w pionie.
1. post rozszerza się w pionie do długości sidebara.
Gdy mam w lewym sidebarze więcej elementów to 1. post potrafi być długi na tysiące pixeli.

Podejrzewam że to przez float:left

Co do nagłówków w divach to niestety jak dam span to nie działa
border-bottom: 1px solid #626262;

zegarek84

7.04.2010, 13:25:57

Cytat(AboutMe @ 7.04.2010, 13:26:22 )

Podejrzewam że to przez float:left

to nie podejrzewaj tylko zmień/usuń deklarację a przekonasz się, że tak jest...

Cytat(AboutMe @ 6.04.2010, 15:28:30 )

Pod IE działa, tylko z FF i Operą jest problem.

Absolute nie wchodzi w grę bo strona jest centrowana.

akurat IE nie mam pod ręką ale centrowania w podanym przykładzie przez Ciebie też nie ma w mozilli i operze bez żadnych dodatkowych deklaracji ;p

po za tym przez absolute też da się centrować - trzeba tylko pomyśleć..

rozwiązanie na zadane pytanie dostałeś
w tym poście - czego w ogóle Ty jeszcze chcesz??

mortus

7.04.2010, 15:28:23

Witam. Żeby wszystko było w porządku wcale nie trzeba kombinować, wystarczy zmienić styl div-a o identyfikatorze content na taki:

[CSS] pobierz, plaintext 
#content {
    width: 660px;
    margin-top: 20px;
    padding: 10px 10px 10px 10px;
    font: 9pt Verdana, Arial, sans-serif;
    color: #c3c3c3;
    float: left;
}
[CSS] pobierz, plaintext

Jednak na stronie jest dużo więcej błędów. Wrzuć sobie kod do walidatora XHTML to zobaczysz. Podstawowe to:
1. brak znaczników <title> i </title> w sekcji head,
2. brak znacznika rozpoczynającego i kończącego listę <ul> i </ul>, są natomiast same elementy listy <li> i </li>,
3. umieszczenie akapitów (<p>...</p>) wewnątrz nagłówków (<h5> i </h5>),
4. obejmowanie nagłówków <h4>....</h4> akapitami <p>...</p>,
5. używanie <<< zamiast odpowiednich encji,
6. umieszczenie div-a wewnątrz nagłówka <h5>...</h5>.

AboutMe

11.04.2010, 15:29:29

float: left; dla #content nic nie daje,
a przez absolute sidebar najeżdża mi na footer, jeśli content jest krótszy od sidebara.

mortus

11.04.2010, 15:33:35

Cytat(AboutMe @ 11.04.2010, 16:29:29 )

float: left; dla #content nic nie daje

A usunąłeś margin-left: 200px;?

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.