SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div tag problems

    Code HTML4Strict:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <link rel="icon" href="animated_favicon.gif" type="image/gif" >
    <title>Future Hunt - Home</title>
    <style type="text/css">
     
    /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
    html, body
    {
    	height:100%;
    	margin:0;
    	padding:0;
    }
     
    /* Set the position and dimensions of the background image. */
    #page-background
    {
    	position:fixed;
    	top:0;
    	left:0;
    	height:100%;
    	width:100%;
    	overflow:auto;
    }
     
    #menu
    {
    	position:absolute;
    	top:0;
    	left:0;
    }
     
    /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
    #content
    {
     
    	z-index:1;
    	padding:10px;
    }
     
     
    a:link
    {
    	color:white;
    }
    a:visited
    {
    	color:white;
    }
    a:hover
    {
    	color:black;
    }
    </style>
     
    <style type="text/css">
    html {overflow-y:hidden;}
    body {overflow-y:auto;}
    #page-background {z-index:-1;}
    #content {position:static;padding:10px;}
     
    pre
    {
    	cursor:url('duster.cur');
    }
     
     
    </style>
    <![endif]-->
     
     
    </head>
    <body>
    	<a name="top"></a>
    	<div id="menu">
    	<center>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="font-family:pencilPete Font;font-size:32px;font-weight:bold" href="Home.html" style="position:fixed">HOME</a>
    	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="font-family:pencilPete Font;font-size:32px;font-weight:bold" href="#" style="position:fixed">Courses</a>
    	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="font-family:pencilPete Font;font-size:32px;font-weight:bold" href="#" style="position:fixed">Colleges</a>
    	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="font-family:pencilPete Font;font-size:32px;font-weight:bold" href="#" style="position:fixed">Studying Abroad</a>
    	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="font-family:pencilPete Font;font-size:32px;font-weight:bold" href="#" style="position:fixed">Buzz!</a>
    	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="font-family:pencilPete Font;font-size:32px;font-weight:bold" href="#" style="position:fixed">More Buzz!</a></center>
    	</div>
     
    	<div id="page-background">
    	<center><img src="back.jpg" width="100%" height="100%"></center>
     
     
    	</div>
    	<center><input type="image" src="bullseye.jpg"  onclick="window.location='Home.html'" style="position:relative;top:65px;"/><br/><br/><input type="image" src="future hunt.png" style="position:relative;top:65px;"/></center><br/><br/><br/><br/><br/><br/><br/>
    	<div id="content">
     
    	<br/><br/><br/><br/>
     
    	<center style="font-family:pencilPete Font;font-size:30px;font-weight:bold;color:crimson;left:55px;">Done with your undergraduation? Scratching your heads over the plethora of courses
    							offered<br/>by different universities? </center><br/><br/><br/>
    	<center style="font-family:pencilPete Font;font-size:30px;font-weight:bold;color:crimson;left:250px">Pursuing undergraduation? Looking forward to build your profile to stand a higher chance <br/>of getting admitted to top universities of the world?</center>
     
    <br/><br/><br/>
    	<div align="50px;"><p style="font-family:pencilPete Font;font-size:20px;font-weight:bold;color:midnightblue;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Then <i>Future Hunt</i> is your one stop destination. At <i>Future Hunt</i>, you will find information on different popular courses offered in &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;different parts of the world, the top universities offering these courses, tips on profile building and a chance to connect with the <br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Indian students who have made it to this universities.<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;So what are you waiting for? Start exploring our website................
    <br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If you have comments or questions , or simply need more information and want to contact us, click on the contact button on any page <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;within this site.</p></div>
     
     
     
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#top" title="top" style="font-family:pencilPete Font;font-size:20x;font-weight:bold">Top</a>
     
    	</div>
     
    </body>
    </html>

  2. #2
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can somebody help me!!
    The content section is getting overflowed over the background image..can someone point out my mistake?

    Thanx in advance!

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    It's hard to tell what's going on with that code, because we can't see the images. Do you have a live link?

  4. #4
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No i dont have a live link as yet..no domain name registered as of now..btw i have attached the back image..if u could please download it and run it..it would be great!
    Attached Images Attached Images

  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is the background image i have used...

    http://www.psdgraphics.com/wp-conten...blackboard.jpg

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rishijasapara View Post
    The content section is getting overflowed over the background image
    Could you be more specific? Anyhow, this is not the best way to go about web design.

    A background image is best placed in the CSS rather than in the HTML. But first tell us what look you are trying to achieve.

  7. #7
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually am a beginner. What i am trying to achieve here is that i want the contents to not overflow outside the background image. I want it to hide as soon as it reaches the navigation menu when we scroll down. Hope you are getting what i meant.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    That's not really a viable layout concept I'm afraid. You would need to put a scrollbar on the middle content which will look ugly.

    I guess you wanted something like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Future Hunt - Home</title>
    <style type="text/css">
    a:link {
        color:white;
    }
    a:visited {
        color:white;
    }
    a:hover {
        color:black;
    }
    /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
    html, body {
        height:100%;
        margin:0;
        padding:0;
    }
    /* Set the position and dimensions of the background image. */
    #page-background {
        position:fixed;
        top:0;
        left:0;
        height:100%;
        width:100%;
        z-index:0;
    }
    #content {
        z-index:1;
        position:relative;
        width:100%;
        margin:auto;
        height:100%;
    }
    .inner {
        position:absolute;
        top:80px;
        right:70px;
        bottom:100px;
        left:70px;
        overflow:auto;
    }
    </style>
    </head>
    <body>
    <div id="page-background"> <img src="http://www.psdgraphics.com/wp-content/uploads/2009/03/green-blank-blackboard.jpg" width="100%" height="100%"> </div>
    <div id="content">
        <div class="inner">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
        </div>
    </div>
    </body>
    </html>
    However the above won't work in Ie6 and I think it's a little ugly with the scrollbar.

    You would be better off slicing the background so that the page can extend below the fold as per normal sites.

  9. #9
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes this is what i wanted. Thanx a ton guys! Actually i will be changing the scrollbar later on. Thanx both of u for the great help!

    Btw what was changed in the code?

  10. #10
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ohh i get it now! An inner div Cool


Tags for this 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
  •