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
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
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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