Søg
Avatar billede Slettet bruger
12. marts 2005 - 20:06 Der er 37 kommentarer og
1 løsning

Placering af 2 DIV.

Hejsa.

Jeg sidder og roder med et problem:

Jeg har en menu i højre side af dokumentet (position: absolute; width: 235px;), og ønsker at placere et indhold i venstre side af dokumentet. Det foregår via en iframe-løsning.
MEN: Det indhold i venstre side af dokumentet skal center-placeres, uanset brugerens skærmopløsning.
Hvordan gør man det?

Jeg kan nemt løse opgaven via en frame-løsning, men jeg vil helst bruge 2 stk. div.
Avatar billede roenving Novice
12. marts 2005 - 20:11 #1
<div id="menu" style="float:right;width:235px;">
  <!-- Din højre-menu -->
</div>
<div id="content" style="text-align:center;">
  <!-- Dit venstre centrerede indhold -->
</div>

?-)
Avatar billede Slettet bruger
12. marts 2005 - 20:12 #2
Altså: Indholdet i venstre side af dokumentet, skal center-placeres i den RESTERENDE del af dokumentet. Det er selvfølgelig det jeg mener. :-)
Avatar billede Slettet bruger
12. marts 2005 - 20:12 #3
Nå! Dér var du søremig hurtig! :-)
Jeg chekker lige, Roenving. :-)
Avatar billede Slettet bruger
12. marts 2005 - 20:15 #4
Aaaaaaaaahhhhhhhh! Nu kan jeg se hvordan du gør det! Smart! :-)

Menuen er ikke mere absolute, men float! Derved optager menuen ikke plads i dokumentet, men lægger sig bare som et nyt lag ovenpå selve dokumentet. Ikke også? Altså som en slags z-index?
Avatar billede Slettet bruger
12. marts 2005 - 20:15 #5
Læg venligst et svar, kode-supermand Roenving. :-)
Avatar billede roenving Novice
12. marts 2005 - 20:17 #6
Ja, de ligger i samme lag, men da menuen optager noget af pladsen, kan den anden div kun optage det resterende !-)

Velbekomme '-)
Avatar billede roenving Novice
12. marts 2005 - 20:17 #7
;O)
Avatar billede Slettet bruger
12. marts 2005 - 20:19 #8
HOV! Der er noget galt, Roenving... prøv lige at høre her:

Indholdet i venstre side af dokumentet, skal center-placeres i den RESTERENDE del af dokumentet, når selve menuen er trukket fra.
Det gør den ikke endnu.
Avatar billede Slettet bruger
12. marts 2005 - 20:23 #9
...tildeler dig points med det samme, fordi jeg ved at du er kode-supermand nok til at ordne den. :-)
Avatar billede roenving Novice
12. marts 2005 - 20:24 #10
Text-align bør kun centrere inline-indhold, hvis du også skal centrere block-level indhold må du placere f.eks. en div indeni med en defineret bredde og give det margin:0 auto;

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

<head>

<title>Centreret indhold i venstre side</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="margin:0;">

<div id="menu" style="float:right;width:235px;background:#ddd;">
  <!-- Din højre-menu -->
  Menuens indhold
</div>
<div id="content" style="text-align:center;">
  <!-- Dit venstre centrerede indhold -->
  <div style="width:450px;margin:0 auto;background:yellow;">
    En masse indhold<br>
    En masse indhold<br>
    En masse indhold<br>
    En masse indhold<br>
    En masse indhold<br>
    En masse indhold<br>
  </div>
</div>
</body>
Avatar billede Slettet bruger
12. marts 2005 - 20:31 #11
Ja, nu gør den det helt rigtige i IE 6.0! MEN: Ikke i hverken Opera eller Firefox. Ved du hvorfor, Roenving?
Avatar billede roenving Novice
12. marts 2005 - 20:36 #12
Argh, jeg har jo glemt, at floats beregnes helt forskelligt i browserne ...

-- så indskrænker mine ideer sig til at gøre det onload:

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

<head>

<title>Centreret indhold i venstre side</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
window.onload = function(){
  document.getElementById('content').style.width = screen.availWidth - 235 + 'px';
}
</script>
</head>
<body style="margin:0;">

<div id="menu" style="float:right;width:235px;background:#ddd;">
  <!-- Din højre-menu -->
  Menuens indhold
</div>
<div id="content" style=";">
  <!-- Dit venstre centrerede indhold -->
  <div style="width:450px;margin:0 auto;background:yellow;">
    En masse indhold<br>
    En masse indhold<br>
    En masse indhold<br>
    En masse indhold<br>
    En masse indhold<br>
    En masse indhold<br>
  </div>
</div>
</body>
</html>
Avatar billede Slettet bruger
12. marts 2005 - 20:48 #13
Hmmm.... men den dutter ikke rigtigt endnu...
Ja, så tror pokker da, at jeg ikke selv kunne finde ud af det! :-)

Her er hvad jeg har splittet ad, og prøvet at få til at passe til min egen opsætning. Men je ghar måttet opgive. Men måske du kan få nogle gode ideer her? :
http://www.intensivstation.ch/css/template.php
Avatar billede roenving Novice
12. marts 2005 - 20:48 #14
Hrm, og der skal mere til at den virker ens i IE og Mozilla:

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

<head>

<title>Centreret indhold i venstre side</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{margin:0;padding:0;overflow:hidden;}
</style>
<script type="text/javascript">
window.onload = function(){
  document.getElementById('content').style.width = screen.availWidth - 250 + 'px';
}
</script>
</head>
<body>

<div id="menu" style="float:right;width:235px;background:#ddd;">
  <!-- Din højre-menu -->
  Menuens indhold -
</div>
<div id="content" style=";">
  <!-- Dit venstre centrerede indhold -->
  <div style="width:450px;margin:0 auto;background:yellow;">
    En masse indhold<br>
    En masse indhold<br>
    En masse indhold<br>
    En masse indhold<br>
    En masse indhold<br>
    En masse indhold<br>
  </div>
</div>
</body>
</html>

-- hvorfor der skal være 250 kender jeg ikke årsagen til, men intet mindre ville gøre det !-)
Avatar billede Slettet bruger
12. marts 2005 - 20:51 #15
...eller måske jeg burde gå tilbage til den gamle velkendte frame-løsning? *suk, nederlag*

Du ved:
<frameset cols="*,350">
    <frame src="test1.html" name="content" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" noresize="noresize" />
    <frame src="nav.html" name="nav" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0" noresize="noresize" />
</frameset>

Men jeg havde håbet på at der findes en anden løsning, men det går der åbenbart ikke, ikke ihvertfald hvis den skal virke i de 3 store browsere, i nyere versioner.
Avatar billede Slettet bruger
12. marts 2005 - 20:54 #16
Jeg kan stadig ikke få den til at virke i Opera og Firefox. Kan du?
Avatar billede roenving Novice
12. marts 2005 - 20:55 #17
Nu har jeg ikke en Opera, så der kan jeg ikke prøve det, men med fixet virker det så ens i min Gecko og IE, at det ikke er muligt at se forskel ...

-- og ofte er frames lettere at have med at gøre i forhold til navigation, men ellers kan det være svært at finde rigtig gode grunde (men netop derfor benytter jeg også en iframe på mit eget site !-)
Avatar billede Slettet bruger
12. marts 2005 - 21:02 #18
Ja, hvis jeg/vi bare kunne finde en brugbar løsning med 2 stk. DIV, kunne jeg bare putte en iframe ind i content-DIVén. Så ville alting være helt fint. :-)
Men det er åbenbart ikke så nemt med de 2 stk. DIV...
Avatar billede Slettet bruger
12. marts 2005 - 21:08 #19
Skal vi bare lade den dø? Og henkaste den som værende "uløselig i en middelsvær grad"? :-)
Avatar billede olebole Juniormester
12. marts 2005 - 21:12 #20
<ole>

Hvorfor dog det? Måske skulle roenving bare vågne *gnæk-gnæk*  ;o)
roenving >> Er din løsning udelukkende beregnet til full*SCREEN* (hint-hint) vinduer?

/mvh
</bole>
Avatar billede olebole Juniormester
12. marts 2005 - 21:16 #21
'document.body.offsetWidth' i stedet for 'screen.availWidth'  ;o)
Avatar billede olebole Juniormester
12. marts 2005 - 21:17 #22
... og så virker det naturligvis med de -235 + "px"  :)
Avatar billede Slettet bruger
12. marts 2005 - 21:18 #23
Jeg har også siddet og stirret mig blind, på de fine eksempler herinde:
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
Avatar billede Slettet bruger
12. marts 2005 - 21:19 #24
Nå, for søren! Nu er Ole også kommet på banen! :-)
Avatar billede olebole Juniormester
12. marts 2005 - 21:21 #25
yups ... roenving kom til at lave en lille tanketorsk  :)

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

<head>

<title>Centreret indhold i venstre side</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{margin:0;padding:0;overflow:hidden;}
</style>
<script type="text/javascript">
window.onload = function(){
  document.getElementById('content').style.width = (document.body.offsetWidth - 235) + 'px';
}
</script>
</head>
<body>

<div id="menu" style="float:right;width:235px;background:#ddd;">
  <!-- Din højre-menu -->
  Menuens indhold -
</div>
<div id="content" style=";">
  <!-- Dit venstre centrerede indhold -->
  <div style="width:450px;margin:0 auto;background:yellow;">
    En masse indhold<br>
    En masse indhold<br>
    En masse indhold<br>
    En masse indhold<br>
    En masse indhold<br>
    En masse indhold<br>
  </div>
</div>
</body>
</html>

- så skulle den gerne virke  :)
Avatar billede Slettet bruger
12. marts 2005 - 21:23 #26
Ja! Nu gør den det dælemig! :-)

Bare så længe man ikke resize´r så virker det perfekt! :-)
Avatar billede olebole Juniormester
12. marts 2005 - 21:23 #27
<script type="text/javascript">
window.onload = window.onresize = function(){
  document.getElementById('content').style.width = (document.body.offsetWidth - 235) + 'px';
}
Avatar billede olebole Juniormester
12. marts 2005 - 21:25 #28
roenving kom til at måle på brugerens tilgængelige skærmbredde. Det er body'ens bredde, der er interessant i denne forbindelse - og derfra skal vi så trække menuens bredde. Dét er, hvad der tilbage til content-feltet  ;o)
Avatar billede Slettet bruger
12. marts 2005 - 21:27 #29
Stærk tobak! I er dælemig et kanon-makkerpar, I to! :-)

Fortæl mig: Hvilke browsere virker det i, og i hvilke versioner? Bortset fra Netscape 4.0, selvfølgelig! *gys*
Jeg vil jo nødig udelukke alt for mange kunder på mit website... ;-)
Avatar billede olebole Juniormester
12. marts 2005 - 21:29 #30
IE5+, NS6+, Opera ... et pænt stykke tilbage. Alle rimeligt moderne browsere  :)
Avatar billede Slettet bruger
12. marts 2005 - 21:30 #31
Jeps, jeg fik godt fat i den, Ole. :-)
Jeg tror, at med jeres 4 øjne, kan I løse næsten alle opgaver, når I slår jer sammen ikke sandt? :-)

Hvor bliver du af, Roenving? Ser du fjernsyn?

Men hvordan pokker kommer jeg nu til at tildele dig lidt points også, Ole? Det fortjener du selvfølgelig også. :-)
Avatar billede olebole Juniormester
12. marts 2005 - 21:31 #32
Pyt med det ... det var en lille fejl, roenving lavede .... og det udligner sig sikkert i det lange løb  ;o)
Avatar billede Slettet bruger
12. marts 2005 - 21:33 #33
Ja, men... jeg ville nu godt give dig lidt points for ulejligheden. :-)
Men lov mig, at du ikke driller Roenving med dette her, ikke også Ole? ;-)
Avatar billede olebole Juniormester
12. marts 2005 - 21:33 #34
... men ja, med vores fire øjne og to rudimenterede, sære hjerner, kan vi noget  :)
Avatar billede olebole Juniormester
12. marts 2005 - 21:34 #35
Drille ...?!!??!!! WHO, MEeeeeeee ...?!??!!!!  0:)
Avatar billede Slettet bruger
12. marts 2005 - 21:34 #36
Godt at vide det med browser-typerne og -versionerne! :-)
Avatar billede Slettet bruger
12. marts 2005 - 21:38 #37
Ja, du skal nok blive generøst overøst med points ved en anden lejlighed, Ole. Du er bestemt ikke glemt! :-)

"..rudimenterede, sære hjerner..."??? *GG*

Hermed et stort tak til jer begge to for hjælpen! :-)

Hav en rigtig god aften: Flemming
Avatar billede olebole Juniormester
12. marts 2005 - 21:45 #38
Det er helt fint ... du har overøst mig i så mange andre tilfælde - og skulle du endelig glemme mig, kan jeg jo altid give dig en af de så kendte 'OleBoleBaller'  ;D

Selvtak - og selv god aften  :)
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 11:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
I går 10:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
White papers
Flere white papers »