ugrás a tartalomhoz

CSS-lel div-ek egyenlőre szélességűre állítása

xmouse · 2007. Szep. 29. (Szo), 11.51
Sziasztok!

Egyszerűen nem jövök rá, hogy mi lehet a hiba. A searchbb id-jű divben lévő diveket egyenlő szélességűre szeretném állítani.

Előre is köszi

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>AjaxNames</title>
		<link rel="stylesheet" type="text/css" href="layout.css">
		<script type="text/javascript" language="JavaScript" src="Ajax.js"></script>
		<script type="text/javascript" language="JavaScript" src="client.js"></script>
	</head>
	<body>
		<h1>AjaxNames</h1>
		<b>Name format:</b> Firstname Surname<br>
		<b>Phone number format e.g.:</b> +36301245783<br>
		<div id="hh">Search</div>
		<div id="searchb">
			<div class="str">Name:</div><input type="text" id="iname"><br>
			<div class="str">Phone number:</div><input type="text" id="inum">
		</div>
		<div id="hh">Add</div>
		<div id="addb">

	</body>
</html>
layout.css:

.str{
	width:100px;
	display:inline;
}
‹ div szélessége tartalomhoz adaptálódjon Javascript - Változóból objektumot ›
 ■
1

szemantika, validálás

zila · 2007. Szep. 29. (Szo), 12.21
Én a helyedben a labelhez label tag-et használnék, nem inline div-eket...
A label-nek is lehet szélesséeget adni...

Mielőtt nekiesel a problémának, validáld az oldalt. Ha az már nem ad ki hibát, akkor foglalkozz a problémával (ha még fenáll...)
4

próba

xmouse · 2007. Szep. 29. (Szo), 13.27
megpróbáltam de ugyanazt csinálja arra is... de azért köszi
2

Validáljon

janoszen · 2007. Szep. 29. (Szo), 12.21
Először validáljon, utána lehet CSS hibákkal is foglalkozni. És légyszíves használd a BBCode jelölőket a kódra.

Egyébként inline elemnek tudtommal nehéz szélességet adni mert pont azért inline hogy folytatólagosan csinálja.
3

érvényes

xmouse · 2007. Szep. 29. (Szo), 13.26
már valid. de a hiba továbbra is fennáll :(

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>AjaxNames</title>
		<link rel="stylesheet" type="text/css" href="layout.css">
		<script type="text/javascript" src="Ajax.js"></script>
		<script type="text/javascript" src="client.js"></script>
	</head>
	<body>
		<h1>AjaxNames</h1>
		<div><b>Name format:</b> Firstname Surname<br>
		<b>Phone number format e.g.:</b> +36301245783</div>
		<div class="modhead">Search</div>
		<div id="searchb">
			<div class="str">Name:</div><input type="text" id="iname"><br>
			<div class="str">Phone number:</div><input type="text" id="inum">
		</div>
		<div class="modhead">Add</div>
		<div id="addb">
			
		</div>
		<div class="modhead">List</div>
		<div id="listb">
			
		</div>
	</body>
</html>
5

CSS

janoszen · 2007. Szep. 29. (Szo), 13.32
Mint írtam az előbb, az inline és a weight nem működik együtt.
6

ok

xmouse · 2007. Szep. 29. (Szo), 13.41
igen, a span-t és a label-t is próbáltam már, inline nélkül, de úgy sem jó :(
7

Inline

janoszen · 2007. Szep. 29. (Szo), 14.04
Naná hogy nem megy, mert a felsorolt elemek inline elemek. Próbáld meg inkább egymás mellé float-olni.
8

Ahogy más is mondta

Jano · 2007. Szep. 29. (Szo), 14.29
Ahogy más is mondta: egy inline elemnek nem adhatsz szélességet!

Első: legyen helyes HTML-ed! Div helyett jelöld label-lel a címkét és használd a for paraméterét, hogy hozzákösd az input mezőhőz. 

<label for="name">Name:</label><input id="name" type="text">
Ezután a labeleknek es az inputokat is állítsad float:left-re. A float következménye, hogy display:block típusúak lesznek és így már adhatsz nekik méretet.

#searchb label,
#searchb input {
 float:left;
 width:100px;
}
Ha a floatolt elemeknek olyan szélességet állítasz, hogy a label es input beleférjen egymás mellé a befoglaló dobozban, akkor szépen egymás mellé fognak kerülni.

A vicc most jön:a float-olt elemeknek viszont az IE bugok kijátszására, beszoktak tenni még egy display:inline; szabályt is. Ez ne zavarjon meg téged! :) Pl, akkor jön jól, ha ugyanolyan oldali margint akarsz adni mint amerre floatoltált, ugyanis az IE6 ilyenkor szépen duplázná azt, a "hack" nélkül.
A többi böngésző szerencsére tudja, hogy a float miatt ugyis block típusó, ezért figyelmenkívűl hagyja ezt a szabályt.
9

sikerült

xmouse · 2007. Szep. 29. (Szo), 16.08
Sikerült! örök hála :)
10

div szélessége?

drumlin · 2007. Okt. 17. (Sze), 21.14
Nem akartam új topicot indítani, itt kérdezem meg:

Hogyan lehet elérni, hogy a div szélessége a benne megjelenő elemé (pl kép) legyen?

Most nem adtam szélességet a divnek, viszont 100% szélességet kap így, függetlenül attól, hogy mekkora a benne levő kép.
11

Új topic

janoszen · 2007. Okt. 17. (Sze), 21.37
Indíts csak nyugodtan új topicod. A kérdésed nem kapcsolódik ide úgyhogy nem is való ide.