Notifikationer

Markér alle som læst Log ud

photop Nybegynder

20. april 2006 - 00:59 Der er 27 kommentarer og
1 løsning

Crossbrowser-problem med placering af div's

Bruger css til at placere følgende div-elementer på siden.

<div id="main">

<div id="header">
//bredde på 600px
//60px venstre margen, ingen borders, ingen padding
</div>

<div id="menu">
//bredde på 150px
//60px venstre margen, ingen borders, ingen padding
</div>

<div id="content">
//bredde på 450px
//ingen margen, ingen borders, ingen padding
</div>

</div>

Hele siden er indeholdt i main-div'en der udelukkende bruges til at centrere siden horisontalt i browservinduet.

---

I Firefox får jeg det forventede resultat.
Headerens venstre side flugter med menuens venstre side og headeren har samme bredde som menu og content tilsammen (dvs. headerens højre side flugter også med contents højre side)

I IE er indrykningen fra venstre væsentlig mere end de 60px jeg har sat den til i margenen. Headeren er rykket en smule (ca. 20px) længere ind end menuen og stikker derfor også tilsvarende længere ud til højre end content.

Jeg har selvfølgelig sat doctype-erklæringen, så hvad kan der være galt?!?

Jeg har sat doctype - så det burde ikke være der den ligger!

Synes godt om

photop Nybegynder

20. april 2006 - 01:07 #1

Fik vist lige gentaget mig selv til sidst der :D

Problemet kan tages i øjensyn på www.mojn.eu

Synes godt om

mclemens Nybegynder

20. april 2006 - 01:30 #2

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN" "DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="da"><head><title>M og J Nørgaard</title>

<meta name="Generator" content="Stone's WebWriter 4">
<link rel="stylesheet" href="123_files/style.css" type="text/css"></head><body>
<div id="main">
<div>
<img src="123_files/Banner.jpg" alt="mojn-logo" height="270" width="820">
</div>

<div id="inner">

<div id="header">
<p>Home</p>
</div>

<div id="menu">
<table>
<tbody><tr><th>Menu:</th></tr>
<tr><td><a href="">Home</a></td></tr>
<tr><td><a href="">Guestbook</a></td></tr>
<tr><td><a href="">Links</a></td></tr>
<tr><td><a href="">Contact</a></td></tr>
<tr><td></td></tr>
<tr><th>User:</th></tr>
<tr><td><a href="">Gallery</a></td></tr>
<tr><td><a href="">J-section</a></td></tr>
<tr><td><a href="">M-section</a></td></tr>
</tbody></table>
</div>
<div id="content">
<p>Personlig hjemmeside for Marianne og Jørn Nørgaard.
<br>Registreret 13.04.2006 og stadig "under construction"</p>
<p><a href="http://www.mojn.eu/Privat/index.php">Login</a></p>
</div>
</div>
</div>
</body></html>

Synes godt om

mclemens Nybegynder

20. april 2006 - 01:32 #3

hov, lidt ombrudt ... og filnavne i disse skal lige rettes...

<link rel="stylesheet" href="123_files/style.css" type="text/css">
<img src="123_files/Banner.jpg" alt="mojn-logo" height="270" width="820"> ( og ">" skiftes til " />" )
... ved ikke om du ikke vil have xml deklarationen slettet ?

Synes godt om

mclemens Nybegynder

20. april 2006 - 01:32 #4

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

body { margin:5px;
text-align: center;
background: #FFF;
}

#main {
text-align: left;
width: 820px;
margin: 0px auto;
border: 0px;
}

#inner {
width: 600px;
margin-left: 60px;
}

#header {
background: #600;
padding: 1px 0px;
}

#menu {
background: #060;
float: left;
width: 150px;
}

#content {
background-color: #006;
float: right;
width: 450px;
}

p, a, td {
font: 12px arial, sans-serif;
color: #000;
text-decoration: none;
}

th {
font: bold 12px arial, sans-serif;
color: #FFF;
background: #000;
margin: 0px;
border: 0px;
padding: 0px;
}

a:hover {
font-weight: bold
}

table {
margin: 0px;
border: 0px;
padding: 0px;
}
img, p, a, td{
margin: 0px;
border: 0px;
padding: 0px;
}

Synes godt om

mclemens Nybegynder

20. april 2006 - 01:34 #5

hov de 4 sidste kan forkortes lidt mere...

th {
font: bold 12px arial, sans-serif;
color: #FFF;
background: #000;
}

a:hover {
font-weight: bold
}

img, p, a, td, table, th{
margin: 0px;
border: 0px;
padding: 0px;
}

Synes godt om

mclemens Nybegynder

20. april 2006 - 01:37 #6

og <br> skal lige rettes til <br /> samt /> på metas... men det var jo FF der fjernede dem :P

Synes godt om

mclemens Nybegynder

20. april 2006 - 01:37 #7

... de var jo escaped på dit site fra starten af :)

Synes godt om

Slettet bruger

20. april 2006 - 01:39 #8

IE aflæser margin og padding forkert iflg. W3C.
Brug derfor et IE-hack, som fx. dette hack som jeg selv bruger:

html,body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
text-align: left; }

#main_container { /* IE +5/Win: Width & height: Tillæg 2 x padding (= 0px) + 2 x border (= 0px) i alt= 0px */
position: absolute;
top: 50%;
height: 432px;
margin-top: -220px;
left: 50%;
width: 746px;
margin-left: -375px;
padding: 0px;
border: none; }
html>body #main_container { /*Til FF, Opera og andre browsere. */
width: 746px;
margin-left: -378px; }

Dette er bare en skabelon - og du kan selv indsætte, justere og slette de CSS-data du har brug for.

Synes godt om

Slettet bruger

20. april 2006 - 01:40 #9

Nå for søren. Dér var jeg vist lidt for langsom. :-)

Synes godt om

mclemens Nybegynder

20. april 2006 - 01:43 #10

ingen hacks ;)

Synes godt om

mclemens Nybegynder

20. april 2006 - 01:47 #11

ingen hacks ;) -> hacks behøves ikke ;)
... men et fint forslag du kom med :)

Synes godt om

mclemens Nybegynder

20. april 2006 - 01:57 #12

og dog måske lige et hack til th tags,
medmindre man fjerner xml deklarationen...

th {
font: bold 12px arial, sans-serif;
color: #FFF;
background: #000;
text-align:left;
}
^ text-align left skal tilføjes...

Synes godt om

Slettet bruger

20. april 2006 - 02:00 #13

Ja, et effektivt hack - men ingen grund til at bruge dette, hvis man kan undgå det. :-)

Men mangler der ikke også et dansk charsæt i META-koderne, når nu han bruger de danske æ-, ø- og å-bogstaver? Som fx. dette her:
<meta http-equiv="Content-type" content='text/html; charset="iso-8859-1"' />

Synes godt om

mclemens Nybegynder

20. april 2006 - 02:03 #14

... synes du skal beholde xml deklarationen og bare tage det ene hack eller evt. lave fjerne th overskrifter og lave overskrifter som <b class="thbg"> i toppen af td'erne lige over menu links'ene :)

Synes godt om

mclemens Nybegynder

20. april 2006 - 02:04 #15

update... og jeps :)

Synes godt om

mclemens Nybegynder

20. april 2006 - 02:07 #16

Synes godt om

mclemens Nybegynder

20. april 2006 - 02:08 #17

edit <b class="thbg"> -> <b class="th">

Synes godt om

mclemens Nybegynder

20. april 2006 - 02:13 #18

bliver lidt i tvivl m.h.t. content-type man
kan nok omslutte på begge måder ... sorry :)

Synes godt om

Slettet bruger

20. april 2006 - 02:16 #19

Nåååe ja - men jeg kopierede også bare den charset herindefra (http://www.eksperten.dk/spm/703917) :-)

Synes godt om

mclemens Nybegynder

20. april 2006 - 02:20 #20

ok, jeg kigger mere på w3c end eksperten/andre sites ... eksperten validerer heller ikke 100% - men jeg så godt, at de havde gjort det herinde, efter jeg havde skrevet det, så derfor kom jeg også lidt i tvivl :)

Synes godt om

photop Nybegynder

20. april 2006 - 08:38 #21

Den ekstra div (inner) fik styr på tingenes indbyrdes placering - men hele inner-div'en er stadig rykket meget længere ind fra venstre i IE end i Firefox?!?

Jeg er ikke interesseret i at bruge hacks - og det var ikke planen at slette xml deklarationen... Men jeg skulle også mene at jeg har fanget diverse smuttere - den validerer i hvert fald rigtigt nu!

Synes godt om

mclemens Nybegynder

20. april 2006 - 08:43 #22

[ men hele inner-div'en er stadig rykket meget længere ind fra venstre i IE end i Firefox?!? ]
- prøv at rette din css også (der er ingen hacks i den css jeg lavede)
http://www.eksperten.dk/spm/703917#rid6217212

Synes godt om

mclemens Nybegynder

20. april 2006 - 08:45 #23

... sæt lige et punktum foran th i css'en -> .th

Synes godt om

mclemens Nybegynder

20. april 2006 - 09:00 #24

eller rettere ret lige denne del af din css:
#main {
text-align: left;
width: 820px;
margin: 0px auto;
border: 0px;
}

Synes godt om

mclemens Nybegynder

20. april 2006 - 09:10 #25

^ og forklaringen på at man skal have denne også er: IE læser den ydre text-align:center med højere værdi end float værdierne og så nedarves text-align:center ned til main og det vil så gøre at float:left på inner div'en er uden effekt i IE p.g.a. den yderste text-align:center som er nødvendig p.g.a. xml deklarationen og inner div'en vil derfor være centreret istedet... :)

Synes godt om

mclemens Nybegynder

20. april 2006 - 09:21 #26

- og et svar :)

Synes godt om

photop Nybegynder

20. april 2006 - 19:41 #27

Tak for hjælpen, og især tak for forklaringen til sidst - så ved jeg hvad det handler om til næste gang jeg står med noget tilsvarende...

Synes godt om

mclemens Nybegynder

20. april 2006 - 20:02 #28

- det var så lidt :)
og tak for point :)

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