Prijs tabel responsive maken

[Verwijderd]

OPGELOST - SOLVED

Hallo allemaal,

Ik heb een website die zich aanpast aan het scherm van de gebruiker.
Nu moet hier een prijs tabel in. Alleen is deze dan niet responsive.
Hoe kan ik die respnsive maken? Ik heb al weat gezocht maar ik kom er niet in uit.

Hier heb ik mijn css code.

code:

#fdw-pricing-table {
        margin:0 auto;
        text-align: center;
        width: 928px; /* total computed width */
        zoom: 1;
    }

    #fdw-pricing-table:before, #fdw-pricing-table:after {
      content: "";
      display: table
    }

    #fdw-pricing-table:after {
      clear: both
    }

    /* --------------- */   

    #fdw-pricing-table .plan {
        font: 13px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;     
        background: #fff;      
        border: 1px solid #ddd;
        color: #333;
        padding: 20px;
        width: 180px;
        float: left;
        _display: inline; /* IE6 double margin fix */
        position: relative;
        margin: 0 5px;
        -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
        box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);      
    }

    #fdw-pricing-table .plan:after {
      z-index: -1; 
      position: absolute; 
      content: "";
      bottom: 10px;
      right: 4px;
      width: 80%; 
      top: 80%; 
      -webkit-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);   
      -moz-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
      box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
      -webkit-transform: rotate(3deg);    
      -moz-transform: rotate(3deg);   
      -o-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
      transform: rotate(3deg);  
    }   
    
    #fdw-pricing-table .popular-plan {
        top: -20px;
        padding: 40px 20px;   
    }
    
    /* --------------- */   

    #fdw-pricing-table .header {
        position: relative;
        font-size: 20px;
        font-weight: normal;
        text-transform: uppercase;
        padding: 40px;
        margin: -20px -20px 20px -20px;
        border-bottom: 8px solid;
        background-color: #eee;
        background-image: -moz-linear-gradient(#fff,#eee);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));    
        background-image: -webkit-linear-gradient(#fff, #eee);
        background-image: -o-linear-gradient(#fff, #eee);
        background-image: -ms-linear-gradient(#fff, #eee);
        background-image: linear-gradient(#fff, #eee);
    }

    #fdw-pricing-table .header:after {
        position: absolute;
        bottom: -8px; left: 0;
        height: 3px; width: 100%;
        content: '';
        background-image: url(images/bar.png);
    }
    
    #fdw-pricing-table .popular-plan .header {
        margin-top: -40px;
        padding-top: 60px;      
    }

    #fdw-pricing-table .plan1 .header{
        border-bottom-color: #FF7F27;
    }

    #fdw-pricing-table .plan2 .header{
        border-bottom-color: #FF7F27;
    }

    #fdw-pricing-table .plan3 .header{
        border-bottom-color: #FF7F27;
    }

    #fdw-pricing-table .plan4 .header{
        border-bottom-color: #FF7F27;
    }           
    
    /* --------------- */

    #fdw-pricing-table .price{
        font-size: 45px;
    }

    #fdw-pricing-table .monthly{
        font-size: 13px;
        margin-bottom: 20px;
        text-transform: uppercase;
        color: #999;
    }

    /* --------------- */

    #fdw-pricing-table ul {
        margin: 20px 0;
        padding: 0;
        list-style: none;
    }

    #fdw-pricing-table li {
        padding: 10px 0;
    }
    
    /* --------------- */
        
    #fdw-pricing-table .signup {
        position: relative;
        padding: 10px 20px;
        color: #fff;
        font: bold 14px Verdana, Arial, Helvetica;
        text-transform: uppercase;
        text-decoration: none;
        display: inline-block;       
        background-color: #72ce3f;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;     
        text-shadow: 0 -1px 0 rgba(0,0,0,.15);
        opacity: .9;       
    }

    #fdw-pricing-table .signup:hover {
        opacity: 1;       
    }

    #fdw-pricing-table .signup:active {
        -moz-box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;
        -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;
        box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;       
    }           

    #fdw-pricing-table .plan1 .signup{
        background: #FF7F27;
    }

    #fdw-pricing-table .plan2 .signup{
        background: #FF7F27;
    }

    #fdw-pricing-table .plan3 .signup{
        background: #FF7F27;
    }

    #fdw-pricing-table .plan4 .signup{
        background: #FF7F27;
    }

Het moet is zijn met @ media screen ofzo.

Ik hoop dat iemand me kan helpen.

[ Voor 0% gewijzigd door Verwijderd op 27-01-2014 06:49 . Reden: Opgelost ]

[Conteaster]

Wat heb je gezocht? Belangrijker nog, wat heb je gevonden? Waarom werkten dingen die je gevonden hebt niet?

Denk ook eens logisch na, hoe is de rest van je site responsive gemaakt?
Hoe is je tabel opgebouwd? Je laat alleen een hoop css zien.

[NMe]

Als je al weet dat het met mediaqueries moet, wat is je probleem dan? Waarop loop je vast? Waarom? Wat werkt er niet aan wat je zelf probeert? Wij zijn geen afhaalbalie voor kant en klare antwoorden dus we gaan ook niet even snel je CSS omschrijven naar iets wat responsive is. Te meer omdat we dat niet eens kúnnen want dat hangt af van wat je precies wil dat de tabel doet als hij smaller wordt... Moet de tekst kleiner worden? Moeten er kolommen wegvallen? Moet er iets met de achtergrond gebeuren?

Oftewel: lees De Quickstart even door en pas je vraag aan met wat meer informatie want op deze manier gaan en kunnen we je niet helpen.

[Ramon]

Je kan twee dingen doen: 1) of je hele tabel relatief maken door percentages te gebruiken zodat de tabel zich aanpast aan zijn (responsive) container, of 2) je maakt een media query en geeft voor al je breakpoints de formaten op.

[Verwijderd]

Hier heb ik een voorbeeld van wat het moet gaan worden.
http://wbpreview.com/previews/WB0S2347C/
Dat het onder elkaar komt staan.
Moet ik dan werken met procenten?

[NMe]

Nee. Met mediaqueries. Zoals je zelf al in je eerste bericht zegt. Wat lukt daar nou niet aan?

[Verwijderd]

Ik heb nu dit maar het werkt niet.
Wat doe ik dan fout?

code:

@media only screen and (min-width:768px) and (max-width:959px) {

    .fdw-pricing-table .plan {
        width:148px;
    }

    .fdw-pricing-table .popular-plan {
        width:186px;
    }
}
    
@media only screen and (min-width:480px) and (max-width:767px) {

    .fdw-pricing-table .plan, .fdw-pricing-table .popular-plan  {
        width:209px;
    }
}

@media only screen and (max-width:479px) {

    .fdw-pricing-table .plan, .fdw-pricing-table .popular-plan  {
        width:299px;
    }
}

[NMe]

Definieer "werkt niet". Of ga je ook naar de dokter met de melding "ik ben ziek"?

Hint: # en . zijn niet hetzelfde.

[Verwijderd]

Daar had ik ook al naar gekeken

code:

@media only screen and (min-width:768px) and (max-width:959px) {

    #fdw-pricing-table .plan {
        width:148px;
    }

    #fdw-pricing-table .popular-plan {
        width:186px;
    }
}
    
@media only screen and (min-width:480px) and (max-width:767px) {

    #fdw-pricing-table .plan, #fdw-pricing-table .popular-plan  {
        width:209px;
    }
}

@media only screen and (max-width:479px) {

    #fdw-pricing-table .plan, #fdw-pricing-table .popular-plan  {
        width:299px;
    }
}

Maar die werkt ook niet.
Mag ik nog een hint?

[NMe]

Wat is "werkt niet"? Dit is nou al de derde keer dat ik om meer info moet vragen. Ik wil je best helpen maar dan moet ik eerst weten wat er gebeurt.

Als ik dan toch moet raden: staan je mediaqueries wel ónder je andere CSS? Anders overschrijft je algemene CSS je media-specifieke CSS weer.

[Verwijderd]

De tabellen blijven naast elkaar staan.
En dat is voor de pc wel goed maar voor mobiel niet.

[NMe]

Je doet dan ook niks in je CSS wat suggereert dat ze op een andere regel terecht zouden moeten komen? Je container is nog even breed want je past alleen de blokjes zelf aan. Dan kun je juist alleen maar meer blokjes op dezelfde regel kwijt.

[_Thanatos_]

Verwijderd schreef op woensdag 25 december 2013 @ 17:49:
De tabellen blijven naast elkaar staan.
En dat is voor de pc wel goed maar voor mobiel niet.

Een pc kan ook mobiel zijn

Maareh, responsive data tables dan maar?
Zie hier: http://css-tricks.com/responsive-data-table-roundup/

Kies er maar een uit

[Verwijderd]

Ik heb e container smaller gemaakt en dan komen ze wel onder elkaar.
Dus bedankt voor de tip.

Maar nu moet ik dat met media queries maar dat werkt nog steeds niet.

Daar heb ik nu dit:

code:

@media only screen and (min-width:768px) and (max-width:959px) {

    #fdw-pricing-table {
        width:148px;
    }

    #fdw-pricing-table {
        width:186px;
    }
}
    
@media only screen and (min-width:480px) and (max-width:767px) {

    #fdw-pricing-table  {
        width:209px;
    }
}

@media only screen and (max-width:479px) {

    #fdw-pricing-table  {
        width:299px;
    }
}

[NMe]

Doe je het er nou gewoon om om zo weinig mogelijk informatie te geven? Alweer die "werkt niet". Wat gebeurt er dan wel??

Je hoeft alleen maar je container per grootte een bepaalde breedte te geven en je blokjes in diezelfde mediaquery een andere grootte die daarin past. Veel ingewikkelder dan dat wordt het niet.

offtopic:
Regel 4 en regel 8 in je CSS passen hetzelfde element aan...

[Verwijderd]

Wat ik bedoel is als je net een mobiel apparaat kijkt staat alles nog onder naast in plaats van onder elkaar.

[NMe]

Wat is de breedte van je container? Wat is de breedte van je blokjes? Welke manier om spul naast elkaar te zetten gebruik je? Floats? Inline-blocks? Positionering? Hou je rekening met paddings en dergelijken die bij de breedte geteld worden? Gaat het fout op meerdere mobiele apparaten of slechts op eentje? Op welke heb je het getest?

[Barryvdh]

Maak eens een mooie testcase in jsfiddle ofzo.
Ook aan gedacht om de goede viewport meta tag mee te geven?

code:

<meta name="viewport" content="width=device-width, initial-scale=1">

[geert1]

Een prachtig voorbeeld van iets willen bereiken, zonder voldoende basiskennis. CSS is op zich een heel simpel taaltje, maar zonder een gedegen begrip van hoe de taal werkt, hoe browsers renderen en hoe CSS samenwerkt met HTML, ga je hier niet uitkomen ben ik bang. Je bent bezig met responsive design terwijl je (volgens mij) de opbouw van selectors nog niet kent. Dat is als het bouwen van een woonhuis terwijl je het concept "hamer en spijkers" nog maar kwalijk beheerst.

Doorloop eerst maar eens de gehele basistraining van Shaw Lowe, en daarna de geavanceerde training. Zolang je de basis niet kent, blijft het bij "willekeurig dingen proberen" en hopen dat het werkt. Of bestaande code van internet plukken en bij elkaar zetten. Dan kun je dus ook niet uitleggen wat er misgaat, zoals je nu wel ziet. Dat is niet wat front-end-development moet zijn. Je maakt het voor jezelf veel leuker als je het eerst wat beter snapt.

Dit bericht is niet bedoeld als belediging. Ik ben er van overtuigd dat je uiteindelijk enorm gebaat bent bij meer basiskennis.

[ Voor 4% gewijzigd door geert1 op 31-12-2013 12:07 ]

[rickboy333]

Ik ken deze persoon in RL, hij heeft het nog steeds niet opgelost en liet me deze post zien. Hij is niet zo gewend aan Tweakers omdat hij meer Yahoo V&A gewend is. Dat is minder zelf reseach enzo. Daarom zal ik het even voor hem verduidelijken.

Maar goed, wat is zijn probleem ?

Hij wil dat een prijs tabel zeg maar mee verkleint voor mobile websites. Nu op zijn eigen *linkje weg* site heeft hij een prijs tabel maar als je de website verkleind gaan de tabellen lang elkaar staan. Dus hij wil dat de als je de webbrowser verkleind dat de tabellen onder elkaar gaan staan zoals hij aangaf met met de site CSS tricks.

Wat er verder tussendoor gebeurt en afspeelt weet ik niet. Ik ben niet zo goed met CSS. Maar dit is wat hij me verteld heeft.

Hopelijk is het nu wel duidelijk.

[ Voor 3% gewijzigd door MueR op 15-01-2014 13:51 ]

[FotW]

Je moet natuurlijk wel je container: fdw-pricing-table een andere breedte geven want die staat nog op 960px.

Misschien moet je je kennis nog wat bijspijkeren voordat je websites verkoopt aan klanten? De webshop die je gebouwd hebt draait niet op https? En als je adverteert met snelle laadtijden zou ik me ook eens verdiepen in het optimaliseren van websites (18 javascripts op je eigen site?)

[_Thanatos_]

Lijkt erop dat je alleen met mediaqueries en breedtes aan het goochelen bent. Ikzelf had de boel al lang en breed (pun intended ) procentueel gemaakt. Dan heb je daar in elk geval geen last meer mee. Maar een tabel blijft natuurlijk een tabel, en op een heel smal scherm kun je die misschien beter op een andere manier weergeven (zie daarvoor mijn eerdere post).

[FotW]

Het is dus eigenlijk geen tabel, het zijn divjes, source staat hier: http://www.freshdesignweb...ful-css3-table-style.html

[Verwijderd]

Ja maar hoe maak ik die source responsive?

[NMe]

Verwijderd schreef op donderdag 16 januari 2014 @ 21:15:
Ja maar hoe maak ik die source responsive?

Om te beginnen door antwoord te geven op de vragen die je sinds je laatste post gesteld zijn...

[FotW]

Ik heb je 3 posts boven je laatste comment al gezegd wat je moet doen om je "tabel" "responsive" te maken, je biedt aan klanten responsive websites aan, maar hebt eigenlijk geen idee wat je aan het doen bent.

[Banix]

geert1 schreef op dinsdag 31 december 2013 @ 12:04:

Doorloop eerst maar eens de gehele basistraining van Shaw Lowe, en daarna de geavanceerde training.

Heeft hij er niets aan, dan ben ik iig zeer gelukkig. Zocht al een tijd een degelijke basiscursus :-)

[sig69]

Ik ga ook even een kijkje nemen. Ben van origine geen web developer maar moet er steeds meer mee gaan doen dus wellicht steek ik er wat van op