franx skrev:
Har haft en fast bakgrund som är 22 px hög och 78 pixlar bred (bild med knapp). Men hade i detta fall tänkt göra nåt liknande som denna sida:
http://www.dynamicdrive.com/style/c...ld_css_buttons/
Sedär - ny information som vänder lite uppochned på de förutsättningar jag lyckades uttyda ur din första fråga ;)
franx skrev:
Fungerar det inte lika bra med px? Använder sällan "em".
Klart det gör, men eftersom jag till vardags jobbar med bl.a. webbtillgänglighet slog mig aldrig tanken att använda det eftersom du varken angav mått eller vad det egentligen var du var ute efter i måttväg ;)
franx skrev:
Problemet med Jarvklos exempel är att det var bara en "bullet" bild. Alltså inte en "hel bild".
Ehm - Kolla igen... ;)
Prova t.ex. att ta bort stilen "background-repeat: no-repeat och lägga in en bättre täckande bild... ;)
Återigen, det du efterfrågade gick uppenbarligen att tolka på flera sätt ;)
Men hursomhelst,
Jag har korpat två bilder från artikeln du angav som det du ville kunna uppnå, och gjort om CSS:en lite (samma XHTML-kod gäller) bara för att visa att det funkar ;)
Vassego:
<!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" xml:lang="sv" lang="sv">
<head>
<title>Ett av jarvklos exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body {margin:0;padding:10px;}
#menu ul,
#menu ul li {
list-style: none;
}
#menu ul {
text-align: center;
margin: 0;
padding: 8px 0; /* top/bottom samma värde som nedan */
}
#menu ul li {
display: inline;
}
#menu ul li a {
text-decoration: none;
/*
Plats för bakgrundsbild - vänster
höjd = 14 + 8 + 8 i exemplet (fontsize+paddingtop+paddingbottom)
*/
font-size: 14px;
padding: 8px 0 8px 8px; /* top, 0, bottom, left */
background-image: url('roundedge-green-left.gif');
background-repeat: no-repeat;
background-position: left top;
}
#menu ul li a span {
/*
Plats för bakgrundsbild - höger
höjd = 14 + 8 + 8 i exemplet (fontsize+paddingtop+paddingbottom)
*/
font-size: 14px;
padding: 8px 8px 8px 0; /* top, right, bottom, 0 */
color: white;
background-image: url('roundedge-green-right.gif');
background-repeat: no-repeat;
background-position: right top;
}
</style>
<!--
villkorlig kommentar för att hacka om padding-top,
Använder denna istället för det hack som nämns i artikeln
(som f.ö. inte funkar i MSIE7, vilket inte är så konstigt
iom att artikeln är tre år gammal)
resonemang kring varför hacket behövs - se 24ways-artikeln.
-->
<!--[if lte IE 7]>
<style type="text/css">
#menu ul li a {padding-top: 0;}
</style>
<![endif]-->
</head>
<body>
<p>
Följande exempel bygger på en modifiering av den metod som beskrivs i
<a href="http://24ways.org/2005/centered-tabs-with-css">http://24ways.org/2005/centered-tabs-with-css</a>
till användning av sliding doors-knappar med fast höjd (bilderna i exemplet är norpade från
<a href="http://www.dynamicdrive.com/style/csslibrary/item/bold_css_buttons/">http://www.dynamicdrive.com/style/csslibrary/item/bold_css_buttons/</a>)
</p>
<p>Observera att saker som t.ex. fetstil och fontval kan påverka höjdmåtten och
att ändringar i dessa kräver ändringar i font-size, padding-top
samt padding-bottom på lämpliga ställen i exemplet (se kodkommentarer och artikeln från 24ways för detaljer)!
</p>
<div id="menu">
<ul>
<li><a href="#"><span>Fee</span></a></li>
<li><a href="#"><span>Fiiiie</span></a></li>
<li><a href="#"><span>Foe</span></a></li>
<li><a href="#"><span>Fummmelifum</span></a></li>
</ul>
</div>
</body>
</html>
testa
Eftersom exemplet jobbar med inline-element får du meka med padding-top + padding-bottom + font-size när du sätter totala knapphöjden (+ att saker som fetstil även påverkar den verkliga höjden av typsnittetså att du får kompensera för det i värdena om du vill ha fet text i knapparna)
... men det framgår, som sagt, av 24ways-artikeln också ;)
Lycka till :birp
