html - div template (3 in row) - Udvikleren.dk - Programmering, webdesign og grafik

Tags: div template html css

<< < 1 2 > >>

Bruger #16284 @ 04.04.12 19:41

Hej Udvikleren.

Har førhen lavet hjemmeside layouts i table, og synes det har fungeret udemærket. Men en bekendt sagde at af SEO og andre grunde at man skal lave det i div-tags.

Har aldrig arbejdet med div-tags, og derfor rendt ind i et problem med mit layout. Jeg skal have tre div-tags til at ligge ved siden af hinanden, uden nogen form for mellemrum. Har brugt "float: left" og float: right", og på den i midten brugt "margin-left: auto" og margin-right: auto".

Ved at gøre det på denne måde er det kun div-tag til venstre og midten der kommer på samme linje. Hvad gør jeg forkert?

index.html:

HTML kode

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link href="css/style-div.css" rel="stylesheet" type="text/css">
 </head>
 
 <body class="body">
 
  <!--- hoved start --->
  
  <div class="hoved">
  
  <!--- menu start --->
  
  <div class="menu-v"> menu-v </div>
  <div class="menu"> menu </div>
  <div class="menu-h"> menu-h </div>
  
  <!--- menu stop --->
  
  <!--- position start --->
  
  <div class="position-v"> position-v </div>
  <div class="position"> position </div>
  <div class="position-h"> position-h </div>
  
  <!--- position stop --->
  
  <!--- slideshow start --->
  
  <div class="slide-v"> slide-v </div>
  <div class="slide"> slide</div>
  <div class="slide-h"> slide-h </div>
  
  <!--- slideshow stop --->
  
  <!--- main start --->
  
  <div class="main-v"> main-v </div>
  <div class="main"> main </div>
  <div class="main-h"> main-h </div>
  
  <!--- main stop --->
  
  <!--- bottom start --->
  
  <div class="bottom-v"> bottom-v </div>
  <div class="bottom"> bottom </div>
  <div class="bottom-h"> bottom-h </div>
  
  <!--- bottom stop --->
  
  <!--- hoved stop --->
  
  </div>
  
 </body>
 </html>

style.css:

CSS kode

 @charset "utf-8";
 .body {
     margin: 0px;
 }
 .hoved {
     height: 100%;
     width: 100%;
 }
 
 .menu {
     width: 1000px;
     background-color: #2b8bc7;
     border-style: solid;
     border-width: thin;
     margin-left: auto;
     margin-right: auto;
 }
 .menu-v {
     background-color: #2b8bc7;
     float: left;
 }
 .menu-h {
     background-color: #2b8bc7;
     float: right;
 }
 
 
 .position {
     width: 1000px;
     background-color: #7dbee6;
     border-style: solid;
     border-width: thin;
 }
 .position-v {
     background-color: #7dbee6;
     border-style: solid;
     border-width: thin;
 }
 .position-h {
     background-color: #7dbee6;
     border-style: solid;
     border-width: thin;
 }
 
 .slide {
     width: 1000px;
     border-style: solid;
     border-width: thin;
 }
 .slide-v {
     border-style: solid;
     border-width: thin;
 }
 .slide-h {
     border-style: solid;
     border-width: thin;
 }
 
 
 .main {
     width: 1000px;
     background-color: #7dbee6;
     border-style: solid;
     border-width: thin;
 }
 .main-v {
     background-color: #7dbee6;
     border-style: solid;
     border-width: thin;
 }
 .main-h {
     background-color: #7dbee6;
     border-style: solid;
     border-width: thin;
 }
 
 .bottom {
     width: 1000px;
     background-color: #2b8bc7;
     border-style: solid;
     border-width: thin;
 }
 .bottom-v {
     background-color: #2b8bc7;
     border-style: solid;
     border-width: thin;
 }
 .bottom-h {
     background-color: #2b8bc7;
     border-style: solid;
     border-width: thin;
 }

Indlæg senest redigeret d. 04.04.2012 20:05 af Bruger #16284

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

Sorter efter stemmer Sorter efter dato

Bruger #16284 @ 05.04.12 21:36

Ja. Det var det der var meningen med, at putte det på jsfiddle

Må du undskylde havde ikke set at man kunne se koderne.

<< < 1 2 > >>

div template (3 in row)

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler