Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 272
  • 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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

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