10 svar · 713 visningar · startad av DanneSt
Känns som en klassisk fråga, och jag vet att jag har löst det tidigare, men nu är natten sen och stressen påtaglig... :x
Jag vill centrera alltihop, men min bakgrundsbild som ligger i #head centreras inte i FF (eller Opera heller för den delen). Jag försöker lösa problemet med att inte kunna ha två bakgrundsbilder på detta sätt.
Vad gör jag för fel? :q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Author" content="Skapare" />
<meta name="keywords" content="Sökord..." />
<meta name="description" content="Beskrivning..." />
<meta name="robots" content="all" />
<meta name="distribution" content="global" />
<meta http-equiv="content-Language" content="sv" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Titel</title>
<style>
* {margin: 0; padding: 0;}
body
{
width: 100%;
font-size: 0.8em;
background: url(images/bkgr.jpg) repeat-x;
overflow: -moz-scrollbars-vertical;
}
#head
{
position: absolute;
width: 100%;
height: auto;
margin: 0px auto;
}
#container
{
position: relative;
width: 1024px;
height: 544px;
margin: 0px auto;
}
#logo
{
float:left;
margin-top: 10px !important;
margin-top: 10px;
margin-left: 200px !important;
margin-left: 200px;
margin-bottom: 10px !important;
margin-bottom: 10px;
width: 170px;
height: auto;
z-index:2;
}
#meny
{
float: left;
margin-top: 20px !important;
margin-top: 20px;
margin-left: 200px !important;
margin-left: 200px;
width: 400px;
height: auto;
text-align: left;
}
#meny li { list-style-type: none;}
#meny a { line-height: 1.2em; text-decoration: none; font-weight: bold; font-size: 20px; font-family: Georgia; color:#f5d28b; font-variant: small-caps;}
#meny a:hover { line-height: 1.2em; color:#cbae72; text-decoration: none;}
#meny a:active { color:#cbae72; }
#content
{
float:left;
margin-top: 20px !important;
margin-top: 20px;
margin-left: 0px !important;
margin-left: 0px;
width: 100%;
height: 350px;
text-align: left;
line-height: 1.3em;
}
#footer
{
float:left;
margin-top: 30px !important;
margin-top: 30px;
margin-bottom: 20px !important;
margin-bottom: 20px;
width: 100%;
height: auto;
font-size: 0.8em;
font-family: Arial;
text-align: center;
color:#333333;
}
a:link { color: #f5d28b; text-decoration: underscore; border-width: 0px;}
a:visited { color: #cbae72; border-style: underscore;}
a:hover { color: #cbae72; text-decoration: none; border-style: none;}
a:active { color: #cbae72; text-decoration: underscore; border-style: none;}
p { color:#f5d28b; font-family: Tahoma, Verdana; letter-spacing: 0em; line-height: 1.3em; font-weight: normal; margin-bottom: 10px;}
li { color:#f5d28b; font-family: Tahoma, Verdana; font-weight: normal}
td { color:#f5d28b; font-family: Tahoma, Verdana; font-weight: normal}
tr { color:#f5d28b; font-family: Tahoma, Verdana; font-weight: normal}
h1 { color:#f5d28b; font-family: Tahoma; font-size: 1.4em; letter-spacing: 0.3em; font-weight: normal; margin-bottom: 10px;}
h1 a:hover { color: #cc9; text-decoration: none; }
h2 { color:#f5d28b; font-family: Tahoma, Verdana; font-size: 1.1em; letter-spacing: 0.1em; font-weight: normal; font-style: italic; margin-bottom: 6px;}
h3 { color:#f5d28b; font-family: Tahoma, Verdana; font-size: 1.1em; letter-spacing: 0.1em; font-weight: bold; margin-bottom: 4px;}
h4 { color:#f5d28b; font-family: Tahoma, Verdana; font-size: 0.9em; font-weight: normal; margin-bottom: 0px; margin-top: -6px}
img {border: none;}
</style>
</head>
<body>
<div id="head"><img src="images/head_bkgr.jpg" alt="" /></div>
<div id="container">
<div id="logo"><img src="images/logo_top.png" alt="" /></a>
</div>
<div id="meny">
<ul>
<li><a href="1.htm">Meny1</a></li>
<li><a href="2.htm">Meny2</a></li>
<li><a href="3.htm">Meny3</a></li>
</ul>
</div>
<div id="content"><br />
<h1>Rubrik</h1>
<p>Innehåll...</p>
</div>
<div id="footer">
<br /><br />Sidfot...
</div>
</div>
</body>
</html>
Det är text-align:center; du vill nog åt i din #head. Om du inte vill använda dig av bilden som bakgrund i din CSS istället.Ta bort din position:absolute också, width:100% är div:en automatiskt, eftersom du har den 100% också så behöver du inte ha margin: 0 auto; heller.
#head
{
background: url(images/head_bkgr.jpg) no-repeat center top;
height: 60px;
}
Om du inte vill göra den klickbar.
Lägger jag till text-align:center; i #head så det blir så här:
#head
{
position: absolute;
width: 100%;
height: auto;
text-align:center;
}
centreras allt så fint i FF, men då blir det istället förskjutet åt höger i IE...
Jag kan inte använda bilden som bakgrund i CSS, vilket jag helst skulle vilja göra, för jag har redan en annan bild som repeterande bakgrund.
Här är länken till sidan förresten; http://www.softclassics.se/index_new.htm
<div id="logo"> har ju ingen bild som bakgrund. och igen: Varför position:absolute och width 100% på en div som du inte placera om?
Är det inte containern som ska ha margin-left:auto; margin-right:auto; ?
Är inte 1024 lite väl brett? Om du skulle få en scroll så kommer det väl även en sidledsscroll också (förutsatt att du sitter med 1024x768)...
voigtann1 skrev:
<div id="logo"> har ju ingen bild som bakgrund.
Nä, precis...uhhh, varför konstaterar du det? :q :) Hänger inte med nu...
voigtann1 skrev:
och igen: Varför position:absolute och width 100% på en div som du inte placera om?
Hänger inte med här heller. position:absolute använder jag för att få den bakom alla andra divvar. Kanske är helt fel?
Jag har ju en bakgrundsbild på 1x2000px som repeteras i sidled.
Sen vill jag även ha head_bkgr.jpg som bakgrund mitt på sidan, men när jag satte även den som "background" i CSS:n så blev det tok, det gick inte... Därför försöker jag nu att lägga den som en vanlig bild, fast i en div som ligger underst. Hoppas Ni greppar vad jag försöker göra? :)
niNe skrev:
Är det inte containern som ska ha margin-left:auto; margin-right:auto; ?
Det har den:
margin: 0px auto;
niNe skrev:
Är inte 1024 lite väl brett? Om du skulle få en scroll så kommer det väl även en sidledsscroll också (förutsatt att du sitter med 1024x768)...
Nä, tycker inte det längre. De flesta användare idag klarar 1024.
Tycker det är rätt rörig kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Author" content="www.dast01.se" />
<meta name="keywords" content="Jessica Falk, soft classics, pianist, pianounderhållning, konferensunderhållning, konferenser, middagar, mingelmusik, lunchmusik, klassisk musik, dinnermusic, soft, music, exklusiv underhållning, a touch of class, stämningsfull, musik, underhållning, incentives, event, kongress, bröllop, konferensmusik, flygel, elegant, musik" />
<meta name="description" content="Vi erbjuder seriös underhållning och klassisk musik med hög kvalitet." />
<meta name="robots" content="all" />
<meta name="distribution" content="global" />
<meta http-equiv="content-Language" content="sv" />
<meta http-equiv="imagetoolbar" content="no" />
<title>~ Soft Classics ~ stämningsfull musik för exklusiva tillfällen</title>
<style>
* {margin: 0; padding: 0;}
body {
font-size: 0.8em;
background: url(images/bkgr.jpg) repeat-x;
}
#container {
width: 1024px;
height: 544px;
margin: 0px auto;
background: url(images/head_bkgr.jpg) no-repeat;
}
#head {
text-align: center;
height:145px;
}
#logo {
display:block;
float:left;
margin-top: 10px;
margin-left: 200px;
margin-bottom: 10px;
width: 170px;
height: 105px;
background: url(images/logo_top.png) no-repeat;
text-indent:-9999px;
}
#meny {
float: left;
margin-top: 20px;
margin-left: 200px;
text-align: left;
}
#meny li { list-style-type: none;}
#meny a { line-height: 1.2em; text-decoration: none; font-weight: bold; font-size: 20px; font-family: Georgia; color:#f5d28b; font-variant: small-caps;}
#meny a:hover { line-height: 1.2em; color:#cbae72; text-decoration: none;}
#meny a:active { color:#cbae72; }
#content {
margin-top: 0px;
margin-left: 0px;
padding-top:20px;
height: 340px;
text-align: left;
line-height: 1.3em;
}
#footer {
margin-top: 50px;
font-size: 0.8em;
font-family: Arial;
text-align: center;
color:#333333;
}
a:link { color: #f5d28b; text-decoration: underscore; border-width: 0px;}
a:visited { color: #cbae72; border-style: underscore;}
a:hover { color: #cbae72; text-decoration: none; border-style: none;}
a:active { color: #cbae72; text-decoration: underscore; border-style: none;}
p { color:#f5d28b; font-family: Tahoma, Verdana; letter-spacing: 0em; line-height: 1.3em; font-weight: normal; margin-bottom: 10px;}
li { color:#f5d28b; font-family: Tahoma, Verdana; font-weight: normal}
td { color:#f5d28b; font-family: Tahoma, Verdana; font-weight: normal}
tr { color:#f5d28b; font-family: Tahoma, Verdana; font-weight: normal}
h1 { color:#f5d28b; font-family: Tahoma; font-size: 1.4em; letter-spacing: 0.3em; font-weight: normal; margin-bottom: 10px;}
h1 a:hover { color: #cc9; text-decoration: none; }
h2 { color:#f5d28b; font-family: Tahoma, Verdana; font-size: 1.1em; letter-spacing: 0.1em; font-weight: normal; font-style: italic; margin-bottom: 6px;}
h3 { color:#f5d28b; font-family: Tahoma, Verdana; font-size: 1.1em; letter-spacing: 0.1em; font-weight: bold; margin-bottom: 4px;}
h4 { color:#f5d28b; font-family: Tahoma, Verdana; font-size: 0.9em; font-weight: normal; margin-bottom: 0px; margin-top: -6px}
img {border: none;}
</style>
</head>
<body>
<div id="container">
<div id="head">
<a href="http://www.softclassics.se/index_new.htm" id="logo">Jessica Falk</a>
<ul id="meny">
<li><a href="index2.htm">Soft Classics</a></li>
<li><a href="piano.htm">Pianoentertainer</a></li>
<li><a href="khr.htm">Kärlek, Hopp & Rock n' roll</a></li>
</ul>
</div>
<div id="content">
<h1>Rubrik </h1>
<p>Innehåll...</p>
</div>
<div id="footer">
Information/bokning: Scandinavian Stage Production, Relingsvägen 7, 865 32 Alnö<br />
Telefon: (+46) 60-58 55 10, Mobil1: (+46) 70-64 66 900, Mobil2: (+46) 70-301 27 27<br /><br />
(C) 2007 Soft Classics | <a href="mailto:info@softclassics.se">info@softclassics.se</a>
</div>
</div>
</body>
</html>
hade jag gjort för att göra liknande sida.
Spännande! Ska testa när jag kommer hem! :)
Klang & jubel!! Det funkade! :D
Vad gjorde du? Måste kolla igenom koden senare ikväll (ska iväg på möte nu) för att luska ut vad som är skillnaden, nu klippte och klistrade jag bara in hela din kod! :)
Tusen tack för hjälpen!
Jag flyttade in allt i #container sen byggde jag blocken som du ser:
header, content och footer
#Container innehåller bakgrunden och en höjd. Sen bygger man höjden för headern, content och footern att passa in på containern. Ingen position:absolute.