ugrás a tartalomhoz

CSS-sel középre igazítás

Vrt · 2008. Jan. 17. (Cs), 18.07
Sziasztok!

A letolások elkerülése végett..tudom h. hasonló kérdések / válaszok már láttak napvilágot, de mint kezdő kicsit elvesztem, így a segítségeteket kérném a következőkben:

1. Elkészült grafika PS -ben.
2. Imageready-ben megvágva majd exportálva xhtml/div -re.
3. És akkor itt is volna a problémám. Nem tudom, hogy lehet középre igazítani az egész tartalmat. (ráadásul úgy szeretném középre igazítani hogy amennyiben a browser ablakát méretezik úgy alkalmazkodjon az oldal ameddig tud. ;)

Az IR az egész tartalmat ugye egy TABLE_01 div közé pakolja. Mindenhol azt olvastam, hogy ha ennek a konténernek a css részét módosítom valahogy így:

#Table_01 {
width:766px;
height:770px;
margin: 0 auto 0 auto;
}

akkor az az egész tartalmat középre zárja és úgy is jelenik meg. Na nekem valahogy ez nem sikerült.

Segítségeteket kérném abban, hogy kell módosítani a css részét hogy az IR által:

#fejlec_ {
position:absolute;
left:8px;
top:0px;
width:750px;
height:129px;
}
definiált elrendezésből hogy lehet egy középre rendezett siteot varázsolni.
Olyan kísérletezéseim voltak már hogy a left paraméternek 50 % -ot adtam meg és egy margin-left: 8px plusz sorral középre igazítottam (majdnem:) ) de azért arra rájöttem h. nem ez a jó megoldás.

Köszönöm a segítséget. És megkérném hogy olyan dr. segítsen akinek van egy kezdőhöz is türelme.

Üdv.
Vrt
‹ Text align - div tagon Miért nem lehet "display: table" a DIV-em IE alatt? ›
 ■
1

tedd egy divbe

lorko · 2008. Jan. 17. (Cs), 19.31
tedd az egészet egy divbe 
<div id="container">

... tartalom(táblázat)...

</div>
és tedd be ezt a css-t:
html, body {
	margin:0;
	padding:0;
	width:100%; 
	height:100%;
	}
div#container{
	width: 766px;
	margin: 0 auto;
	}
talán ez segít, de jó lenne látni egy linket, hogy meg lehessen nézni, mert látatlanba elég nehéz.
2

egy div.

Vrt · 2008. Jan. 17. (Cs), 20.04
Remélem ezért nem a nagyobbacska kódrészletért nem veszik le a fejem. Elméletileg alapból egy konténerbe rakja az IR. Ez a TAble_01. Vagy rosszul gondolom? De lehet h csak nem értem mit kellene csinálnom. Józan ésszel azt hiszem úgy kellene működjön, hogy a table_01 div-et ha középre igazítom akkor menne vele a többi is. Az az gond hogy én megcsináltam már azt amit te is javasoltál. Külön is vettem a css kódot egy .css fájlba bár nem ez a lényeg. Magát a tárolót be is húzza középre. De az össze alatta levő div-et nem. Gondolom h. az orrom előtt a magyarázat csak annyira nem értem még (gondolom a gond velük h. absolute poziciónálással vannak meghatározva de nem igazán értem h. lehet relative-ot használni és belökni a közepére) .

Az összes css részt nem vágom ide mert gyakorlatilag mind ua. csak a pozíciók mások.

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:766px;
height:770px;
}

#fejlec_ {
position:absolute;
left:8px;
top:0px;
width:750px;
height:129px;
}

#fooldal-grafika-fent_ {
position:absolute;
left:8px;
top:129px;
width:292px;
height:408px;
}


<div id="Table_01">
<div id="fejlec_">
<img id="fejlec" src="images/fejlec.gif" width="750" height="129" alt="vargazsuzsanna fejlec" />
</div>
<div id="fooldal-grafika-fent_">
<img id="fooldal_grafika_fent" src="images/fooldal_grafika_fent.gif" width="292" height="408" alt="" />
</div>
<div id="Table_03">
</div>
<div id="menu1_">
<img id="menu1" src="images/menu1.gif" width="165" height="46" alt="" />
</div>
<div id="menu2_">
<img id="menu2" src="images/menu2.gif" width="128" height="46" alt="" />
</div>
<div id="menu3_">
<img id="menu3" src="images/menu3.gif" width="93" height="46" alt="" />
</div>
<div id="menu4_">
<img id="menu4" src="images/menu4.gif" width="127" height="46" alt="" />
</div>
<div id="menu5_">
<img id="menu5" src="images/menu5.gif" width="163" height="46" alt="" />
</div>
<div id="honalp-psd-12_">
<img id="honalp_psd_12" src="images/honalp_psd_12.gif" width="37" height="132" alt="" />
</div>
<div id="fooldal-grafika-lent_">
<img id="fooldal_grafika_lent" src="images/fooldal_grafika_lent.gif" width="255" height="86" alt="" />
</div>
<div id="idezet_">
<img id="idezet" src="images/idezet.gif" width="421" height="86" alt="" />
</div>
<div id="Table_02">
<div id="lab-bal_">
</div>
</div>
<div id="lab-jobb_">
<img id="lab_jobb" src="images/lab_jobb.gif" width="364" height="101" alt="" />
</div>
</div>
3

DIV != TABLE

N0r3i · 2008. Jan. 18. (P), 11.32
Szia!

A fenti kódrész alapján nagyon úgy tűnik, hogy te az IR-vel nem táblázatos formát exportáltál, tehát a táblázatok középre igazítása nem játszik. Ezek abszolút pozícionált div-ek, tehát csak a pozíciók kézi átírása segítene, de ez nyilván nem megoldás.

Próbáld meg táblázatos formában exportálni az IR-ből (van ilyen beállítás), majd alkalmazd rá a táblázat középre helyezésénél kapott javaslatot!

Norbi
4

tabless

Vrt · 2008. Jan. 19. (Szo), 17.02
Köszönöm a segítségeteket. Végül is csak sikerült megoldani. Tabless oldalt szeretnék összehozni, ezért nem akartam az általad említett módon exportálni.
5

absolute helyett relative

Jano · 2008. Jan. 20. (V), 16.26

body: {
 text-align:center; /* IE-nek kell */
}
#Table_01 {
margin:0 auto; /* ez teszi kozepre */
text-align:left; /* IE miatt betett center hatás felüldefiniálása */
position:relative; /* a belső absolutok ehhez igazodnak */
width:766px;
height:770px;
}
Középre igazítás CSS-sel