/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
css: Centrere floats
Fra : Peter Anskjær


Dato : 12-09-04 15:47

Hej NG
Jeg har en side med nogle venstre floats, der er jo smart da jeg så altid
får udnyttet sidebredden uafhængigt af opløsning. Nu er tingen så at jeg
gerne vil have lige meget margin i begge sider, altså få floats'ne
centreret, kan det lade sig gøre uden at være tvunget til at give siden en
bestemt bredde?
Et eksempel findes her:
http://nskjaer.dk/float.html

Mvh
Peter



 
 
Knud Gert Ellentoft (12-09-2004)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 12-09-04 17:32

Peter Anskjær skrev:

>Jeg har en side med nogle venstre floats, der er jo smart da jeg så altid
>får udnyttet sidebredden uafhængigt af opløsning. Nu er tingen så at jeg
>gerne vil have lige meget margin i begge sider, altså få floats'ne
>centreret, kan det lade sig gøre uden at være tvunget til at give siden en
>bestemt bredde?

Du har

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

#content {
   margin: 20px 150px;
   background-color: red;
}


content er så vidt jeg kan se hele sidens indhold, du er nødt til
at sætte en width på, det kan være f.eks. 80% og margin-left og
margin-right: auto.

#content {
   margin: 20px auto 150px auto;
   background-color: red;
   width: 80%

Det virker i alle nyere browsere, vil du ha' IE 5 med, så må du
body {
   margin: 0px;
   padding: 0px;
   text-align: center
}

Det kan bevirke, at tekst på siden også bliver centreret, det må
du så rette ved at sætte text-align: left.

--
Knud

Peter Anskjær (12-09-2004)
Kommentar
Fra : Peter Anskjær


Dato : 12-09-04 17:50

"Knud Gert Ellentoft" <ellentoft@mail.tele.invalid> skrev i en meddelelse
news:v5u8k0t80rg4i62qbaadojea04gsrb6vd5@dtext.news.tele.dk...
>
> content er så vidt jeg kan se hele sidens indhold, du er nødt til
> at sætte en width på, det kan være f.eks. 80% og margin-left og
> margin-right: auto.
>
> #content {
> margin: 20px auto 150px auto;
> background-color: red;
> width: 80%
>
Det er nemlig det jeg helst ville undgå, eller skal undgå. Jeg har en side
med fast bredde menu i venstre side på 150px og højre margin på 170px hvor
der er et billede. Derfor kan jeg ikke sætte bredden til 80% og så lade
margins være auto. Det jeg leder efter er vel en div som tager bredde efter
indholdet, men jeg er ikke helt sikker på om det findes (synes tit jeg
mangler en sådan).

> Det virker i alle nyere browsere, vil du ha' IE 5 med, så må du
> body {
> margin: 0px;
> padding: 0px;
> text-align: center
> }

Den er jeg klar over, men det kræver jo bare at der er en bredde på
indholdsdiven.
Håber der findes en løsning på mit problem, ellers må jeg vel leve med det.

Mvh
Peter



Knud Gert Ellentoft (12-09-2004)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 12-09-04 18:38

Peter Anskjær skrev:

>Den er jeg klar over, men det kræver jo bare at der er en bredde på
>indholdsdiven.
>Håber der findes en løsning på mit problem, ellers må jeg vel leve med det.

Det er der ikke, for browserne skal jo have en eller anden
størrelse at centrere ud fra.
--
Knud

Peter Anskjær (12-09-2004)
Kommentar
Fra : Peter Anskjær


Dato : 12-09-04 19:09

"Knud Gert Ellentoft" <ellentoft@mail.tele.invalid> skrev i en meddelelse
news:p729k0t59vub2pq1iotc84msefer1p8l5f@dtext.news.tele.dk...
> Peter Anskjær skrev:
>
> >Den er jeg klar over, men det kræver jo bare at der er en bredde på
> >indholdsdiven.
> >Håber der findes en løsning på mit problem, ellers må jeg vel leve med
det.
>
> Det er der ikke, for browserne skal jo have en eller anden
> størrelse at centrere ud fra.

Det kan jeg godt se, men i dette tilfælde er der en største bredde diven kan
have og deri er der lidt tom bredde, det kunne være smart hvis der fandtes
en funktionalitet der tog denne ekstra bredde og smed halvdelen af dette på
som margin i hver side.
Løsningen bliver at designe siden med to billeder i hver række og centrere
det, så kender jeg bredden. Dette vil passe perfekt i opløsninger over og
1024px i bredden, i 800*600px vil der være lidt vandret scroll, det er der
ikke noget at gøre ved.

css er rigtigt smart, men på en eller anden måde rammer man altid en
begrænsning som kræver en masse krumspring, men løsningen bliver stadigvæk
mere elegant end brug af tabeller og helt samme funktionalitet.

Mvh
Peter



Knud Gert Ellentoft (12-09-2004)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 12-09-04 19:27

Peter Anskjær skrev:

>Løsningen bliver at designe siden med to billeder i hver række og centrere
>det, så kender jeg bredden. Dette vil passe perfekt i opløsninger over og
>1024px i bredden, i 800*600px vil der være lidt vandret scroll, det er der
>ikke noget at gøre ved.

Hvis du sætter float: left på en div (med width angivet) (f.eks.
med et billede i), så vil der automatisk blive lavet linjeskift,
når der ikke er mere plads i diven udenom.

Så med en <div> på f.eks. 80%, så vil der i et stort vindue,
måske blive vist 5 billeder, i et mindre måske kun 3, og du kan
jo så have en margin på f.eks. 10% i hver side.
--
Knud

Peter Anskjær (12-09-2004)
Kommentar
Fra : Peter Anskjær


Dato : 12-09-04 19:57

"Knud Gert Ellentoft" <ellentoft@mail.tele.invalid> skrev i en meddelelse
news:pj49k0tuk2k0avdjqfhrv46mipufts6cba@dtext.news.tele.dk...
>
> Hvis du sætter float: left på en div (med width angivet) (f.eks.
> med et billede i), så vil der automatisk blive lavet linjeskift,
> når der ikke er mere plads i diven udenom.

Det er jeg klar over.
>
> Så med en <div> på f.eks. 80%, så vil der i et stort vindue,
> måske blive vist 5 billeder, i et mindre måske kun 3, og du kan
> jo så have en margin på f.eks. 10% i hver side.

Det er jeg også klar over, men problemet er jo stadigvæk at jeg har en menu
på 150px i den ene side og skal bruge 170px luft på den anden, så hvis jeg
sætter 15% margin i hver side kommer det måske nok til at passe i 1024*768px
men overhovedet ikke i 800*600 og heller ikke optimalt i højere opløsning
end 1024*768.
Den løsning jeg først havde bestemt mig for ved jeg ikke om den duer
alligevel, IE skubber desværre menuen ned i stedet for at lave vandret
scroll når siden bliver for smal.
Jeg kunne godt tænke mig et flexibelt design som ikke er afhængigt af
opløsning og samtidigt have indholdet før menuen. Men nu ser det måske ud
til at jeg må have menuen først for at få det til at opføre sig ordentligt
hvor jeg samtidigt har disse divs centreret. Alternativt kan jeg floate dem
allesammen uden at centrere dem og derved beholde det hele som det er nu.
Det er frustrende synes jeg. Jeg synes det ville være en god funktionalitet
at have en div der blev maksimal bredde uden spildplads i bredden og som var
centreret, men det findes jo ikke og om det så kom i morgen ville det jo
ikke være understøttet ordentligt før om flere år, så det er jo bare
ønsketænkning.

Mvh
Peter



Lobais (13-09-2004)
Kommentar
Fra : Lobais


Dato : 13-09-04 15:30

Sun, 12 Sep 2004 16:46:42 +0200. skrev Peter Anskjær:

> Hej NG
> Jeg har en side med nogle venstre floats, der er jo smart da jeg så altid
> får udnyttet sidebredden uafhængigt af opløsning. Nu er tingen så at jeg
> gerne vil have lige meget margin i begge sider, altså få floats'ne
> centreret, kan det lade sig gøre uden at være tvunget til at give siden en
> bestemt bredde?

Hmmm... Er det noget i denne stil du mener?

#container {
   margin: 0 50px 0 50px;
   clear: both;
}
#a {   float: left; }
#b {   float: right; }

<div id="container">
<div id="a"></div>
<div id="b"></div>
</div>


--
Lobais - http://thomas.ahle.dk/
Einstein - Science without religion is lame, religion without science is blind.


Peter Anskjær (13-09-2004)
Kommentar
Fra : Peter Anskjær


Dato : 13-09-04 15:56

"Lobais" <thomas@ahle.dk> skrev i en meddelelse
news:pan.2004.09.13.14.29.57.410613@ahle.dk...
>
> Hmmm... Er det noget i denne stil du mener?
>
> #container {
> margin: 0 50px 0 50px;
> clear: both;
> }
> #a { float: left; }
> #b { float: right; }
>
> <div id="container">
> <div id="a"></div>
> <div id="b"></div>
> </div>
>
Vil din clear: both virke på de elementer der er inde i container, det tror
jeg da ikke.
Men det er i hvert tilfælde ikke det jeg leder efter, jeg leder efter en
måde hvorpå jeg kan centrere en "kolonne", på det link jeg har lagt er der
en bestemt margin i venstre side og en variabel i højre alt efter opløsning,
jeg ville gerne at denne margin i højre side kunne deles ud så den både var
i venstre og højre side, men jeg har meget på fornemmelsen at det ikke kan
lade sig gøre med de muligheder der er i dag.
Problemet er jo, at hvis der er 500px til rådighed i bredden og hver enkelt
div der er floatet left er 200px vil der være 100px ekstra margin i højre
side, det ser jo lidt tosset ud. Ved at angive en fast bredde på f.eks 400px
kan jeg godt se det kan lade sig gøre, men jeg ville gerne have det sådan at
der kun bliver vist en div i hver række når det er nødvendigt ved f.eks
opløsning 800*600px og 3 i hver række når der er plads til det, et
fleksibelt design.

Men tak for forsøget.

Mvh
Peter



Søg
Reklame
Statistik
Spørgsmål : 177502
Tips : 31968
Nyheder : 719565
Indlæg : 6408534
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste