SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    center content drops down

    Hi all,
    I am having a couple of problems with the following code.
    First one (hopefully easy to fix and the "I ought to know how to do this....") is in IE, I get the page content to center with a black background behind it on either side, but in FF the page content aligns to the left-hand side.
    The bigger problem is where and how the left, center and right divs display on the page. I have two background images that I want to display, one that's in the content div background and takes up about 300px vertically upon which all the content and navigation occur. The second image that I like to have as a background is the bar running down the left-hand side. That one works OK.
    There are problems with having used <p>&nbsp;</p> to add vertical space between the header and the logo. If I do not do that, however, part of the larger first background image disappears from the bottom up. There is "space" that surrounds the div that is opaque if the extra paragraphs are not applied.
    thanks for any help.

    HTML Code:
    <body>
    	<div id="wrapper"><img src="images/logo_header.jpg" />
    
    		<div id="page-title">
    		
    		<h1 class="page-title_text">Page title</h1></div><!-- end page-title div -->
    			<ul id="home-contact_navigation">
    				<li>Home</li>
    				<li>Contact</li>
    			</ul>
    			<!--<div id="header_inputs">header inputs</div>--><!-- end header_inputs div -->
    		
    		<div id="clear-header"></div><!-- end clear-header div --> 
    		<div id="content">
    				<p>&nbsp;</p>
    				<div id="left-nav">
    					<ul>
    						<li>Navigation 01</li>
    						<li>Navigation 01</li>
    						<li>Navigation 01</li>
    					</ul>
    				</div>
    				<p>&nbsp;</p>						
    				<div id="right-nav">Lorem ipsum dolor sit amet, </div>
    				<div id="center">
    					<p>123456789</p>
    				</div><!-- end center div -->
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    		</div> <!-- end content div -->
    		
    		<div id="clear-footer"></div><!-- end clear-body div-->
    	
    		<div id="footer">
    			<p>something here footer</p>
    			<div id="footer_info">
    				<p>address et al footer_info</p>		
    			</div><!-- end footer_info div -->
    		</div>
    		<!-- end footer div -->
    </div><!-- end wrapper div -->
    </body>


    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background-color: #000000;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size: .8em;
    	margin: 0 auto;
    	text-align: center;
    }
    
    #wrapper {
    	position: relative;
    	height:100%;
    	min-height:100%;
    	width: 758px;
    	background-color: #ffffff;
    	background-image:url(../images/rbb_stripe.jpg);
    	background-repeat:repeat-y;
    }
    
    #page-title {
    	margin-top: -56px;
    	padding-top: -56px;
    }
    
    
    .page-title_text {
    	text-align: right;
    	font-size: 1.9em;
    	font-weight: bold;
    	font-family: Arial, Helvetica, sans-serif;
    	margin-bottom: -42px;
    	padding-bottom: 42px;
    }
    
    #left-nav {
    	position: relative;
    	width: 170px;
    	margin-left: 11px;
    	margin-top: 20px;
    	float: left;
    	padding-bottom: 40px;
    	background-color:#FFFFCC
    }
    
    #right-nav {
    	position: relative;
    	width: 156px;
    	margin-right: 0px;
    	margin-top : 20px;  /*to clear header*/
    	padding-bottom: 40px;
    	float: right;
    	border-left: solid #000000 2px;
    	text-align: left;
    
    }
    
    #center {
    	positon: relative;
    	width: 400px;
    	float: left;
    	margin-top: 20px;
    	padding-bottom: 40px;
    	text-align: left;
    	background-color: #99FFFF;
    }
    
    #content {
    	background:url(../images/body_background.jpg);
    	background-repeat: no-repeat;
    }
    
    #clear-header {
    	clear: both;
    }
    
    #clear-footer {
    	clear: both;
    }
    
    #footer {
    	position: relative;
    	height: 40px;
    	margin: 0 auto;
    	text-align: center;	
    	background-image:url(../images/rbb_stripe_nowhite.jpg);
    	background-repeat:repeat-y;
    	background-color: #db93a0;
    	border-right: solid #db93a0 2px;
    }
    
    #footer_info {
    	margin: 0 auto;
    	text-align: center;
    	background-color: red;
    	width: 400px;
    }

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you got a doctype on your page?

  3. #3
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    yes, I should've put it in :

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Realfast</title>
    <link href="styles/text.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="styles/print.css" rel="stylesheet" type="text/css" media="print" />
    <link rel="shortcut icon" href="images/favicon-small.ico" type="image/ico" />
    
    </head>
    
    <body>
    thanks

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adding margin: 0 auto to #wrapper will solve your first problem. I'm afraid I don't understand the rest of the problems you've described.

  5. #5
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    thank you. that worked perfectly.

    This link:http://www.realfast.com/images/div-b...nd-problem.jpg
    will hopefully explain what I mean better.

    Here's the code with many of the <p>&nbsp;</p> commented out in the HTML. When I leave the commented out <p>&nbsp;</p> active the pattern shows up but the divs do not line up one beside the other.

    As I said hopefully this helps. If not please let me know.

    thanks very much
    I really need the help


    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background-color: #000000;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size: .8em;
    	margin: 0 auto;
    	text-align: center;
    }
    
    #wrapper {
    	position: relative;
    	height:100%;
    	min-height:100%;
    	width: 758px;
    	background-color: #ffffff;
    	background-image:url(../images/rbb_stripe.jpg);
    	background-repeat:repeat-y;
    	margin: 0 auto;
    }
    
    #page-title {
    	margin-top: -56px;
    	padding-top: -56px;
    }
    
    ul #home-contact_navigation {
    	background-color: lilac;
    	margin:0 1em 3em 450px;
    	text-align: right;
    }
    
    #home-contact_navigation li {
    	background-color: lilac;
    	display: inline;
    	list-style: none;
    	margin-right: 1em;
    }
    
    .page-title_text {
    	text-align: right;
    	font-size: 1.9em;
    	font-weight: bold;
    	font-family: Arial, Helvetica, sans-serif;
    	margin-bottom: -42px;
    	padding-bottom: 42px;
    }
    
    #left-nav {
    	position: relative;
    	width: 170px;
    	margin-left: 11px;
    	margin-top: 20px;
    	float: left;
    	padding-bottom: 40px;
    	background-color:#FFFFCC
    }
    
    #right-nav {
    	position: relative;
    	width: 156px;
    	margin-right: 0px;
    	margin-top : 20px;  /*to clear header*/
    	padding-bottom: 40px;
    	float: right;
    	border-left: solid #000000 2px;
    	text-align: left;
    
    }
    
    #center {
    	positon: relative;
    	width: 400px;
    	float: left;
    	margin-top: 20px;
    	padding-bottom: 40px;
    	text-align: left;
    	background-color: #99FFFF;
    }
    
    #content {
    	background:url(../images/body_background.jpg);
    	background-repeat: no-repeat;
    }
    
    #clear-header {
    	clear: both;
    }
    HTML 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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Realfast</title>
    <link href="styles/text.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="styles/print.css" rel="stylesheet" type="text/css" media="print" />
    <link rel="shortcut icon" href="images/favicon-small.ico" type="image/ico" />
    
    </head>
    
    <body>
    	<div id="wrapper"><img src="images/logo_header.jpg" />
    		<div id="page-title">
    		
    		<h1 class="page-title_text">Page title</h1></div><!-- end page-title div -->
    			<ul id="home-contact_navigation">
    				<li>Home</li>
    				<li>Contact</li>
    			</ul>
    			<!--<div id="header_inputs">header inputs</div>--><!-- end header_inputs div -->
    		
    		<div id="clear-header"></div><!-- end clear-header div --> 
    		<div id="content">
    				<!--<p>&nbsp;</p>-->
    				<div id="left-nav">
    					<ul>
    						<li>Navigation 01</li>
    						<li>Navigation 01</li>
    						<li>Navigation 01</li>
    					</ul>
    				</div>
    				<!--<p>&nbsp;</p>-->						
    				<div id="right-nav">Lorem ipsum dolor sit amet, </div>
    				<div id="center">
    					<p>123456789</p>
    				</div><!-- end center div -->
    				<!--<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>
    				<p>&nbsp;</p>-->
    		</div> <!-- end content div -->
    		
    		<div id="clear-footer"></div><!-- end clear-body div-->
    	
    		<div id="footer">
    			<p>something here footer</p>
    			<div id="footer_info">
    				<p>address et al footer_info</p>		
    			</div><!-- end footer_info div -->
    		</div>
    		<!-- end footer div -->
    </div><!-- end wrapper div -->
    </body>
    </html>

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would've been much more useful if you'd provided a link to the actual page rather than just an image of it.

  7. #7
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here it is. I thought an image might do a better job.
    thanks for your patience
    http://www.realfast.com/websample/index.html

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to clear your floats. Add overflow: hidden to #content.

  9. #9
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    awesome,
    many many thanks!

  10. #10
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again,
    Feeling kind of dense...I guess I'm not getting how the overflow works (I'm still reading up on it), when to use and not use. Or maybe it's not applicable to this continuing/new problem.
    Here's the website with the overflow: hidden; added and some other changes to it. Those wereadding this:
    <div id="upper-nav_inputs">header inputs
    <p>navigation content</p>
    <p>navigation content</p>
    </div>

    and adding this:
    #upper-nav_inputs {

    }
    and various code to it, but with no luck.

    I realized with the first rendition that the words before the logo did not show up. the content section was too high.
    http://realfast.com/websample/index.html
    That and I would like to add some horizontal top navigation, dropdowns where the blank space is now.
    Please, more help.
    thank you so much

  11. #11
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you want the navigation content all on one line? (You should be using an unordered list for your nav.)

  12. #12
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,
    yes, all on one line and I do plan on using the <ul> for the actual nav part of that area.

    I do have an illustration: http://realfast.com/websample/images/screenshot.jpg, since the coding is still in progress, of what I'm trying to do. The top nav will consist of the login/password inputs, the actual navigation which will be dropdowns, and the google search input. And the body of the page will have the left hand navigation, the content area, and the right side-bar. I'm thinking that this is possible...yes?
    thank you

  13. #13
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like your login should be part of your left column, the dropdowns part of the middle and the search part of the right.


Bookmarks

Posting Permissions

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