lägga 3 div på rad

13 svar · 354 visningar · startad av andreas_lindh 13 dec. 2002

andreas_lindhMedlem sedan jan. 20011 140 inlägg

Frågan13 dec. 2002 19:57#1

Försöker få 3 divar att ligga på rad men det blir inte riktigt som jag tänkt
Det ser ut så här

div 1 div2
                div3

koden

<div class="rubriker1">Test</div><div class="rubriker2">Test2</div><div class="rubriker3">test3</div>

css klasserna

.rubriker1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-image: url(../grafik/top_back.gif);
	height:26px;
	vertical-align: bottom;
	padding:0px;
	width:150px;
	float:left;
	margin:0px;
}
.rubriker2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-image: url(../grafik/top_back.gif);
	height:26px;
	vertical-align: top;
	padding:0px;
	width:450px;
	margin-left:150px;
}
.rubriker3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-image: url(../grafik/top_back.gif);
	height:26px;
	vertical-align: top;
	padding:0px;
	width:150px;
	float:right;
	margin:0px;
}

icaaqMedlem sedan okt. 20005 273 inlägg

13 dec. 2002 20:03#2

Måste du ha divar? testa med att använda spans istället :)

mvh icaaq

andreas_lindhMedlem sedan jan. 20011 140 inlägg

13 dec. 2002 20:15#3

Testad emed spans. Då blir det som på den bifogade bilden

visar lita mer kod

<div style="width:100%;height:100%;">
	 <div class="main">
	 	<div class="top">
			Toppen
		</div>
		<div class="meny">
			<span class="rubriker1">Test</span><span class="rubriker2">Test2</span><span class="rubriker3">test3</span>
		</div>
	 </div>
</div>

icaaqMedlem sedan okt. 20005 273 inlägg

13 dec. 2002 21:26#4

Om jag har förstått dig rätt är det så här du vill ha det

[red]
.rubriker1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-image: url(../grafik/top_back.gif);
	height:26px;
	vertical-align: bottom;
	padding:0px;
	width:25%;
	margin:0px;
}
.rubriker2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-image: url(../grafik/top_back.gif);
	height:26px;
	vertical-align: top;
	padding:0px;
	width:50%;
}
.rubriker3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-image: url(../grafik/top_back.gif);
	height:26px;
	vertical-align: top;
	padding:0px;
	width:25%;
	margin:0px;
}
[/red]

mvh icaaq

icaaqMedlem sedan okt. 20005 273 inlägg

13 dec. 2002 21:28#5

En sak till så skulle jag avråda dig att ha underscore (_) i bildens sökväg vid background-image. Då NS inte vill acceptera det......

mvh icaaq

andreas_lindhMedlem sedan jan. 20011 140 inlägg

13 dec. 2002 21:29#6

nu lägger dom sig på rad men dom blir bara lika breda som texten som finns i dom

andreas_lindhMedlem sedan jan. 20011 140 inlägg

13 dec. 2002 21:30#7

En sak till så skulle jag avråda dig att ha underscore (_) i bildens sökväg vid background-image. Då NS inte vill acceptera det......

Tack för tipset. :)

icaaqMedlem sedan okt. 20005 273 inlägg

13 dec. 2002 21:31#8

Hur ser classen meny ut?

andreas_lindhMedlem sedan jan. 20011 140 inlägg

13 dec. 2002 21:32#9

.meny {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	height:26px;
	vertical-align: bottom;
	padding:0px;
	background-color: transparent;
}

icaaqMedlem sedan okt. 20005 273 inlägg

13 dec. 2002 21:35#10

Och main?

andreas_lindhMedlem sedan jan. 20011 140 inlägg

13 dec. 2002 21:36#11

.main {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #ffffff;
	width:770px;
	height:100%;
	margin:auto;
}

andreas_lindhMedlem sedan jan. 20011 140 inlägg

14 dec. 2002 11:06#12

löste det. La till float:left; på runbrik1, 2 och 3

PaceMedlem sedan juni 20019 024 inlägg

15 dec. 2002 19:16#13

icaaq skrev:

En sak till så skulle jag avråda dig att ha underscore (_) i bildens sökväg vid background-image. Då NS inte vill acceptera det......

mvh icaaq

Enkelfnuttar (') runt sökvägen löser väl det problemet?

background-image: url('../grafik/top_back.gif');

icaaqMedlem sedan okt. 20005 273 inlägg

16 dec. 2002 06:00#14

Pace skrev:

icaaq skrev:

En sak till så skulle jag avråda dig att ha underscore (_) i bildens sökväg vid background-image. Då NS inte vill acceptera det......

mvh icaaq

Enkelfnuttar (') runt sökvägen löser väl det problemet?
background-image: url('../grafik/top_back.gif');

Jag har själv inte varit med om detta men jag har läst några trådar och andra inlägg i andra disskusionsforum att fnuttar inte räcker...

http://www.webforum.nu/showthread.php?s=&threadid=60377