Mám jeden problém, už si s tým neviem rady, tak to napíšem sem, snáď mi pomôžete. Spravil som si jednu stranku, spodná časť kde je problém (vyznačené červeným) vyzerá takto:
A problém je nasledovný:
Keď napíšem niečo dlhšie do pravej časti (v CSS ako right) tak sa mi to roztiahne na výšku smerom dole ako vidíte na obrázku, spolu s footerom. Lenže neviem prečo sa mi spolu s tou pravou časťou neroztiahne aj content a pritom prava časť "right" je v contente, tak teoreticky by sa to malo rozťahovať spolu, ale nie. Vidíte tam takú sivú voľnú časť, keďže sa neroztiahne ten content.
Fakt už neviem čo s tým, možno je to len banalita, ale nejak ma nenapadá kde je problém.
Tu je ešte
articles.php (stránka na obrázku) :
Kód:
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name='content-language' content='sk' />
<meta name='author' content='M4rek' />
<meta name='keywords' content="M4rek, M4rek22, M4rek's web, M4rek's portal, M4rek's weblog, xp, youtube, ako stahovat videa z youtube, galeria, navody, opensuse 10.3, ad2622, usb modem ad2622" />
<meta name='description' content="M4rek's portal" />
<meta name='robots' content='follow, all' />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>M4rek`s test page</title>
</head>
<body>
<div id="box">
<div id="header">
<div id="menu">
<a href="index.php">Home</a>
<a href="aboutme.php">O mne</a>
<a href="articles.php">Články</a>
<a href="gallery.php">Galéria</a>
<a href="contact.php">Kontakt</a>
</div>
</div>
<div id="between">
</div>
<div id="content">
<div id="left">
<h2>Novinky</h2>
<b>16.7.2008</b> - spustená stránka s novým designom
<h2>Odkazy</h2>
<a href="http://www.panther.php5.sk" onclick="return !window.open(this.href);">PANTHER`s Web</a><br />
<a href="http://math3z.php5.sk" onclick="return !window.open(this.href);">maTh3z's Techlog</a>
<p>XHTML validné a CSS validné stránky.</p>
</div>
<div id="right">
<h1>Články</h1>
<a href="jaalinux.php"><h2>Ja a Linux</h2></a>
<p>Prvýkrát som sa dostal k Linuxu niekedy minulý rok (2007), keď mi jeden kamarát poslal odkaz na jednu z distribúcií, myslím že to bolo Ubuntu. Stránku som si prezrel, pozrel som si nejaké screeny a dosť ma to zaujalo. A tak ma napadlo, prečo nevyskúšať niečo iné ako Windows ? Za vyskúšanie nič nedám. Stiahol som si teda live cd,...</p><br />
<a href="adsl-modem-navod.php"><h2>AD2622 USB modem v openSUSE 10.3</h2></a>
<p>Vlastníte USB modem AD2622 od Microcomu-u a máte s ním problémy pod linuxovou distribúciou <a href="http://www.opensuse.org" onclick="return !window.open(this.href);">openSUSE 10.3</a>? Ja som mal tiež tento problém, dlho som skúšal rôzne návody ako ho nakonfigurovať, pomaly som už strácal trpezlivosť, až som sa nakoniec dostal k návodu pre openSUSE 10, ktorý mi pomohol, preto som sa rozhodol napísať vám návod ako "rozbeháte" tento modem v openSUSE 10.3.</p><br />
<a href="youtube.php"><h2>Ako sťahovať videá z YouTube.com ?</h2></a>
<p>Zvyknete si prezerať videá na <a href="http://www.youtube.com" onclick="return !window.open(this.href);">www.youtube.com</a> a chceli by ste si niektoré videá posťahovať do počítača ? Je to úplne jednoduché: ... </p><br />
<a href="prispusteni.php"><h2>Programy pri spustení</h2></a>
<p>Spúšťa sa vám veľa zbytočných programov pri štarte OS (Windows XP)? Chcete aspoň o niečo zrýchliť spúštanie vášho "XP-čka"? Tak tento návod je práve pre Vás:...</p>
<div class='podtext'>Kliknutím na nadpis článku sa vám zobrazí celý článok.</div>
</div>
</div>
<div id="footer">
<p>M4rek © 2008. Všetky práva vyhradené. Stránky sú optimalizované pre prehliadače Opera, Firefox a IE 7.</p>
</div>
</div>
</body>
</html>
CSS :
Kód:
body {
background: #272627 url('images/bg.jpg') repeat-x;
margin: 0;
padding: 0;
font-size: 14px;
font-family: Arial, sans-serif;
font-weight: normal;
text-align: justify;
color: #fff;
}
h1 {
font: 2em Arial;
color: #902690;
padding: 0 0 10px 0;
margin: 0;
}
h2 {
font: 1.5em Arial;
color: #902690;
padding: 12px 0 5px 0;
margin: 0;
}
a {
color: #cb33cb;
padding: 0 0 0 0;
margin: 0;
text-decoration: none;
}
#box {
width: 800px;
min-height: 850px;
margin: 20px auto;
background-color: #121112;
border: 0px solid #fff;
}
#header {
background: #121112 url('images/header.jpg') no-repeat;
width: 790px;
height: 120px;
color: #000;
padding: 0 0 0 0;
margin: 10px 10px 10px 10px;
}
#menu {
color: #fff;
padding: 0 0 0 0;
margin: 0 0 0 0;
float: right;
border: 0px solid black;
position: relative;
left: -50px;
top: 88px;
}
#menu a {
background: #121112 url('images/a.jpg') no-repeat;
color: #e8e3e8;
float: left;
font: 1.1em sans-serif;
line-height: 20px;
padding: 3px 0 0 0;
margin: 0 0 0 0;
text-decoration: none;
height: 24px;
width: 79px;
text-align: center;
}
#menu a:hover {
color: #ae0eae;
}
#between {
width: 747px;
height: 200px;
background: #121112 url('images/between.jpg') no-repeat;
color: #000;
padding: 0 0 0 0;
margin: 0 0 0 0;
position: relative;
top: 10px;
left: 25px;
}
#content {
width: 800px;
min-height: 400px;
background-color: #121112;
color: #dddcdd;
padding: 0 0 0 0;
margin: 0 0 0 0;
position: relative;
left: 0px;
top: 70px;
}
#left {
width: 188px;
min-height: 300px;
background-color: #121112;
color: #dddcdd;
padding: 0 0 0 0;
margin: 0 0 0 0;
float: left;
position: relative;
top: -5px;
left: 25px;
}
#left a {
color: #f0d3f0;
padding: 0 0 0 0;
margin: 0;
text-decoration: none;
}
#left a:hover {
color: #f0d3f0;
padding: 0 0 0 0;
margin: 0;
text-decoration: underline;
}
#left p {
color: #dddcdd;
padding: 20px 0 0 0;
margin: 0;
}
#right {
width: 522px;
min-height: 300px;
background-color: #121112;
color: #dddcdd;
padding: 0 0 0 0;
margin: 0 0 0 0;
position: relative;
left: -28px;
float: right;
}
ul#omne {
list-style-type: square;
line-height: 19px;
}
p {
padding: 0 0 10px 0;
margin: 0 0 0 0;
}
#footer {
background: #121112 url('images/footer.jpg') no-repeat;
width: 800px;
height: 40px;
background-color: #fff;
color: #dddcdd;
padding: 0 0 0 0;
margin: 0 0 0 0;
clear: both;
text-align: center;
position: relative;
top: 70px;
}
#footer p {
padding: 15px 0 0 0;
color: #c4c4c4;
font: 0.8em sans-serif;
}
Viem, že Vám to zaberie asi veľa času, kým si to preštudujete, ale budem Vám vďačný ak sa nato pozriete.