html - css div tag problem. - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #10114 @ 06.09.10 18:34

Hey jeg prøver at lave mit website sådan her: Klik her

Her er min kode:

index.php

HTML kode

 <!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=ISO-8859-1" />
     
     <title>Borgen44 - Website</title>
     
     <link rel="stylesheet" type="text/css" href="inc/styles/styles_borgen44.css">
 </head>
 
 <body>
 
 <div id="container">
     
   <div id="header">[header]</div>
     
     <div id="menu">
         <div id="topmenu">[menu.top]</div>
         <div id="submenu">[menu.sub]</div>
     </div>
     
     <div id="page">
         <div id="content">[page.content]</div>
         <div id="adds">[page.adds]</div>
         
         <div id="footer">
             
             <div id="footerleftcenter">
                 <div id="footerleft">[footer.left]</div>
                 <div id="footercenter">[footer.center]</div>
             </div>
             
             <div id="footerright">[footer.right]</div>
             
         </div>
     
     </div>
     
 </div>
 
 
 
 
 
 
 <h1>Borgen44 - Website</h1>
 
 <address>
 Written by W3Schools.com<br />
 <a href="mailto:us@example.org">Email us</a><br />
 Address: Box 564, Disneyland<br />
 Phone: +12 34 56 78
 </address>
 
 <p>
     <a href="../hjemmeside_og_community/">Borgen44</a>
 </p>
 
 <a href="#tips">Jump to the Tips Section</a>
 <a name="tips">Tips Section</a>
 
 </body>
 </html>

styles_borgen44.css

CSS kode

 body {
     margin: 2px;
     font-family: "Verdana", Trebuchet MS, Arial, Helvetica, sans-serif;
     font-size: 13px;
     color: #000000;
     text-align: left;
     vertical-align: top;
     overflow: scroll;
 }
 
 #container {
     width: 900px;
     margin: 0px auto;
     border: 1px solid #000;
 }
 
 #header {
     height: 100px;
     width: 870px;
     margin: 15px;
     border: 0px;
     background-color: #0F0;
 }
 
 #menu {
     height: 35px;
     width: 870px;
     margin: 0px auto;
     border: 0px;
     background-color: #0FF;
 }
 
 #topmenu {
     background-color: #9F0;
 }
 
 #submenu {
     background-color: #CC0;
 }
 
 #page {
     width: 870px;
     border: 0px;
     margin: 15px;
     background-color: #CCCCCC;
     position: relative;
 }
 
 #content {
     float: left;
     width: 655px;
     border: 1px solid #000;
 }
 
 #adds {
     float: right;
     width: 200px;
     border: 1px solid #000;
 }
 
 #footer {
     width: 870px;
     clear: both;
     background-color: #FFFFFF;
     border: 0px;
     margin: 15px;
     position: relative;
 }
 
 #footerleftcenter {
     float: left;
     width: 450px;
     border: 1px solid #000;
 }
 
 #footerleft {
     float: left;
     width: 200px;
     border: 1px solid #000;
 }
 
 #footercenter {
     float: right;
     width: 200px;
     border: 1px solid #000;
 }
 
 #footerright {
     float: right;
     width: 200px;
     border: 1px solid #000;
 }

Indlæg senest redigeret d. 06.09.2010 18:41 af Bruger #10114

Bruger #15754 @ 06.09.10 18:38

989

Linket til dit billede virker ikke.

Bruger #10114 @ 06.09.10 18:42

nu gør det

Bruger #10216 @ 06.09.10 21:25

4.283

Det er ikke så længe siden jeg skrev noget der minder om det du gerne vil, prøv at kigge på det og se om du kan se hvad der sker:

HTML kode

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
     <head> 
         <style>
             #body { margin: 0 auto; width: 960px; }
             .grid-100 { margin-bottom: 30px; }
             .grid-33 { float: left; width: 280px; margin-right: 60px; margin-bottom: 30px; }
             .grid-50 { float: left; width: 450px; margin-right: 60px; margin-bottom: 30px; }
             .grid-75 { float: left; width: 705px; margin-right: 60px; margin-bottom: 30px; }
             .grid-25 { float: left; width: 195px; margin-right: 60px; margin-bottom: 30px; }
             .grid-last { margin-right: 0px; }
         </style> 
     </head> 
     <body>
         <div id="body">
             <div class="grid-100">
                 <div style="height: 200px; border: 1px dashed #ccc"></div>
             </div>
             <div class="grid-75">
                 <div style="height: 200px; border: 1px dashed #ccc"></div>
             </div>
             <div class="grid-25 grid-last">
                 <div style="height: 200px; border: 1px dashed #ccc"></div>
             </div>
             <div class="grid-25">
                 <div style="height: 200px; border: 1px dashed #ccc"></div>
             </div>
             <div class="grid-25">
                 <div style="height: 200px; border: 1px dashed #ccc"></div>
             </div>
             <div class="grid-50 grid-last">
                 <div style="height: 200px; border: 1px dashed #ccc"></div>
             </div>
         </div>
     </body>
 </html>

Bruger #10216 @ 06.09.10 21:25

4.283

... en for meget ...

Indlæg senest redigeret d. 06.09.2010 21:26 af Bruger #10216

Bruger #10114 @ 08.09.10 11:20

Fedt, det gør det hele meget nemmere.

Er det noget jeg må bruge?

css div tag problem.

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler