1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Help me with a simple php/html code please

Discussion in 'Off Topic' started by borgqueenx, Oct 13, 2015.

  1. borgqueenx

    borgqueenx Active Member

    Can't figure this one out.
    I want to place the text in the middle of the 2 images, and i want everything moved up to display properly in the title.
    How can i do this? ^^

    i already tried putting in some position: relative; top:15px; in <> tags and not and its just not moving.

    [​IMG]
     
  2. gabarba

    gabarba Member

    I just checkout out our site using what you already have you can use the following block to solve your problem.

    Code:
    <h3>
        <center style="position: relative; top: -6px;">
            <img src="http://testing.cupcakethunder.eu/img/celebrationleft.png" height="33" width="33">
            <span style="position: relative;top: -8px;">Birthdays!</span>
            <img src="http://testing.cupcakethunder.eu/img/celebrationright.png" height="33" width="33">
        <center>
    </h3>
    Ideally though I would wouldn't use inline styling like you have done. Also I would strip out the <center> tag and use CSS for positioning and formatting instead.

    Here is a sample of how I would make this work

    HTML:
    <h3>
            <span>Birthdays!</span> 
    </h3>

    Code:
    .sidebar .section.widget_Birthdays h3 {
          padding: 2px 5px 10px;
          text-align:center;
          position: relative;
      }
    
    .sidebar .section.widget_Birthdays h3 span {
          padding: 10px 0px;
          display: inline-block;
      }
    
      .sidebar .section.widget_Birthdays h3 span:before,
      .sidebar .section.widget_Birthdays h3 span:after {
            display: block;
            width:33px;
            height:33px;
            content: "";
            position: relative;
            top: -8px;
            margin: 0px 5px;
       }
    
       .sidebar .section.widget_Birthdays h3 span:before {
         background: url(http://testing.cupcakethunder.eu/img/celebrationleft.png) no-repeat;
         float:left;
       }
    
       .sidebar .section.widget_Birthdays h3 span:after {
         background: url(http://testing.cupcakethunder.eu/img/celebrationright.png) no-repeat;
         float:right;
       }
     
  3. borgqueenx

    borgqueenx Active Member

    thanks alot guys! got it to work thank to you!
    I also learned a bit about how it works.
     
  4. Tracy Perry

    Tracy Perry Well-Known Member

    Actually you shouldn't be asking this in the off-topic area, but the styling area in the license holder support area. MOST people will not give you support in the off-topic areas that are open to the public since we tend to not help folks out with stuff like this that are unlicensed (not saying you are, but giving the reason why) that post in the open to the public areas requesting assistance.
     

Share This Page