|
Ocena wątku:
- 0 głosów - średnia: 0
- 1
- 2
- 3
- 4
- 5
|
problem z ukladme blokow css
|
Liczba postów: 4
Liczba wątków: 1
Dołączył: 02-01-2011
Reputacja:
0
02-01-2011, 22:25
(Ten post był ostatnio modyfikowany: 02-01-2011, 22:47 przez wazniak.)
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)
Liczba postów: 282
Liczba wątków: 12
Dołączył: 06-03-2010
Reputacja:
7
(02-01-2011, 22:25)wazniak napisał(a): czesc
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?
A może by kod podać?
Pewnie za szeroki jest ten div po lewej.
PHP i MySQL Tworzenie stron WWW Vademecum profesjonalisty Wydanie 4
- sprzedam po rozsądnej cenie, stan jak nowa.
Carpe Di Em
Liczba postów: 4
Liczba wątków: 1
Dołączył: 02-01-2011
Reputacja:
0
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;
}
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 ;]
Liczba postów: 19
Liczba wątków: 0
Dołączył: 30-12-2010
Reputacja:
0
Spróbuj przykleić czerwony blok do prawej krawędzi tego niebieskiego (?)
Liczba postów: 4
Liczba wątków: 1
Dołączył: 02-01-2011
Reputacja:
0
juz mam tam float:right, nawet left dawalem, clear itp i jakos nie dzial 
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
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.
Liczba postów: 4
Liczba wątków: 1
Dołączył: 02-01-2011
Reputacja:
0
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?
Liczba postów: 2,411
Liczba wątków: 14
Dołączył: 10-08-2009
Reputacja:
132
05-01-2011, 20:48
(Ten post był ostatnio modyfikowany: 05-01-2011, 20:50 przez Kartofelek.)
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.
Liczba postów: 2,587
Liczba wątków: 2
Dołączył: 03-04-2010
Reputacja:
58
Poza tym, to powinna być lista (w zależności jeszcze od zawartości).
|
Użytkownicy przeglądający ten wątek: 1 gości
|
|
|
Sponsorzy i przyjaciele
|
|
|
