webForumDet fria alternativet
Logga in / Bli medlem

menyn hamnar inte rätt

HTML & CSS

9 svar · 365 visningar · startad av Pumba

PumbaMedlem sedan nov. 200468 inlägg
Trådstart#1

jag försöker få menu2 att hamna till höger om main, det fungerar i IE men i firefox så bara smetar den ihop sig i mitten, nån som vet vad jag gör för fel?

<style type="text/css">
html, body { /**/
color: #fff;
background-color:#ffffff;
margin:0;
padding:0;
height:100%; /**/
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/storbg.jpg'); BACKGROUND-REPEAT: repeat-y
}
p {
font-family: verdana, helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #000000;
margin:0;
padding: 2px 5px 2px 5px;
}
A
{
color: #000000;
text-decoration: underline;

}
A:hover
{
color: #FFFFFF;
text-decoration:underline;
}

#container {
width:740px;
min-height:100%; /**/
background-color:#FFFFFF;
}

#header{
width: 740px;
height: 92px;
background-color:#333;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/logo2.jpg'); BACKGROUND-REPEAT: repeat-y
margin:0
}

#menu {
width:740px;
height: 29px;
background-color:#AC883F;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/bg_meny.jpg'); BACKGROUND-REPEAT: repeat-y
margin:0;
}

#main {
width:515px;
height : 24px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/information.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}
#maininfo {
width:515px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/mainbg.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}
#mainend {
width:515px;
height : 7px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/mainbgend.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}
#menu2 {
width:174px;
height: 24px;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/menu_left_text.jpg'); BACKGROUND-REPEAT: repeat-n
float: right;
margin:0;
}
#belowthebottom {
height:28px;
}
#bottom{
width:740px;
height: 22px;
background-color:#999;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/bg_meny.jpg'); BACKGROUND-REPEAT: repeat-y
margin-top:-28px; /* samma som height */

}

</style>

<!--[if IE]>
<style type="text/css">
#container {height:100%}
</style>
<![endif]-->

</head>

<body>
<div id="container">

<div id="header"><p></p></div>
<div id="menu"><p> </p></div>
<div id="main"><p>Välkommen</p></div>
<div id="menu2"><p>Meny2</p></div>
<div id="maininfo"><p>Välkommen hit!=)</p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p></div>
<div id="mainend"><p></p></div>

<div id="belowthebottom"></div>

</div>

<div id="bottom"><p> </p></div>

</body>
</html>

Flashess avatarFlashesMedlem sedan jan. 2003282 inlägg
#2

Det beror på hur du menar till höger om.
Som det är nu har du klämt in menu som är 740px bred och menu2 som är 174 px bred i en container som är 740 px bred.
Jag förstår inte hur menu2 ska kunna få plats till höger om menu.
Om du flyttar om så här så hamnar menu2 till höger, men hur långt beror på upplösning. Vill du styra hur den hamnar får du antingen göra container bredare eller lägga till en back container som håller manu2 inom rimliga gränser till höger om #container

<div id="menu2"><p>Meny2</p></div>
<div id="container">
<div id="header"><p>header</p></div>
<div id="menu"><p>meny1</p></div>
<div id="main"><p>Välkommen</p></div>
<div id="maininfo"><p> </p><p>main info</p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p></div>
<div id="mainend"><p>main end</p></div>
</div>
<div id="belowthebottom"></div>
<p>below the bottom</p>
<div id="bottom"><p>bottom</p></div>

Och #belowthebottom behöver justeras

#belowthebottom {
clear: both;
height: 28px;
}

Mvh
Jan-Olov

PumbaMedlem sedan nov. 200468 inlägg
#3

det där fungerade verkligen inte, nu hamnar ju Meny2 helt fel, bifogar en bild för att visa hur jag vill att det ska va

menu2.jpg
Flashess avatarFlashesMedlem sedan jan. 2003282 inlägg
#4

Aha, ja det var skillnad det :)
men som jag förstod dig så var min lösning korrekt.
prova det här då, då ska åtminstånde main och meny2 ligga rätt.
Kollade inte om bottom och dom ligger på samma ställe i både IE och FF

<HTML>
<HEAD>
<style type="text/css">
html, body { /**/
color: #fff;
background-color:#ffffff;
margin:0;
padding:0;
height:100%; /**/
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/storbg.jpg'); BACKGROUND-REPEAT: repeat-y
}
p {
font-family: verdana, helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #000000;
margin:0;
padding: 2px 5px 2px 5px;
}
A
{
color: #000000;
text-decoration: underline;

}
A:hover
{
color: #FFFFFF;
text-decoration:underline;
}

#back {
width: 920px;
min-height:1 00%; /**/
background-color: #FF00FF;
}

#container {
width:740px;
min-height:100%; /**/
background-color:#FFFFFF;
}

#header{
width: 740px;
height: 92px;
background-color:#333;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/logo2.jpg'); BACKGROUND-REPEAT: repeat-y
margin:0
}

#menu {
width:740px;
height: 29px;
background-color:#AC883F;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/bg_meny.jpg'); BACKGROUND-REPEAT: repeat-y
margin:0;
}

#main {
width:515px;
height : 24px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/information.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}

#menu2 {
clear: both;
width: 174px;
height: 24px;
float: right;
margin: -24px 0 0 0;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/menu_left_text.jpg'); BACKGROUND-REPEAT: repeat-n
}

#maininfo {
width:515px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/mainbg.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}
#mainend {
width:515px;
height : 7px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/mainbgend.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}

#belowthebottom {
clear: both;
height: 28px;
}
#bottom{
width: 740px;
height: 22px;
background-color:#999;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/bg_meny.jpg'); BACKGROUND-REPEAT: repeat-y
margin-top:-28px; /* samma som height */

}

</style>

<!--[if IE]>
<style type="text/css">
#container {height:100%}
#menu2 {margin:0px}
</style>
<![endif]-->

</head>

<body>
<div id="container">
<div id="header"><p>header</p></div>
<div id="menu"><p>meny1</p></div>
<div id="main"><p>Välkommen</p></div>
<div id="menu2"><p>Meny2</p></div>
<div id="maininfo"><p> </p><p>main info</p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p></div>
<div id="mainend"><p>main end</p></div>
</div>
<div id="belowthebottom"></div>
<p>below the bottom</p>
<div id="bottom"><p>bottom</p></div>
</body>
</html>

Mvh
Jan-Olov

PumbaMedlem sedan nov. 200468 inlägg
#5

det där fungerade inte heller =/

PumbaMedlem sedan nov. 200468 inlägg
#6

kan nån säga varför detta fungerar i IE och inte i firefox? det är Meny2 som hamnar galet i firefox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body { /**/
color: #fff;
background-color:#ffffff;
margin:0;
padding:0;
height:100%; /**/
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/storbg.jpg'); BACKGROUND-REPEAT: repeat-y
}
p {
font-family: verdana, helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #000000;
margin:0;
padding: 2px 5px 2px 5px;
}
A
{
color: #000000;
text-decoration: underline;

}
A:hover
{
color: #FFFFFF;
text-decoration:underline;
}

#container {
width:740px;
min-height:100%; /**/
background-color:#FFFFFF;
}

#header{
width: 740px;
height: 92px;
background-color:#333;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/logo2.jpg'); BACKGROUND-REPEAT: repeat-y
margin:0
}

#menu {
width:740px;
height: 29px;
background-color:#AC883F;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/bg_meny.jpg'); BACKGROUND-REPEAT: repeat-y
margin:0;
}

#main {
width:515px;
height : 24px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/information.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}
#maininfo {
width:515px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/mainbg.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}
#mainend {
width:515px;
height : 7px;
background-color:#ffffff;
float: left;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/mainbgend.jpg'); BACKGROUND-REPEAT: repeat-n
margin:0;
}
#menu2 {
width:174px;
height: 24px;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/menu_left_text.jpg'); BACKGROUND-REPEAT: repeat-n
float: right;
margin:0;
}
#belowthebottom {
height:28px;
}
#bottom{
width:740px;
height: 22px;
background-color:#999;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/bg_meny.jpg'); BACKGROUND-REPEAT: repeat-y
margin-top:-28px; /* samma som height */

}

</style>

<!--[if IE]>
<style type="text/css">
#container {height:100%}
</style>
<![endif]-->

</head>

<body>
<div id="container">

<div id="header"><p></p></div>
<div id="menu"><p> </p></div>
<div id="main"><p>Välkommen</p></div>
<div id="menu2"><p>Meny2</p></div>
<div id="maininfo"><p>Välkommen hit!=)</p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p></div>
<div id="mainend"><p></p></div>

<div id="belowthebottom"></div>

</div>

<div id="bottom"><p> </p></div>

</body>
</html>

PumbaMedlem sedan nov. 200468 inlägg
#7

ingen som har en aning om vad det är som strular?

jarvkloMedlem sedan juli 20013 378 inlägg
#8

Hmm...

FireFox ignorerar allt bortom ett utelämnat semikolon inom en och samma stildeklaration ;)

#menu2 {
width:174px;
height: 24px;
BACKGROUND-POSITION: left top; BACKGROUND-IMAGE: url('bilder/menu_left_text.jpg'); BACKGROUND-REPEAT: repeat-n    [b]/* saknas semikolon */[/b]
float: right;
margin:0;
}

... du har det på flera ställen ;)

Ledsen att behöva säga det eftersom det är en standardpekpinne, men tag gärna som vana att validera din CSS-kod med jämna mellanrum (man slipper ofta skjuta sig i foten pga skriv- och slarvfel om man tar hjälp av automatgranskande verktyg ;) )

m_soderlunds avatarm_soderlundMedlem sedan sep. 20026 425 inlägg
#9

CSS-validator ;)

PumbaMedlem sedan nov. 200468 inlägg
#10

åååh vad arg jag blir, att det skulle vara så enkelt, tack så mycket för hjälpen! :)

265 ms totalt · 4 externa anrop · v20260731065814-full.51f67c91
122 ms — deklarationer (db)
0 ms — hämta statistik (cache)
138 ms — hämta tråd, inlägg och bilagor (db)
123 ms — ändringar (db)