ugrás a tartalomhoz

Három oszlop CSS-el fix középrésszel

cymby · 2009. Nov. 17. (K), 17.17
Üdvözletem !

Egy weboldalt szeretnék készíteni, lehetőleg css segítségével felépítve, de már az struktúra felépítésénél problémába ütköztem.
Az oldal jelenlegi feléptítése szerint három oszlopot szeretnék létrehozni div-ek segítségével melyekből a jobb és a baloldali szélessége a böngészőhöz igazodna, a középső tartalom pedig fix szélességű lenne és a böngészőhöz igazodva középen helyezkedne el.
Sajnos több helyen is próbáltam a kérdésnek utánajárni, de nem találtam eleddig semmi használható megoldást.

Ha valaki tudna nekem ebben segíteni megköszönném.
‹ Hogyan tudok egyszerűen nagyon sok statikus HTML fájlt karbantartani? Honlap tervezés kérdés ›
 ■
1

display: table-cell

Poetro · 2009. Nov. 17. (K), 19.38
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title><!-- Insert your title here --></title>
    <style type="text/css">
      #header, #main, #footer {
        clear: both;
        outline: 1px solid red;
      }
      #main {
        display: table-row;
      }
      #content {
        width: 800px;
        margin: 0 auto;
        outline: 1px solid blue;
        display: table-cell;
        padding: 10px;
      }
      #sidebar-right {
        padding: 10px;
        outline: 1px solid green;
        display: table-cell;
      }
      #sidebar-left {
        padding: 10px;
        outline: 1px solid green;
        display: table-cell;
      }
    </style>
</head>
<body>
  <div id="header">
    <h1>Header</h1>
  </div>
  <div id="main">
    <div id="sidebar-left">
      <p>Curabitur eget sem nisl, et pulvinar felis.</p>
    </div>
    <div id="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis augue venenatis lorem scelerisque feugiat. Cras justo odio, ultrices vitae gravida ut, aliquet ut sapien. Etiam tincidunt, augue mollis facilisis fermentum, quam ante tempus ipsum, at congue ligula justo at enim. Donec id sem ligula. Maecenas dignissim sem at magna tristique ultricies. Quisque nulla augue, commodo eget pellentesque eget, vestibulum sit amet orci. Morbi non mi est. Cras pellentesque, felis ac commodo ornare, elit felis sollicitudin risus, ut interdum libero justo quis tortor. Etiam vel fermentum purus. Aliquam erat volutpat. Nullam id justo in magna ultrices tempor. Proin accumsan nibh vel orci accumsan commodo. Nunc ut metus tellus, eu molestie purus. Fusce at turpis non eros auctor gravida non dignissim ipsum. Phasellus pretium laoreet ligula a pellentesque.</p>
      <p>Quisque lectus nisi, sagittis eget varius varius, tristique sed lorem. Cras commodo metus sit amet magna euismod id suscipit dolor eleifend. Nulla gravida, nibh eget ornare blandit, mauris urna vulputate neque, sed ullamcorper lorem nisi id dui. In dictum condimentum iaculis. Nulla scelerisque euismod dui, vel consequat nulla pharetra eu. Pellentesque sed orci scelerisque dolor rhoncus facilisis. Aenean volutpat tempor lectus, non aliquam dui tincidunt eget. Praesent vitae nibh libero. Nullam auctor lacus neque. Nulla elementum adipiscing turpis ut egestas. Aliquam leo tortor, semper vitae eleifend vitae, cursus at dui. Curabitur eget sem nisl, et pulvinar felis. Duis quis odio ac ipsum elementum pulvinar. Fusce volutpat malesuada mauris at pretium. Quisque massa nisl, hendrerit nec dignissim eu, auctor a diam. Aenean a eleifend tortor.</p>
    </div>
    <div id="sidebar-right">
      <p>Cras commodo metus sit amet magna euismod id suscipit dolor eleifend.</p>
    </div>
  </div>
  <div id="footer">
    <p>Footer</p>
  </div>
</body>
</html>
2

Nagyon szépen köszönöm!

cymby · 2009. Nov. 17. (K), 20.11
Nagyon szépen köszönöm!
3

klasszikus

gex · 2009. Nov. 17. (K), 20.19
http://blog.html.it/layoutgala/

érdemes a content részt a forrásban előrébb hozni az oldalsávok tartalmánál.
4

Nem klasszikus

Poetro · 2009. Nov. 17. (K), 20.26
Mivel a középső sávnak fix a szélessége, viszont ott csak olyanok vannak, amiben a szélsőknek fix. Ez azért teljesen más felállás.
5

bocs

gex · 2009. Nov. 17. (K), 21.01
bocs, úgy emlékeztem hogy ilyen is szerepel köztük de igazad van, megnézhettem volna.

viszont most mar kíváncsi lennék hogy mire kell egy ilyen layout, nekem nem tűnik életszerűnek.
6

Lényegében van egy ps-ben

cymby · 2009. Nov. 17. (K), 21.54
Lényegében van egy ps-ben tervezett design egy weboldalhoz amiben a tartalomtól balra elhelyezkedő háttér teljesen más mint a tartalomtól jobbra levő.
Ezt próbáltam valami ilyen megoldással orvosolni.
De ha valakinek van erre valami jobb ötlete akkor várok minden megoldást.
Köszönöm.

Valahogy így gondoltam el a dolgot, viszont fontos hogy a tartalom mindig középre igazodjon.
|-------|---------------|-------|
|       |     fejlec    |       |
|       |---------------|       |
|bg1.jpg|               |bg2.jpg|
|háttér |   tartalom    |háttér | 
|       |               |       |
|       |---------------|       |
|       |   lábléc      |       |
|-------|---------------|-------|
7

bg1.jpg, bg2.jpg

Poetro · 2009. Nov. 17. (K), 22.44
A bg1.jpg, bg2.jpg dinamikus szélességűek, azaz ismételhetők? Mert ha nem, akkor végülis fix szélességű sidebar-okról beszélünk, és erre vannak példák gex ajánlásában.
8

A bibi ott van, hogy

cymby · 2009. Nov. 17. (K), 22.56
A bibi ott van, hogy ismétlődőek a hátterek.
Szerintem ez így elég bajos lesz... :-(
Lehet, hogy inkább átterveztetem.
9

elrendezés

errata · 2009. Nov. 24. (K), 21.28
ha a fejléc tartalom lábléc szélessége nem dinamikus, akkor a container-be amivel az egészet középre igazítod annak a háterébe berakhatod a 2kép 1-be való egyesítését, padding: 10px -el mondjuk megoldod hogy ne simuljon köré...

az hogy más a háttér annyira nem probléma mivel középen kitakarják a divek a váltást.

|-#cont-------------|
| kép.jpg háttér    |
| |---------------| |  
| |     fejlec    | |  
| |---------------| |  
| |               | |  
| |   tartalom    | |  
| |               | |  
| |---------------| |  
| |   lábléc      | |  
| |---------------| |
|-------------------|

#cont {
margin: 0 auto;
padding: 10px;
width: 950px;
background-image: url(kép.jpg);
}

#fejlec, #tartalom, #lablec {
width: 930px;
}
10

display: table-cell nélkül

Udi · 2009. Nov. 25. (Sze), 10.09
Matthew James Taylornak van egy table-cell nélküli megoldása. Igaz, hogy ő rengeteg segéd divet használ, de minden böngészőben helyes lesz.