|
Frennzy
Profil |
#1 · Zasláno: 6. 2. 2011, 10:10:04
Dobrý den,
už dva dny bojuji s css. Mám za sebou úspěšnou tvorbu několika stránek, ale na toto nemůžu přijít. Vlastně vůbec nechápu, proč to nefunguje.
Problém je v tom, že výška divu "content" se mi nezvětšuje s obsahem. Když vložím text přímo do něj, není problém, ale já potřebuji v tomto divu mít ještě div "obsah" a "sidebar" a až v nich mít text/obsah. Nastavovat pevnou výšku contentu se mi nehodí.
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="cz">
<head>
<title>My page</title>
<meta name="description" content="" />
<meta name="generator" content="Roden Web Editor"/>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="blogname">
<h1>PR-tipy</h1>
<h2>Katalog PR článků</h2>
</div>
</div>
<div id="foxmenucontainer">
<div id="foxmenu">
<ul>
<li><a href="index.html">Domu</a></li>
<li><a href="onas.html">O nás</a></li>
<li><a href="pridat.html">Přidat článek</a></li>
<li><a href="pridat.html">Nový článek</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="obsah">
<a>Normálně si prvky počítají výšku podle svého obsahu. Výška se jim dá ale i zadat vlastností height.
Pokud je obsah prvku menší než výška zadaná vlastností height, pod obsahem bude prázdné místo. Co naopak přeteče, řeší vlastnost overflow. Přetečený obsah zvětší v Exploreru výšku prvku. V jiných prohlížečích ne (což většinou není problém, pokud se z toho nedopočítávají další vnořené věci nebo pokud prvek nemá rámeček).
Podle specifikace vlastnost height nefunguje na řádkové elementy (např. odkaz <a>). U nich by mělo být potřeba pro nastavení výšky použít výšku řádku line-height nebo jim předtím říci, že jsou blokové (display: block). To ale platí jenom u normálních prohlížečů (třeba Mozilla). Internet Explorer v quirk modu totiž dovoluje výšku nastavovat i pro řádkové elementy. Příklad použití height na řádkový element. V praxi je ale lepší fakt na to používat line-height.
Vlastnost height se velmi podobá vlastnosti width (šířce), ale existují rozdíly. Například ve výpočtu procent. Šířka width bere za základ šířku dokumentu, kdežto height bere jako základ výšku okna.
Internet Explorer (v quirk módu) chybně počítá do výšky height i border a padding, kdežto podle specifikace (a Mozilla nebo standardní mód Exploreru to tak dělá) se border a padding do výšky (height) nepočítají.
</a> </div>
<div class="sidebar">
<ul>
<li>
<h2>Rubriky</h2>
<ul>
<a href="Auto-moto.html">Auto-moto</a>
</ul>
</li>
<li>
<h2>Odkazy</h2>
<ul>
<a href="nevim.html">nevim</a>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>style.css
body {
margin:0;
padding-top:0px;
background:#1f1f1f url(images/body.jpg) center repeat-y;
font-family:Century gothic, Arial,Tahoma,sans-serif;
color:#cfcfcf;
font-size:13px;
}
img {
border:0;
}
a {
color:#cc9f4a;
text-decoration:none
}
a:hover {
color:#fff;
text-decoration:none
}
h1, h2, h3, h4, h5, h6 {
}
blockquote {
padding-left:10px;
color:#666;
font-style: normal;
}
.clear {
clear:both;
}
.alignleft {
float:left;
padding:2px 0 0 5px;
}
.alignright {
float:right;
padding:2px 0 0 5px;
}
/* The Menu */
#foxmenucontainer{
height:28px;
background:#0b0d0d;
display:block;
padding:0px 0 0px 0px;
border-top:1px solid #4f5155;
}
#foxmenu{
position:relative;
display:block;
height:28px;
font-size:13px;
font-weight:normal;
font-family:Tahoma,Verdana,Helvitica,sans-serif;
}
#foxmenu ul{
margin:0px;
padding:0px 0px 0 10px;
list-style-type:none;
width:auto;
float:left;
}
#foxmenu ul li{
display:block;
float:left;
margin:0 0px 0 0;
width:84px;
}
#foxmenu ul li a{
display:block;
float:left;
color:#ccc;
text-align: center;
text-decoration:none;
padding:7px 0px 0 0px;
width:84px;
height: 21px;
background:#eee url(images/li2.gif) no-repeat top right;
}
#foxmenu ul li a:hover,#foxmenu ul li.current_page_item a{
color:#fff;
background:#222 url(images/li2.gif) no-repeat top left;
width:84px; height: 21px;
text-align: center;
}
#foxmenu ul li .current_page_item a,#foxmenu ul li .current_page_item a:hover{
color:#fff;
width: 84px; height: 21px;
background:transparent url(images/li2.gif) no-repeat top right;
}
/* The Wrapper */
.wrapper {
width:1000px;
margin:0 auto;
background:y;
border-left:1px solid #302f2f;
border-right:1px solid #302f2f;
}
/* The Top */
.top {
height:212px;
margin:auto;
background:url(images/top.jpg);
background-repeat:no-repeat;
}
.blogname {
float:right;
width:1000px;
font-family:Georgia,century gothic, Arial, sans-serif;
margin:0px 0 0 0;
}
.blogname h1 {
font-size:40px;
font-weight:normal;
margin:60px 20px 0 0px;
color:#cfcfcf;
text-decoration: none;
text-align:right;
font-weight:bold;
}
.blogname h1 a:link, .blogname h1 a:visited{
color: #cfcfcf;
text-decoration: none;
background-color:transparent;
}
.blogname h1 a:hover {
color: #fff;
text-decoration: none;
background-color:transparent;
}
.blogname h2 {
margin:0px 20px 0 30px;
font-size:16px;
font-weight:normal;
color:#fff;
text-align:right;
}
.content {
padding:0px 10px 25px 5px;
background:#282c2f ;
border-top:1px solid #404547;
}
.obsah {
float: left;
width: 760px;
margin: 0px 0px 0px 5px;
padding: 0 0;
}
.title{
margin: 0 0 0;
padding: 10px 0px 0px 10px;
height:70px;
background:url(images/title.jpg)
}
.date {
float:left;
height:14px;
font-size:14px;
font-family:Century gothic,Verdana,Helvitica,sans-serif;
padding-left:10px;
padding-top:2px;
font-weight:normal;
color:#919191;
}
.time{
text-align:left;
width:140px;
height:25px;
margin-top:2px;
font-family:Georgia,century gothic, Arial, sans-serif;
padding:1px 0 0 17px;
color:#fff;
float:right;
font-size:12px;
}
.post {
margin: 10px 10px 0 5px;
padding:0px 0px 0px 0px;
height: 100%;
text-align:left;
color:#777;
font: 13px Georgia,century gothic, Arial, sans-serif;
}
.post h2 {
margin: 0 0;
padding: 10px 0px 5px 10px;
background: transparent;
text-align: left;
font: 24px Georgia,century gothic, Arial, sans-serif;
font-weight:normal;
}
.post h2 a, .post h2 a:link, .post h2 a:visited {
color: #fff;
background-color: transparent;
}
.post h2 a:hover {
color: #fff;
background-color: transparent;
}
.postinfo {
height:31px;
padding: 4px 5px 0px 2px;
background:url(images/meta.jpg);
}
.spostinfo {
height:34px;
padding: 4px 5px 0px 2px;
background:url(images/smeta.jpg);
}
.postinfo a:link {
color:#e35416;
font-weight:normal;
text-decoration:none;
}
.category{
float:left;
padding:0px 0 0 5px;
color:#222;
background:url(images/categ.gif);
background-repeat:no-repeat;
font-size:12px;
}
.postinfo .com{
line-height:15px;
float:left;
padding:10px 0px 0 10px;
background:url(images/comments.gif);
background-repeat:no-repeat;
font-size:11px;
}
.postinfo .com a:link,
.postinfo .com a:visited {
color:#cc9f4a;
background-color: transparent;
}
.postinfo .com a:hover{
color:#fff;
}
.post a:link,
.post a:visited {
color: #cc9f4a;
background-color: transparent;
}
.post a:hover {
color: #f4e0e0;
background-color: transparent;
text-decoration: none;
}
.entry {
margin: 0 0;
padding: 5px 10px;
}
.cover{
margin: 0 0;
background:url(images/cover.jpg);
background-repeat:repeat-y;
}
.rightcolumn{
float:right;
width:200px;
}
/* The Sidebar1*/
.sidebar{
float:right;
width:200px;
padding-top:10px;
padding-right:10px;
font-size:13px;
font-family: Georgia,century gothic, Arial, sans-serif;
}
.sidebar h2 {
height:27px;
line-height:27px;
font-size:18px;
color:#cc9f4a;
margin:5px 0 0 0 ;
padding:0px 0 0 5px;
background:#131313 ;
background-repeat:repeat-x;
font-weight:normal;
}
.sidebar ul {
list-style-type: none;
margin: 0 ;
padding: 0;
}
.sidebar ul li {height:100%;
}
.sidebar ul li a:link, .sidebar ul li a:visited {
|
|
|
Plaváček
Profil |
#2 · Zasláno: 6. 2. 2011, 10:15:39 · Upravil/a: Plaváček
Frennzy:
Dodej odkaz na "živou" ukázku, většina těch, kdo rádi poradí, se v takto dlouhém kódu dloubat nebude. Možná jeden krátký tip: zkus DIVu .content nastavit vlastnost overflow:hidden.
P.S. možná něco ke studiu neuškodí: http://www.pixy.cz/pixylophone/2003_12_archiv.html#1071056082
|
|
|
Neo_The_Sniper
Profil |
#3 · Zasláno: 6. 2. 2011, 11:37:51 · Upravil/a: Neo_The_Sniper
Čo takto nastaviť div-u content min-height a potom by sa ti to malo v pohode zvetšovat... Pridaj živú ukážku, nikomu sa nebude chcieť to celé študovať :)
|
|
