Søg
Avatar billede TiHs Nybegynder
18. april 2007 - 20:20 Der er 14 kommentarer og
1 løsning

Centrere en div id i css og lave flere containers inde i denne

Hej Eksperter

Jeg har følgende div:

css:
#home {
    top: 100px;
    border : solid 4px #F1DB86;
    padding : 5px;
    height: 350px;
    width: 670px;
    background-image: url(home.jpg);
}

body:
<div id="home">
</div>

spørgsmål 1:
Hvordan centrerer jeg denne div på en side ?

Spørgsmål 2:
Hvordan kan jeg smide container's ind i denne div og placere
dem lige hvor jeg vil inden for denne divs borders ?
Avatar billede stenger Nybegynder
18. april 2007 - 21:30 #1
Indsæt:
position:absolute;
margin-left:auto;
margin-rigt:auto;

i din #home. Så skulle den gerne blive centreret i Firefox.

IE skal måske laves lidt anderledes.

F.eks.

#home {
    position:absolute;
    top: 100px;
    left:50%;
    margin-left:-335px; */ Halvdelen af dit lags width /*
    border : solid 4px #F1DB86;
    padding : 5px;
    height: 350px;
    width: 670px;
    background-image: url(home.jpg);

I øvrigt kan man med fordel køre med to forskellige stylesheets... ét til Firefox og et til IE. Det gøres ved først at style hele sit site efter en browser (eksempelvis Firefox). Derefter kopierer man dette stylesheet og renamer det, til eksempelvis IE-override.css

Dette nye stylesheet retter man så til, sådan at IE kommer til at se rigtigt ud.

Så indsætter man i sit html-dokuments <head>-afsnit følgende:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/IE-override.css" />
<![endif]-->

På denne måde henter din HTML-side et stylesheet, hvis brugeren benytter Firefox og lignende og et helt andet, hvis IE benyttes.



}
Avatar billede stenger Nybegynder
18. april 2007 - 21:33 #2
Og mht. div´s inden i divs...


body:
<div id="home">

<div id="eksempel"></div>
</div id="test"></div>

</div>

Du skal bare lade den "omklamrende" div være åben og, som du kan se af ovenstående kode, lukke den til sidst.

Så kan du jo evt. bruge position:relative; på lagene inde i #home. På den måde vil lagende komme i din rækkefølge du angiver dem i, i din HTML-kode.
Avatar billede TiHs Nybegynder
18. april 2007 - 21:48 #3
Har fået #home centreret nu med:

body {
    text-align: center;
}

og

#home {
    top: 100px;
    border : solid 4px #F1DB86;
    padding : 5px;
    height: 350px;
    width: 670px;
    background-image: url(home.jpg);
    margin: 0 auto;
    text-align: left; */så den nulstiller centrering i selve denne div
}

Når jeg så vil smide to div ind i min omklamrende div med:

<div id="home">
<div id="logo"><p class="style3">LUXundPUNK</p></div>
<div id="maerker"></div>
</div>

Så ødelægger det bare min omklamrende div og gør den større
så nr2 div inde i hoved-div'en bliver skubbet under den 1. div ...

håber du forstår .. jeg kan altså ikke placere de to indvendige divs
hvor jeg vil med den måde du skrev. Må mangle noget kode ....
Avatar billede TiHs Nybegynder
18. april 2007 - 21:48 #4
Her er min style:

<style type="text/css">
#home {
    top: 100px;
    border : solid 4px #F1DB86;
    padding : 5px;
    height: 350px;
    width: 670px;
    background-image: url(home.jpg);
    margin: 0 auto;
    text-align: left;
}

#logo {
    border : solid 2px #F1DB86;
    height: 25px;
    width: 250px;
    margin-left: 20px;
    margin-top: 200px;
    padding : 0px;
}

#maerker {
    border : solid 2px #F1DB86;
    height: 300px;
    width: 300px;
    margin-left: 350px;
    margin-top: 10px;
    padding : 0px;
}

body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    color: #F1DB86;
}

body {
    background-color: #000000;
    margin-top: 100px;
    height: 100%;
    text-align: center;
}



a:link {
    color: #F1DB86;
}
.style3 {
    font-size: 36px;
    font-weight: bold;
}
</style>


Her er min html kode:

<body>
<div id="home">
<div id="logo"><p class="style3">LUXundPUNK</p></div>
<div id="maerker"></div>
</div>

</body>
Avatar billede stenger Nybegynder
18. april 2007 - 21:50 #5
Ved det ikke lige uden at se noget kode :)

Du kan evt. prøve med float:left; på et af dine divs inde i den omklamrende div. Ved ikke om det virker...
Avatar billede TiHs Nybegynder
18. april 2007 - 21:51 #6
iøvrigt smart med to stylesheets .. vil jeg gøre når jeg har fået dette til at virke ... :o)
Avatar billede stenger Nybegynder
18. april 2007 - 21:52 #7
Prøv at smide position:absolute; på dine lag indeni det omklamrende lag. Så bestemmer du specifikt hvor laget skal være, ved at angive en top:xx px; og left:xx px;
Avatar billede TiHs Nybegynder
18. april 2007 - 22:06 #8
Hehe .. næsten ... det skulle ikke være float med position: relative; ...
Hvis jeg bruger absolute bliver placeringen på selve siden og ikke inde i
mit div ... men nu virker det :O)
Avatar billede stenger Nybegynder
18. april 2007 - 22:20 #9
Hmm... forstår jeg ikke helt, det med at position:absolute; styrer placering på selve siden. Det burde det ikke gøre, ikke så længe div´en er inde i en anden. Men er som sagt svært at svare på, uden at kunne se selve siden :)
Avatar billede TiHs Nybegynder
18. april 2007 - 22:22 #10
Spørg mig ikke ... så længe det virker så jeg :O)) ..

Tak for hjælpen
Avatar billede TiHs Nybegynder
18. april 2007 - 22:22 #11
Siden ligger i test lige nu på min egen og hedder www.timhs.dk ... der kan du se udkastet
Avatar billede stenger Nybegynder
18. april 2007 - 22:36 #12
Jeg kunne forestille mig det har at gøre med din doctype.

Prøv med

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Det er den "nyeste". Er dog ikke så meget inde i det, men prøv evt. at gå på wikipedia omkring doctypes. Hvis du vil have en forklaring, altså... :)
Avatar billede roenving Novice
18. april 2007 - 23:47 #13
Et absolut positioneret element skal placere sig i forhold til det nærmest omkransende positionerede element ...

-- hvis ingen andre omkransende elementer er positioneret, skal det forholde sig til dokument-elementet ...

-- så løsningen med at positionere relativt er vel helt ok !-)
Avatar billede TiHs Nybegynder
19. april 2007 - 08:44 #14
Det virker også fint nu ja.
Men når jeg smider den 3. ind i selve den omklamrende div gør den bare selve
den omklamrende div større og det går ikke. Kan jeg får den til at blive låst
fast i størrelsen ?

Det står fint med:

#home { */den omklamrende div /*
    border : solid 7px #F1DB86;
    padding : 0px;
    height: 350px;
    width: 670px;
    position: relative;
    background-image: url(home.jpg);
    margin: 0 auto;
    text-align: left;
}

#logo {
    border : solid 2px #F1DB86;
    height: 25px;
    width: 250px;
    position: relative;
    top: 200px;
    left: 50px;
    padding : 0px;
}

#maerker {
    border : solid 2px #F1DB86;
    height: 320px;
    width: 300px;
    position: relative;
    top: -10px;
    left: 360px;
    padding : 0px;
}

html:

<div id="home">
<div id="logo">
  <p class="style3">LUXundPUNK</p></div>
<div id="maerker"></div>
</div>

Men når jeg så gør følgende:

#home {
    border : solid 7px #F1DB86;
    padding : 0px;
    height: 350px;
    width: 670px;
    position: relative;
    background-image: url(home.jpg);
    margin: 0 auto;
    text-align: left;
}

#logo {
    border : solid 2px #F1DB86;
    height: 25px;
    width: 250px;
    position: relative;
    top: 200px;
    left: 50px;
    padding : 0px;
}

#maerker {
    border : solid 2px #F1DB86;
    height: 320px;
    width: 300px;
    position: relative;
    top: -10px;
    left: 360px;
    padding : 0px;
}

#logo { */den nye div inde i den omklamrende div /*
    border : solid 2px #F1DB86;
    height: 40px;
    width: 300px;
    position: relative;
    top: 225px;
    left: 40px;
    padding : 0px;
}

html:

<div id="home">
<div id="logo">
  <p class="style3">LUXundPUNK</p></div>
<div id="maerker"></div>
<div id="adr"></div>
</div>

så skubber den det hele ???
Avatar billede TiHs Nybegynder
19. april 2007 - 08:47 #15
og der STRÅR #adr og ikke logo som jeg lige kom til at skrive :o)

Vil gerne kunne smide så mange div ind i den omklamrende som der er
plads til. Det er somom den ligger højderne sammen på alle de div der
er i den, og så automatisk gør den større .... ??
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 15:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
I går 20:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
20/0714:16 Smartwatch med faldalarm og sos Af hkv i Fitness & Smartwatches
20/0711:23 System til bordreservation Af Strawberry i PHP
White papers
Flere white papers »