6 svar · 415 visningar · startad av learn
Jag har ett problem. Jag har en rubrik <h4> och rubriken består av bild - text1 - text2. T.ex:
<h4><img src="bild.jpg" />Text1: Text2</h4>
Nu vill jag att:
- All text skall ha samma 'font-size'.
- Text1 skall vara 'font-weight: bold '
- Text2 skall vara 'font-weight: normal'
- Allt innehåll i <h4> skall vara 'vertical-align: middle' i förhållande till varandra.
Hur skulle Ni göra detta m.h.a. snyggaste och enklaste CSS
Det är svårt att välja lämplig HTML när man inte vet varför du vill ha fet text... och varför du har en bild där (är den bara dekorativ?). Men här är ett alternativ.
<h4><b>Text1</b>: Text2</h4>
h4 { display:list-item; list-style:none url(bild.jpg) inside; font-weight:normal; }
Du kan visserligen inte styra vertical-align på bilden (utan att använda ::marker från CSS3), om så önskas kan du använda ::before (eller <img>) istället...
Tack.
Det är en "förklarande" bild, dvs den är olika beroende på vad h4:an innehåller.
Vad är att föredra <b> eller <strong>? Förklara gärna lite kort varför.. :)
<b> ska du använda om du vill ha bold text i dekorationssyfte - men då är det bättre att använda CSS: font-weight:bold.
<strong> ska användar för att göra en stark betoning i en text - och brukar visas med fetstil i de allra flesta webläsare. Men texten blir också betonad för dem som inte ser... <em> används för "svag" betoning - och brukar oftast visas kursiv.
h4 {
display:inline;
padding:0px 0px 0px 30px;
}
paddingen är till för att texten inte ska flyta över bilden...
.t1 {
font-weight:bold;
}
.t2 {
font-weight:normal;
}
.forkl1 {
background:#fff url(bild1.jpg) top left no-repeat;
}
.fork2 {
background:#fff url(bild2.jpg) top left no-repeat;
}
etc
så blir det
<h4 class="fork1"><span class="t1">Text 1</span><span class="t2">Text 2</span></h4>
learn skrev:
Det är en "förklarande" bild, dvs den är olika beroende på vad h4:an innehåller.
Om bilden inte endast är dekorativ är det lämpligt att använda <img>. Om bilden upprepar vad rubriken säger kan du använda blank alternativtext (alt=""), annars kan du lägga in "förklaringen" i alternativtexten.
learn skrev:
Vad är att föredra <b> eller <strong>? Förklara gärna lite kort varför.. :)
<b> betyder "fet text".
<strong> betyder (enligt HTML4) "stark betoning". (Eftersom det redan finns en elementtyp för "betoning" (<em>) kommer förmodligen följande versioner av (X)HTML ge <strong> betydelsen "viktig" istället.) Om du inte menar "stark betoning" (eller "viktig") bör du inte använda <strong>.
På motsvarande sätt bör du inte använda <h4> om det inte är en rubrik för den sektion den introducerar (och den sektionen är undersektion till h3, som är undersektion till h2, som är undersektion till h1).
zcorpan skrev:
...kommer förmodligen följande versioner av (X)HTML ge <strong> betydelsen "viktig" istället.) Om du inte menar "stark betoning" (eller "viktig") bör du inte använda <strong>.
Så man bör alltså inte använda <strong> annat än till "viktigt"??.. Det visste jag inte...
Men är det då alltså bättre att använda <em> för betoning och stajla med t.ex "bold"? :p
