CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

spyrodrag Nybegynder

07. maj 2007 - 16:59 Der er 5 kommentarer og
2 løsninger

Begynder Div spørgsmål

Hej Eksperter.

Jeg skal have lavet følgende:
- Siden skal have en bredde på 760px
- Der skal placeres små billeder i kanterne, for at få hjørnerne til at se afrundede ud.
- Siden skal centreres.
- pageTop skal placeres over pageContent.

<?xml version="1.0" encoding="iso-8859-1">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//DK"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/css/default.css" />
</head>
<body>
<div id="topNode">
<div id="pageTop">
<img class="topLeft" src="top_left.gif" />
<img class="topRight" src="top_right.gif" />
<img class="logo" src="logo.jpg" />
</div>
<div id="pageContent">
<img class="bottomLeft" src="/media/30/bottom_left.gif" />
<img class="bottomRight" src="/media/35/bottom_right.gif" />
</div>
</div>
</body>
</html>

Synes godt om

gamborg Nybegynder

07. maj 2007 - 21:01 #1

html:
<div id="pageHolder">
<div id="pageCenter">
<div id="topNode">
<div id="pageTop">
<img class="topLeft" src="top_left.gif" />
<img class="topRight" src="top_right.gif" />
<img class="logo" src="logo.jpg" />
</div>
<div id="pageContent">
<img class="bottomLeft" src="/media/30/bottom_left.gif" />
<img class="bottomRight" src="/media/35/bottom_right.gif" />
</div>
</div>
</div>
</div>

css:
#pageHolder
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}

#pageHolder
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}

evt center istedet for left

Synes godt om

gamborg Nybegynder

07. maj 2007 - 21:03 #2

skulle havde været:
css:
#pageCenter
{
position: absolute;
left: 50%;
width: 760px;
}

Synes godt om

mclemens Nybegynder

07. maj 2007 - 22:14 #3

html:
<?xml version="1.0" encoding="iso-8859-1">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//DK"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body><div id="main">
<div id="topNode">
<div id="pageTop">
<img class="topLeft" src="top_left.gif" />
<img class="topRight" src="top_right.gif" />
<img class="logo" src="logo.jpg" />
</div>
<div id="pageContent">

Hej<br />Hej<br />Hej<br />Hej<br />Hej<br />Hej<br />Hej<br />Hej

<img class="bottomLeft" src="/media/30/bottom_left.gif" />
<img class="bottomRight" src="/media/35/bottom_right.gif" />
</div>
</div>
</div></body>
</html>

html,body {margin:0;padding:0;}

#main {margin:0 auto;width:760px;position:relative;
background:#aaa; /*slet denne linje senere */
padding: 50px 0 50px 0px;
/* Padding top right bottom left - 50 px i bottom og top af hensyn til de img's - det skal nok justeres til eller måske fjernes afhængig af behovet / designet. Eller måske skal der padding left og right til også - hvis du f.eks. siger padding: 50px 10px 50px 10px; kan det også skrives som padding: 50px 10px;. Hvis du kaster padding på i siderne skal du reducere width tilsvarende. Med 10 px padding i hver side skal width så være 740px for at boxen stadig kun er 760px bred. */
}

.topLeft {position:absolute;top:0;left:0;}
.topRight {position:absolute;top:0;right:0;}
.bottomLeft {position:absolute;bottom:0;left:0;}
.bottomRight {position:absolute;bottom:0;right:0;}

Nu da du skriver xhtml anbefaler jeg et kig på:
http://www.eksperten.dk/artikler/537
http://www.eksperten.dk/artikler/538

Og kig på denne for levering af siden som xhtml:
http://www.eksperten.dk/spm/719030#rid6329210

Synes godt om

mclemens Nybegynder

07. maj 2007 - 22:18 #4

Gamborg, vedrørende din positionering via absolute (07/05-2007 21:03:13), så gør det at designet lettere kikser ved mindre skærmvindue - og så skal du have halv elements width i negativ left margin med andre ord:

#pageCenter
{
position: absolute;
left: 50%;
width: 760px;
margin-left:380px;
}

... Jeg anbefaler dog at den kortere uden brug af absolute medmindre
designet gør at det andet er forudsat, men det er også lidt en smagssag.

Synes godt om

mclemens Nybegynder

07. maj 2007 - 22:19 #5

Ups

#pageCenter
{
position: absolute;
left: 50%;
width: 760px;
margin-left:-380px;
}

Synes godt om

mclemens Nybegynder

07. maj 2007 - 22:23 #6

Tak for point :o)

Spyrodrag, glemte at nævne xml deklarationen får
IE til at gå i quirks og det vil give grå hår i
visse situationer, så en betingelse af xml deklarationen
som i linket http://www.eksperten.dk/spm/719030#rid6329210
anbefales såfremt du vælger at køre videre med xhtml ;)

Og så synes jeg at det DK ser lidt skævt ud i din DTD prøv evt. en af
dem inde på http://www.w3.org/QA/2002/04/valid-dtd-list.html istedet.

F.eks.:

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

Synes godt om

spyrodrag Nybegynder

08. maj 2007 - 09:09 #7

Smukt, tak for yderligere hjælp :-)

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
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

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

12:00

Ugen i tech: El-kolos kan fragte syv personer over 620 kilometer / Sony er klar med ny kamera-konge: Alpha 1 mk II

22/11

Test: Den snusfornuftige Volkswagen ID.3 blevet til lidt af el-bisse

22/11

Vil købe tele-løsninger til det offentlige for 370 millioner kroner

22/11

Nørgaard: Det er de neuro-divergente originalers tid

22/11

Sker helt åbenlyst: Ansatte i den kinesiske stat sælger borgernes personlige data på hemmelige internet-fora

22/11

Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"

22/11

Derfor bliver den amerikanske tvangs-opdeling af Google nok ikke til noget

22/11

Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen

22/11

Vi har fundet 10 ledige it-stillinger, som du kan søge netop nu

22/11

Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet

22/11

Kombit gør klar til at købe it-konsulenter for 140 millioner kroner - her er planen

Vis flere artikler

IT-JOB

Statens IT

Leder til drift og udvikling af Microsoft 365

KMD A/S

Senior Software Application Architect

Cognizant Technology Solutions Denmark ApS

Sr. Test Analyst

IST ApS

Head of Cloud Services

Globus Data ApS

Imødekommende og serviceminded kundeservicemedarbejder/it-supporter

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 18:09	Billedoverførsel Af Laurids i iOS, iPhone & iPad
I dag 13:30	Hvordan ændres UniFi Dream Machine UDM til switch mode Af Kasper4450 i Internetforbindelser
I dag 13:01	Film går i stå midt i afspilningen Af ole falsted i Musik & videoafspillere
I dag 11:40	Fjerne mappe i stifinder Af Peter Olsen i Andet software
I dag 11:27	renteberegning Af Pil i Excel