Min header-div funkar fint, den ger en grå bakgrund på de översta 60 pixlarna (med 100% i bredd) på min hemsida. Men i den gråa remsan vill jag ha min menybild kant i kant med underkanten på den grå remsan, detta funkar inte. Istället lägger sig bilden mitt på remsan (IE) eller strax ovanför mitten av den grå remsan (FF) - hur göra?
vertical-align är lite speciell eftersom den bara gäller för löptext och tabellceller...
I detta fall är nog det enklaste att "ställa upp" typsnittstorleken för <h1> och sedan säga åt den inline-box som innehåller bilden att vertikaljustera sig gentemot den typsnittsstorleken.
dvs - byt ut all CSS i ditt exempel mot följande istället:
Tack för svar! :bire
Hmm, tja det funkade ganska ok men tyvärr den grå remsan 73 px hög nu istället för 60 px. Det går ju att ställa genom att sätta en mindre font-size men jag tycker det hela känns som lite fulkod. :p
Från början satte jag bildens (menyns) padding-top till 41 px. Det funkade bra - bilden är 19 px och 19 + 41 = 60 - men jag tyckte att det borde finnas ett bättre sätt att koda det hela på. Det var då jag försökte använda mig av <h1> på nåt sätt. Asså jag är ju nybörjare på det här med semantisk kod, snygg CSS osv - hur skulle du fixa en grå ruta (100% width, 60 px height) högst upp i rutan med en meny bestående av 5 små länk-bilder? Så småningom ska även en logga in i vänster hörn av den grå rutan och ett par flaggor ute i det högra.
Förresten, jag kör den här doctypen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
hur skulle du fixa en grå ruta (100% width, 60 px height) högst upp i rutan med en meny bestående av 5 små länk-bilder? Så småningom ska även en logga in i vänster hörn av den grå rutan och ett par flaggor ute i det högra.
Hmm...
Jag skulle nog göra på ett ungefär såhär :) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="sv">
<head>
<title>Ett av jarvklos exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body {
margin:0; padding:0;
}
.huvud {
background-color:#DFDFDF;
height: 60px;
}
.huvud a img {
border: none;
display: block; /* Zappa bort "extrautrymme" under bilderna */
}
.huvud ul { /* grundinställning lista med menyelement i .huvud */
list-style-type: none;
display: block;
margin:0;padding:0;
}
#logotyp {
margin: 0; padding: 28px 0 0 10px; /* 28 px top-margin + bildens 32px = 60px */
float: left;
}
#flaggor {
float: right; /* Ut med flagorna till höger */
}
#menyn {
margin:0 0 0 100px; /* margin-left större än #logotyps bredd (bildens 32px) */
}
#menyn li {
list-style-type: none;
display: block;
float: left;
width: 40px;
padding-top: 44px; /* 44 + bildens 16 = 60 */
height: 16px; /* bildens 16 px */
margin-right: 20px; /* "luft" mellan menyelementen */
}
#flaggor li {
list-style-type: none;
display: block;
float: left;
width: 40px;
padding-top: 28px; /* 28 + 32 = 60 - se #menyn ;) */
height: 32px;
margin-left: 10px;
}
.huvud li a {
display: block; /* Hela ytan i menyn klickbar, även om den är bredare än bilden */
}
.huvud li a:hover {
background-color: #efefef;
}
#innehall {
padding: 0 10px 10px 10px;
}
</style>
</head>
<body>
<div class="huvud">
<div id="logotyp"><a href="#"><img src="hobo_32.gif" alt="Logotyp" title="Till startsidan" /></a></div>
<div id="flaggor">
<ul>
<li><a href="#"><img src="snowtem_32.gif" alt="flagga ;)" /></a></li>
<li><a href="#"><img src="hard-target_32.gif" alt="flagga ;)" /></a></li>
<li><a href="#"><img src="misfortune_32.gif" alt="flagga ;)" /></a></li>
</ul>
</div>
<div id="menyn">
<ul>
<li><a href="#"><img src="snow-duck_16.gif" alt="Meny" /></a></li>
<li><a href="#"><img src="snow-duck_16.gif" alt="Meny" /></a></li>
<li><a href="#"><img src="snow-duck_16.gif" alt="Meny" /></a></li>
<li><a href="#"><img src="snow-duck_16.gif" alt="Meny" /></a></li>
<li><a href="#"><img src="snow-duck_16.gif" alt="Meny" /></a></li>
</ul>
</div>
</div>
<div id="innehall">
<h1> Ett av jarvklos exempel</h1>
<p>Ikoner från <a href="http://www.iconbuffet.com/">iconbuffet.com</a></p>
<p>Logotypen läggs till vänster (float: left), flaggorna till höger (float: right)</p>
<p>Därefter anges marginal på menyn så att den "får plats" bredvid logotyp och flaggor</p>
</div>
</body>
</html>
Förresten...
Det där med att "forma om" listor till menyer är ganska mycket på modet just nu och jag "tog till" den lösningen av bara farten... Du kan läsa mer om hur det funkar på t.ex. http://css.maxdesign.com.au/
Om du vill förenkla, kan du naturligtvis göra som du tänkte från början och köra med enbart bilder i div-block istället...
En annan sak att tänka på är att det alltid blir "fult" när man krymper webbläsarfönstret... Men det är en annan historia ;)
Ouff, vilket svar! :o Jag är mycket imponerad och blev väldigt inspirerad. Och det kanske inte är så "fult" som jag tänkte att bestämma bildernas valign genom att sätta en fast top-padding, är ju van att använda valign-taggen annars i html. Mycket snyggt med list-grejen också, det ska jag lätt börja använda! Ja, tack då, jag har inget mer att tillägga! :birp
269 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
