|
| CSS- og/eller <div>-problem Fra : Holst |
Dato : 10-12-06 19:26 |
|
Eftersom man jo i dag ikke må bruge tabeller til layout, skal det hele
jo helst foregå med <div> og CSS. Det er også ganske smart, men jeg
forstår meget lidt af det.
Jeg sidder i øjeblikket og pusler med en lille hjemmeside til de lokale
menigheder, og for at gøre det nemt har jeg valgt at anvende CMSimple
( http://www.cmsimple.dk), som er et ganske lille CMS, men som til fulde
opfylder mine behov, tror jeg. Jeg fandt en fin template (skabelon) til den.
Den viste sig dog at have en ulempe. En grøn bjælke i bunden krøb op i
den hvide højre spalte, hvis der ikke var særligt meget indhold i den
spalte. Jeg ville jo gerne beholde den nederst nede på niveau med bunden
af venstre spalte.
Jeg opgav hurtigt at forstå CSS og lignende og kontakte fyren, der havde
lavet omtalte template. En ganske flink fyr, som gjorde et godt forsøg
på det. Første forsøg havde dog en anden uhensigtsmæssighed, så han
præsterede endnu en løsning. Om løsningen er bedre eller ej, kan
diskusteres, men nu ser de i det mindste ens ud både under Firefox og
Internet Explorer.
Fyren har vist opgivet at finde en bedre løsning på det, eftersom han
blot skrev, at var jeg utilfreds med det megen grønne, kunne jeg bare
indsætte nogle tomme linjer efter teksten.
Så jeg tænkte, om nogen her måske har mere forstand på CSS og <div> end jeg.
Jeg vil gerne have den til at se ud i bunden, som den gør på denne side:
http://www.shelter.dk/ramsing/?Ramsing_Sogn:Ramsing_Kirke
også når teksten er kort som på denne side:
http://www.shelter.dk/ramsing/?Artikler%2Fnyheder
hvor der desværre nu er ganske meget grønt i den højre side.
På forhånd tak.
| |
Ukendt (10-12-2006)
| Kommentar Fra : Ukendt |
Dato : 10-12-06 20:59 |
|
"Holst" <newsnov06@shelter.dk> skrev i en meddelelse
news:457c514b$0$174$edfadb0f@dread11.news.tele.dk...
>
> Eftersom man jo i dag ikke må bruge tabeller til layout, skal det hele jo
> helst foregå med <div> og CSS.
Må og må er nok for meget sagt.
> Den viste sig dog at have en ulempe. En grøn bjælke i bunden krøb op i den
> hvide højre spalte, hvis der ikke var særligt meget indhold i den spalte.
> Jeg ville jo gerne beholde den nederst nede på niveau med bunden af
> venstre spalte.
>
> Jeg opgav hurtigt at forstå CSS og lignende og kontakte fyren, der havde
> lavet omtalte template. En ganske flink fyr, som gjorde et godt forsøg på
> det.
Generelt kan det være svært at overskue andres arbejde, når det består af
mange stylesheets
> Fyren har vist opgivet at finde en bedre løsning på det, eftersom han blot
> skrev, at var jeg utilfreds med det megen grønne, kunne jeg bare indsætte
> nogle tomme linjer efter teksten.
ja ja det godt med ham
> Så jeg tænkte, om nogen her måske har mere forstand på CSS og <div> end
> jeg.
> http://www.shelter.dk/ramsing/?Ramsing_Sogn:Ramsing_Kirke
>
> også når teksten er kort som på denne side:
>
> http://www.shelter.dk/ramsing/?Artikler%2Fnyheder
Problemet er i bund og grund at man ikke få tog divbokse til at optage samme
højde uden at give dem en højde i en eller anden enhed. Man kan imidlertid
få dem til at se lige højde ud, og dermed oånå den visning du ønsker.
Du skal lave dig et billede med målene 228px i bredden, og en højde på 1px.
Billedet skal du give samme farve som den grønne farve på hjemmesiden
I stylesheettet stylesheet.css skal du foretage nogle ændringer. Under
definationen for #pagewrapper skal du ændre background-color til #fff; og
indsætte følgende:
background-image: url("stitilditbillede.gif");
background-repeat: repeat-y;
Og et godt stykke længere nede skal du finde afsnittet der hedder layout, og
ændre bredden for #menu fra 30% til 228px, hvilket muligvis er overflødigt
Det burde løse problemet. De 228px svarer til 30% af bredden på
#pagewrapper. #pagewrapper rummer hele sidens indhold og er 760px bred.
Baggrunden du indsætter med CSS lægger sig i venstre side og gentager sig
selv lodret, som skaber spalte layoutet på din side med det lange eksempel.
På de korte sider er baggrunden i og for sig overflødig.
God fornøjelse
--
Med venlig hilsen - Carsten Sørensen
Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk
| |
Holst (10-12-2006)
| Kommentar Fra : Holst |
Dato : 10-12-06 22:11 |
|
Carsten Sørensen wrote:
> Det burde løse problemet.
Det gør det vist også! Jeg siger tusind tak.
Jeg vender nok snart tilbage med nogle andre CSS-problemer på samme side
i forbindelse med kalenderen. For den har jeg forsøgt at ændre farver
på, men det går ikke så nemt, som jeg troede, det ville gøre
| |
Holst (10-12-2006)
| Kommentar Fra : Holst |
Dato : 10-12-06 23:08 |
|
Holst wrote:
> Jeg vender nok snart tilbage med nogle andre CSS-problemer på samme side
> i forbindelse med kalenderen. For den har jeg forsøgt at ændre farver
> på, men det går ikke så nemt, som jeg troede, det ville gøre
Ja, nu opgiver jeg at klare det selv. Sørgeligt, ik'?
Jeg bruger som nævnt CMSimple, og til den kan man få en 3rd party
kalender, som umiddelbart virker ganske fint til mit formål.
Standardfarverne er dog helt hen i vejret, så derfor måtte jeg jo ændre
lidt i det medfølgende css.
Det er lykkedes mig at ændre farve på baggrunden, give kalenderen en
ramme og vist også ændre farve på nogle af datoerne.
Men de datoer, der er et link til en 'event' kan ikke ses af en eller
anden grund. Umiddelbart er det jo '.calendar_eventday', jeg skal pille
ved. Efterhånden synes jeg, at ret meget i css'et ser ganske ens ud,
uden at det har givet mig nogle ændringer.
Omtalte side, hvorpå kalenderen er (skal flyttes ud i menuen engang ved
lejlighed):
http://www.shelter.dk/ramsing/?Kalender
CSS'et:
http://www.shelter.dk/ramsing/plugins/calendar/css/stylesheet.css
Jeg vil blot gerne have, at disse datoer er anført med sort og fed.
| |
Erik Ginnerskov (10-12-2006)
| Kommentar Fra : Erik Ginnerskov |
Dato : 10-12-06 23:37 |
|
Holst wrote:
> Ja, nu opgiver jeg at klare det selv. Sørgeligt, ik'?
Rolig, nu. Du skal nok få det lært. Det kommer med øvelsen
> Men de datoer, der er et link til en 'event' kan ikke ses af en eller
> anden grund. Umiddelbart er det jo '.calendar_eventday', jeg skal
> pille ved.
Jeg prøvede at lave et par tilføjelser til din css. Det fik de omtalte dage
til at træde frem:
..calendar_today a:link,.calendar_eventday a:visited{
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
font-weight: bold;
font-size: 7pt;
font-style: normal;
color:#ff0000;
background-color: #ccc;
}
..calendar_eventday a:link,.calendar_eventday a:visited{
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
font-weight: bold;
font-size: 7pt;
font-style: normal;
color:#000000;
background-color: #ccc;
}
Det er nederste linje i begge blokke. Ret selv ind, så du er tilfreds med
resultatet.
--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk
| |
Ukendt (11-12-2006)
| Kommentar Fra : Ukendt |
Dato : 11-12-06 17:44 |
|
"Erik Ginnerskov" <erik@donotspammeplease.invalid> skrev i en meddelelse
news:457c8bfc$0$49204$14726298@news.sunsite.dk...
> .calendar_today a:link,.calendar_eventday a:visited{
> font-family: Verdana, Arial, Helvetica, sans-serif;
> text-decoration: none;
> text-align: center;
> font-weight: bold;
> font-size: 7pt;
> font-style: normal;
> color:#ff0000;
> background-color: #ccc;
> }
> .calendar_eventday a:link,.calendar_eventday a:visited{
> font-family: Verdana, Arial, Helvetica, sans-serif;
> text-decoration: none;
> text-align: center;
> font-weight: bold;
> font-size: 7pt;
> font-style: normal;
> color:#000000;
> background-color: #ccc;
> }
>
> Det er nederste linje i begge blokke. Ret selv ind, så du er tilfreds med
> resultatet.
Nu ved jeg ikke helt om Holst har opnået det han ønsker, hvis ikke så
skyldes det at farver til #content a i det første stylesheet påvirker
kalenderen også. Lige nu har Holst både sat baggrund og tekst farve til
#000; på #calendar_eventday, men alligevel er teksten ikke sort
..calendar_eventday a:link,.calendar_eventday a:visited{
....
color:#000000;
background-color: #000;
}
En mulig løsning kunne være at gennemtvinge farverne til kalenderen med
!important
color:#000000 !important;
background-color: #000;
Og muligvis kunne dette link være interessant
http://www.w3.org/TR/CSS21/cascade.html#cascading-order
--
Med venlig hilsen - Carsten Sørensen
Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk
| |
Holst (11-12-2006)
| Kommentar Fra : Holst |
Dato : 11-12-06 21:07 |
|
Carsten Sørensen wrote:
> Nu ved jeg ikke helt om Holst har opnået det han ønsker,
Nej, ikke helt, men der skete da i det mindste noget med Eriks forslag.
Ligegyldig, hvad jeg gjorde, så forblev det grønt i grønt. Bortset fra,
når jeg førte musen over, så blev det grønne bogstaver med hvid baggrund
(og jeg har ingen idé om, hvor det er defineret, at det skal forholde
sig sådan).
> hvis ikke så
> skyldes det at farver til #content a i det første stylesheet påvirker
> kalenderen også. Lige nu har Holst både sat baggrund og tekst farve til
> #000; på #calendar_eventday, men alligevel er teksten ikke sort
Og det er netop det, jeg gerne vil have den skal være. Jeg vil gerne
have følgende:
almindelige dage - hvid tekst, grøn baggrund
dage med en event - fed sort tekst, grøn baggrund
og så er der en ramme omkring "i dag" - det er fint. Jeg vil dog gerne
have, at farve vedbliver med at være som ovenfor. Jeg kan se, at den i
dag er sort, selvom der ikke er nogen event i dag.
> .calendar_eventday a:link,.calendar_eventday a:visited{
> ...
> color:#000000;
> background-color: #000;
> }
>
> En mulig løsning kunne være at gennemtvinge farverne til kalenderen med
> !important
> color:#000000 !important;
> background-color: #000;
Ja, jeg fjernede Eriks background-color: #000 og tilføjede et par
!important i samme definitioner, nemlig:
text-decoration: none !important;
color:#000000 !important;
for så bliver den nemlig blot i fed sort. Uden !important ved
text-decoration blev linkene understreget.
Nu vil jeg overveje, hvordan jeg får "i dag" til at beholde sin farve.
Men det gør da absolut ikke forståelsen nemmere for mig, at det andet
stylesheet påvirker denne.
Men jeg siger i hvert fald tak - til jer begge - og så kan det jo være,
jeg vender tilbage med det sidste lille problem om et par timer, når jeg
opgiver.
| |
Holst (11-12-2006)
| Kommentar Fra : Holst |
Dato : 11-12-06 21:31 |
|
Holst wrote:
> Men jeg siger i hvert fald tak - til jer begge - og så kan det jo være,
> jeg vender tilbage med det sidste lille problem om et par timer, når jeg
> opgiver.
Ja, så lykkedes det mig! Det har da også vist sig, at !important er en
glimrende ting til at give mig min vilje.
| |
Jørn Andersen (12-12-2006)
| Kommentar Fra : Jørn Andersen |
Dato : 12-12-06 02:12 |
|
On Mon, 11 Dec 2006 21:31:02 +0100, Holst <newsnov06@shelter.dk>
wrote:
>Holst wrote:
>Ja, så lykkedes det mig! Det har da også vist sig, at !important er en
>glimrende ting til at give mig min vilje.
Jeg tror du ville få glæde af at sætte dig lidt mere ind i, hvordan
CSS-egenskaber nedarves, og om "specificitet" og vægtning.
<url: http://www.w3.org/TR/CSS2/cascade.html>
Fx har egenskaber for elementer, som er angivet ved id, større vægt,
end hvis de var abgivet ved en klasse.
Desuden vil inline-egenskaber "overskrive" egenskaber angivet i et
stylesheet, etc.
Når man kender de mest basale af disse regler, kan man oftest undvære
!important.
Problemet med !important er, at man meget hurtigt kan få brug for en
"!veryimportant"
Mvh. Jørn
--
Jørn Andersen,
Brønshøj
| |
Ukendt (12-12-2006)
| Kommentar Fra : Ukendt |
Dato : 12-12-06 21:07 |
|
"Jørn Andersen" <jorn@jorna.dk> skrev i en meddelelse
news:9nvrn2d7k6h0kgoa1fimqlchrslmi4atfb@4ax.com...
>>Holst wrote:
>>Ja, så lykkedes det mig! Det har da også vist sig, at !important er en
>>glimrende ting til at give mig min vilje.
> Fx har egenskaber for elementer, som er angivet ved id, større vægt,
> end hvis de var abgivet ved en klasse.
Netop det Holst er løbet ind i her
> Problemet med !important er, at man meget hurtigt kan få brug for en
> "!veryimportant"
Ja alt skal bruges med omtanke Men i dette konkrete tilfælde mener jeg
nu ikke det giver problemer. Holst kunne selvfølgelig alternativt begynde at
omskrive det template han har fundet
--
Med venlig hilsen - Carsten Sørensen
Gode råd til webdesigneren - http://csnet.dk/html/
Nørholm Forsamlingshus - http://forshus.dk
| |
|
|