CSS/XHTML - táblázatok float:left-elve majd ez egész középre hogyan?

unregistered · 2009. Okt. 15. (Cs), 15.10

Hello!

Olyan problémám adódott, hogy van egy div-em azon belül 2 táblázat. Ez a két táblázat egymás mellé van helyezve (mindkettő float:left;-el). Ilyenkor ugye az első táblázat is balra záródik a div-en belül a második meg mellé... A kérdésem az lenne: hogy lehet ezt a két egymás mellett lévő táblát középre igazítani div-en belül?
(fix távolságot az oldalaktól nem lehet megadni mivel a második tábla egy sablon tábla ami feltöltődik adatokkal SQL-ből majd ha megtelt "csinál" egy 3. táblát ami a már meglévő kettő mellé jön és így tovább... magyarul randomra szélesedik ez az egész csak a div amiben benne vannak az fix szélességű kb úgy néz ki, hogy a div 700px széles és a táblázatok oszlopai 100px szélesek)

Remélem érhető volt a magyarázatom ;)
Köszönöm előre is!

■

HTML, CSS, JavaScript, Ajax

csirip

Az a baj...

whiteman0524 · 2009. Okt. 15. (Cs), 20.17

hogy semminek sincs fix szélessége. Lehetne margin-okkal dolgozni, de ahhoz pár fix dolgot meg kéne határozni. Középre igazítani általában a margin: 0 auto 0 auto; stílussal szoktak, de ez megköveteli annak az elemnek a fix szélességét amit középre akarsz igazítani. Mivel a float-olt táblázataid nem fix szélességűek (illetve azok de több lehet belőlük egymás mellett, tehát mégsem) ezért ez a módszer nem működne. Szóval ezt így (első körben) nem igen lehet megoldani a specifikációid alapján pusztán CSS-el (a tévedés jogát fenntartom :))

Esetleg JavaScript jelenthet megoldást, azzal minden további nélkül meg ehetne oldani. Csak kicsit nehézkes lenne, és az oldal csak a teljes dokumentum betöltődése után rendeződne, ami nem éppen a legszebb megoldás.

Javaslom hogy inkább tervezd át az elrendezésedet. :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

inline

Baldric · 2009. Okt. 15. (Cs), 20.59

A táblázatoknak ne float left-et, hanem display: inline-block, vagy inline-table-t adj, ezzel egy sorba kényszeríted őket, a szélességüket érzékelni fogja a felettük álló div is, egyetlen problémát természetesen mindannyiunk "kedvenc" böngészője jelenti...
Szerencsére azért ie alatt is működik a sima display:inline tulajdonság.

Remélem tudtam segíteni, kipróbáltam, nálam szépen működött.

Szerkesztve: Azt kifelejtettem hogy a táblázatokat tedd egy div-be, és add neki a margin: auto; tulajdonságot, ez az egész pedig legyen benne a fix szélességű div-edbe.
Ha a táblázataid szélességét és mennyiségét nem tudod, akkor jó ötlet lehet a legfelső divnek overflow-al megadni hogy jelenjen meg a vízszintes görgetősáv ha szükséges.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

..

carstepPCE · 2009. Okt. 16. (P), 11.17

Mivel ebben az esetben inline tulajdonsagot kapnak a tablazatok, ezert e legkulso divnek adhatsz text-align -> center -t is, ha nem tevedek. Termeszetesen akkor, ha a kulso (700px szeles ) div-be nem kerul mas tartalom a ket tablazaton kivul.

Mindez csak elmeleti sikon mondom, kiprobalni nem volt lehetosegem, javitsatok, ha tevedek.

Udv.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Ha jól gondolom muszáj is

Baldric · 2009. Okt. 16. (P), 12.29

Ha jól gondolom muszáj is megadni a text-align: center-t, legalábbis ie-ben, mert ott ugye nem fogja inline-blokknak tekinteni a táblázatokat. Talán lehetne próbálkozni a haslayout tulajdonsággal, de nem hinném hogy sok értelme lenne, egyszerűbb megadni a text-align-t és a margin:auto-t is, persze így a táblázat celláinak szövege is középre lesz igazítva, de ez már nem okozhat gondot.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

:)

unregistered · 2009. Okt. 19. (H), 11.58

Köszönöm szépen mindenkinek a segítséget! Baldric megoldása szépen működik!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

na még egy kérdés:

unregistered · 2009. Okt. 19. (H), 12.28

inline-nál a táblázat egymás mellé igazított oszlopai eltartanak egymástól így:

float-nál nem volt ez a gond... a táblázat ide vonatkozó tulajdonságai:
- margin: 0;
- padding: 0;
- border-spacing: 0;
- border collapse: collapse;

Mitől van ez?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

border-collapse

gphilip · 2009. Okt. 19. (H), 12.53

azért, mert lehagytál egy kötőjelet: border-collapse

:-)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

nem nem ;)

unregistered · 2009. Okt. 19. (H), 13.11

A css-ben jól van írva minden, csak ide írtam rosszul mert nem copy/pasteltem ezért sem raktam ilyen code mizériába...

A hozzászóláshoz regisztráció és belépés szükséges
új téma

collapsed

Arnold Layne · 2009. Okt. 19. (H), 15.46

Usage: table { border-collapse: [collapsed | separate]; }

by: Quick Lookup :-)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

collapseD?

unregistered · 2009. Okt. 19. (H), 15.56

Dehát a collapsed (d-vel a végén) nem is helyes... W3S
Azért kipróbáltam és tényleg nem helyes, mert d-vel a végén az alapérték (separate) eredmény kapom.

Vagy én nem értem? :(

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Valóban

Arnold Layne · 2009. Okt. 19. (H), 17.12

Dehát a collapsed (d-vel a végén) nem is helyes...

Igaz, ezúton kérek elnézést a félrevezetésért.
Kipróbáltam, tényleg nem kell a "d" a végére.
Ez van ha az ember vakon csak egy forrásban bízik meg.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

;)

unregistered · 2009. Okt. 19. (H), 17.51

semmi baj... jóváteheted ha kitalálod a probléma okát ;)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Küld valami working copyt,...

gphilip · 2009. Okt. 19. (H), 23.58

...hogy lássuk, miről beszélünk! :-)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

itt a cucc kb-ra:

unregistered · 2009. Okt. 20. (K), 15.25

style.css


body {
	margin: 20px 0 0 0;
	font: 12px Tahoma;
	color: #808080;
}

	#page_center {
		width: 770px;
		margin: 0 auto;
	}

		#middle {
			width: 770px;
			background: url("../img/bg.png") 0 0 repeat-y;
		}
		
			#content {
				clear: both;
				width: 710px;
				padding: 1px 30px 10px 30px;
				overflow: hidden;
			}

.antropo_table {
	display: inline-table;
	margin: 0;
	padding: 0;
	border-spacing: 0;
	border-collapse: collapse;
}

.col1 {
	width: 20px;
	padding: 0;
	border: 1px solid #bfbfbf;
	text-align: center;
	font: 12px Tahoma;
	color: #808080;
}


.col2 {
	height: 20px;
	padding: 0 3px 0 3px;
	border: 1px solid #bfbfbf;
	font: 12px Tahoma;
	color: #808080;
}

.col3 {
	height: 20px;
	padding: 0 3px 0 3px;
	border: 1px solid #bfbfbf;
	text-align: center;
	font: 12px Tahoma;
	color: #808080;
}

.antropo_repeat_table {
	display: inline-table;
	margin: 0;
	padding: 0;
	border-spacing: 0;
	border-collapse: collapse;
}

.col_repeat {
	height: 20px;
	padding: 0;
	margin: 0;
	text-align: center;
	border: 1px solid #bfbfbf;
	color: #808080;
}

	.antro_input {
		height: 17px;
		width: 60px;
		padding: 0;
		margin: 1px 0 0 0;
		text-align: center;
		border: none;
	}

.clear_cell {
	height: 10px;
	border: none;
}

index.html (ami php valójában de az most mindegy)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Teszt</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>

	<body>
		<div id="page_center">
			
			<div id="middle">
				<div id="content">
				
					<div style="text-align:center;">
						<table class="antropo_table">
							<tr>
								<td class="col1" rowspan="3">A<br />B<br />C</td>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
							<tr>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
							<tr>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
								<td class="clear_cell" colspan="3"></td>
							</tr>
							<tr>
								<td class="col1" rowspan="3">A<br />B<br />C</td>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
							<tr>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
							<tr>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
								<td class="clear_cell" colspan="3"></td>
							</tr>
							<tr>
								<td class="col1" rowspan="3">A<br />B<br />C</td>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
							<tr>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
							<tr>
								<td class="col2">Text1</td>
								<td class="col3">123</td>
							</tr>
						</table>
						
						<table class="antropo_repeat_table">
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="clear_cell"></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="clear_cell"></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
						</table>
						
						<table class="antropo_repeat_table">
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="clear_cell"></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="clear_cell"></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
							<tr>
								<td class="col_repeat"><input class="antro_input" id="" name="" type="text" maxlength="3" value="" /></td>
							</tr>
						</table>
					</div>
				
				</div>
			</div>
			
		</div>
	</body>

</html>

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés