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

Odpovědět
Uživatelský avatar
G0dzila
Level 2.5
Level 2.5
Příspěvky: 277
Registrován: 18 bře 2010 18:44
Bydliště: Znojmo/Brno
Kontaktovat uživatele:

2 Divy vedle sebe

Příspěvek od G0dzila »

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íš
Uživatelský avatar
Stene
Level 6
Level 6
Příspěvky: 3124
Registrován: 11 úno 2009 15:44
Bydliště: Jihlava
Kontaktovat uživatele:

Re: 2 Divy vedle sebe

Příspěvek od Stene »

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 128 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: 18 bře 2010 18:44
Bydliště: Znojmo/Brno
Kontaktovat uživatele:

Re: 2 Divy vedle sebe

Příspěvek od G0dzila »

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: 11 úno 2009 15:44
Bydliště: Jihlava
Kontaktovat uživatele:

Re: 2 Divy vedle sebe

Příspěvek od Stene »

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: 18 bře 2010 18:44
Bydliště: Znojmo/Brno
Kontaktovat uživatele:

Re: 2 Divy vedle sebe

Příspěvek od G0dzila »

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: 11 úno 2009 15:44
Bydliště: Jihlava
Kontaktovat uživatele:

Re: 2 Divy vedle sebe

Příspěvek od Stene »

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: 18 bře 2010 18:44
Bydliště: Znojmo/Brno
Kontaktovat uživatele:

Re: 2 Divy vedle sebe

Příspěvek od G0dzila »

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: 11 úno 2009 15:44
Bydliště: Jihlava
Kontaktovat uživatele:

Re: 2 Divy vedle sebe

Příspěvek od Stene »

<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: 18 bře 2010 18:44
Bydliště: Znojmo/Brno
Kontaktovat uživatele:

Re: 2 Divy vedle sebe

Příspěvek od G0dzila »

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: 11 úno 2009 15:44
Bydliště: Jihlava
Kontaktovat uživatele:

Re: 2 Divy vedle sebe

Příspěvek od Stene »

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: 20 srp 2008 14:02
Bydliště: Brno
Kontaktovat uživatele:

Re: 2 Divy vedle sebe

Příspěvek od CZechBoY »

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
Odpovědět
  • Podobná témata
    Odpovědi
    Zobrazení
    Poslední příspěvek
  • Tisk sloupců vedle sebe na A4 - Excel
    od atari » » v Kancelářské balíky
    5 Odpovědi
    5973 Zobrazení
    Poslední příspěvek od atari

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