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

Sensity Nybegynder

13. august 2011 - 16:26 Der er 28 kommentarer og
1 løsning

Centrerings problem

hej eksperten.dk

Er der nogle af jer som kan fortælle mig hvordan jeg får min hvide baggrundd (Markeret med sort streg) ind under og centreret med min menu bar. Det skal foregår via <div> og i CSS.

Billedet:

http://www.myupload.dk/showfile/9753912415d.png

Hilsen Sensity

Synes godt om

claes57 Ekspert

13. august 2011 - 16:58 #1

det vil være lettere, hvis du skrev css-koden og koden med din div'er

Synes godt om

egmose Novice

13. august 2011 - 17:03 #2

<div id="bla bla">
Dit indhold i Diven
</div>

css:
height:xxxpx;
width:xxxpx;
margin:auto;

Synes godt om

Sensity Nybegynder

13. august 2011 - 17:05 #3

<div id="wrapper">
<div id="main-bg">
<div id="banner"></div>

<div id="menu">
<ul id="nav">

<li><a href="?p=frontpage">Forside<span></span></a></li>
<li><a href="#">Tes1<span></span></a></li>
<li><a href="#">Testside 2<span></span></a></li>
<li><a href="#">Testside 3<span></span></a></li>
<li class="fly"><a href="#" class="fly-a">Testside 4</a>
<ul>
<li><a href="#">Dropdown Test</a></li>
<li><a href="#">Dropdown Test</a></li>
<li><a href="#">Dropdown Test</a></li>
<li><a href="#">Dropdown Test</a></li>
<li><a href="#">Dropdown Test</a></li>
<li class="btm"></li>
</ul>
</li>
</ul>
</div>

</div>

</div>

<div id="body">

<div id="footer"></div>

CSS

div#body {
background: url(file:///C|/Users/Kristian/Desktop/new%20website/images/body.png);
width: 1020px;
height: auto;
float: left;
position: relative;

Synes godt om

claes57 Ekspert

13. august 2011 - 17:17 #4

flytter 'body' og 'footer' lidt op

<div id="wrapper">
<div id="main-bg">
<div id="banner"></div>

<div id="menu">
<ul id="nav">

<li><a href="?p=frontpage">Forside<span></span></a></li>
<li><a href="#">Tes1<span></span></a></li>
<li><a href="#">Testside 2<span></span></a></li>
<li><a href="#">Testside 3<span></span></a></li>
<li class="fly"><a href="#" class="fly-a">Testside 4</a>
<ul>
<li><a href="#">Dropdown Test</a></li>
<li><a href="#">Dropdown Test</a></li>
<li><a href="#">Dropdown Test</a></li>
<li><a href="#">Dropdown Test</a></li>
<li><a href="#">Dropdown Test</a></li>
<li class="btm"></li>
</ul>
</li>
</ul>
</div>

<div id="body">



<div id="footer"></div>
</div> 

</div>

Synes godt om

Sensity Nybegynder

13. august 2011 - 17:24 #5

nu viser den ikke noget billed ?

Synes godt om

claes57 Ekspert

13. august 2011 - 17:30 #6

hvis du har skiftet body til noget andet, så skift også i div#body

Synes godt om

Sensity Nybegynder

13. august 2011 - 17:36 #7

Var gjort.

Synes godt om

Sensity Nybegynder

13. august 2011 - 17:36 #8

Altså, nu viser den noget, men ikke på hele siden. kun omkring 20 px, under menu bar

Synes godt om

claes57 Ekspert

13. august 2011 - 17:43 #9

hele koden ?

Synes godt om

Sensity Nybegynder

13. august 2011 - 17:46 #10

div#maintest {
background: url(file:///C|/Users/Kristian/Desktop/new%20website/images/body.png) ;
width: 1200px;
height: auto;
margin:auto;
}
Det min CSS

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/css.css" rel="stylesheet" type="text/css" />

<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/dropdown.js" type="text/javascript"></script>
<title><?php $title ?></title>
</head>

<body>

<div id="wrapper">
<div id="main-bg">
<div id="banner"></div>

<div id="menu">
<ul id="nav">

<li><a href="?p=frontpage">Forside<span></span></a></li>
<li><a href="#">Tes1<span></span></a></li>
<li><a href="#">Testside 2<span></span></a></li>
<li><a href="#">Testside 3<span></span></a></li>
<li class="fly"><a href="#" class="fly-a">Testside 4</a>
<ul>
<li><a href="#">Dropdown Test</a></li>
<li><a href="#">Dropdown Test</a></li>
<li><a href="#">Dropdown Test</a></li>
<li><a href="#">Dropdown Test</a></li>
<li><a href="#">Dropdown Test</a></li>
<li class="btm"></li>
</ul>
</li>
</ul>
</div>

<div id="maintest">
<h1>lol

</div>

<div id="footer"></div>
</div> 

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

</html>
Min HTML

Synes godt om

olebole Juniormester

13. august 2011 - 18:34 #11

<ole>

Prøv at lægge et linktil siden, så vi kan se, hvad du i virkeligheden laver

/mvh
</bole>

Synes godt om

claes57 Ekspert

13. august 2011 - 18:38 #12

i første omgang, så brug relativ adresse i
background: url(file:///C|/Users/Kristian/Desktop/new%20website/images/body.png) ;
fx
background: url(images/body.png) ;

husk at gemme og reloade fil i browser (F5) - ellers ser du måske bare den fra cache, og det er så den gamle fejl.

Synes godt om

olebole Juniormester

13. august 2011 - 18:44 #13

- og hvis cache er problem, så prøv Ctrl+F5, som henter filen udenom cachen.

Et link vil dog stadig bringe os væsentligt nærmere en mulig løsning *o)

Synes godt om

claes57 Ekspert

13. august 2011 - 18:45 #14

du har sat
<div id="maintest">
<h1>lol

</div>

<div id="footer"></div>
</div> 

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

min kommentar om den manglende /div - div er isat lige før, så du slutter med at have en </div> for meget.
Tæl selv op - antal <div> og </div> skal passe. Det du satte ind lige før </body> viser bare, at brug af body er forvirrende
kommentaren 
kan nu rettes til

så du ved hvor den slutter.

Synes godt om

Sensity Nybegynder

13. august 2011 - 19:12 #15

Jeg Giver et link til siden så snart jeg har fået adgang til min web server igen.

Synes godt om

olebole Juniormester

13. august 2011 - 19:16 #16

Jeg tvivler på, at det er den overflødige div-lukning eller at et div har 'body' som ID, der giver problemerne.

Jeg må vist heller prøve at gøre det helt tydeligt:

Prøv at lægge et link til siden. Det gør det meget lettere for alle parter at finde en løsning. Altså et LINK, please *o)

Synes godt om

olebole Juniormester

13. august 2011 - 19:17 #17

Okay, der krydsede vores indlæg vist. Vi glæder os til linket *o)

Synes godt om

Sensity Nybegynder

13. august 2011 - 19:19 #18

http://89.150.85.191/new%20website/ Der er der.

Synes godt om

olebole Juniormester

13. august 2011 - 19:26 #19

Begynd med at afslutte dit HTML-dokument. I øjeblikket slutter det midt i en overskrift. Det kan du ikke bruge til noget - og visningen bliver uforudsigelig

Synes godt om

olebole Juniormester

13. august 2011 - 19:30 #20

Sorry, der stod mere længere nede i kode - men du skal i hvertfald afslutte dit H1 element.

Hvor er det hvide område, der skal centreres?

Synes godt om

Sensity Nybegynder

13. august 2011 - 19:35 #21

Der er en hvid ting under menu, men den skulle være centreret og være længere. og H1 Gjort.

Synes godt om

olebole Juniormester

13. august 2011 - 19:42 #22

Har du i øvrigt set siden i FF eller Opera? Sikkert ikke *o)

Du har en del syntaksfejl i CSS'en:

a:hover {
color: #000000;
text-decoration: dotted; /* Ikke eksisterende værdi */
font-weight: bold;
}

div#maintest {
background: url('/new website/images/body.png) ; /* Strengen er ikke afsluttet */
width: 1200px;
height: auto;
margin:auto;
}

div#footer {
background-image:url('/new website/images/footer.png') no-repeat; /* Background-image tager kun én værdi */
width: 1200px;
height: 121px;
position: relative;
}

Synes godt om

olebole Juniormester

13. august 2011 - 19:46 #23

- og slet det sidste </div> i din HTML, som claes57 påpegede

Synes godt om

Sensity Nybegynder

13. august 2011 - 19:52 #24

Mange tak for det. Nu har jeg rettet de fejl der. Hvordan får jeg den så centreret ?

Synes godt om

Sensity Nybegynder

13. august 2011 - 20:03 #25

Så har jeg fundet ud af det, var en fejl i mine pixels der gjorde den ikke ville ind på midten. Smid nogle svar så i kan få nogle points. I SKAL HAVE MANGE MANGE TAK ALLE SAMMEN FOR NOGLE GODE SVAR!

:)

Hilsen Kristian "sensity"

Synes godt om

olebole Juniormester

13. august 2011 - 20:08 #26

Ellers tak, jeg samler ikke points =)

Brug disse to, så slipper du for meget bøvl:
HTML validator
CSS validator

Synes godt om

Sensity Nybegynder

13. august 2011 - 20:17 #27

Mange tak! :)

Synes godt om

Sensity Nybegynder

13. august 2011 - 20:22 #28

svar

Synes godt om

Sensity Nybegynder

13. august 2011 - 20:23 #29

andre som har deltaget i dette spørgsmål, skriv for points.

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
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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