...

View Full Version : CSS positioning - I am going insane



rswyatt
10-24-2004, 02:35 AM
HELP!

First off - hats off to Opera and FireFox for rendering my page correctly!

Secondly - SHAME ON IE! I hate it! :D

Here is what I'm trying to do (that DOES work in FireFox and Opera):

http://hosting.prowebsitedesigns.net/images/example.jpg


How hard can this be? IE just flat won't render it right.

You can check out http://hosting.prowebsitedesigns.net/index.php and its related stylesheet.

I think I've chewed up the stylesheet beyond repair. So it is probably worthless.

What I'm trying to do is:

Have a centered page
Have a header that is a flash media (I have coded in PHP for detecting text-only browsers - and have the appropriate coding in there for those people! :-)

Have a left "wrapper" so to speak - that holds several images one on top of each other with text over them and input boxes.

Have a right "wrapper" that holds a few more images.

Have a bottom footer that holds some text links and other things.

An example (except I want it all centered in the browser) can be found at http://hosting.prowebsitedesigns.net/images/home_flattened.gif

Help is appreciated in advance!

SpiritualStorms
10-25-2004, 03:14 AM
No offense, paly, but dont you think that pasting the relavent code would go a long way in helping others help you? I mean, i know what you are aiming for, but it still doesnt really help anyone, on how to better assist you, when they dont know what in fact you have done already. I for one, do not feel much inclined to assist you simply because you haven't made the effort to actually past the relavent code.

First off, are you interested in using a TABLE at all? Or do you merely look to organise your individual blocks with CSS alone? Either method is doable, ultimately, but would help someone else help you if they know better as to what your ultimately inclinations are.

I am not sure how others would feel, but i would probably use both Tables, and CSS combined. The table only because it makes it easier to actually control placement of blocks, but CSS for a higher level of formatting refinement.

Paul Jr
10-25-2004, 04:03 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
<title>Example</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
body {
padding: 0;
margin: 0;
font: 85%/125% 'times new roman', sans;
text-align: center;
color: #000;
background-color: #fff;
}
#body {
margin: 0 auto;
width: 775px;
text-align: left;
}
h1 {
padding: 15px 0;
margin: 0;
text-align: center;
background-color: #03fdfc;
}
h2 {
padding: 0;
margin: 0;
}
#right {
padding: 5px;
background-color: #012b2a;
margin-left: 200px;
}
#left {
padding: 5px;
width: 190px;
background-color: #873747;
float: left;
}
#footer {
padding: 7px 0;
margin: 0;
text-align: center;
background-color: #6f6d6e;
clear: left;
}
</style>
</head>
<body>
<div id="body">
<h1>Title</h1>
<div id="left">
<h2>Left Column</h2>
<p>Some text in the left column.</p>
</div>
<div id="right">
<h2>Right Column</h2>
<p>Some text in the right column.</p>
<p>Odio nibh consequat feugait accumsan dignissim iusto ex quis praesent exerci at nulla.
Nostrud consequat facilisis ut vulputate dignissim ut in duis praesent ut delenit duis eum
laoreet vel consectetuer in. In consectetuer elit lobortis hendrerit ad accumsan vulputate
duis in volutpat adipiscing blandit erat te dignissim. At diam dolore suscipit velit in
zzril facilisi eu vel commodo wisi consequat delenit te nulla.</p>
<p>Augue eu nisl aliquam nisl et praesent te dolor illum sit. Diam enim et ut autem delenit
ullamcorper facilisi ut ullamcorper vulputate molestie dignissim ullamcorper accumsan in
lobortis qui enim qui facilisi vel illum erat nostrud.</p>
</div>
<p id="footer">This is the footer.</p>
</div>
</body>
</html>
Something like that sounds near what you want. Notice, however, that since there's more text in the right column than the left, the left column isn't as tall as the right, which means you get some ugly whitespace. If it's important that both columns are of equal height, you might find this ALA article (http://www.alistapart.com/articles/fauxcolumns/) a good read.

rswyatt
10-25-2004, 01:57 PM
Paul,

Thanks for the help! I am getting closer - however - Mozilla and Firefox are not rendering this properly: http://hosting.prowebsitedesigns.net/rich.php



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
<title>Example</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">

<style type="text/css">
<!--
@import url("/style.css");
-->
</style>
</head>
<body>
<div id="container">
<div id="header"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="780" height="254" title="Hosting by ProWebsiteDesigns.net">
<param name="movie" value="/flash/hosting.swf">
<param name="quality" value="high">
<embed src="/flash/hosting.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="254"></embed>
</object>
</div>
<div id="left">
<div id="leftContent">
<div id="login">
<div class="loginTxt">
<form name="login" method="post" action="functions/login.php">
<input type="text" id="username" size="20">
<label for="username">Username</label>
<br />
<input type="password" id="password" size="20">
<label for="password">Password</label>
<div class="button"><a href="javascript:void(document.login.submit())" style="border: 0 0 0 0"><img src="/images/proceed.jpg" border="0" alt="Proceed"></a>
<noscript><input type="submit" value="Proceed"></noscript>
</div>
</form>
</div>
</div>
<img src="/images/specials.jpg" alt="Current Specials">
<p class="specials"> <ul>
<li>Free PHP-based tools<ul>
<li>bbClone Counter</li>
<li>Photo Gallery</li>
<li>gtChat</li>
<li>phpBB</li>
<li>Mambo Content Management System</li>
</ul>
</li>
<br>
<li>Pre-Pay 1 year hosting and receive a 10% discount</li>
<br>
<li>E-Commerce packages receive basic Shopping Cart</li>
</ul>
<br></p>
<div class="chkDomain"><img src="/images/chkdomain.jpg" alt="Check Domain"></div>
</div>
</div>
<div id="right">
<h2>Right Column</h2>
<p>Some text in the right column.</p>
<p>Odio nibh consequat feugait accumsan dignissim iusto ex quis praesent exerci at nulla.
Nostrud consequat facilisis ut vulputate dignissim ut in duis praesent ut delenit duis eum
laoreet vel consectetuer in. In consectetuer elit lobortis hendrerit ad accumsan vulputate
duis in volutpat adipiscing blandit erat te dignissim. At diam dolore suscipit velit in
zzril facilisi eu vel commodo wisi consequat delenit te nulla.</p>
<p>Augue eu nisl aliquam nisl et praesent te dolor illum sit. Diam enim et ut autem delenit
ullamcorper facilisi ut ullamcorper vulputate molestie dignissim ullamcorper accumsan in
lobortis qui enim qui facilisi vel illum erat nostrud.</p>
</div>
<p id="footer">This is the footer.</p>
</div>
</body>
</html>


and here is my stylesheet:



/* Master Layout */

body {
padding: 0;
margin: 0;
font: 100%;
text-align: center;
color: #000;
background-image: url(/images/bg.jpg);
}
#container {
margin: 0 auto;
width: 775px;
text-align: left;
}

#header {
padding: 0;
margin: 0;
text-align: center;
}

#right {
padding: 5px;
background-color: #012b2a;
margin-left: 200px;
}

#left {
padding: 0;
margin: 0;
width: 378px;
background-image: url(/images/whiteDrop.jpg);
float: left;
}

#footer {
padding: 7px 0;
margin: 0;
text-align: center;
background-color: #6f6d6e;
clear: left;
}


/* Body Layout */

#leftContent {
float: left;
margin: 0;
top: -50px;
width: 378px;
height: 600px;
}


#img {
padding: 0;
border: 0;
}

#login {
position: relative;
top: 0px;
height: 161px;
background-image:url(/images/home_login_lft.jpg)
}

.loginTxt {
margin-top: 60px;
maring-left: 30px;
}

.chkDomain {
background-image:url(/images/grayDrop.jpg);
}

/* Text Styles */
.body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-style: normal;
color: #000000;

}

p {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
display: block
}

.specials {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
background-image: url(/images/whiteDrop.jpg)
}

.button { background: transparent; font-size:1.1em; color:#666; cursor:pointer; font-family:arial; padding-top: 5px;
}
.buttonH { background:#ccc; background-image:url(images/proceed.jpg); border:solid 1px #666; border-right:solid 1px #000; border-bottom:solid 1px #000; font-size:1.1em; color:#666; cursor:pointer; font-family:arial; padding:2px; margin-top:20px; display:none; }

.H1_hidden {
font-family:Arial, Helvetica, sans-serif;
font-size: 2.0em;
display: none;
}

.navHidden {
font-family:Arial, Helvetica, sans-serif;
font-size: 1.0em;
}

H1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.8em;
font-style: normal;
font-weight: bolder;
color: #000000;
}


.skiplink {display:none}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum