Avatar billede zac Nybegynder
16. november 2005 - 15:46 Der er 16 kommentarer og
1 løsning

Hvordan får jeg ramme til at tilpasse sig billede i bredden?

CSS bruges bl.a. for at fylde ud sidelæns, men hvordan krympe sammen sidelæns/vandret?

Jeg har billeder, som ikke er lige store, især ikke lige brede, og som skal have en ramme omkring sig.
Men border som del af <img src='.. > er ikke god HTML mere, og også af andre grunde vil jeg helst lægge det ind i min css fil.

Det her står i tabel celle med fast bredde på 600px:
echo "<div class=\"border1\"><img src='../figurer/" . $figurFil . "'></div>";

Og denne css giver rammen, som har samme bredde hele tiden, nemlig hele tabelcellens bredde, men indretter sig efter højden på billedet:
.border1 {
padding: 5px 5px 5px 5px; font-weight: bold; border-width: 2px; border-style: dotted; border-color: #ff9900; background: #FFFFFF;
}

Hvordan får jeg rammen til at tilpasse sig billedet i bredden?
Avatar billede roenving Novice
16. november 2005 - 15:53 #1
Sætter det på billedet !-)

-- men hvis det skal være med den angivne padding skal du bare sætte en span ind i stedet for en div:

echo "<span class=\"border1\"><img src='../figurer/" . $figurFil . "'></span>";

.border1 {
padding: 5px; border: 2px dotted #f90; background: #fff;
}
Avatar billede roenving Novice
16. november 2005 - 15:54 #2
-- og så skal du vel også sørge for, at cellen har text-align:center; !o]
Avatar billede zac Nybegynder
16. november 2005 - 16:07 #3
point? For det virker med span i stedet for div - viser bare, hvor lidt jeg kan :-(
men tak alligevel!
Avatar billede roenving Novice
16. november 2005 - 16:15 #4
Velbekomme '-)
Avatar billede roenving Novice
16. november 2005 - 16:33 #5
-- og tak for point ;~}
Avatar billede zac Nybegynder
16. november 2005 - 16:43 #6
Meeen... span giver nye problemer, tingene rykker sig anderledes, så det må jeg se nærmere på...
Avatar billede zac Nybegynder
16. november 2005 - 17:10 #7
faktisk er span på vej ud, afvises af W3C
hvad gør man så?
Avatar billede roenving Novice
16. november 2005 - 17:15 #8
Det er noget vrøvl, for det er fuldt validt i alle gældende w3c-standarder !-)

-- men hvis du fylder det inde i f.eks. p-tags eller lægger den slags block-level tags ind i spans giver det fejl !o]
Avatar billede zac Nybegynder
16. november 2005 - 18:14 #9
ok, der er ikke belæg for at sige, at span (og div) afvises af W3C, men:

http://www.w3.org/TR/CSS21/selector.html#class-html - ca. midtvejs - er det ikke en vis afstandtagen til DIV og SPAN, eller læser jeg forkert:

"Note. CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute..."

Læg dertil:
http://www.projectseven.com/tutorials/articles/css/div_less/

Forøvrigt: Den her med span giver en ustabil ramme for neden/ ramme bunden er somme tider væk, somme tider ikke væk, somme tider med en lille del af bundrammen vist (jeg kan ikke se nogen systematik i det):
echo "<span class=\"border2\"><img src='../figurer/" . $figurFil . "' ALT=\" " . $figurTitel . " \"></span>";
Med div er rammen helt stabil, men altså tilgæld med fast bredde, hvorimod span følger billedet ind og ud i bredden...
Avatar billede roenving Novice
16. november 2005 - 18:40 #10
Den første oversættes til:

Bemærk. CSS giver så store kræfter til klasse-attributten, at forfattere principielt kan lave deres eget dokument-sprog baseret på elementer, som næsten ikke har nogen fast visuel præsentation (som f.eks. div og span i html) og forme deres præsentation ved at sætte style-information via klasse-attributten.

-- det har jo ikke det fjerneste med afstandtagen på den ene eller anden måde, men en advarsel om, at man med klasse-attributten kan bygge et fuldt stylet dokument op med kun divs og spans (hvilket betyder, at andre end forfatteren kan have meget svært ved at gennemskue indholdet !-)

-- bemærk også datoen på dit andet link:

"
Note this day, 1-April-2005, as the dawning of a new and semantically pure era.
"
Avatar billede roenving Novice
16. november 2005 - 18:48 #11
-- og underkanten har måske noget med, at der ikke er den ekstra plads til padding i det element, som indeholder billedet !-)

-- og det klarer du nemt ved at sætte padding og border på billedet, som jeg lagde ud med:

<img src="../billede.jpg" style="padding:5px;border:2px dotted red;">
Avatar billede zac Nybegynder
16. november 2005 - 21:10 #12
Jeg har løst problemet med den ustabile bund ramme ved inline style i img...

Det med oversættelsen er vi ikke enige om. Parantesen "such as DIV and SPAN in HTML" er eksempler på "associated presentation", som klasse atributten er så stærk, at den ikke behøver/ ikke skulle behøve - det er en slags afstandtagen fra DIV og SPAN til fordel fra at bruge klasser (alene, mest).
Avatar billede zac Nybegynder
16. november 2005 - 21:19 #13
Nej, klasser er et forkert ord - dem kan man ikke undgå at bruge, det er elementer (hedder de selectors?), som næsten ikke, som div og span, har en bestemt visuel præsentation...
Avatar billede roenving Novice
17. november 2005 - 09:59 #14
(based on) elements with almost no associated presentation

betyder ordret

(baseret på) elementer, som næsten ingen tilknyttet præsentation har

-- og da divs og spans netop er eksempler på den slags elementer, som ikke har en foruddefineret visning (udover at en div er et blocklevel- og span er et inline-element !o]

-- stort set alle andre html-elementer har en fast defineret rolle, H1-7 er overskrifter, OL/UL er listeholdere, LI listeelementer, P er et tekstafsnit, HR er en vandret streg osv. osv. osv.

-- så problemet er, at du deler en sætning over et sted, hvor du absolut ikke må (for parantesen lægger sig ikke til (tilknyttet) præsentation, men til elementer !-)
Avatar billede zac Nybegynder
17. november 2005 - 21:36 #15
Det citat jeg oprindelig bragte, blev afbrudt for tidligt. Helheden er:
"Note. CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not."
(http://www.w3.org/TR/CSS21/selector.html#class-html, ca. midt på, afsnit 5.8).

Det er for dig en advarsel, for mig at lægge afstand ("Authors should avoid this practice") til brugen af noget.
Til fordel for hvad? Her er vi enige om, at det er ikke-class selectors, som knytter sig mere umiddelbart til eksisterende html elementer.
Men afstand fra hvad? Det afhænger delvis af, om det er din eller min læsning af det engelske.

Jeg ikke kan det her godt nok til at se den præcise sammenhæng mellem class og DIV hhv. SPAN.
Kan man kun bruge DIV og SPAN sammen med selectoren class (og inline style)? Det synes jeg, det ser ud til...men jeg ved det ikke.
Kan man omvendt bruge class uden DIV og SPAN? Ja, det gør man fx med <p class="blue">.
Hvis der kan svares "ja" på begge spørgsmål, drejer citatet sig både med din og min læsning af det engelske om class overordnet og DIV og SPAN især/ underordnet/ som del af problemet med class.
Med din læsning (parantesen om DIV og SPAN angiver eksempler på class elementer) bliver advarslen rettet endnu mere mod class i det hele taget. Med min læsning er det en advarsel mod class, men med kraftigere afstand fra DIV og SPAN som endnu mere individualiserende elementer end class allerede er i sig selv.

Måske vi ender med at være enige :-)
Avatar billede roenving Novice
22. november 2005 - 00:55 #16
Meningen er, at man skal undgå at skabe sit eget kunstige html-sprog ved at skabe elementer, der til forveksling ligner andre (foruddefinerede !-) html-elementer, f.eks. kan man jo sætte style-regler, så en bestemt class giver divs samme udseende som H1-7, men så kan man jo ligesågodt benytte H1 osv.

-- class-selektorer er at foretrække fremfor id-selektorer, hvis cascading (c'et i css: Cascading StyleSheets !-) skal give nogen alvorlig mening ...

cascading betyder så, at egenskaber breder sig ned over underliggende (læs: indeholdte !-) elementer eller at elementer via selektorer defineres udfra deres forekomst inde i andre elementer, et klassisk eksempel kan være, at man vil have sine menu-links til at fremtræde på en anden måde end links i brød-/indholds-teksten, så kan selektorerne f.eks. se sådan ud:

a, a:link, a:visited{color:black;}
a:hover, a:active{text-decoration:underline overline;color:red;}

.menu a, .menu a:link{color:green;}
.menu a:visited{font-weight:bold;}
.menu a:hover, .menu a:active{text-decoration:underline;}

-- alle links, der forekommer inde i elementer, som har class="menu", vil så optræde på en anden måde end links andre steder i dokumentet ...

-- det specielle ved spans og divs er så, at de ikke visuelt har specielle evner, hvilket stort set alle andre elementer har (hvis de overhovedet har indflydelse på renderingen udover deres umiddelbare egenskab -- BR-tags har f.eks. ingen visuel rendering men afstedkommer alene et linjeskift !-)

-- og du kan f.eks. bruge divs uden at have brug for specielle visuelle egenskaber overhovedet, for det er et glimrende element til at gruppere andre elementer, som på den måde samlet kan f.eks. skjules eller vises efter behov ....

-- og et eksempel på en ret nyttig måde at udnytte classes på, som implicit frarådes i den citerede tekst, kunne f.eks. se sådan ud:

css:
u{text-decoration:underline;}
b{font-weight:bold;}
i{font-style:italic;}

<span class="b">Fed tekst</span>, og noget <span class="u">understreget</span>, noget <span class="u b i">kombineret fed, kursiv og understreget</span>&nbsp;!-)
Avatar billede roenving Novice
22. november 2005 - 00:57 #17
Uff, det skal selvfølgelig være class-selektorer:

.u{}
.b{}
.i{}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester