| Autor | Zpráva | ||
|---|---|---|---|
| tomas.dolezal Profil * |
#1 · Zasláno: 4. 8. 2012, 21:11:17
Dobrý večer,
na netu jsem narazil na nápad, který se mi moc líbí a chtěl bych ho implementovat do svých stránek. 
Bohužel, nadpisy některých mých článků jsou zalomené, tím pádem se levý div roztáhne, ale ten pravý zůstane, jak je. Potřeboval bych tedy poradit nějaký způsob jak "svázat" ty dva divy "do sebe" tak, aby se v případě, že se jeden z nich z nějakého důvodu roztáhne, roztáhl i ten druhý. Moc děkuji za pomoc. |
||
| ShiraNai7 Profil |
#2 · Zasláno: 4. 8. 2012, 21:29:30
Snažil jsem se popsat, jak bys to měl udělat, ale raději to předvedu názorně. Vyzkoušej a uvidíš. Hlavička se "roztahuje" dle výšky nadpisu.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#wrapper {
margin: 0 auto;
width: 700px;
}
div.articleHeader {
position: relative;
padding-right: 200px;
}
div.articleHeader h1 {
padding: 0.5em 0;
border-bottom: 2px solid #000;
}
div.articleHeader p {
position: absolute;
width: 200px;
right: 0;
bottom: 0;
margin: 0;
padding-bottom: 0.5em;
border-bottom: 2px solid #ddd;
text-align: right;
}
</style>
<title>Test</title>
</head>
<body>
<div id="wrapper">
<div class="articleHeader">
<h1>Nejnovější článek - uděláme si trošku delší nadpis</h1>
<p>napsal <strong>pepa</strong><br />
Sobota, 12. června 2009</p>
</div>
</div>
</body>
</html> |
||
| tomas.dolezal Profil * |
Funguje perfektně, děkuji.
I přes to ale úplně řešení nerozumím a to je pro mě to hlavní: rozumět mu. Nešlo by prosím nějak stručně popsat, na čem je to založené? |
||
| ShiraNai7 Profil |
#4 · Zasláno: 5. 8. 2012, 01:27:05
tomas.dolezal:
Hlavní obalující div (.articleHeader) má nastaveno position: relative. To znamená, že všechny absolutně pozicované prvky v něm (což je pouze ten odstavec s informacemi) jej budou brát jako základ pro svou pozici. Díky tomu bude odstavec s informacemi (napsal ... datum) zobrazen vpravo dole (right: 0; bottom: 0;) v rámci toho obalujícího divu. Na obalující div jsem přidal padding-right: 200px; (což je stejný rozměr, jaký má odstavec s infem), aby se nadpis (h1) nevykresloval pod tímto odstavcem (protože odstavec je absolutně pozicovaný a takto pozicované prvky "nezabírají místo"). To je vše.. zbytek jsou už jen rámečky a padding, aby to vypadalo dobře. |
||
| joe Profil |
#5 · Zasláno: 5. 8. 2012, 02:00:28
Pokud chceš mít roztahovací obě strany (nevíš která s nich bude vyšší), můžeš použít třeba takové řešení:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#wrapper {
width: 700px;
position: relative;
overflow: hidden;
background: #f2f2f2;
}
h1 {
float: left;
width: 500px;
}
h1:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 500px;
height: 2px;
background: #000;
}
p {
float: right;
width: 200px;
}
p:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 200px;
height: 2px;
background: red;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Nejnovější článek - uděláme si trošku delší nadpis</h1>
<p>napsal <strong>pepa</strong><br />Sobota, 12. června 2009</p>
</div>
</body>
</html> |
||
| tomas.dolezal Profil * |
#6 · Zasláno: 5. 8. 2012, 19:11:48
ShiraNai7:
Přesně takové vysvětlení jsem potřeboval, moc děkuji! joe: Teď budu přidávat ještě jeden řádek do té pravé strany, kdyby to ShinaNay7-ovo řešení haprovalo, zkusím tvoje. :) |
||
|
Časová prodleva: 12 let
|
|||
0