Solved

CSS interference

Posted on 2014-04-15
9
401 Views
Last Modified: 2014-04-17
Hi, please look at pamstevensonjewellery.com. I'll attach a screenshot of how it's supposed to look. I'm adding lightbox. (http://www.lokeshdhakar.com/projects/lightbox2/).

It looks like screen.css is interfering with style.css, or overriding it somehow. Can you help?

Thanks!

without screen.css
0
Comment
Question by:mel200
  • 5
  • 4
9 Comments
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 40003013
in screen.css on line 257 remove background:#fff from the body style.
Then remove background-color: #f7f7f7; from the header style (on line 288 screen.css).
You background image will then show up..
N
PS: To fix the weird padding around the header image update the header style again (line 288 in screen.css) to change padding: 2rem 0; to padding: 20px;
0
 

Author Comment

by:mel200
ID: 40003936
Thanks, Will try those suggestions now!
0
 

Author Comment

by:mel200
ID: 40003993
ok, we're really close! I exchanged the header section at line 288 with the header from style.css. Now there's a white space at the top to get rid of. That may be caused by the menu dropdown that has suddenly appeared, which is also caused by screen.css.

I know that because I commented out screen.css, then uploaded index.html, and that disappeared. I uncommented it and uploaded again, so now we're looking at it with screen.css loaded. Thanks for your help.

( a few minutes later- I don't see the drop down menu anymore, but it was below the home section on the menu a while ago)
0
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 40005201
Ok, try this
in style.css at line 27 remove the margin-top:15px from header #logo
then in screen.css on line 288 update your header style to look like this
header {
height: 200px;
width: 100%;
margin-bottom: 15px;
padding-top: 15px;
}

Open in new window


just tried this and it works perfectly.
Cheers,
N
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:mel200
ID: 40005350
Looks great! Only one more question...if you looks at the screenshot at the top of this question, there's not as much space between the navigation and the products as there is now.
0
 
LVL 5

Accepted Solution

by:
Neil_Bradley earned 500 total points
ID: 40005377
You can easily change that by creating a new style to target your content id
section#content {
padding-top: 2rem;
}

Open in new window


just adgust the padding top to fit your desired look.
0
 

Author Closing Comment

by:mel200
ID: 40005418
More than excellent! Thanks very much for all your help!
0
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 40005536
Quick tip for de bugging future jobs.
Open your web page in Chrome, right click the screen and select "Inspect Element". You can manipulate your css and test out news styles etc.
Its great!
0
 

Author Comment

by:mel200
ID: 40006552
Thanks! I've been using firebug, and it didn't help at all. I'll keep chrome in mind!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

705 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