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

css best way to achieve this goal?

Mike Teezie

Mike Teezie

macrumors 68020
Original poster
Nov 20, 2002
2,205
1
I'm trying to do something I thought I knew how, but it seems it's either slipped my mind, or I never knew.

In my page, I have a container with defined height and width. Everything in the body and container are centered.

I have a horizontal rollover nav bar in the container.

Im trying to get something like this inside the container:

csshelp.png


1. Will be white space, with a text-image there for a title, and links beneath it.

2. Will be a big image that meets up seamlessly with #1.

I tried to do this with a table, but the table ignored my css for link colors and hovers. I'd like to leave the tables out here if it's possible, just so I can learn more css. If tables are a must, that's ok too.

I tired using second and third containers, but I couldn't make them stay side by side. If I put content into them, the third container would move beneath the second. I'm really lost now and confused now.

Hopefully, the whole thing will be structured like this:

example.png


The white is the container, and the dark color the nav links. The two grey rectangles from before is what I'm trying to get figured out.

As always, help is greatly appreciated.
 
G

Grover

macrumors member
May 14, 2004
48
0
I'm sure there are better ways to do this but this will give you the idea:

Code: 
<html>
<head>
	<title>Untitled</title>
</head>
<body>

<div id="container" style="border: 1px solid #CCCCCC; padding: 4px 4px 4px 4px;">

	<div id="navigation" style="border: 1px solid #000000;">
		Navigation
	</div>

	<div id="leftSidebar" style="border: 1px solid #CCCCCC; background: #EEEEEE; margin-top: 4px; padding: 4px 4px 4px 4px; float: left;">Left Sidebar</div>
	<div id="rightContent" style="border: 1px solid #CCCCCC; background: #CCCCCC; margin-top: 4px; padding: 4px 4px 4px 4px;">Right Content</div>

</div>

</body>
</html>
 
X

xelterran

macrumors 6502
Dec 28, 2001
291
0
Try this:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">

#html, body
{
	text-align:center; /* center in IE */
}

#container
{
	width:750px;
	padding:40px;
	margin:0 auto;  
	text-align:left;
	border:1px solid #999999;
	background-image:url("img/columns.gif"); /* image for columns */
	background-repeat:repeat-y;
}

/* navigation */

#container ul
{
	float:left;
	width:750px;
	padding:0;
	margin:0;
	background-color:#cccccc;
}

#container ul li
{
	float:left;
	list-style:none;
	padding:10px;
	margin:0;
}

/* left & right floats */

#left
{
	float:left;
	width:250px;
}

#right
{
	float:right;
	width:500px;
}

/* forces container over #right & #left */

.clear
{
	display:block;
	clear:both;
	height:1px;
	font-size:1px;
	line-height:1px;
}

p
{
	margin:0 0 20px;
	padding:0;
}
</style>
	<title>page title</title> 
</head>
<body>
<div id="container">
	<ul>
		<li><a href="index.html">navlink1</a></li>
		<li><a href="index.html">navlink2</a></li>
		<li><a href="index.html">navlink3</a></li>
		<li><a href="index.html">navlink4</a></li>
	</ul>
	<div id="left">
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed augue. Praesent eu nisi. Nullam vitae nibh. Integer magna mi, sollicitudin ut, luctus in, nonummy ac, augue. Ut vel libero vel tellus pulvinar ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer pede erat, malesuada vitae, rutrum ac, interdum non, lacus. Donec imperdiet lacinia tortor. Pellentesque ultricies, massa non aliquet hendrerit, leo libero euismod libero, vel vestibulum neque erat id ligula. Ut volutpat. 
		</p>
	</div>
	<div id="right">
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed augue. Praesent eu nisi. Nullam vitae nibh. Integer magna mi, sollicitudin ut, luctus in, nonummy ac, augue. Ut vel libero vel tellus pulvinar ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer pede erat, malesuada vitae, rutrum ac, interdum non, lacus. Donec imperdiet lacinia tortor. Pellentesque ultricies, massa non aliquet hendrerit, leo libero euismod libero, vel vestibulum neque erat id ligula. Ut volutpat. 
		</p>
		<p>
			Praesent gravida. Pellentesque sit amet leo. Pellentesque pulvinar augue eget magna. Curabitur quis neque non sem mollis ullamcorper. Etiam commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis et pede. Suspendisse pulvinar odio a lectus. Nunc et nibh eget arcu lobortis ornare. Sed at tellus. Ut nec lectus quis elit dignissim tincidunt. Sed ac dui. Nunc posuere, erat ut posuere tincidunt, metus mauris varius dui, at venenatis massa lorem vitae enim. Vivamus eleifend massa sodales dolor. Sed lobortis nisl et velit. Proin congue, mi et molestie porttitor, lorem erat placerat nisi, iaculis facilisis dui ipsum ut orci. Morbi ornare, velit eget dictum fringilla, mi quam sollicitudin ipsum, id tempus lorem lorem vitae sem. Proin neque dolor, porta ut, porta sit amet, pharetra sed, augue. Proin vehicula orci vel nulla. 
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed augue. Praesent eu nisi. Nullam vitae nibh. Integer magna mi, sollicitudin ut, luctus in, nonummy ac, augue. Ut vel libero vel tellus pulvinar ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer pede erat, malesuada vitae, rutrum ac, interdum non, lacus. Donec imperdiet lacinia tortor. Pellentesque ultricies, massa non aliquet hendrerit, leo libero euismod libero, vel vestibulum neque erat id ligula. Ut volutpat. 
		</p>
		<p>
			Praesent gravida. Pellentesque sit amet leo. Pellentesque pulvinar augue eget magna. Curabitur quis neque non sem mollis ullamcorper. Etiam commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis et pede. Suspendisse pulvinar odio a lectus. Nunc et nibh eget arcu lobortis ornare. Sed at tellus. Ut nec lectus quis elit dignissim tincidunt. Sed ac dui. Nunc posuere, erat ut posuere tincidunt, metus mauris varius dui, at venenatis massa lorem vitae enim. Vivamus eleifend massa sodales dolor. Sed lobortis nisl et velit. Proin congue, mi et molestie porttitor, lorem erat placerat nisi, iaculis facilisis dui ipsum ut orci. Morbi ornare, velit eget dictum fringilla, mi quam sollicitudin ipsum, id tempus lorem lorem vitae sem. Proin neque dolor, porta ut, porta sit amet, pharetra sed, augue. Proin vehicula orci vel nulla. 
		</p>
	</div>
	<div class="clear"></div>
</div>
</body>
</html>

You will need to create an image for the columns that way they will equalise.
 
MrSugar

MrSugar

macrumors 6502a
Jul 28, 2003
614
0
To be honest it would help if maybe you had a photoshop mockup of what you wanted to achieve. I believe the CSS from the post above should get you fairly close but it depends on how you are going to be basing your heights.

If you want your background images to match up you may need to have height involved as otherwise the float will only expand as tall as your content. Which is why I am a bit confused on what you are trying to achieve.
 
Mike Teezie

Mike Teezie

macrumors 68020
Original poster
Nov 20, 2002
2,205
1
MrSugar said:
To be honest it would help if maybe you had a photoshop mockup of what you wanted to achieve. I believe the CSS from the post above should get you fairly close but it depends on how you are going to be basing your heights.

If you want your background images to match up you may need to have height involved as otherwise the float will only expand as tall as your content. Which is why I am a bit confused on what you are trying to achieve.
Click to expand...

Here is what will be the homepage of the page that I am working on.

And here is an example of what I'm trying to do with the other pages for the site. The links should be higher, right under the "girls" image. I'm using a table so I can demonstrate how I'm trying to get it laid out. Tables are awfully frustrating, as I can't get the links to go where I want them, not to mention it's also ignoring my css for link fonts, colors, and decoration.

Thanks everybody for helping me so far, the battle continues.



edit: links added.
 
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