Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    Des Moines, Iowa
    Posts
    219
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS positioning - I am going insane

    HELP!

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

    Secondly - SHAME ON IE! I hate it!

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




    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..._flattened.gif

    Help is appreciated in advance!
    Rich S. Wyatt
    D3 Web Creations

  • #2
    Regular Coder
    Join Date
    Dec 2003
    Location
    America
    Posts
    544
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by SpiritualStorms; 10-25-2004 at 02:18 AM.
    LovesWar

  • #3
    Regular Coder
    Join Date
    Dec 2003
    Location
    USA
    Posts
    230
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <!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 a good read.

  • #4
    Regular Coder
    Join Date
    Jan 2004
    Location
    Des Moines, Iowa
    Posts
    219
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Paul,

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

    Code:
    <!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:

    Code:
    /* 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}
    Rich S. Wyatt
    D3 Web Creations


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •