Notifikationer

Markér alle som læst Log ud

nyhuus Nybegynder

31. marts 2005 - 16:29 Der er 24 kommentarer og
1 løsning

Centere div med css

Jeg skal have centeret 4 divs. de er plaseret på siden med css:

fx
---
#content {
position: absolute;
top: 100px;
left: 100px;
height: 350px;
width: 700px;
overflow: auto;
border: 0px solid black;
padding: 3px;
background-color: #88F;
color: black;
}
---

sådan er de alle 4 plaseret. men jeg tænkte på om man måske kan smide dem alle sammen i en div og ccentere den., også om css tager afstanden fra den div? for det der ikke særlig genialt ud med en side på 900*450 venstre centeret.!

på forhånd tak for hjælpen

Synes godt om

likeaprayer Nybegynder

31. marts 2005 - 19:01 #1

brug position relative
eks.

<div style="position:absolute;top:20px;left:20px;border:1px solid #000000;">

<div style="position:relative;top:10px;left:10px;border:1px solid #000000;">
Hej med dig
</div>

</div>

Synes godt om

nyhuus Nybegynder

31. marts 2005 - 21:18 #2

Kan du fortælle mig hvad jeg skal lave for og få mit projekt centeret

#banner {
position: absolute;
left: 0px;
top: 0px;
height: 100px;
width: 900px;
margin: 0px;
background-color: #499BE8;
color: white;
border: 1px solid black;
}
#menu {
position: absolute;
top: 99px;
left: 0px;
background-color: transparent;
color: black;
height: 351px;
width: 100;
text-align: center;
}
#content {
position: absolute;
top: 96px;
left: 98px;
height: 350px;
width: 700px;
overflow: auto;
border: 0px solid black;
padding: 3px;
background-color: transparent;
color: black;
margin: 0;
}
#right {
position: absolute;
top: 99px;
left: 800px;
height: 351px;
width: 100px;
background-color: #50A2EE;
color: black;
text-align: center;
}

for det vil slet ikke virke hvis jeg sætter det der ind i steder for, så står det helt forkert

Synes godt om

Slettet bruger

31. marts 2005 - 21:48 #3

Jeg er ikke sikker på at jeg helt forstår dit spm. - men formoder de 4 div er forskellige men skal centreres på siden
Så kan du bruge <div class="wrapper"> som du starter med efter <body>
så kan du lave denne i din CSS -
.wrapper
{
width: 700px;
margin:0 auto;
}

Er det forstået rigtigt

Synes godt om

Slettet bruger

31. marts 2005 - 21:49 #4

Nå.. da...da- jeg fik vist ikke opdateret inden jeg sendte svar

Synes godt om

nyhuus Nybegynder

31. marts 2005 - 21:50 #5

det tror jeg ikke. alså jeg har en side helt uden nogen tabeller. kun divs. der har jeg en header, en menu, en content, og en right.

-------|Header|-------
|menu||content||right|

alså det oven over skal forstås på den måde det er sat op på

Synes godt om

nyhuus Nybegynder

31. marts 2005 - 21:51 #6

alså de skal ind på midten af min side for den er 900*450 ca den ser dumt ud når den er venstre centeret

älså

.............................-------|Header|-------
.............................|menu||content||right|

sådan så er det i midten, hvis i forstår det bedre nu.

Synes godt om

Slettet bruger

31. marts 2005 - 21:52 #7

Det er lige det layout jeg selv bruger, bruger du Firefox kan du selv hende min kode på www.visithaven.dk

eller skal jeg lave en code til dig ?

Synes godt om

nyhuus Nybegynder

31. marts 2005 - 22:12 #8

jeg bruger IE

Synes godt om

Slettet bruger

31. marts 2005 - 22:21 #9

Har lige prøvet at hente ned med IE - det går fint..

Har du ikke prøvet det før så:

klik wwww.visithaven.dk -

gå derefter i FILER og GEM SOM

Du får hele koden, så kan du plukke det du skal bruge.

Prøv lige og vend så tilbage hvis du ikke kan finde ud af det

Synes godt om

webrex Nybegynder

31. marts 2005 - 22:21 #10

>nyhuusdk: Det smarteste i dit tilfælde vil efter min overbevisning være, hvis du lagde dine fire div's (header, menu, content & rigt) ind i Een div. Denne div kan du så centrere, ved at sætte text-align: center; i body-tagget + lave margin: auto; i denne ene div. Håber det hjalp. Mvh. Webrex

Synes godt om

Slettet bruger

31. marts 2005 - 22:21 #11

www.visithaven.dk

Synes godt om

nyhuus Nybegynder

31. marts 2005 - 22:23 #12

men jeg har stadig ik fået løst mit problem :S

Synes godt om

nyhuus Nybegynder

31. marts 2005 - 22:25 #13

webrex det prøver jeg lige

Synes godt om

nyhuus Nybegynder

31. marts 2005 - 22:44 #14

hmm har stadig ik fået løst mit problem :S problemet er at lyge gyldigt hvad du gør kan man ikke flytte på dem når man bruger absolute, ik hvad jeg ved af, men har jeg ikek det på står de fuldstændig underlig på skærmen :S

Synes godt om

webrex Nybegynder

31. marts 2005 - 22:52 #15

Nej, den ene div jeg taler om skal være relativt positioneret! - Lige som alle de andre divs! Gør det så virker det. Herefter bruger du float: left; dine fire divs!

Synes godt om

webrex Nybegynder

31. marts 2005 - 23:04 #16

I dine divs indsætter du float: left; - (altså du skal ikke indsætte float: left; i den div som omkrandser de 4!

Synes godt om

nyhuus Nybegynder

01. april 2005 - 13:06 #17

okay jeg er lidt forviret men jeg prøver ;)

Synes godt om

nyhuus Nybegynder

01. april 2005 - 13:13 #18

Det virker stadig ikke :S

Synes godt om

webrex Nybegynder

01. april 2005 - 15:38 #19

Ok, her har jeg kodet en til dig - den virker, her bruger du ikke float. Kopier nedenstående ind i et nyt Notesblok-dokument!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

</head>
<body style="margin: 0px; padding: 0px; text-align: center;">

<div style="position: relative; height: auto; width: 900px; margin: 0px auto 0px auto;">

<div style="position: relative; height: 150px; width: 900px; border: 1px solid yellow;">
</div>

<div style="position: relative; height: auto; width: 900px; margin: 0px auto 0px auto; border: 1px solid red;" text-align: center;>

<table style="position: relative; margin: 0px auto 0px auto;">
<tr>
<td>
<div style="position: relative; border: 1px solid black; height: auto;">MENUEN - MENUEN - MENUEN
</div>
</td>
<td>
<div style="position: relative; border: 1px solid black; height: auto;">CONTENT - CONTENT - CONTENT
</div>
</td>
<td>
<div style="position: relative; border: 1px solid black; height: auto;">RIGHT - RIGHT - RIGHT
</div>
</td>
</tr>
</table>
</div>
</div>

</body>
</html>

Synes godt om

olebole Juniormester

01. april 2005 - 17:26 #20

<ole>

Hvis det er meningen, at de tre kollonner skal være lige høje, skal de opføre sig præcis som en tabel - og så er det jo lidt fjollet at kæmpe for at få andre elementer til at opføre sig som en sådan.
Tabellen er langt, langt bedre end sit (løse) rygte og giver ofte betydeligt bedre kode end 'tabel-o-fobiske' forsøg på at undgå dem ;o)

/mvh
</bole>

Synes godt om

webrex Nybegynder

01. april 2005 - 18:34 #21

>Olebole, Selv i overstående eksempel er det smart at bruge div, idet man må gå ud fra, at CONTENT-delen bliver meget længere end en MENU'en. Og stadig gør det ikke noget, hvis CONTENT-delen ikke strækker sig længere end MENU'en. (Tabellen er stadig nyttig i visse tilfælde, men med brug af divs undgår du ofte anstrengelsen med at definere ikke særlig betydningsfulde elementer på dit site.

Synes godt om

nyhuus Nybegynder

01. april 2005 - 18:53 #22

webrex jeg bruger css ;) og olebole contenten kan ændre højde men ikke brede, mit eneste problem er jeg ik kan få dem centeret. men jeg har løst problemet selv. godtnok ik men centere, men jeg har gjort den 1000px bred og så har jeg tabet den 10 px ud fra kanten s¨å nu ser det okay ud, www.webdesignz.dk/comm/ ;)

så lukket her fra.

Synes godt om

webrex Nybegynder

01. april 2005 - 19:09 #23

Ok, men jeg ville nu bruge mit forslag - så sikrer du, at det også ser ordentligt ud i andre browsere - og andre opløsninger. Lige nu ser det helt forkert ud i Mozilla, og i den mest almindelige opløsning 1024x768 ser du ikke hele side i bredden uden at scrolle - hvilket ikke holder.

Synes godt om

Slettet bruger

01. april 2005 - 21:54 #24

Ja jeg gi'r webrex ret, der er 56 fejl ved validering,og når du skriver på http://www.webdesignz.dk/comm/ at du vil citat: "Også er dette et projekt hvor jeg vil teste mine evner som php coder, ved og se om jeg kan code mit eget community. "

Vil jeg foreslå dig at lære HTML og CSS før du går videre med dit project.

Synes godt om

nyhuus Nybegynder

01. april 2005 - 23:25 #25

jeg kan saktens code html, men, jeg kan iuk huske om jeg skrver det der inde, så er det første gang jeg nogen sinde har brugt css og divs, har jeg aldrig intreseret mig før... og jeg vil hellre lære php for det er svære, det andet kommer ;) og siden virker som den er selv om der er vadilerings fejl ;) og "Også er dette et projekt hvor jeg vil teste mine evner som php coder" betyder ik jeg vil teste mig som html coder men php coder ;) alså hvad jeg kan code i php som login forum pm system og div ting man har i et community

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS