Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS - mixing absolute and relative positioning?

P-Worm

P-Worm

macrumors 68020
Original poster
Jul 16, 2002
2,045
1
Salt Lake City, UT
I'm building a site from scratch for my wedding video business and I'm having a little problem with positioning. I'm afraid I'm below average when it comes to coding a site myself (I don't like the messy code the WYSIWYG editors make) and could really use some help.

Here's an example of a page.

I want the bottom part of the main text to have about 25px of space before the end of the page. Right now it is at the bottom and I don't think it looks very nice. I don't want the text to be blocked off at all, but just have it so that when I scroll all the way down, there's some background at the bottom instead of just the main section.

I tried mixing absolute and relative positioning to no avail (but it's possible that relative isn't what I want at all).

For reference, the CSS code for the main text is:

Code: 
div.main {
	position: absolute; top: 270px; left: 100px; 
	width: 750px;
	border: 2px solid
RGB(185,176,157);
	background-color: RGB(245,245,245);
	z-index: 2;
	overflow: hidden }

Thanks for any help you can give.

P-Worm
 
P

Photomax

macrumors regular
Nov 26, 2007
137
0
Seattle
I am not sure I understand your problem or the question?

When I look at the sample page and the code with absolute positioning, z-index and overflow declarations my hunch is that you are making things needlessly complicated...

Your mileage may vary but I always try to avoid absolute positioning. Putting down clean markup and using divs with floats usually works well for me...
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
Have you fixed this? It looks like the linked page has about 25px of space at the end of the page. Unless I'm missing something.
 
J

jSunbeam

macrumors regular
Nov 9, 2007
115
0
it's nearly 5am and i've been coding for about 40 hours,

and i can barely remember my own name,

so all i'm going to say is i'm not sure why you'd even need to use absolute positioning with anything on this page.

stick the header image as a main background image top left and just put a left-margin on the main column.

a div for the links (with a bottom margin) and a div for the main content should sort you out...

it's all one column so you shouldn't even need to worry about floats, positioning etc...

i should probably revisit this when i become human again...
 
J

jSunbeam

macrumors regular
Nov 9, 2007
115
0
i guess i can't stop

try this:

Code: 
<html>
<head>
<title>What makes the difference</title>

<!-- i've taken out the reference to your CSS file and included the necessary CSS in the page  -->

<style type="text/css">

body {

	background: RGB(89,84,65) url('./banner_difference.jpg') no-repeat top left;
	}


#content {
	margin-top:200px;
	margin-left:100px;
	width: 770px;

}
a:link {

	font-family: sans-serif;
	font-size: x-large;

	color: RGB(74,135,151);

	text-decoration: none }

	

a:hover {
	font-family: sans-serif;
	font-size: x-large;

	color: RGB(105,191,222);

	text-decoration: none }

	

a:active { 
	font-family: sans-serif;
	font-size: x-large;

	color: RGB(105,191,222);

	text-decoration: none }

	 

a:visited { 
	font-family: sans-serif;
	font-size: x-large;

	color: RGB(105,191,222);

	text-decoration: none }


.navigation, .main {
	background:white;
	border: 2px solid RGB(185,176,157);


}

.navigation {
       margin-bottom:15px;
}

.main {
       margin-bottom:25px;
}
h1 {
	font-family: sans-serif }



.main {
	padding: 0 20px;
}


</style>
</head>
<body>


<div id="content"><!--this is a new div-->

<div class="navigation">
<p align="center"><a href="./index.html">Main</a> ~ <a href="./demos.html">Demo Videos</a> ~ <a href="./difference.html">The Difference</a> ~ <a href="./pricing.html">Pricing</a> ~ <a href="./reviews.html">Reviews</a></p>

</div>

<div class="main">
<h1 align="center">Why should you choose Thomas Taylor Video?</h1>
<p>Special care is taken with every video to ensure that you get a video of the highest quality possible.  Unlike other wedding videos, special attention is payed to the little details that can be the difference in a video that is watched after the wedding and soon forgotten or a video that is watched time and time again to remember that special day.</p>

<h2 align="center">Every video shot in High Definition</h2>
<p>Just like how it is difficult to plant a strong tree in hard soil, it is impossible to make a high quality video without having the best quality footage to start with.  Every wedding is shot in a high definition format so when the final DVD is created, no detail is lost in the process.  Each video is also shot at 24 frames per second (the same as Hollywood films) to give the footage a fluid and comfortable feel.  The type of camera used to make each video is customizable so that the best footage can be taken in any situation.</p>

<h2 align="center">Color Correction</h2>
<p>Special attention is given to making the picture quality of every video the best that it possibly can be.  Using advanced software, the colors of every single shot are maticulously tweaked to be certain that each frame of video stands out.  Other wedding video companies are content to deliver the video straight from the camera without taking the extra time needed to make the picture really "pop."  Take a look at a few of these before and after photos and judge for yourself whether the extra time and care is worth it.</p>

<p align="center"><img src="./images/TempleCC2.jpg"></p>
<p align="center"><img src="./images/TempleCC.jpg"></p>


</div>

</div><!--content-->

</body>
</html>

that should do it. check odd bits and bob in various browsers before you commit it (google 'ie box model' ;) ) .

oh, and one thing i forgot to mention (although you may not care) - stuff like 'align = center' is technically 'not cool' in web design any more. it probably won't break anything, but if you want brownie points then put any style stuff in the CSS.
 
P-Worm

P-Worm

macrumors 68020
Original poster
Jul 16, 2002
2,045
1
Salt Lake City, UT
jSunbeam, thank you very much. The code you gave me works great except for one piece that I haven't been able to figure out. In the body section you added:

Code: 
url('./images/banner_difference.jpg') no-repeat top left;

I can't get the banner to display now after losing the top_left_image div. (Also, note that I changed the address to a folder images as that is where the file is stored). I'm not familiar with the url command or how it works. I assume that it just splices in whatever that URL is?

You mentioned that align="center" is no longer the way things are done. Could you explain what the overall strategy for centering things is? Do you make a class called "center" or something?

Thanks again.

P-Worm
 
P-Worm

P-Worm

macrumors 68020
Original poster
Jul 16, 2002
2,045
1
Salt Lake City, UT
Oh, one more thing that I forgot to mention. The banner at the top of the page is different for each page. Would that make it easier to do the class "top_left_image" a better means?

P-Worm
 
D

Delameko

macrumors member
May 1, 2008
63
0
P-Worm said:
jSunbeam..[snip] In the body section you added:

Code: 
url('./images/banner_difference.jpg') no-repeat top left;

I can't get the banner to display now after losing the top_left_image div.
Click to expand...

That's a typo, it should be:

Code: 
url('../images/banner_difference.jpg') no-repeat top left;

Notice the ..
 
D

Delameko

macrumors member
May 1, 2008
63
0
P-Worm said:
You mentioned that align="center" is no longer the way things are done. Could you explain what the overall strategy for centering things is? Do you make a class called "center" or something?
Click to expand...


Basically the idea behind CSS is that all the style information is kept completely separate from the markup code. The ultimate goal is to be able to the change the style sheet without touching any of your html markup and get a completely new design. So, bearing this is mind, its not a good idea to hardcode in alignment.

You could create a class, but the easiest and cleanest way would be to mark up your headers (if they're going to be consistent across your site). So delete the 'align=center' from your html and then in your CSS:

Code: 
h1, h3 { text-align: center; }

Much cleaner.

As for your images at the bottom, I'd drop the <p> tags, they're unnecessary markup. Add this to your CSS:

Code: 
img.center { display: block; margin: 0 auto; }

Then change your image code to look like this:

Code: 
<img class="center" src="images/TempleCC.jpg" />
<img class="center" src="images/TempleCC.jpg" />

Again, much cleaner. Note the slash at the end of the images /> thats valid xhtml, its a good thing to get into the practice of adding that to any tags that don't have a separate closing tag.

The centering is little trick. You need to change the element's display type to block for it to work and then the 'margin: 0 auto' is shorthand for 'margin-left: auto; margin-right: auto;'.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom