| Autor | Zpráva | ||
|---|---|---|---|
| Anonym Profil * |
#1 · Zasláno: 14. 6. 2010, 14:45:37
Zdravím, chtěl bych vás poprosit o pomoc s mými css styly, které se v ie chovají přesně tak jak chci, a v jiných prohlížečích jsou problémy. Jde o styl kde mám tři relativně umístěné divy ve kterých je pár absolutně umístěných a všechny tyto tři jsou uzavřeny opět do jednoho absolutně napozicovaného divu ten je ještě centrován dalším divem (ale v tom si myslím problém nebude). V prostředním relativním divu je text, ostatní dva slouží pouze ke grafickým efektům. Problém tkví v tom že ostatní prohlížeče zobrazí mezi prvními dvěma relativními divy mezeru, a prostřední div s textem se nenatáhne.
Ukázka: odkaz Řešení: ??? :D P.S.: Takto složité předivované řešení styluji proto že bych si chtěl vyzkoušet background-position a sprity na stránkách. |
||
| Chamurappi Profil |
#2 · Zasláno: 14. 6. 2010, 16:08:16
Reaguji na Anonyma:
Nenastavuj druhému <div>u v <div>u v <div>u v <body> výšku.
Odstavci v druhém <div>u v <div>u v <div>u v <body> vynuluj margin a nastav mu místo něj padding.
„Takto složité předivované řešení styluji proto“ Proč nepoužíváš třídy či ID a stylopisy? Bez atributů style by byl kód přehlednější a jednodušeji by se mi popisovalo, o kterém elementu mluvím.
|
||
| Anonym Profil * |
#3 · Zasláno: 14. 6. 2010, 17:53:21
Používám, ale až když je stránka hotová a pouze pro potřeby externího css (popř. js). Ale pro lepší orientaci jsem to nyní označil třídami, nevím jestli jsem pochopil co jsi radil, avšak výsledkem je krásné nové a nežádoucí odsazení a tentokrát nahoře i dole. :-(
<div style="position:relative;left:50%; margin-left:-400;" class="centrovac"> <!--hozeni do prostředka-->
<div style="position:absolute; width:800px;" class="hlavni">
<div style="position:relative; background-color:blue; width:100%;height:44px; background: url(images/table/prechod_horni.gif) repeat-x;" class="horni_prechod">
<div style="position:absolute; width:21px; height:44px; background: url(images/table/levy_horni_roh.gif);" class="levy_hor_roh">
</div>
<div style="position:absolute; width:21px; height:44px; background-color:red; left:100%; margin-left:-21px; background: url(images/table/pravy_horni_roh.gif);" class="pravy_hor_roh">
</div>
</div>
<div style="position:relative; width:100%; background-color:#02da07;" class="obsah">
<div style="position:absolute; width:3px; height:100%;left:0px; background: url(images/table/okraj.gif);" class="okraj_levy"></div>
<div style="position:absolute; width:3px; height:100%; left:100%; margin-left:-3px; background: url(images/table/okraj_r.gif);" class="okraj_pravy"></div>
<p style="color:white; font-size:20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum consequat egestas. Praesent massa enim, suscipit vel tincidunt vel, facilisis ac ligula. Cras sed magna a magna cursus laoreet eu et tellus. Sed vitae mollis velit. Phasellus libero est, iaculis non dignissim elementum, venenatis id lacus. Nam commodo est tortor, in pulvinar dui. Duis ac magna nec nunc accumsan imperdiet vitae varius justo. Nam vitae nunc risus, ut posuere felis. Aenean eu est urna. Donec gravida eros at erat rutrum ullamcorper lacinia orci fermentum. Praesent a ligula neque. Proin quis eros tortor. In a tellus leo, sit amet dictum sapien. Donec eu molestie diam. Aliquam id erat ac justo blandit ullamcorper quis ut sem.
</p>
</div>
<div style="position:relative; width:100%; height:42px; background: url(images/table/prechod_dolni.gif) repeat-x;" class="prechod_dolni">
<div style="position:absolute; width:42px; height:42px; background-color:red; background: url(images/table/levy_dolni_roh.gif);" class="levy_dol_roh">
</div>
<div style="position:absolute; width:42px; height:42px; background-color:red;background: url(images/table/pravy_dolni_roh.gif); left:100%; margin-left:-42px;" class="pravy_dol_roh">
</div>
</div>
</div>
</div> <!--hozeni do prostředka konec-->Předem díky za pomoc. |
||
| Anonym Profil * |
#4 · Zasláno: 14. 6. 2010, 17:58:47
Jinak tedy Odkaz platí pořád.
|
||
| Anonym Profil * |
#5 · Zasláno: 14. 6. 2010, 18:06:19
Tak už jsem na to asi přišel, nevím jak moc obecné, nebo rozjetí odolné to je ale těm relativním stylům jsem natvrdo řekl ať se šoupnou nahoru a počet pixelů.
|
||
| Chamurappi Profil |
#6 · Zasláno: 14. 6. 2010, 19:01:07
Reaguji na Anonyma:
„Jinak tedy Odkaz platí pořád.“ Je na něm něco úplně jiného, než bylo dřív a než uvádíš v příspěvku [#3]. |
||
| tayger Profil * |
#7 · Zasláno: 14. 6. 2010, 21:40:03
Anonym:
Jestli to chápu správně, tak jsi tam jen tak nazdařbůch naházel třídy, které plní jen informativní charakter, zatímco jsi si ponechal všude inline stylopisy. Co na to říci, nauč se použití mapování pomocí tagů a tříd v css a styluj přes externí stylopis. Myslím, že by jsi měl začít tímto, neboť je velký rozdíl stylovat inline a v externím. 1. zlepšuje to přehlednost, 2. lze najít tag v závislosti na jeho rodiči různými způsoby a odděleně jej ostylovat. 3. Když budeš chtít ostylovat více věcí najednou stejně a jen pro pár využiješ třeba jinou barvu, můžeš využít kaskádového efektu. |
||
| Anonym Profil * |
#8 · Zasláno: 15. 6. 2010, 20:50:37
Ano jak jsem již psal tak jsem tam naházel třídy čistě z informativního důvodu, ostylovat pomocí tříd to pochopitelně umím, ale (jak jsem již psal) dělám to na konec protože mi to tak nejlépe vyhovuje.
|
||
|
Časová prodleva: 14 let
|
|||
0