SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    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

  2. #2
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have no clue what you are trying to do. Does this get you closer?
    Code XHTML1.0Strict:
    <!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">
    body {
    	background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
    	height: auto;
    	width: 998px;
    	margin-right: auto;
    	margin-left: auto;
    }
    h1 {
    	color:#fff;
    	margin:0;
    	padding:0
    }
    #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="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>
    </body>
    </html>

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Are you sure your second code isn't centering as i copied it and viewed it in Firefox and IE and it centered fine both ways.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    Are you sure your second code isn't centering as i copied it and viewed it in Firefox and IE and it centered fine both ways.
    Although it's centred it doesn't really work as it slides off the screen at small screen sizes and is unusable. The OP should have used the correct method from the article and not the old method that it was replacing

    Here's the revised code (although I only added the centring routine and didn't tidy up the divitus):

    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;
        min-width:998px;
        min-height:600px;
    }
    body {
        background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
        text-align:center;
    }
    h1 {
        color:#fff;
        margin:0;
        padding:0
    }
    #wrapper {
        height: 600px;
        width: 998px;
        margin: auto;
        overflow:auto;
        clear:both;
        background:red;
        text-align:left;
    }
    #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;
    }
    #vertical {
        float:left;
        height:50%;
        margin-top:-300px;/* half vertical height*/
        width:100%;
    }
    </style>
    </head>
    <body>
    <div id="vertical"></div>
    <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>
    </body>
    </html>
    However a fixed height layout is not really suitable for most sites because that means that all the inner content will need to be in scrolling divs which is a bit of a pain and not very user friendly unless their is limited content as in that flash site.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow thanks Paul!!!!!!!!!!!!!!!!!!!!!!!!!!!

    going to be able to sleep easy tonight

    that was it perfect it worked in every browser I tried

    so stoked

    you are the man

    thank you so much!

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul what did you mean "divitus"

    is there a way I could of coded with less divs ?

    or can you give me feedback on how to tidy up?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sorion808 View Post
    Hey Paul what did you mean "divitus"

    is there a way I could of coded with less divs ?

    or can you give me feedback on how to tidy up?
    I meant things like this:

    Code:
    <div id="logo">logo </div>     <div id="nav">Navagation buttons go here 998 x 31</div>
    It should probably be:

    Code:
    <h1 id="logo">logo </h1>
    <ul id="nav">
        <li><a href="#">Navigation buttons go here 998 x 31</a></li>
    </ul>

    However, I guess you will be changing those sorts of things anyway as you go.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey stuck again

    trying to add a vertical image scroller to that code but its cutting off the footer

    I've been at it for a couple of nights on my own starting from scratch I cant
    figure it out

    can you take a look at the code again any feedback would be greatly appreciated
    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;
        min-width:1000px;
        min-height:600px;
    }
    
    body {
        
       
        text-align:center;
    }
    
    h1 {
        
        color:#fff;
        margin:0;
        padding:0
    }
    
    #wrapper {
        
        height: 587px;
        width: 998px;
        margin: auto;
        overflow:auto;
        clear:both;
        background:white;
        text-align:left;
    }
    
    #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: 382px;
        width: 278px;
    }
    
    #topslot {
        
        background-color: #CC0;
        padding: 0px;
        float: left;
        height: 191px;
        width: 278px;
    }
    
    #bottomslot {
        
        background-color: #CF9;
        padding: 0px;
        float: left;
        height: 191px;
        width: 278px;
        
    }
        
    #chat {
        
        float:left;
        padding:0;
        height:382px;
        width:556px;
        
    }
    
    #right_content {
        
        background-color: #663;
        padding: 0px;
        float: left;
        height: 382px;
        width: 164px;
    
    }
    
    #scrolling_text {
        background-color: #009;
        padding: 0px;
        height: 29px;
        width: 998px;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
    }
    
    #copyright {
        background-color: #930;
        padding: 0px;
        height: 29px;
        width: 998px;
        text-align: center;
        margin-right: auto;
        margin-left: auto;    
    }
        
        #marqueecontainer {
        
        position: relative;
        width: 164px; /*marquee width */
        height: 382px; /*marquee height */
        background-color: transparent;
        overflow: hidden;
    
    }
    
    #vertical {
        float:left;
        height:50%;
        margin-top:-300px;/* half vertical height*/
        width:100%;
        
    }
    
    </style>
    
    <script type="text/javascript">
    
    
    
    
    </script>
    
    </head>
    <body>
    <div id="vertical"></div>
    <div id="wrapper">
        <div id="logo"></div>
        <div id="nav">Navagation buttons go here 998 x 31</div>
            <div id="left_column">
              <div id="topslot"></div>
              <div id="bottomslot"></div>
            </div> <!--close left column div-->
      
        <div id="chat"><iframe width="556px" scrolling="no" height="382px" frameborder="0" style="border: 0px none black;" src="http://www.ustream.tv/socialstream/8414407"></iframe></div>
        <div id="right_content"><div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
    <div id="vmarquee" style="position: absolute; width: 98%;">
    
    <a href="schedule.html">
    <img src="http://www.sitepoint.com/forums/images/images/scollpic1.gif" align="center" height="99" width="164">
    </a>
    <a href="schedule.html">
    <img src="http://www.sitepoint.com/forums/images/images/scollpic2.gif" align="center" height="99" width="164" />
    </a>
    
     
    
    
    </div><!--end right content 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> <!--end wrapper div-->
        
    
    </body>
    </html>
    Last edited by Paul O'B; Jun 28, 2011 at 12:13. Reason: script removed

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    update = I sort of figured it out something tried a million things
    now I got it working footer is showing and site staying together.

    still having a problem with opera though I get scroll bars

    Going to paste up my new code, can someone take a look and tell me how to get rid of scrolls bars in opera??

    every other browser is ok (no scroll bars) except opera.

    help?

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
    
    <title>Horizontal and vertical centerl</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style type="text/css">
    
    /*<![CDATA[*/
    
    
    
    html, body {
    
            
    
        height:100%;
    
        margin:0;
    
        padding:0;
    
        min-width:997px;
    
        min-height:587px;
    
    }
    
    
    
    body {
    
            
    
       
    
        text-align:center;
    
    }
    
    
    
    h1 {
    
        color:#3CF;
    
        margin:0;
    
        padding:0
    
    }
    
    
    
    #wrapper {
    
        height: 587px;
    
        width: 997px;
    
        margin: auto;
    
        overflow:auto;
    
        clear:both;
    
        text-align:left;
    
    }
    
    #scrolling_text {
    
        background-color: #096;
    
        padding: 0px;
    
        float: left;
    
        height: 29px;
    
        width: 997px;
    
    }
    
    #copyright {
    
        background-color: #CC0;
    
        padding: 0px;
    
        float: left;
    
        height: 29px;
    
        width: 997px;
    
    }
    
    
    
    #logo {
    
            
    
        padding: 0px;
    
        height: 114px;
    
        width: 997px;
    
        background-color: #066;
    
        float: left;
    
        margin-right: auto;
    
        margin-left: auto;
    
    }
    
    
    
    #nav {
    
            
    
        padding: 0px;
    
        background-color:#9C3 height: 31px;
    
        width: 997px;
    
        float: left;
    
        background-color: #0C9;
    
        margin-right: auto;
    
        margin-left: auto;
    
    }
    
    
    
    #left_column {
    
            
    
        background-color: #C6F;
    
        float:left;
    
        padding: 0px;
    
        height: 384px;
    
        width: 278px;
    
    }
    
    
    
    #topslot {
    
            
    
        background-color: #CC0;
    
        padding: 0px;
    
        float: left;
    
        height: 192px;
    
        width: 277px;
    
    }
    
    
    
    #bottomslot {
    
            
    
        background-color: #CF9;
    
        padding: 0px;
    
        float: left;
    
        height: 192px;
    
        width: 277px;
    
            
    
    }
    
            
    
    #chat {
    
        
    
        float:left;
    
        padding:0;
    
        height:384px;
    
        width:550px;
    
            
    
    
    
    }
    
            #marqueecontainer {
    
                    
    
            padding: 0px;
    
            position: relative;
    
            float:left;
    
            width: 169px; /*marquee width */
    
            height: 384px; /*marquee height */
    
            background-color: black;
    
            overflow: hidden;
    
    
    
    
    
    
    
    
    
    }
    
    
    
    #vertical {
    
        float:left;
    
        height:50%;
    
        margin-top:-300px;/* half vertical height*/
    
        width:100%;
    
            
    
    }
    
    
    
    /*]]>*/
    
    </style>
    
    
    
    <script type="text/javascript">
    
    
    
    </script>
    
    <style type="text/css">
    
    /*<![CDATA[*/
    
     div.c2 {position: absolute; width: 98%;}
    
     iframe.c1 {border: 0px none black;}
    
    /*]]>*/
    
    </style>
    
    <link rel="stylesheet" href="css/ajximagerotator.css" type="text/css" />
    
    <script src="css/ajximagerotator.js" type="text/javascript"></script>
    
    </head>
    
    <body>
    
    <div id="vertical"></div>
    
    <div id="wrapper">
    
    <div id="logo"></div>
    
    <div id="nav">Navagation buttons go here 998 x 31</div>
    
    <div id="left_column">
    
    <div id="topslot"></div>
    
    <div id="bottomslot"><div class="AJXIRUXVNfPD"><!-- AJXFILE:css/ajximagerotator.css -->
    
    <div class="AJXIRUXVNfPDpics">
    
     <ul>
    
      <li><a href="#"><img src="http://www.sitepoint.com/forums/images/news1.gif" alt="news1.gif" /></a></li>
    
      <li><a href="#"><img src="http://www.sitepoint.com/forums/images/news2.gif" alt="news2.gif" /></a></li>
    
     </ul>
    
    </div>
    
    </div></div>
    
    </div>
    
    <!--close left column div-->
    
    <div id="chat"><iframe width="550px" scrolling="no" height="384px" frameborder="0" class="c1" src="http://www.ustream.tv/socialstream/8414407"></iframe></div>
    
    <div id="marqueecontainer" onmouseover="copyspeed=pausespeed" onmouseout="copyspeed=marqueespeed">
    
      <div id="vmarquee" class="c2"><a href="schedule.html"><img src="http://www.sitepoint.com/forums/images/images/scollpic1.gif" align="center" height="99" width="164" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a> <a href="schedule.html"><img src="http://www.sitepoint.com/forums/images/images/scollpic2.gif" align="center" height="99" width="169" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></div>
    
    </div>
    
    <div id="scrolling_text">Content for  id "scrolling_text" Goes Here</div>
    
    <div id="copyright">Content for  id "copyright" Goes Here</div>
    
    <!--end wrapper div--></div>
    
    </body>
    
    </html>
    Last edited by Paul O'B; Jun 28, 2011 at 12:15. Reason: script removed

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by sorion808 View Post
    still having a problem with opera though I get scroll bars
    Take a look at the JS:

    Code:
    if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
    
    cross_marquee.style.height=marqueeheight+"px"
    
    cross_marquee.style.overflow="scroll"
    You could remove that.

  12. #12
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that was it thanks Ralph!!

    for some stupid reason I was not looking in that area of the code

    I got a question coming up about some other things

    thanks for the help you guys are awesome!

  13. #13
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm I thought it worked for a bit might of been mistaken

    try this code in opera it works in everything but opera???

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>

    <style type="text/css">

    #marqueecontainer{
    position: relative;
    width: 200px; /*marquee width */
    height: 100px; /*marquee height */
    background-color: white;
    overflow: hidden;

    }

    #wrapper {
    background-color: #C96;
    padding: 0px;
    height: 600px;
    width: 300px;
    }
    </style>

    <script type="text/javascript">

    /***********************************************
    * Cross browser Marquee II- Dynamic Drive (Dynamic Drive DHTML(dynamic html) & JavaScript code library)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive DHTML(dynamic html) & JavaScript code library for this script and 100s more.
    ***********************************************/

    var delayb4scroll=0000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
    var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
    var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

    ////NO NEED TO EDIT BELOW THIS LINE////////////

    var copyspeed=marqueespeed
    var pausespeed=(pauseit==0)? copyspeed: 0
    var actualheight=''

    function scrollmarquee(){
    if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) //if scroller hasn't reached the end of its height
    cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
    else //else, reset to original position
    cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
    }

    function initializemarquee(){
    cross_marquee=document.getElementById("vmarquee")
    cross_marquee.style.top=0
    marqueeheight=document.getElementById("marqueecontainer").offsetHeight
    actualheight=cross_marquee.offsetHeight //height of marquee content (much of which is hidden from view)
    if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
    cross_marquee.style.height=marqueeheight+"px"

    return
    }
    setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
    }

    if (window.addEventListener)
    window.addEventListener("load", initializemarquee, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initializemarquee)
    else if (document.getElementById)
    window.onload=initializemarquee


    </script>






    <body>
    <div id="wrapper"><div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
    <div id="vmarquee" style="position: absolute; width: 98%;">

    <!--YOUR SCROLL CONTENT HERE-->

    <h4>Your scroller contents</h4>
    <h4>Your scroller contents</h4>
    <h4>Your scroller contents</h4>
    <h4>Your scroller contents</h4>
    <h4>Your scroller contents</h4>
    <h4>Your scroller contents</h4>

    <!--YOUR SCROLL CONTENT HERE-->

    </div>
    </div>

    </div><!--wrapper end div-->
    </body>
    </html>

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is really a script question now and should be in the JS forum

    It looks like the routine detects opera and then exits.

    Code:
    if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
    cross_marquee.style.height=marqueeheight+"px"
    
    return
    }
    setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
    }
    If you remove the opera check then it works in opera 11 ok.

    Code:
    if (navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
    cross_marquee.style.height=marqueeheight+"px"
    
    return
    }
    setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
    }
    I assume it was in there for an older bug in opera but scripting isn't my thing.

  15. #15
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    update 6 months later lol (took a break now I'm back at it)

    the above code is working for the standard computers and is vertically and horizontally centered (thank you very much)

    but

    A new issue has arisen while testing the code on Iphones....

    When I test out the code on a iphone safari browser, It's cutting off the sides of the website a little
    then when I flip to landscape orientation it cuts off a little more.
    I can fix the issue by zooming out with my fingers to re-size and that works but I'm
    wondering how sites like www.infowars.com are perfectly centered in either orientation
    on iphones with no need to zoom out in either orientation.

    I made the wrapper smaller tried it down to 995px to match infowars.com width but its still cutting it off.

    I'm pretty sure 995px width can work on a iphone and look perfect as I looked perfect at infowars.com. I did a screen
    print and measured their sites center content at 995px width.
    I have seen several other sites with similar dimensions working in either orientation.

    The issue really presents it's self when you change orientations back and forth, if you compare the results to infowars.com
    you will notice infowars stays perfect no matter how many times you flip orientations back and forth.

    can someone test this code out on a phone and tell me if they see the issue and how to fix it????

    any help is always greatly appreciated!

    here is the latest code

    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;
        min-width:998px;
        min-height:600px;
    }
    body {
        background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
        text-align:center;
    }
    h1 {
        color:#fff;
        margin:0;
        padding:0
    }
    #wrapper {
        height: 600px;
        width: 998px;
        margin: auto;
        overflow:auto;
        clear:both;
        background:red;
        text-align:left;
    }
    #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;
    }
    #vertical {
        float:left;
        height:50%;
        margin-top:-300px;/* half vertical height*/
        width:100%;
    }
    </style>
    </head>
    <body>
    <div id="vertical"></div>
    <div id="wrapper">
        <div id="logo">1.....................................................................................................................................................................................................................................................2</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>
    </body>
    </html>
    Last edited by Paul O'B; Dec 14, 2011 at 05:46. Reason: code tags added

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't know what infowars are doing as there are too many script to look through but the magic number for the iphone is 980px.

    If you change all your 998px to 980px and then reduce the middle column by 18px it should fit exactly on the iphone. The iphone assumes sites are going to be 980px wide and fits them to that.

    Of course if you want support mobile then you should be using a responsive design as you can't read sites that small on an iphone without zooming anyway.

  17. #17
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nice Paul that worked perfectly!

    thanks so much!!!!!!!!!!

  18. #18
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    update years later lol. Paul this code has served me and taught me a fe tricks so thank you much.

    I'm wondering if there is a way to bypass this code only for iphones as the vertical centering looks great on normal computer screens but doesn't look good on iphones - the top margin is too much.

    any ideas?

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Paul mentioned "responsive design" in post #16, which is where you can go with this. Use @media rules to target various screen sizes, so that you can offer up different styles for different scenarios.

  20. #20
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Took me a bit to just wrap head around non responsive old school design lol

    curious with the exact code above that paul helped with - if there is an easy addon code

    such as

    @media ???? top-margin:300px;

    that will simply remove the 300px top margin only for iphones and quick code that wouldn't require me to get all deep on responsive design?

    any advise would be greatly appreciated

  21. #21
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Where is that top margin?

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi, Based on the code in post 15 you would add this;

    Code:
    /* set the width you want but its probably best to collect tablet sizes along the way as well*/ 
    @media only screen and (max-width: 768px)  {
    	#vertical{display:none}
    }
    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;
        min-width:998px;
        min-height:600px;
    }
    body {
        background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center;
        text-align:center;
    }
    h1 {
        color:#fff;
        margin:0;
        padding:0
    }
    #wrapper {
        height: 600px;
        width: 998px;
        margin: auto;
        overflow:auto;
        clear:both;
        background:red;
        text-align:left;
    }
    #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;
    }
    #vertical {
        float:left;
        height:50%;
        margin-top:-300px;/* half vertical height*/
        width:100%;
    }
    @media only screen and (max-width: 768px)  {
    	#vertical{display:none}
    }
    
    </style>
    </head>
    <body>
    <div id="vertical"></div>
    <div id="wrapper">
        <div id="logo">1.....................................................................................................................................................................................................................................................2</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>
    </body>
    </html>


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
  •