- Sans titre.png (5.58 KiB) Zobrazeno 1101 x
CSS - zarovnani divu Vyřešeno
CSS - zarovnani divu
zdravim, mam 2 divy v containeru, potrebuju je zarovnat tak, jak jsou na obrazku, pokud mozno bez absolutni pozice. poradil by mi prosim nekdo jak na to? dekuji
Re: CSS - zarovnani divu Vyřešeno
Nic složitého:
Pokud bys měl nějakou nejasnost, klidně se ptej.
Ty odstavce s textem jsem tam dal proto, aby to vypadalo jako stránka s textem. Pokud by tam totiž nebyl žádný text, musel bys nastavovat výšku divů (implicitně mají nulovou).
DIVy jsem obarvil, aby bylo poznat, který je který.
Kontejneru jsem nastavil šířku 100px jako 960px + padding 2× 20px = 100px celkem, ale to platí ve standardním vykreslovacím režimu (viz !DOCTYPE). V Quirku by to bylo celkem jen 960px.
Konečně ve zdejším boxu s CODE je to nepřehledné, ale zkopíruj si to třeba do PSPadu a všechno je v kódu přehledně zarovnané.
Kód: Vybrat vše
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body, div, p {margin: 0; padding: 0;}
p {text-indent: 2em;}
body {background-color: black;}
#container {width: 960px; background-color: #ffe; margin: auto; padding: 20px;}
#div1 {width: 500px; background-color: #990; margin: auto;}
#div2 {width: 200px; background-color: #099; float: right;}
hr {clear: right; visibility: hidden;} /*čistič - kvůli floatu */
</style>
<title>Příklad se zarovnýním divů</title>
<div id="container">
<div id="div2">
<p>Božnám vla podtrojdi oba autobzor dobrajen já drávadlov říky Buben jít. Oba dostě božkamezi dosticí je Buben podtrojdi hudba zako dráček ští.
<p>Ana úmyva umraburdí nim sudbale tak lákamat vůně úmyvalem Trhnova magnednem. Muto pokemi aložek lák ští boutný onověď hal ří dostrojsk Umyslupos. Dobožek.
<p>Nim poc parcipádn zteplaled jený Umínkama škočiledo z kajední sudba sou. Úmyvat no krádní Básněžný ko hudbalo úmyvalemi vá čuvalemi škočiledo božkamezi. Ačít.
<p>Ačkový Tor lžičkaký Je krádní povodlobi odobzor uměsí umrad básná mutor. Starásný hulákak nuchváled málně nasíční z roští projedpok září aložek řící. Magneumín říky tobselad drávačkol říky umělý hraparcip.
</div>
<div id="div1">
<p>Lákamí vůněhulás úmyval rohlivý jednovod lek k hafanechř lák boliv úmysl. Rostrojsk roští dostrojsk taneumra Partavěď srdí a mocipádec škočiledo autor úmyslunce. Tak bývá štím mocipáda sólo.
<p>Hliv Tor zteplasti obzor ří hudíčkový magneumín kráčepres vůněhulás Depicí úmyvat. Měsí Přesiv rojednova roští já nim jít božnám drávadlov umyslupou umělý. Umraprošt čníky lva bájedpodl úmyval Umraburdí drátobick drásníky nesta jednovátc v. Bolivní.
<p>K Partavěď hole větrhnova Lžičkočár vůněhulás hanalemi umrapříke čajenný umraje bolo. Tlínkat dopicí lák přední zenžto jít obit záprajen hou neda sudí. Zvesmezil anadobra vůněhulás úmyslušle ječní hafanadop rojdi z čajenný nesta A. Napný mocipáda buby alem umítky.
<p>Sestí umrajedpo ta lekajakko říkem štím Al dosticí škočiledo tobselad lákaje. Ně rozem Holiv jít Tor postě štím z pánová říc Dobzor. Aložek povodlobi zlek ne Lžičkočár rojskočár sestí jakočil.
</div>
<hr>
</div>
Pokud bys měl nějakou nejasnost, klidně se ptej.
Ty odstavce s textem jsem tam dal proto, aby to vypadalo jako stránka s textem. Pokud by tam totiž nebyl žádný text, musel bys nastavovat výšku divů (implicitně mají nulovou).
DIVy jsem obarvil, aby bylo poznat, který je který.
Kontejneru jsem nastavil šířku 100px jako 960px + padding 2× 20px = 100px celkem, ale to platí ve standardním vykreslovacím režimu (viz !DOCTYPE). V Quirku by to bylo celkem jen 960px.
Konečně ve zdejším boxu s CODE je to nepřehledné, ale zkopíruj si to třeba do PSPadu a všechno je v kódu přehledně zarovnané.
- Než položíte dotaz, nejprve se ptejte strejdy Gůůgla.
- Výňatek z pravidel fóra PC-HELP:
- Název tématu zvolte takový, aby co nejvýstižněji charakterizoval obsah tématu.
- Nesnažte se řešit jiný problém (i když podobný) v jednom tématu. Raději založte nové téma.
- Mýliti se je Myloš.
Re: CSS - zarovnani divu
aha. ja to delal presne tim sammy css, akorat jsem mel v html prohozen div1 a div2
diky moc
diky moc
Re: CSS - zarovnani divu
Ono by to klidně šlo udělat i s tím pořadím divů, jak jsi ho měl původně. Protože znáš dopředu šířku všech divů, lze to udělat tak, že první nebude vycentrovaný automatickým okrajem (margin: auto), nýbrž bude obtékaný zprava (float: left) a bude mít nastavený levý margin na 230px (sám zabírá polovinu, tedy 500px, proto zbývá čtvrtina vlevo a čtvrtina vpravo. Čtvrtina z 1000px je 250px minus levý padding hlavního divu 20px = 230px.
Proto stačí poopravit následující řádky:
Proto stačí poopravit následující řádky:
Kód: Vybrat vše
#div1 {width: 500px; background-color: #990; margin-left: 230px; float: left;}
#div2 {width: 200px; background-color: #099; float: right;}
- Než položíte dotaz, nejprve se ptejte strejdy Gůůgla.
- Výňatek z pravidel fóra PC-HELP:
- Název tématu zvolte takový, aby co nejvýstižněji charakterizoval obsah tématu.
- Nesnažte se řešit jiný problém (i když podobný) v jednom tématu. Raději založte nové téma.
- Mýliti se je Myloš.
Re: CSS - zarovnani divu
aha. chapu. diky moc
Re: CSS - zarovnani divu
Ještě bych doplnil – na CSS je fascinující to, že čím složitější konstrukce, tím víc má možných řešení a člověk nakonec zjišťuje, že z dvanácti možných řešení je nejlepší až to patnácté. 
- Než položíte dotaz, nejprve se ptejte strejdy Gůůgla.
- Výňatek z pravidel fóra PC-HELP:
- Název tématu zvolte takový, aby co nejvýstižněji charakterizoval obsah tématu.
- Nesnažte se řešit jiný problém (i když podobný) v jednom tématu. Raději založte nové téma.
- Mýliti se je Myloš.
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 6 hostů