/ Forside/ Teknologi / Udvikling / CSS / Spørgsmål
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
CSS
#NavnPoint
molokyle 2854
Klaudi 720
bentjuul 510
smorch 310
Benjamin... 310
e.c 300
EXTERMINA.. 210
stone47 200
danielsko.. 100
10  ME.alexan.. 100
Hjælp med positionering af DIV
Fra : Nikolaus
Vist : 911 gange
100 point
Dato : 12-02-06 16:53

På følgende side http://knowhow.frac.dk/PC/CSSDesign/index.html ønsker jeg at elementerne "Infobox 1 til og med 6", skal tilpasse sig til vinduets størrelse.

Men ved reducering af browservinduets størrelse, vælter boxene oven på hinanden i stedet.

Genvej til CSS:
http://knowhow.frac.dk/PC/CSSDesign/css/global.css og
http://knowhow.frac.dk/PC/CSSDesign/css/frontpage.css

Jeg skulle mene at problemet ligger et sted omkring "position: float, absolute, relativ", men kan ikke gennemskue det.

På forhånd tak for hjælpen
nikolaus

 
 
Kommentar
Fra : Nikolaus


Dato : 12-02-06 16:55

Indsæt din tekst her

Det lader til at links til CSS lander forkert - ved ikke umiddelbart hvorfor. Så derfor skal de kopieres og indsættes manuelt i adresselinien. Beklager

Kommentar
Fra : emesen


Dato : 12-02-06 17:07

jeg ved ikke hvad der er galt - men når jeg spreder siden ud over to skærme i opløsning 2 x 800x600 så er der 3 store boxe ved siden af hinanden og 3 mindre lige de 3 store.
altså box nr.
1 2 3
4 5 6
Men jeg tro dine boxe er for store

Kommentar
Fra : Nikolaus


Dato : 12-02-06 17:14

Ja. Det ka jeg godt se. Du kører i IE kan jeg forstå. For i FF ser det fint ud.

Kan ikke gennemskue hvad problemet er

Kommentar
Fra : Nikolaus


Dato : 12-02-06 17:22


Har løst problemet ved at fjerne den container jeg havde placeret boksene i.

Tak for opmærksomheden!

Kommentar
Fra : emesen


Dato : 12-02-06 17:23

Der sker det samme i FF og Opera
Men billedet og den store tabel/container følgre pænt med hen over to skærme.

Kommentar
Fra : emesen


Dato : 12-02-06 17:27

ok

Kommentar
Fra : Nikolaus


Dato : 12-02-06 17:35

ØV! Var lidt for hurtig. Ikke løst alligvel.


Kommentar
Fra : emesen


Dato : 12-02-06 18:10

men nu står dine boxe da over hinanden, og de bliver på plads når jeg strækker browseren ud.

Kommentar
Fra : Nikolaus


Dato : 12-02-06 18:28

Jo, det er rigtigt. Men det jeg ønsker er:

1. Box 1,2,3 skal stå horisontalt ved siden af hinanden
2. Box 4,5,6 skal også stå horisontalt ved siden af hinanden, under box 1,2,3
3. Indholdet i boxene skal tilpasse sig ift. browservinduets bredde og IKKE flytte boksene ned under hinanden.

Er ved at gå bersærk over at jeg ikke kan gennemskue det.

Kommentar
Fra : emesen


Dato : 12-02-06 23:27

Ja og det gjorde de også når jeg strakte browseren ud over to skærme. Men de gør det ikke nu
(jeg kører med dobbeltskærmsystem, som er et stort skrivebord)
Men dit globale tekstareal er da ikke bredt nok til 3 boxe i den størrelse

Kommentar
Fra : molokyle


Dato : 13-02-06 08:43

Uden at have kigget nærmere på det, lyder det som om du nok skal 'lege' med DIMENSION egenskaberne:

min-width
max-width

min-height
max-height

Desværre tolkes disse egnskaber ikke af IE (..heller ikke af IE7 Beta 2, som eller har rettet meget til; f.eks. position:fixed; :hover på alle elementer mm. http://www.microsoft.com/windows/ie/ie7/default.mspx )

Der findes flere mulige løsninger på problemet:

1.) http://webdesign101.dk/csslayout/jello.php
2.) http://webdesign101.dk/csslayout/favorit2005-3.php
3.) http://www.alistapart.com/articles/holygrail

</MOLOKYLE>

Kommentar
Fra : emesen


Dato : 13-02-06 16:54

Det var godt du kom Molokyle, for Nikolaus er vist ved at opgive.

Kommentar
Fra : Nikolaus


Dato : 13-02-06 17:11

Ja, det må jeg give dig ret i, emesen

Har løst problemet delvist, og ikke tilfredsstillende, ved at benytte tables til at lave layoutet. Jeg bliver bare ikke tilfreds så længe mit design baseres på tabeller når de ikke er ønsket.

Har leget lidt med min/max-width, men uden større held. Tilgengæld ser artiklerne ud til at give et par gode bud på en løsning, så dem tygger jeg lige igennem. Så skriver jeg tilbage.


Kommentar
Fra : emesen


Dato : 13-02-06 17:13

Ja - vi ser frem til et godt resultat.

Kommentar
Fra : molokyle


Dato : 13-02-06 21:46
Kommentar
Fra : molokyle


Dato : 13-02-06 21:54

Du har vist 'ged' i dine DIV. Prøv:

Kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>flygenrings.dk .: NYT DESIGN :.</title>
<meta name="Author" content="Claus Isborg Flygenring" />
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/frontpage.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

<div id="topbanner"></div>
<div id="topnav">Topnavigation</div>

<div id="txtarea">Globalt tekstareal
<div id="frontbox1">Infobox 1</div>
<div id="frontbox2">Infobox 2</div>
<div id="frontbox3">Infobox 3</div>
<div id="frontbox4">Infobox 4</div>
<div id="frontbox5">Infobox 5</div>
<div id="frontbox6">Infobox 6</div>
</div> // Slut på 'txtarea'

<div id="bottbanner"></div>
<div id="copynote">Copyright note</div>

</div> // Slut på 'container'
</body>
</html>


</MOLOKYLE>

Kommentar
Fra : emesen


Dato : 13-02-06 21:54

En lille sidebemærkning til Molokyle.
I denne her "3 columns, all fluid bruges der også:
@import "all.css"; /* just some basic formatting, no layout stuff */



Kommentar
Fra : Nikolaus


Dato : 14-02-06 18:10

Har nu læst disse artikler og for en relativt newbie som mig, virker det langhåret.

Jeg har svært ved at overføre det til mit forehavende.

Kommentar
Fra : molokyle


Dato : 14-02-06 21:38

Nikolaus -> Derfor er der nu stadig rod i dine DIV på siden: http://knowhow.frac.dk/PC/CSSDesign/index.html

....CSS eller ej. Tæl selv efter

Din kode:

Kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>flygenrings.dk .: NYT DESIGN :.</title>
<meta name="Author" content="Claus Isborg Flygenring">
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/frontpage.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="topbanner"></div>
<div id="topnav">
Topnavigation
</div>
<div id="txtarea">
Globalt tekstareal
<!-- <div id="infoboxcontainer"> -->
<div id="frontbox1">
Infobox 1
</div>
<div id="frontbox2">
Infobox 2
</div>
<div id="frontbox3">
Infobox 3
</div>
<div id="frontbox4">
Infobox 4
</div>
<div id="frontbox5">
Infobox 5
</div>
<div id="frontbox6">
Infobox 6
</div>
<!--</div> infoboxcontainer div slut -->
</div> <!-- txtarea div slut -->

<div id="bottbanner"></div>
<div id="copynote">
Copyright note
</div>


</div> <!-- container div slut -->

</body>
</html>


Du har 'spærret en DIV inde i en kommentar :

Kode
<!--</div> infoboxcontainer div slut -->


Prøv nu : Kommentar Fra : molokyle Dato : 13-02-06 21:54

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 14-02-06 21:44

Strippet for kommentarer ser din kode således ud :

Kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>flygenrings.dk .: NYT DESIGN :.</title>
<meta name="Author" content="Claus Isborg Flygenring"> // Hér mangler en '/' som afslutning !
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/frontpage.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="topbanner"></div>
<div id="topnav">
Topnavigation
</div>
<div id="txtarea">
Globalt tekstareal
<div id="frontbox1">
Infobox 1
</div>
<div id="frontbox2">
Infobox 2
</div>
<div id="frontbox3">
Infobox 3
</div>
<div id="frontbox4">
Infobox 4
</div>
<div id="frontbox5">
Infobox 5
</div>
<div id="frontbox6">
Infobox 6
</div>
</div>
<div id="bottbanner"></div>
<div id="copynote">
Copyright note
</div>

</div>
</body>
</html>


Tæl igen ... </MOLOKYLE>

Accepteret svar
Fra : molokyle

Modtaget 50 point
Dato : 14-02-06 21:58

Øeeeh...

Sikken noget vrøvl !

Tænke pause ........

</MOLOKYLE>

Godkendelse af svar
Fra : Nikolaus


Dato : 09-11-06 18:38

Tak for svaret molokyle. Syntes du har gjort en stor indsats så du får point. Beklager den lange svartid. God weekend når du kommer der til :)

Du har følgende muligheder
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
Søg
Reklame
Statistik
Spørgsmål : 177414
Tips : 31962
Nyheder : 719565
Indlæg : 6407847
Brugere : 218876

Månedens bedste
Årets bedste
Sidste års bedste