|
| Tabel der tilpasser sig indhold Fra : Kurt Hansen |
Dato : 19-10-10 18:21 |
|
Kig engang på denne tabel:
http://www.danacord.dk/test/tabeltest.html
Jeg har sat border om for at tydeliggøre problemet, men har ellers
afholdt mig fra at tilpasse tabellen i HTML.
I MSIE udvider tabellen sig, så cellerne tilpasser sig indholdet
(følger *mine* <br>), mens Firefox voldombryder min tekst.
Disclaimer: Jeg har ikke stylet teksten på nogen måder, så det ser
ikke pænt ud, men glem det i denne forbindelse.
P.S. Hvilken CSS skal jeg bruge for at topstille celleindholdet? Læg
mærke til, at celle 2 i række 4 centrerer sig lodret. Set i FF er det
ekstra tydeligt og gør sig gældende for flere celler.
| |
Birger Sørensen (19-10-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 19-10-10 21:37 |
|
Kurt Hansen formulerede tirsdag:
> Kig engang på denne tabel:
>
> http://www.danacord.dk/test/tabeltest.html
>
> Jeg har sat border om for at tydeliggøre problemet, men har ellers
> afholdt mig fra at tilpasse tabellen i HTML.
>
> I MSIE udvider tabellen sig, så cellerne tilpasser sig indholdet
> (følger *mine* <br>), mens Firefox voldombryder min tekst.
>
> Disclaimer: Jeg har ikke stylet teksten på nogen måder, så det ser
> ikke pænt ud, men glem det i denne forbindelse.
>
> P.S. Hvilken CSS skal jeg bruge for at topstille celleindholdet? Læg
> mærke til, at celle 2 i række 4 centrerer sig lodret. Set i FF er det
> ekstra tydeligt og gør sig gældende for flere celler.
Prøv med en rigtig doctype og valider siden.
Koden er en blanding af HTML og XHTML. Browserne er i quirks
(formentlig), og du kan ikke regne med hvad nogen af dem viser.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Karl Erik Christense~ (19-10-2010)
| Kommentar Fra : Karl Erik Christense~ |
Dato : 19-10-10 22:03 |
|
On 19-10-2010 19:20, Kurt Hansen wrote:
> Kig engang på denne tabel:
>
> http://www.danacord.dk/test/tabeltest.html
>
> Jeg har sat border om for at tydeliggøre problemet, men har ellers
> afholdt mig fra at tilpasse tabellen i HTML.
>
> I MSIE udvider tabellen sig, så cellerne tilpasser sig indholdet
> (følger *mine*<br>), mens Firefox voldombryder min tekst.
>
> Disclaimer: Jeg har ikke stylet teksten på nogen måder, så det ser
> ikke pænt ud, men glem det i denne forbindelse.
>
> P.S. Hvilken CSS skal jeg bruge for at topstille celleindholdet? Læg
> mærke til, at celle 2 i række 4 centrerer sig lodret. Set i FF er det
> ekstra tydeligt og gør sig gældende for flere celler.
Ak ja, de gode gamle tabeldage er ikke ovre endnu - åbenbart.
Du kan style valign i din css med:
vertical-align:top; (top, middle, bottom)
Default er middle, så derfor rykker teksten i den celle der har mindst
indhold, på samme række.
Hvorfor validerer du ikke din side, før du kaster et problem ud?
Karl Erik.
--
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://www.ranunkelvej.com
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Kurt Hansen (20-10-2010)
| Kommentar Fra : Kurt Hansen |
Dato : 20-10-10 06:33 |
|
On Tue, 19 Oct 2010 23:02:38 +0200, Karl Erik Christensen
<karlerik@none.invalid.com> wrote:
>On 19-10-2010 19:20, Kurt Hansen wrote:
>> Kig engang på denne tabel:
>>
>> http://www.danacord.dk/test/tabeltest.html
>>
>> Jeg har sat border om for at tydeliggøre problemet, men har ellers
>> afholdt mig fra at tilpasse tabellen i HTML.
>>
>> I MSIE udvider tabellen sig, så cellerne tilpasser sig indholdet
>> (følger *mine*<br>), mens Firefox voldombryder min tekst.
>>
>> Disclaimer: Jeg har ikke stylet teksten på nogen måder, så det ser
>> ikke pænt ud, men glem det i denne forbindelse.
>>
>> P.S. Hvilken CSS skal jeg bruge for at topstille celleindholdet? Læg
>> mærke til, at celle 2 i række 4 centrerer sig lodret. Set i FF er det
>> ekstra tydeligt og gør sig gældende for flere celler.
>
>Ak ja, de gode gamle tabeldage er ikke ovre endnu - åbenbart.
Jeg er lydhør, men hænger sikkert i gamle vaner. Har du et alternativt
forslag til hvordan man pænt sætter 8 nyheder op midt på forsiden?
| |
Karl Erik Christense~ (20-10-2010)
| Kommentar Fra : Karl Erik Christense~ |
Dato : 20-10-10 16:07 |
|
On 20-10-2010 07:33, Kurt Hansen wrote:
> Jeg er lydhør, men hænger sikkert i gamle vaner. Har du et alternativt
> forslag til hvordan man pænt sætter 8 nyheder op midt på forsiden?
Det har jeg da
Du vil bruge css -OK.
På siden er der 100% til rådiged i bredden (af feks. #content eller hvad
din indholds div nu hedder).
Hvor mange nyheder vil du have ved siden af hnanden?
2? så har du 50% til hver - 3 så 33% - 4 så 25% osv.
Så laver du en div med width: ??%, og styler den så den floater left.
..nyheder {
width: ??%;
float: left;
]
Pas på med margin og padding da disse bliver lagt til bredden.
Når du har det antal du ønsker, skal du ha en clear:
<div class="rens"></div> - i css:
..rens {
clear: both;
}
Og så starter du forfra men en ny "række" nyheder.
God fornøjelse
Karl Erik.
--
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://www.ranunkelvej.com
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Karl Erik Christense~ (20-10-2010)
| Kommentar Fra : Karl Erik Christense~ |
Dato : 20-10-10 17:14 |
|
On 20-10-2010 17:07, Karl Erik Christensen wrote:
> On 20-10-2010 07:33, Kurt Hansen wrote:
>
>> Jeg er lydhør, men hænger sikkert i gamle vaner. Har du et alternativt
>> forslag til hvordan man pænt sætter 8 nyheder op midt på forsiden?
>
> Det har jeg da
>
> Du vil bruge css -OK.
>
> På siden er der 100% til rådiged i bredden (af feks. #content eller hvad
> din indholds div nu hedder).
>
> Hvor mange nyheder vil du have ved siden af hnanden?
> 2? så har du 50% til hver - 3 så 33% - 4 så 25% osv.
> Så laver du en div med width: ??%, og styler den så den floater left.
>
> .nyheder {
> width: ??%;
> float: left;
> ]
>
> Pas på med margin og padding da disse bliver lagt til bredden.
>
> Når du har det antal du ønsker, skal du ha en clear:
> <div class="rens"></div> - i css:
>
> .rens {
> clear: both;
> }
>
> Og så starter du forfra men en ny "række" nyheder.
>
> God fornøjelse
>
> Karl Erik.
>
En har jo sagt at jeg skulle teste mine ideer
Hermed gjort på:
http://webdesign.ranunkelvej.com/test2/test.html
Du må lege lidt med procenten - eller regne på width + padding + margin.
Karl Erik.
--
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://www.ranunkelvej.com
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Kurt Hansen (20-10-2010)
| Kommentar Fra : Kurt Hansen |
Dato : 20-10-10 17:24 |
|
On Wed, 20 Oct 2010, Karl Erik Christensen <karlerik@none.invalid.com>
wrote:
>> On 20-10-2010 07:33, Kurt Hansen wrote:
>>
>>> Jeg er lydhør, men hænger sikkert i gamle vaner. Har du et alternativt
>>> forslag til hvordan man pænt sætter 8 nyheder op midt på forsiden?
>>
>> Det har jeg da
og
>En har jo sagt at jeg skulle teste mine ideer
>
>Hermed gjort på:
>
> http://webdesign.ranunkelvej.com/test2/test.html
>
>Du må lege lidt med procenten - eller regne på width + padding + margin.
Tjah, hvorfor ikke. Så mangler "vi" kun at fedte nogle billeder ind,
men det peger da fremad. I næste ledige stund vil jeg lege lidt med
modellen
| |
Karl Erik Christense~ (20-10-2010)
| Kommentar Fra : Karl Erik Christense~ |
Dato : 20-10-10 17:37 |
|
On 20-10-2010 18:24, Kurt Hansen wrote:
> Tjah, hvorfor ikke. Så mangler "vi" kun at fedte nogle billeder ind,
> men det peger da fremad. I næste ledige stund vil jeg lege lidt med
> modellen
Hvordan billeder sættes ind kan du da godt, ikke?
img nyheder {
float: left; (eller right)
padding: 0 2px 2px 0;
}
Karl Erik.
--
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://www.ranunkelvej.com
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Karl Erik Christense~ (20-10-2010)
| Kommentar Fra : Karl Erik Christense~ |
Dato : 20-10-10 17:49 |
|
On 20-10-2010 18:36, Karl Erik Christensen wrote:
> On 20-10-2010 18:24, Kurt Hansen wrote:
>
>> Tjah, hvorfor ikke. Så mangler "vi" kun at fedte nogle billeder ind,
>> men det peger da fremad. I næste ledige stund vil jeg lege lidt med
>> modellen
>
> Hvordan billeder sættes ind kan du da godt, ikke?
>
> img nyheder {
> float: left; (eller right)
> padding: 0 2px 2px 0;
> }
>
> Karl Erik.
>
Hovsa, det gik lidt for stærkt.
..nyheder img {
float: left;
padding: 0 2px 2px 0;
}
Karl Erik.
--
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://www.ranunkelvej.com
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Birger Sørensen (20-10-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 20-10-10 18:00 |
|
Kurt Hansen kom med denne ide:
> On Wed, 20 Oct 2010, Karl Erik Christensen <karlerik@none.invalid.com>
> wrote:
>
>>> On 20-10-2010 07:33, Kurt Hansen wrote:
>>>
>>>> Jeg er lydhør, men hænger sikkert i gamle vaner. Har du et alternativt
>>>> forslag til hvordan man pænt sætter 8 nyheder op midt på forsiden?
>>>
>>> Det har jeg da
>
> og
>
>> En har jo sagt at jeg skulle teste mine ideer
>>
>> Hermed gjort på:
>>
>> http://webdesign.ranunkelvej.com/test2/test.html
>>
>> Du må lege lidt med procenten - eller regne på width + padding + margin.
>
> Tjah, hvorfor ikke. Så mangler "vi" kun at fedte nogle billeder ind,
> men det peger da fremad. I næste ledige stund vil jeg lege lidt med
> modellen
1: Tabeller er til tabulære data. For mig at se, er der ikke noget galt
i at betragte dine nyheder, som tabulære data, og dermed præsentere dem
i en tabel. Det er ikke kun visuelt - også noget med hvordan
skærmlæsere, ser, forstår og fremlægger indholdet.
2: Er der altid 8 nyheder? Hvis der kan være varierende antal, er det
svært at udvikle en fornuftig skabelon (template). Man kunne så gå
efter noget med lige/ulig og/eller mange/ikke så mange.
Ovenstående mangelr en "Rens" efter de nederste 4 nyheder (de er ikke
med i "indhold").
Man kan give #indold en bestemt bredde og margin auto. Den vil så
centrere sig på skærmen. Det gør også, at man har nogle faste mål, at
kunne beregne de enkelte nyheders størrelse efter, og slipper for at
elementer falder ned på næste linie - til gengæld får brugere med
browsere med mindre plads, en vandret scrollbar.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Karl Erik Christense~ (20-10-2010)
| Kommentar Fra : Karl Erik Christense~ |
Dato : 20-10-10 18:23 |
|
On 20-10-2010 19:00, Birger Sørensen wrote:
> 2: Er der altid 8 nyheder? Hvis der kan være varierende antal, er det
> svært at udvikle en fornuftig skabelon (template). Man kunne så gå efter
> noget med lige/ulig og/eller mange/ikke så mange.
>
> Birger
>
Det er vel bare at indsætte op til /8 antal <div class"nyheder"></div>
En "rens" vil jo også stoppe floatet?
Jeg kan ikke lige se problemet?
Karl Erik.
--
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://www.ranunkelvej.com
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Allan Vebel (19-10-2010)
| Kommentar Fra : Allan Vebel |
Dato : 19-10-10 22:11 |
|
Kurt Hansen skrev:
> I MSIE udvider tabellen sig, så cellerne tilpasser
> sig indholdet (følger *mine* <br>), mens Firefox
> voldombryder min tekst.
Prøv at styre noget mere med css. Sætter jeg:
table{
width:100%;
}
forsvinder fejlen i Firefox.
> P.S. Hvilken CSS skal jeg bruge for at topstille
> celleindholdet?
td{
vertical-align:top;
}
--
Allan Vebel
http://vebel.dk | http://html-faq.dk
http://webdesigngruppen.dk
| |
scootergrisen (19-10-2010)
| Kommentar Fra : scootergrisen |
Dato : 19-10-10 23:00 |
| | |
Karl Erik Christense~ (19-10-2010)
| Kommentar Fra : Karl Erik Christense~ |
Dato : 19-10-10 23:24 |
| | |
scootergrisen (19-10-2010)
| Kommentar Fra : scootergrisen |
Dato : 19-10-10 23:33 |
|
Du kan gemme langesammenhængendeord med overflow:hidden;
Prøv og opdater siden : http://scootergrisen.dk/test/test0004.html
Den 20-10-2010 00:24, Karl Erik Christensen skrev:
> On 19-10-2010 23:59, scootergrisen wrote:
>> Her er et eksempel på hvordan du kan gøre :
>> http://scootergrisen.dk/test/test0004.html
>
> Prøv at skrive:
> "speciallægepraksisplanlægningsstabiliseringsperiode" i en af dine
> <span> - eller blot "undervisningsdifferentiering".
>
> Karl Erik.
>
| |
Allan Vebel (19-10-2010)
| Kommentar Fra : Allan Vebel |
Dato : 19-10-10 23:44 |
|
scootergrisen skrev:
> Du kan gemme langesammenhængendeord
> med overflow:hidden;
Jamen, så bliver indholdet jo ulæseligt, det er
næppe der der er meningen med det.
Data i en tabel skal kunne læses af alle og i
alle browsere - her er overflow:hidden; en af
de ting der skjuler noget.
Jeg kan slet ikke forstå hvorfor du kommer med
den slags løsninger.
--
Allan Vebel
http://vebel.dk | http://html-faq.dk
http://webdesigngruppen.dk
| |
scootergrisen (20-10-2010)
| Kommentar Fra : scootergrisen |
Dato : 20-10-10 00:24 |
|
Prøv med word-wrap:break-word; i stedet for overflow:hidden;
Det ser fint ud i firefox men der sker noget i ie som altid.
Men det kan være der er nogen der kan rette koden.
Prøv igen at opdater : http://scootergrisen.dk/test/test0004.html
| |
Karl Erik Christense~ (20-10-2010)
| Kommentar Fra : Karl Erik Christense~ |
Dato : 20-10-10 00:34 |
|
On 20-10-2010 01:23, scootergrisen wrote:
> Prøv med word-wrap:break-word; i stedet for overflow:hidden;
> Det ser fint ud i firefox men der sker noget i ie som altid.
> Men det kan være der er nogen der kan rette koden.
>
> Prøv igen at opdater : http://scootergrisen.dk/test/test0004.html
Hvorfor blive ved med at lappe på en løsning der er dødsdømt?
Du kan style valign i din css med:
vertical-align:top; (top, middle, bottom)
Din løsning har et fint moment, nemlig float af billed span. Jeg mener
bare span er overkill, som nemt kan styles i css:
img {
float: left;
}
Karl Erik.
--
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://www.ranunkelvej.com
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Karl Erik Christense~ (20-10-2010)
| Kommentar Fra : Karl Erik Christense~ |
Dato : 20-10-10 00:52 |
|
On 20-10-2010 01:34, Karl Erik Christensen wrote:
> vertical-align:top; (top, middle, bottom)
>
> Din løsning har et fint moment, nemlig float af billed span. Jeg mener
> bare span er overkill, som nemt kan styles i css:
>
> img {
> float: left;
> }
>
> Karl Erik.
>
Bliver så i css:
td {
vertical-align: top;
}
td img {
float: left;
padding: 0 5px 5px 0;
}
Så er den vist ikke længere
Karl Erik.
--
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://www.ranunkelvej.com
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
scootergrisen (20-10-2010)
| Kommentar Fra : scootergrisen |
Dato : 20-10-10 01:31 |
|
Jeg syns du skulle prøve at teste dine egne forslag Karl Erik.
Den 20-10-2010 01:51, Karl Erik Christensen skrev:
> On 20-10-2010 01:34, Karl Erik Christensen wrote:
>
>> vertical-align:top; (top, middle, bottom)
>>
>> Din løsning har et fint moment, nemlig float af billed span. Jeg mener
>> bare span er overkill, som nemt kan styles i css:
>>
>> img {
>> float: left;
>> }
>>
>> Karl Erik.
>>
>
> Bliver så i css:
>
> td {
> vertical-align: top;
> }
>
> td img {
> float: left;
> padding: 0 5px 5px 0;
> }
>
> Så er den vist ikke længere
>
> Karl Erik.
>
| |
Karl Erik Christense~ (20-10-2010)
| Kommentar Fra : Karl Erik Christense~ |
Dato : 20-10-10 01:50 |
|
On 20-10-2010 02:30, scootergrisen wrote:
> Jeg syns du skulle prøve at teste dine egne forslag Karl Erik.
Kan du uddybe hvad du mener?
Det jeg har foreslået er lige præcis det der skal til, for at Kurt's
tabel bliver som han ønsker.
Uden span, overflow hidden, word-wrap og andet tingel tangel der intet
er bevendt, men er noget amatør juks.
Karl Erik.
--
http://www.tyveri-check.dk - Snyd tyven før han snyder dig!
http://www.ranunkelvej.com
http://webdesign.ranunkelvej.com - Artikler om webdesign
| |
Allan Vebel (20-10-2010)
| Kommentar Fra : Allan Vebel |
Dato : 20-10-10 21:53 |
| | |
Karl Erik Christense~ (19-10-2010)
| Kommentar Fra : Karl Erik Christense~ |
Dato : 19-10-10 23:51 |
| | |
Kurt Hansen (20-10-2010)
| Kommentar Fra : Kurt Hansen |
Dato : 20-10-10 06:11 |
|
On Tue, 19 Oct 2010, Kurt Hansen <kurt@ugyldig.dk> wrote:
>Kig engang på denne tabel:
>
> http://www.danacord.dk/test/tabeltest.html
>
>Jeg har sat border om for at tydeliggøre problemet, men har ellers
>afholdt mig fra at tilpasse tabellen i HTML.
>
>I MSIE udvider tabellen sig, så cellerne tilpasser sig indholdet
>(følger *mine* <br>), mens Firefox voldombryder min tekst.
Tak for svarene. jeg undskylder at jeg åbenbart tog for let på
problemet, før jeg stillede spørgsmål. tabelkoden er "håndskrevet" og
headeren er standard for et nyt dokument i Webwriter og det faldt mig
slet ikke ind, at problemet kunne skyldes doctypen og ikke HTML-koden.
Sorry, jeg skal nok tænke lidt længere, før jeg stiller næste
spørgsmål
| |
Erik Olsen (20-10-2010)
| Kommentar Fra : Erik Olsen |
Dato : 20-10-10 10:46 |
|
Kurt Hansen wrote:
> Tak for svarene. jeg undskylder at jeg åbenbart tog for let på
> problemet, før jeg stillede spørgsmål. tabelkoden er "håndskrevet" og
> headeren er standard for et nyt dokument i Webwriter og det faldt mig
> slet ikke ind, at problemet kunne skyldes doctypen og ikke HTML-koden.
> Sorry, jeg skal nok tænke lidt længere, før jeg stiller næste
> spørgsmål
På det punkt er Stone's WebWriter 4 temmelig gammel da den bl. a. ikke
indsætter korrekt doctype. Det burde du vide eftersom programmet bortset
fra nogle få fejlrettelser ikke er blevet vedligeholdt i en del år.
Programmet laver også forskellige andre fejl i koden, det skal man kende
og huske når man vil lave kode der validerer.
Jeg benytter også Stone's WebWriter 4. Jeg har af samme grund
forskellige standardskabeloner liggende som jeg benytter til nye
html-dokumenter.
--
Venlig hilsen/Best regards
Erik Olsen
http://www.modelbaneteknik.dk/
| |
Kurt Hansen (21-10-2010)
| Kommentar Fra : Kurt Hansen |
Dato : 21-10-10 06:10 |
|
Jeg bliver vanvittig. Det er hele tiden eet skridt frem og to tilbage.
Det går løbende op for mig, i al sin gru, hvor meget jeg har forsømt
at vedligeholde min basisviden gennem årene.
http://www.danacord.dk/test/index.shtml
Ignorér alt det andet skrammel - det er kun tabellen med nyhederne der
er i fokus lige nu. Siden validerer, men derfor ser det alligevel
forkert ud.
Tabellens bredde tilpasser sig ikke indholdet, selv om jeg har sat
width til 100%. Ændrer jeg det til en fast bredde, f.eks. 800px,
udvider tabellen sig godt nok, men det er jo en uholdbar løsning, da
teksterne løbende ændrer sig, efterhånden som nyhederne skiftes ud.
| |
Birger Sørensen (21-10-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 21-10-10 10:02 |
|
Kurt Hansen sendte dette med sin computer:
> Jeg bliver vanvittig. Det er hele tiden eet skridt frem og to tilbage.
> Det går løbende op for mig, i al sin gru, hvor meget jeg har forsømt
> at vedligeholde min basisviden gennem årene.
>
> http://www.danacord.dk/test/index.shtml
>
> Ignorér alt det andet skrammel - det er kun tabellen med nyhederne der
> er i fokus lige nu. Siden validerer, men derfor ser det alligevel
> forkert ud.
>
> Tabellens bredde tilpasser sig ikke indholdet, selv om jeg har sat
> width til 100%. Ændrer jeg det til en fast bredde, f.eks. 800px,
> udvider tabellen sig godt nok, men det er jo en uholdbar løsning, da
> teksterne løbende ændrer sig, efterhånden som nyhederne skiftes ud.
Det primære problem, ser ud til at være at teksten ikke wrapper, når
der ikke er plads til den. Det gør den ikke, fordi du har
white-space: nowrap;
på td. Fjern den. Hvis teksten skal stå fornuftigt, indenfor det område
der er til rådighed, må man lade browseren kunne dele linierne.
Din #containerbox, har en
width: 458 px;
- fjern den. så får tabellen lov at fylde efter indholdet, i stedet for
at krampe sammen i venstre side.
Din body har en højre margin på 8%. Det er måske i overkanten - sæt den
til f.eks 20px i stedet. 8% af skærmen er forhodsvis meget ikke at
ville bruge til indhold...
Man kan så sige, at nu fylder tabellen måske i overkanten. Så sæt dens
bredde til f.eks. 90% i stedet for 100%.
Jeg har gjort ovenstående 3 ændringer i FireBug i FF.
Det skide godt ud!
Nogle forslag til ændrigner kunne være at gøre coverbillederne lige
store. Det nerest til venstre, er lidt bredere end de øvrige. Det giver
faktisk en brækket linie ned igennem, hvilket er "forstyrrende". Har du
forskellige billeder, kan du lave en ændret css til de små, så
forskellen bliver til venstre i stedet for til højre. Det vil være
mindre iøjenfaldende.
Og måske en klasse til dine links til de aktuelle CD'er, der sætter
linket under de øvrige og centrerer det.
Har prøvet at sætte linkene i en div med
clear:left; /*sikrer de kommer under både billede og tekst*/
text-align:center;
Så kan du også fjerne alle <br> tingene, og linkene bliver - selv
når vinduet resizes...
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Kurt Hansen (21-10-2010)
| Kommentar Fra : Kurt Hansen |
Dato : 21-10-10 13:26 |
|
Hello Birger,
> Kurt Hansen sendte dette med sin computer:
>
>> Jeg bliver vanvittig. Det er hele tiden eet skridt frem og to
>> tilbage. Det går løbende op for mig, i al sin gru, hvor meget jeg har
>> forsømt at vedligeholde min basisviden gennem årene.
>>
>> http://www.danacord.dk/test/index.shtml
>>
>> Ignorér alt det andet skrammel - det er kun tabellen med nyhederne
>> der er i fokus lige nu. Siden validerer, men derfor ser det alligevel
>> forkert ud.
>>
>> Tabellens bredde tilpasser sig ikke indholdet, selv om jeg har sat
>> width til 100%. Ændrer jeg det til en fast bredde, f.eks. 800px,
>> udvider tabellen sig godt nok, men det er jo en uholdbar løsning, da
>> teksterne løbende ændrer sig, efterhånden som nyhederne skiftes ud.
> Det primære problem, ser ud til at være at teksten ikke wrapper, når
> der ikke er plads til den. Det gør den ikke, fordi du har
> white-space: nowrap;
> på td.
Det er med fuldt overlæg. Man kan have forskellig mening om hvorvidt der
ser pænt ud, men JEG vil bestemme hvor lange linierne må være og hvor de
skal brydes. Teksten må under ingen omstændigheder wrappe ind under billedet
og det giver kun plads til 6 linier. Cellerne skal udvide sig efter tekstens
længde.
> Din #containerbox, har en
> width: 458 px;
> - fjern den. så får tabellen lov at fylde efter indholdet, i stedet
> for at krampe sammen i venstre side.
Aha, ja det kan jeg godt se.
> Nogle forslag til ændrigner kunne være at gøre coverbillederne lige
> store. Det nerest til venstre, er lidt bredere end de øvrige. Det
> giver faktisk en brækket linie ned igennem, hvilket er "forstyrrende".
Det ville være at begå vold mod produkterne. Nogle dobbelt-CD'er er i æsker
der er bredere end normalt og de skal naturligvis gengives som de er. Det
herskende princip er en højde på 100px.
Jeg studerer videre i aften, men foreløbigt tak for forslagene.
| |
Kurt Hansen (21-10-2010)
| Kommentar Fra : Kurt Hansen |
Dato : 21-10-10 17:23 |
|
On Thu, 21 Oct 2010 11:01:55 +0200, Birger Sørensen
<sdc@bbsorensen.com> wrote:
>Kurt Hansen sendte dette med sin computer:
>> Jeg bliver vanvittig. Det er hele tiden eet skridt frem og to tilbage.
>> Det går løbende op for mig, i al sin gru, hvor meget jeg har forsømt
>> at vedligeholde min basisviden gennem årene.
>>
>> http://www.danacord.dk/test/index.shtml
>>
>> Ignorér alt det andet skrammel - det er kun tabellen med nyhederne der
>> er i fokus lige nu. Siden validerer, men derfor ser det alligevel
>> forkert ud.
>>
>> Tabellens bredde tilpasser sig ikke indholdet, selv om jeg har sat
>> width til 100%. Ændrer jeg det til en fast bredde, f.eks. 800px,
>> udvider tabellen sig godt nok, men det er jo en uholdbar løsning, da
>> teksterne løbende ændrer sig, efterhånden som nyhederne skiftes ud.
>Det primære problem, ser ud til at være at teksten ikke wrapper, når
>der ikke er plads til den. Det gør den ikke, fordi du har
>white-space: nowrap; på td. Fjern den.
Den svarede jeg på tidligere i dag.
>Din #containerbox, har en width: 458 px; - fjern den. så får tabellen lov
> at fylde efter indholdet, i stedet for at krampe sammen i venstre side.
og
>Din body har en højre margin på 8%. Det er måske i overkanten - sæt den
>til f.eks 20px i stedet. 8% af skærmen er forhodsvis meget ikke at
>ville bruge til indhold...
Yep. Nu har jeg sat venstre margin til 20 pix og lagt en knaldgul
baggrundsfarve på #containerbox, så dens afgrænsninger visualiseres
>Man kan så sige, at nu fylder tabellen måske i overkanten. Så sæt dens
>bredde til f.eks. 90% i stedet for 100%.
Nu har jeg sat den til 80% og dermed er der plads til det hele i
tabelcellerne ( http://www.danacord.dk/test/index.shtml), men det er jo
ikke en holdbar løsning. Teoretisk kan der komme linier der er længere
end nu, men det tror jeg nu ikke. Øverste højre nyhed er ekstrem i
forhold til det normale.
Hvis normalen er et gennemsnit af de øvrige, kommer tabellen til at
fylde den plads jeg nu vælger at sætte af, f.eks. 80% eller 500 px,
men det irriterer mig, at tabellen/cellerne ikke kan finde ud af at
tilpasse sig indholdet - hverken mere eller mindre.
Hvis jeg fjerner den faste breddeangivelse, stikker teksten igen uden
for tabellen. Min børnelærdom siger netop, at så burde tabellen
tilpasse sig, men det er måske forkert?
| |
Birger Sørensen (21-10-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 21-10-10 18:45 |
|
Kurt Hansen kom med denne ide:
> On Thu, 21 Oct 2010 11:01:55 +0200, Birger Sørensen
> <sdc@bbsorensen.com> wrote:
>
>> Kurt Hansen sendte dette med sin computer:
>>> Jeg bliver vanvittig. Det er hele tiden eet skridt frem og to tilbage.
>>> Det går løbende op for mig, i al sin gru, hvor meget jeg har forsømt
>>> at vedligeholde min basisviden gennem årene.
>>>
>>> http://www.danacord.dk/test/index.shtml
>>>
>>> Ignorér alt det andet skrammel - det er kun tabellen med nyhederne der
>>> er i fokus lige nu. Siden validerer, men derfor ser det alligevel
>>> forkert ud.
>>>
>>> Tabellens bredde tilpasser sig ikke indholdet, selv om jeg har sat
>>> width til 100%. Ændrer jeg det til en fast bredde, f.eks. 800px,
>>> udvider tabellen sig godt nok, men det er jo en uholdbar løsning, da
>>> teksterne løbende ændrer sig, efterhånden som nyhederne skiftes ud.
>
>> Det primære problem, ser ud til at være at teksten ikke wrapper, når
>> der ikke er plads til den. Det gør den ikke, fordi du har
>> white-space: nowrap; på td. Fjern den.
>
> Den svarede jeg på tidligere i dag.
>
>> Din #containerbox, har en width: 458 px; - fjern den. så får tabellen lov
>> at fylde efter indholdet, i stedet for at krampe sammen i venstre side.
>
> og
>
>> Din body har en højre margin på 8%. Det er måske i overkanten - sæt den
>> til f.eks 20px i stedet. 8% af skærmen er forhodsvis meget ikke at
>> ville bruge til indhold...
>
> Yep. Nu har jeg sat venstre margin til 20 pix og lagt en knaldgul
> baggrundsfarve på #containerbox, så dens afgrænsninger visualiseres
>
>> Man kan så sige, at nu fylder tabellen måske i overkanten. Så sæt dens
>> bredde til f.eks. 90% i stedet for 100%.
>
> Nu har jeg sat den til 80% og dermed er der plads til det hele i
> tabelcellerne ( http://www.danacord.dk/test/index.shtml), men det er jo
> ikke en holdbar løsning. Teoretisk kan der komme linier der er længere
> end nu, men det tror jeg nu ikke. Øverste højre nyhed er ekstrem i
> forhold til det normale.
>
> Hvis normalen er et gennemsnit af de øvrige, kommer tabellen til at
> fylde den plads jeg nu vælger at sætte af, f.eks. 80% eller 500 px,
> men det irriterer mig, at tabellen/cellerne ikke kan finde ud af at
> tilpasse sig indholdet - hverken mere eller mindre.
>
> Hvis jeg fjerner den faste breddeangivelse, stikker teksten igen uden
> for tabellen. Min børnelærdom siger netop, at så burde tabellen
> tilpasse sig, men det er måske forkert?
Tabellen tilpasser sig hvis den kan. Din forståelse er rigtig nok.
Men sidens øvrige elementer, begrænser den plads der er til tabellen.
Praktisk kan du gøre det, at du helt undlader at sætte bredde på
tabellen. Det virker ikke i din nuværende kode, fordi du har floated
billederne, uden at cleare - img'erne er ikke inde i td'erne.
Jeg har eksperimenteret lidt, så her er lidt at arbejde med:
Sæt dine 6 linier ind i en p med css
float : right;
margin : 0px;
white-space : nowrap;
og sæt så
<div style="clear:both"></div>
sidst i hver td.
(Opret klasser - den sidste har du sikkert i forvejen. Mest fordi det
er simplere at rette i en klasse, end 8 td'er fordelt i nabolaget...)
Fjern white-space:nowrap fra td (den er nu på den p - som også kan være
en div eller et andet block-element, men p syntes et fornuftigt valg
her - der skal bruge den) og width fra table.
Så virker det her - men kun så længe vinduet er bredt nok - gøres det
mindre, vil teksterne falde ned i forhold til billedet. Og det er en
konsekvens af nowrap - der er ikke plads nok, og du har bestemt at så
skal teksterne holdes sammen. Altså fordeler tabellen indholdet lodret
i stedet.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Kurt Hansen (22-10-2010)
| Kommentar Fra : Kurt Hansen |
Dato : 22-10-10 14:17 |
|
On Thu, 21 Oct 2010 19:44:47 +0200, Birger Sørensen
<sdc@bbsorensen.com> wrote:
>Kurt Hansen kom med denne ide:
>> On Thu, 21 Oct 2010 11:01:55 +0200, Birger Sørensen
>> <sdc@bbsorensen.com> wrote:
>>
>>> Kurt Hansen sendte dette med sin computer:
>>>> http://www.danacord.dk/test/index.shtml
>>>>
>>>> Tabellens bredde tilpasser sig ikke indholdet, selv om jeg har sat
>>>> width til 100%. Ændrer jeg det til en fast bredde, f.eks. 800px,
>>>> udvider tabellen sig godt nok, men det er jo en uholdbar løsning, da
>>>> teksterne løbende ændrer sig, efterhånden som nyhederne skiftes ud.
>Praktisk kan du gøre det, at du helt undlader at sætte bredde på
>tabellen. Det virker ikke i din nuværende kode, fordi du har floated
>billederne, uden at cleare - img'erne er ikke inde i td'erne.
" img'erne er ikke inde i td'erne"? Det forstår jeg ikke.
>Jeg har eksperimenteret lidt, så her er lidt at arbejde med:
>Sæt dine 6 linier ind i en p med css
>float : right;
>margin : 0px;
>white-space : nowrap;
Yes og den kalder jeg .nyhedstekst i forside.css
>og sæt så
><div style="clear:both"></div>
>sidst i hver td.
Unaset om jeg sætter clear: both/left/right, bliver det forkert.
http://www.danacord.dk/test/index.shtml
| |
Birger Sørensen (22-10-2010)
| Kommentar Fra : Birger Sørensen |
Dato : 22-10-10 15:46 |
|
Kurt Hansen frembragte:
> On Thu, 21 Oct 2010 19:44:47 +0200, Birger Sørensen
> <sdc@bbsorensen.com> wrote:
>
>> Kurt Hansen kom med denne ide:
>>> On Thu, 21 Oct 2010 11:01:55 +0200, Birger Sørensen
>>> <sdc@bbsorensen.com> wrote:
>>>
>>>> Kurt Hansen sendte dette med sin computer:
>>>>> http://www.danacord.dk/test/index.shtml
>>>>>
>>>>> Tabellens bredde tilpasser sig ikke indholdet, selv om jeg har sat
>>>>> width til 100%. Ændrer jeg det til en fast bredde, f.eks. 800px,
>>>>> udvider tabellen sig godt nok, men det er jo en uholdbar løsning, da
>>>>> teksterne løbende ændrer sig, efterhånden som nyhederne skiftes ud.
>
>> Praktisk kan du gøre det, at du helt undlader at sætte bredde på
>> tabellen. Det virker ikke i din nuværende kode, fordi du har floated
>> billederne, uden at cleare - img'erne er ikke inde i td'erne.
>
> " img'erne er ikke inde i td'erne"? Det forstår jeg ikke.
>
>> Jeg har eksperimenteret lidt, så her er lidt at arbejde med:
>> Sæt dine 6 linier ind i en p med css
>> float : right;
>> margin : 0px;
>> white-space : nowrap;
>
> Yes og den kalder jeg .nyhedstekst i forside.css
>
>> og sæt så
>> <div style="clear:both"></div>
>> sidst i hver td.
>
> Unaset om jeg sætter clear: both/left/right, bliver det forkert.
> http://www.danacord.dk/test/index.shtml
Forvirring forståelig.
Du har en clear for meget - nogen steder. Der skal være een, og den
skal stå sidst efter de floatede, eks:
<td>
<img width="100" height="100" alt="DACOCD 697-698 Cover"
src="grafik/covers/697-98-mini.jpg">
<p class="nyhedstekst">NEW RELEASE<br>
Scandinavian Classics<br>
Vol. 3<br>
<br>
<br>
<br>
<a href="frmsets/records/697-98-r.html">DACOCD 697-698</a>
</p>
<div style="clear: both;"></div>
</td>
Der er ikke nogen klasse .nyhedstekst - du har blot assignet den til p,
og det betyder at alle andre du har assignet til p også vil blive brugt
her (og alle andre p'er vil bruge den), og det er formentlig ikke hvad
du har brug for.
hvis jeg renamer din p i forside.css til at hedde .nyhedstekst virker
det.
Men den skal faktisk floate left også, for at teksten står
fornuftigt(ellers svarer det til en højrestilling af den længste linie,
og justering til venstre af resten) - og du skal fjerne begrænsningen
på bredden af tabellen (width:80%;). Tabellen har margin : auto til
siderne, så den vil selv flyde til midten, og ikke fylde mere end den
behøver.
Med den nuværende tekst ser det fint ud her (i FF - har ikke prøvet
andre), indtil vinduets bredde bliver under 1002px - så begynder
teksterne at falde under billederne.
Hvordan forklarer man float...
Det betyder at elementerne flyder af sig selv til den side man giver
som float. To eller flere elementer, med samme float, vil lægge sig i
den rækkefølge de står i koden, hvis der er plads. Er der ikke plads,
falder det sidste ned under det første. (Det kan faktisk blive noget
rigtigt rod... ;>))
Det der er sværest at forstå, er i virkeligheden opførslen af det
element, man indsætter de floatede elementer i.
Normalt vil et element (en td f.eks) antage en størrelse - bredde og
højde - så det omslutter de(t) indsatte element(er). Men det sker ikke
automatisk, når der indsættes floatede elementer.
Forståelsesmæssigt, ved browseren ikke hvornår du har tænkt dig at
afslutte de floatede elementer, så de medregnes simpelthen ikke i
beregningen af størrelsen af elementet de er indsat i. I dine tidligere
eksempler medregner browseren derfor ikke billedet, når det beregner
størrelsen af td'erne - derfor bliver td'erne kun så brede, at de kan
indeholde teksten. Men du har et floated billede først - og derfor
starter teksten et stykke inde i td'en, og kommer derfor til at rage ud
på den anden side.
Når man sætter en clear, reagerer browseren med et "Ahaa - ikke mere
float!" og så regner den størrelse af de floatede elementer med.
Derfor skal du afslutte hver td i din tabel med en clear - så kommer
størrelsen af td'en til at omfatte billedet, og teksten rager ikke
længere ud over kanten.
Nok ikke en vidneskabelig forklaring - men det er sådan jeg kan forstå
og få den opførsel man observerer til at passe.
Håber så den kan hjælpe dig også ^^
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
|
|