• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 271
  • Last Modified:

CSS Box

I am not very good at putting new things on my webpage.  Can someone show me how to put the CSS code on my page so there is a container box under my Order Buttons where I can insert a banner and an image.

www.garblecard.com

There is a mock up of what I need to do in the attachment screen shot.
0
akbiro
Asked:
akbiro
  • 7
  • 5
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Do you mean the paypal images?

<p><img src="images/PayPal.png" width="95" height="51"></p>

Open in new window


<p><img src="images/PayPal.png" width="95" height="51">
<div class="paypalbanner"><img src="images/banner.jpg"></div>
</p>

Open in new window


Then style div.paypalbanner{something:something;}
0
 
akbiroAuthor Commented:
Just below those PayPal buttons, in that blank space I need to be able to insert a banner and the image above.  I know it can be done with CSS, making a space for it.  When I try it, I mess up all the other areas of the page...but I can learn.

Thanks for your attention.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
To make this work, you will need to clean up your code.  

To make this easy, here is just the code we need to deal with.  Working sample: http://jsbin.com/uzicah/1/edit

css
ul.the-team>li>p+p+p {background: url(http://dummyimage.com/100x32/f0f/fff); 
    width: 100px;
    height: 32px;
    display: block;
    content: ' ';}

Open in new window

html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  	

  <ul class="the-team">
 <li class="odd" id="product1">
    <div class="thumbnail"><img alt="thumbnail" src="images/thumb-picaa.png" width="83" height="78"></div>
    <p class="mname">Single Set of 2 - $10</p>
    <p><img src="images/PayPal.png" width="95" height="51"></p>
    <p>&nbsp;</p>
  </li>
    
</ul>

</body>
</html>

Open in new window

You can view your errors to clean up here http://validator.w3.org/check?uri=http%3A%2F%2Fwww.garblecard.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Make sure the coding is consistant. I saw there was a 3rd paragraph in the UL and that is where the image is going.   <p>&nbsp;</p>
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
akbiroAuthor Commented:
I am still not sure that I have made it clear what I need.  Thank you for being patient with me...my bad.  See the image below.   Here is what I want to do:

1) Under the PayPal order section I want to insert a green banner: People are beginning to talk.

2)  Under the banner, I want to insert the image of all the TV stations that have carried our project.

If you look on the site garblecard.com, you will see there is a lot of free space under the order section because of the length of the Technical Info side bar.

Hope this helps!!
PeopleTal-Website.png
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If you need to do this in pure css, then you would modify this line

ul.the-team>li>p+p+p {background: url(http://dummyimage.com/100x32/f0f/fff);

to just

ul.the-team>li> {background: url(http://dummyimage.com/100x32/f0f/fff);
except make the image larger.  However, you couldn't do the green banner in just css unless that was part of the image.  You would be better off after the ul class the-team to just insert the html  you need.
0
 
akbiroAuthor Commented:
Ok...that looks great and simple...let me give it a try.
0
 
akbiroAuthor Commented:
Unfortunately, I do not see that line
ul.the-team>li>p+p+p
in my style.css
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It's in the css I provided.  What I gave you was wrong anyway. This is what you would use.

ul.the-team:after {background: url(http://dummyimage.com/400x32/f0f/fff); 
    width: 400px;
    height: 32px;
    display: block;
    content: ' ';}

Open in new window

Notice it works in my sample here http://jsbin.com/uzicah/2/edit using your full code it is not working http://jsbin.com/uzicah/3/edit.  I think once you clean up your code (make it validate) it will be fine.  To validate, go to http://validator.w3.org/ and paste your url.  It will show you the errors.
0
 
akbiroAuthor Commented:
I just do see it.  I am sorry...it is over my head.  I definitely appreciate your help, but I have no clue how to add this to my page and there is no way I know how to run the code through the validation page...

I will work on it later and let you know.

Thanks
0
 
akbiroAuthor Commented:
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Click on this this link to see the errors http://validator.w3.org/check?uri=http%3A%2F%2Fwww.garblecard.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 although based on what you are saying, it is not going to make much sense.

If you can just add to the html below that instead of css you can add text.

There is a way you can just make all the content on the main left side not have that gap but you would need to change the layout a little.
0
 
akbiroAuthor Commented:
Thank you for your patience.  I will get someone here in town to do it for me.  It is over my head...but you did your best...so thank you!
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now