ugrás a tartalomhoz

3 hasáb formázása Css -ben.

Matyi Gábor · 2007. Aug. 12. (V), 20.07
|--------------------------------------|
| header header headerrrr |
---------------------------------------|
| bal | jobb jobb jobb jobbb |
| bal |-------------------------------|
| bal | balkozep | jobbkozep |
|--------------------------------------|
| lablec lablec lablec lablec |
|--------------------------------------|


sziasztok, egy ilyen képernyőkinézetet próbálok css-ben megformázni, sehogy sem sikrül. A float: left és right-al próbálkozom, illetve definiálom az egyes "div" -ekhez tartozó oszlop szélességeket. Az egyik probléma, hogy a balo oldali oszlopban található menu, rövidebb, mint a balkozep és jobbkozépben található tartalom, igy a balkozép belóg a bal oldal alá. A másik gond, hogy a lábléc bekerül a bal és a jobb közé.

Kérlek segítsetek.
‹ Ajaxal JS küldése CDATA manipulálás JavaScripttel ›
 ■
1

talán ilyenre gondoltál

solkprog · 2007. Aug. 12. (V), 21.23
Nem tudom hogy ilyenre gondoltál-e. Nekkem ez jött le hogy ezt akkarod. Ha nem akkor mond mit értetem fére.
Egyébként meg saját kódot mellékelhetél volna.
Hát én szivem szerint nem így neveztem volna el a dolgokat. balkozep, bal, jobb stb. de mindegy.
css rész:

#fejlec,#lablec,.bal,.jobb,.balkozep,.jobbkozep{
	border: 1px solid #000;
	}
	.balkozep{
		float: left;
	}
	#lablec {
		clear: both;
	}
	.balkozep {
		width: 50%;
	}
	.tartalom{
		float:Right;
		width: 80%; 
	}
html része:

<div id="fejlec">fejlec</div>
<div class="tartalom">
	<div class="jobb">jobb</div>
	<div class="balkozep">balkozep</div>
	<div class="jobbkozep">jobbkozep</div>
	</div>
	<div class="bal">bal</div>
<div id="lablec">lablec</div>
2

Szerintem másra gondolt.

szabozee · 2007. Aug. 17. (P), 18.55
Rengeteg kész css template van, elég rákeresni a google-val a css template szavakra, és mindenféle elrendezésre van kész megoldás.
Amit nem ért, az, hogy miért lóg "bele".
Ennek két oka szokott lenni, az egyik a position:relative/absolute hiánya, vagy rossz használata, a másik pedig, hogy praktikus egy-egy clear sort iktatni a blokkok közé.
.clear {clear: both; width: 100%; height: 1px; font-size: 1px; }
<div class="clear"></div>
3

válasz

dog · 2007. Aug. 18. (Szo), 14.01
Ilyen template történetesen van a dreamweaverben is, ctrl+N és kiválasztod a listából.
bocs véletlen privátként küldtem el, rossz gombot nyomtam.