Solved

CSS Box

Posted on 2013-06-21
12
258 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 52

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 52

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
 

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 52

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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 52

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
 

Author Comment

by:akbiro
ID: 39269916
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Angular 2 complaining about map file 7 52
JavaScript: Issue with onClick 5 34
form button worked now it doesnt anymore 9 36
Message not shown 5 27
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Viewers will learn how to use Macros for greater control over Rack parameters in Ableton Live. Group devices into a Rack by selecting them and pressing Command-G (Ctrl-G on PC): Control-click (Right Click on PC) a parameter to access pop-up menu, …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

930 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now