Linking to a CSS link within a page [Archive]

Click to See Complete Forum and Search --> : Linking to a CSS link within a page

GunnerMan

02-20-2008, 06:00 PM

Ok I have made big progress on my website. Ditched all the frames and have gotten things set up nicely with CSS. Now I have a 2 column design with a header and footer. My main body in the center. In the center is where I want to put the content of my page so when they click on a link it dosen't need to reload the whole page just the body part where my variable content will be. Like a framed site but with CSS. How do I go about this?

Centauri

02-20-2008, 07:24 PM

To do that you will need javascript/ajax. Reloading the page isn't a big deal with css, as the css file and images will be cached by the browser, and it will look like only the content changes anyway.

GunnerMan

02-20-2008, 08:46 PM

Thanks, I figured it would require something like that. Now my next problem is is I have my layout looking great on a 1280x1024 screen resolution but when I change that it makes my CSS move out of wack. Is there a setting i can use to keep everything adjusted in relation to screen size?

Centauri

02-20-2008, 10:01 PM

There is no one "setting" that affects that - rather the behaviour of the page elements is reflected in the styles applied. The most common reason things move out of place is the overuse of absolute positioning, which should not be used as a general positioning method. Can you tempory put what you are working on online?

GunnerMan

02-20-2008, 10:36 PM

I have santafestyleart.com, so far I seem to have everything working properly but my image(and/or text) does not resize causing a bad look. CSS seems so great yet it seems so difficult to do a very simple task.

Centauri

02-21-2008, 12:06 AM

Have you looked at it in IE6? - completely broken........

This is fairly straightforward, but you have to think diferently to rigid boxes to put stuff in. Don't have much time right at the moment, but will whip up a layout in a few hours or so time.

Centauri

02-21-2008, 03:18 AM

Have had a play. Try this :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Santa Fe Style Art</title>
<style type="text/css">

</style>
</head>

<body>
<div id="wrapper">
<h1>Santa Fe Style Art</h1>
<ul id="leftnavigation">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="Contactus.html">Contact Us</a></li>
<li><a href="#">Ordering</a></li>
<li><a href="#">Extra**</a></li>
</ul>
<ul id="rightnavigation">
<li><a href="#">Jewlery</a></li>
<li><a href="#">Fine Art</a></li>
<li><a href="#">Furniture</a></li>
<li><a href="#">Originals</a></li>
<li><a href="#">Extra**</a></li>
</ul>
<div id="content">
<img src="Images/colordpenplanssse.jpg" width="485" height="362" class="imgmiddle">
</div>
</div>
<div id="footer">
<h2>Hand Made Originals</h2>
</div>
</body>
</html>

This works by surrounding everything (except the footer) with a div set to 100% minimum height (100% height for IE6), which requires both html and body to be 100% height. The coloured side bars are actually wide side borders on the wrapper. The left and right navigations are floated left and right, and pulled out into the margin area using negative margins. The heading h1 also has negative side margins to pull it full width. The footer (which would normally be off the bottom of the screen) is pulled into view with a negative top margin, and equal padding on the bottom of the content div ensures the footer cannot obscure content. Works in FF & IE7 & 6 (could need an expression to set body min-width for IE6 if you like).

This also shows that container divs are sometimes not needed - ifa div only has one element inside it, then in a lot of cases the div is not needed, and styles can be applied directly to the element.

GunnerMan

02-21-2008, 01:02 PM

Thankyou for your time, im going to look it over tonight and see if I can figure out what makes what "click."

GunnerMan

02-21-2008, 07:30 PM

Ok it is working great with some minor tweaks, the only problem I am having now is when vfiewd in small resolution say 1024x768 the footer is off screen and needs to be scrolled to see. Can this be changed to show for at least an 1024x768 screen? I have tried fiddling with the margins and positioning again but having troubles.

GunnerMan

02-21-2008, 08:02 PM

I got it working fine for 1024x768 and up but 800x600 it hides my center image under my footer. The overflow property does not add a scroll bar like I thought it would.

Centauri

02-21-2008, 08:11 PM

When the height of header is 70px, height of image is 362px, margins on image 40px top and bottom, and footer height is 80px, the total height is 592px. If the user has many toolbars displayed on their browser, the viewport at 1024x768 could very well be less than 592px (mine isn't). You can get an extra 40px by removing the bottom margin from #content .imgmiddle, or you could reduce the height of the header or footer a bit, but apart from that, something has to overlap in order to fit. Your current max-height on #wrapper causes the image to overlap the footer when the screen size is smaller, which is more objectionable than the scroll. Users normally expect to vertically scroll to see all the content on smaller screens.

GunnerMan

02-21-2008, 08:16 PM

Right I want a scroll, because it looks better and I will need to utilize a scroll when I start adding lots of content to the page. Im having a problem getting that scroll to work though.

Centauri

02-21-2008, 08:26 PM

The scroll worked fine in my original code.....

GunnerMan

02-21-2008, 10:48 PM

Got the vertical scroll to work in the content area, now for the horoz. seems im slowly figuring things out :P