ugrás a tartalomhoz

Másképp néz ki a DIVes oldalam FXben

Anonymous · 2006. Május. 9. (K), 21.56
A problémám az hogy a dives oldalam másképp néz ki fxben mint ie-ben. FXben teljesen el van csúszva. CSS kód tele van errorral, ezzel lehet a baj?
‹ Ne legyen térköz a <form> elem után useCapture ›
 ■
1

forráskód?

talger · 2006. Május. 9. (K), 22.31
ennyiből nem sokat tudunk segíteni...

a sok error jelenthet valamit, nem véletlenül van...
2

pontosítok

Anonymous · 2006. Május. 9. (K), 22.46
Nem error, warning. Úgy kell elképzelni hogy a divek teljesen össszecsúszva vannak, némelyik a másik tetején. IE-ben nagyon szépen néz ki.


Line : 1 (Level : 2) Redefinition of margin-bottom : body
Line : 1 (Level : 2) Redefinition of margin-left : body
Line : 1 (Level : 2) Redefinition of margin-right : body
Line : 1 (Level : 2) Redefinition of margin-top : body
Line : 2 (Level : 1) You have no background-color with your color : a:link
Line : 2 (Level : 1) Same colors for color and background-color in two contexts div.aktualisc and a:link
Line : 2 (Level : 1) Same colors for color and background-color in two contexts div.newsheader and a:link
Line : 2 (Level : 1) Same colors for color and background-color in two contexts #auto791973791973 and a:link
Line : 3 (Level : 1) Same colors for color and background-color in two contexts div.newsheader and a:visited
Line : 3 (Level : 1) You have no background-color with your color : a:visited
Line : 3 (Level : 1) Same colors for color and background-color in two contexts div.aktualisc and a:visited
Line : 3 (Level : 1) Same colors for color and background-color in two contexts #auto791973791973 and a:visited
Line : 4 (Level : 1) You have no background-color with your color : a:active
Line : 5 (Level : 1) You have no background-color with your color : a:hover
Line : 6 (Level : 1) Same colors for color and background-color in two contexts div.footer and a:link#akt
Line : 6 (Level : 1) Same colors for color and background-color in two contexts div.main and a:link#akt
Line : 6 (Level : 1) You have no background-color with your color : a:link#akt
Line : 6 (Level : 1) Same colors for color and background-color in two contexts div.lowerlogo and a:link#akt
Line : 7 (Level : 1) You have no background-color with your color : a:visited#akt
Line : 7 (Level : 1) Same colors for color and background-color in two contexts div.lowerlogo and a:visited#akt
Line : 7 (Level : 1) Same colors for color and background-color in two contexts div.footer and a:visited#akt
Line : 7 (Level : 1) Same colors for color and background-color in two contexts div.main and a:visited#akt
Line : 8 (Level : 1) You have no background-color with your color : a:active#akt
Line : 9 (Level : 1) You have no background-color with your color : a:hover#akt
Line : 11 (Level : 1) You have no color with your background-color : div.lowerlogo
Line : 12 (Level : 1) Same colors for color and background-color in two contexts div.footer and div.aktualis
Line : 12 (Level : 1) Same colors for color and background-color in two contexts div.lowerlogo and div.aktualis
Line : 12 (Level : 1) Same colors for color and background-color in two contexts div.main and div.aktualis
Line : 12 (Level : 1) You have no background-color with your color : div.aktualis
Line : 16 (Level : 1) You have no color with your background-color : div.aktualisc
Line : 22 (Level : 1) Same colors for color and background-color in two contexts div.footer and div.mainheader
Line : 22 (Level : 1) Same colors for color and background-color in two contexts div.lowerlogo and div.mainheader
Line : 22 (Level : 1) Same colors for color and background-color in two contexts div.main and div.mainheader
Line : 22 (Level : 1) You have no background-color with your color : div.mainheader
Line : 23 (Level : 1) You have no color with your background-color : div.maincontent
Line : 25 (Level : 1) Same colors for color and background-color in two contexts div.main and div.sideheader
Line : 25 (Level : 1) Same colors for color and background-color in two contexts div.lowerlogo and div.sideheader
Line : 25 (Level : 1) You have no background-color with your color : div.sideheader
Line : 25 (Level : 1) Same colors for color and background-color in two contexts div.footer and div.sideheader
Line : 26 (Level : 1) You have no background-color with your color : div.sideheadergta3
Line : 26 (Level : 1) Same colors for color and background-color in two contexts div.main and div.sideheadergta3
Line : 26 (Level : 1) Same colors for color and background-color in two contexts div.footer and div.sideheadergta3
Line : 26 (Level : 1) Same colors for color and background-color in two contexts div.lowerlogo and div.sideheadergta3
Line : 27 (Level : 1) Same colors for color and background-color in two contexts div.main and div.sideheadervc
Line : 27 (Level : 1) Same colors for color and background-color in two contexts div.footer and div.sideheadervc
Line : 27 (Level : 1) Same colors for color and background-color in two contexts div.lowerlogo and div.sideheadervc
Line : 27 (Level : 1) You have no background-color with your color : div.sideheadervc
Line : 28 (Level : 1) Same colors for color and background-color in two contexts div.lowerlogo and div.sideheadersa
Line : 28 (Level : 1) You have no background-color with your color : div.sideheadersa
Line : 28 (Level : 1) Same colors for color and background-color in two contexts div.footer and div.sideheadersa
Line : 28 (Level : 1) Same colors for color and background-color in two contexts div.main and div.sideheadersa
Line : 29 (Level : 1) Same colors for color and background-color in two contexts div.lowerlogo and div.sideheaderlcs
Line : 29 (Level : 1) Same colors for color and background-color in two contexts div.footer and div.sideheaderlcs
Line : 29 (Level : 1) You have no background-color with your color : div.sideheaderlcs
Line : 29 (Level : 1) Same colors for color and background-color in two contexts div.main and div.sideheaderlcs
Line : 30 (Level : 1) You have no color with your background-color : div.sidecontent
Line : 31 (Level : 1) You have no color with your background-color : div.main
Line : 39 (Level : 1) You have no color with your background-color : div.footer
Line : 43 (Level : 1) You have no color with your background-color : input
Line : 44 (Level : 1) You have no color with your background-color : textarea
Line : 45 (Level : 1) You have no color with your background-color : input#submit
3

css validator?

talger · 2006. Május. 9. (K), 23.15
ez a css validator kimenete?
inkább a html ill. css forráskód kellene, ebből nem állapítható meg mért csúszik össze weblap ff-ben.
4

css

Anonymous · 2006. Május. 9. (K), 23.28

body { font-size: 10px; margin: 15px; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #EBEBEB; margin: 0px; }
a:link { color: #579054; text-decoration: none; }
a:visited { color: #579054; text-decoration: none; }
a:active { color: #92c490; text-decoration: none; }
a:hover { color: #92c490; text-decoration: none; }
a:link#akt { color: #ffffff; text-decoration: none; }
a:visited#akt { color: #ffffff; text-decoration: none; }
a:active#akt { color: #c4e9c2; text-decoration: none; }
a:hover#akt { color: #c4e9c2; text-decoration: none; }
div.logo { background-image: url(logo.jpg); margin-left: auto; width: 700px; margin-right: auto; height: 161px; margin-top: 10px; }
div.lowerlogo { background-image: url(lower_logo.jpg); margin-left: auto; width: 689px; margin-right: auto; height: 153px; background-color: #FFFFFF; text-align: right; background-repeat: no-repeat; border-right: black 1px solid; padding-right: 10px; }
div.aktualis { width: 483px; background-image: url(tile.png); font-size: 10px; color: #FFFFFF; border: black 1px solid; margin-top: 5px; text-align: left; font-weight: bold; padding-top: 2px; padding-left: 2px; padding-right: 2px; vertical-align: middle; height: 16px; }
div.aktualisb { width: 161px; float: left; text-align: left; }
div.aktualisk { width: 161px; float: left; text-align: left; }
div.aktualisj { width: 161px; float: right; text-align: left; }
div.aktualisc { width: 487px; background-color: #579054; background-image: url(aktbg.jpg); border-left: black 1px solid; border-right: black 1px solid; border-bottom: black 1px solid; }
div.aktualis1 { width: 161px; float: left; border-right: #31612f 1px solid; text-align: left; }
div.aktualis2 { width: 163px; float: left; border-right: #31612f 1px solid; text-align: left; }
div.aktualis3 { width: 161px; float: right; text-align: left; }
div.container { width: 678px; }
div.maincontainer { float: right; width: 489px; }
div.mainheader { width: 483px; background-image: url(tile.png); font-size: 10px; color: #FFFFFF; border: black 1px solid; text-align: center; font-weight: bold; padding-top: 2px; padding-left: 2px; padding-right: 2px; vertical-align: middle; height: 16px; }
div.maincontent { width: 483px; background-color: #F6F5F5; padding: 2px; border-left: black 1px solid; border-right: black 1px solid; border-bottom: black 1px solid; text-align: justify; }
div.sidecontainer {  float: left; width: 179px; }
div.sideheader { width: 173px; background-image: url(tile.png); font-size: 10px; color: #FFFFFF; border: black 1px solid; text-align: center; font-weight: bold; padding-top: 2px; padding-left: 2px; padding-right: 2px; vertical-align: middle; height: 16px; }
div.sideheadergta3 { width: 173px; background-image: url(tilegta3.png); font-size: 10px; color: #FFFFFF; border: black 1px solid; text-align: center; font-weight: bold; padding-top: 2px; padding-left: 2px; padding-right: 2px; vertical-align: middle; height: 16px; }
div.sideheadervc { width: 173px; background-image: url(tilevc.png); font-size: 10px; color: #FFFFFF; border: black 1px solid; text-align: center; font-weight: bold; padding-top: 2px; padding-left: 2px; padding-right: 2px; vertical-align: middle; height: 16px; }
div.sideheadersa { width: 173px; background-image: url(tilesa.png); font-size: 10px; color: #FFFFFF; border: black 1px solid; text-align: center; font-weight: bold; padding-top: 2px; padding-left: 2px; padding-right: 2px; vertical-align: middle; height: 16px; }
div.sideheaderlcs { width: 173px; background-image: url(tilelcs.png); font-size: 10px; color: #FFFFFF; border: black 1px solid; text-align: center; font-weight: bold; padding-top: 2px; padding-left: 2px; padding-right: 2px; vertical-align: middle; height: 16px; }
div.sidecontent { width: 173px; background-color: #F6F5F5; border-bottom: black 1px solid; border-left: black 1px solid; border-right: black 1px solid; padding: 2px; text-align: left; }
div.main { border-right: black 1px solid; padding: 10px; margin-left: auto; border-left: black 1px solid; width: 678px; margin-right: auto; border-bottom: black 1px solid; background-color: #FFFFFF; }
div.newsheader { width: 483px; color: #FFFFFF; background-color: #579054; border-left: black 1px solid; border-right: black 1px solid; border-bottom: black 1px solid; text-align: left; padding-left: 2px; padding-right: 2px; padding-top: 1px; padding-bottom: 1px; font-weight: bold; }
div.newsheader1 { float: left; width: 345px; }
div.newsheader2 { float: right; width: 138px; text-align: right; font-weight: normal; }
div.posted { width: 483px; }
div.posted1 { float: left; width: 345px; text-align: left; }
div.posted2 { float: right; width: 138px; text-align: right; }
div.break { padding-bottom: 13px; }
div.footer { border: black 1px solid; margin-left: auto; width: 694px; margin-right: auto; padding: 2px; text-align: center; background-color: #FFFFFF; font-size: 10px; }
div.ads { border: black 1px solid; margin-left: auto; width: 468px; margin-right: 0px; height: 60px; font-size: 10px; }
ul {list-style-type: none; padding: 0; margin: 0; }
li { background-image: url(dot.png); background-repeat: no-repeat; background-position: 0 .4em; padding-left: 1em; margin-left: .3em; }
input { background-color: #569055; border-left: #275526 3px solid; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; border-right: black 0px solid; border-bottom: black 0px solid; border-top: black 0px solid; }
textarea { background-color: #569055; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; border: black 0px solid; }
input#submit { background-color: #569055; border-left: black 0px solid; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; border-right: black 0px solid; border-bottom: black 0px solid; border-top: black 0px solid; }
6

Könyörgöm tördeld!

Anonymous · 2006. Május. 10. (Sze), 08.57
Szerintem nincs olyan mazochista aki ezt végigolvassa ilyen formában...

Egyébként pedig a warning nem jelent gondot, mint láthatod a szülő osztály tulajdonságainak felüldefiniálásáért is rinyál.
5

html

Anonymous · 2006. Május. 9. (K), 23.31

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>x</title>
<meta name="description" content="Naprakész hírek, cikkek, letöltések a Grand Theft Auto sorozathoz - All the latest news, articles, downloads for series of Grand Theft Auto">
<link href="content/css.css" rel="stylesheet" type="text/css">
</head>

<body>
<div align="center">

	<div class="logo"></div>
	<div class="lowerlogo"><a href="#"><img src="content/homepage.png" width="82" height="21" border="0" alt=""></a> <a href="#"><img src="content/articles.png" width="82" height="21" border="0" alt=""></a> <a href="#"><img src="content/downloads.png" width="82" height="21" border="0" alt=""></a> <a href="#"><img src="content/forums.png" width="82" height="21" border="0" alt=""></a> <a href="#"><img src="content/contact.png" width="82" height="21" border="0" alt=""></a>
	  <div class="container">
			<div class="sidecontainer">
				<div style="margin-top: 5px;"></div>
				<div class="sideheader">Bejelentkezés</div>
				<div class="sidecontent"><div align="center"><input type="text" name="textfield"><br><input type="password" name="textfield"><br><input type="submit" name="Submit" value="Mehet" id="submit"><br><a href="#">Regisztráció</a><br><a href="#">Elvesztett jelszó</a></div></div>
			</div>
			<div style="float: right;" class="aktualis">
				<div class="aktualisb">Friss cikkek</div>
				<div class="aktualisk">Friss letöltések</div>
				<div class="aktualisj">Aktív témák</div>
			</div>
			<div class="aktualisc">
				<div class="aktualis1">
			  		<ul>
			    		<li><a id="akt" href="">Egy [VC]</a></li>
		      		</ul>
				</div>
				<div class="aktualis2">
			  		<ul>
			    		<li><a id="akt" href="">Hat [GTA3]</a></li>
			  		</ul>
				</div>
				<div class="aktualis3">
			  		<ul>
			    		<li><a id="akt" href="">Tizenegy [SA]</a></li>>
			  		</ul>
				</div>
			</div>
			<br><select style="font-weight: bold; width: 489px; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #c4e9c2; background-color: #579054;" name="select" size="1">
		  	<option style="color: white">Korábbi híreink</option>
		  	<option>Boldog születésnapot!</option>
			</select>
	  </div>
  </div>
	
	<div class="main">
		<div class="container">
			<div class="sidecontainer">
				<div class="sideheader">Navigáció</div>
				<div class="sidecontent"></div>
				<div class="break"></div>
				<div class="sideheaderlcs">Liberty City Stories</div>
				<div class="sidecontent"></div>
				<div class="break"></div>
				<div class="sideheadersa">San Andreas</div>
				<div class="sidecontent"></div>
				<div class="break"></div>
				<div class="sideheadervc">Vice City</div>
				<div class="sidecontent"></div>
				<div class="break"></div>
				<div class="sideheadergta3">GTA III</div>
				<div class="sidecontent"></div>
				<div class="break"></div>
				<div class="sideheader">Szavazás</div>
				<div class="sidecontent"></div>
				<div class="break"></div>
				<div class="sideheader">Partnerek</div>
				<div class="sidecontent"></div>
				<div class="break"></div>
				<div class="sideheader">Statisztika</div>
				<div class="sidecontent"></div>
				<div class="break"></div>
			</div>
			<div class="maincontainer">
				<div class="mainheader">Hírek</div>
				<div class="newsheader">
					<div class="newsheader1">Boldog születésnapot!</div>
					<div class="newsheader2">20/4/2006 10:59:37 AM</div>
				</div>
				<div class="maincontent">
					<div class="posted">
						<div class="posted1">Posted by x</div>
						<div class="posted2"><a href="#">Kommentek (19)</a></div>
					</div>
					<div style="margin-top: 15px;"></div>
					Lorem ipsum dolor sit amet...
				</div>
			</div>
		</div>
	</div>
	<div class="break"></div>
	<div class="footer">xy</div>
</body>
</html>
7

lehetséges hiba

Gal Kristof · 2006. Május. 10. (Sze), 09.34
általában az elcsúszós hibák jó részéért az a felelős, hogy az IE máshogy kezeli a margin-padding-width css összefüggéseket. temérdek anyag van a google-on, nézz utána.

amúgy megjegyzésként: nem túl elegáns (hívhatjuk nem túl szemantikusnak), hogy (majdnem) minden áldott dolgot DIV-ekbe teszel. nem néztem át tüzetesen, de szerintem fantáziadúsabban is használhatnád a (x)html tag-eket.
8

doctype

Anonymous · 2006. Május. 10. (Sze), 09.47
általában az elcsúszós hibák jó részéért az a felelős, hogy az IE máshogy kezeli a margin-padding-width css összefüggéseket.


transitional doctype-ban. tehát tessék strict-et használni és akkor nem lesz ilyen hiba.

gex
9

hmm

Gal Kristof · 2006. Május. 10. (Sze), 10.10
erről nem is tudtam... hol van erről valami anyag? mi az oka amúgy?
10

leírás

Anonymous · 2006. Május. 10. (Sze), 10.34
hol van erről valami anyag?

microsoft is írt róla, de itt egy komplexebb összehasonlítás.

mi az oka amúgy?

először az a változat terjedt el, ami nem szabványos. aztán rájöttek, hogy az emberek szeretik a szabványokat, és nem szeretik, ha minden böngésző mást mutat, viszont azokkal sem szerettek volna kitolni, akik a nem szabványos box-modellre építettek. úgyhogy ie-ben most lehet választani.

gex
11

hogy

Anonymous · 2006. Május. 10. (Sze), 11.42
kérdésem hogy hova lehetne még rakni a dolgokat?
14

Csak egy pár helyre :)

tiny · 2006. Május. 11. (Cs), 19.26
p,span,h1,h2,...,h5,stb.
12

float

vbence · 2006. Május. 10. (Sze), 19.57
Had ahjoljon egy kicsit magamfelé a kezem:
http://vbence.web.elte.hu/ie_css_width.html

Másodszor pedig egy nagy PFÚÚÚJ annak, aki ie-ben fejleszt, és a végén nézi meg, mi lett belőle más böngészőben.

Amúgy van pár dolog, amin a Strict sem segít. Pl explórerben a gyerekek szélessége túlnőheti a szülőt:

<div style="width:10px">
Ahazugemberthamarabbutolerikmintasanatakutyat.
</div>
Más böngészőben a szöveg ugyan megjelenik, de az elem szélessége (footprint) a layoutban (et de csúnyán mondtam) a megadott 10 pixel lesz, és a tartalom nem fogja szétfeszíteni az oldal méreteit (csak összecsúszik a következő divvel, mintha position: absolute lenne). - Megjegyezném, ez a szabványos viselkedés.

Float használatakor a float-os elemek nem határozzák meg egyértelműen a szülő méreteit (magasságát), és vannak más kisebb eltérések is.
Talán egyszer írok valami tényfeltáró riportot erről :)
13

.

Anonymous · 2006. Május. 11. (Cs), 18.14
már a fejlesztés közben is nézegettem más böngészőben is az oldalt, de úgy gondoltam majd ha elkészülök megcsinálom. de hát még most se jöttem rá valójában hogy is kellene. beraktam egy képet, hogy világossá váljon mennyire vannak elcsúszva a dolgok.

vbence: azt mondod ha a flaotos elemeknek beálítanék magasságot megoldódna a probléma?

Itt a kép http://img199.imageshack.us/img199/6985/nev5yd.jpg
15

|.|.|.|.|.|.|.|.|

tiny · 2006. Május. 11. (Cs), 19.31
Nem tudom, ebből ítélve a floatoknál vagy a szélességeknél lehet baja, de nincs az az isten, hogy átnézzem a tagolatlan css kódodat :) A menüpontokat meg minek satíroztad ki? Pornográf tartalmú? :D
18

yx

Anonymous · 2006. Május. 11. (Cs), 20.21
ha tagolom átnézed?
22

Egyszerűbb..

tiny · 2006. Május. 14. (V), 18.07
.. lenne, ha megadnál egy címet és akkor megpróbálnám meglesni. De egyébként mondom próbáld ki azt, hogy az adott dobozok szélességeit módosítgatod. Mert így speciel könnyebb lenne nekem a kis FireBug(?)-ommal kiválasztani az adott dobozkát és meglesni a tulajdonságait. De ezt te is megteheted.
16

Off: pontos cim:

Jano · 2006. Május. 11. (Cs), 20.12
Szokjatok le errol a pontot adunk cimkent dologrol mert a cim lesz a hozzaszolas linkje a kovetoben es baromi nehez eltalalni a kis feluletu linket.
17

ok

Anonymous · 2006. Május. 11. (Cs), 20.20
rendben
19

float

vbence · 2006. Május. 12. (P), 02.00
Szia!

Csak a képet néztem meg, de ebből nagyonnagyonnagyon úgy tűnik, hogy a float: left dolgok nem férnek be a megadott helyre, ez több okból is lehet, egyik például:
 border-right: #31612f 1px solid;
It rossz a sorrend, ajánlom az idevágó linket:
http://www.w3.org/TR/REC-CSS2/box.html#propdef-border

Amúgy nem tudok univerzális gyógyírt mondani. Amint látom kevés css tapasztalattal írtad a lapot, így nem egy konkrét probléma van vele. Ha még is nekiállnál, én a következőket ajálom:

1) minden float-os elem css-ében legyen display: inline
2) csinálj egy ilyet a css-be: 
div {border: 1px dotted red; margin: -1px;}
így láthatóvá válik a div-ek struktúrája, ez segíthet egy keveset.

Ha feltöltöd az oldalt több tartalommal, lehet, hogy több látszólagos hiba is magától megszűnik.

Bence
20

css linkek

Anonymous · 2006. Május. 12. (P), 13.09
Mien oldalakat nézzek át szerinted, hogy megfelelő tapasztalattal rendelkezzek egy ilyen oldal felépítésére? (eddig táblázatokat használtam, most szeretnék áttérni erre a módszerre)
21

View sorce

vbence · 2006. Május. 12. (P), 20.47
Én úgy kezdtem, hogy lementettem egy lapot, és a forrás alapján próbáltam mindenféle szörnyűségeket kreálni. Jó induló lehet pl:

http://www.cssbeauty.com/cgi-bin/mt/tags.cgi?tags=clean

Amint a cím is sugallja itt csak css-el megvalósított oldalakat találsz.

Bence