Solved

CSS WITH IMAGES

Posted on 2011-03-04
8
311 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
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
Independent Software Vendors: 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
IF statment In Powershell 12 28
..ignore the Question 1 21
SVG and IE11 2 16
Session on Html 8 36
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

679 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