Div issue... not the right width

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Steveo31
Forum Contributor
Posts: 416
Joined: Sun Nov 23, 2003 9:05 pm
Location: San Jose CA

Div issue... not the right width

Post by Steveo31 »

Hey guys.

Havin some problems on this page. It's working okay, except the main table, #centerTable with "test" in it isn't resizing right. I need it to be 60% of the div it is in, no matter the resolution. Once the screen res hits 800 wide, the table moves. Heres the HTML:

Code: Select all

<div id="container">

	<div id="head"></div>
	<div id="side"></div>

	<div id="main">
		<span>
			<h3>Multimedia Advanced</h3>
		</span>
		<div id="links">
			<span id="linkText">
				<h4>Links:</h4>
				<li>One</li>
				<li>Two</li>
				<li>Three</li>
			</span>
			<p>&nbsp;</p>
			<span id="linkText">
				<h4>Other Info:</h4>
				<li>One</li>
				<li>Two</li>
				<li>Three</li>
			</span>
		</div>
		<div id="centerTable">
			Test.
		</div>
	</div>
</div>
And the CSS:

Code: Select all

/* CSS Document */
body {
	padding:0px;
	margin:0px;
}
#container {
	width:auto;
	padding-bottom:10px;
	background-color:#DFDFDF;
}
#head {
	background-color:#003366;
	padding:0px;
	height:80px
}
#side {
	background-color:#003366;
	float:left;
	width:80px;
}
#main {
	background-color:#EFEFEF;
	width:90%;
	height:70%;
	padding:10px;
	margin:10px;
}
#links {
	background-color:#FFFFFF;
	width:200px;
	height:70%;
	float:left;
	margin:10px;
	padding:15px;
	font-family:arial;
}
#linkText li {
	padding-left:20px;
	font-family:verdana;
	font-size:13px;
}
#centerTable {
	background-color:#FFFFFF;
	float:left;
	width:60%;
	height:80%;
	margin-left:15px;
	padding:12px;
}
I know it's a lot, I'm sorry.

:)
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

You mean that once you take it below 800, it doesn't scale properly?

You might need to look into the min-width and max-width properties. And, since they aren't properly supported by IE, you might need to look at Dean Edwards' IE7 hack.
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post by no_memories »

Do you have an active link? So I can see what you want to accomplish.

[edited] oops, sorry, it's been a long day, I see what you are doing, I'll fix it tomorrow and explain it all for you so you know what to do next time. But right now I am going to watch the filming of "Dark Waters" here outside my apt in NYC. It's staring Jennifer Connelly.

Look for a post tomorrow afternoon sometime.
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post by no_memories »

This layout is merely to give you an idea of how CSS works across browsers. It will generally work, but has some innate flaws which you should try and figure out; unless you want to hire me! Good Luck!

For more information on how to properly use CSS go to the W3C CSS 2 specifications page; you will learn allot.

http://www.w3.org/TR/CSS2/

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><!-- This metatag should be first within the head statement -->

<title>Your Title Here</title>

<style>
body {
font-family: Verdana, "MS Sans Serif", Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000;
background: #fff;
padding:0px;
margin:0px;
}

/* Pseudo Common */
a:link {
color: #00f;
background: transparent;
text-decoration: underline;
}

a:visited {
color: #00f;
background: transparent;
}

a:hover {
color: #999;
background: transparent;
text-decoration: none;
}

#container {
position: relative;
color: #000;
background: #036;
width: auto;
margin: auto;
padding: 0px;
z-index: 1;
}

#head {
position: relative;
width: 100%;
height: 80px;
margin: auto;
padding:0px;
z-index: 1;
}

#main {
position: relative;
color: #000;
background:#dfdfdf;
width:auto;
height:auto;
padding:10px;
margin: 0px 0px 0px 90px;
z-index: 2;
}

#multimedia {
position: relative;
color: #000;
background:#efefef;
width:auto;
height:auto;
padding:0px;
margin: 0px 0px 0px 0px;
z-index: 3;
}

#multimedia h1 {
font-size: 150%;
padding: 5px 0px 0px 0px;
margin: 0px 0px 0px 10px;
}

#contentwrap {
position: relative;
width:auto;
height:400px; /* This is a limitation of this layout, I could try and debug it, but I have my own projects to work on */
padding: 0px;
margin: 10px 0px 0px 10px;
z-index: 4;
}

#contentwrap2 {
position: relative;
width:auto;
height:10px;
padding: 0px;
margin: 0px 0px 0px 0px;
z-index: 4;
}

#links {
position: absolute;
top: 0px;
left: 0px;
width: 35%;
height: auto;
margin: 0px 0px 0px 0px;
padding: 0px;
color: #069;
background: #fff;
border: 1px solid #a3d1ff;
z-index: 5;
}

#links h2 {
font-size: 130%;
padding: 5px 0px 5px 0px;
margin: 0px 0px 0px 10px;
}

#links ul {
list-style: outside square;
width: auto;
height: auto;
padding: 0px 0px 0px 0px;
margin: 0px 0px 10px 40px;
}

#links ul li {
padding: 0px 0px 0px 0px;
margin: 5px 0px 0px 0px;
}

#otherlinks {
position: relative;
width: auto;
height: auto;
margin: 0px 0px 0px 10px;
padding: 0px;
z-index: 6;
}

#otherlinks  h2 {
font-size: 130%;
padding: 5px 0px 5px 0px;
margin: 0px 0px 0px 10px;
}

#otherlinks ul {
list-style: outside square;
width: auto;
height: auto;
padding: 0px 0px 0px 0px;
margin: 0px 0px 10px 40px;
}

#otherlinks ul li {
padding: 0px 0px 0px 0px;
margin: 5px 0px 0px 0px;
}

#text {
position: absolute;
top: 0px;
right: 0px;
width: 62%;
height: auto;
margin: 0px 10px 0px 0px;
padding: 0px;
color: #069;
background: #fff;
border: 1px solid #a3d1ff;
z-index: 5;
}

#text h3 {
font-size: 130%;
padding: 0px 0px 0px 0px;
margin: 5px 0px 0px 10px;
}

#text p {
color: #444;
background: inherit;
font-size: 110%;
text-align: justify;
padding: 0px 0px 0px 0px;
margin: 10px 10px 0px 10px;
}
</style>

</head>

<body>
<div id="container">

<div id="head">&nbsp;</div>

<div id="main">
<div id="multimedia">
<h1>Multimedia Advanced</h1>

<div id="contentwrap">

<div id="links">
<h2>Links</h2>
<ul>
<li><a href="/" title="Link 1"> Link 1</a></li>
<li><a href="/" title="Link 2"> Link 2</a></li>
<li><a href="/" title="Link 3"> Link 3</a></li>
<li><a href="/" title="Link 4"> Link 4</a></li>

</ul>

<div id="otherlinks">
<h2>Other Links</h2>
<ul>
<li><a href="/" title="Link 1"> Link 1</a></li>
<li><a href="/" title="Link 2"> Link 2</a></li>
<li><a href="/" title="Link 3"> Link 3</a></li>
<li><a href="/" title="Link 4"> Link 4</a></li>

</ul>
</div>

</div>

<div id="text">
<h3>Header 3</h3>
<p>
You should go to the W3C website for more information on how to use CSS.
This layout which you have chosen has some limitations as all CSS based layouts do.
Study those limitations and learn how to use CSS for yourself.
</p>
<p>
This specification defines Cascading Style Sheets, level 2 (CSS2).
CSS2 is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications).
By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance.
</p>
<p>
CSS2 builds on CSS1 (see [CSS1]) and, with very few exceptions, all valid CSS1 style sheets are valid CSS2 style sheets.
CSS2 supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc.
This specification also supports content positioning, downloadable fonts, table layout, features for internationalization, automatic counters and numbering, and some properties related to user interface.
</p>

<p>&nbsp;</p>
</div>

</div>

<div id="contentwrap2">&nbsp;</div>

</div>
</div>

</body>

</html>
Steveo31
Forum Contributor
Posts: 416
Joined: Sun Nov 23, 2003 9:05 pm
Location: San Jose CA

Post by Steveo31 »

Wow no_mem.. awesome. I really apreciate this. I'll be sure to read up on the link you gave. I read on the W3schools, but nothin seemed to work, so thank you.

And Unipus- I'll look into that :)
Post Reply