10 svar · 409 visningar · startad av MagnusJ
Hej,
Jag har ett litet problem.
HTML kod----
<div id="container">
<div id="main">
<div id="leftholder">
<div id="maincontent">
maincontent
</div>
</div>
<div id="rightholder">
<div id="sidebar">sidebar</div>
</div>
</div>
</div>
---------
CSS kod----
body
{
background-color: #E3E3E3;
padding: 0;
margin: 0;
text-align: center;
}
#container
{
margin: 30px auto 0 auto;
width: 593px;
background: url(../grafik/top.gif) no-repeat top left;
}
#main
{
background-color: #FFF;
text-align: left;
}
#leftholder
{
float: left;
}
#rightholder
{
float: right;
margin-top: 30px;
background: url(../grafik/kant_uppe.gif) no-repeat top left;
}
#maincontent
{
padding-left: 30px;
padding-top: 171px;
width: 200px;
}
#sidebar
{
margin-top: 18px;
background-color: #FFF;
width: 264px;
}
--------------
Sådär ser min html-kod ut. Jag vill att #mains bakgrundsfärg ska vara bakgrundsfärg åt allting som är innuti main. Men det blir inte så, vet någon hur jag kan göra?
En viktig sak att tänka på när du använder float är att du måste återställa ordningen innuti din div då allt ligger flytande (float) där inne.
Återställer ordningen gör du med: clear.
ex.
[red]<div id="container">
<div id="main">
<div id="leftholder">
<div id="maincontent">
maincontent
</div>
</div>
<div id="rightholder">
<div id="sidebar">sidebar</div>
</div>
[b]<br style="clear: both;" />[/b]
</div>
</div>[/red]
Tack det fungerade, fast tyvärr funkade det inte som jag hade tänkt.
Så jag gjorde det på ett annat sätt, ska förklara ungefär som jag vill ha det.
Jag har en sida som är innuti en "ram". Sedan loggon på sidan ska sticka ut ca 30px uppe och nere från ramen. Nu hade jag löst det genom att ha loggan som bakgrund i container sedan laggt in margins på de andra divarna så att det blev bra. Men när main fick den vitabakgrunden la den sig över loggan.
Nu har jag gjort en annan div som heter "top", och där har jag gjort inställningarna så här:
#top
{
position: absolute;
top: 30px;
width: 329px;
height: 171px;
background: url(../grafik/top.gif) no-repeat top left;
}
Och det fungerar i mozilla firefox. Men inte i IE.
Vet någon hur man kan lösa det? Imorgon kan jag lägga upp sidan på en server så ni kan se.
Nu har jag lagt upp den på en servr.
http://bobmagnus.no-ip.org/ordspelet/
Någon som vet hur man kan fixa det?
Såhär:
<!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>
<title>Ordspelet!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
body
{
background-color: #E3E3E3;
padding: 0;
margin: 0;
text-align: center;
}
form
{
margin: 30px auto 0 auto;
width: 563px;
background-color: #FFF;
text-align: left;
}
h1
{
position:relative;
left:-30px;
top:-30px;
float:left;
width: 299px;
height: 171px;
background: url(../grafik/top.gif) no-repeat top left;
text-indent:-3000px
}
#sidebar
{
float: right;
background: url(../grafik/kant_uppe.gif) no-repeat top left;
background-color: #FFF;
width: 264px;
}
#maincontent
{
float: left;
clear:left;
width: 299px;
}
#kant_nere
{
width: 563px;
height: 18px;
background: url(../grafik/kant_nere.gif) no-repeat bottom;
clear:both;
}
p {
font: 75%/160% georgia;
padding:2em
}
</style>
</head>
<body>
<form method="post" action="Default.aspx" id="Ordspelet">
<div id="maincontent">
<input type="hidden" name="__VIEWSTATE" value="dDwtMTI3OTMzNDM4NDs7Prv8TQSv0PZR3f1vUyvlDnaKpClI" />
<h1>Ordspelet</h1>
<p>Pellentesque dictum tortor at justo.
Nam pharetra ultrices tortor. Sed blandit risus non diam.
Nullam tempor commodo metus. Quisque malesuada,
enim id euismod iaculis, libero sapien pretium metus,
eu consequat felis massa tempor est. Sed eget augue ac
metus pharetra venenatis. Mauris at massa. Aenean dictum,
ipsum nec hendrerit fringilla, est arcu vulputate lectus,
id consectetuer sem mauris eu ante. Aliquam ut arcu. Nulla
fringilla eleifend ante. Cras ullamcorper, neque sit amet
pulvinar pulvinar, orci tellus imperdiet velit, eu
facilisis leo elit hendrerit lectus. Cras vitae dui. In
vitae nunc vitae velit dictum sagittis. Integer blandit
leo et odio auctor condimentum. Sed fermentum nulla at quam.</p>
</div>
<div id="sidebar">
<p>Pellentesque dictum tortor at justo.
Nam pharetra ultrices tortor. Sed blandit risus non diam.
Nullam tempor commodo metus. Quisque malesuada,
enim id euismod iaculis, libero sapien pretium metus,
eu consequat felis massa tempor est. Sed eget augue ac
metus pharetra venenatis. Mauris at massa. Aenean dictum,
ipsum nec hendrerit fringilla, est arcu vulputate lectus,
id consectetuer sem mauris eu ante. Aliquam ut arcu. Nulla
fringilla eleifend ante. Cras ullamcorper, neque sit amet
pulvinar pulvinar, orci tellus imperdiet velit, eu
facilisis leo elit hendrerit lectus. Cras vitae dui. In
vitae nunc vitae velit dictum sagittis. Integer blandit
leo et odio auctor condimentum. Sed fermentum nulla at quam.</p>
</div>
<div id="kant_nere"></div>
</form>
</body>
</html>
Du måste krympa din logga till 299px i bredd. Annars stämmer inte måtten mot bilderna med de rundade hörnen.
Har en till fråga.
http://bobmagnus.no-ip.org/ordspelet/
Om det inte är någon text ovanför <h2> i maincontent (Nyhet). Så kommer inte den bg:n synas, hur kan man göra för att lösa det problemet?
Tack, det fungerade! :)
Tips:
Jag ökade radavståndet i mitt kodexempel med line-height.
font-family: Georgia, Verdana, Arial;
font-size: 80%;
line-height:150%;
eller i kortform:
font: 80%/150% georgia, verdana, arial
Du kanske redan visste. Jag tycker iaf att det nästan alltid blir snyggare om man ökar radavståndet. ;)
font-family: Georgia, Verdana, Arial;
:o Det var en sarlig blandning mellan serif-fonter och sans-serif-fonter...
Borde det inte vara font-family: Georgia, serif; eller font-family: Verdana, Arial, sans-serif;? :)