+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: problem z ukladme blokow css (/thread-problem-z-ukladme-blokow-css)
problem z ukladme blokow css - wazniak - 02-01-2011
czesc
mam problem z poprawnoscia ukladu blokow
Jak dodaje zolty blok wiecej niz raz to ten po prawo czerwony spada mi na dol.. jak to ogarnac zebylo tak jak na drugim obrazku? Moze posiada ktos gotowy kod?
![[Obrazek: 23253075810270612359.gif]](http://iv.pl/images/23253075810270612359.gif)
![[Obrazek: 17455048683761064642.gif]](http://iv.pl/images/17455048683761064642.gif)
RE: problem z ukladme blokow css - KeeL - 02-01-2011
(02-01-2011, 22:25)wazniak napisał(a): czescA może by kod podać?
mam problem z poprawnoscia ukladu blokow
Jak dodaje zolty blok to ten po prawo czerwony spada mi na dol.. jak to ogarnac zebylo tak jak na drugim obrazku?
Pewnie za szeroki jest ten div po lewej.
RE: problem z ukladme blokow css - wazniak - 02-01-2011
CSS
Kod:
body {
background-color: #9cafff;
margin:0px;
padding: 0px;
background-image:url(images/bg.png);
background-repeat:repeat-x;
}
img {
border: 0px;
}
h1{
font-size:24px;
font-family:Verdana, Geneva, sans-serif;
color: #2c2c29;
}
.kontener {
width: 881px;
margin-left: auto;
margin-right: auto;
clear:both;
}
.top {
background-image:url(images/top.png);
width: 881px;
height: 430px;
}
.kontent {
background-image:url(images/kontent_bg.png);
background-repeat:repeat-y;
overflow: hidden;
}
.kontener-news {
float:left;
width: 648px;
}
.data {
float:left;
width: 66px;
height: 101px;
background-image:url(images/data.png);
}
.kontent-news {
width: 581px;
float: right;
}
.kontener-sidebar {
width: 233px;
float:right;
}
.news-tytul {
width: 521px;
float:left;
padding-left: 25px;
padding-right: 35px;
}
#clear { clear: both; }
.news-tresc {
float:left;
width: 541px;
color: #2c2c29;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
padding-left: 25px;
padding-right: 15px;
padding-top: 20px;
padding-bottom: 30px;
}
.czytajwiecej {
background-image:url(images/czytajwiecej.gif);
margin-left: 20px;
padding-left: 10px;
padding-top: 4px;
font-family:Verdana, Geneva, sans-serif;
font-size: 10px;
color: #2c2c29;
width: 546px;
height: 18px;
float:left;
}
.katmore {
color: #53534c;
}
.more {
color: #fff;
height: 18px;
width: 85px;
float:right;
}HTML
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez tytułu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="kontener">
<div class="top">Tu znajdzie się zawartość class "top"</div>
<div class="kontent">
<!--kod news-->
<div class="kontener-news">
<div class="data"></div>
<div class="kontent-news">
<div class="news-tytul">
<h1>Tytul</h1>
<img src="images/pasek.gif"/>
</div>
<div class="news-tresc">
sdsdsd
</div>
<div class="czytajwiecej">Napisano w: <span class="katmore"><a href="">Kotwice</a></span>
<div class="more"><a href="">Czytaj wiecej</a></div>
</div>
</div>
</div>
<!--KONIEC kod news-->
<!--kod news-->
<div class="kontener-news">
<div class="data"></div>
<div class="kontent-news">
<div class="news-tytul">
<h1>Tytul</h1>
<img src="images/pasek.gif"/>
</div>
<div class="news-tresc">
sdsdsd
</div>
<div class="czytajwiecej">Napisano w: <span class="katmore"><a href="">Kotwice</a></span>
<div class="more"><a href="">Czytaj wiecej</a></div>
</div>
</div>
</div>
<!--KONIEC kod news-->
<div class="kontener-sidebar">
<p>side bar</p>
</div>
</div>
</div>
</body>
</html>troche chlew jest ;]
RE: problem z ukladme blokow css - maciejkk - 02-01-2011
Spróbuj przykleić czerwony blok do prawej krawędzi tego niebieskiego (?)
Kod:
float: right;RE: problem z ukladme blokow css - wazniak - 03-01-2011
juz mam tam float:right, nawet left dawalem, clear itp i jakos nie dzial
RE: problem z ukladme blokow css - Kartofelek - 03-01-2011
float:right na 100% zadziala. Pewnie masz albo cleat both dla tych zoltych, albo szerokosc. Zreszta zawsze mozesz dodac blok obejmujacy dla tych zoltych - ale to nie jest potrzebny.
RE: problem z ukladme blokow css - wazniak - 05-01-2011
Dobra robilem to bez zbednych divow od nowa na czysto i jednak jesli sie to nie wsadzi w osobny div to nie dziala tak jak ma dzialac ;] obrazki przedstawiaja ocb
![[Obrazek: 93876694384069428926.gif]](http://iv.pl/images/93876694384069428926.gif)
Cytat:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez tytułu</title>
<style type="text/css">
#kontener {
margin: auto;
width: 800px;
border: 1px solid #F00;
overflow: hidden;
}
#lewa {
float: left;
width: 598px;
border: 1px dotted #060;
}
#prawa {
float: right;
width: 198px;
border: 1px dashed #F0F;
}
</style>
</head>
<body>
<div id="kontener">
<div id="lewa">Tu znajdzie się zawartość id "lewa"</div>
<div id="lewa">Tu znajdzie się zawartość id "lewa"</div>
<div id="lewa">Tu znajdzie się zawartość id "lewa"</div>
<div id="lewa">Tu znajdzie się zawartość id "lewa"</div>
<div id="prawa">Tu znajdzie się zawartość id "prawa"</div>
</div>
</body>
</html>
![[Obrazek: 92997600305075670798.gif]](http://iv.pl/images/92997600305075670798.gif)
Cytat:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez tytułu</title>
<style type="text/css">
#kontener {
margin: auto;
width: 800px;
border: 1px solid #F00;
overflow: hidden;
}
#opakowanie {
float:left;
width:600px;
}
#lewa {
float: left;
width: 598px;
border: 1px dotted #060;
}
#prawa {
float: right;
width: 198px;
border: 1px dashed #F0F;
}
</style>
</head>
<body>
<div id="kontener">
<div id="opakowanie">
<div id="lewa">Tu znajdzie się zawartość id "lewa"</div>
<div id="lewa">Tu znajdzie się zawartość id "lewa"</div>
<div id="lewa">Tu znajdzie się zawartość id "lewa"</div>
<div id="lewa">Tu znajdzie się zawartość id "lewa"</div>
</div>
<div id="prawa">Tu znajdzie się zawartość id "prawa"</div>
</div>
</body>
</html>
Jak widac potrzebny byl dodatkowy div a czy da sie zrobic bez niego?
I mam jeszxcze jedno pytanie. skoro ten div "lewa" bede powtarzal to chyba zamiast definiowac go jako ID powinienem jako CLASS czy sie myle?
RE: problem z ukladme blokow css - Kartofelek - 05-01-2011
Ale przecież bez niego jest błędnie!
Tu nie chodzi o to, by pisać jak najmniej kodu, ale jak najbardziej logiczny.
Jeżeli powtarzasz na TEJ SAMEJ stronie to oczywiście tak. Jeżeli jest 1 raz na stronie to już nie koniecznie. Inna sprawa, że ostatnimi czasy poleca się stosować SAME KLASY. Ostatnio bawiłem się takim stylowaniem i powiem szczerze że jest bardzo fajne.
RE: problem z ukladme blokow css - Pedro84 - 05-01-2011
Poza tym, to powinna być lista (w zależności jeszcze od zawartości).