• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 532
  • Last Modified:

CSS interference

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
mel200
Asked:
mel200
  • 5
  • 4
1 Solution
 
Neil_BradleyWeb UX/UI DeveloperCommented:
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
 
mel200Author Commented:
Thanks, Will try those suggestions now!
0
 
mel200Author Commented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Neil_BradleyWeb UX/UI DeveloperCommented:
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
 
mel200Author Commented:
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
 
Neil_BradleyWeb UX/UI DeveloperCommented:
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
 
mel200Author Commented:
More than excellent! Thanks very much for all your help!
0
 
Neil_BradleyWeb UX/UI DeveloperCommented:
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
 
mel200Author Commented:
Thanks! I've been using firebug, and it didn't help at all. I'll keep chrome in mind!
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

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