Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS Box

Posted on 2013-06-21
12
Medium Priority
?
269 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
12 Comments
 
LVL 53

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 53

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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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 53

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 53

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 53

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

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Viewers will get an overview of how to make and use Drum Racks in Ableton Live. Load new Drum Rack into empty MIDI track: Fill rack with audio samples: Re-arrange sample slots as necessary: Adjust parameters of each slot to tailor each sound a…
Viewers will learn how to use LFOs to modulate the sound of their Sampler instruments. Click the Modulation tab in Sampler: Choose one (or more) of the three available LFOs, and click the respective button to turn it on: Select a waveform, an LF…

688 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