CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

Frederik Nybegynder

07. januar 2008 - 22:31 Der er 9 kommentarer og
1 løsning

Optimering af side så den virker både i Firefox og IE 7.0.

Hej. Jeg er ved at lave et design til en side, men siden forskydes "falder fra hinanden" i IE 7.0 i forhold til FireFox. stedet det halter er her:

<div id="top">
<div id="logo">
</div
<div id="banner">
Banner
</div>
</div>

Efter jeg tilføjede:
<div id="logo">
</div
<div id="banner">
Banner
</div>

Ville siden ikke som jeg ville længere :(

Mit CSS ser således ud:

#top {
position:absolute;
left:0px;
top:0px;
width:100%;
height: 150px;
background-color:white;
}

#logo {
position:absolute;
width:150px;
height:150px;
background-image:url(layout/logo.jpg);
background-position: 50% 50%;
Background-repeat: no-repeat;

}

#banner {
position:absolute;
top: 41px;
right: 91px;
background-color:silver;
width:468px;
height:68px;

}

Jeg håber I kan hjælpe!

- Frederik

Synes godt om

roenving Novice

07. januar 2008 - 23:24 #1

Hvorfor bruger du absolutte placeringer ?-)

-- har du et positioneret element omkring ?o]

-- og så er absolut placering uden en placering ikke til at stole på (hint: f.eks. top og left !-)

Synes godt om

sibbelone Nybegynder

08. januar 2008 - 07:11 #2

css:

body {
Font-family: verdana;
font-size: 11px;
color: #000;
margin-top:0px;
margin-bottom:0px;
padding:0px;
background-color: #fff;}

/*Starter selv sideindelingen med de forskellige div boxe*/

/*heunder den box som centrere indholdet på siden*/
.holder {
position: relative;
width: 963px;
height: 20px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .holder {
min-height: 200px;
height: auto;
}

/*heunder den indhold hvor både left og content er inde i dette gør at siden udvider sig*/
.indhold {
position: relative;
float: left;
width: 957px;
height: 300px;
border: 3px solid #94aec4;
background-color: #fff;
background-color: #fff;}

/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .indhold {
min-height: 300px;
height: auto;
}

/*heunder den conten hvor indhold på siden skal sættes ind*/
.content {
position: relative;
float: right; /*skift right ud med left og divboxen vil stå i højre side men kræver at du også ændre .left, der skal float ændres til right*/
width: 740px;
height: 10px;
padding: 10px;
margin-top: 20px;
background-color: #fff;}

/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .content {
min-height: 10px;
height: auto;
}

/*heunder toplogo hvor du kan indsætte et bagrundsbilled*/
.toplogo {
position: relative;
float: left;
width: 957px;
height: 90px;
background-color: #fff;
border-top: 1px solid #94aec4;
/*herunder kan du indsætte toplogo
background: url(../image/toplogo.jpg);
background-repeat: repeat-y;*/}

/*heunder den menu der går på tværs af hele side, hvis du ikke vil have menuen der kan du bare undlade den på siden*/
.menu {
position: relative;
font-size: 11px;
float: left;
padding: 0px 0px 0px 10px;
width: 953px;
height: 20px;
left: -3px;
color: #fff;
border-top: 1px solid #94aec4;
background-color: #435a6e;
display: inline;
z-index: 200;}

/*heunder left indhold , her kan du evt lave menu*/
.left {
position: relative;
float: left; /*skift left ud med right og divboxen vil stå i højre side men kræver at du også ændre content, der skal float ændres til left*/
width: 155px;
height: 500px;
margin-right: 0px;
padding: 5px;
background-color: #bbb;
}

/*firefox og ie7 hack så siden også udvider sig i de 2 browser*/
html>body .left {
min-height: 500px;
height: auto;
}

.bund {
position: relative;
font-size: 11px;
float: left;
width: 960px;
height: 20px;
text-align: center;
margin-top: 10px; /*styre afstanden op til indhold sættes til 0 hvis man ikke ønsker afstand*/
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
border: 1px solid #94aec4;
}

Synes godt om

sibbelone Nybegynder

08. januar 2008 - 07:12 #3

html:

<!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" xml:lang="en" lang="en">
<head>
<title>Side med udvid</title>
<link rel="stylesheet" type="text/css" href="site.css" />
</head>
<body>
<div class="holder">

<div class="indhold">


<div class="toplogo">Toplogo</div>


<div class="menu"></div>


<div class="left">Venstre

</div>



<div class="content">Indholdet på siden

</div>

</div>
</div>

<div class="bund">Bund bjælke</div>

</div>
</body>
</html>

Synes godt om

sibbelone Nybegynder

08. januar 2008 - 07:12 #4

så skulle der være lidt at arbejde med

Synes godt om

Frederik Nybegynder

08. januar 2008 - 09:48 #5

Hele koden ser sådan ud:

index.php:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="icon.ico">
</head>
<body>
<div id="center">
<div id="top">
<div id="logo">
</div
<div id="banner">
Banner
</div>
</div>

<div id="content">
<br>
<div class="contentcontent">
<div class="contentt">
top
</div>
<div class="contentc">
content
</div>
<div class="contentb">
</div>
</div>
</div>

<div id="leftmenu">
<br>
<div class="menucontent">
<div class="menucontentt">
Navigation
</div>
<div class="menucontentc">
<?
include "menu/menu.php";
?>
</div>
<div class="menucontentb">
</div>
</div>
<br>
<div class="menucontent">
<div class="menucontentt">
Reklame
</div>
<div class="menucontentc">

indhold

</div>
<div class="menucontentb">
</div>
</div>
<br>
</div>

<div id="rightmenu">
<br>
<div class="menucontent">
<div class="menucontentt">
Admin Login
</div>
<div class="menucontentc">
Indhold
</div>
<div class="menucontentb">
</div>
</div>
</div>
</body>
</html>

style.css:
body {
margin :0 px;
background-color:#E5E5E5;
}
#center
{
margin-left: -400px;
position:absolute;
top: 2%;
height:96%;
border: 0px solid black;
left: 50%;
width: 800px;
visibility: visible;
background-color:white;
}
#top {
position:absolute;
left:0px;
top:0px;
width:100%;
height: 150px;
background-color:white;
}

#logo {
position:absolute;
width:150px;
height:150px;
background-image:url(layout/logo.jpg);
background-position: 50% 50%;
Background-repeat: no-repeat;

}

#banner {
position:absolute;
top: 41px;
right: 91px;
background-color:silver;
width:468px;
height:68px;

}

#content {
position:absolute;
top: 150px;
margin-left:162px;
margin-right:162px;
width:476px;
background-color:white;
}

.contentcontent {
position:absolute;
margin-left:5px;
margin:0px auto;
width:476px;
background-image: url(layout/content/contentc.jpg);
background-position: 50% 50%;
background-repeat: y-repeat;
}

.contentt {
text-align:center;
position:absolute;
background-image: url(layout/content/contentt.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
width:476px;
height:38px;
left:0px;

}

.contentc {
padding-top:50px;
margin-left:5px;

}

.contentb {
position: absolute;
background-image: url(layout/content/contentb.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
width:476px;
height:9px;
}

#leftmenu {
position:absolute;
left:0px;
top:150px;
width:152px;
background-color:white;
}
#rightmenu {
position:absolute;
right:0px;
top:150px;
width:152px;
background-color:white;
}
.menucontent {
margin:0px auto;
width:150px;
left:0px;
background-image: url(layout/menu/menuc.jpg);
background-position: 50% 50%;
background-repeat: y-repeat;
text-align:left;
}

.menucontentt {
text-align:center;
position:absolute;
background-image: url(layout/menu/menut.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
width:150px;
height:38px;
left: 1px;

}

.menucontentc {
padding-top:50px;
margin-left:5px;
}

.menucontentb {
position: absolute;
background-image: url(layout/menu/menub.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
width:150px;
height:9px;
}

Synes godt om

Frederik Nybegynder

08. januar 2008 - 11:33 #6

har selv fundet fejlen:

<div id="logo">
</div
<div id="banner">
Banner
</div>

der var en div der ikke var lukket.. derfor rettet til:

<div id="logo">
</div>
<div id="banner">
Banner
</div>

Synes godt om

olebole Juniormester

08. januar 2008 - 15:25 #7

<ole>

- og så er det, som roenving forsigtigt antyder, en fejl at basere sit design på absolut positionering. Det er ikke forbudt - men rigtig skidt og uhensigtsmæssig kode

/mvh
</bole>

Synes godt om

Frederik Nybegynder

08. januar 2008 - 22:49 #8

Ole: Hvad skal jeg da gøre istedet??

Synes godt om

olebole Juniormester

09. januar 2008 - 00:28 #9

- bruge resten af CSS-standarden :)

Synes godt om

Frederik Nybegynder

09. januar 2008 - 08:45 #10

Hmm.. forstår ikke helt hvad du mener. Er ikke så sikker i CSS.

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS