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>


<!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;
}


.str{
	width:100px;
	display:inline;
}

■

HTML, CSS, JavaScript, Ajax

csirip

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...)

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

próba

xmouse · 2007. Szep. 29. (Szo), 13.27

megpróbáltam de ugyanazt csinálja arra is... de azért köszi

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

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.

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

é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>


<!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>

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

CSS

janoszen · 2007. Szep. 29. (Szo), 13.32

Mint írtam az előbb, az inline és a weight nem működik együtt.

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

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ó :(

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

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.

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

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">


<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;
}


#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.

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

sikerült

xmouse · 2007. Szep. 29. (Szo), 16.08

Sikerült! örök hála :)

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

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.

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

Ú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.

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

Weblabor

Keresés