Avatar billede nugga Nybegynder
06. oktober 2009 - 17:21 Der er 9 kommentarer og
1 løsning

Main div/placering af rammer i rammer.

Hej vis jeg gerne vil lave en ramme, som jeg kan placere rammer i.
Hvad skal der så gøres.
fx.
#MainDiv1 {
    position:absolute;
    left:150px;
    top:29px;
    width:300px;
    height:171px;
    z-index:1;
}

der i vil jeg så gerne ligge en anden ramme.
#Div1 {
    position:absolute;
    left:10px;
    top:10px;
    width:191px;
    height:118px;
    z-index:2;
}

Så skal Div et placeres i MainDiv, så dens position bliver left 10px fra MainDiv's side, og 10px fra MainDiv's side.

Det ville være skide smart. Håber i kan hjælpe
Avatar billede webweaver Praktikant
06. oktober 2009 - 17:43 #1
Altså du kan jo sagtens helt normalt lave en div med border på.
Inde i den laver du en div mere og med border, og så kan du enten have margin/padding til at bestemme afstanden fra første div eller du kan positionere den i CSS. Dog ikke med <bsolute som du prøver, det vil ikke virke. Du skal istedet bruge relative.

position:relative;
left: 10px;
top: 10px

...
Avatar billede nugga Nybegynder
06. oktober 2009 - 18:34 #2
ja men hvordan gør jeg det så.
kan du ikke forklare?
Avatar billede webweaver Praktikant
06. oktober 2009 - 18:55 #3
<div id="mainDiv1">
 
  <div id="Div1">

  </div>

</div>

Du har jo din CSS kode. Du erstatter position:absolute med det jeg skrev. Så skal du have en linie tilføjet i din CSS;

border: 1px solid black;

Den vil give en border på div elementet hele vejen rundt. 1px tyk og i sort farve. Det kan self. ændres efter hvad der ønskes.

#Div1 {
    position:relative;
    left:10px;
    top:10px;
    width:191px;
    height:118px;
    z-index:2;
    border: 1px solid black;
}

Tilføj samme linie til den anden div, hvis der også skal være border på den.
Avatar billede nugga Nybegynder
06. oktober 2009 - 19:20 #4
jeg forstår det ikke, ellers misforstår du midt spørgsmål.
Lad mig prøve at forklare hvad jeg vil.
vis du kigger på den her side(eksperten), så kan du se at selve siden er midter centreret, og rundt om den, er der bare grå baggrund.
Jeg ville efterligne den process, og placere en ramme i midten, hvor efter jeg ville bygge de andre rammer op inde i den.

Jeg kan heller ikke se hvorfor man skal lave en border?
Avatar billede webweaver Praktikant
06. oktober 2009 - 20:30 #5
Du snakkede om ramme, så jeg troede du mente border.
Så fjerner du self. bare border, hvis det ikke skal være synligt.

Jamen hvis du vil have en div som er centreret som her på Eksperten, så laves det således;

#mainDiv {
  margin: auto;
  padding: 0px;
  width: 500px;
  height: 500px;
  background-color: #ffffff;
}

Den vil lave en div på midten af siden. Ihvertfald horisontalt.
Vertikalt ændrer du selv hvor på siden den skal være.

Så kan du give dit body-element den baggrundsfarve du ønsker, så det bliver den farve uden omkring div elementet.
Avatar billede nugga Nybegynder
06. oktober 2009 - 22:35 #6
nemlig.
Så er der bare det med at sætte div ind i en anden div.
For at forklare det lidt lettere så vil jeg tegne det, selvom de virker lamt.

Som du kan se så ville jeg kunne bevæge MainDiv rundt på skærmen. Ligesom på billedet, og Div1 beholder sin placering i MainDiv
http://i37.tinypic.com/2qsoxz5.gif
Avatar billede nugga Nybegynder
07. oktober 2009 - 11:35 #7
nogen der forstår?
Avatar billede webweaver Praktikant
07. oktober 2009 - 11:47 #8
Jamen så er vi væk fra centrering på midten af siden jo.
Så kan det ikke bruges, det jeg skrev i forgående indlæg.

Vi er tilbage til det første du har arbejdet med.
Nu har jeg lavet det til dig, så du kan se hvordan det skal gøres.

Kig i "vis kildekode" for at tage koden der. Så kan du se hvordan det er sat op :)

www.lasse-jensen.dk/eksperten/nugga.htm
Avatar billede nugga Nybegynder
07. oktober 2009 - 16:49 #9
mange tak lige det jeg ledte efter.
Avatar billede webweaver Praktikant
07. oktober 2009 - 18:14 #10
Det var så lidt :) Og tak for point.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester