SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Issue with relative box when window resized

    I'm trying to implement the sliding transparent overlay on my sight but I'm having a problem with the positioning of the DIV. When the window is re-sized the div does not retain relativity to the menu items above. Can someone give a pointer as to how this can be achieved?

    This is what I'm trying to emulate.......http://www.daphnes-restaurant.co.uk/...l-information/

    Here's my website.........http://www.galu.co.uk/newsite/goforitg.html

    The yellow box remains relative to the red box but when my window is re-sized I would like the red box to be left align to the window so the users can see easier. A kind of "left align object£ on window re-size. If that makes sense.

  2. #2
    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,

    Welcome to Sitepoint

    It's a little hard to see exactly what you want as you don't have much in place for us to work with and what you have in place isn't developed enough to give a suitable answer.

    You have a number of errors in your small snippet of code anyway which we should address first.

    Code:
    #main {
    	position:float;/* did you mean float:left as there is no position:float property?*/
    	background-color: #FF0000;
    	width: 300px;
    	Margin-Left:300px;/* should be lower case*/
    }
    #second {
    	position:relative;
    	background-color: #FFFF00;
    	padding: 50px;
    	left: 40px;/* don't use relative positioning to move things around unless you understand why*/
    	top: 200px;/*  "" "/
    }
    If you want your page to centralise but align left when squeezed then you need to create a page wrapper at the width that you want the layout to be and then centred with auto margins.

    e.g.

    Code:
    #outer{
    width:960px;
    margin:auto;
    }
    You would then place your content inside this container as required.

    It could be a fluid or elastic width if required.

    Code:
    #outer{
    max-width:1280px;
    min-width:760px;
    margin:auto;
    }
    Using a fixed width you could have the menu and sidebar placed 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>Untitled Document</title>
    <style>
    #outer {
    	width:960px;
    	margin:auto;
    	background:#f9f9f9;
    	overflow:hidden;
    }
    #sidebar {
    	float:left;
    	clear:both;
    	width:200px;
    	background:red;
    	min-height:200px;
    }
    ul#menu {
    	margin:0 0 10px;
    	padding:0;
    	list-style:none;
    	text-align:center;
    }
    ul#menu li, ul#menu a {
    	display:inline-block;
     *display:inline;/* ie6/7 inline-block fix */
    	zoom:1.0;	/* "" */
    	vertical-align:middle;
    }
    ul#menu a {
    	padding:5px 10px;
    	border:1px solid #ccc;
    	margin:0 5px;
    }
    </style>
    </head>
    
    <body>
    <div id="outer">
    		<ul id="menu">
    				<li><a href="#">Menu item</a></li>
    				<li><a href="#">Menu item</a></li>
    				<li><a href="#">Menu item</a></li>
    				<li><a href="#">Menu item</a></li>
    		</ul>
    		<div id="sidebar">
    				<p>Floated sidebar here</p>
    		</div>
    </div>
    </body>
    </html>

    I think it may be better for you to first work on the basics before jumping straight into a complicated layout as you need to understand how all these things fit together.


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
  •