CSS - dlzka Div

pkrajnak · Napísal **pkrajnak**: 04.04.2009 16:42

ahojte,

chcel by som sa opytat ako spravit nasledovne:

mam div 1, kt. ma v sebe div 2. Div 2 nemam definovanu výšku, pretože tam môže byť umiestnené ľubovolné množstvo textu. V Div 1 tiež nemám výšku definovanú a mám tam len umiestnené pozadie...

Otázka znie, ako spraviť, aby div 1 malo dlúžku, kt. prekryje dlúžku Div 2? Je to dôležité, aby pozadie končilo v správnej dĺžke... Stalo sa mi, ze Div 1 bolo dlhsie ako Div 2 a teda Div 1 sa automaticky nezvacsilo a teda mi chybal cast pozadia...

Dik za odpoved...

Tominator · Napísal **Tominator**: 04.04.2009 17:14

neviem čo presne myslíš .. jedno riešenie by bolo pridať pod D2 ešte jedno prázdne divko s danou výškou ... Teda nech by bolo D2 akokoľvek dlhé D1 by bolo ešte o D3 vyššie

pkrajnak · Napísal autor témy **pkrajnak**: 04.04.2009 21:24

Tominator píše:

neviem čo presne myslíš .. jedno riešenie by bolo pridať pod D2 ešte jedno prázdne divko s danou výškou ... Teda nech by bolo D2 akokoľvek dlhé D1 by bolo ešte o D3 vyššie

no to je prave to. Ja tam este jedno div potrebujem dat, ale to musi by mimo D1 aj D2, to bude vlastne pata stranky... Lenze vzdy ak D2 ma viac textu, tak sa mi dostane cez D1 a to neviem preco, ako D2 je vramci D1...

Svolo · Napísal **Svolo**: 04.04.2009 21:32

margin-bottom v danej vyske pre div 2

To ti urobi dole okraj, ktory ten div 1 natiahne.

pkrajnak · Napísal autor témy **pkrajnak**: 04.04.2009 22:54

Svolo píše:

margin-bottom v danej vyske pre div 2

To ti urobi dole okraj, ktory ten div 1 natiahne.

ok, vyzerá to, že máš pravdu. Len mám tu ešte jeden problémik. Ked div 1 aj div 2 ma parameter absolútny, ohľadne poziciovania, ale zároveň neviem, do akej dlžky v závislosti od objemu textu sa mi natiahne Div 1 a Div2, ako mám dole potom pridať DIV 3 samostatný, ako pätu stránky? Neviem DIV 3 absolútne poziciovať, lebo nepoznám dĺžku...?

Svolo · Napísal **Svolo**: 04.04.2009 23:00

Abolutne? Lol poziciuj relativne

A divu3 s pätickou budes muset dat clear:both aby sa zarovnaval az nakonci.

pkrajnak · Napísal autor témy **pkrajnak**: 04.04.2009 23:05

Svolo píše:

Abolutne? Lol poziciuj relativne

A divu3 s pätickou budes muset dat clear:both aby sa zarovnaval az nakonci.

nemozem relativne, musim absolutne vzhladom na presne umiestnovanie grafiky..., skusim teda ten div 3 dat clear... uvidime

Asi to ale bude problem, lebo nikde som nedaval float...?

pkrajnak · Napísal autor témy **pkrajnak**: 04.04.2009 23:21

pkrajnak píše:

nemozem relativne, musim absolutne vzhladom na presne umiestnovanie grafiky..., skusim teda ten div 3 dat clear... uvidime

Asi to ale bude problem, lebo nikde som nedaval float...?

no veru to nejde... neviem proste naviazat div 3 na div 1... (mam este aj prave aj lave div..., absolutne poziciovane...), je to pre mna dost velky problem, ta pata stranky...

Svolo · Napísal **Svolo**: 04.04.2009 23:27

Ale ved aj relativom a align, margin, padding umiestnis grafiku presne

Ved ti hovorim ze clear:both a foot umiestnuj relativne aby sa vykreslila az po absolutke tych vrchov ked uz inak nedas

btw. daj sem link na to co kodujes.

pkrajnak · Napísal autor témy **pkrajnak**: 04.04.2009 23:47

Svolo píše:

Ale ved aj relativom a align, margin, padding umiestnis grafiku presne

Ved ti hovorim ze clear:both a foot umiestnuj relativne aby sa vykreslila az po absolutke tych vrchov ked uz inak nedas

btw. daj sem link na to co kodujes.

relativom si to pri takejto komplikovanejsej verzii neviem celkom predstavit...

tu je kod:
---------------------------------------

Kód:

<style type="text/css">
<!--
#leftad {
   position:absolute;
   left:0;
   top:1px;
   width:125px;
   height:610px;
   z-index:1;
   text-align: center;
}
#top {
   position:absolute;
   left:10px;
   top:12px;
   width:735px;
   height:226px;
   z-index:2;
   text-align: center;
}
#menu {
   position:absolute;
   left:11px;
   top:240px;
   width:735px;
   height:37px;
   z-index:3;
   text-align: center;
}
#rightad {
   position:absolute;
   left:887px;
   top:3px;
   width:255px;
   height:250px;
   z-index:4;
}
#smallpict {
   position:absolute;
   left:887px;
   top:289px;
   width:255px;
   height:100px;
   z-index:5;
}
#rightutil {
   position:absolute;
   left:855px;
   top:372px;
   width:255px;
   z-index:6;
   height: 220px;
}
#rightutil img {
   vertical-align: top;
   display: block;
}
#content {
   position:absolute;
   left:128px;
   top:288px;
   width:716px;
   z-index:7;
   vertical-align: top;
   padding: 20px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: small;
   letter-spacing: 0.1em;
   background-image: url(middle%20modry%20ram.png);
   background-repeat: repeat;
   margin-bottom: auto;
   color: #000;
}
#kalendar {
   position:absolute;
   left:887px;
   top:389px;
   width:255px;
   height:220px;
   z-index:8;
   background-image: url(backkal.jpg);
   background-repeat: repeat-x;
   background-position: 15px;
}
#content h1 {
   font-size: large;
   color: #000;
   text-align: center;
}
#content #FlashID2 {
   float: left;
}
#content ul {
   list-style-type: none;
   text-align: center;
   float: left;
   padding: 0px;
}
#content p {
   clear: both;
}
#destin {
   position:absolute;
   left:477px;
   top:303px;
   width:350px;
   height:230px;
   z-index:9;
   font-family: Arial, Helvetica, sans-serif;
   font-size: medium;
   background-color: #89C3EC;
   border-top-style: dotted;
   border-right-style: dotted;
   border-bottom-style: dotted;
   border-left-style: dotted;
   border-top-color: #F90;
   border-right-color: #F90;
   border-bottom-color: #F90;
   border-left-color: #F90;
}
#destin h1 {
   font-size: large;
   background-color: #F90;
}
#wrap {
   background-color: #F00;
   width: 900px;
   height: 100%;
   top: 0px;
}
#ineright {
   position:absolute;
   left:887px;
   top:611px;
   width:255px;
   height:225px;
   z-index:9;
}
#middleback {
   position:absolute;
   left:128px;
   top:282px;
   width:756px;
   z-index:10;
   background-image: url(middle%20modry%20ram.png);
   height: 832px;
}

</style>

</head>

<body>


<div id="leftad"><img src="reklama vlavo.png" width="125" height="613" alt="adleft" /></div>

<div id="topback">

<div id="top">
 
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="725" height="226" id="FlashID" title="loadmenu">
    <param name="movie" value="loadmenu.swf" />

</div>

</div>

<div id="menu">

<!-- tu bude navigacia menu -->

</div>

</div> <!-- uzavretie top, menu a backgroundu top -->

<div id="content">

  <p>Skuska textu ... (hlavna cast)</p>

</div> 

<!-- uzavretie content a backgroundu middle -->

<div id="rightad"><img src="reklama.jpg" width="250" height="250" alt="menuright" /></div>

<div id="smallpict"><img src="x.jpg" width="255" height="100" alt="austr" /></div>

<div id="ineright">

  <p><img src="ine.jpg" width="253" height="145" alt="kurzy" /></p>

</div>

</div> <!-- uzavretie pravej strany -->

----------------------------------

no a za content potrebujem dat tu patu... Ak je vsak nedam presne pozicovanie, umiestni sa mi v strede obrazovky a nie za div content...

Svolo · Napísal **Svolo**: 05.04.2009 13:06

Toto je uplne normalny web kde by sa to dalo uplne normalne pouzite relativne poziciovanie

Ved vies aspon aky je rozdiel medzi relativnym a abolutnym? Najpr si to nastuduj, odporucam www.jakpsatweb.cz , a potom sa pytaj, lebo pouzivat TU absolutne poziciovanie je blbost a prerabat ti to a vsetko okolo toho pisat sa mi vôbec nechce. Prekonaj trosku svoju lenivost a skus to

don jebot · Napísal **don jebot**: 05.04.2009 13:09

absolutne poziciovanie nie je vobec zle len musis vediet s tym robit!!! neviem co tu kazdy pise ze je zle je ... za to ze ty stym nevies robit neznamena to ze je to nanic .. btw ...

suchy · Napísal **suchy**: 05.04.2009 13:52

absolutne poziciovanie sa hlavne nehodi na vsetko

Svolo · Napísal **Svolo**: 05.04.2009 15:30

No ale toto je klasicke rozlozenie webu kde je relativne uplne v pohode a neviem preco si vyraba problem s absolutnym

pkrajnak · Napísal autor témy **pkrajnak**: 05.04.2009 21:18

suchy píše:

absolutne poziciovanie sa hlavne nehodi na vsetko

preco si to myslis? Kde nie?

Co sa mna tyka, zvolil som absolutne poziciovanie, pretoze mi to proste viac vyhovuje... Jediny moj problem je ako umiestnit patu stranky (povedzme DIV 2), kedze neviem, aku velkost bude mat DIV 1 - ta sa moze menit, vzhladom na rozsah textu...

Len tento mam problem...

suchy · Napísal **suchy**: 05.04.2009 21:54

no napriklad prave pre toto. ak nevies ako vysoka bude stranka, rozhode by som pouzival plavajuci layout. absolutne poziciovanie pouzivam hlavne na take veci ako logo, pripadne menu, alebo ked chcem nieco pekne zarovnat napriklad vo footri. co sa tyka celkoveho rozlozenia, vzdy pouzivam plavajuci layout.

pkrajnak · Napísal autor témy **pkrajnak**: 05.04.2009 22:09

suchy píše:

no napriklad prave pre toto. ak nevies ako vysoka bude stranka, rozhode by som pouzival plavajuci layout. absolutne poziciovanie pouzivam hlavne na take veci ako logo, pripadne menu, alebo ked chcem nieco pekne zarovnat napriklad vo footri. co sa tyka celkoveho rozlozenia, vzdy pouzivam plavajuci layout.

no len problem je v tom, ze ja teraz vsetko potrebujem presne zarovnat, vsetko musi presne sediet... a pravdupovediac, keby som prave na ten DIV1 pouzil plavajuci layout, relativne umiestneny, tak ta stranka by bola rozhadzana, kedze aj ten DIV1 musi mat svoju presnu absolutnu polohu..., len do dlzky moze byt flexibilny...

suchy · Napísal **suchy**: 05.04.2009 22:12

da sa riesit aj marginmi alebo paddingami. ale k tomu footru ma tak napada, ze by to slo absolutne, keby si ho dal do toho bloku, ktory zvacsuje vysku a dal mu minusovu poziciu v bottom

pkrajnak · Napísal autor témy **pkrajnak**: 05.04.2009 22:52

suchy píše:

da sa riesit aj marginmi alebo paddingami. ale k tomu footru ma tak napada, ze by to slo absolutne, keby si ho dal do toho bloku, ktory zvacsuje vysku a dal mu minusovu poziciu v bottom

perfektne, ano, teraz to funguje! Dakujem!!!

CSS - dlzka Div

Podobné témy