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

x
?
Solved

CSS WITH IMAGES

Posted on 2011-03-04
8
Medium Priority
?
327 Views
Last Modified: 2012-05-11
Hi,
I am trying to design a new website. But I don't know how to control & fix the navigation, left side, main content & footer. If I fix one page the other goes crazy( navigation, left side, main content & footer). Do I've to write diffrent css'es for diffrent pages? I am uploading the zip files including images with this question.
Any help, comments and feedback would be deeply appreciated. Thanks in advance. SITE.zip
0
Comment
Question by:s_hausen
[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
8 Comments
 
LVL 1

Expert Comment

by:sonetinc
ID: 35040840
I’d recommend you to stay away from absolute positioning and switch to standard flow. Place the images as backgrounds into CSS. Rearrange your DIVs to the proper sequence:

header
navigation
sidecontent
maincontent
footer

This way you end up with less and much cleaner markup. Take a look at http://960.gs/ (for CSS layouts it’s a good starting point).
0
 

Author Comment

by:s_hausen
ID: 35040877
Sonetinc,
I am very new with css and person I am designing the site for, want as it is. I checked the link you'd provided but the one i am designing is very simple :( but don't know, how to control the nav's, leftside, rightside and footer.
0
 

Expert Comment

by:edavo
ID: 35041983
See the attached files... All is fixed...

I added borders just so you could see the CSS structure - To remove them, simply go into the CSS and set the border: 0px

Let me know if this helps... SITE-REV.zip
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.

 
LVL 4

Accepted Solution

by:
mars-vie earned 2000 total points
ID: 35043133
Hello!

If attached a browser back-compatible version - so it looks almost identically in all MSIE versions back to version 6.
Also firefox looks good. Didn't test other browsers.

Attached version is also W3C-conform, if you add 2 alt-text to the navigation and main image tags.

Another problem in all prior versions - linking the style sheet should be placed within the head-section!
SITE-REV1.zip
0
 

Author Comment

by:s_hausen
ID: 35044237
Hi Mars,
I am sending you and image(gif) mentioning some glitches in it. Please have a look and yes, if you like to desing and write your own css in html to fix the site, please do so that way, you don't have to follow my newbie style codes of css & html. browser diffrences
0
 

Author Comment

by:s_hausen
ID: 35044283
Hi Mars,
Its look like the text issue has been resolved, my mistake. The only issue is why the background image coming slightly over the top image.
0
 

Author Comment

by:s_hausen
ID: 35044444
its looks like everything has fixed, I guess I'd old browser problem. anyway, I do appreciate everyone who helped me in regards of this issue and I again thank you for all. have a good weekend...
0
 

Author Closing Comment

by:s_hausen
ID: 35044447
very helpful
0

Featured Post

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!

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
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…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

704 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