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 #17081 @ 04.04.12 22:25

1.258

Sådan her?
http://jsfiddle.net/gQMf7/2/embedded/result/

Bruger #17081 @ 04.04.12 21:51

1.258

Hej Nikolaj, man kan godt se, at din css og din html bærer præg af, at du er vant til, at skrive din markup i tables.

Men hvis vi skal hjælpe er vi nødttil, at vide lidt mere om hvordan det er meningen, at siden og indholdet skal opfører sig.

De felter du vil have i midten ... de skal have en bredte på 1000px ikke? Men hvad med sidebar / felterne i siden. Skal de have en fast brede eller skal de være variable ... eller hvad er meningen? Hvordan skal indholdet opfører sig ... skal hele siden opfører sig som et felt i midten med 2 side kolonner eller hvordan? Det er nødvendigt med lidt mere information, for, at kunne hjælpe

Bruger #16284 @ 04.04.12 22:00

Hej Nikolaj, man kan godt se, at din css og din html bærer præg af, at du er vant til, at skrive din markup i tables.

Men hvis vi skal hjælpe er vi nødttil, at vide lidt mere om hvordan det er meningen, at siden og indholdet skal opfører sig.

De felter du vil have i midten ... de skal have en bredte på 1000px ikke? Men hvad med sidebar / felterne i siden. Skal de have en fast brede eller skal de være variable ... eller hvad er meningen? Hvordan skal indholdet opfører sig ... skal hele siden opfører sig som et felt i midten med 2 side kolonner eller hvordan? Det er nødvendigt med lidt mere information, for, at kunne hjælpe

Hej Dan.

Dem i midten skal være 1000px, og dem i siderne skal bare rette sig til efter bredden på den besøgendes vindue, så hjemmesiden automatisk fylder hele vinduet.

Grunden til at jeg har lavet de andre div-tags i siderne er fordi at hjemmesiden er delt op i tre farver, og der skulle gerne være den samme farve i hele menu linjen, og det samme i de andre.

Håber det giver et lidt bedre indblik i hvordan det hele skal arbejde.

Bruger #17081 @ 04.04.12 22:02

1.258

det gav lidt mening ... men hvad skal div tags i siderne bruges til ? kun farve ?

Bruger #16284 @ 04.04.12 22:10

det gav lidt mening ... men hvad skal div tags i siderne bruges til ? kun farve ?

Ved ikke om man kan få et lille indblik i hvordan det skal se ud med dette billede:

Link

Det der ligger inden for det sorte skal svare til midten på 1000px. De div tags der er i siderne skal bare bruges til farve og intet andet. Var lige den mest logiske og nemme måde jeg kunne se hvordan det skulle laves på.

Indlæg senest redigeret d. 04.04.2012 22:11 af Bruger #16284

Bruger #17081 @ 04.04.12 22:16

1.258

men så ville jeg måske omskrive det helt: Det kan gøres på flere måder. Du kan ligge farven på body elementet som et billed, hvilket nok er det nemmeste, men ikke mest dynamiske.

Du kan pakke hver enkelt sektion ind i et wrapper element, som indholder baggrundsfarven. Det er mere dynamisk, men også meget mere markup.

Bruger #16284 @ 04.04.12 22:19

men så ville jeg måske omskrive det helt: Det kan gøres på flere måder. Du kan ligge farven på body elementet som et billed, hvilket nok er det nemmeste, men ikke mest dynamiske.

Du kan pakke hver enkelt sektion ind i et wrapper element, som indholder baggrundsfarven. Det er mere dynamisk, men også meget mere markup.

Er det muligt at du måske vil lave et eksempel?

Som sagt så har jeg ikke voldsom meget erfaring med div tags, og da jeg førhen brugte frontpage til at lave layouts i har jeg heller ikke den største erfaring indenfor css.