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:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
  5.         <title>AjaxNames</title>  
  6.         <link rel="stylesheet" type="text/css" href="layout.css">  
  7.         <script type="text/javascript" language="JavaScript" src="Ajax.js"></script>  
  8.         <script type="text/javascript" language="JavaScript" src="client.js"></script>  
  9.     </head>  
  10.     <body>  
  11.         <h1>AjaxNames</h1>  
  12.         <b>Name format:</b> Firstname Surname<br>  
  13.         <b>Phone number format e.g.:</b> +36301245783<br>  
  14.         <div id="hh">Search</div>  
  15.         <div id="searchb">  
  16.             <div class="str">Name:</div><input type="text" id="iname"><br>  
  17.             <div class="str">Phone number:</div><input type="text" id="inum">  
  18.         </div>  
  19.         <div id="hh">Add</div>  
  20.         <div id="addb">  
  21.   
  22.     </body>  
  23. </html>  
layout.css:
  1. .str{  
  2.     width:100px;  
  3.     display:inline;  
  4. }  
 
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 :(
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
  5.         <title>AjaxNames</title>  
  6.         <link rel="stylesheet" type="text/css" href="layout.css">  
  7.         <script type="text/javascript" src="Ajax.js"></script>  
  8.         <script type="text/javascript" src="client.js"></script>  
  9.     </head>  
  10.     <body>  
  11.         <h1>AjaxNames</h1>  
  12.         <div><b>Name format:</b> Firstname Surname<br>  
  13.         <b>Phone number format e.g.:</b> +36301245783</div>  
  14.         <div class="modhead">Search</div>  
  15.         <div id="searchb">  
  16.             <div class="str">Name:</div><input type="text" id="iname"><br>  
  17.             <div class="str">Phone number:</div><input type="text" id="inum">  
  18.         </div>  
  19.         <div class="modhead">Add</div>  
  20.         <div id="addb">  
  21.               
  22.         </div>  
  23.         <div class="modhead">List</div>  
  24.         <div id="listb">  
  25.               
  26.         </div>  
  27.     </body>  
  28. </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.
  1. <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.
  1. #searchb label,  
  2. #searchb input {  
  3.  float:left;  
  4.  width:100px;  
  5. }  
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.