2 Divy vedle sebe

Místo pro dotazy a rady ohledně programovacích jazyků (C++, C#, PHP, ASP, Javascript, VBS..) a tvorby webových stránek

Moderátor: Mods_senior

Uživatelský avatar
G0dzila
Level 2.5
Level 2.5
Příspěvky: 277
Registrován: březen 10
Bydliště: Znojmo/Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

2 Divy vedle sebe

Příspěvekod G0dzila » 05 led 2011 18:25

Kód: Vybrat vše

<!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íš

Reklama
Uživatelský avatar
Stene
Level 6
Level 6
Příspěvky: 3124
Registrován: únor 09
Bydliště: Jihlava
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: 2 Divy vedle sebe

Příspěvekod Stene » 05 led 2011 19:25

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
Naposledy upravil(a) Stene dne 05 led 2011 19:34, celkem upraveno 1 x.

Uživatelský avatar
G0dzila
Level 2.5
Level 2.5
Příspěvky: 277
Registrován: březen 10
Bydliště: Znojmo/Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: 2 Divy vedle sebe

Příspěvekod G0dzila » 05 led 2011 19:33

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 "

Uživatelský avatar
Stene
Level 6
Level 6
Příspěvky: 3124
Registrován: únor 09
Bydliště: Jihlava
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: 2 Divy vedle sebe

Příspěvekod Stene » 05 led 2011 19:35

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ší.

Uživatelský avatar
G0dzila
Level 2.5
Level 2.5
Příspěvky: 277
Registrován: březen 10
Bydliště: Znojmo/Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: 2 Divy vedle sebe

Příspěvekod G0dzila » 05 led 2011 19:46

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.

Uživatelský avatar
Stene
Level 6
Level 6
Příspěvky: 3124
Registrován: únor 09
Bydliště: Jihlava
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: 2 Divy vedle sebe

Příspěvekod Stene » 05 led 2011 19:53

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á.

Uživatelský avatar
G0dzila
Level 2.5
Level 2.5
Příspěvky: 277
Registrován: březen 10
Bydliště: Znojmo/Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: 2 Divy vedle sebe

Příspěvekod G0dzila » 05 led 2011 19:56

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

Uživatelský avatar
Stene
Level 6
Level 6
Příspěvky: 3124
Registrován: únor 09
Bydliště: Jihlava
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: 2 Divy vedle sebe

Příspěvekod Stene » 05 led 2011 20:49

<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š?

Uživatelský avatar
G0dzila
Level 2.5
Level 2.5
Příspěvky: 277
Registrován: březen 10
Bydliště: Znojmo/Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: 2 Divy vedle sebe

Příspěvekod G0dzila » 06 led 2011 07:24

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%.

Uživatelský avatar
Stene
Level 6
Level 6
Příspěvky: 3124
Registrován: únor 09
Bydliště: Jihlava
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: 2 Divy vedle sebe

Příspěvekod Stene » 06 led 2011 18:30

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!

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: 2 Divy vedle sebe

Příspěvekod CZechBoY » 07 led 2011 11:16

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
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW


  • Mohlo by vás zajímat
    Odpovědi
    Zobrazení
    Poslední příspěvek
  • Tisk sloupců vedle sebe na A4 - Excel
    od atari » 24 dub 2025 10:51 » v Kancelářské balíky
    5
    3906
    od atari Zobrazit poslední příspěvek
    26 dub 2025 09:11

Zpět na “Programování a tvorba webu”

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 2 hosti