Solved

CSS WITH IMAGES

Posted on 2011-03-04
8
275 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
 
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

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

IT, Stop Being Called Into Every Meeting

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!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
spacing 5 27
Responsive CSS question 2 39
Change properties of a dialog box 1 19
Open a div with click on an image 7 41
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

707 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

17 Experts available now in Live!

Get 1:1 Help Now