WordPress DK Forum

1. 

   peterhenrichsen
   

   Supermedlem
   Joined: apr '07
   Posts:

   Reputation:

    

   Halløj!

   Jeg sidder som tidligere beskrevet i mit (synes jeg selv) lækre Brian Gardner Revolution tema, men jeg må erkende at jeg ikke styrer Cascading Style Sheets så godt.

   Det er nok nemmest at komme med et eksempel.

   http://kulturfoto.dk/2008/07/22/bournonville-pa-pantomimen/

   I dette indlæg, nederst nede, arbejder jeg med nogle informationsbokse fx "Blå Bog" og "Baggrund".

   Udfordringen går på, at jeg ikke kan få 'margin' og 'padding' til at virke, hverken i IE eller Firefox

   Blå Bog's CSS koden ser således ud:

   .blaabog {
   width: 490px;
   background: #99CCFF;
   float: left;
   margin: 10px 10px 20px 10px;
   border-top: 4px solid #1A4E88;
   border-left: 1px solid #1A4E88;
   border-right: 1px solid #1A4E88;
   border-bottom: 1px solid #1A4E88;
   padding: 20px 20px 10px 20px;
   }

   Og alligevel står teksten helt ud til kanten i både venstre og højre side. Burde ovenstående margin-kommando ikke forhindre det?

   ------------

   Den anden ting er at mine bokse i dette tema, ligger fuldstændig "cleanet" op af hinanden. Blå bog boksen ligger lige op og ned af Baggrund boksen. Der troede jeg at padding ville have en effekt, men tydeligvis ikke her?

   Er det mon netop begrebet Cascading som gør sig gældende her, nemlig at tidligere kommandoer om margin og padding "overruler" mine CSS-kommandoer for Blå bog og Baggrrund?

   Og er det korrekt at det er padding som skal skabe lidt horisontal luft mellem mine elementer?

   For jeg har altid savnet en nem både at skabe horisontal luft mellem elementerne på, da html 'break-kommandoen' åbenbart ikke er den rigtige måde at gøre det på?

   På forhånd mange tak :-)

   Hilsen Peter

   Skrevet 16 years siden #
2. 

   Thomas-DK
   

   Supermedlem
   Joined: sep '07
   Posts:

   Reputation:

    

   Når du har float på et element, så skal du forstille dig, at det ligger i et andet lag end resten (uden float). Derfor kan det nemt drille mht. at sætte margin på, så det påvirker elementer i et andet lag. Her snakker jeg især om forskelligheder i IE og FF.

   Hvis du tilføjer !important til dine css regler, så for de første prioritet.
   Padding er luft inden i elementet, margin er udenfor.

   Og jeg kan se i FireBug (must have firefox extension) at din margin og padding på baggrund bliver overskrevet af #content p

   Det løser du ved ovenstående forklaring f.eks.
   margin: 10px 10px 10px 10px !important;

   Håber jeg svarede på alle dine spørgsmål og jeg ikke forvirrede dig mere :D

   Skrevet 16 years siden #
3. 

   Thomas-DK
   

   Supermedlem
   Joined: sep '07
   Posts:

   Reputation:

    

   Jeg tilføjede lige !important til dine blaabog og baggrund css regler.
   Det vil løse dine problemer er jeg ret sikker på.

   Der vil nok også komme et andet, som er at padding udvidder elementet.
   Så du skal faktisk trække antal px du sætter i padding, fra i width.
   God fornøjelse :D

   Skrevet 16 years siden #
4. 

   peterhenrichsen
   

   Supermedlem
   Joined: apr '07
   Posts:

   Reputation:

    

   Tusind tak, Thomas!

   Det med float og !important anede jeg ikke, og jeg kan høre at jeg har byttet rundt på padding og margin.

   Jeg læser lige på det, og øver i lidt workshop ;-)

   Så har jeg garanteret nogle gode spørgsmål lidt senere.

   Hvad mener du med at du har tilføjet !important til mine CSS regler? Den forstod jeg ikke lige?

   Endnu engang en stor tak :-)

   Hilsen Peter

   Skrevet 16 years siden #
5. 

   Thomas-DK
   

   Supermedlem
   Joined: sep '07
   Posts:

   Reputation:

    

   Super!
   Jeg svarede med vilje ikke 100% på dine spørgsmål, da jeg er sikker på du finder ud af det.
   Du ved også godt du bare spørger igen ;)

   I Firebug, kan jeg tilføje og rette i din css og se resultatet live. Så jeg satte !important i dine blaabog og baggrund under margin og padding. Så kommer det mellemrum du savner, men der kommer også det andet problem jeg beskrev.

   Prøv dig frem :)

   Skrevet 16 years siden #
6. 

   peterhenrichsen
   

   Supermedlem
   Joined: apr '07
   Posts:

   Reputation:

    

   Hej Thomas

   Jeg er også tilhænger at man selv læser sig til alt det der er muligt, men jeg synes nu du afslørede ganske meget. Nogle gange kører man bare håbløst fast, og ved ikke i hvilken bog man skal læse, og så er det SÅ fedt at få et skub i den rigtige retning.

   Det er blevet så fint nu, men mine infobokse på Kulturfoto.

   Firebug lyder for fedt. Det må jeg bestemt kigge på ...

   Nu, hvor du sikkert kigger i dette indlæg igen, har jeg et lille tillægsspørgsmål:

   Mange af mine overskrifter fx på mellemrubrikker, defineret i CSS, står lige som jeg ønsker det i IE7 mens Firefox næsten ikke retter sig efter noget af det. Er det bare sådan noget programmøren må forfine sig et kompromis til, så det står nogenlunde i de fleste browsers?

   Mange hilsner Peter

   Skrevet 16 years siden #
7. 

   peterhenrichsen
   

   Supermedlem
   Joined: apr '07
   Posts:

   Reputation:

    

   Hej Thomas

   Jeg er også tilhænger at man selv læser sig til alt det der er muligt, men jeg synes nu du afslørede ganske meget. Nogle gange kører man bare håbløst fast, og ved ikke i hvilken bog man skal læse, og så er det SÅ fedt at få et skub i den rigtige retning.

   Det er blevet så fint nu, men mine infobokse på Kulturfoto.

   Firebug lyder for fedt. Det må jeg bestemt kigge på ...

   Nu, hvor du sikkert kigger i dette indlæg igen, har jeg et lille tillægsspørgsmål:

   Mange af mine overskrifter fx på mellemrubrikker, defineret i CSS, står lige som jeg ønsker det i IE7 mens Firefox næsten ikke retter sig efter noget af det. Er det bare sådan noget programmøren må forfine sig et kompromis til, så det står nogenlunde i de fleste browsers?

   Mange hilsner Peter

   Skrevet 16 years siden #
8. 

   Thomas-DK
   

   Supermedlem
   Joined: sep '07
   Posts:

   Reputation:

    

   Man vender sig til at undgå de ting IE og FF er uenige om, men hvis man ikke kan undgår dem, så kan du altid lave et hack til FF eller IE. Hvis det ser pænt ud i FF, så kør det som regel også i Safari, Opera og alle de andre gecko (ligesom FF) baseret browsere.
   Så hvis du tjekker i IE og FF, er du ret sikker.

   Jeg gør som regel altid såden her i starten af mine css'er:
   * {margin:0; padding:0;}

   IE og FF sætter nemlig selv nogle standard værdier der som regel ikke er ens.
   Så skal du selv sætte padding og margin på input, ul, li osv. men det bliver normalt også ens så.

   Når jeg lige sidder ved min arbejds PC så skal jeg nok kigge på dine overskrifter.

   Ps. Jeg købte en mac for et ½ års tid siden og der viser det sig, at der også er forskel på FF på pc og på mac :D

   Det skal bare ikke være nemt :D

   Skrevet 16 years siden #
9. 

   peterhenrichsen
   

   Supermedlem
   Joined: apr '07
   Posts:

   Reputation:

    

   Oho, også forskel på PC og Mac, herligt herligt ;-)

   Tak for svar, Thomas :-)

   Skal huske det CSS tip, og så må jeg vist til at lave nogle tests på alle populære browsers, for jeg ser nemlig også en del af mine brugere der anvender Safari.

   Nej, det ikke er nemt, men det er jo også lidt spændende ...

   Men uden Wp-venner gik det jo slet ikke, så TAK :-) endnu engang

   mange hilsner Peter

   Skrevet 16 years siden #
10. 

    fiskeben
    

    Seniormedlem
    Joined: maj '07
    Posts:

    Reputation:

     

    Med hensyn til at teste i flere browsere og på flere platforme kan man bruge Browsershots (http://browsershots.org/). Det er kort fortalt en service, som tager et billede af en given hjemmeside, som den ser ud i et utal af forskellige browsere. Det tager dog lidt tid, så det er ikke noget man bare gør, hver gang man har ændret padding fra 2px til 3px :)

    -- fiskeben
    Besøg min blog om open source, web, Mac og meget mere

    Skrevet 16 years siden #
11. 

    peterhenrichsen
    

    Supermedlem
    Joined: apr '07
    Posts:

    Reputation:

     

    Det er nemlig rigtigt! Det er lige den jeg bruger, og den kan klart anbefales til alle andre WP'ere der ikke kender den. Browershots viser nogle statiske skærmbillederne af det link man sender ind, så man kan se resultatet i adskillige browser. Man lægger sit link i et batch job hos browsershots, og så kan der altså godt gå en time eller mere, inden ens job er kørt. Men resultatet er meget værd, så man skal blot vænne sig til at sætte den til at koge, mens man arbejder videre med noget andet.

    Så godt du nævnte det, fiskeben ;-)

    Jeg benytter også noget der hedder:

    http://tredosoft.com/Multiple_IE

    Her kan man teste i de ældre versioner af IE. Altså ikke blot statiske skærmbilleder, men en installation (eller emulering, aner det ikke) af de gamle IE's. Fx er der stadig mange der benytter 6'eren, og så kan det være rart lige at suse rundt i WP menuerne og se hvordan det tager sig ud :-)

    mvh Peter

    Skrevet 16 years siden #
12. 

    Søren Hugger Møller
    

    Senioradministrator
    Joined: mar '07
    Posts:

    Reputation:

     

    Jeg er blevet ret vild med IE Tester, et program der indeholder IE 5.5, IE 6, IE 7 og IE 8. Ikke noget med at installere en masse forskellige versioner. Bare ét program med dem alle i :)

    http://my-debugbar.com/wiki/IETester/HomePage

    Søren Hugger Møller - http://spiri.dk

    Skrevet 16 years siden #
13. 

    peterhenrichsen
    

    Supermedlem
    Joined: apr '07
    Posts:

    Reputation:

     

    ok :-)

    Skrevet 16 years siden #

RSS feed for this topic

Svar

Du skal være logget ind for at skrive.