|
|
 | 3 kasser - og opløsning
Fra : Stefan Køberl |
Dato : 21-06-06 12:40 |
|
Hej.
Her på siden: www.infoscape.dk/css/boks1.html
har jeg som nogle af jer nok kan se, 3 kasser.
Mit problem er bare, at har man en lav opløsning, så går kasserne
ind over hinanden, og det hele ser total uoverskueligt ud.
Hvad skal jeg gøre, for både at tilpasse det browservinduets
størrelse?
Og virker det i alle jeres browsere, med en nogenlunde stor
opløsning?
Jeg har på fornemmelsen af, at jeg skal skifte position: absolute
ud med noget position: relative, eller noget i den stil?
Er ny i css, og på bar bund lige nu, så håber på lidt hjælp :)
Mvh. Stefan
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
 Jens Gyldenkærne Cla~ (21-06-2006)
| Kommentar
Fra : Jens Gyldenkærne Cla~ |
Dato : 21-06-06 13:02 |
|
Stefan Køberl skrev:
> Mit problem er bare, at har man en lav opløsning, så går kasserne
> ind over hinanden, og det hele ser total uoverskueligt ud.
Det er ikke dit eneste problem.
Du positionerer to bokse fra venstre side og en fra højre side -
det betyder at den sidste (orange) boks fiser rundt når man ændrer
browservinduets bredde, mens de to andre bliver stående.
> Og virker det i alle jeres browsere, med en nogenlunde stor
> opløsning?
Nej - langt fra. På min skærm - med 1280px i bredden - er der ikke
plads nok til at vise den gule og den orange boks adskilt. I mindre
opløsninger - der er ganske almindelige - bliver det langt værre.
Du skal opbygge din side helt anderledes. Hvis du vil positionere
bokse med en fast størrelse, skal du gøre det i en ramme hvor der
er plads til det. Det kunne fx være noget a la:
<div id="ramme">
<div id="boks1">Gul</div>
<div id="boks2">Orange</div>
<div id="boks3">Sort</div>
</div>
- med tilhørende css:
#ramme{
position: relative; /* [1] */
margin: auto; /* centrering af boksen */
width: 800px; /* [2] */
height: 700px; /* [2] */
#boks1{
position: absolute;
top: 0; /* - i forhold til #ramme */
left: 0; /* - i forhold til #ramme */
}
#boks2{
position: absolute;
top: 0;
right: 0;
}
#boks3{
position: absolute;
bottom: 0;
left: 200px;
}
> Jeg har på fornemmelsen af, at jeg skal skifte position: absolute
> ud med noget position: relative, eller noget i den stil?
Du er på vej i den rigtige retning. Pointen er at du ikke skal
positionere i forhold til browservinduet, men i forhold til et
rammeobjekt - og dette rammeobjekt skal have position: relative;
Derudover har du en del fejl i såvel html- som css-koden. Det er en
god ide at bruge lidt tid på at få dem rettet.
Se evt. her: < http://www.html-faq.dk/1005.asp> og her
< http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html
| |
Stefan Køberl (21-06-2006)
| Kommentar
Fra : Stefan Køberl |
Dato : 21-06-06 13:41 |
|
> Du skal opbygge din side helt anderledes. Hvis du vil positionere
> bokse med en fast størrelse, skal du gøre det i en ramme hvor der
> er plads til det.
Tak for det hurtige svar. Har prøvet dit eksempel, og den slags
kodeværk er jo helt nyt for mig. eg ved at det er lettetst at starte
helt fra bunden, men bliver nødt til at springe et par leksioner over,
da jeg skal være færdig med det senest torsdag aften.
Mit problem er nu, at den ikke viser noget på skærmen. Det er nok et
ret dumt spørgsmål, og et ret så simpelt svar, men har ikke tid til at
sidde og prøve mig frem lige pt.
KOde:
<html>
<head>
<title>Boks2</title>
<style type="text/css">
body{
background-color: white;
font-family: arial, verdana, helvetica;
font-size: 16px;
font-weight: bold;
}
#ramme{
position: relative;
margin: auto;
width: 800px;
height: 700px;
}
#boks1{
position: absolute;
color: white;
background-color: yellow;
top: 0;
left: 0;
}
#boks2{
color: white;
background-color: yellow;
position: absolute;
top: 0;
right: 0;
}
#boks3{
color: white;
background-color: yellow;
position: absolute;
bottom: 0;
left: 200px;
}
</head>
<body>
<div id="ramme">
<div id="boks1">Gul</div>
<div id="boks2">Orange</div>
<div id="boks3">Sort</div>
</div>
</body>
</html>
Man må vel godt lave color erklæringer i css'et?
Håber du kan hjælpe mig et skridt videre :)
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
 Jørgen Farum Jensen (21-06-2006)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 21-06-06 14:13 |
|
Stefan Køberl wrote:
>>Du skal opbygge din side helt anderledes. Hvis du vil positionere
>>bokse med en fast størrelse, skal du gøre det i en ramme hvor der
>>er plads til det.
>
>
> Tak for det hurtige svar. Har prøvet dit eksempel, og den slags
> kodeværk er jo helt nyt for mig. eg ved at det er lettetst at starte
> helt fra bunden, men bliver nødt til at springe et par leksioner over,
> da jeg skal være færdig med det senest torsdag aften.
>
> Mit problem er nu, at den ikke viser noget på skærmen. Det er nok et
> ret dumt spørgsmål, og et ret så simpelt svar, men har ikke tid til at
> sidde og prøve mig frem lige pt.
>
> KOde:
> <html>
> <head>
> <title>Boks2</title>
> <style type="text/css">
> body{
> background-color: white;
> font-family: arial, verdana, helvetica;
> font-size: 16px;
> font-weight: bold;
> }
> #ramme{
> position: relative;
> margin: auto;
> width: 800px;
> height: 700px;
> }
> #boks1{
> position: absolute;
> color: white;
> background-color: yellow;
> top: 0;
> left: 0;
> }
> #boks2{
> color: white;
> background-color: yellow;
> position: absolute;
> top: 0;
> right: 0;
> }
> #boks3{
> color: white;
> background-color: yellow;
> position: absolute;
> bottom: 0;
> left: 200px;
> }
> </head>
> <body>
> <div id="ramme">
> <div id="boks1">Gul</div>
> <div id="boks2">Orange</div>
> <div id="boks3">Sort</div>
> </div>
> </body>
> </html>
>
> Man må vel godt lave color erklæringer i css'et?
>
> Håber du kan hjælpe mig et skridt videre :)
>
>
>
body{
background-color: white;
font-family: arial, verdana, helvetica;
font-size: 16px;
font-weight: bold;
}
#ramme{
position: relative;
margin: auto;
width: 90%;
height: 700px;
}
#boks1{
position: absolute;
color: white;
background-color: yellow;
top: 0;
left: 0;
width:200px;
}
#boks2{
color: white;
background-color: yellow;
margin-left:220px;
margin-right:220px;
}
#boks3{
color: white;
background-color: yellow;
position: absolute;
bottom: 0;
right:0;
width:200px;
}
Ovenstående vil tegne et hvidt element med
en venstre og højre margin i forhold til
#ramme-elementet på 220 pixel; Elementets
bredde vil afhænge af browservindues bredde.
De brede marginer giver plads til den højre
og venstre boks.
Jeg håber for dig, det blot er en øvelse,
for den absolutte højde kommer med garanti
tilbage og bider dig et vist sted.
--
Med venlig hilsen
Jørgen Farum Jensen
http://www.webdesign101.dk
..
| |
Stefan Køberl (21-06-2006)
| Kommentar
Fra : Stefan Køberl |
Dato : 21-06-06 14:43 |
|
> Ovenstående vil tegne et hvidt element med
> en venstre og højre margin i forhold til
> #ramme-elementet på 220 pixel; Elementets
> bredde vil afhænge af browservindues bredde.
Ok, men er det ikke muligt at bruge span i stedet for div, og hvor skal
indholdet stå? Den viser ikke indholdet, hvis man fx laver det i span.
> Jeg håber for dig, det blot er en øvelse,
> for den absolutte højde kommer med garanti
> tilbage og bider dig et vist sted.
Det er det som sådan. Men det er til 80 andre unge.
Det var egentlig meningen det kun skulle være et fotoalbum, men synes
ligesom at en indledning, vil sætte prikket over i'et :)
Problemet er jo bare at jeg stadig ikke koder så kønt, ¨selvom jeg er igang
med en masse bøger ´;)
Hvad vil du foretrække, hvis jeg bare skal lave en slags
indholdsfortegnelse, eller en slags portal for dem. Det må være alt, jeg
synes bare det skal være noget layout, og ikke bare tekst det hele.
Mvh. Stefan
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Stefan Køberl (22-06-2006)
| Kommentar
Fra : Stefan Køberl |
Dato : 22-06-06 13:43 |
|
> Jeg håber for dig, det blot er en øvelse,
> for den absolutte højde kommer med garanti
> tilbage og bider dig et vist sted.
Som sagt, er der en helt årgang der skal se det, så det er en smule vigtigt
at 'kasserne' står rigtigt (som på min skærm.)
MEn hvad er problemet med højden, kan jeg ikke bare sætte en højde på, hver
af kasserne? Vil det ikke virke i alle browsere?
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Stefan Køberl (22-06-2006)
| Kommentar
Fra : Stefan Køberl |
Dato : 22-06-06 13:43 |
|
> Jeg håber for dig, det blot er en øvelse,
> for den absolutte højde kommer med garanti
> tilbage og bider dig et vist sted.
Som sagt, er der en helt årgang der skal se det, så det er en smule vigtigt
at 'kasserne' står rigtigt (som på min skærm.)
MEn hvad er problemet med højden, kan jeg ikke bare sætte en højde på, hver
af kasserne? Vil det ikke virke i alle browsere?
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Jens Gyldenkærne Cla~ (21-06-2006)
| Kommentar
Fra : Jens Gyldenkærne Cla~ |
Dato : 21-06-06 14:27 |
|
Stefan Køberl skrev:
> Tak for det hurtige svar. Har prøvet dit eksempel, og den
> slags kodeværk er jo helt nyt for mig. eg ved at det er
> lettetst at starte helt fra bunden, men bliver nødt til at
> springe et par leksioner over, da jeg skal være færdig med det
> senest torsdag aften.
Hvis det bare er startsiden der driller, skulle det ikke være noget
problem at starte fra bunden.
> Mit problem er nu, at den ikke viser noget på skærmen. Det er
> nok et ret dumt spørgsmål, og et ret så simpelt svar, men har
> ikke tid til at sidde og prøve mig frem lige pt.
Vis os din side - det er 100 gange lettere at se problemet når det
ligger online end når du bare lægger koden i et usenetindlæg.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html
| |
Stefan Køberl (21-06-2006)
| Kommentar
Fra : Stefan Køberl |
Dato : 21-06-06 19:55 |
|
> Hvis det bare er startsiden der driller, skulle det ikke være noget
> problem at starte fra bunden.
Rigtigt, der er kun 1 side, som de skal se. Det eneste der skal være,
er et link til min mail, og et link til et fotoalbum. Andet skal de
ikke have adgang til. Så det burde ikke være så slemt. Spørgsmålet er
bare hvad jeg skal bruge? (Inddeling af siden, eller noget andet
enkelt grafik)
Jamen den allerførste som jeg godt kan lide hvis man ser den i IE
hedder:
www.infoscape.dk/css/boks1.html
Den anden, som jeg prøvede med inddeling hedder:
www.infoscape.dk/css/test.html
Jeg kan bedst lide det første, men det er nok fordi jeg ikke kan finde
ud af det andet. Er som sagt første gang med css. Efter fredag vil jeg
starte fra bunden.
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Erik Ginnerskov (21-06-2006)
| Kommentar
Fra : Erik Ginnerskov |
Dato : 21-06-06 22:04 |
| | |
Stefan Køberl (22-06-2006)
| Kommentar
Fra : Stefan Køberl |
Dato : 22-06-06 14:35 |
|
> Hvis du afslutter styleblokken i head med </style>, kan browserne finde ud
> af at vise din side. Som det er nu, bliver dine styledefinitioner vist som
> tekst i stedet.
Nå ja, det er jo ret så simpelt. Tak for hjælpen.
Jørgen Farum Jensen skrev tidligere at højden vil give problemer, men dette
går vel ikke ud over det færdige resultat i de forskellige browsere?
Kan man ikke bare sætte en højde på, eller hvad er problemet her?
Jeg prøvede lige det nye eksempel, bare lidt for sjov.
( www.infoscape.dk/css/testtest.html)
Kan det ses ordentligt i alle browsere (uanset browser og opløsning,) nu når
jeg har brugt en ramme ;)
På forhånd tak.
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Jørgen Farum Jensen (22-06-2006)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 22-06-06 15:05 |
|
Stefan Køberl wrote:
> Jeg prøvede lige det nye eksempel, bare lidt for sjov.
> ( www.infoscape.dk/css/testtest.html)
>
> Kan det ses ordentligt i alle browsere (uanset browser og opløsning,) nu når
> jeg har brugt en ramme ;)
Man kan se noget i alle browsere. Kønt er det jo ikke,
men det er vel en smagssag.
2 ting:
1.
For at få dit #ramme-element
vandret centreret i IE skal du
eksplicit sætte margin-left og
margin-right på #ramme-elementet,
enten
margin-right:auto;
margin-left:auto;
eller
margin: 0 auto 0 auto;
eller
margin: 0 auto;
2.
Ang højde:
En eksplicit højde på et html-element
er sjældent af det gode. Hvad skal der
ske med indhold, der ikke er plads til?
Betænk, at brugeren fuldstændigt kan
kontrollere /bredden/ af din hjemmeside.
I dette layout vil bredden af den midterste
kolonne være omkr. 550 pixel bredt pixel
i et browservindue, der er 1024 pixel
bredt.
Sætter vi nu at teksten i den midterste
kolonne lige netop kan være der, når kolonnen
er 700 pixel høj, hvordan skal det så kunne
være der hvis det bliver 200 pixel smallere?
vindue.
Og hvorfor lige 700 pixel - det svarer jo
ikke til noget i det virkelige liv?
--
Med venlig hilsen
Jørgen Farum Jensen
http://www.webdesign101.dk
..
| |
Frank Olieu (22-06-2006)
| Kommentar
Fra : Frank Olieu |
Dato : 22-06-06 15:16 |
|
Stefan Køberl <steffi100_2@hotmail.com> wrote in
news:449a9c76$0$15786$14726298@news.sunsite.dk:
> Kan det ses ordentligt i alle browsere (uanset browser og opløsning,) nu
> når jeg har brugt en ramme ;)
Siden vises i "quirks mode" (pga. manglende Doctype-erklæring), derfor
ignorerer IE centrering af din #ramme.
Er det tilsigtet?
--
Venlig hilsen | Kind regards | Cordialement
Frank
| |
Stefan Køberl (22-06-2006)
| Kommentar
Fra : Stefan Køberl |
Dato : 22-06-06 16:37 |
|
> Siden vises i "quirks mode" (pga. manglende Doctype-erklæring), derfor
> ignorerer IE centrering af din #ramme.
> Er det tilsigtet?
Hov undskyld, har rettet lidt i fejlene siden.
Den nye side er, www.infoscape.dk/css/1.html
Sjove filnavne, men bare forskellige tests, indtil jeg (som jeg har nu)
fundet det rigtige.
Det eneste jeg mangler nu, er den allerførste fejl (og den sidste,) som siger
at <html> start og slut-tag ikke passer ind i sammenhængen. Hvad skal jeg
gøre for at rette det?
Og tak for hjælpen alle sammen. I siger at det virker i alle browsere, og at
man kan se alle kasser, er det ordentligt man kan, eller er det kun en
sammenligning med den første side jeg henviste til? (Hvis det ikke er bøvlet,
kunne jeg godt tænke mig et enkelt printscreen.) :)
Mange tak for de hurtige svar. Og tålmodigheden ;D
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
Frank Olieu (22-06-2006)
| Kommentar
Fra : Frank Olieu |
Dato : 22-06-06 17:01 |
|
Stefan Køberl <steffi100_2@hotmail.com> wrote in
news:449ab901$0$15786$14726298@news.sunsite.dk:
> Det eneste jeg mangler nu, er den allerførste fejl (og den sidste,) som
> siger at <html> start og slut-tag ikke passer ind i sammenhængen. Hvad
> skal jeg gøre for at rette det?
Bare flytte <meta> ind i <head>-sektionen :)
--
Venlig hilsen | Kind regards | Cordialement
Frank
| |
Jens Gyldenkærne Cla~ (21-06-2006)
| Kommentar
Fra : Jens Gyldenkærne Cla~ |
Dato : 21-06-06 15:19 |
|
Stefan Køberl skrev:
> Ok, men er det ikke muligt at bruge span i stedet for div, og
> hvor skal indholdet stå? Den viser ikke indholdet, hvis man fx
> laver det i span.
Span er beregnet til inline-indhold, div er beregnet til blokke.
Dine tre bokse er helt klart noget der bør ligge i div, ikke i
span.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html
| |
Jens Gyldenkærne Cla~ (22-06-2006)
| Kommentar
Fra : Jens Gyldenkærne Cla~ |
Dato : 22-06-06 15:02 |
|
Stefan Køberl skrev:
> Jørgen Farum Jensen skrev tidligere at højden vil give
> problemer, men dette går vel ikke ud over det færdige resultat
> i de forskellige browsere?
Hvorfor vil du sætte en fast højde på siden?
> Jeg prøvede lige det nye eksempel, bare lidt for sjov.
> ( www.infoscape.dk/css/testtest.html)
>
> Kan det ses ordentligt i alle browsere (uanset browser og
> opløsning,) nu når jeg har brugt en ramme ;)
Det er *meget* bedre. Siden skalerer nu fint fra ca. 680px og
opefter. Vil man lave det ekstra fint, kan man sætte en min-width
på rammen, så man ikke risikerer at midterkolonnen helt forsvinder
- men det er småting i forhold til før.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html
| |
|
|