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 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    78
    Thanks
    1
    Thanked 0 Times in 0 Posts

    website content moves when page size is different

    Everytime I adjust my browser size to test the resolution on varies sizes my website content overlaps on another how can I fix my css so page content stays in the same position not matter what size the browser is thanks.

    Code:
    body {
    	border-left:solid #000000;
    
    	border-left-width: 200px;
    	border-right:solid #000000;
    
    	border-right-width: 200px;
    	margin-left: auto;
    	margin-right: auto;
    	width: auto;
    	height: 100%;
    }
    
    #container {
    	margin-left: auto;
    	margin-right: auto;
    	width: auto;
    }
    
    #header {
    	top: 0px;
    	left: 0px;
    	width: 100%;
    	position: relative;
    }
    
    .banner {
    	background-image: url(../images/images/title2.png);
    	background-repeat: no-repeat;
    	width: 558px; height: 111px;
    	top: 21px;
    	left: 220px;
    }
    
    .logo {
    	background-image: url(../images/logo/logo2.jpg);
    	background-repeat: no-repeat;
    	width: 212px;
    	height: 298px;
    	top: 0px;
    	left: 0x;
    }

  • #2
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Do you have a link to the site so we can see what its doing.

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    yeah lets see the code for the page. Im guessing ti has somethign to do with that position relative.

    Also whats with all the styling on the body tag? width auto height 100? it already does that , its the body of the document....

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ok, I looked at your site with the link you messaged me, and well. Youve got a lot to learn, but that's ok, don't we all .

    - on a side note, do you really need the time on there?

    All right this is going to look a little different than what you have, but I think youll like it:

    I had to use absolute urls to test with, so I did a replaceall to post here, so you will need to fix those

    oh one more thing - Id also suggest make the background of the logo image all white, and remove the relative positioning from .logo. the black edges on the left hand side werent cropped that well from whatever image it started from.
    if you do all white and use it with a white background it will look nice I think

    html file:

    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=us-ascii" />
      <title>Home -</title>
      <link href="css/styles.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript">
    //<![CDATA[
            
    
      /*
      Live Date Script- 
      � Dynamic Drive (www.dynamicdrive.com)
      For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,
      visit http://www.dynamicdrive.com
      */
    
    
    
            var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
    
            var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
              
    
      function getthedate(){
    
                var mydate=new Date()
      var year=mydate.getYear()
    
                if (year < 1000)
      year+=1900
      var day=mydate.getDay()
      var month=mydate.getMonth()
    
                var daym=mydate.getDate()
    
                if (daym<10)
      daym="0"+daym
      var hours=mydate.getHours()
                
      var minutes=mydate.getMinutes()
                var seconds=mydate.getSeconds()
                
      var dn="AM"
      if (hours>=12)
      dn="PM"
    
                  if (hours>12){
      hours=hours-12
              
      }
                  
      if (hours==0)
      hours=12
    
                  if (minutes<=9)
      minutes="0"+minutes
                  if (seconds<=9)
      seconds="0"+seconds
      //change font size here
      var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+" "+dn
      +"<\/b><\/font><\/small>"
    
                  if (document.all)
      document.all.clock.innerHTML=cdate
      else 
                  if (document.getElementById)
      document.getElementById("clock").innerHTML=cdate
      else
      document.write(cdate)
      }
                  
    
      getthedate()
              
      function goforit(){
                
      if (document.all||document.getElementById)
      setInterval("getthedate()",1000)
    
              }
            
    
      //]]>
      </script>
    </head>
    
    <body onload="goforit()">
      <div id="container">
        <div id="header">
          <table border="0" cellpadding="0px" cellspacing="0px">
            <tr>
              <td><img src="http://my.site.com/images/logo/logo2.jpg" class=
              "logo" /></td>
    
              <td>
                <span id="clock"></span><br />
                <img src="http://my.site.com/images/images/title2.png" class=
                "banner" />
    
                <ul class="nav">
                  <li><a href="http://www.#.com/home">Home</a></li>
    
                  <li><a href="http://www.#.com/aboutme">About me</a></li>
    
                  <li><a href="http://www.#.com/gallery">Gallery</a></li>
    
                  <li><a href="http://www.#.com/videos">Videos DL</a></li>
    
                  <li><a href="http://www.#.com/chat">Chat</a></li>
    
                  <li><a href="http://www.#.com/contact">Contact me</a></li>
    
                  <li><a href="http://www.#.com/signup">Sign up</a></li>
                </ul>
              </td>
            </tr>
          </table>
        </div>
    
        <div id="content">
          <div id="text1">
            <h2 class="title">Win a 48hr date and trip to Miami with Mhelan Love</h2>
    
            <h3 class="subtitle">May 2012</h3>
    
            <center>
              <img src="http://my.site.com/images/images/miami.jpg" alt="miami"
              height="300" width="380" />
            </center>
    
            <p>Enter for a chance to Win a date with world renowned model Mhelan Love.
            Drawing will be held during the last week of April. This is once in a lifetime
            opportunity to be able travel with one of the greatest model you ever meet. Hurry
            up and buy your raffle tickets for a one time price of $40.</p>
    
            <p>For more details on contest please contact me at removed</p>
          </div>
        </div>
    
        <div id="footer"></div>
      </div><!-- www.*************** Analytics Code REMOVED for this example-->
     
    </body>
    </html>
    Last edited by DanInMa; 02-28-2012 at 02:25 AM. Reason: removed email address from the content section

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    and the new styles.css


    Code:
    body {
    	background-color:#000;
    }
    #container {
    	margin : 0 auto;
    	background-color: #FFF;
    	width: 960px;
    	min-height: 900px;
    }
    #header {
    	width: 100%;
    }
    .banner {
    	width: 558px;
    	height: 111px;
    }
    .logo {
    	background-repeat: no-repeat;
    	width: 212px;
    	height: 298px;
    	position:relative;
    	left: -164px;
    }
    .nav {
    	word-spacing: 8px;
    	font-family: segoe script;
    	color: #ffffff;
    	padding:0px;
    	margin:0px;
    }
    
    .nav li {
    	display: inline;
    }
    .nav li a{
    	text-decoration: none;
    	font-family: segoe script;
    	font-weight: bold;
    	font-size: 16px;
    	color: #000000;
    	padding-top: 3px;
    	padding-right: 5px;
    	padding-bottom: 3px;
    	padding-left: 5px;	
    }
    .nav li a:hover {
    	background-color:#000000;
    	color:#FFFFFF;
    }
    .timedate {
    
    }
    #content {
    	padding-top: 5px;
    	padding-right: 20px;
    	padding-bottom: 5px;
    	padding-left: 20px;
    }
    .title {
    	font-family: "garamond";
    	font-size: 35px;
    	font-weight: bold;
    	color: #336600;
    	line-height: 5px;
    	text-align: center;
    }
    .subtitle {
    	font-family: "garamond";
    	font-size: 30px;
    	font-style: italic;
    	font-weight: normal;
    	color: #336600;
    	line-height: 5px;
    	text-align: center;
    }
    #text1 {
    	font-family: "garamond";
    	font-size: 16px;
    	color: #000000;
    	font-weight: bold;
    }
    Last edited by DanInMa; 02-28-2012 at 02:22 AM.


  •  

    Posting Permissions

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