Søg
Avatar billede lillebror Nybegynder
02. maj 2007 - 08:59 Der er 18 kommentarer og
1 løsning

Positionere en box

Hej Eksperter

Jeg har en <div> der holder hele min hjemmeside, den er 770px bred og margin er auto.

Nu vil jeg gerne have noget placeret lige til venstre for den, men hvordan klarer jeg det? position: relative duer ikke, da den ikke må optage plads i indholdet. Havde forestillet mig position: absolute, men kan ikke umiddelbart regne ud, hvad jeg skal sætte den til, for at bliver lige op og ned af min container ved alle skærmstørrelser.
Avatar billede softspot Forsker
02. maj 2007 - 09:05 #1
Kan du ikke lave en boks undenom det hele som er 2 gange bredden af din ekstra boks (den til højre) og så posititionere det hele i center...?


<div id="container">
  <div id="centerdiv">&nbsp;</div>
  <div id="rightdiv">&nbsp;</div>
</div>

centerdiv er så din boks med margin auto og rightdiv er den boks som skal stå til højre (f.eks. float:right). container har også margin auto for at være centreret i vinduet...
Avatar billede softspot Forsker
02. maj 2007 - 09:17 #2
Det lader til at man også skal have en boks til venstre for at det bliver centreret korrekt, så har jeg eksemplificeret nedenfor:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Test af flydende rammer</title>
  <style type="text/css">
    #container { width:800px; margin: 0 auto; }
    #content { width:498px; height:500px; float:left; margin: 0 auto; border:1px solid #afafaf; clear:none; }
    #lbox { width:148px; float:left; border:1px solid #afafaf; }
    #rbox { width:148px; float:right; border:1px solid #afafaf; }
  </style>
</head>

<body>
 
  <div id="container">
    <div id="rbox">Flyder til højre</div>
    <div id="lbox">&nbsp;</div>
    <div id="content">Indholdsrammen...</div>
  </div>

</body>
</html>
Avatar billede lillebror Nybegynder
02. maj 2007 - 09:23 #3
Er ikke helt glad for den løsning, men hvis der ikke er andre bud må jeg jo se på det.
Avatar billede softspot Forsker
02. maj 2007 - 09:27 #4
Hvad er "problemet" med løsningen? Hvis der er flere forudsætninger der skal tages højde for, er det en god idé at få dem frem i lyset... :)
Avatar billede lillebror Nybegynder
02. maj 2007 - 09:36 #5
Hvis jeg gør skærmstørrelsen mindre så går den ind over
Avatar billede lillebror Nybegynder
02. maj 2007 - 09:38 #6
Jeg tænker lidt på om man ikke kan ligge en div oveni den gamle container, med vidde på 770px, og så et z-index. På den måde kan jeg jo godt bruge position: relative;
Avatar billede softspot Forsker
02. maj 2007 - 09:40 #7
Jeg går ud fra at du mener boksen til højre...(?)

Ja, det kan jeg godt se, der kommer lige til at mangle 150 pixels at "køre på". Jeg kan ikke umiddelbart løse det i ren CSS, men det er der givetvis en anden der kan :)
Avatar billede softspot Forsker
02. maj 2007 - 09:45 #8
God idé! Det var da lige det der skulle til:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Test af flydende rammer</title>
  <style type="text/css">
    #container { position:relative; width:800px; margin: 0 auto; }
    #content { position:relative; width:798px; height:500px; margin: 0 auto; border:1px solid #afafaf; }
    #rbox { position:absolute; z-index:5; width:148px; left:800px; border:1px solid #afafaf; }
  </style>
</head>

<body>
 
  <div id="container">
    <div id="rbox">Flyder til højre</div>
    <div id="content">Indholdsrammen...</div>
  </div>

</body>
</html>
Avatar billede lillebror Nybegynder
02. maj 2007 - 09:53 #9
Ja den skal bare være i venstre side så :)

Virker det også ved større opløsninger? At selve indholdet er centreret og den lille nye boks er "hæftet på" i venstre side.
Avatar billede mclemens Nybegynder
02. maj 2007 - 09:55 #10
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
#cont {position:relative;width:770px;margin:0 auto;border:1px solid #000;}
#left {position:absolute;width:100px;left:-100px;top:0;border:1px solid #ff0;}
</style>

</head><body>
<div id="cont">Hej
<div id="left">Hejsa</div>
</div>
</body></html>

... Ulempen er dog at hvis vinduet er mindre end div'sene
så kan man ikke se indholdet i venstre side, i det tilfælde er
det bedre at positionere indholdet via floats som i 02/05-2007 09:05:03.
Men så er indholdsboxen ikke centreret som sådan - med boxen hægtet på til venstre.
Avatar billede lillebror Nybegynder
02. maj 2007 - 10:00 #11
Det er slet ingen ulempe, der skal bare være nogle annoncer, og ser man dem så ser man dem, gør man ikke er der ingen skade sket.
Avatar billede lillebror Nybegynder
02. maj 2007 - 10:04 #12
Jeg tester det lige når jeg kommer hjem.
Avatar billede mclemens Nybegynder
02. maj 2007 - 10:11 #13
Ok, kast point til Softspot vis det virker,
09:55:35 er stort set ens med 09:45:44 ;)
Avatar billede roenving Novice
02. maj 2007 - 10:11 #14
Men det kan sagtens gøres ud fra det oprindelige koncept:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Test af flydende rammer</title>
  <style type="text/css">
    #container { width:770px; margin: 0 auto; overflow:visible; position:relative;}
    #content { width:770px; height:500px; border:1px solid #aaf; }
    #rbox { width:100px; position:absolute; left:-100px; height:500px; border:1px solid #afa; color:red;}
  </style>
</head>

<body>
 
  <div id="container">
    <div id="rbox">Box udenfor centreret element</div>
    <div id="content">Indholdsrammen...</div>
  </div>

</body>
</html>
Avatar billede mclemens Nybegynder
02. maj 2007 - 10:17 #15
... Joh, men hvorfor bruge et element ekstra ?-)
Avatar billede roenving Novice
02. maj 2007 - 13:12 #16
-- jeg smed bare ikke content-diven ud, da man alligevel tit har brug for yderligere opdeling ...

Men det er da rigtigt, at det kan blive en linje kortere:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Test af flydende rammer</title>
  <style type="text/css">
    #container { width:770px; margin: 0 auto; overflow:visible; position:relative; height:500px; border:1px solid #aaf; }
    #rbox { width:100px; position:absolute; left:-103px; top:-1px; height:500px; border:1px solid #afa; color:red;}
  </style>
</head>

<body>
 
  <div id="container">
    <div id="rbox">Box udenfor centreret element</div>
    Indholdsrammen...
  </div>

</body>
</html>
Avatar billede lillebror Nybegynder
02. maj 2007 - 16:09 #17
Works like a charm!

Det var da helt fantastisk :) softspot, det ser ud til du tjente nogle point.
Avatar billede softspot Forsker
02. maj 2007 - 16:18 #18
Jamen, så smider jeg lige et svar - velbekomme :)
Avatar billede softspot Forsker
02. maj 2007 - 16:53 #19
Tak for point :)
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 går 20:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
20/0714:16 Smartwatch med faldalarm og sos Af hkv i Fitness & Smartwatches
20/0711:23 System til bordreservation Af Strawberry i PHP
18/0720:34 Tidsbestemt Gendannelse - ny funktion i Windows Af Uvanga i Windows
White papers
Flere white papers »