PC-HELP.CZ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
<meta name="generator" content="PSPad editor, www.pspad.com"> 
<title></title> 
<link rel="stylesheet" href="style.css" type="text/css"> 
</head> 
<body> 

<div id="celek"> 

<div> 
<img src="fotky/vrsek.png" alt="vrsek.png, 998B" title="vrsek" border="0" height="60" width="454"> 
</div> 
<div id="left"> 
<img src="fotky/prostredek.png" alt="prostredek.png, 199kB" title="prostredek" border="0" height="479" width="454"> 

</div> 
<div id="content"> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 

</div> 
<div id="right"> 
</div> 
</div> 
</body> 
</html>

Kód: Vybrat vše

/* CSS Document */ 
#left{clear: left;} 
#left, #right, #content {float: left;} 
#left {width: 454px;} 
#content {} 
#right {} 
#celek{width: 100%;height: 454px; 
}

Potřebuju aby se text psal od obrázku prostredek.png byl vysoký 454px a široký od toho obráku do konce stránky takže 100%. Nevím proč ale pokaždý mě to odskočí o řádek níš

Kdybych aspoň pochopil, co potřebuješ, ale tvůj text se pochopit nedá.. Koukni se na základy cascádových stylů.
Jak chceš zarovnávat divy, když jim nic nenastavíš?
#content {}
#right {}
Ještě nechápu, proč v css nastavuješ 3x #left viz -
#left{clear: left;}
#left, #right, #content {float: left;}
#left {width: 454px;}
Nebyl by jednodušší to udělat takto
#left {
clear: left;
float: left;
width: 454px;
}

Proč používáš clear left?

zjednodušeně
#div levý {
float: left;
width: 100px;
height: 100px;
}
#div pravý {
float: left;
width: 100px;
height: 100px;
}

<html>
<div levý>Obsah levého divu</div>
<div pravý>Obsah pravého divu</div>
</html>

Ještě pár hodin studuj.. Stáhni si třeba tady hotový šablony a koukni, jak to mají dělaný

Pro inspiraci malá ukázka dvou divů vedle sebe -

test.rar: (224 bajtů) Staženo 123 x

http://blazule-zkouska.ic.cz/
predstav si že tam nemáš ten pravej červenej div a potřebuju aby se ten černej prostřední roztáhoval na 100% od tý levý fotky-

PS: ten kód co sem napsal je "vytrhanej z předejšlejch stránek "

Když ho roztáhneš na 100% tak se ty dva překryjí. A od té fotky to dát nejde, protože je tam daná jako pozadí. To už by bylo trochu složitější.

Kód: Vybrat vše

<!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=iso-8859-1" />
<title>Fixed Width CSS Layouts - 2 Column - fw-28-2-col</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>


       
       <!-- Begin Left Column -->
       <div id="leftcolumn">
       
         <img src="fotky/prostredek.png" alt="prostredek.png, 199kB" title="prostredek" border="0" height="479" width="454">
       
       </div>
       <!-- End Left Column -->
       
       <!-- Begin Right Column -->
       <div id="rightcolumn">
             
             <a href="#">Download this CSS Layout</a>       
       
       </div>
       <!-- End Right Column -->
       
  
   
</body>
</html>

Kód: Vybrat vše


#leftcolumn { 
 float: left;
}
#rightcolumn { 
 float: right;
 height: 454px;
 width: 100%;
 display: inline;
 position: relative;
 background-color: red;
}

Myslel jsem že když určím 100% divu tak se roztáhne v tom divu do konce stránky, jenže jak si psal ty překryje předešlou fotku nebo se prostře posune celej div na další řádek.

Roztáhne se na 100% nadřazeného prvku! Prvně si musíš nastavit obal celé tvé stránky. Až podle toho obalu se daný div roztáhne tak, jak má.

Mohl bys prosím napsat kód. Todle jsem jaksi nepochopil.

<obal>
<div id="left">
text v levém divu
</div>

<div id="right">
text v pravém divu
</div>
</obal>

Pokud bude mít obal šířku 1024px a nastavíš divu left 100% tak se roztáhne taky na 1024px (podle nadřazeného prvku). Ale nemůžeš to tak udělat, protože ti v tu chvíli nezbyde místo na druhý div (který ty v tomto topicu nejspíš žádáš). Ještě jsem nepřišel na to, co vlastně potřebuješ?

Potřebuju mít 2 divy (pravej a levej) který maj float: left tzn. že jsou vedle sebe. V levém divu je fotka a v pravý div má mít černé pozadí a roztáhnou se do konce stránku tzn. do prava. Prostě width: 100%.

Sakra. Buď tě nechápu, nebo myslíš uplně něco jinýho
Když mám 2 divy vedle sebe a jednomu nastavím šířku 100% tak ten druhej musí zákonitě překrýt!

udělej 3 div, tomu nadřazenýmu dej width:100% a do něj 2 DIVy který mají bejt vlevo a vpravo, kódově:

Kód: Vybrat vše

<div style="width:100%">
<div style="float:left">levý</div>
<div style="float:right">pravý</div>
</div>

nebo pokud je chceš mít vedle sebe tak oboum float:left

PC-HELP.CZ

2 Divy vedle sebe

2 Divy vedle sebe

Re: 2 Divy vedle sebe

Re: 2 Divy vedle sebe

Re: 2 Divy vedle sebe

Re: 2 Divy vedle sebe

Re: 2 Divy vedle sebe

Re: 2 Divy vedle sebe

Re: 2 Divy vedle sebe

Re: 2 Divy vedle sebe

Re: 2 Divy vedle sebe

Re: 2 Divy vedle sebe