Solved

CSS WITH IMAGES

Posted on 2011-03-04
8
316 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
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!

 
LVL 4

Accepted Solution

by:
mars-vie earned 500 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Link Anchor Not working 9 68
html link offset in page with umlaut character in address 5 32
Sticking text to shapes in Raphael.js 6 41
CSS background-color 5 21
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

710 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