1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.
  2. Better Analytics for WordPress Get It Free

<span> inside <div> styling issues.

Discussion in 'CSS' started by brandon93s, Apr 16, 2009.

  1. #1
    Html Code:

    
    <div id="content">
    <!-- navigation bar code, not needed for my question :)-->
    
    <div id="main"><img src="images/C7-1_services.png" width="188" height="30" alt=""/>
            	<div id="main_text">
                
                <span class="outline1"><span class="style5">web design. </span><br />
            	  <span class="style4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget augue. Sed sodales condimentum ligula. Praesent est. Phasellus tincidunt urna in diam.</span><br /><br /></span>
           	  
              <span class="outline1"><span class="style5">graphic design.</span><br />    
                   <span class="style4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget augue. Sed sodales condimentum ligula. Praesent est. Phasellus tincidunt urna in diam.</span><br /><br /></span>
                   
                   <span class="outline1"><span class="style5">search engine optimization.</span><br />
                   <span class="style4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget augue. Sed sodales condimentum ligula. Praesent est. Phasellus tincidunt urna in diam.</span><br /><br /></span>
                   
                   <span class="outline1"><span class="style4"><a href="contact.htm">Contact</a> us for a free quote today!</span></span>                
    <br />
       	  </div>
          </div>
      </div>
    HTML:
    CSS Code: (Just what you need to see)
    
    div#content {
    background:url(inherit);
    width:800px;
    }
    
    div#main {
    background-image:url(images/final-2_11.png);
    background-repeat:no-repeat;
    background-position:top left;
    width:549px;
    height:325px;
    float:right;
    text-align:left;
    }
    
    div#main_text {
    background:url(inherit);
    padding-left:15px;
    overflow: auto;
    height:250px;
    text-align:left;
    }
    
    .style4 {
    color: #d6d6d6;
    font-family: Arial;
    font-size: 12px;
    }
    
    .style5 {
    color: #FFFFFF;
    font-size: 18px;
    font-family: Georgia, "Times New Roman", Times, serif;
    }
    
    .outline1 {
    outline: solid;
    outline: medium;
    outline:#CCCCCC;
    padding: 5px;
    }
    Code (markup):
    Now my question is...around each section such as "Web Design" and then "Loreum..." I want a border around each section. This is all dummy text, so bare with me. But around each section i wanted the ".outline1" rule to come in to outline each section into its own box. Something along the way is conflicting, and the box isn't showing up. I know my code is a mess.

    Any tips or solutions!!!???
     
    brandon93s, Apr 16, 2009 IP
  2. mr_banks

    mr_banks Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Yeah your right the code is a mess I all those spans aren't the best way to go about doing things try using different markup such as <p> tags. anyway here is a fix to make your borders show up.

    .outline1 {
    border: solid medium #CCCCCC;
    padding: 5px;
    }

    that will make them show up.
     
    mr_banks, Apr 16, 2009 IP
  3. brandon93s

    brandon93s Active Member

    Messages:
    803
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    85
    #3
    Thanks, how should I tidy it up?

    P = outline 1
    span = 5> title </span
    span = 4> textttttt </span
    /P

    repeat.

    The above is obviously not real code, just example.
     
    brandon93s, Apr 16, 2009 IP