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: 

.bar { width: 100%;  min-width: 1000px; margin: 0px auto; }
.container { width: 980px; margin: 0px auto; padding-left: 10px; padding-right: 10px; }
A html:

<div class="bar" id="special">
<div class="container">content</div>
</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

<!DOCTYPE html>
<html dir="ltr" lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Container</title>
		<meta name="title" content="html5 teszt">
		<style type="text/css">
			html{
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
			}

			body{
				width: 100%;
				min-height: 100%;
				padding: 0;
				margin: 0;
				position: relative;
			}

			.leftside {
				position: fixed;
				width: 50%;
				top: 0px;
				left: 0px;
				height: 100%;
				z-index: 1;
				background-color: #0099FF;
			}

			.rightside {
				position: fixed;
				width: 50%;
				top: 0px;
				right: 0px;
				height: 100%;
				z-index: 1;
				background-color: #D0D0D0;
			}

			.container {
				position: absolute;
				top: 0px;
				left: 50%;
				margin-left: -490px;
				width: 730px;
				min-height: 100%;
				z-index: 3;
				border-left: 250px solid #22BBFF; /* állítsd majd a .leftside háttérszínéhez */
				background-color: #D5D5D5; /* állítsd majd a .rightside háttérszínéhez */
			}

			.wrapper{
				margin-left: -250px;
				width: 980px;
				overflow: hidden;
			}

			.panel {
				float:left;
				width: 250px;
			}

			.content {
				float: right;
				width: 730px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="wrapper">
				<div class="panel">this is panel</div>
				<div class="content">this is content</div>
			</div>
		</div>
		<div class="leftside"></div>
		<div class="rightside"></div>
	</body>
</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

<table>
<tr>
  <td width="250px">panel</td>
  <td width="730px">content</td>
</tr>
</table>
és persze a táblázatot is lehet szépen css-elni.
másik megoldás, nem tudom h működik-e:

<div class="wrapper">
  <div class="panel">panel itt</div>
  <div class="content">tartalom itt</div>
</div>
hozzá a css:

div.wrapper{ width: 980px; display: inline-block; }
div.panel{ width: 250px; display: inline-block; float: left; }
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