Auteur Topic: [CSS] Text en icon op zelfde hoogte  (gelezen 2393 keer)

0 leden en 1 gast bekijken dit topic.

xvilo

  • Global Moderator
  • Verslaafd DigitalPlace Lid
  • *****
  • Berichten: 2675
  • Karma: -44
    • Bekijk profiel
    • http://www.xvilo.com
[CSS] Text en icon op zelfde hoogte
« Gepost op: augustus 02, 2014, 12:38:04 pm »
  • [+1]1
  • [-1]0
  • Hallo [you],

    Ik probeer een soort van Call-To-Action ding op mijn site te krijgen alleen wil ik nu een telefoon icoon en wat text naast elkaar hebben, maar om de een of andere manier lukt het niet helemaal lekker....

    Dit is wat ik nu heb:

    HTML
    <div class="CallToAction">
                        <input type="text" name="fullname" class="name" value="First name..." required/>
                        <input type="text" name="company" class="company" value="Company..." required/>
                        <input type="text" name="mail" class="mail" value="Email..." required/>
                        <input class="submit" type="submit" value="More Information">
                        <center><span class="icon-mobile"></span><p>Interested? Call us at +31 (0) 85 888-1917</p></center>
                    </div>

    .CallToAction{
        width: 402px;
        height: 192px;
        margin: 0 auto;
        margin-top: 75px;
    }

    .CallToAction input{
        height: 50px;
        background:#FFFFFF;
        color:#000000;
        border:none;
        padding-left: 40px;
        font-size: 16px;
        margin: 0px;
    }

    .CallToAction .name{
        width: 100%;
        border-bottom: 1px solid #dbdbdd;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background: #FFFFFF url(../images/fullname.png) left no-repeat;
        background-position:13px;
    }

    .CallToAction .company{
        width: 201px;
        margin:0px;
        border-right:1px solid #dbdbdd;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        background: #FFFFFF url(../images/company.png) left no-repeat;
        background-position:13px;
    }

    .CallToAction .mail{
        width: 201px;
        margin: -4px;
        -webkit-border-bottom-right-radius: 5px;
        -moz-border-radius-bottomright: 5px;
        background: #FFFFFF url(../images/email.png) left no-repeat;
        background-position:13px;
    }

    .CallToAction .submit{
        width: 100%;
        padding: 0;
        text-align: center;
        text-transform: uppercase;
        margin-top: 10px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background: #36aadc;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM2YWFkYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNjlmZGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top, #36aadc 0%, #169fda 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36aadc), color-stop(100%,#169fda));
        background: -webkit-linear-gradient(top, #36aadc 0%,#169fda 100%);
        background: -o-linear-gradient(top, #36aadc 0%,#169fda 100%);
        background: -ms-linear-gradient(top, #36aadc 0%,#169fda 100%);
        background: linear-gradient(to bottom, #36aadc 0%,#169fda 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36aadc', endColorstr='#169fda',GradientType=0 );
        color: #FFFFFF;
        -webkit-box-shadow: 0px 0px 16px 0px rgba(50, 50, 50, 0.75);
        -moz-box-shadow:    0px 0px 16px 0px rgba(50, 50, 50, 0.75);
        box-shadow:         0px 0px 16px 0px rgba(50, 50, 50, 0.75);
    }

    .CallToAction p{
        text-align: center;
        color: #FFFFFF;
        display: inline-block;
    }

    .icon-mobile{
        background: url(../images/phone.png);
        width: 11px;
        height: 16px;
        display: inline-block;
        margin-top: 8px;
        margin-right 10px;
    }

    De text moet in het midden van het telefoon icoontje staan

    Wat doe ik verkeerd? Ik zie het niet meer :S


    Dit is wat ik nu heb (HTML/CSS):
    [attachment=1:v4c8n40j]Screen Shot 2014-08-01 at 11.10.46 PM.png[/attachment:v4c8n40j]

    Dit is wat het moet worden (Photoshop):
    [attachment=0:v4c8n40j]Screen Shot 2014-08-01 at 11.11.02 PM.png[/attachment:v4c8n40j]


    EDIT:

    Solved it:
    CSS
    .CallToAction p{
        text-align: center;
        color: #FFFFFF;
        display: inline-block;
        background: url(../images/phone.png) no-repeat;
        background-position: 0px 2px;
        padding-left: 20px;
        margin-top: 20px;
    }

    Als iemand een betere oplossing heeft, geef het door! Ook als je bumpt op een zeer oud topic  :bier:
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »


    Brownbear

    • DigitalPlace Lid
    • *
    • Berichten: 65
    • Karma: 3
      • Bekijk profiel
      • http://www.student.tue.nl/K/c.v.horssen/
    Re: [CSS] Text en icon op zelfde hoogte
    « Reactie #1 Gepost op: augustus 05, 2014, 07:02:58 pm »
  • [+1]0
  • [-1]0
  • werkt gewoon een &nbsp; niet?
    tussen <p> en de tekst
    dus:
     <center><span class="icon-mobile"></span><p>&nbsp;Interested? Call us at +31 (0) 85 888-1917</p></center>
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »

    Thumb

    • DigitalPlace Guru
    • ****
    • Berichten: 3245
    • Karma: 65
      • Bekijk profiel
      • http://www.jeroendj.nl
    Re: [CSS] Text en icon op zelfde hoogte
    « Reactie #2 Gepost op: augustus 16, 2014, 12:32:38 am »
  • [+1]0
  • [-1]0
  • Citaat van: "Brownbear"
    werkt gewoon een &nbsp; niet?
    tussen <p> en de tekst
    dus:
     <center><span class="icon-mobile"></span><p>&nbsp;Interested? Call us at +31 (0) 85 888-1917</p></center>
    natuurlijk niet, wat is dat voor oplossing.

    wat je moet doen is het volgende:
    1. Sla jezelf voor het gebruiken van <center>
    2. Verwijder [icode:kfcdhhbc]<span class="icon-mobile"></span>[/icode:kfcdhhbc]
    3. Voeg een classname toe aan de <p> van de tekst. laten we zeggen [icode:kfcdhhbc]mobile-info[/icode:kfcdhhbc]
    4. Je hebt 2 keuzes.
    4. a) Gebruik [icode:kfcdhhbc]:before[/icode:kfcdhhbc] om een icoon toe te voegen (netjes). je moet dan niet vergeten [icode:kfcdhhbc]content: '';[/icode:kfcdhhbc] toe te voegen. aan dit object voeg je (na positionering) een achtergrond toe.
    4. b) Voeg een achtergrond toe aan [icode:kfcdhhbc]mobile-info[/icode:kfcdhhbc] (no-repeat, left-align etc.) en voeg een padding toe aan de classe (zal iets van 15/25px zijn) om de gewenste afstand te krijgen.

    zelf zou ik 4.a) doen, maar b) is het gemakkelijkste ;)

    edit: ik zie dat je de laatste mogelijkheid al gebruikt. nouja mooidan
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »

    xvilo

    • Global Moderator
    • Verslaafd DigitalPlace Lid
    • *****
    • Berichten: 2675
    • Karma: -44
      • Bekijk profiel
      • http://www.xvilo.com
    Re: [CSS] Text en icon op zelfde hoogte
    « Reactie #3 Gepost op: augustus 16, 2014, 11:23:23 am »
  • [+1]1
  • [-1]0
  • Ja, ik bedacht me later ook om :before te gebruiken op het moment dat ik bedcht om :after te gebruiken voor een clear:both haha...

    Heb het alleen nog nooit eerder gebruikt ;)

    Nóg een optie is om een icon font te gebruiken, kun je het vaker hergebruiken... Right?!


    Verstuurd vanaf GamesCom :bier:
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »