---

Eksempel og kode : http://scootergrisen.dk/test/test0001.html

Jeg har en rød boks og en grøn boks som jeg gerne vil have på samme
linie hele tiden.

Hvordan undgår jeg at den grønne boks hopper ned på næste linie når
browser vinduet gøres smallere ?

Jeg bruger firefox men vil gerne have koden virker ens i alle
browsere.

---

scootergrisen kom med denne ide:
> Eksempel og kode : http://scootergrisen.dk/test/test0001.html
>
> Jeg har en rød boks og en grøn boks som jeg gerne vil have på samme
> linie hele tiden.
>
> Hvordan undgår jeg at den grønne boks hopper ned på næste linie når
> browser vinduet gøres smallere ?
>
> Jeg bruger firefox men vil gerne have koden virker ens i alle
> browsere.

ved at sætte en passende bredde på rammen der omgiver dem.
f.eks
#cols {
min-width : 800px;
}

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

> ved at sætte en passende bredde på rammen der omgiver dem.
> f.eks
> #cols {
> min-width : 800px;
>
> }

Det hjalp ikke. Jeg har lavet om på koden og tilføjet mere tekst.
Den grønne boks har nu meget tekst. Den hopper ned på næste linie
under den røde boks.
Men jeg vil gerne have at den står lige til højre for den røde boks.

---

scootergrisen sendte dette med sin computer:
>> ved at sætte en passende bredde på rammen der omgiver dem.
>> f.eks
>> #cols {
>> min-width : 800px;
>>
>> }
>
> Det hjalp ikke. Jeg har lavet om på koden og tilføjet mere tekst.
> Den grønne boks har nu meget tekst. Den hopper ned på næste linie
> under den røde boks.
> Men jeg vil gerne have at den står lige til højre for den røde boks.

Så må du dele pladsen, med en max-width til elementerne i hver side, så
de fordeler pladsen mellem sig på den måde.
Men du er stadig nødt til at have min-width på de omgivende.
(De to max-width skal selvfølgelig tilsammen være <= min-width på det
omgivende)

Prøv det lige - der bliver nok et problem, hvis der er plads nok, at
det højre ikke vil fylde det hele ud...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Den 30-09-2010 03:55, scootergrisen skrev:
> Eksempel og kode : http://scootergrisen.dk/test/test0001.html
>
> Jeg har en rød boks og en grøn boks som jeg gerne vil have på samme
> linie hele tiden.
>
> Hvordan undgår jeg at den grønne boks hopper ned på næste linie når
> browser vinduet gøres smallere ?
>
> Jeg bruger firefox men vil gerne have koden virker ens i alle
> browsere.

Jeg ser en rød boks med ganske lidt tekst i og
en grøn boks med en masse tekst i. Den grønne
boks starter i venstre margin.

Er du sikker på at du ikke mener, at de to bokse
skal holde overkant?

Og til dit spørgsmål kan jeg svare
1. Din side validerer ikke på det simple
at du mangler de helt fundamentale markører
som HTML, BODY etc.

Og hvorfor bruge span til to elementer der
helt indlysende er blokelementer?

Det ønskede kan givetvis opnås ved
div.colleft{
float:left;
}

div.colleft{
width:200px;
border:1px solid #f00;
}

div.colright{
border:1px solid #0f0;
margin-left:210 px;
}

Så vil højre boks flyde op
på højre side af venstre boks
med an margin til venstre på 10
pixel.

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

Den 30-09-2010 14:43, Jørgen Farum Jensen skrev:
> Den 30-09-2010 03:55, scootergrisen skrev:
>> Eksempel og kode : http://scootergrisen.dk/test/test0001.html
>>
>> Jeg har en rød boks og en grøn boks som jeg gerne vil have
>> på samme
>> linie hele tiden.

.....

Og hvorfor clientside gruppen når CSS almindeligvis
er i HTML-gruppen?


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

> Er du sikker på at du ikke mener, at de to bokse
> skal holde overkant?

Jo det var nok det jeg mente men det kan være svært at forklare.

> Og til dit spørgsmål kan jeg svare
> 1. Din side validerer ikke på det simple
> at du mangler de helt fundamentale markører
> som HTML, BODY etc.

nej jeg ved godt den ikke er valid men det er heller ikke mine
endelige kode. Jeg har tage den kode ud som det handlede om så det var
lettere at læse koden for andre.

> Og hvorfor bruge span til to elementer der
> helt indlysende er blokelementer?

Det kan muligvis skyldes at jeg har prøvet at validere koden også den
har sagt at <div> skulle laves om til <span> fordi det har den gjort
en del gange i min kode.

> Det ønskede kan givetvis opnås ved
> div.colleft{
>     float:left;
>     }
>
> div.colleft{
>     width:200px;
>     border:1px solid #f00;
>     }
>
> div.colright{
>     border:1px solid #0f0;
> margin-left:210 px;
>     }
>

Du manglede bare lige :

..colleft, .colright{
display:block;
}

så virker det sku :) jaaaa

Jeg har opdateret koden endnu en gang så i kan se hvordan det var den
rigtig skulle se ud : http://scootergrisen.dk/test/test0001.html

Det utrolig så længe jeg kan sidde og roden med koden også ender det
med kun at være 3 linier som skal tilføjes/rettes.

Men det fordi jeg har en anden måde at tænke på. Jeg bruger sjældent
margin-left til at placer en div eller span med.

Og til Jørgen > Tja det vel lige meget hvor man skriver men nu skrev
jeg bare her fordi CSS er et klientside sprog og fordi det ikke er
HTML. Men kan da godt prøve og kigge mere i den kategori i fremtiden.

---

Følgende er skrevet af scootergrisen:
>> Er du sikker på at du ikke mener, at de to bokse
>> skal holde overkant?
>
> Jo det var nok det jeg mente men det kan være svært at forklare.
>
>> Og til dit spørgsmål kan jeg svare
>> 1. Din side validerer ikke på det simple
>> at du mangler de helt fundamentale markører
>> som HTML, BODY etc.
>
> nej jeg ved godt den ikke er valid men det er heller ikke mine
> endelige kode. Jeg har tage den kode ud som det handlede om så det var
> lettere at læse koden for andre.
>
>> Og hvorfor bruge span til to elementer der
>> helt indlysende er blokelementer?
>
> Det kan muligvis skyldes at jeg har prøvet at validere koden også den
> har sagt at <div> skulle laves om til <span> fordi det har den gjort
> en del gange i min kode.
>
>> Det ønskede kan givetvis opnås ved
>> div.colleft{
>>     float:left;
>>     }
>>
>> div.colleft{
>>     width:200px;
>>     border:1px solid #f00;
>>     }
>>
>> div.colright{
>>     border:1px solid #0f0;
>> margin-left:210 px;
>>     }
>>
>
> Du manglede bare lige :
>
> .colleft, .colright{
> display:block;
> }
>
> så virker det sku :) jaaaa
>
> Jeg har opdateret koden endnu en gang så i kan se hvordan det var den
> rigtig skulle se ud : http://scootergrisen.dk/test/test0001.html
>
> Det utrolig så længe jeg kan sidde og roden med koden også ender det
> med kun at være 3 linier som skal tilføjes/rettes.
>
> Men det fordi jeg har en anden måde at tænke på. Jeg bruger sjældent
> margin-left til at placer en div eller span med.
>
> Og til Jørgen > Tja det vel lige meget hvor man skriver men nu skrev
> jeg bare her fordi CSS er et klientside sprog og fordi det ikke er
> HTML. Men kan da godt prøve og kigge mere i den kategori i fremtiden.

Spørgsmål om CSS, hører til i HTML.
clientside er til scripting på clientside (javascript).
Du kan finde fundatserne på http://usenet.dk

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Den 30-09-2010 17:00, scootergrisen skrev:

> nej jeg ved godt den ikke er valid men det er heller ikke mine
> endelige kode. Jeg har tage den kode ud som det handlede om så det var
> lettere at læse koden for andre.

Jo, det er også fint nok. Men pointen er
at du ikke kan regne med nogetsomhelst
når en side har så fatale fejl som din
testside.

>> Og hvorfor bruge span til to elementer der
>> helt indlysende er blokelementer?
>
> Det kan muligvis skyldes at jeg har prøvet at validere koden også den
> har sagt at<div> skulle laves om til<span> fordi det har den gjort
> en del gange i min kode.

Jeg gætter på at det er fordi du har prøvet at sætte
en div (et blok-element) inden i et inline
element, span eller a.


>> Det ønskede kan givetvis opnås ved
>> div.colleft{
>> float:left;
>> }
>>
>> div.colleft{
>> width:200px;
>> border:1px solid #f00;
>> }
>>
>> div.colright{
>> border:1px solid #0f0;
>> margin-left:210 px;
>> }
>>
>
> Du manglede bare lige :
>
> .colleft, .colright{
> display:block;
> }

Nej, se nedenstående.
> så virker det sku :) jaaaa
>
> Jeg har opdateret koden endnu en gang så i kan se hvordan det var den
> rigtig skulle se ud : http://scootergrisen.dk/test/test0001.html
>
> Det utrolig så længe jeg kan sidde og roden med koden også ender det
> med kun at være 3 linier som skal tilføjes/rettes.

Plus nogle linjer i din HTML-kode. Fordi det virker
behøver det jo ikke være rigtigt.

Et div-element er et blokelement, der indsætter
et linjeskift og antager hele websidens bredde,
medmindre man påtrykker det en bredde. Et p-element
er naturligt blokelement.

Modsætningsvis er et span-element et inline element,
der antager den bredde indholdet tilsiger.

Du kan forandre de to elementers grundlæggende
egenskaber ved at ændre et span-element til et
blokelement, og ved at ændre et div-element til
et inline-element. Men hvorfor det? Det svarer
lidt til at give et h1-element den mindste skrift-
størrelse og et h6-element den største skriftstørrelse.

Så kort sagt: Det er logisk forkert at bruge
span-elementet som du gør.


> Men det fordi jeg har en anden måde at tænke på. Jeg bruger sjældent
> margin-left til at placer en div eller span med.

Men hvis det højre element ikke har en rigelig
venstre margin, hvor skal det venstre element
så float'e hen? (Det er lidt omvendt sagt af
de virkelige forhold - men måske mere forståeligt).

Du kan jo prøve at undlade denne brede margin og så se
hvad der sker

> Og til Jørgen> Tja det vel lige meget hvor man skriver men nu skrev
> jeg bare her fordi CSS er et klientside sprog og fordi det ikke er
> HTML. Men kan da godt prøve og kigge mere i den kategori i fremtiden.


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..