golin fyrir 18 árum, 3 mánuðum Fjöldi lestra: 439

Smá ves með CSS

Ég lenti áðan í smávegis sem ég hef ekki lent í áður ég var að byrja á einföldu útliti, en vesenið er að síðan lítur ekki eins út í mismunandi browserum ( ekkert merkilegt þar ) en það sem er merkilegt er að ég skoða síðuna í 3 browserum, firefox birtir textan rétt, opera birtir textan of neðarlega og ie birtir textan of ofarlega.. :s slóðin er:

http://golin-is.com/ns/index.php

og fyrir lata er css hér:

http://golin-is.com/ns/inc/style.css

note það er ekki allt inná test síðunni sem er útlitshannað í css-inu þannig ekki láta það flækja ykkur.. :)

en málið er bara ég hélt að opera og firefox færu eins með kóðan.. :-/

allavega ef ykkur dettur eitthvað í hug endilega látið mig vita.. :)

Brainiac fyrir 18 árum, 3 mánuðum

prófaðu að setja ca. 5px padding í .menu01 :)

Fyrra álit

golin fyrir 18 árum, 3 mánuðum

var einmitt búinn að prófa það.. en opera og firefox hegða sér eins og virðast miða paddingið við miðjuna eða eitthvað dularfullt en ie miðar við efribrúnina eins og ég bjóst við.. :s skil ekki alveg.. kíki aftur á þetta á morgun þegar ég er útsofinn.. :p

Fyrra álit

hagur fyrir 18 árum, 3 mánuðum

Sæll,

Ég myndi gera þetta aðeins öðruvísi. Númer 1 væri að endurskrifa valmyndina og setja hana upp sem lista, þ.e með UL og LI. Svo myndi ég sleppa því að vesenast með hæð, nota þess í stað padding á tenglana. Venjulega er ekki hægt að setja top/bottom padding á tengla, en þegar búið er að floata þeim, þá er það hægt.

Hérna er þetta með þeim breytingum sem ég myndi gera … virkar í “öllum” vöfrum.

HTML-ið:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang='is' lang='is' xmlns='http://www.w3.org/1999/xhtml'>
<head>
	<title>Golin-is.com</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="inc/style.css" />
	<meta name="Description" content="Collection of links. Safn Tengla," />
	<meta name="Keywords" content="Links, Tenglar" />
</head>
<body bgcolor="#01557C">
<center>
<div id="menu_top">
	<ul id="secondary">
		<li><a href="index.php?lan=is">Íslenska |</a></li>
		<li><a href="index.php?lan=en">English</a></li>
	</ul>
	<ul id="main">
  		<li><a href="">Heim |</a></li>
		<li><a href="">Flokkar |</a></li>
		<li><a href="">Niðurhal |</a></li>
		<li><a href="">Fréttir |</a></li>
		<li><a href="">Innskrá</a></li>
	</ul>
	
</div>
<div id="main_box">
  <div align="center"><img src="images/main01.gif" width="755" height="5" alt="" border="0" /></div>
	<p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  </p>
  </div>
</center>
</body></html>

Og styles.css (Mínar breytingar eru þær sem eru í einni línu, hef vanið mig á að skrifa CSS þannig):

#menu_top {
margin : 0;
width : 755px;
background : #fff url(../images/fon_menu.gif) repeat-x;
border-left : 2px solid #000000;
border-top : 2px solid #000000;
border-right : 2px solid #000000;
height : 40px;
padding : 0;
}
#main, #secondary { margin:0; padding:0; list-style:none; }
#main { float:left; padding-left:5px; }
#secondary { float:right; padding-right:10px; }
#main li, #secondary li { float:left; font-weight:bold; }
#main li a, #secondary li a { float:left; padding:13px 0px 13px 6px; font-size:12px; font-family:Tahoma, Verdana, Arial; font-weight:bold; color:#000; text-decoration:none;  }
#main_box {
background : #fff;
width : 755px;
border-left : 2px solid #000000;
border-right : 2px solid #000000;
border-bottom : 2px solid #000000;
height : 400px;
}
#box_allt {
width : 230px;
}
#box_haus {
background : #777777;
height : 25px;
padding : 3px 1px 1px 15px;
}
#box_rammi {
background : #ffffff;
border : 1px solid #cccccc;
}
#box_litla_rond {
height : 3px;
background : #ef9400;
}
#box_main {
width : 228px;
padding : 4px 4px 4px 9px;
}
#box_botn {
height : 28px;
background : #fff url(../images/t_fon.gif) repeat-x;
}
#box_skuggi {
text-align : right;
}
.box_title {
color : #ffffff;
padding-top : 5px;
padding-bottom : 5px;
margin-bottom : 0;
margin-left : 15px;
margin-right : 11px;
font-size : 11px;
font-family : Tahoma, Verdana, Arial;
font-weight : bold;
}
.box_title a {
color : #ef6d00;
}
.box_title a:hover {
color : #c25a02;
}
.box_text {
color : #000000;
margin-top : 10px;
padding-bottom : 5px;
margin-bottom : 0;
margin-left : 20px;
margin-right : 20px;
font-size : 11px;
font-family : Tahoma, Verdana, Arial;
font-weight : bold;
}
.box_text a {
color : #ff6600;
}
.box_text a:hover {
color : #ff0000;
}

Svo er hér prýðisgrein sem ég fann á netinu um það hvernig best er að tryggja að vefir séu eins í öllum vöfrum: http://friendlybit.com/css/cross-browser-strategies-for-css/

Athugaðu sérstaklega atriði 3, “Remove default styling of elements”. Það eru ekki allir sem átta sig á þessu, þ.e að núllstilla default gildi á padding/margins o.þ.h sem eru mismunandi á milli vafra. Af minni reynslu, þá myndi ég segja að það sé það sem veldur flestum vandræðum.

Vonandi að þetta hjálpi eitthvað …

Fyrra álit

golin fyrir 18 árum, 3 mánuðum

Þetta var einmitt það sem ég var að spá en þá voru alltaf | strikin linkar.. :-/ vildi það ekki alveg en kannski þarf ég bara að fórna því.. :) en annars takk takk.. alltaf gott að fá svona fljót hjálp frá fólki sem segir eitthvað annað en fyrstur.. ;)

Fyrra álit

hagur fyrir 18 árum, 3 mánuðum

Það var lítið.

Þú gætir líka sleppt því að slá strikin inn sem texta eins og þú ert að gera, búa þess í stað til mynd sem er eins og strikin, þ.e 2px á breidd og c.a 10 á hæð og sett þá mynd sem bakgrunn annaðhvort á LI-tögin eða A-tögin.

Þannig geri ég venjulega svona strik, eða seperatora á milli atriða í svona menu.

Fyrra álit

golin fyrir 18 árum, 3 mánuðum

kk.. góð hugmynd.. :) takk takk..

Fyrra álit

Galdrakall fyrir 18 árum, 2 mánuðum

ég veit um eina lausn sem getur lagað í i.e. nota hana oft

.still {
flestir browserar lesa þennan stíl
}
* html .still {
I.E. les þennan stíl
}

ef þú skilur þetta ekki get ég gefið betra dæmi ;)

Fyrra álit

Brainiac fyrir 18 árum, 2 mánuðum

Ég mundi samt fara varlega í að nota þetta því að er búið loka fyrir þetta í IE7 sem kemur út í sumar. http://www.positioniseverything.net/articles/poll/star-html.php

Fyrra álit

Galdrakall fyrir 18 árum, 2 mánuðum

hmm oki :(

Fyrra álit

Vefsíðugerð

Vefsíðugerð

Ofurhugar

Stjórnendur

Hverjir eru inni

Korkar - Vefforritun

Smá ves með CSS

Dýr

Dægurmál

Fræði

Leikir

Lífið

Lífsstíll

Margmiðlun

Menning

Skjár

Sport

Tónlist

Tækni

Vélar

Hugi