webForumDet fria alternativet

Nybörjarfråga

HTML & CSS

6 svar · 538 visningar · startad av Hansen88a

Medlem sedan aug. 200849 inlägg
Frågan#1

Hej!

Kod:
<a href=""><img src="logo.png"/></a> <h1> SLOGAN </h1>

Jag vill få Slogan på samma rad som "logo" bilden. Men just nu så ligger "slogan" texten under bilden trots att det finns plats till höger om loggan.

Hemsidan är uppbyggd på divvar. Hur gör jag för att få slogan till höger om och på samma rad som logotypen?

Medlem sedan mars 2001895 inlägg
#2

Hej, det finns lite olika sätt att göra detta på. De olika sätten beror till stor del på resten av innehållet. CSS är att föedra. Ett sätt är då att använda

<style type="text/css">
a {
  float: left;
}
h1 {
  float: left;
  margin: 0;
}
.clear {
  clear: both;
}
</style>

Du bör även bryta efter med t.ex. <br class="clear" /> Så resultatet blir då

<a href=""><img src="logo.png" alt="" /></a> <h1> SLOGAN </h1><br class="clear" />
Medlem sedan mars 2004485 inlägg
#3

Ett annat sätt kan vara att göra så här:

h1 {
display: inline;
vertical-align: bottom;
}

Att tänka på är att inte ha ett inline element direkt efter h1, då kommer den också komma med på samma rad om det finns plats, så kör med en div eller p-tagg efter.

Ändra vertical-align efter behag:
http://htmldog.com/reference/cssproperties/vertical-align/

Verkar funka bra, i webläsare också:
http://www.quirksmode.org/css/display.html

Medlem sedan juni 20014 290 inlägg
#4

Alternativt ha a taggen innanför h1 taggen.

Medlem sedan juni 20019 519 inlägg
#5

GunnarD: Vad hjälper ett inline element? Hx element är ett block element.

Medlem sedan juni 20014 290 inlägg
#6

Voigtann1: Han ville ha bilden och a taggen på samma rad som h1 taggen. En variant är då att sätta a taggen innanför h1 taggen då kommer dom på samma rad.

Se: http://privat.gunnard.se/test/

Medlem sedan juni 20019 519 inlägg
#7

missade a-elementet, trodde det bara var en bild och hx

258 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
125 ms — deklarationer (db)
0 ms — hämta statistik (cache)
128 ms — hämta tråd, inlägg och bilagor (db)
128 ms — ändringar (db)