/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
CSS: Positionering af to bokse
Fra : smisk


Dato : 27-04-10 21:45

Hej alle,

Jeg har et problem med en side, jeg forsøger at sætte op i CSS.
Da jeg er nybegynder, tror jeg den bedste måde at præsentere
problemet på, er at vise koden og designet.

Grundlæggende, så ser designet sådan ud: pygmae.dk/test/, hvor
jeg gerne vil have en box mere i venstre side, hvor jeg kan lave
en menu, men når jeg indsætter en ny box, så skubber den røde box
sig: pygmae.dk/test/index1.html

Det er de to bokse #indhold og #menu, der er tale om.

CSS-koden ser sådan ud:

@charset "UTF-8";
/* CSS Document */

body {
   
   margin-top: 40px;
   margin-bottom: 50px;
   margin-left: 50px;
   margin-right: 50px;
   
   background: #000;
}

#body-baggrund {
   background: #000;
   
   margin-left: 100px;
   margin-right: 100px;
   margin-top: 20x:
   margin-bottom: 20px;
   
   padding-top: 15px;
   padding-bottom: 15px;
   padding-left: 15px;
   padding-right: 15px;
   
   border: 1px solid black;
   
   height: 500px;
   width: 800px;
      
}
   
#baggrund {
   background-image: url(baggrund.png);
   
   margin-left: auto;
   margin-right: auto;
   margin-top: 100px:
   margin-bottom: 80px;
   
   width: 640px;
   height: 480px;
   
}

#indhold {
   width: 385px;
   height: 400px;
   
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   padding-right: 10px;
   
   background: #C30;
   border: 1px solid white;
   
   opacity: 0.6;
   
   position: relative;
   top: 40px;
   left: 215px;
   
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: white;
   
   z-index: 10;
}

h1 {
   font-size: 16px;
   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
   letter-spacing: 6px;
   
}

#menu {
   background-color:#000;
   
   width: 100px;
   height: 150px;
   
   padding-top: 1px;
   padding-bottom: 1px;
   padding-left: 1px;
   padding-right: 1px;
   
   background:#FFF;
   
   border: 1px solid white;
   
   opacity: 0.6;
   
   position: relative;
   top: 180px;
   left: 30px;
   
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 12px;
   
   z-index: 9;
}
   


Kan I give mig en mulig løsning? :)


På forhånd mange tak.


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

 
 
Birger Sørensen (28-04-2010)
Kommentar
Fra : Birger Sørensen


Dato : 28-04-10 00:59

Følgende er skrevet af smisk:
> Hej alle,
>
> Jeg har et problem med en side, jeg forsøger at sætte op i CSS.
> Da jeg er nybegynder, tror jeg den bedste måde at præsentere
> problemet på, er at vise koden og designet.
>
> Grundlæggende, så ser designet sådan ud: pygmae.dk/test/, hvor
> jeg gerne vil have en box mere i venstre side, hvor jeg kan lave
> en menu, men når jeg indsætter en ny box, så skubber den røde box
> sig: pygmae.dk/test/index1.html
>
> Det er de to bokse #indhold og #menu, der er tale om.
>
> CSS-koden ser sådan ud:
>
> @charset "UTF-8";
> /* CSS Document */
>
> body {
>    
>    margin-top: 40px;
>    margin-bottom: 50px;
>    margin-left: 50px;
>    margin-right: 50px;
>    
>    background: #000;
> }
>
> #body-baggrund {
>    background: #000;
>    
>    margin-left: 100px;
>    margin-right: 100px;
>    margin-top: 20x:
>    margin-bottom: 20px;
>    
>    padding-top: 15px;
>    padding-bottom: 15px;
>    padding-left: 15px;
>    padding-right: 15px;
>    
>    border: 1px solid black;
>    
>    height: 500px;
>    width: 800px;
>       
> }
>    
> #baggrund {
>    background-image: url(baggrund.png);
>    
>    margin-left: auto;
>    margin-right: auto;
>    margin-top: 100px:
>    margin-bottom: 80px;
>    
>    width: 640px;
>    height: 480px;
>    
> }
>
> #indhold {
>    width: 385px;
>    height: 400px;
>    
>    padding-top: 10px;
>    padding-bottom: 10px;
>    padding-left: 10px;
>    padding-right: 10px;
>    
>    background: #C30;
>    border: 1px solid white;
>    
>    opacity: 0.6;
>    
>    position: relative;
>    top: 40px;
>    left: 215px;
>    
>    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
>    font-size: 12px;
>    color: white;
>    
>    z-index: 10;
> }
>
> h1 {
>    font-size: 16px;
>    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
>    letter-spacing: 6px;
>    
> }
>
> #menu {
>    background-color:#000;
>    
>    width: 100px;
>    height: 150px;
>    
>    padding-top: 1px;
>    padding-bottom: 1px;
>    padding-left: 1px;
>    padding-right: 1px;
>    
>    background:#FFF;
>    
>    border: 1px solid white;
>    
>    opacity: 0.6;
>    
>    position: relative;
>    top: 180px;
>    left: 30px;
>    
>    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
>    font-size: 12px;
>    
>    z-index: 9;
> }
>    
>
>
> Kan I give mig en mulig løsning? :)
>
>
> På forhånd mange tak.

Set
position : relative;
i din #background
og
position : absolute;
i #indhold og #menu

.... og ret valideringsfejlene - også dem der skyldes at koden er HTML
men doctype XHTML, og også fejlene i CSS.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Søg
Reklame
Statistik
Spørgsmål : 177577
Tips : 31968
Nyheder : 719565
Indlæg : 6409068
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste