An element stands on 2 different locatins on two different platforms

HTML & CSS
1

Hi everyone,
Here is a simplified version of my code:


<!DOCTYPE html>
<html lang="he">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <style type="text/css">
      html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote,a, abbr, acronym,   address, big, cite, del,dfn, em, img, ins, kbd, small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,	fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time,	mark, audio, video
	{
	 margin: 0;
	 padding: 0;
	 border: 0;
	 font-size: 100%;
	 font: inherit;
	 vertical-align: baseline;
	}
Body
       {
     background-image:url('images/background.jpg');
     background-repeat:no-repeat;
     background-position: 50% 0%
    }

li:hover {color:#ee103f;font-size:100%;}
ul
    {
    position:absolute;
    margin:9% 0% 0 33%;
    width:33%;
    border-bottom:1px solid #9fa9aa;
    border-right:1px solid #9fa9aa;
    border-left:1px solid #9fa9aa;
    list-style-type:none;
  }
ul li
      {
     text-align:center;
	 width:23%;
     float:right;
	 border-right:1px solid #9fa9aa;
	 color:#1c26a8;
	 font-family:tahoma, arial,"sans serif";
	 font-size:100%;
	}
   </style>
 </head>
<body>
    <ul>
	    <li class="about">aaaaa<div id="about"></div></li>
	    <li class="sign_up">bbbb</li>
	    <li class="sign_in">cccc<div id="signin"></div></li>
	    <li>dddd</li>
	</ul>
  </body>
</html>

My table machine has a resolution of 1024 X 768 and the look of the page on it is attached hereby attachment#1.
My laptop’s resolution is: 1280 X 768 and how my page looks on it is attached as att. #2.
My question is: Why is the ul element stands where it should on the table platform but on the laptop platform it
stands at the same place where the background element stands?
Thanks

2

Hi,

You have placed the ul at margin-top 9% and percentage margins are always calculated on the width of the containing block. So for a 1280px screen the margin-top will be 1280 x .09 = 115px from the top of the viewport. For a 1024px screen it equates to 1024 x .09 = 92px from the top of the viewport.

Just open and close your browser window slowly to see the effect.

It’s never a good idea to absolutely place elements in relation to backgrounds on other elements and its generally not a good idea to absolutely place them anyway unless the flow of the document is tightly controlled. Apply the background image to the element itself and then just let the content flow naturally over it.

It does depend on the exact dynamics of what you are trying to do as its hard to see from that snippet of code without the real images. You would rareley place something 33% from the edge but instead use auto margins to centre a static element instead.

3

Hi Paul,
Thanks a lot.
A lot of information in your post . I need time to apply it and if it doesn’t work I’ll add more specific questions.
Thanks again

4

Hi Paul, me again :frowning:
I tried it but never succeeded. I uploaded it to a temporary host maybe this can clarify things:
http://tiv-oni-vegan-catering.ihosts.tk/
Thanks

5

Hi,

You need to think a little about what you are doing here.:slight_smile:

You have a fixed pixel width/height image and you are trying to place something above it using percentages! That will never work because there is no relationship between the two. Just place the element in place using the pixel value it needs.

e.g.


ul {
border: 1px solid #9FA9AA;
border-top:none;
list-style-type: none;
margin: 90px auto 0;
padding:0;
overflow: hidden;/* contain floats*/   
 width: 33%;
}

You don’t need percentage margins; just auto margins on a static element.

However as I said before you probably don’t want to be placing things on top of a background image but instead create a living breathing layout that adapts the background to its content and not content that is fixed by its background.:slight_smile:

Also when developing don’t create global rules like the above for the ‘ul’ because it is unlikely that all uls in your site will need to be styled like that! Just use a class as the selector and only use global rules for things that you are certain won’t change throughout a site.

6

Thank you Paul,
One thing I gather: you cannot work with percenteage in order to fit a page to various resolutions !
And I Iearnt it the hard way :frowning:
Thanks again.

7

It’s not quite that straight forward and your problem was mixing things with fixed width (such as your background image) and aligning them with another element based on percentages. There is nothing wrong with percentages in the right places.

Using percentages is fine when you use them in the right place but they are unnecessary in the layout you have so far. You don’t need percentages to create a fluid layout as a layout is always fluid until you restrict it with width. If you have columns that you want to expand and grow then you will need percentage widths or at least a combination of percentage and min and max-widths on the columns to allow them to stretch.

It may be worthwhile if you can show a screenshot of what you want to achieve and we can advise the best way to go about it :slight_smile:

8

Very kind of you. I still do not have “the feel” of css. I do it rarely but i’ll show you the site i’m working on with pleasure.
I’ll do that tomorrow after i’ll have finished implementing your consult.
Thanks !

9

Hi Paul,
Having implemented your instructions, the original problem I presented has been resolved but many orhers showed up instead :-(.

  1. Extreme right vertical line appears twice;
  2. ul width=29%, ul li width=24%. Ul should be 96%. How come 24% * 4 items equals 29% ?!;
    3 Removing “ul {overflow: hidden;}” makes upper border appear and lower’s disappear.
    Site’s address is: “tiv-oni-vegan-catering.ihosts.tk”.
    Entire css code is:

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote,a, abbr, acronym, address, big, cite, del, 
	dfn, em, img, ins, kbd, small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, 
	details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, 
	mark, audio, video 
	{
	 margin: 0;
	 padding: 0;
	 border: 0;
	 font-size: 100%;
	 font: inherit;
	  vertical-align: baseline;
	}
Body 
       {
     background-image:url('../images/background.jpg');
     background-repeat:no-repeat;
     background-position: 50% 0%
    }
 a 
     {
    width:24.4%; 
    text-decoration:none;
    color:#9fa9aa; 
    
   }
li:hover {color:#2c3e50;font-size:100%;}
ul 
    {
    /*position:absolute;*/
	border: 1px solid #9FA9AA;
	border-top:none;
	/*border-bottom:1px solid #9fa9aa; 
    border-right:1px solid #9fa9aa;
    border-left:1px solid #9fa9aa;*/
	list-style-type:none;
	margin: 90px auto 0;
    /*margin:9% 0% 0 33%;*/
	padding:0;
	overflow: hidden; /*contain floats*/ 
    width:29%;
    
   
  }

ul li 
               {
           text-align:center;
	       width:24%;
           float:right; 
	       border-right:1px solid #9fa9aa;
	       color:#9fa9aa;
	      font-family:tahoma, arial,"sans serif";
	      font-size:100%;
		  margin-left: auto;
          margin-right: auto;
	    }
div#about {
		  position: absolute;
          width:180%;
		  height:1800%;
		  margin: 22% 0% 0% 37%;
		  margin: 22% 0% 0% -30%;
          background-image:url('../images/about.gif '); 
		  background-repeat: no-repeat;
		  display:none;
		  }
li.about:hover #about{display:block}
li.sign_up:hover form.tiv-oni-form{display:block}
form.tiv-oni-form
                 {
		  position: fixed;
		  top:15%;
		  left:20%;
		  background: url('../images/sign_up.gif');
		  background-repeat: no-repeat;
		  direction:rtl;
		  width:43.5%;
		  height:55%;
		  display:none;
		 }
form.tiv-oni-form fieldset
		{
		 position: absolute;
		 top:43%;
		 right: 12%;
		 width: 74%;
		 height: 23%;
		 }
form.tiv-oni-form input
		{
		 display:block;
		 margin-top: 3%;
		 margin-bottom: 3%;
		}
form.tiv-oni-form label.tiv-address
                {
		position:absolute; 
		color:#e6d9ad;
		top: -14%;
		right: 70%;
		}
#tiv_submit_bg
			{
			position:absolute;
			right:30%;
			width:34%;
			height:56%;
			top:93%;
			background-color:#ffffff;
			}
#tiv_submit
                {
		 position:absolute; 
		 border: 2px solid red;
        
         border:2px groove #f1e9d4;
         cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
         padding: 5px 25px;
         
         background-color:/*#6b6dbb*/ #f8e8bd; /*required for browsers that don't support gradients*/
         background: -webkit-gradient(linear, left top, left bottom, from(/*#88add7*/#f1e9d4), to(/*#6b6dbb*/#f8e8bd));
         background: -webkit-linear-gradient(top, /*#88add7*/ #f1e9d4, /*#6b6dbb*/ #f8e8bd);
         background: -moz-linear-gradient(top, #f1e9d4, #f8e8bd);
         background: -o-linear-gradient(top, #f1e9d4, #f8e8bd);
         background: linear-gradient( #bba36b,#e6d9ad, #bba36b);
        
         font-family:Andika, Arial, sans-serif; /*Andkia is available at http://www.google.com/webfonts/specimen/Andika*/
         color:#9fa9aa;
         font-size:1.1em;
         letter-spacing:.1em;
         font-variant:small-caps;
         /*give the corners a small curve*/
         -webkit-border-radius: 0 15px 15px 0;
         -moz-border-radius: 0 15px 15px 0;
         border-radius: 0 15px 15px 0;
         /*add a drop shadow to the button*/
         -webkit-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
         -moz-box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
         box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
		 }
#tiv_submit:hover, #tiv_submit:focus
               {
        color:#2c3c51;
        /*************from example****************/
        /*reduce the spread of the shadow to give a pushed effect*/
        -webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
        -moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
        box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
        }
li.sign_up:hover #signup{display:block}
div#signup div#signup_name
              {
        position:absolute; 
		direction:rtl;
		font-size:100%;
		color:#f5efdf;
	    width:75.5%;
		margin: 15% 0 0 0
		}
div#signin{
         position: absolute;
          width:180%;
		  height:1800%;
		  margin: 1% 0% 0% -30%;
          background-image:url('../images/sign_in.gif'); 
		  background-repeat: no-repeat;
		  display:none;
		  }
li.sign_in:hover #signin
               {
		display:block
		}
div#col_right 
			{
			 width: 47%;
			 float:right
			}
div#col_left
			{
			 width: 47%;
			 float: right;
			 padding-right: 2%
			}

I’m very grateful for your willingness to help me with that.

10

That’s because you have a border-right on the ul and a border-right on the list which means you get two borders on the right. Remove the border-right from the ul.


ul{border-right:none}
  1. ul width=29%, ul li width=24%. Ul should be 96%. How come 24% * 4 items equals 29% ?!;

It doesn’t!!

4 + 24% = 96%

You set the ul to 29% of the containing block (the uls parent i.e. the viewport if no parent exists) but then its children’s (the list elements) percentage width will be based on the parent ul’s width which is 100% of course. The child elements always refer to their containing block as a point of reference.

However, I don’t know why you are still using percentage widths when the space you want the ul to occupy is a fixed width of about 340px. You would be better of for this design to set the ul to 340px. If you want a resonsive design then you can’t use a fixed width background image as I mentioned before.

3 Removing “ul {overflow: hidden;}” makes upper border appear and lower’s disappear.

The overflow:hidden was to contain the floated list elements. Without it the parent ul will contain nothing as floats are removed from the flow and its height will shrink to zero and that is why the border moves to the top because it no longer contains any content.

If you want visible overflow then you can’t really use overflow:hidden and should use another float containing texhnique such as the clearfix method.


ul:after{
content:" ";
display:block;
clear:both;
height:0;
visibility:hidden;
}

If you are trying to create a dropdown menu then follow the usual practice of nested uls as shown in these demos.

http://htmldog.com/articles/suckerfish/dropdowns/

The methods you are using are unmaintainable. e.g. rules like this are unworkable.


div#about {
	position: absolute;
	width:180%;
	height:1800%;
	margin: 22% 0% 0% -30%;
	background-image:url('../images/about.gif ');
	background-repeat: no-repeat;
	display:none;
}

There is no logic to that code and it won’t be usable in any real way.

Try out the examples above and learn how those menus are working and it will help with your project.

If you want a fluid design then you will need ot re-think your design to accommodate fluidity or instead create an adaptive design (a series of fixed width designs that change on breakpoints set in media queries).

As your page is a fixed width then you should create a wrapper that is the width of that background and use auto margins to center it. You can then apply the inner part of the background image to that wrapper instead of the body so that is relevant to that element (indeed I would apply that image to its own element under the nav). The yellow background should then be the background colour of the wrapper and use border-radius for the corners. The height should be fluid and determined by content and not a fixed height.

11

Thanks a lot Paul.
Lots of new concepts for me but I’ll try to adopt it and rebuild my page in accordance to the milestones you placed.
Thanks a lot for your efforts.

12

Hi Paul,
Trying to code according to your suggestions given above I started creating a “wrapper” div to fit all platforms and resolutions.
Here is my code:


<!DOCTYPE html>
<html lang="he">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>xx</title>
	   <meta name="description" content="Vegan food. Catering to home or office" />
	    <meta name="author" content="tiv-oni" />
	    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <style type="text/css">
             div#wrapper
            {
	             width: 100%;
				 height: 100%;
				 background-color: #e6d9ad;
				 border-radius:25px;
	        }		
        </style>
    </head>
<body>
    <div id="wrapper"></div>   
</body>
</html>

All I get is a blank page. I did write 100% height and width though. Any idea what those measurements are related to ?
Thanks.

13

Hi,

If you want a page to reach full height then you need to base it on something with a height.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;/* don't let margins or padding get in the way or 100% will be too big*/
	padding:0;
	height:100%;/* needed to give something for #wrapper to base its height on */
}
#wrapper {
	min-height:100%;
	min-width:240px;
	max-width:1170px;
	margin:auto;
	background:red;
/* don't use height:100% because the layout can never grow.*/
}
</style>
</head>

<body>
<div id="wrapper">test</div>
</body>
</html>

You can’t set the wrappwer to height:100% because that will limit its height to 100% and therefore content could never reach below the fold. As I mentioned before you will rarely use height on elements that hold fluid content so if you find yourself setting a height then you are probably doing something wrong. Most times the content should dictate the height.

Also not that you can’t set a percentage height (or percentage min-height) on an element that does not have a height defined. If the element does have a height defined then again your limiting yourself to that height only and so is usually the wrong approach.:slight_smile:

14

Hi,
I always forget the parent element. Once I gave it a bulk (html element + buddy element :-)) the sun shone.
Special thanks for the links attached in your post. It is as precious as your explanations.