Šikovné ruky

xxxmiroxxx · Napísal **xxxmiroxxx**: 23.09.2008 16:39 | Šikovné ruky

Nazdar chlapi, chcem vás poprosiť o radu. Všetko podstatné je na obrázku dole, chcel by som vytvoriť takú stránku kde by pozadie tvorili napr. 4 rôzne obrázky (tu je to sivý, zelený, červený, žltý). Samozrejme možnosť nastaviť rôznu výšku akú by zaberali a červený by bol dynamický, teda by sa naťahoval ak by sa predlžovala hlavná stránka (biela časť). Vedeli by ste mi nejako helfnúť s CSS, lebo veľmi mi to nejde. Díky

Šikovné ruky

neutronmind · Napísal **neutronmind**: 23.09.2008 17:59 | Šikovné ruky

No ja by som tam dal 4 divy, ktore by mali to pozadie (pripadne tri divy, pricom jeden obrazok by bol pozadie <body>...) a ten biely by som absolutne pozicoval...

exoomer · Napísal **exoomer**: 23.09.2008 18:10 | Šikovné ruky

no bud tak, alebo spravit päticku so zltym pozadim, body s cervenym a obrazok na opakovanie das to sedo-zelene

xxxmiroxxx · Napísal autor témy **xxxmiroxxx**: 23.09.2008 20:18 | Šikovné ruky

No tá myšlienka od neutronminda je celkom v poho, ale ak si dobre myslím ak začnem pozicovať absolútne, tak sa mi ta biela časť nebude naťahovať podľa textu nie? Dá sa toto ešte vyriešiť?

Navyše by som chcel aby sránka bola pri akomkoľver rozlíšení centrovaná a tak podobne.

//pouzivaj edit! (stenley)

neutronmind · Napísal **neutronmind**: 23.09.2008 20:42 | Šikovné ruky

Normalne sa ti bude natahovat, a bude sa dat aj vycentrovat.

Takto by mohlo vyzerat nejake vzorove riesenie:

Kód:

<html> 
<head> 
<title></title> 
<style type="text/css"> 
html, body {
margin: 0px;
}
div#obsah { 
position: absolute; 
top: 150px; 
left: 50%; 
z-index: 1; 
width: 800px; 
margin-left: -400px;       /* vzdy polovica vysky - aby bol obsah centrovany */ 
background-color: white; 
padding: 10px; 
} 
div#prvy, div#druhy, div#treti, div#stvrty { 
height: 200px; 
float: left; 
width: 100%; 
} 
div#prvy { 
background-color: #4b6668; 
} 
div#druhy { 
background-color: #18660e; 
} 
div#treti { 
background-color: #fb0909; 
} 
div#stvrty { 
background-color: #fbdc09; 
} 

</style> 
</head> 
<body> 
<div>
<div id="prvy"></div> 
<div id="druhy"></div> 
<div id="treti"></div> 
<div id="stvrty"></div> 
</div>

<div id="obsah"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum varius placerat enim. Nullam laoreet turpis. Integer sodales arcu fermentum nibh. Sed viverra hendrerit lectus. Suspendisse dapibus nisl in lacus. Donec tortor sapien, faucibus ut, faucibus elementum, tristique imperdiet, massa. Fusce dolor orci, gravida non, feugiat quis, fringilla ac, diam. In condimentum mauris pellentesque justo. Aliquam congue massa vel diam. Duis ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras malesuada nunc sit amet elit. 

Nulla faucibus. Fusce tincidunt urna in tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer id nulla at felis imperdiet posuere. Nam tellus arcu, scelerisque quis, tempus sed, porttitor eget, tortor. Vivamus mauris elit, viverra in, malesuada vel, iaculis quis, lacus. Quisque porttitor sem nec risus. Morbi et nulla sed augue posuere accumsan. Cras sit amet enim. Sed mi urna, elementum sed, ornare posuere, vulputate eget, erat. 

Etiam nibh. Ut fermentum cursus dolor. Phasellus dui sem, ultrices in, lobortis eu, feugiat nec, mauris. Fusce ullamcorper turpis eu ante. Donec pharetra ornare massa. Praesent ac elit. Vivamus blandit dapibus justo. Maecenas non sem ac pede volutpat bibendum. Vestibulum lacus massa, dignissim et, sagittis et, bibendum ac, odio. Duis eleifend ornare risus. Proin at nunc. Pellentesque vitae augue at lorem sollicitudin interdum. Nam porttitor feugiat est. Donec aliquam molestie augue. Nulla facilisi. Etiam eu urna. 

Phasellus tempus augue sed turpis. Vestibulum tristique leo quis velit. Nullam pellentesque orci a ligula. Mauris ultrices mi sit amet eros. Aliquam augue ante, dictum at, cursus id, porttitor quis, nisl. Proin feugiat, sem non porta ultrices, sem est placerat nunc, ut eleifend elit felis vel felis. Pellentesque vel diam. Mauris fermentum mattis lorem. Integer ullamcorper pede ac mauris. Donec ornare, magna sit amet lacinia sagittis, eros nulla dapibus ipsum, sagittis ornare lacus mauris ac urna. Duis massa. Duis lacinia. 

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam vitae nibh. Donec pede nulla, lobortis nec, lacinia ac, fermentum sit amet, sapien. Sed rhoncus est non ante. Suspendisse adipiscing lectus nec lectus. Vestibulum vehicula enim in neque. Proin in ipsum. Phasellus sit amet metus. Vestibulum mattis ultricies eros. Aliquam neque. 
</div> 
</body> 
</html>

//pripadne tam nedaj ten posledny div, ale to zlte pozadie (background-color: #fbdc09; ) nastav pre body, tym padom nebude dole taky biely pasik, ale cely zvysok stranky bude zlty...

stenley · Napísal **stenley**: 23.09.2008 21:28 | Šikovné ruky

az na to, ze ten cerveny sa mu nebude natahovat

dalsou alternativou moze byt nasledujuci kod:

CSS:

Kód:

* { margin:0; padding:0; }
body { background:red url(gray-green.gif) 0 0 repeat-x;; }
#container { position:relative; width:900px; margin:0 auto; text-align:left; background-color:#ffffff; top:220px; z-index:100; }
#yellow { position:relative; height:60px; background:yellow; bottom:-200px; }

HTML:

Kód:

<body>
<div id="container">
   <p>Lorem ipsum</p>
   <p>Lorem ipsum</p>
   <p>Lorem ipsum</p>
   <p>Lorem ipsum</p>
   <p>Lorem ipsum</p>
   <p>Lorem ipsum</p>
   <p>Lorem ipsum</p>
   <p>Lorem ipsum</p>
</div>
<div id="yellow"></div>
</body>

Pravdaze to treba odladit pre vsetky prehliadace...

neutronmind · Napísal **neutronmind**: 23.09.2008 22:21 | Šikovné ruky

Hopla, to s tym cervenym pasom som nejak prehliadol.

Tak som spravil par uprav, mozes pouzit takyto kod (alebo stenley-ho)

Kód:

<html> 
<head> 
<title></title> 

<style type="text/css"> 
html, body { 
margin: 0px; 
background-color: red;
} 

div#container { 
position: absolute; 
top: 150px; 
left: 0; 
z-index: 1;  
padding: 0;
margin: 0;
width: 100%;
} 

div#obsah {
background-color: white;
position: relative;
left: 50%;
top: 20px;
width: 800px;
z-index: 3;
margin-left: -400px;
padding: 10px;
}

div#prvy, div#druhy { 
height: 100px; 
float: left; 
width: 100%; 
} 
div#prvy { 
background-color: #4b6668; 
} 
div#druhy { 
background-color: #18660e; 
} 

div#yellow {  
height:60px; 
background:yellow; 
} 

</style>
 
</head> 
<body> 

<div> 
<div id="prvy"></div> 
<div id="druhy"></div> 
</div> 


<div id="container">

<div id="obsah"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum varius placerat enim. Nullam laoreet turpis. Integer sodales arcu fermentum nibh. Sed viverra hendrerit lectus. Suspendisse dapibus nisl in lacus. Donec tortor sapien, faucibus ut, faucibus elementum, tristique imperdiet, massa. Fusce dolor orci, gravida non, feugiat quis, fringilla ac, diam. In condimentum mauris pellentesque justo. Aliquam congue massa vel diam. Duis ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras malesuada nunc sit amet elit. 

Nulla faucibus. Fusce tincidunt urna in tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer id nulla at felis imperdiet posuere. Nam tellus arcu, scelerisque quis, tempus sed, porttitor eget, tortor. Vivamus mauris elit, viverra in, malesuada vel, iaculis quis, lacus. Quisque porttitor sem nec risus. Morbi et nulla sed augue posuere accumsan. Cras sit amet enim. Sed mi urna, elementum sed, ornare posuere, vulputate eget, erat. 

Etiam nibh. Ut fermentum cursus dolor. Phasellus dui sem, ultrices in, lobortis eu, feugiat nec, mauris. Fusce ullamcorper turpis eu ante. Donec pharetra ornare massa. Praesent ac elit. Vivamus blandit dapibus justo. Maecenas non sem ac pede volutpat bibendum. Vestibulum lacus massa, dignissim et, sagittis et, bibendum ac, odio. Duis eleifend ornare risus. Proin at nunc. Pellentesque vitae augue at lorem sollicitudin interdum. Nam porttitor feugiat est. Donec aliquam molestie augue. Nulla facilisi. Etiam eu urna. 

Phasellus tempus augue sed turpis. Vestibulum tristique leo quis velit. Nullam pellentesque orci a ligula. Mauris ultrices mi sit amet eros. Aliquam augue ante, dictum at, cursus id, porttitor quis, nisl. Proin feugiat, sem non porta ultrices, sem est placerat nunc, ut eleifend elit felis vel felis. Pellentesque vel diam. Mauris fermentum mattis lorem. Integer ullamcorper pede ac mauris. Donec ornare, magna sit amet lacinia sagittis, eros nulla dapibus ipsum, sagittis ornare lacus mauris ac urna. Duis massa. Duis lacinia. 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum varius placerat enim. Nullam laoreet turpis. Integer sodales arcu fermentum nibh. Sed viverra hendrerit lectus. Suspendisse dapibus nisl in lacus. Donec tortor sapien, faucibus ut, faucibus elementum, tristique imperdiet, massa. Fusce dolor orci, gravida non, feugiat quis, fringilla ac, diam. In condimentum mauris pellentesque justo. Aliquam congue massa vel diam. Duis ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras malesuada nunc sit amet elit. 

Nulla faucibus. Fusce tincidunt urna in tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer id nulla at felis imperdiet posuere. Nam tellus arcu, scelerisque quis, tempus sed, porttitor eget, tortor. Vivamus mauris elit, viverra in, malesuada vel, iaculis quis, lacus. Quisque porttitor sem nec risus. Morbi et nulla sed augue posuere accumsan. Cras sit amet enim. Sed mi urna, elementum sed, ornare posuere, vulputate eget, erat. 

Etiam nibh. Ut fermentum cursus dolor. Phasellus dui sem, ultrices in, lobortis eu, feugiat nec, mauris. Fusce ullamcorper turpis eu ante. Donec pharetra ornare massa. Praesent ac elit. Vivamus blandit dapibus justo. Maecenas non sem ac pede volutpat bibendum. Vestibulum lacus massa, dignissim et, sagittis et, bibendum ac, odio. Duis eleifend ornare risus. Proin at nunc. Pellentesque vitae augue at lorem sollicitudin interdum. Nam porttitor feugiat est. Donec aliquam molestie augue. Nulla facilisi. Etiam eu urna. 

Phasellus tempus augue sed turpis. Vestibulum tristique leo quis velit. Nullam pellentesque orci a ligula. Mauris ultrices mi sit amet eros. Aliquam augue ante, dictum at, cursus id, porttitor quis, nisl. Proin feugiat, sem non porta ultrices, sem est placerat nunc, ut eleifend elit felis vel felis. Pellentesque vel diam. Mauris fermentum mattis lorem. Integer ullamcorper pede ac mauris. Donec ornare, magna sit amet lacinia sagittis, eros nulla dapibus ipsum, sagittis ornare lacus mauris ac urna. Duis massa. Duis lacinia. 

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam vitae nibh. Donec pede nulla, lobortis nec, lacinia ac, fermentum sit amet, sapien. Sed rhoncus est non ante. Suspendisse adipiscing lectus nec lectus. Vestibulum vehicula enim in neque. Proin in ipsum. Phasellus sit amet metus. Vestibulum mattis ultricies eros. Aliquam neque.</div>

<div id="yellow"></div> 

</div>
 
</body> 
</html>

xxxmiroxxx · Napísal autor témy **xxxmiroxxx**: 23.09.2008 22:56 | Šikovné ruky

Chlapi, díííky vám všetkým...

Šikovné ruky

Šikovné ruky

Podobné témy

Domáca tlačiareň (multifunkčné zariadenie) šikovné a ekonomické

chladenie ruky

Krivé ruky, prevrátil som pc

Budget PC z druhej ruky

Pevný disk z druhej ruky

Kupa PC z druhej ruky

Intel: Ruky preč od Visty

Kupa mobilu z druhej ruky

Pc na hry z druhej ruky

42"+ TV z druhej ruky

Lacny herny notebook z druhej ruky

I : Lenovo Thinkpad T440p z druhej ruky

mobil z druhej ruky za 150-250e

Nechcete si špiniť ruky? Natankuje za vás robot

Herný noťas do 800eur (aj z druhej ruky)

K: Kúpim PC zostavu s pod ruky! Iba seriózne!