|
| Kan man sætte en boks ind i en spalte? Fra : Sanne Bloch |
Dato : 08-08-07 16:57 |
|
Hej
Hvis man kan, hvor/hvordan skal den sættes ind i css for at blive sat ind i
f.eks. spalte 02? Og kan jeg bruge position:absolute; (til en boks) i
spalter?
Jeg har lavet adskillige forgæves forsøg. Og jeg har surfet rundt på nogle
af alle de sider med hjælp til html/css, som der henvises til her i gruppen,
men jeg må alligevel ty til jeres hjælp.
#spalte01 {
float:left;
width: 15%;
}
#spalte02 {
float:left;
width: 50%;
}
#spalte03 {
float:left;
width: 34%;
}
body {
background-color:#fff4eb;
font-size:0.9em;
font-family: Arial, Verdana, sans-serif;
color:#8b4513;
}
Venlige hilsner fra Sanne
| |
Jørgen Farum Jensen (08-08-2007)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 08-08-07 19:08 |
|
Sanne Bloch skrev:
> Hej
>
> Hvis man kan, hvor/hvordan skal den sættes ind i css for at blive sat ind i
> f.eks. spalte 02? Og kan jeg bruge position:absolute; (til en boks) i
> spalter?
>
>
>
> Jeg har lavet adskillige forgæves forsøg. Og jeg har surfet rundt på nogle
> af alle de sider med hjælp til html/css, som der henvises til her i gruppen,
> men jeg må alligevel ty til jeres hjælp.
>
>
>
> #spalte01 {
>
> float:left;
>
> width: 15%;
>
> }
>
>
>
> #spalte02 {
>
> float:left;
>
> width: 50%;
>
> }
>
>
>
> #spalte03 {
>
> float:left;
>
> width: 34%;
>
> }
>
>
>
> body {
>
> background-color:#fff4eb;
>
> font-size:0.9em;
>
> font-family: Arial, Verdana, sans-serif;
>
> color:#8b4513;
>
> }
>
>
>
> Venlige hilsner fra Sanne
>
>
>
En boks inde i spalte02 skal først og fremmest
sættes ind i html-koden:
<div id="spalte02">
<div id="box">
Boksens indhold
</div>
</div>
#box-elementet får samme bredde som
#spalte02 og føjer sig ind i
elementernes almindelige omløb. Der
er ingen grund til at positionere det.
position:absolute sker i forhold
til det overordnede element. Hvis
dette skal være spalte02, skal dette
have egenskaben position:relative;
Men vær opmærksom på, at et absolut
positioneret element bliver til et
lag, der så at sige svæver over siden
og dækker for indholdet under det.
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
| |
Bertel Lund Hansen (08-08-2007)
| Kommentar Fra : Bertel Lund Hansen |
Dato : 08-08-07 20:08 |
|
Sanne Bloch skrev:
> Hvis man kan, hvor/hvordan skal den sættes ind i css for at blive sat ind i
> f.eks. spalte 02?
Jeg har lavet spalter på Fidusos sider ved at indramme indholdet
i to div'er med klassen 'spalte' som jeg floater til venstre.
Men der er ingen automatik. Når jeg tilføjer tekst, må jeg
manuelt flytte skillepunktet så spalterne er cirka lige store.
Her er min erklæring til 'spalte':
..spalte {
float: left;
margin: 0;
padding: 0.5em;
width: 45%;
}
> Og kan jeg bruge position:absolute; (til en boks) i spalter?
Det er ikke velegnet. Se Jørgens svar.
--
Bertel
http://bertel.lundhansen.dk/ http://fiduso.dk/
| |
Sanne Bloch (08-08-2007)
| Kommentar Fra : Sanne Bloch |
Dato : 08-08-07 22:09 |
|
"Bertel Lund Hansen" <unospamo@lundhansen.dk> skrev i en meddelelse
news:oln1u8t9bgh4$.e2dilqv0p7mo.dlg@40tude.net...
> Sanne Bloch skrev:
>
>> Hvis man kan, hvor/hvordan skal den sættes ind i css for at blive sat ind
>> i
>> f.eks. spalte 02?
>
> Jeg har lavet spalter på Fidusos sider ved at indramme indholdet
> i to div'er med klassen 'spalte' som jeg floater til venstre.
>
> Men der er ingen automatik. Når jeg tilføjer tekst, må jeg
> manuelt flytte skillepunktet så spalterne er cirka lige store.
>
> Her er min erklæring til 'spalte':
>
> .spalte {
> float: left;
> margin: 0;
> padding: 0.5em;
> width: 45%;
> }
>
>> Og kan jeg bruge position:absolute; (til en boks) i spalter?
>
> Det er ikke velegnet. Se Jørgens svar.
>
> --
> Bertel
> http://bertel.lundhansen.dk/ http://fiduso.dk/
Hej og tak til jer begge for svar. Jeg afprøvede Jørgens opskrift uden
positionering og umiddelbart fik jeg det resultat, jeg gerne ville have. Jeg
har endnu ikke fået afprøvet, om jeg får problemer når jeg tilføjer tekst.
Men det gør jeg jo nok.
Min idé med, at sætte en boks ind i en spalte er, at jeg håber på, at
spaltedefinitionen i % får lov til at bestemme sidens placering. Er jeg helt
ude på overdrevet her???
Venlige hilsner fra Sanne
| |
Bertel Lund Hansen (08-08-2007)
| Kommentar Fra : Bertel Lund Hansen |
Dato : 08-08-07 22:14 |
|
Sanne Bloch skrev:
> Min idé med, at sætte en boks ind i en spalte er, at jeg håber på, at
> spaltedefinitionen i % får lov til at bestemme sidens placering. Er jeg helt
> ude på overdrevet her?
Det er lidt uklart hvad du mener. Procentangivelsen er smart,
fordi det betyder at spalterne relativt fylder det samme uanset
hvilken opløsning og vinduesstørrelse brugeren har.
Det er de rammer der omgiver spalterne der bestemmer sidens
placering som helhed - om ikke andet så <body>.
--
Bertel
http://bertel.lundhansen.dk/ http://fiduso.dk/
| |
Sanne Bloch (08-08-2007)
| Kommentar Fra : Sanne Bloch |
Dato : 08-08-07 22:41 |
|
"Bertel Lund Hansen" skrev
> Det er lidt uklart hvad du mener. Procentangivelsen er smart,
> fordi det betyder at spalterne relativt fylder det samme uanset
> hvilken opløsning og vinduesstørrelse brugeren har.
Det er netop fordi jeg gerne vil have, at min side skal kunne ses ordentligt
i forskellige opløsninger.
> Det er de rammer der omgiver spalterne der bestemmer sidens
> placering som helhed - om ikke andet så <body>.
Det er svære sager, det her - bedst som jeg tror, at nu har fattet bare en
lille smule, så kommer der fluks noget, som jeg ikke forstår. Jeg ved end
ikke, at der er rammer, som omgiver spalter. Og i <body> har jeg ikke
angivet noget om placering.
Vil du have ulejlighed med, at forklare det for mig? Jeg vil gerne kunne
forstå det.
Venlige hilsner fra Sanne
| |
Bertel Lund Hansen (08-08-2007)
| Kommentar Fra : Bertel Lund Hansen |
Dato : 08-08-07 23:46 |
|
Sanne Bloch skrev:
>> Det er de rammer der omgiver spalterne der bestemmer sidens
>> placering som helhed - om ikke andet så <body>.
> Det er svære sager, det her - bedst som jeg tror, at nu har fattet bare en
> lille smule, så kommer der fluks noget, som jeg ikke forstår. Jeg ved end
> ikke, at der er rammer, som omgiver spalter. Og i <body> har jeg ikke
> angivet noget om placering.
Med "rammer" mener jeg bare "omgivende div'er". På Fidusos side
ligger spalterne inden i (i hvert fald) tre omgivende div'er. Det
er nogle af dem der danner rammen og de runde hjørner.
Hvis man ikke har omgivende rammer, ligger ens div'er inden i
<body> - uanset om man har givet <body> en opsætning i CSS eller
ej.
Men det er også muligt at få en lille boks (en div) til at ligge
nederst til højre, og så kan man lægge spalter inden i den.
Men jeg tror ikke at det overrasker dig. Det var nok bare min
brug af ordet "rammer" der fik dig til at tro at der var noget du
ikke kendte.
--
Bertel
http://bertel.lundhansen.dk/ http://fiduso.dk/
| |
Jørgen Farum Jensen (08-08-2007)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 08-08-07 22:35 |
|
Sanne Bloch skrev:
> "Bertel Lund Hansen" <unospamo@lundhansen.dk> skrev i en meddelelse
> news:oln1u8t9bgh4$.e2dilqv0p7mo.dlg@40tude.net...
>> Sanne Bloch skrev:
>>
>>> Hvis man kan, hvor/hvordan skal den sættes ind i css for at blive sat ind
>>> i
>>> f.eks. spalte 02?
>> Jeg har lavet spalter på Fidusos sider ved at indramme indholdet
>> i to div'er med klassen 'spalte' som jeg floater til venstre.
>>
>> Men der er ingen automatik. Når jeg tilføjer tekst, må jeg
>> manuelt flytte skillepunktet så spalterne er cirka lige store.
>>
>> Her er min erklæring til 'spalte':
>>
>> .spalte {
>> float: left;
>> margin: 0;
>> padding: 0.5em;
>> width: 45%;
>> }
>>
>>> Og kan jeg bruge position:absolute; (til en boks) i spalter?
>> Det er ikke velegnet. Se Jørgens svar.
>>
>> --
>> Bertel
>> http://bertel.lundhansen.dk/ http://fiduso.dk/
>
> Hej og tak til jer begge for svar. Jeg afprøvede Jørgens opskrift uden
> positionering og umiddelbart fik jeg det resultat, jeg gerne ville have. Jeg
> har endnu ikke fået afprøvet, om jeg får problemer når jeg tilføjer tekst.
> Men det gør jeg jo nok.
>
> Min idé med, at sætte en boks ind i en spalte er, at jeg håber på, at
> spaltedefinitionen i % får lov til at bestemme sidens placering. Er jeg helt
> ude på overdrevet her???
Lidt på vildveje, måske - det er jo svært
at sige, når vi ikke har et link til siden.
Men umiddelbart lyder det som om de to ting
ikke har meget med hinanden at gøre: Sådan som
du beskriver det har du tre spalter, der tilsammen
fylder 99 procent af browservinduets bredde (Det
er lidt meget, hvis du spørger mig - der skal ikke
meget padding eller border til før du kommer over
100 procent, og så går det i stykker)
Inde i den ene spalte har du så et element, der
udfylder /spalten/ 100 procent. Denne boks har
ingen indflydelse på sidens placering i
browservinduet. Hvis du overhovedet kan se det
har du sølle 1 procent tilovers i højre side.
Et par råd:
1. Skaf dig noget mumletekst, for eksempel
her:
http://webdesign101.dk/cssbog/mumle.html
og brug denne tekst som fyld i dine layoutkasser.
2. Giv dine kasser en baggrundsfarve, så kan
du bedre holde styr på dem. Fjern farven igen,
når du ikke længere har brug for den.
3. Lav en container, der indeholder /alt/ på
siden, for eksempel
div#side {
width:90%;
margin:0 auto;
background-color:yellow;
}
Så vil dit indhold fylde 90 procent af browser-
vinduets bredde og være midtstillet i browser-
vinduet. Dine spalters procentbredde beregnes nu
på basis af disse 90 procent.
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
| |
Sanne Bloch (09-08-2007)
| Kommentar Fra : Sanne Bloch |
Dato : 09-08-07 15:34 |
|
"Jørgen Farum Jensen" > skrev:
> Sådan som
> du beskriver det har du tre spalter, der tilsammen
> fylder 99 procent af browservinduets bredde (Det
> er lidt meget, hvis du spørger mig - der skal ikke
> meget padding eller border til før du kommer over
> 100 procent, og så går det i stykker)
>
> Inde i den ene spalte har du så et element, der
> udfylder /spalten/ 100 procent. Denne boks har
> ingen indflydelse på sidens placering i
> browservinduet. Hvis du overhovedet kan se det
> har du sølle 1 procent tilovers i højre side.
Kære Jørgen - jeg er ikke nogen ørn til at lave hjemmesider i html og css,
men jeg gør mig dog umage for, at lære det på en måde, så siden kan ses i
forskellige opløsninger og i forskellige browsere og at koden validerer. Og
selvfølgelig kan jeg finde ud af at 33 x 3 = 99 og at spalterne floater
left.
For nu ikke at blive skræmt væk fra denne gruppe fordi jeg bliver bange for,
at "udstille" min manglende viden, vil jeg vælge, at se positivt på det. For
både du og mange andre her i gruppen har en stor viden, som er til gavn for
de af os, der ikke kan så meget, som I kan. Så jeg glæder mig over, at du
fortæller mig, at 99% er for meget, og at du gør dig ulejlighed med, at
fortælle mig hvorfor.
> 3. Lav en container, der indeholder /alt/ på
> siden, for eksempel
> div#side {
> width:90%;
> margin:0 auto;
> background-color:yellow;
> }
>
> Så vil dit indhold fylde 90 procent af browser-
> vinduets bredde og være midtstillet i browser-
> vinduet. Dine spalters procentbredde beregnes nu
> på basis af disse 90 procent.
Er det nok at indsætte koden i css og så referere til stylesheeten i
html-dokumenterne, eller skal der også sættes en divkode i
html-dokumenterne?
Venlige hilsner fra Sanne
| |
Jørgen Farum Jensen (09-08-2007)
| Kommentar Fra : Jørgen Farum Jensen |
Dato : 09-08-07 16:09 |
|
Sanne Bloch skrev:
>
> Kære Jørgen - jeg er ikke nogen ørn til at lave hjemmesider i html og css,
> men jeg gør mig dog umage for, at lære det på en måde, så siden kan ses i
> forskellige opløsninger og i forskellige browsere og at koden validerer. Og
> selvfølgelig kan jeg finde ud af at 33 x 3 = 99 og at spalterne floater
> left.
Det var nu ikke de mål, der stod i den oprindelige
forespørgsel, men målene på 3 spalter af forskellig
bredde.
> For nu ikke at blive skræmt væk fra denne gruppe fordi jeg bliver bange for,
> at "udstille" min manglende viden, vil jeg vælge, at se positivt på det.
Endelig. Og bliv ikke for nærtagende
Det som alle vi såkaldte "eksperter" nok er
enige om er, at uvidenhed kan man gøre noget
ved. Det forholder sig anderledes med dumhed.
Hvis jeg har lydt lidt irritabel i mine tidligere
svar kan det være fordi jeg lige så lidt som andre
bryder mig om at gætte på meningen med et spørgsmål,
når spørgeren så let som ingenting kunne have indsat
et link til problemsiden i sit spørgsmål.
For
> både du og mange andre her i gruppen har en stor viden, som er til gavn for
> de af os, der ikke kan så meget, som I kan. Så jeg glæder mig over, at du
> fortæller mig, at 99% er for meget, og at du gør dig ulejlighed med, at
> fortælle mig hvorfor.
For min egen regning - ingen årsag.
>
> Er det nok at indsætte koden i css og så referere til stylesheeten i
> html-dokumenterne, eller skal der også sættes en divkode i
> html-dokumenterne?
Der er en sammenhæng mellem et stylesheet
og html-koden på en webside, at du i stylesheet'et
laver formdeklarationer for websidens elementer.
Har du på din webside et element div id="box"
kan du formatere det ved at bruge selektoren
div#box {
formregelblok
}
Du må kun bruge en id én gang på en webside,
er der flere elementer forskellige elementer,
der skal se ens ud, skal de have den samme
klasse:
<div class="box" id="box1">
....
</div>
<div class="box" id="box2">
....
</div>
Begge kasser formateres med class-
selektoren
div.box {
formregelblok
}
Til sidst vover jeg at henvise til
linksene i min signatur...
--
Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..
| |
Sanne Bloch (09-08-2007)
| Kommentar Fra : Sanne Bloch |
Dato : 09-08-07 19:03 |
|
"Jørgen Farum Jensen" skrev
> Hvis jeg har lydt lidt irritabel i mine tidligere
> svar kan det være fordi jeg lige så lidt som andre
> bryder mig om at gætte på meningen med et spørgsmål,
> når spørgeren så let som ingenting kunne have indsat
> et link til problemsiden i sit spørgsmål.
Hej Jørgen
Ja, jeg har følt, at du nogle gange virker irriteret, men har opfattet det
som om du mente, at spørgsmålet var af en sådan karakter, at spørgeren nemt
selv kunne have fundet ud af det.
Dit svar siger noget om, at du seriøst tænker over, hvorfor du bliver
opfattet som irritabel. Stor respekt for det! Det er ikke mange mennesker,
der har den evne. Derfor tak for dit svar og forklaring - og for yderligere
informationer.
Nu vil jeg arbejde videre med min hj.side og med at tilegne mig mere viden.
Og jeg vender helt sikkert tilbage, for jo mere viden jeg får, jo flere
spørgsmål dukker der op.
Og næste gang bliver det med et link
Venlige hilsner fra Sanne
| |
Erik Ginnerskov (09-08-2007)
| Kommentar Fra : Erik Ginnerskov |
Dato : 09-08-07 21:03 |
|
Sanne Bloch wrote:
> Og selvfølgelig kan jeg finde ud af at 33 x 3 = 99
> og at spalterne floater left.
Du har bare her et problem, der ikke er logisk: Summen af spalternes bredde
i procent bør ikke overstige 96 - det har erfaringen vist. Ellers kan nogle
browsere få problemer med at vise spalterne side om side som tænkt.
--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk
| |
Sanne Bloch (09-08-2007)
| Kommentar Fra : Sanne Bloch |
Dato : 09-08-07 21:43 |
|
"Erik Ginnerskov" skrev
> Sanne Bloch wrote:
>
>> Og selvfølgelig kan jeg finde ud af at 33 x 3 = 99
>> og at spalterne floater left.
>
> Du har bare her et problem, der ikke er logisk: Summen af spalternes
> bredde i procent bør ikke overstige 96 - det har erfaringen vist. Ellers
> kan nogle browsere få problemer med at vise spalterne side om side som
> tænkt.
> Erik Ginnerskov
Tak for dit input.
Efter de forskellige svar, jeg har fået, har jeg ændret størrelsen i
spalterne. Når jeg har fået ændret i de sider, jeg har lavet indtil nu (og
fået dem uploadet og valideret), vil jeg nok konsultere jer igen, så jeg kan
få rettet fatale fejl inden jeg fortsætter med flere sider. Sådan at min
basis er i orden inden jeg kører derudad.
Venlige hilsner fra Sanne
| |
Erik Ginnerskov (09-08-2007)
| Kommentar Fra : Erik Ginnerskov |
Dato : 09-08-07 23:35 |
| | |
|
|