Hjälp med Div:ar och bakgrundsrepeat.

4 svar · 480 visningar · startad av ConnyFox 8 feb. 2007

ConnyFoxMedlem sedan aug. 20011 087 inlägg

Frågan8 feb. 2007 16:48#1

har ett problem med min sida.. allt fungerar hur bra som helst i samtliga webbläsare förutom två div:ar med bakgrundsbild som vägrar gå hela vägen!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title></title>
<meta name="generator" content="TSW WebCoder" />
<link rel="stylesheet" href="stylesheet.css" />
</head>

<body>

<div style="display: block; width: 737px; min-height: 100%;">

[red]<div class="border_left"><img src="img/border_left.gif" alt="" /></div>[/red]
<div style="float: left; display: table-cell; min-height: 100%;">
<div class="border_top"><img src="img/logo_shadow.gif" alt="" /></div>

<div style="width: 707px; background-color: #FFFFFF; display: table-row; min-height: 100%;">

<div style="float: left; width: 526px; padding: 10px; display: table-cell">

<div class="boej">&nbsp; &nbsp;Nyheter</div>
<div class="nyhets_text">
-->Innehåll!<--

</div>

</div>

</div>
</div>
[red]<div class="border_right"><img src="img/border_right.gif" alt="" /></div>[/red]

<div>
<div style="float: left; width: 21px; height: 40px;"><img src="img/bottom_left.gif" alt="" /></div>
<div style="float: left; width: 692px; height: 40px; background-image: url(img/bottom_bg.gif);"></div>
<div style="float: left; width: 24px; height: 40px;"><img src="img/bottom_right.gif" alt="" /></div>
</div>

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

det är alltså dom rödmarkerade div:arna där bakgrundsbilden (i css:en) vägrar gå hela vägen vad jag än gör.

Här är css:en för dom båda.

.border_left {
		float: left; width: 13px; min-height: 100%; background-image: url(img/border_left_bg.gif); vertical-align: top;
}

.border_right {
		float: left; width: 17px; min-height: 100%; background-image: url(img/border_right_bg.gif); vertical-align: top;
}

Sätta höjd till 100% fungerar alltså inte. =/

ConnyFoxMedlem sedan aug. 20011 087 inlägg

9 feb. 2007 14:00#2

Ingen som kunde detta nej :D blir väll och koda om till tråkiga tabeller då.. =/

silfverMedlem sedan apr. 200312 679 inlägg

9 feb. 2007 14:37#3

Kan du inte ge en länk till din hemsida, eller visa en skärmdump. Hur mycket saknas? Har du satt margin: 0; padding: 0; på body?

cayaMedlem sedan aug. 20051 448 inlägg

12 feb. 2007 11:59#4

tänk inte på tabeller nu... tänk vad du vill åstadkomma

<div id="container">
  <div id="logo">
    <h1>Webbadress.com</h1>
  </div>

  <div id="content">
    <h2 class="nyheter">Nyheter</h2>
      <p class="nyhets_text">--&gt;Innehåll!&lt;--</p>
  </div>

  <div id="footer">
    <small>&copy; Whatever &amp; Whomever</small>
  </div>

</div>

börjar skissa lite på en passande css... ta över och tänk igenom...
bakgrundsbilderna med de skuggande ramarna läggs i container, den övre i loggan, den nedre i footern. det behöver inte vara svårare än så...

* { margin:0; padding:0; }
body {
text-align:center;
font:11px/17px Verdana, Arial, Helvetica, sans-serif;
background:#fff;
color:#000;
}
#container {
width: 737px; margin:0 auto;
background:#fff url(img/border_bg.gif) top left repeat-y;
text-align:left;
}
#logo {
background:url(img/logo_shadow.gif) no-repeat;
height:150px;
width:737px;
}
#logo h1 {
position:absolute; top:0; left:-9000px;
}
#content {
float:left; 
width:526px; 
padding:10px;
}
#footer {
background:url(img/footer_bg.gif) bottom left no-repeat;
height:30px; width:737px;
}

mer om faux columns...
http://www.webforum.nu/showthread.php?t=153425

SuPeR_ToBBeMedlem sedan mars 2001185 inlägg

12 feb. 2007 12:29#5

För att göra som du tänkt från början, testa att sätta height: 100% på body och html