Avatar billede tineb Nybegynder
12. oktober 2008 - 20:33 Der er 11 kommentarer

Baggrundsbillede gentager sig ikke med repeat i CSS.

Kære eksperter

Jeg har et problem med min baggrundsbillede som ikke vil gentage sig når jeg bygger siden op i DIV'er. Når jeg bare skriver ren tekst inde i containeren vil baggrundsbilledet gerne gentage sig vertikalt, men ikke når containeren er fuld af DIV'ere... Det er som om at containeren slet ikek registrerer div'erne.

Jeg har læst en masse tutorialts og kan ikke se hvad jeg gør galt... håber der er en der kan hjælpe mig. Dette problem må være barnemad for jer ;)

Et andet lille spørgsmål. hvordan centrerer jeg siden (containeren)? 

Her er koden: beklager hvis jeg har taget for meget med, men ved ikek helt hvordna I gerne vil have det præsenteret...

CSS:

@charset "UTF-8";
/* CSS Document */

<style type="text/css">
body {
    margin-left:160px;
        }
#container {
    position:relative;
    width:870px;
    top:0px;
    background-image: url("http://www.mediezonen.dk/2b/bg.gif");
    background-repeat: repeat-y;
    vertical-align: middle;
        }

#logo {
    position:absolute;
    top:20px;
    left:70px;
    }

#bundmenu {
    position:relative;
    background-color:#000000;
    color:#cdcdcd;
    width:870px;
    height:30px;
    left:0px;
    background-repeat: no-repeat;
        }
#bundmenulinks {
    position:absolute;
    top:8px;
    left:10px;
    text-align: left;
    width:850px;
}

a:link {
    color:#cdcdcd;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none;
    font-style:strong;
    line-height: 30px;
}
a:hover {
    color:#cdcdcd;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style:strong;
    text-decoration: underline;
}
a:visited {
    color:#cdcdcd;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none;
    font-style:strong;;
}
a:active {
    color:#cdcdcd;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none;
    font-style:strong;
}


h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    margin-top: 10px;
}
h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    margin-bottom: 5px;
    margin-right: 10px;
    margin-top: 10px;
    margin-left: 10px;
}
h3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: left;
    margin-top: 30px;
    margin-left: 30px;
}
h4 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    margin-bottom: 30px;
    text-align: left;
    margin-top: 30px;
    margin-left: 30px;
    margin-right:30px;
}

h5 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    margin-top: 30px;
}

#boks1 {
    position:absolute;
    top:110px;
    left:205px;
    width:190px;
    height:190px;
    background-color:#FFFFFF;
    background-repeat: no-repeat;
    text-align: center;
}
#boks2 {
    position:absolute;
    top:110px;
    left:415px;
    width:190px;
    height:190px;
    background-color:#FFFFFF;
    background-repeat: no-repeat;
    text-align: center;
}
#boks3 {
    position:absolute;
    top:110px;
    left:625px;
    width:190px;
    height:190px;
    background-color:#FFFFFF;
    background-repeat: no-repeat;
    text-align: center;
}
#boks4 {
    position:absolute;
    top:315px;
    left:205px;
    width:190px;
    height:190px;
    background-color:#FFFFFF;
    background-repeat: no-repeat;
    text-align: center;
}
#boks5 {
    position:absolute;
    top:315px;
    left:415px;
    width:190px;
    height:190px;
    background-color:#FFFFFF;
    background-repeat: no-repeat;
    text-align: center;
}
#boks6 {
    position:absolute;
    top:315px;
    left:625px;
    width:190px;
    height:190px;
    background-color:#FFFFFF;
    background-repeat: no-repeat;
    text-align: center;
}
#boks7 {
    position:absolute;
    top:530px;
    left:205px;
    width:610px;
    background-color:#FFFFFF;
    background-repeat: no-repeat;
    text-align: left;
    margin-left: 0px;
}
#spalte1 {
    float:left;
    width:70%;
    padding-bottom: 20px;
    }
#spalte2 {
    float:left;
    width:30%;
    text-align:left;
    margin-left:0;
    }
#foto {
    text-align:center;    }
.containermenu {
position:absolute;
    top:110px;
    left:10px;
    text-align: left;
    width:150px;
}
</style>


HTML
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>2b Security Systems</title>
<link href="2b.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"><div id="spalte3"><img src="bg.gif" />
<div id="logo"><img src="2blogo.gif" alt="logo" /></div><br />
      <div class="containermenu"><a href="/">Home</a><br />
        <a href="/">About 2B</a><br />
            <a href="/">Contact 2B</a><br />
            <a href="/">Camera Housings</a><br />
            <a href="/">Pan tilt Head</a><br />
            <a href="/">Cctv lenses</a><br />
            <a href="/">DVRs</a><br />
            <a href="/">Video Matrix</a><br />
            <a href="/">Cctv cameras</a><br />
            <a href="/">Customer solution</a><br />
</div>
<div id="boks1">
<h1>CCTV systems export</h1>
<img src="pic_20.jpg" alt="CCTV" width="80" height="72" />
<h2>2B security system ship<br />
  complete <strong>cctv systems</strong> and CCTV components <strong>worldwide</strong></h2>
</div>
<div id="boks2">
<h1>Power cctv zoom lenses</h1>
<img src="pic_16.jpg" alt="CCTV" width="100" height="56" />
<h2><br />
  CCTV motorized zoom lenses, power zoom, manual zoom, CCTV mega pixel lenses...</h2>
</div>
<div id="boks3">
<h1>Pan tilt heads</h1>
<img src="pic_19.jpg" alt="CCTV" width="80" height="77" />
<h2>Heavy duty cctv pan/tilt,<br />
  stainless steel, endless, <br />
  marine, high speed...</h2>
</div>
<div id="boks4">
<h1>CCTV systems export</h1>
<img src="pic_20.jpg" alt="CCTV" width="80" height="72" />
<h2>2B security system ship complete <strong>cctv systems</strong> and CCTV components <strong>worldwide</strong></h2>
</div>
<div id="boks5">
<h1>Power cctv zoom lenses</h1>
<img src="pic_16.jpg" alt="CCTV" width="100" height="56" />
<h2><br />
  CCTV motorized zoom lenses, power zoom, manual zoom, CCTV mega pixel lenses...</h2>
</div>
<div id="boks6">
<h1>Pan tilt heads</h1>
<img src="pic_19.jpg" alt="CCTV" width="80" height="77" />
<h2>Heavy duty cctv pan/tilt, stainless steel, endless, marine, high speed...</h2>
</div>
<div id="boks7">
<div id="spalte1">
<h3>CCTV systems from 2B Security Systems</h3>

<h4>2B delivers high quality cctv components world-wide and design cctv systems as border control cctv, Hot enviroment<br />
  surveillance, Marine video systems, Long range applications and many others.<br />
  <br />
  In this site you will find:
  <br />
  <br />
  CCTV zoom lenses, Pan tilt heads, camera housings, cctv cameras, DVRs, video matrix, video monitors, quads, ptz control, Video printers, IR illuminators, Video transmission, motorized lenses <br />
  <br />
  If you do not find the needed equipment in our site then please e-mail your specifications so we can check if we can help you.
  <br />
  <br />
  Most viewed pages:jfklds</h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="spalte2">
<h3>Pan tilt heads</h3>
<div id="foto"><img src="pic_19.jpg" alt="CCTV" width="80" height="77" /></div>
<h4>Heavy duty cctv pan/tilt, stainless steel, endless, marine, high speed...</h4>
</div>
</div>
</div>
</div>
<div id="bundmenu"><div id="bundmenulinks"><a href="http://2bsecurity.com">links</a> | <a href="http://2bsecurity.com">links</a> | <a href="http://2bsecurity.com">links</a> | <a href="http://2bsecurity.com">links</a>|</div></div>
</body>

</html>
Avatar billede w13 Novice
12. oktober 2008 - 20:47 #1
Du skal nok bare placere dette nederst i din container-div:

<div style="clear:both"></div>

Og når du indleder XHTML-siden med:

<?xml version="1.0" encoding="iso-8859-1"?>

vil IE6 i øvrigt gå i Quirks Mode og derfor ikke vise siden korrekt.
Avatar billede w13 Novice
12. oktober 2008 - 20:48 #2
Og du centrerer horisontalt med:

margin:auto;

Vertikal centrering er dog en meget mere besværlig sag.
Avatar billede tineb Nybegynder
12. oktober 2008 - 22:35 #3
Tak for svaret. Desværre har det ikke hjulpet med den nye "div" - og hvad skal jeg indlede XHTML siden med så siden bliver vist korrekt?

Centreringen horisontalt virker perfekt :)
Avatar billede w13 Novice
12. oktober 2008 - 22:58 #4
Du skal bare fjerne den første linje, dvs.:

<?xml version="1.0" encoding="iso-8859-1"?>

Det mister du ikke noget ved at gøre. Browserne kan alligevel ikke forstå XHTML.

Kan vi se et link til siden?
Avatar billede tineb Nybegynder
13. oktober 2008 - 20:16 #5
Ok, den er fjernet :)

Siden ligger her: http://www.mediezonen.dk/2b/

Det er meningen at den blå og grå baggrund skal følge med ned i containeren som baggrundsgrafik. Så den sorte bjælke er en bundmenu. (ligesom den aktuelle side http://www.2bsecurity.com/)

(Jeg er ved at lave en ny skabelon i Xhtml som hjemmesiden skal bygges om i.)

Et andet lille mærkelig problem er at menuen opfører sig lidt forskelligt... nogle gange er der underline på mouseover - hvilket der skal være - og andre gange er der ikke...

Tak igen for hjælpen. Håber jeg får løst baggrundsproblemet...
Avatar billede w13 Novice
13. oktober 2008 - 21:24 #6
Det ser stadig mest ud til at være en manglende <div style="clear:both"></div> nederst i en af dine div-elementer.
Avatar billede tineb Nybegynder
13. oktober 2008 - 21:39 #7
hmm.... det hjælper mig desværre ikke så meget. Jeg har sat den alle mulige steder og det gør ingen forskel. Kan du sige præcis hvor den skal sidde? Og hvorfor er det at den ikke flytter sig med andet end tekstindhold?
Avatar billede w13 Novice
13. oktober 2008 - 21:41 #8
Fordi du positionerer dine elementer, og derfor udvider de ikke boksen. :)
Avatar billede tineb Nybegynder
13. oktober 2008 - 21:45 #9
Ok, interessant... det er første gang jeg arbejder i XHTML - arbejder normalt i flash... men når jeg ikke positionerer flyver indholdet rundt på siden. Hvordan styrer jeg så det (uden at bruge tabeller)?
Avatar billede w13 Novice
13. oktober 2008 - 22:18 #10
Med marginer, bredde/højde, ved at lægge elementer ind i andre elementer o.lign.
Avatar billede tineb Nybegynder
13. oktober 2008 - 22:47 #11
Du har virkelig kastet mig ud på dybt ´vand her... jeg har troligt fulgt en tutorial og gjort alt efter bogen og nu kan jeg ikek bruge positions alligevel hvilket ødelægger hele siden.. æv. Nu har jeg prøvet at slette alle positions og kun arbejde med marginer for placeringen,, og det hjælper på baggrundsbilledet der udvider sig fint nu, men elementerne flyver rundt. Er der et sted jeg kan blive klogere på det her, så jeg ikke suger alt liv ud af dig? :)

Tak foreløbig for hjælpen

:)
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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