SitePoint Sponsor

User Tag List

Results 1 to 22 of 22

Thread: Can someone please help me center this website (code included)

Threaded View

  1. Jun 15, 2011 21:33 #1
    sorion808
    sorion808 is offline
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can someone please help me center this website (code included)

    Hello everybody

    I'm new to html and CSS.

    I'm building a personal site all based on DIV's and CSS

    Right now I'm stuck with a major issue (for me at least) and I can't move forward until I address this issue.

    The issue is I need to center my site vertically and horizontally,
    so it is always in dead center of page, no matter what the viewer does
    (including full screen browser mode).

    I have found much information on this subject and have tried at least 6 different ways, but I have not figured it out yet and it is driving me crazy
    (been at it for 2 weeks).

    Help!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    Here is a site for reference :: BIG ISLAND LIVE ::
    I would be sooooooooo very grateful if someone could look at my code and fix
    and hopefully I'll be able to reverse engineer your code and understand lol

    now I did get close one time and I'll paste the code
    up after this 1st code to show my best attempt, I believe thanks goes to Paul ????? for the code and thread that pointed me in a decent direction.
    here is the thread they I got the vertically and horizontal aligning code from

    Easy Vertical Centering with CSS


    ok here is my 1st code


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
	<title></title>
	
	<style type="text/css">
	
	
	#wrapper {
	padding: 0px;
	height: 600px;
	width: 998px;
	float: left;
	margin-right: auto;
	margin-left: auto;
}

		
		#logo {
	padding: 0px;
	height: 114px;
	width: 998px;
	background-color: #066;
	float: left;
	margin-right: auto;
	margin-left: auto;
}
    #nav {
	padding: 0px;
	background-color:#9C3
	height: 31px;
	width: 998px;
	float: left;
	background-color: #0C9;
	margin-right: auto;
	margin-left: auto;
}
    #left_column {
	background-color: #C6F;
	float:left;
	padding: 0px;
	height: 383px;
	width: 278px;
}
#right_content {
	background-color: #663;
	padding: 0px;
	float: left;
	height: 383px;
	width: 164px;
}
    #chat {
    background:#0C3;
	float:left;
	padding:0;
	height:383px;
	width:556px;
	
}
	
    #topslot {
	background-color: #CC0;
	padding: 0px;
	float: left;
	height: 191px;
	width: 278px;
}
    #bottomslot {
	background-color: #CF9;
	padding: 0px;
	float: left;
	height: 191px;
	width: 278px;
}
    #scrolling_text {
	background-color: #666;
	padding: 0px;
	float: left;
	height: 29px;
	width: 998px;
	text-align: center;
    margin-right: auto;
	margin-left: auto;
}
    #copyright {
	background-color: #930;
	padding: 0px;
	float: left;
	height: 29px;
	width: 998px;
	text-align: center;
    margin-right: auto;
	margin-left: auto;
}
    </style>

</head>

<body



          
  <div id="wrapper">
  <div id="logo">logo </div>

          <div id="nav">Navagation buttons go here 998 x 31</div>
          <div id="left_column">
          
            <div id="topslot">Content for  top slot 278 x 191</div>
            <div id="bottomslot">Content for  bottom slot 278 x 191</div>
          </div>
          
          <div id="chat">center content 556 x 383</div>
          <div id="right_content">right content  164 x 383       </div>
          <div id="scrolling_text">.....Content for goes here...... 998 x 29</div>
          <div id="copyright">Copyright goes here  998 x 29</div>
          </div>
          Content for  id "wrapper" Goes Here</div>
	

</body>
</html>
    ok heres the 2d code where I got close I think???


    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>
<title>Horizontal and vertical centerl</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body{
	height:100%;
	margin:0;
	padding:0;
}
body{
	background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
	text-align:center;
	min-width:626px;
	min-height:400px;
}
#vert-hoz{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-198px;/* half elements height*/
	margin-left:-313px;/* half elements width*/
	width:626px;
	height:400px;
	border:1px solid silver;
	background:#666;
	overflow:auto;/* allow content to scroll inside element */
	text-align:left;
}
h1 {color:#fff;margin:0;padding:0}

	<style type="text/css">
	
	
	#wrapper {
	padding: 0px;
	height: 600px;
	width: 998px;
	float: left;
	margin-right: auto;
	margin-left: auto;
}

	#logo {
	padding: 0px;
	height: 114px;
	width: 998px;
	background-color: #066;
	float: left;
	margin-right: auto;
	margin-left: auto;
}
    #nav {
	padding: 0px;
	background-color:#9C3
	height: 31px;
	width: 998px;
	float: left;
	background-color: #0C9;
	margin-right: auto;
	margin-left: auto;
}
    #left_column {
	background-color: #C6F;
	float:left;
	padding: 0px;
	height: 383px;
	width: 278px;
}
#right_content {
	background-color: #663;
	padding: 0px;
	float: left;
	height: 383px;
	width: 164px;
}
    #chat {
    background:#0C3;
	float:left;
	padding:0;
	height:383px;
	width:556px;
	
}
	
    #topslot {
	background-color: #CC0;
	padding: 0px;
	float: left;
	height: 191px;
	width: 278px;
}
    #bottomslot {
	background-color: #CF9;
	padding: 0px;
	float: left;
	height: 191px;
	width: 278px;
}
    #scrolling_text {
	background-color: #666;
	padding: 0px;
	float: left;
	height: 29px;
	width: 998px;
	text-align: center;
    margin-right: auto;
	margin-left: auto;
}
    #copyright {
	background-color: #930;
	padding: 0px;
	float: left;
	height: 29px;
	width: 998px;
	text-align: center;
    margin-right: auto;
	margin-left: auto;
}
    


</style>
</head>
<body>
<div id="vert-hoz">
	
          
  <div id="wrapper">
  <div id="logo">logo </div>

          <div id="nav">Navagation buttons go here 998 x 31</div>
          <div id="left_column">
          
            <div id="topslot">Content for  top slot 278 x 191</div>
            <div id="bottomslot">Content for  bottom slot 278 x 191</div>
          </div>
          
          <div id="chat">center content 556 x 383</div>
          <div id="right_content">right content  164 x 383       </div>
          <div id="scrolling_text">.....Content for  scrolling text goes here...... 998 x 29</div>
          <div id="copyright">Copyright goes here  998 x 29</div>
          </div>
          Content for  id "wrapper" Goes Here</div>
          
          </div>
</div>
</body>
</html>
    can anyone help please?????????????????????????????
    Last edited by ralph.m; Jun 16, 2011 at 00:51. Reason: added code tags
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules