Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS Box

Posted on 2013-06-21
12
Medium Priority
?
270 Views
Last Modified: 2013-06-24
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
Comment
Question by:akbiro
  • 7
  • 5
12 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39266919
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
 

Author Comment

by:akbiro
ID: 39267140
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
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39267221
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:akbiro
ID: 39269196
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
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39269283
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
 

Author Comment

by:akbiro
ID: 39269759
Ok...that looks great and simple...let me give it a try.
0
 

Author Comment

by:akbiro
ID: 39269770
Unfortunately, I do not see that line
ul.the-team>li>p+p+p
in my style.css
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39269797
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
 

Author Comment

by:akbiro
ID: 39269913
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
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39270036
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
 

Author Closing Comment

by:akbiro
ID: 39271946
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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Viewers will learn how to turn a Live Set into a compressed Live Pack file, and how to install Live Packs. Make: File > Collect All And Save: File > Manage Files: Click Manage Project: Click Create Pack: Select save location: Install: Doub…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question