ugrás a tartalomhoz

Kép igazítás probléma

Karvaly84 · 2012. Jún. 20. (Sze), 06.02
Sziasztok!

Valószínűleg én vagyok az analfabéta és mivel angolul nem tudtam megfogalmazni a problémám, nem tudtam érdemi találatot kicsikarni a keresőből, így felteszem a kérdést:

Lényegében van egy konténer div 336 pixel széles belső térrel. 360(padding: 0 12px);

Ebbe a konténerbe pakolnék 7 darab 48x48-as képet ami együtt elvileg pont 336 pixel;

A Firebug-al nem mentem sokra, viszont egy outline beállításával a képeken látszik, hogy a képek között kb 2 pixel széles tér van, ami miatt az utolsó kép lecsúszik új sorba;

DOCTYPE: XHTML 1.0 Transitional

css:

/* layout.css */

html {
	min-height: 100%;
}

body {
	margin: 0 0 0 0;
	min-height: 100%;
	font-family: sans-serif;
}

a img {
	border: none;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.clear-both {
	clear: both;
}

.font-weight-bold {
	font-weight: bold;
}

wrapper {
	min-height: 100%;
}

#left-side, #right-side {
	position: absolute;
	top: 0;
	width: 50%;
	min-height: 100%;
}

#left-side {
	left: 0;
}

#right-side {
	right: 0;
}

#left-side > .content, #right-side > .content {
	width: 360px;
}

#left-side > .content {
	margin: 0 0 0 auto;
	text-align: center;
}

#right-side > .content {
	margin: 0 auto 0 0;
}

#left-side > .content > div, #right-side > .content > div {
	padding: 0 12px;
}
html:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="styles/style.css" />
<title>index.html</title>
</head>
<body>
	<div id="wrapper">
		<div id="left-side">
			<div class="content">
				<div>
					<img src="image1.jpg" width="48" height="48" />
					<img src="image2.jpg" width="48" height="48" />
					<img src="image3.jpg" width="48" height="48" />
					<img src="image4.jpg" width="48" height="48" />
					<img src="image5.jpg" width="48" height="48" />
					<img src="image6.jpg" width="48" height="48" />
					<img src="image7.jpg" width="48" height="48" />
				</div>
			</div>
		</div>
		<div id="right-side">
			<div class="content"></div>
		</div>
	</div>
</body>
</html>
‹ onmousedown onmouseup CKEDITOR Horgany ›
 ■
1

Közbe csináltam egy olyat,

Karvaly84 · 2012. Jún. 20. (Sze), 06.29
Közbe csináltam egy olyat, hogy a képeket a forráskódban egy sorba tettem:

<div><img ... /><img ... /></div>
Az eredmény az aminek lennie kéne, pont beférnek egy sorba.

Ez egyébként miért van?

Mivel az oldalt XSLT-vel generálom kivettem az output-ból az indent="yes" attribútumot, viszont így olvashatatlan a kód sajnos.
2

whitespace

Poetro · 2012. Jún. 20. (Sze), 06.57
Mivel a képek inline-block elemek, ezért megjelenik közöttük a szóköz, mint bármilyen másik inline vagy inline-block elem között. Használhatsz esetleg float-ot, vagy a XSLT-ben abban a blokkban valahogy eltávolítod a szóközöket (talán <xsl:strip-space>).
3

köszönöm

Karvaly84 · 2012. Jún. 20. (Sze), 07.37
köszönöm