Aankondiging

Collapse
No announcement yet.

Css

Collapse
X
 
  • Filter
  • Tijd
  • Show
Clear All
new posts

  • Css

    Maar even een nieuw draadje openen, in plaats van verder te gaan in dit niet helemaal relevant getitelde draadje:



    Ik heb inmiddels aardig in de gaten hoe de lay-outprincipes van CSS werken, maar met een paar dingen zit ik nog te puzzelen. Ik zal ze hier wel posten zodra ik er weer tegenaan loop.

    Maar nu alvast de eerste: ik heb een ontwerp met een sidebar aan de rechterkant, die netjes meekrimpt zodra het scherm kleiner wordt.

    #sidebar {position:absolute;top:0;right:25px;width:20%;bord er-top: 10px solid #ccc;padding-top: 1px;padding-bottom: 40px}
    Maar hoe laat ik de plaatjes in die sidebar mooi meekrimpen? Op een breed scherm passen ze mooi in de sidebar, maar op een smal scherm lopen ze er rechts uit vanwege hun vaste breedte van 200 pixels. Toch maar een vaste breedte kiezen in plaats van een percentage? Of kan ik toch iets aan de plaatjesinstelling veranderen?

    Dus, squadra, wooter en Tom, hoe fix ik dat? :)
    Last edited by Dutch; 04-03-09, 11:32. Reden: Tom moet er natuurlijk ook bij :)
    Z3 Coupé 2.8, E36 325i Coupé, Octavia 4x4 turbo - 8W, Octane, Autosport.nl
    "No comment! There will be a formal press release after our victory." - Herr Doktor Altbauer, Schnorcedes Rennleiter

  • #2
    Afbeeldingen die bijvoorbeeld 200 pixels breed zijn moet je niet verkleinen of opblazen, dat geeft een slechte kwaliteit (zeker door je browser). Dus gewoon in het originele formaat weergeven. Ik zou dus gaan voor een balk in vaste pixels ipv percentages.

    Andere optie is brede afbeeldingen pakken waarbij het onderwerp telkens links/midden/rechts te zien is, en de rest uitvult met omgeving die je niet per se hoeft te zien. Die foto's kun je als achtergrond van je div instellen. Als je div groter is, zie je meer van de foto. Maar dat is erg lastig met het zoeken van foto's.

    Comment


    • #3

      Dat bedoelde ik met de tweede alinea.

      Comment


      • #4
        Als achtergrond van je div? Hmm, ik zal eens proberen, maar ik vermoed dat 't niet gaat werken. Toch maar naar vaste breedte dan. :)

        Wel leuk trouwens, weer eens iets nieuws leren - wat voor de experts uiteraard al heel belegen is...
        Z3 Coupé 2.8, E36 325i Coupé, Octavia 4x4 turbo - 8W, Octane, Autosport.nl
        "No comment! There will be a formal press release after our victory." - Herr Doktor Altbauer, Schnorcedes Rennleiter

        Comment


        • #5
          Oorspronkelijk geplaatst door Tom Bekijk bericht
          http://i43.tinypic.com/xgbihl.jpg
          Dat bedoelde ik met de tweede alinea.
          Ik snap 'm, maar het gaat hier om landkaartjes waarvan je juist alles erop wilt hebben, vandaar.
          Z3 Coupé 2.8, E36 325i Coupé, Octavia 4x4 turbo - 8W, Octane, Autosport.nl
          "No comment! There will be a formal press release after our victory." - Herr Doktor Altbauer, Schnorcedes Rennleiter

          Comment


          • #6
            #sidebar img { width: 100%; }
            Aan je CSS toevoegen.

            Afbeeldingen binnen die div worden automatisch opgeblazen of verkleind naar de grootte van de omliggende div (die 20% van het scherm is).
            Misschien vind jij de kwaliteit voldoende. Ik zou het nooit in mijn werk gebruiken op die manier :)

            Comment


            • #7
              Dank, ik zal eens kijken of ik daar genoegen mee kan nemen. :)
              Z3 Coupé 2.8, E36 325i Coupé, Octavia 4x4 turbo - 8W, Octane, Autosport.nl
              "No comment! There will be a formal press release after our victory." - Herr Doktor Altbauer, Schnorcedes Rennleiter

              Comment


              • #8
                Verdomd, het wérkt wel. Maar inderdaad, hier en daar wordt een kaartje iets brokkeliger. OTOH, het zijn toch middeleeuwse kaartjes in bibberend inkt...
                Z3 Coupé 2.8, E36 325i Coupé, Octavia 4x4 turbo - 8W, Octane, Autosport.nl
                "No comment! There will be a formal press release after our victory." - Herr Doktor Altbauer, Schnorcedes Rennleiter

                Comment


                • #9
                  Ja, het kán wel, maar dat betekent niet dat je het ook moet doen :). Veelal ga je net die zijnavigatiebalken een vaste breedtte geven, en je "content" een variabele breedtte geven, met foto's die niet te groot zijn zodat je webpagina op 1024x768 er toch nog netjes uit ziet.
                  2007 BMW Z4 M Roadster - 2010 BMW 120d Cabrio - 2011 BMW R1200RT

                  Comment


                  • #10
                    Nog maar weer een vraagje: waarom komen de kleur en de lijn van 1px in IE7 wel uit de verf, maar niet in FF en Safari?

                    h1, h2, h3, h4, h5, {font-family: arial,verdana,sans-serif;margin: 1.2em 0 .3em;color:#336633;border-bottom: 1px solid #336633;padding-bottom: .2em}
                    Z3 Coupé 2.8, E36 325i Coupé, Octavia 4x4 turbo - 8W, Octane, Autosport.nl
                    "No comment! There will be a formal press release after our victory." - Herr Doktor Altbauer, Schnorcedes Rennleiter

                    Comment


                    • #11
                      Een liquid design zou ik niet doen, zelfs bij de nieuwe overheids sites gaan we dat niet doen. Wel kan je rekening houden met lettergroottes en bv dat je makkelijk naar elk platform zou kunnen (monitor,tv,mobiel) bij de basis opzet van je template.

                      Voor je css heb je ook een validator die je via w3 kan vinden (http://jigsaw.w3.org/css-validator/). Je marge setting is invalide (spatie teveel).

                      margin: 1.2em 0.3em; padding: 0 0 0.2em 0;

                      zorg ervoor dat je bij de h's ook de padding voor alles netjes zet omdat IE en FF anders renderen (maw in IE zou je nu anders 1em top hebben en nu dus 0)

                      Tip2: installeer FIREBUG als extensie in FF zodat je al je attributen makkelijk kan bekijken. Ik doe eigenlijk niet anders meer.... Gelukkig is mijn klus hier klaar en ga ik door naar de volgende maar te lang naar je eigen site kijken gaat uiteindelijk toch vervelen :-)

                      SUCCESS en laat even je basistemplate hier zien dan kan je misschien nog wat goede tips meekrijgen...
                      Last edited by squadracorse; 07-03-09, 22:17.

                      Comment


                      • #12
                        Owja indien je toch grote plaatjes erin wil plakken en ze afgesneden mogen worden omdat je liquid wil blijven is overflow: hidden; een uitkomst :-) check maar eens:


                        HTML-code:
                        #sidebar {position:absolute;top:0;right:25px;width:20%;border-top: 10px solid #ccc;padding: 1px 0 40px 0; overflow: hidden;}
                        Last edited by squadracorse; 07-03-09, 22:20.

                        Comment


                        • #13
                          Brunnnnnnnnnnnn komop geef even je templates en css dan maken we die paris site even netjesssssssssssssss zonder vormgeving teveel aan te tasten en kan dutch zien hoe het moet :-)

                          M

                          Comment


                          • #14
                            Hoezo, wat is er mis met die site? :-)

                            (serieus: tips welkom hoor, ik ben immers geen webbouwer van beroep)
                            Op dag 8 schiep God de tie-wrap en de duct tape. En God keek en zag dat het goed was.

                            Comment


                            • #15
                              2 aanpassingen in je template voor de weergeven van je posts.
                              enkele css aanpassingen die weergave post aanpassen

                              resultaat: minder hoogte bij overzicht van je posts onder elkaar zodat compacter. Dus niet een redesign maar enkele tweaks.

                              Comment


                              • #16
                                Ok, hierbij het hoofdsjabloon en de css als tekstbestanden... kun je daar iets mee?
                                Attached Files
                                Op dag 8 schiep God de tie-wrap en de duct tape. En God keek en zag dat het goed was.

                                Comment


                                • #17
                                  Okee, daar is-ie weer. :)

                                  Eindelijk begonnen aan de css-ombouw van m'n autosportsites 8W, 6th Gear en MRH. De laatste twee zijn zo goed als klaar, hoewel er op verschillende pagina's nog kleinere tabelletjes zitten die ouderwets zijn opgemaakt. Aan die rotklus kom ik later wel toe. Ik ga me eerst op het omzetten van de eerstgenoemde site richten: die is veruit de grootste, barst van de tekst, de content van elke pagina is waanzinnig anders. Ik hoop het desondanks zo veel mogelijk geautomatiseerd te kunnen doen.

                                  Paar vraagjes alvast:

                                  1. Wie weet een handige manier om list-closetags automatisch toe te voegen? Dus </li> aan het slot, om het helemaal valid te maken. In het vorige oudbakken ontwerp, dat vet quirky is, deed ik daar nooit moeite voor. Het kwam er toch wel goed uit. Maar nu wil ik voor het nette toch wel toevoegen. Maar hoe? En het zijn er echt duizenden, verspreid over tientallen pagina's...

                                  2. Dan nog een detailvraagje. Mijn visited links veranderen nu van kleur - van blauw naar rood - ondanks het feit dat ik dat alleen bij hover heb aangegeven:

                                  a,a:link,a:hover,a:active,a:visited {background:transparent; cursor:pointer;text-decoration: none}
                                  a,a:link,a:active,a:visited {color: #2253A5}
                                  a:hover {color: #cc0033}
                                  Wie haalt de fout eruit, want ik zie 't niet...
                                  Z3 Coupé 2.8, E36 325i Coupé, Octavia 4x4 turbo - 8W, Octane, Autosport.nl
                                  "No comment! There will be a formal press release after our victory." - Herr Doktor Altbauer, Schnorcedes Rennleiter

                                  Comment


                                  • #18
                                    Die css-code doet wat je zegt. Probleem lijkt dus ergens anders te zitten ; misschien een dubbele declaratie van een a/href ? Harde style="blabla" gekoppeld aan de betreffende <a href> in je pagina ? Toekenning van een class aan betreffende <a href> ?

                                    Comment


                                    • #19
                                      Nee, niks van dat al. Maar het grappige is dat de browser thuis het goed doet, maar die op het werk gisteren dus niet. En 't is allebei FF 3.5.5! Hmm...

                                      Verder nog steeds geen zoek-en-vervangtrucje voor die list-closetags gevonden. Grr. Heb je compleet XHTML-gevalideerde pagina's behalve die suffe closetags!
                                      Z3 Coupé 2.8, E36 325i Coupé, Octavia 4x4 turbo - 8W, Octane, Autosport.nl
                                      "No comment! There will be a formal press release after our victory." - Herr Doktor Altbauer, Schnorcedes Rennleiter

                                      Comment


                                      • #20
                                        Caching ? Als je CSS files aanpast moet je vaak cache legen anders blijft FF doodleuk die oude css-file inladen.

                                        Daarvoor heb je ideale tooltje "clearcachebutton" die in FF in de balk een gele bezem plaatst en daarmee met 1 druk op de knop je cache leegt. Druk ik een kleine 50 x per dag op ofzo al 3 jr lang dus is wel 'handig' :)

                                        Comment


                                        • #21
                                          Zou kunnen, M4. Sterker nog, iets anders kan ik ook niet bedenken. Ik zal morgen nog eens kijken. Toch dacht ik dat ik FF eerst even helemaal verlaten had (automatisch cache wissen na afsluiten staat aan).

                                          Intussen begonnen met een zware search-and-replace-operatie voor 8W zelf. Heb zo veel mogelijk proberen te bedenken wat er automatisch kan, maar ik vrees dat ik nog een boel met de hand moet nalopen...

                                          Verder heb ik een idee over het toevoegen van die close tags. Eerst <li> vervangen door </li><li> en </ul> vervangen door </li></ul>, dan <ul></li><li> vervangen door <ul><li>. Dan moet 't goedkomen.
                                          Z3 Coupé 2.8, E36 325i Coupé, Octavia 4x4 turbo - 8W, Octane, Autosport.nl
                                          "No comment! There will be a formal press release after our victory." - Herr Doktor Altbauer, Schnorcedes Rennleiter

                                          Comment


                                          • #22
                                            Indien content in je database kan je er de library van TIDY doorheen halen en netjes updaten...

                                            Indien hardcoded maakt elke normale editor daar correcte html van.
                                            Notepad++ heeft bv bij textFX de html TIDY optie om in 1 keer document of map netjes te maken, maakt alles valide zelfs Word troep.

                                            (ter info wat tidy kan doen met je document: online tool: http://valet.htmlhelp.com/tidy/ )
                                            Last edited by squadracorse; 12-11-09, 14:39.

                                            Comment


                                            • #23
                                              overigens je css code kan gewoon zijn:

                                              a, a:visited, a:active, a:hover {text-decoration: none; color: #2253A5 }
                                              a:hover {color: #c03}

                                              een a heeft namelijk standaard nooit een achtergrondkleur en de pointer is altijd standaard, geen zin om te declareren want je overruled er namelijk niets mee.

                                              Comment


                                              • #24
                                                Mij boeit die html-perfectie niet zozeer, als je 't dus graag wil ; doen , maar voor je gebruikers zal 't weinig uitmaken.

                                                Het is zoiets als voor een rammeltje je hele motor uitbouwen. Ja het is beter maar weegt de inspanning (en kosten) op tegen het resultaat ? Vaak niet.

                                                Kun je beter 2 leuke nieuwe stukjes schrijven in de tijd die je bespaart, daar trek je meer bezoekers mee dan met schone html. Imho.

                                                Comment


                                                • #25
                                                  Oorspronkelijk geplaatst door squadracorse Bekijk bericht
                                                  Indien hardcoded maakt elke normale editor daar correcte html van.
                                                  Notepad++ heeft bv bij textFX de html TIDY optie om in 1 keer document of map netjes te maken, maakt alles valide zelfs Word troep.

                                                  (ter info wat tidy kan doen met je document: online tool: http://valet.htmlhelp.com/tidy/ )
                                                  Dank, squadra, dat zijn goeie tips. Ik gebruik van oudsher TextPad, maar misschien moet ik dat Notepad++ eens proberen.
                                                  Z3 Coupé 2.8, E36 325i Coupé, Octavia 4x4 turbo - 8W, Octane, Autosport.nl
                                                  "No comment! There will be a formal press release after our victory." - Herr Doktor Altbauer, Schnorcedes Rennleiter

                                                  Comment


                                                  • #26
                                                    Ideaal, dat HTML Tidy. Scheelt me echt een boel werk. Nogmaals dank voor de tip!
                                                    Z3 Coupé 2.8, E36 325i Coupé, Octavia 4x4 turbo - 8W, Octane, Autosport.nl
                                                    "No comment! There will be a formal press release after our victory." - Herr Doktor Altbauer, Schnorcedes Rennleiter

                                                    Comment

                                                    Working...
                                                    X
                                                    😀
                                                    🥰
                                                    🤢
                                                    😎
                                                    😡
                                                    👍
                                                    👎