webdesign - Problemer med html/css - Udvikleren.dk - Programmering, webdesign og grafik

Tags: webdesign

Bruger #17390 @ 12.02.13 22:48

Hej alle sammen. Jeg har et problem med min kodning.

Jeg er begyndt at kode html og css og det går som smurt. Har allerede lavet diverse sites, men ville nu tage skridtet videre og lave nogle templates til et CMS.

Jeg er stadig i udviklins fasen af templatet som lige pt er i HTML, men jeg har dette problem at jeg skal centrere alt mit indhold via css.

Jeg bruger normalt position:relative; og margin:auto; for at centrere det hele. ALtå jeg har en div med div=style 100% uden over alle de andre divs. De er så lavet med position absolute. Men det er som om at min første div, den ikke vil op til toppen? det kan evt. ses her: www.ufrag.net/banjo

Her er min html

HTML kode

 <div style="width:100%;">
     <div id="wrapper">
         <div id="headertop">
         </div>
         <div id="headerimg">
         </div>
         <div>
             <div>
             <a href="index.html" target="_self" id="navhome">HOME</a>
             </div>
             <div>
             <a href="index.html" target="_self" id="navmembers">MEMBERS</a>
             </div>
             <div>
             <a href="index.html" target="_self" id="navmatches">MATCHES</a>
             </div>
             <div>
             <a href="index.html" target="_self" id="navforum">FORUM</a>
             </div>
             <div>
             <a href="index.html" target="_self" id="navsponsors">SPONSORS</a>
             </div>
             <div>
             <a href="index.html" target="_self" id="navdownloads">DOWNLOADS</a>
             </div>
             <div>
             <a href="index.html" target="_self" id="navmedia">MEDIA</a>
             </div>
             <div>
             <a href="index.html" target="_self" id="navcontactus">CONTACTUS</a>
             </div>
               <div id="navrest">
             </div>
             </div>
             <div id="navunderline">
             </div>
             
             <div id="contentbg">
                 <div id="contentbar">
                     <div id="contentarea">
                     <p class="contentarea"></p>
                     </div>
                 </div>
                
                 <div id="latestnewsbg">
                     <div id="latestnewsbar">
                     </div>
                     <div id="latestnewscontent">
                     </div>
                 </div>
                 
                 <div id="latestmatchesbg">
                     <div id="latestmatchesbar">
                     </div>
                     <div id="latestmatchescontent">
                     </div>
                 </div>
                 
                 <div id="latestforumthreadsbg">
                     <div id="latestforumthreadsbar">
                     </div>
                     <div id="latestforumthreadscontent">
                     </div>
                     
                 <div id="sponsorsbg">
                   <div id="sponsorsbar">
                 </div>
                 <div id="sponsorscontent">
                 </div>
                 
             </div> 
         </div>
     <div id="footerbg">
         <div="footercontent">
         </div>
     </div>
     </div>
 </div>

Her er min css

CSS kode

 @charset "utf-8";
 /* CSS Document */
 
 body{
     background-color:#F36;
 }
 
 #wrapper{
     width:1000px;
     height:1600px;
     position:relative;
     margin:auto;
 }
 
 #headertop{
     width:1000px;
     height:40px;
     background-image:url(../images/template/headertop.jpg);
     position:absolute;
     top:0px;
     left:0px;
 }
 
 #headerimg{
     width:1000px;
     height:200px;
     background-image:url(../images/template/header.jpg);
     position:absolute;
     top:40px;
     left:0px;
 }
 
 #navhome{
     width:76px;
     height:40px;
     background-image:url(../images/template/navhome.jpg);
     position:absolute;
     top:240px;
     left:0px;
     text-indent:-9999px;
 }
 
 #navmembers{
     width:95px;
     height:40px;
     background-image:url(../images/template/navmembers.jpg);
     position:absolute;
     top:240px;
     left:76px;
     text-indent:-9999px;
 }
 
 #navmatches{
     width:93px;
     height:40px;
     background-image:url(../images/template/navmatches.jpg);
     position:absolute;
     top:240px;
     left:171px;
     text-indent:-9999px;
 }
 
 #navforum{
     width:81px;
     height:40px;
     background-image:url(../images/template/navforum.jpg);
     position:absolute;
     top:240px;
     left:264px;
     text-indent:-9999px;
 }
 
 #navsponsors{
     width:101px;
     height:40px;
     background-image:url(../images/template/navsponsors.jpg);
     position:absolute;
     top:240px;
     left:345px;
     text-indent:-9999px;
 }
 
 #navdownloads{
     width:114px;
     height:40px;
     background-image:url(../images/template/navdownloads.jpg);
     position:absolute;
     top:240px;
     left:446px;
     text-indent:-9999px;
 }
 
 #navmedia{
     width:77px;
     height:40px;
     background-image:url(../images/template/navmedia.jpg);
     position:absolute;
     top:240px;
     left:560px;
     text-indent:-9999px;
 }
 
 #navcontactus{
     width:110px;
     height:40px;
     background-image:url(../images/template/navcontactus.jpg);
     position:absolute;
     top:240px;
     left:637px;
     text-indent:-9999px;
 }
 
 #navrest{
     width:253px;
     height:40px;
     background-image:url(../images/template/navrest.jpg);
     position:absolute;
     top:240px;
     left:747px;
     text-indent:-9999px;
 }
 
 #navunderline{
     width:1000px;
     height:8px;
     background-image:url(../images/template/navunderline.jpg);
     position:absolute;
     top:280px;
     left:0px;
 }
 
 #contentbg{
     width:1000px;
     height:933px;
     background-color:#242424;
     position:absolute;
     top:288px;
     left:0px;
 }
 
 #latestnewsbg{
     width:270px;
     height:197px;
     background-color:#FFF;
     position:absolute;
     top:0px;
     left:730px;
 }
 
 #latestnewsbar{
     width:268px;
     height:40px;
     background-image:url(../images/template/latest_news_bar.jpg);
     position:absolute;
     top:1px;
     left:1px;
 }
 
 #latestnewscontent{
     width:268px;
     height:155px;
     position:absolute;
     top:41px;
     left:1px;
     background-color:#339;
 }
 
 #latestmatchesbg{
     width:270px;
     height:197px;
     background-color:#FFF;
     position:absolute;
     top:197px;
     left:730px;
 }
 
 #latestmatchesbar{
     width:268px;
     height:40px;
     background-image:url(../images/template/latest_matches_bar.jpg);
     position:absolute;
     top:0px;
     left:1px;
 }
 
 #latestmatchescontent{
     width:268px;
     height:155px;
     background-color:#339;
     position:absolute;
     top:41px;
     left:1px;
 }
 
 #latestforumthreadsbg{
     width:270px;
     height:197px;
     background-color:#FFF;
     position:absolute;
     top:394px;
     left:730px;
 }
 
 #latestforumthreadsbar{
     width:268px;
     height:40px;
     background-image:url(../images/template/latest_forumthreads_bar.jpg);
     position:absolute;
     top:0px;
     left:1px;
 }
 
 #latestforumthreadscontent{
     width:268px;
     height:155px;
     background-color:#339;
     position:absolute;
     top:41px;
     left:1px;
 }
 
 #sponsorsbg{
     width:270px;
     height:342px;
     background-color:#FFF;
     position:absolute;
     top:197px;
     left:0px;
 }
 
 #sponsorsbar{
     width:268px;
     height:40px;
     background-image:url(../images/template/sponsors_bar.jpg);
     position:absolute;
     top:0px;
     left:1px;
 }
 
 #sponsorscontent{
     width:268px;
     height:300px;
     position:absolute;
     top:41px;
     left:1px;
     background-color:#339;
 }
 
 #contentbar{
     width:728px;
     height:12px;
     background-image:url(../images/template/Content_bar.jpg);
 }
 
 #contentarea{
     width:728px;
     height:921px;
     background-color:#FFF;
     position:absolute;
     top:12px;
     left:0px;
 }
 
 p.contentarea{
     margin-left:10px;
     margin-right:10px;
 }
 
 #footerbg{
     width:1000px;
     height:80px;
     background-color:#0FC;
     position:absolute;
     top:933px;
     left:0px;
 }
 
 #footercontent{
     width:998px;
 }

Kan desværre ikke selv finde fejlen eller finde ud af hvordan fejlen er opstået, så håber at der er en der kan hjælpe mig i mit håbløse forsøg her

På forhånd tak!

6 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 6 karma

Sorter efter stemmer Sorter efter dato

Bruger #8884 @ 13.02.13 01:27

300

Der er ikke noget galt med det du har kodet, men du kan sagtens løse problemet uden.

<body> har som udgangspunkt enten en margin eller en padding an på hvilken browser du bruger. Når jeg styler et website plejer jeg altid at skrive dette stykke kode i toppen af min CSS fil:

CSS kode

 *{
      margin:0px;
      padding:0px;
 }

Det gør så alle elementer på siden ingen padding eller margin har. Så slipper man for irriterende elementer der har margin eller padding man ikke selv har tilføjet.

Dette kan selvfølgelig også gøres bare for body tagget:

CSS kode

 body{
      margin:0px;
      padding:0px;
 }

Så behøver din #bigwrapper ikke at have position absolute og top 0px. :-)

Mvh. Andreas Voss

Bruger #17390 @ 12.02.13 22:57

Hmm utroligt nok så fik jeg det til at virke alligevel!

Den måde jeg har gjort det på er at erstatte "<div style="width:100%;">"

med <div id="bigwrapper">

og lavet en css med

#bigwrapper{
width:100%;
position:absolute;
top:0px;
}

Ved ikke om dette er teknisk forkert, men det har da rettet på mit problem!
I må gerne give et input til om det er teknisk korrekt, eller om det bare er fusk?

På forhånd tak

Bruger #17081 @ 13.02.13 08:44

1.258

Så behøver din #bigwrapper ikke at have position absolute og top 0px. :-)

@Andreas Voss & @Morten eller:

CSS kode

 width: 100%;

Indlæg senest redigeret d. 13.02.2013 08:45 af Bruger #17081

Bruger #17390 @ 13.02.13 09:52

Der er ikke noget galt med det du har kodet, men du kan sagtens løse problemet uden.

<body> har som udgangspunkt enten en margin eller en padding an på hvilken browser du bruger. Når jeg styler et website plejer jeg altid at skrive dette stykke kode i toppen af min CSS fil:

CSS kode
 *{
      margin:0px;
      padding:0px;
 }
Det gør så alle elementer på siden ingen padding eller margin har. Så slipper man for irriterende elementer der har margin eller padding man ikke selv har tilføjet.

Dette kan selvfølgelig også gøres bare for body tagget:

CSS kode
 body{
      margin:0px;
      padding:0px;
 }
Så behøver din #bigwrapper ikke at have position absolute og top 0px. :-)

Mvh. Andreas Voss

Ah tak for hjælpen

Vidste ikke at body havde en automatisk margin og padding i sig selv

Bruger #17435 @ 14.02.13 08:59

<body> har som udgangspunkt enten en margin eller en padding an på hvilken browser du bruger. Når jeg styler et website plejer jeg altid at skrive dette stykke kode i toppen af min CSS fil:

Pinligt.. Det vidste jeg heller ikke :o

Bruger #17081 @ 14.02.13 09:15

1.258

et block element som f.eks. et div tag har også en implicit width på 100% ... derfor du heller ikke behøver sætte width på den, hvis du gerne vil have den til, at fylde fuld brede

Problemer med html/css

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler