Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie
Stel een vraag

Discussieer mee of stel een vraag

Filters - Verfijn resultaten

Topictype

CategorieŽn

AND

Onderwerpen

AND

Subforum

Datumbereik

Topicstarter

Topicstatus

492 topics - Pagina 1 van 20

[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'

22-04 15:41 discussie 1.415
http://tweakers.net/ext/f/4BBqfZHRULBJNIf4QF1NGrgl/full.png
http://tweakers.net/ext/f/X8HRGAUgfTRXWLXMKsdhXGvT/full.png
Met CSS kun je websites vormgeven en opmaken. Zo zijn lettertypes aan te passen, tekst in verschillende groottes neer te zetten of zelfs alles standaard bold te maken. Om nog maar wat te noemen: alles groen of rood En dan de achtergrond blauw

Op Tweakers.net heb je de mogelijkheid met eigen CSS de standaard gedefiniŽerde CSS te 'overrulen'. Dit is een Karmastore-feature, namelijk de Custom CSS, welke voor 500 karmapunten per half jaar aan te schaffen is. Mocht je niet genoeg karma verdiend hebben afgelopen jaar, geen nood, Firefox gebruikers kunnen de Stylish-addon installeren.

Je krijgt na 'aankoop' van de feature bij je layout-voorkeuren een extra vak erbij. Eerst een vinkje zetten en je kan alle code erin zetten die je wilt.

http://tweakers.net/ext/f/8Y1yw9erVv27sBmeDOm32LKI/full.png
Algemeen (FP + GoT)
    Tweakers.net Frontpage
      GoT
        Aanbevolen
          Regels voor het posten van eigen CSS

          • Plaats geen CSS die de site ontoegankelijk kan maken!
          • Alle CSS dient geplaatst te worden tussen [code=css][code]-tags
          • Graag een screenshot van de uitwerking (thumbnails of afbeelding van maximaal 600px breed)
          Posts tegen elkaar aan
          Credits aan Wiethoofd: Wiethoofd in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
          DM knoppen terug
          Credits aan Wiethoofd: Wiethoofd in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
          Nieuw bericht melding meer in de nieuwe stijl
          Credits aan ikbenwouter: ikbenwouter in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
          Minder ruimte tussen topictitels
          Credits aan Kamstra & Wiethoofd: Wiethoofd in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
          Blauwe header
          Credits aan Maramello: Maranello in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
          Paginaknopjes mod
          By myself: F.West98 in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
          IT Banen en whitepapers weg uit menu
          By myself: F.West98 in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
          Postheaders oude kleur en meer kleurtjes
          By myself: F.West98 in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
          Alles breed, sidebars weg
          By myself: F.West98 in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
          "Uit de community" zonder usericon
          Credits aan Wiethoofd: Wiethoofd in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
          Henk is back!
          Credits aan FireWood: FireWood in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
          Twk5 is back???
          Credits aan Darkstone: Darkstone in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
          Zeeer donker
          Credits aan HoT: Hero Of Time in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
          Zoekbar weg, rare dingetjes FP weg
          Credits aan blue-eagle: Blue-eagle in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
          Zon, strand en zee!
          Credits aan blue-eagle: Blue-eagle in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
          Blue-ish
          Credits aan wontcatchme: wontcachme in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"
          TOPICSEARCH
          Credits aan Ramon: [verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'
          Forumknop uitgebreid
          By myself: F.West98 in "[verzamel] CSS-styles; 'Hoe ziet jouw T.net eruit?'"


          Dus... Post hieronder jouw CSS-styles!!
          Alle CSS-styles zijn gepikt uit de bronnen :P
          Aanvullingen of opmerkingen, DM kan altijd!

          Bootstrap tabcollapse in een accordion

          20-04 10:53 vraag 16

          Vraag

          Mijn vraag
          Hallo, ik bouw een website die gebaseerd is op een bootstrap accordion. In de uit te klappen panels verschijnt de content die is opgedeeld in (bootstrap) tabs. Op de mobiele versie veranderen de tabs ook in een eigen accordion, dit wordt dus een tabcollapse, voor elke panel in de parent accordion.

          Het probleem is dat de tabcollapse op zichzelf prima werkt maar niet binnen een accordion panel. De tabs voor de desktopversie verschijnen wel maar de mobiele accordion niet, hier loop ik op vast...
          De accordion verschijnt wel nadat ik het browserscherm verschaal maar deze moet direct werken zodra de pagina laadt. In een on load uitgeklapte panel werkt de tabcollapse wel dus hij lijkt te conflicteren als de parent panel (on load) verborgen is.

          Relevante software en hardware die ik gebruik
          De gebruikte bootstrap tabcollapse plugin. Het probleem doet zich in verschillende browsers voor.

          Verkijk ik me ergens op of is het gewoon niet mogelijk om een tabcollapse te laden in een verborgen element? Bedankt voor alle advies.

          Beste antwoord

          Ik denk dat de tabs zichtbaar moeten zijn als je tabCollapse aanroept. Anders kan hij niet kijken of de width groot genoeg is.
          Workaround: opnieuw tabCollapse laten nadenken als de parent panel wordt opengeklapt: https://jsfiddle.net/a6d5yxat/9/

          De jsFiddle werkt niet in Chrome:
          code:
          1
          
          Refused to execute script from 'https://raw.githubusercontent.com/flatlogic/bootstrap-tabcollapse/master/bootstrap-tabcollapse.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

          In Firefox werkt de fiddle wel.

          Jouw favoriete CSS3 functies?

          02-02 19:12 discussie 1
          Hoi allemaal,

          Ik ben van plan om een serie op mijn *snip* spam kanaal te maken over CSS3 en het praktisch gebruik daarvan in het bijzonder. Denk aan dingen als border-radius en bax-shadow. Maar ik ben ook benieuwd wat andere webdesigners als absolute 'must-haves' zien binnen CSS3.

          [CSS] Dropdown-menu sluit niet goed aan

          07-09-2015 discussie 15
          Goedendag, ik heb sinds een paar jaar een dropdown menu van APY.com op mijn website en deze bevalt zeer goed.
          Nu wil een regel toevoegen aan het submenu en daar gaat het dan fout.
          Als ik bv onder Europa iets wil toevoegen sluit het submenu niet meer aan op het hoofdmenu.
          het is misschien het duidelijkst als je de website bezoekt en dan met de muis op Europa en daarna op een ander continent.

          Ik heb een minimale basis kennis van CSS en daarom vraag ik het hier.

          http://i1156.photobucket.com/albums/p561/sjonnies/Naamloos_zpskpnprubb.png

          voor alle duidelijkheid zal ik ook mijn url erbij plaatsen: www.johnvanzon.com


          ik denk dat de foto genoeg zegt wat het probleem is: nl het submenu is niet lang genoeg.

          Ik weet niet hoe ik de CSS hier kan plaatsen die erbij hoort, maar als iemand mij wil helpen hoor ik het graag.

          John

          Table hoger dan height

          07-09-2015 discussie 9
          Als iemand mij kan helpen met mijn - waarschijnlijk zeer eenvoudig - probleem, dan zou ik dat zeer waarderen.

          Ik ben bezig met het maken van een email signature. Hiervoor wil ik gegevens plaatsen in een table. Uiteindelijk wil ik een signature zoals volgend voorbeeld:
          http://nielssanders.nl/emailsignature/sig4.jpg

          De Html/Css maak ik in Dreamweaver. Met onderstaande code ziet mijn signature er als volgt uit:
          http://nielssanders.nl/emailsignature/sig1.jpg

          In live mode - of in een browser ziet het er echter zo uit:
          http://nielssanders.nl/emailsignature/sig2.jpg

          Het probleem waar ik tegenaan loop is dat de table hoger is dan ik aangeef. Hierdoor loopt de 'blauwe cel' onder door, lager dan de foto. Zie:
          http://nielssanders.nl/emailsignature/sig3.jpg

          Ik vermoed dat er toch iets speelt als een padding of margin. Maar ik kan de fout niet ontdekken... |:( Wie helpt?

          De code:
          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>EmailSignature</title>
          <style>
          table {
          table-layout: fixed;
          border-collapse: collapse;
          height: 80px;
          padding: 0;
          margin: 0;
          }

          td, img {
          padding: 0;
          margin: 0;
          }

          #Avatar {
          width: 80px;
          height: 80px;
          }

          #Whitespace {
          width: 2px;
          }

          #BlueBar {
          width: 6px;
          background-color: #0CF;
          margin: 20px;
          }

          </style>
          </head>

          <body>
          <table width="200" border="0" cellpadding="0" cellspacing="0">
          <tr>
          <td rowspan="3" id="Avatar"><img src="enhanced-buzz-16839-1297795475-9.jpg" height="80px" width="80px"></td>
          <td rowspan="3" id="Whitespace"> </td>
          <td rowspan="3" id="BlueBar"> </td>
          <td rowspan="3" id="Whitespace"> </td>
          <td>Tekst</td>
          </tr>
          <tr>
          <td>Tekst</td>
          </tr>
          <tr>
          <td>Tekst</td>
          </tr>
          </table>
          </body>
          </html>

          Plaatjes mee-schalend maken bij kantelen smartphone

          30-07-2015 discussie 3
          Ik heb een website gemaakt voor smartphones die een aantal plaatjes bevat. Hoe maak ik dat wanneer de smartphone wordt gedraaid, de plaatjes meeschalen naar het bredere scherm?

          [css] Header bug

          10-07-2015 discussie 13
          Goedenavond,

          Ik ben voor mezelf een CMS aan het maken. Echter loop ik tegen een probleem aan waar ik zelf even geen oplossing meer voor zie.
          Als ik het logo zoals te zien is op het eerste screenshot: "float: left;" meegeef, krijg ik het resultaat zoals op screenshot 2 te zien is. Oftewel de blauwe achtergrond is weg.
          Hopelijk kan iemand mij helpen, ik zie namelijk zelf niet meer hoe ik dit kan oplossen.

          Dimitri


          Screenshot 1: www.dimitrigeers.nl/bug-1.png
          Screenshot 2: www.dimitrigeers.nl/bug-2.png
          code:
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          30
          
          <html>
          
          <head>
          <title>Dimiti Geers CMS</title>
          <link href="style.css" rel="Stylesheet" type="text/css" />
          </head>
          
          <body>
          
              <div id="header">
              
                  <div id="content">
              
                      <div id="logo"><img src="images/logo-wit.png" style="width: 100%; height: auto;"></div>
                      
                      <div id="header-gegevens">
                      
                          <b>Dimitri Geers</b><br/>
                          Administrator<br/><br/>
                          Instellingen | Uitloggen
                      
                      </div>
                      
                  </div>
              
              </div>
          
          </body>
          
          </html>


          code:
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          30
          31
          32
          33
          34
          35
          36
          37
          38
          39
          40
          41
          42
          43
          44
          45
          46
          47
          48
          49
          
          @font-face {
            font-family: 'MavenPro';
            src: url('fonts/MavenProLight-200.otf') format('truetype');
            font-weight: normal;
            font-style: normal;
          }
          
          html, body {
          
              padding: 0px;
              margin: 0px;
          
          }
          
          #header {
          
              background-color: #3499D5;
              width: 100%;
              height: auto;
              margin: 0px;
          
          }
          
          #header #content {
          
              width: 80%;
              height: auto;
              clear: both;
              margin: 0px auto;
          
          }
          
          #header #content #logo {
          
              width: 30%;
              height: auto;
              margin-left: 10%;
              padding-top: 2.5%;
              padding-bottom: 2.5%;
          
          }
          
          #header #content #header-gegevens {
          
              width: 40%;
              height: auto;
              float: right;
          
          }

          [css] link element wil maar niet centreren.

          03-07-2015 discussie 13
          Ik ben bezig met heel basic wat webdesign skills af te borstelen, maar ik kom nu toch iets vreemds tegen.
          Ik wil een link element die in een div staat centreren, maar wat ik ook probeer die gruwel blijft maar links uitlijnen.
          HTML: index.html
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          
          <!DOCTYPE HTML>
          <html>
          <head>
               <title>404 |  | Portfolio</title>
               <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
               <meta name="description" content="Sorry, something went wrong. Page could not be found.">
               <link rel="shortcut icon" href="favicon.png">
               <link href="style/404.css" rel="stylesheet" type="text/css">
          </head>
          <body>
               <div class="message">
                         <h1>Oh no!</h1>
                         <p>Apparently, something went wrong. Try again at my home page:</p>   
                         <p><a href="">link naar website</a></p>
               </div>
          </body>
          </html>


          Cascading Stylesheet: style.css
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          
          body{
               color:              #000000; 
               background:         #f7f8f8;
               font-family:   'Arial';
               
          }
          
          .message{
               width:              500px;
               margin-left:   auto;
               margin-right:  auto;
               margin-top:    100px;
          }
          
          h1{
               text-align:    center;
               font-weight:   700; 
               color:              #d82c2e;
          }
          
          a{
               text-align:    center;
               color:              #c12728;
          }
          
          @media only screen and (max-width:768px){.message{width:90%}}

          Iemand enig idee hoe ik die link netjes in het midden krijg? Zodra ik er een h1 tag voorzet springt ie direct naar het midden, maarja dat is niet de bedoeling.

          Wat zie ik over het hoofd?

          Responsive design: waar moet ik rekening mee houden?

          02-07-2015 discussie 28
          Hi allen!

          Ik ben nu al een tijdje voor mezelf een beetje aan het prutsen met design/coding (wordpress).
          Nu wil ik mijn eerste sprong wagen richting responsive design, maar heb even geen idee wat de beste start is. Zijn er dingen waar ik rekening mee moet houden?

          Ik heb al wat rondgekeken en ik kwam een aantal boeiende links tegen.
          Deze twee sprongen er voor mij een beetje uit, alleen vraag ik me af of het niet simpeler kan.

          Links:
          https://css-tricks.com/sn...ies-for-standard-devices/
          http://responsivedesign.i...common-device-breakpoints

          Met simpeler doel ik op CSS.
          Zoals in beide links het geval is, houden ze rekenschap met tablets, ipads en verschillende telefoonmodellen: HTC, iPhone, Samsung etc.

          Kan dit globaler/gemakkelijker?

          Mijn responsive CSS is op dit moment als volgt, en heb eigenlijk geen idee of ik goed op weg ben betreft de media queries;
          code:
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          30
          31
          32
          33
          34
          35
          36
          37
          38
          39
          40
          41
          42
          43
          44
          45
          46
          47
          48
          49
          50
          51
          52
          53
          54
          55
          56
          57
          58
          59
          60
          61
          62
          63
          64
          65
          66
          67
          68
          69
          70
          71
          72
          73
          74
          75
          76
          77
          78
          79
          
          /*-----------------------------------------------------
                          1024 SCREENS
          -----------------------------------------------------*/
          
          @media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {
          
          #header {
          height: 550px;
          width: 1000px;
          }
          
          #navigation {
          line-height:20px;
          }
          
          #navigation i {
          display:none;
          }
          
          .sideimgs {
          display:none;
          }
          
          #wrapper {
          margin:0 auto;
          width: 100%;
          margin-top:0px;
          }
          
          #container{
          width:100%;
          z-index:1;
          background-repeat:repeat-y;
          margin:0 auto;
          }
          
          
          #sidebar {
          width:100%;
          margin-left:2px;
          margin-top:-5px;
          }
          
          #content {
          width:100%;
          }
          
          .lijntje {
          background-repeat:repeat;
          background-image:url(../images/lijntje.png);
          height:5px;
          margin-top:5px;
          margin-bottom:5px;
          }
          
          .ftrdimg img {
          width:100%;
          height:auto;    
          }
          
          .ftrdimg img:hover {
          width:100%;
          height:auto;    
          }
          
          #yourfeet { 
          margin-top:-50px;
          }
          
          }
          
          /*-----------------------------------------------------
                          450 SCREENS
          -----------------------------------------------------*/
          
          @media only screen and (max-width: 450px), only screen and (max-device-width: 450px) {
          
          
          }

          Zoals je ziet is het niet af omdat ik twijfel over de max-width.

          Note: Ben een beginner betreft coding, heb er geen studie o.i.d in gevolgd dus het kan zijn dat ik een aantal dingen niet goed begrijp, maar hoop wel dat mijn vraag duidelijk genoeg is.
          Alvast bedankt!

          CSS3 transition van display:none naar display:block

          27-06-2015 discussie 8
          Ik heb voor de homepage van m'n website een soort teaser tegels gemaakt, en om het wat minder statisch te maken verschijnt er ook een plaatje zodra je over de tegel gaat met de muis. Met wat zoeken en voorbeelden aanpassen heb ik dit redelijk voor elkaar gekregen, maar de laatste hindernis krijg ik er niet uit. Het plaatje verschijnt namelijk onmiddelijk zodra je hovered, maar de animatie is dan nog lang niet klaar, waardoor je dit ziet gebeuren:
          http://static.tweakers.net/ext/f/OU2kvihmPfgdtEfjIJ13FMr0/full.png

          Wat ik dus eigenlijk graag wil is dat het plaatje pas verschijnt als de animatie is afgelopen, of dat het plaatje met eenzelfde animatie uitrolt naar volledige hoogte. Is dit op te lossen, bij voorkeur zonder JavaScript?

          Test pagina
          CSS
          relevante stuk CSS;
          Cascading Stylesheet:
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          30
          31
          32
          33
          34
          35
          36
          37
          38
          39
          40
          
          #teasers h2 {
              color: black;
              text-align: center;
              }
          .teaser_tile {
              background-color: #EBECED;
              padding: 0.3em;
              margin-bottom: 1em;
              height: 4em;
              transition: height 0.5s; /* Animation time */
              }
          .teaser_tile img {
              display: none;
              transition: height 0.5s;
              transition-delay: 0.1s;
              }
          
          .teaser_title {
              font-weight: bold;
              color: #0C72DC;
              }
          .teaser_text {
              font-size: 0.9em;
              }
          #teasers a {
              font-weight: normal;
              color: black;
              }
          .teaser_tile a:hover {
              font-weight: normal;
              color: black;
              }
          .teaser_tile:hover > img{
              margin-top: 1em;
              display: block;
              max-width: 90%;
              }
          .teaser_tile:hover {
              height: 23em;
              }

          Op regel 14 en 15 heb ik al iets geprobeerd, maar dat werkt dus niet, ook niet als ik het in een wrapper div zet.

          En ik test de website vooral in Chrome, dus als het nu helemaal niet werkt, probeer het aub even in Chrome :)

          Flexboxception: flexbox in flexbox met foto schaalt verkeerd

          10-06-2015 discussie 4
          Dag :w

          Ik ben een beetje aan het experimenteren met flexboxes en ik krijg het volgende niet werkend:
          Ik wil een fotogallery hebben die de foto's over rijen verdeelt. Dat is niet moeilijk. Ook wil ik elke foto (is een div met foto, titel en beschrijving) een vaste hoogte hebben, met de beschrijving en de titel erbij. Dus, als de beschrijving langer is, moet de foto minder hoog worden (de wrapperdiv moet een vaste hoogte hebben).
          Lang verhaal kort: http://jsfiddle.net/tc4371ey/2/
          Zoals je ziet is elke .image over de volledige breedte, terwijl de foto dat niet is (in Firefox). In Chrome wil de foto helemaal niet goed schalen.
          Ik wil dus dat de foto de hoogte aanneemt die over is in de flexbox (nadat de titel en beschrijving eraf zijn gegaan) en de breedte aan de hand van die hoogte schaalt, de hele .image div die breedte aanneemt en dat ze dan in rijen gaan. Ik krijg het alleen niet voorelkaar. Iemand enig idee?

          [CSS] :hover background wordt groter?

          04-06-2015 discussie 2
          Hallo allemaal,

          Ik ben bezig met een websitetje, nu heb ik een zoek knop gemaakt. Hierbij maak ik gebruik van een plaatje als icoon voor loep. de button waar opgeklikt wordt is 35px x 35px en deze heeft een zwarte achtergrond met dus die background-image van de loop die normaal 50px x 50px is, met background-size heb ik deze teruggebracht naar 35px x 35px, maar nu heb ik een :hover ingesteld voor die button dat de background wit wordt. dit gebeurd ook alleen als ik dan daadwerkelijk hover over de button en dan weer weg ga lijkt het net alsof het orginele formaat van de background-image terug komt en dan gelijk weer terug springt naar de aangegeven 35px x 35px.

          Zie hieronder:
          http://i.gyazo.com/590ece901e8880c41fcbeddd69522f7b.gif

          Heeft iemand hier een verklaring voor?
          De code voor de knop is alsvolgt:
          code:
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
          
          .searchbox-submit{
              width:35px;
              height:35px;
              display:block;
              position:absolute;
              top:0;
              font-family:verdana;
              font-size:18px;
              right:0;
              padding:0;
              margin:0;
              border:0;
              outline:0;
              line-height:35px;
              text-align:center;
              cursor:pointer;
              color:#dcddd8;
              background:rgba(0,0,0, 0.5);
              background-image: url(../img/search-icon.png);
              background-size: 35px;
              background-repeat: no-repeat;
              -webkit-transition: all 0.3s;
              -moz-transition: all 0.3s;
              transition: all 0.3s;
          }
          .searchbox-submit:hover {
              background: rgba(255,255,255, 0.5)
          }

          [CSS] Drie div-elementen naast elkaar plaatsen

          28-05-2015 discussie 2
          Beste medetweakers,

          Ik zie even door de bomen het bos niet meer. Ik loop er al eventjes mee te kloten nu. Tijd om maar eens wat hulp te vragen.

          Ik probeer 3 divs naast elkaar te krijgen. Dit gaat goed in Firefox, maar Chrome is er blijkbaar niet mee eens. Mijn css code klopt dus ergens niet.

          Dit is wat ik momenteel heb. Het is de bedoeling dat de volgorde altijd primary, secondary en dan tertiary is ongeacht wat er in de betreffende divs staat. Het gaat om widgetareas in Wordpress in dit geval.

          Cascading Stylesheet:
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          
          #content-columns {
                  padding-left: 640px;
                  padding-right: 640px;
          }
          
          #content-columns div#primary {
                  float: left;
                  width: 640px;
                  margin-left: -640px;
                  background-color: red;
          }
          
          #content-columns div#secondary {
                  float: left;
                  width: 320px;
                  background-color: green;
          }
          
          #content-columns div#tertiary {
                  float: right;
                  width: 320px;
                  margin-right: -320px;
                  background-color: blue;
          }

          Html, even versimpeld ivm wordpress code, ziet er zo uit:
          HTML:
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          
          <div id="content-columns">
                  <div id="primary">
                          [...]
                  </div>
                  <div id="secondary">
                          [...]
                  </div>
                  <div id="tertiary">
                          [...]
                  </div>
          </div>

          Hier wat screenshots:

          Zoals het in Firefox eruitziet.
          http://tweakers.net/ext/f/HrNokb79nNDn4kapSjJQbyAM/full.png

          Zoals het in Chrome eruitziet.
          http://tweakers.net/ext/f/DVD3jgfPPE9R5le9TBp6FPH7/full.png

          Wie kan mij vertellen wat ik verkeerd doe en hoe kan ik dit verhelpen??

          Laat maar.

          Ik zat te kloten met een ingewikkelde constructie. De oplossing was heel simpel komt ik net achter. Heb nu alles gewoon float: left gedaan zonder moeilijke negatieve paddings enzo. Dat lijkt goed te gaan nu.
          Heb

          Advies over implementatie van het genereren van een PDF.

          19-03-2015 discussie 8
          Voor een WordPress plugin van mij genereer ik PDF facturen op basis van bestellingsgegevens en mijn plugin opties. De bestellingsgegevens (WooCommerce) worden op basis van een order id uit de database gehaald. De opties van mijn plugin worden ook uit de database gehaald, maar worden niet bij iedere bestelling opgeslagen. Denk hierbij aan een logo van het bedrijf, enige bedrijfsgegevens en nog veel meer.

          Als de klant momenteel een PDF in wilt zien, worden alle eerder genoemde gegevens opgehaald en wordt de PDF gegeneert. Echter als de plugin opties - zoals het logo - tussentijds is aangepast, wordt het nieuwe logo op de oude PDF getoond. Dit lijkt mij niet helemaal de bedoeling. Een factuur behoort never nooit te veranderen lijkt mij. Wat denken jullie?

          Ik kan dit op twee manieren oplossen.

          1: Alle facturen in een folder binnen mijn plugin opslaan. Uiteraard beveiligd met behulp van htaccess.

          Voordeel:
          - Genereren enkel nodig bij wijziging in de factuur. Goede performance. Snelle laadtijden voor tonen PDF.
          Nadeel:
          - 10 facturen per dag betekent al zo'n 180MB per jaar. 100 - 1,8GB. Kortom plus minus 50Kb per factuur.

          2: Alle opties a.d.h.v. order ID in database opslaan en tijdens genereren ophalen.
          Nadeel:
          - Lange laadtijden voor tonen PDF.
          - Veel extra programmeerwerk.

          Alvast bedankt voor je advies. :)

          Grid met 35k cellen en performance issues

          15-03-2015 discussie 19
          Bij het verdelen van medewerker uren over activiteiten/projecten is het krijgen van overzicht best lastig. Ik gebruik daar enige tijd een Excel document voor, op zich werkt dit prima, echter loop ik ook geregeld tegen bepaalde problemen aan. De ins en outs zal ik nu even laten voor wat het is, want dat is voor deze post niet zo belangrijk. Om deze problemen het hoofd te bieden ben ik dit weekend aan de slag gegaan om een variant te maken in een .NET webapplicatie. Niet alleen leerzaam, ook nog eens praktisch :-)

          De gekozen oplossingsrichting is een tabel met verticaal de activiteiten en horizontaal de medewerkers. Door gemiddeld een 150-200 medewerkers en 150-200 activiteiten komt de tabel grofweg op 35000 cellen. Het op het scherm slingeren van deze cellen is dan ook het hoofdprobleem:
          1. De pagina wordt al snel 500kbyte groot
          2. Het initieel renderen van 35k cellen
          3. Het scrollen gaat met hoten en stoten
          Zoals gezegd dit weekend heb ik besteed aan een eerste versie. Deze is nog niet interactief en voorzien van uitgebreide opmaak. Linkje: http://leosiepel.nl/t/test.html


          Naast algemene tips voor cosmetische en technische verbeteringen heb ik concreet twee vragen:
          • Voor het scrollen maak ik nu gebruik van een tabel die achter een div valt en met jQuery en scrollLeft / scrollTop heen en weer geschoven wordt, dit hakt, is er een beter mechanisme?
          • Met enkele optimalisaties is het me gelukt om het HTML-bestand van 4MB naar 450KB te verkleinen, zien jullie nog verbeteringsmogelijkheden?

          Fixed background Chrome bug

          24-02-2015 discussie 4
          Ik heb een website met Wordpress gemaakt op basis van het thema Bridge.
          Nu wil ik een fixed background toevoegen aan een pagina en dit werkt perfect op FF, IE en Safari.
          Alleen in Chrome (versie 40.0.2214.115) wilt het niet werken. Heb al wat rondgezocht en de meest voorkomende oplossingen:
          • -webkit-backface-visibility: hidden;
          • -webkit-transform: translateZ(0);
          werken niet bij mij.

          http://www.beeverlyfields.com/gallery

          Iemand enig idee wat ik hier fout doe?

          [CSS/JS] Na transition nieuwe positie behouden

          13-01-2015 discussie 9
          In plaats van animate in jQuery, kun je beter gebruik maken van transition in CSS. In Bootstrap vind je in de carousel wel een mooi voorbeeld, daar heb ik al wat 'inspiratie' van gekregen om een prototype te maken.

          http://getbootstrap.com/javascript/#carousel
          https://github.com/twbs/b...master/less/carousel.less
          https://github.com/twbs/bootstrap/blob/master/js/carousel.js

          De slider ziet er zo uit:

          [left][...active...][right]

          Van de linker en rechter slide zie je slechts een klein stukje en komen, door er op te klikken, in beeld. Het sliden heb ik nu voor elkaar en middels het transitionend event kan ik bepalen wanneer de transition klaar is. Echter moeten de slides op hun plek blijven staan na de transition, net zoals in het Bootstrap voorbeeld.

          JSFiddle: http://jsfiddle.net/53pfw2k1/ (klik op de groene slide)

          Wat mis ik hier; hoe kan ik zorgen dat hij van transform: translate3d(-100%, 0, 0); niet weer terug gaat als de class .to-left weggehaald word. De Bootstrap carousel doet het ook niet, maar ik kan maar niet vinden waarom.

          [CSS] Footer veroorzaakt dubbele scrollbar

          12-12-2014 discussie 4
          Ik ben bezig mijn eigen site een kleine make-over te geven. Ik focus nu voornamelijk op de desktop presentatie. Mobiel krijgt straks meer aandacht.

          Op de desktop heb ik een vreemd fenomeen. Zodra ik mijn footer meegeef top:300px; ontstaat er een tweede scrollbar, wat navigeren een ramp maakt.

          Zie: *snip* spam; maak een testcase a.u.b.

          Mijn footer sluit aan op een container die relatief geplaatst is, tevens met een top:300px;

          CSS footer div:
          code:
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          
          footer {
            position: relative;
            clear:both;
            background: #f5f5f5 url(images/footer.png) no-repeat top center;
            top: 300px;
            margin:0 auto;
            padding: 0 20px 0 20px;
            width:90%;
            max-width:1200px;
            height: 400px;
            border-bottom: 5px solid #6d0b9f;
            border-top: 5px solid #6d0b9f;
          }

          De footer sluit aan op een section met het id main. Hiervan is de volgende css gespecificieerd:
          code:
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          
          #main {
            overflow: hidden;
            padding:1px 0 10px 1px;
            margin:0 auto;
            width:90%;
            max-width:1200px;
            background: #fff;
            margin-top:0.2em;
            padding-left:10px;
            padding-right:10px;
            border:1px solid #cecece;
            z-index:200;
            top: 300px;
            position:relative;
          }

          Resultaat is dubbele scrollbars en ik krijg het niet voor elkaar om gewoon een mooie footer onderaan te plaatsen. Ik zie iets simpels over het hoofd, maar wat?

          [CSS] With selector??

          04-09-2014 discussie 12
          Hoi allen,

          Zie de volgende html:
          HTML:
          1
          2
          3
          4
          5
          6
          7
          
          <div class="menu_style">
          <span>......</span>
          </div>
          
          <div class="menu_style">
          <footer><span>.......</span></footer>
          </div>

          Op menu_style zit een padding van 20 rondom. Deze wil ik niet op de menu_style waar footer in zit.
          Bestaat er iets van een 'with' selector? Zodat ik bijvoorbeeld .menu_style <with(.footer)> : padding 0; kan doen?

          Ik heb helaas geen invloed op de gegenereerde HTML.

          [CSS] Font size verschillend in browsers

          19-06-2014 discussie 6
          Hoi allen,

          ik heb een textarea met daarvoor een font-size ingesteld van 12px en font-family consolas (monospaced font)
          Echter, in Chrome klopt de fontgrootte niet. Volgens Chrome is de font-size 13px.

          Internet Explorer 11
          http://tweakers.net/ext/f/Ct3UuQ8cBe1Ih5yVaumfNxGi/full.png

          Chrome
          http://tweakers.net/ext/f/hHHAjijLjlkubdJu2ldoCWRD/full.png

          Je ziet dat ze de waarde beiden uit skin.css halen (regel 13 om precies te zijn). Maar bij Chrome staat de property toch op 13px en wordt ook als dusdanig weergegeven.

          Wie o wie? Wat zou dit kunnen zijn?

          Permalink & folders vs database

          05-05-2014 discussie 9
          Ik ben nu een aantal dagen bezig met een nieuwe website waar ik wat projecten op wil laten zien. De eisen die ik persoonlijk heb opgesteld zijn:
          - Simpel en duidelijk
          - Responsive
          - Makkelijk om nieuwe content toe te voegen

          Dit valt natuurlijk vrij simpel te regelen door bijvoorbeeld Wordpress te gebruiken maar ik vind het leuker om zoveel mogelijk zelf te maken. Uiteindelijk heb ik nu wel wat werkend met een combinatie van HTML, PHP, Javascript en CSS. Dat is ook live te zien op *snip*

          Ik werk op dit moment simpelweg met een mapje portfolio waar zich weer andere categorie mapjes in bevinden. In de categorie mapjes zelf zit dan weer een plaatje en een text file voor elk project met exact dezelfde naam op de extensie na.

          http://i.imgur.com/ml4Njve.png

          Met behulp van PHP trek ik daar dus alle gegevens uit en maak ik er een responsive grid van. Als je de eerste keer op een item klikt krijg je een korte beschrijving en als je er voor de tweede keer op klikt ga je naar de uitgebreide details pagina.

          De link is dan de naam van de categorie folder en de bestandsnaam zonder extensie. Voorbeeld: http://*snip*/details.php?category=Android&name=Kenteken-Informatie
          Daar wil ik eigenlijk een mooiere link van maken. Dit kan dus met behulp van permalink als het goed is. Ik kwam ook deze site http://www.generateit.net/mod-rewrite/index.php tegen waarbij je de mod rewrite makkelijk kan genereren.

          Dan kom je dus uit op http://*snip*/Android/Kenteken-Informatie.html met de volgende rewrite
          [code]RewriteEngine On
          RewriteRule ^([^/]*)/([^/]*)\.html$ /details.php?category=$1&name=$2 [L][/code]
          Ik weet alleen niet waar ik dit precies moet plaatsen en of ik nog rekening moet houden met iets anders. De site is gehost op een Debian VPS waar ik root access heb.

          De eerste vraag is dus vooral hoe het zit met permalinks.

          Permalinks werken nu.

          De tweede vraag is hoe het zit met het performance verschil tussen folders en een database. Persoonlijk vind ik folders wel iets overzichtelijker en daar kan ik makkelijker via FTP wat nieuwe projecten aan toevoegen.
          EDIT: Met behulp van een database & CRUD is het eigenlijk nog overzichtelijker en makkelijker (@Barryvdh reactie)

          Maar de indexing van een database is handiger voor het navigeren naar het volgende en vorige project bij de details pagina. Ik ben er overigens nog niet over uit of het logisch is om dan alleen projecten te laten zien uit dezelfde categorie, of gewoon alle projecten door te lopen..
          http://i.imgur.com/hGFM3AK.png

          Een derde vraag is misschien ook wel op z'n plaats: search engine optimalisation. Wat is handig om op te nemen en wat niet?

          Gebruik van SASS of LESS

          01-02-2014 discussie 77
          Goededag,

          Ik ben al een tijdje bezig met webdesign met als later doen eventueel wat te front-enden.

          Maar ben echter al ong 1 jaar actief bezig en wil verder dan de gewone css.
          Vandaar dat ik twijfel om mij SASS of LESS aan te leren. Echter twijfel ik een beetje tussen de 2. Ze lijken me beide namelijk aantrekkelijk om te leren.

          Maar nu is mijn vraag hebben jullie recent goede ervaring met SASS of LESS. Iemand die mij kan helpen bij mijn keuze? En zijn er namelijk ook mensen die 1 van beiden op het werk gebruiken?

          [Firefox] Border-box werkt niet op input

          06-01-2014 discussie 15
          Beste mensen,

          Bij het maken van een form waarmee mensen dingen kunnen inzenden, loop ik helaas tegen het volgende aan:

          Op een text-input heb ik de volgende CSS toegepast:
          Cascading Stylesheet:
          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          #submit form input[type=text], #submit form input[type=email], #submit form textarea {
                  padding10px 10px;
                  margin8px 0;
                  width100%;
                  font-family: roboto, sans-serif;
                  font-size.8em;
                  border-radius: 7px;
                  bordersolid 3px #83af9b;
                  box-sizing: border-box;
                  transition: border-color .3s;
                  displayblock;
                  }

          In Chrome (en ook in IE 10) ziet dit eruit zoals ik wil dat het eruit ziet, wat inhoudt dat de tekstboxen niet breder zijn dan de div eromheen en de tekst door de padding altijd 10px van de linker en rechter rand verwijderd is.
          Nou is het in Firefox echter zo dat de padding ervoor zorgt dat de tekstboxen 20px te breed worden, wat niet zo hoort te zijn vanwege 'box-sizing: border-box'.

          Ik heb al veel rondgezocht op internet, maar heb nog steeds geen oplossing hiervoor gevonden. Ik heb al geprobeerd 'width: 100%' aan te passen naar 'max-width: 550px', maar dan neemt hij geen breedte aan (de tekstbox is niet 550px breed).

          Screenshot van hoe het eruit ziet (thumbnails zijn klikbaar):
          http://i.imgur.com/bCf5Rzgs.png
          Chrome

          http://i.imgur.com/06jmEIbs.png
          Firefox

          Weet iemand hoe ik dit op kan lossen? :)

          Alvast bedankt!

          [Performance] Zelfde images, andere sizes

          11-12-2013 discussie 8
          Hai all,

          Ik zit een beetje in dubio.

          Ik wil performance gaan verbeteren van een pagina met veel dezelfde afbeeldingen, maar dan anders geschaald. Momenteel worden requests gemaakt naar verschillende versies van de afbeeldingen. Dat kost dus veel kb-tjes extra over de lijn.

          Nu kan je bijvoorbeeld de grootste image pakken en die meerdere malen laten aanroepen en schalen via html/css. Maar nu kost dat weer veel processorkracht te schalen. Wellicht de afbeeldingen naar de gpu (translateZ(0)) sturen nog, maar dat wil je juist ook weer niet op mobiele apparaten :). Dus wat is nou wijsheid?

          De aanpassing zal niet gemakkelijk zijn te doen, dus 'even benchmarken' zit er niet in. Ik vind het ook heel lastig om er wat zinnigs over te vinden op StackOverflow / Google devtools docs etc.

          Mijn simpele vraag is dus: Is het verstandig om de grootste afbeelding in te laden die je al gebruikt, en die kleiner schalen middels css/html op de overige plaatsen op dezelfde pagina?

          Bootstrap 3 verschillende kleur thema's

          16-11-2013 discussie 8
          Ik heb een website die bestaat uit verschillende secties. Als voorbeeld: een sectie tennis en een sectie voetbal. Nu wil ik wanneer mensen op /tennis komen de kleuren van bootstrap veranderen naar bijvoorbeeld oranje zoals het gravel en de sectie voetbal groen zoals het gras.

          In variables.less staat de variabel @brand-primary: #428bca; dit is eigenlijk de enige kleur die moet veranderen. Echter worden nagenoeg alle kleuren opgebouwd uit deze kleur. Dus om het werkend te krijgen zou ik 2 volledige bootstraps moeten compilen naar css en de juiste css laden bij /tennis of /voetbal.

          Vanuit mijn oogpunt is dat omslachtig aangezien het maar 1 kleurcode is. Mensen moeten dan 2x de bootstrap css laden voor enkel 1 variabelen kleur die anders is. Mijn vraag is dan ook, zie ik iets over het hoofd? Is er een betere oplossing?
          Resultaten per pagina: 25 | 50 | 100
          1 2 3 ... 20


          Samsung Galaxy S7 edge Athom Homey Apple iPhone SE Raspberry Pi 3 Apple iPad Pro Wi-Fi (2016) HTC 10 Hitman (2016) LG G5

          © 1998 - 2016 de Persgroep Online Services B.V. Tweakers vormt samen met o.a. Autotrack en Carsom.nl de Persgroep Online Services B.V. Hosting door True