ugrás a tartalomhoz

CSS fix szélesség középen, de két oldalt különböző szín?

ggabor · 2011. Május. 19. (Cs), 21.32
Már órák óta keresgélek megfelelő css megoldást az alábbi elrendezéshez, de még csak ehhez hasonlót sem találtam.

Adott az alábbi egyszerű elrendezés, ahol a container középre van igazítva és 980px széles:

-----------------------
---|-container-|---
-----------------------

A css:
  1. .bar { width: 100%;  min-width: 1000px; margin: 0px auto; }  
  2. .container { width: 980px; margin: 0px auto; padding-left: 10px; padding-right: 10px; }  
A html:
  1. <div class="bar" id="special">  
  2. <div class="container">content</div>  
  3. </div>  
Most viszont a következőt szeretném megoldani:

1. a container maradjon középen, 980px széleséggel.
2. a container-en belül legyen egy azonos magasságú panel (P).
3. a panel (P) szélessége fix 250px legyen.
4. a panel (P) mellett balra lévő dinamikus szélességű üres rész (A) ugyanolyan színű legyen mint a panel (P)
5. a container mellett jobbra lévő dinamikus szélességű üres rész (B) ugyanolyan színű legyen mint a container.

----------------------------
-A-|-(P)container-|-B-
----------------------------

Amilyen megoldásokat találtam eddig az mind %-ban adta meg a szélességeket. Úgy én is meg tudnám oldani, hogy mindnek beállítok egy %-ot, de a gond az, hogy a container fix 980px kell, hogy legyen és ezen belül a (P) fix 250px széles.
‹ HTML5 vs. XHTML Mootools tömb, elemenként ›
 ■
1

így hirtelenjében

Gixx · 2011. Május. 20. (P), 17.27
  1. <!DOCTYPE html>  
  2. <html dir="ltr" lang="en">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Container</title>  
  6.         <meta name="title" content="html5 teszt">  
  7.         <style type="text/css">  
  8.             html{  
  9.                 width: 100%;  
  10.                 height: 100%;  
  11.                 padding: 0;  
  12.                 margin: 0;  
  13.             }  
  14.   
  15.             body{  
  16.                 width: 100%;  
  17.                 min-height: 100%;  
  18.                 padding: 0;  
  19.                 margin: 0;  
  20.                 position: relative;  
  21.             }  
  22.   
  23.             .leftside {  
  24.                 position: fixed;  
  25.                 width: 50%;  
  26.                 top: 0px;  
  27.                 left: 0px;  
  28.                 height: 100%;  
  29.                 z-index: 1;  
  30.                 background-color: #0099FF;  
  31.             }  
  32.   
  33.             .rightside {  
  34.                 position: fixed;  
  35.                 width: 50%;  
  36.                 top: 0px;  
  37.                 right: 0px;  
  38.                 height: 100%;  
  39.                 z-index: 1;  
  40.                 background-color: #D0D0D0;  
  41.             }  
  42.   
  43.             .container {  
  44.                 position: absolute;  
  45.                 top: 0px;  
  46.                 left: 50%;  
  47.                 margin-left: -490px;  
  48.                 width: 730px;  
  49.                 min-height: 100%;  
  50.                 z-index: 3;  
  51.                 border-left: 250px solid #22BBFF; /* állítsd majd a .leftside háttérszínéhez */  
  52.                 background-color: #D5D5D5; /* állítsd majd a .rightside háttérszínéhez */  
  53.             }  
  54.   
  55.             .wrapper{  
  56.                 margin-left: -250px;  
  57.                 width: 980px;  
  58.                 overflow: hidden;  
  59.             }  
  60.   
  61.             .panel {  
  62.                 float:left;  
  63.                 width: 250px;  
  64.             }  
  65.   
  66.             .content {  
  67.                 float: right;  
  68.                 width: 730px;  
  69.             }  
  70.         </style>  
  71.     </head>  
  72.     <body>  
  73.         <div class="container">  
  74.             <div class="wrapper">  
  75.                 <div class="panel">this is panel</div>  
  76.                 <div class="content">this is content</div>  
  77.             </div>  
  78.         </div>  
  79.         <div class="leftside"></div>  
  80.         <div class="rightside"></div>  
  81.     </body>  
  82. </html>  
Teszteltem is, jó.
2

köszi, de ez nem egészen az

ggabor · 2011. Május. 20. (P), 17.34
Köszi a példát, de ez a teljes oldalt elfoglalja, így kitakarja a már meglévő elemeket.

Persze azt nem említettem korábban, hogy ez az egész az oldal közepén kell, hogy megjelenjen, tehát alatta és felette is van már tartalom. Ahova ez a rész kéne az viszont simán a body alatt van, tehát nincs benne semmilyen container-ben.

Kíváncsi vagyok lesz-e megoldás, mert közben keresgéltem a neten és találtam valamit, de még mindig nem az igazi.
3

Táblázat

Gixx · 2011. Május. 20. (P), 18.02
Akkor marad a táblázat
4

dizájn terv

Gixx · 2011. Május. 20. (P), 18.02
Ugyanakkor az is segítene, ha látnám, hogy kéne kinéznie...
5

lerajzoltam a dolgot

ggabor · 2011. Május. 20. (P), 20.07
Készítettem egy vázlatot a problémáról. A rajzon a szürke részek már kész vannak, a probléma a színes (zöld+sárga) rész megoldása.

Layout vázlat
6

eeej...

leone92s · 2011. Jún. 2. (Cs), 00.22
üdv!

hát a rajz sokat segített, de ez mindig is mocsok meló, főleg ha nem akarod táblázatosan megoldani. PEdig úgy egyszerűbb lenne:S
  1. <table>  
  2. <tr>  
  3.   <td width="250px">panel</td>  
  4.   <td width="730px">content</td>  
  5. </tr>  
  6. </table>  
és persze a táblázatot is lehet szépen css-elni.
másik megoldás, nem tudom h működik-e:
  1. <div class="wrapper">  
  2.   <div class="panel">panel itt</div>  
  3.   <div class="content">tartalom itt</div>  
  4. </div>  
hozzá a css:
  1. div.wrapper{ width: 980px; display: inline-block; }  
  2. div.panel{ width: 250px; display: inline-block; float: left; }  
  3. div.content{ width: 730px; display: inline-block; float: right; }  
utóbbival lehet hogy még kell szöszölnöd.
remélem segítettem, bye