Learn VBA & Macros in 1 Week!

CSS - Why My Buttom Move From Right To Left?

Full Excel VBA Course - Beginner to Expert

Why My Buttom Move From Right To Left?	View Content

Hi;
Why my buttom move from right to left after i click on the button? How i can stop it to do that? Thanks

my code as following;

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>Welcome to you</title>

<style type="text/css">
html,body{
  padding: 0;
  margin:0;
}
#container {
   position: relative;
   width: 796px; /* width + border for IE 5.x */
   w\idth: 790px; /* real width */
   height:310px;
   border: 0px;
   padding: 0;
   margin-top: 10px;
   margin-bottom:auto;
   margin-left: auto;
   margin-right: auto;
   background-color:#f0f0ec;
 }



#wrapper{
    position: relative;
    left: 10px;
    top: 15px;
}

table{
     border:1px solid #90bade;
     padding:0;
     width: 350px;
     height:200px;
     float: left;
     background-color:#FFFFFF;
     position: relative;
     margin-left: 20px;
     margin-right:auto;
     margin-top:auto;
     margin-bottom:auto;
  
}



#button {
	width: 12em;
	border-right: 1px solid #000;
	padding: 0 0 1em 0;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background-color: #BFBEBA;
	color: #333;
	float: left;
	position: relative;
        margin-left: 10px;
        marging-right:20px;
        marging-top:10px;
        marging-bottom:auto;

	}
#button ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	}
		
#button li {
	border-bottom: 1px solid #C5C9CB;
	margin: 0;
	padding:0;
	}
#button li a {
	display: block;
	padding: 5px 5px 5px 0.5em;
	border-left: 10px solid #666666;
	border-right: 10px solid #CCCCCC;
	background-color: #999999;
	color: #fff;
	text-decoration: none;
	width: 100%;
	text-align:center;
	}

html>body #button li a {
	width: auto;
	}

#button li a:hover {
        border-left: 0px solid #1c64d1;
	border-right: 0px solid #5ba3e0;
	background-color: #2586d7;
	color: #fff;
	
	}



</style>
</head>
<body>
<div id="container">

<div id="wrapper">

<div id="button">
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Travel</a></li>
	<li><a href="#">About Us service</a></li>
	<li><a href="#">Contact Us</a></li>
	<li><a href="#">Booking</a></li>
	<li><a href="#">Education</a></li>
	<li><a href="#">Testing</a></li>
	<li><a href="#">Testing</a></li>
</ul>
</div>

<table>
 <tr> 
    <td> test</td>
 </tr>
</table>

</div>


</div>
</body>
</html>

Full Excel VBA Course - Beginner to Expert

Div Will Not Move To Left And Cannot Place Div's Within It.

Similar Tutorials

View Content

Hey everyone, i'm having a bit of trouble with a page i'm making, it seems no matter what i do this one div one left align some text in it. It seems to center everything and i cant stop it from doing it, also the div's inside wont all be on the same line as in one after the other it's the Latest Blog section.

hxxp://24.141.168.102:8080/ar/?page=blog

That's my personal web server i use so if someone could have a look at this and get back to me i'd really appreciate it.

Unable To Move A .css Tabset To The Left

Similar Tutorials

View Content

I have created a .css tab set and wish to move the tabs to left and reduce the white space before the first tab. For some reason, I just don't see it.

Any help would be greatly appreciated.

Thanks!

Here is a link to the sample page I'm playing with:

http://www.rustbug.com/mmtest/tabs.html

Here is my .css:

Code:

body {
	margin:0px;
	background-color:#fff;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;}
	
p {
	margin:10px 10px 10px 10px;
	line-height:140%;
	color:#333333;}

#menu{
	margin-top:50px;	
	width:744px;
	height:20px;
	z-index:1;}
	
#menu ul {
	list-style:none;}

#menu li{
    float:left;
	background: url(../images/rect_tab_notselected.gif) no-repeat;
	height:20px;
	width:148px;
	text-align:center;
	line-height:20px;
	vertical-align:bottom;
	font-size:12px;
	padding-left:4px;}

#menu a {
	text-decoration:none;}
	
#menu li.selected {
	position:relative;
	top:1px;
	background: url(../images/rect_tab_selected.gif) no-repeat;
	background-color:#fff;
	font-weight:bold;
	height:20px;
	width:148px;}
	
#menu li.selectedRound{
	position:relative;
	top:1px;
	background: url(../images/curve_tab_selected.gif) no-repeat;
	font-weight:bold;
	height:20px;
	width:148px;}
	
#menu li.notselectedRound{
	background: url(../images/curve_tab_notselected.gif) no-repeat;}
		
#menu_content_container {
	width:744px;
	border:1px #CCCCCC solid;
	z-index:2;}

Here is my html:

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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<link href="css/tabs2.css" rel="stylesheet" type="text/css" />
</head>


<body>

    	<div id="menu">
        	<ul>
        	<li><a href="tabs.html">My Selections</a></li>   
			<li><a href="tabs.html">Date-based Option</a></li>
			<li><a href="tabs.html">Risk-based Option</a></li>
            <li class="selectedRound"><a href="tabs.html">Create My Own</a></li>
    	</ul>
	</div>
<div id="menu_content_container">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	</div>
        <!-- <input type="button" value="Previous"  class="btn"/><input type="button" value="Submit"  class="btn"/>
        <p class="btn">hello</p> -->





</body>
</html>

Submit Buttom Sit Not Properly After Submit Invalid Input

Similar Tutorials

View Content

Hi;
i am trying to write a register form for user.

i got a problem that the sign up of submit bottom doesn't sit properly after fill some invalid input and click the sign up bottom. but before fill anything to form, everything sit ok, no problem at all.

And this problem happens in the IE browser, not in the Firefox browser.

Could anyone help me find out the problem, please.

please go to the link.
http://writeanything.org/Register.php

valid password
1) at least 8 char
2) at one lower char
3) at least one upper char
4) at least one digit

please fill some invalid input to see the different before and after that.

my code as following:

Register.php

PHP Code:
<?php
   session_start();

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>  Welcome to login  </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<style type="text/css">
body{
   padding: 0px;
   margin: 0px;
   border: 0px;
   background-color: white;
}
#container{
   padding: 0px;
   border-top: 2px solid #1d2add;
   border-bottom: 2px solid #1d2add;
   border-left: 1px solid #3b44b5;
   border-right: 1px solid #3b44b5;
   margin-left: auto;
   margin-right: auto;
   margin-top: 5%;
   margin-bottom: auto;
   width: 330px;
   height: 370px;

}

#t1{
    font-weight: bold;
    font-size: 18px;
    color: white;
    background-color:#3542eb;
}

form{
    padding:0px;
    border: 0px;
    margin: auto;
    width: 280px;
}

#JoinMe
{
   background-color: #41ac1c;
   padding: 2px;
   border: 2px solid #94e07a;
   color: white;
   font-size: 12px;
   font-weight: bold;
}

#JoinMe:hover
{
  background-color: #237516;
  border: 2px solid #104108;
  padding: 2px;
}

table{
   padding: 0;
   border: 0;
   margin: 0;
}

tr{
   padding: 0;
   border: 0;
   margin: 0;
}

td{
   padding: 0;
   border: 0;
   margin: 0;
}

.errorM{
    padding:0;
    margin:0;
    font-weight: bold;
    font-size: 12px;
    color: red;
    background-color:white;
}
</style>
</head>
<body>
<div id="container">
<form action="/RegisterP2.php" method="post">
      <table>

      <tr><td colspan="2" id="t1">Welcome to join xxxx</td></tr>

      <?php if($_SESSION['register_flag']==0) echo ("<tr><td colspan=\"2\" class=\"errorM\">some invalid field below, please reenter again.</td></tr>"); ?>

      <tr><td>
      Email Address:</td><td><input type="text" name="email" maxlength="60" value="<?php if($_SESSION['register_flag']==0) echo $_SESSION['register_email']; ?>"><?php if($_SESSION['register_errorM_Email']!="") {
                     echo "<span class=\"errorM\">";
                     echo $_SESSION['register_errorM_Email'];
                     echo "</span>";
                  }
       ?></td></tr>

       <tr><td>Password:</td><td><input type="password" name="pass1" maxlength="30"><?php if($_SESSION['register_errorM_Password']!="")
                                      {
                                         echo "<span class=\"errorM\">";
                                         echo $_SESSION['register_errorM_Password'];
                                          echo "</span>";
                                       }
                          ?></td></tr>

       <tr><td>Confirm Password:</td><td><input type="password" name="pass2" maxlength="30"><?php if($_SESSION['register_errorM_Password']!="")
                                    {
                                        echo "<span class=\"errorM\">";
                                        echo $_SESSION['register_errorM_Password'];
                                         echo "</span>";
                                     }
                         ?></td></tr>

       <tr><td colspan="2"><hr></td></tr>

      <tr><td>
      Display Name:</td><td><input type="text" name="DisplayName" maxlength="30"></td></tr>

      <tr><td>
      First Name:</td><td><input type="text" name="FirstName" maxlength="30"></td></tr>

      <tr><td>Last Name:</td><td><input type="text" name="LastName" maxlength="30"></td></tr>

       <tr><td>Country:</td><td><input type="text" name="Country" maxlength="30"></td></tr>

       <tr><td>State or City:</td><td><input type="text" name="StateCity" maxlength="30"></td></tr>
   <tr><td colspan="2"><hr></td></tr>

       <tr><td>Age</td><td><input type="text" name="age" maxlength="30"></td></tr>

     <tr><td>Gender:</td><td><input type="radio" checked="checked"
name="Sex" value="male">Male <input type="radio" checked="checked"
name="Sex" value="female">Female </td></tr>
<tr><td colspan="2" align="right"> <input type="submit" name="Join" value="Sign Up" id="JoinMe"></td></tr>

</table>
</form>
</container>
</body>
</html>

/////////////////

RegisterP2.php

PHP Code:
<?php
   session_start();

   //error massage for validate form
   $_SESSION['register_errorM_Email']="";
   $_SESSION['register_errorM_Password']="";

  //flag to check user input, 1=valid, 0=invalid
   $_SESSION['register_flag']=1;

   if(isset($_POST['Join'])){
        $email_pattern = '#.*@.*\..*#';
        $_SESSION['register_email']   = $_POST['email'];

       //email pass validation;
        if (preg_match($email_pattern, $_POST['email']) > 0) {
        }
        else{
            //not validate
           $_SESSION['register_errorM_Email']="**";
           $_SESSION['register_email']   ="";
           $_SESSION['register_flag']=0;
         }

      $password1 = $_POST['pass1'];
      $password2 = $_POST['pass2'];

      //valid
      if ($password2==$password1) {

      } else {
        $_SESSION['register_errorM_Password']="**";
        $_SESSION['register_flag']=0;
     }

    //valid
     if (preg_match("/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/", $password1))
     {
     } else {
         $_SESSION['register_errorM_Password']="**";
         $_SESSION['register_flag']=0;
     }

     //valid
     if (preg_match("/^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/", $password2))
     {
       } else {
        $_SESSION['register_errorM_Password']="**";
         $_SESSION['register_flag']=0;
      }

     if( $_SESSION['register_flag']==1)
        header('Location:RegisterP3.php');
     else
       header('Location:Register.php');
  }
?>

Clear: Left; Clears All Left-floated Divs

Similar Tutorials

View Content

I've been unable to replicate this issue in IE, but it's plaguing all other "free" browsers I use (Firefox, Galeon, etc.).

Take a look at http://www.skudd.com/blog/view/1370 for example. The bar on the left is floated left, as are the label elements in my comment form. In the li of each form item, I have a br with the clear property set to "left".

What I'm trying to accomplish is I want to clear the previous label, so as to prevent the "stair step" effect. Why would "clear: left;" in this case cause the element to clear everything that has been floated left? What should I try in place of it?

Two Colums, Left Column Is Good, Central Is Below Left One

Similar Tutorials

View Content

Hello,

I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left.

See here

see how it got below ?

It is XHTML validated and CSS is fine too (some background color warnings).

Plz help me to make central column go up. Thanks.

Clearing A Float Left With A Margin-left

Similar Tutorials

View Content

I always seem to run into this problem and somehow get it fixed but this time I am stuck.

I have a main wrapper and 2 footers that line up together and are all floated to the left. I'm trying to put in a column to their right that runs vertical called "right", to be spaced out about 110 px from the top of the page so it sits vertically below the banner and the navs. I tried giving it a left margin to clear the floated DIV's but to no avail. You can see the page he http://yourthreshold.com/playground/ It seems to clear in Firefox but not in IE ..

The main CSS:

Code:

* {
 margin: 0;
 padding: 0;
}

body {
margin:0;
padding:0;
background-color:#e5e5e5;
}

#wrapper {
width: 640px;
height: 720px;
margin-left:0;
margin-top:0;
border: 2px solid gray;
border-bottom: 0px solid gray;
background-image:url(../images/banner.jpg);
background-repeat:no-repeat;
background-color:#c0c0c0;
float:left;
}

	#navigation {
	width: 640px;
	height: 22px;
	background-color:#c9c9c9;
	margin-top: 88px;
	}
	
	#insidewrapper {
	height:auto;
	width:99%;
	margin: 6px 1px 4px 1px;
	}

		/* Begin Left Side Info Boxes */
		#sidebar {
		width:150px;
		height:600px;
		margin-left:2px;
		float:left;
		border:1px solid #666666;
		border-bottom:0px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:9px;
		color:#666666;
		background-color:#ffffff;
		}
		
			.infobox {
			height:123px;
			font:Verdana, Arial, Helvetica, sans-serif;
			font-size:9px;
			padding:3px;
			border-top:0px;
			border-left:0px;
			border-right:0px;
			}
				.infopic {
				margin-top:9px;
				}
				
			.infobutton {
			height:20px;
			border-bottom:1px solid #666666;
			padding-left:3px;
			}
				
		/* Begin Main Content */
		#maincontent {
		width:465px;
		height:593px;
		margin-left:158px;
		border:1px solid;
		border-color:#666666;
		font:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#333333;
		padding:3px;
		background-image:url(../images/background_trans2.gif);
		background-repeat:no-repeat;
		background-position:center;
		background-color:#ffffff;
		}
			/* Main Content for pages with textual content */
			#content {
			width:97%;
			height:auto;
			padding:5px;
			}

			/* Main Content for pages with products */
			#productWrapper {
			height:auto;
			width:100%;
			margin-top:10px;
			}
			
			#productLeft {
			height:auto;
			width:115px;
			float:left;
			}
			
			#productMiddle {
			height:auto;
			width:200px;
			margin-left:1px;
			float:left;
			}
			
			#productRight {
			height:auto;
			width:auto;
			}
	
	/* Begin Footer */
	#footerlinks, #footer {
	width:640px;
	height:auto;
	text-align:center;
	float:left;
	}
	
	#footerlinks {
	border-right: 2px solid gray;
	border-bottom: 1px solid gray;
	border-left: 2px solid gray;
	background-color:#c0c0c0;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	letter-spacing:1px;
	color:#555555;
	padding-bottom:4px;
	}
	
	#footer {
	margin-left:0;
	margin-top:0;
	margin-bottom:15px;
	padding-top:8px;
	border-top: 0px;
	border-right: 2px solid gray;
	border-bottom: 2px solid gray;
	border-left: 2px solid gray;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#555555;
	background-color:#a9a9a9;
	}
	
	/* Begin Rightside Column */
	#right {
	border: 1px solid orange;
	width:195px;
	margin-left:650px;
	padding-top:111px;
	}

Float:left After Clear:left Botched In Ie

Similar Tutorials

View Content

OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)?
Here's some example HTML:
html4strict Code:
Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!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" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>

  

  


 <?xml version="1.0" encoding="iso-8859-1"?>


 <!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" lang="en" xml:lang="en">


 <head>


 <title>Test</title>


 <style type="text/css">


     @import url("style.css");


 </style>


 </head>


 <body>


  


 <form name="form" action="test.php" method="post">


     <label for="name">Name:</label>


         <input type="text" name="name" />


     <label for="thoughts">Your Thoughts:</label>


         <textarea name="thoughts"></textarea>


     <label for="fun">Having fun?</label>


         <input type="checkbox" name="fun" value="yes" />


 </form>


  


 </body>


 </html>

And the CSS:
css Code:
Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }

  

  


 label {


     display: block;


     float: left;


     clear: left;


     width: 8em;


     margin-right: .5em;


     text-align: right;


 }


 input,


 textarea {


     display: block;


     float: left;


 }

Float: Left With Padding:left

Similar Tutorials

View Content

Hi, I have this page:

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=windows-1252">
<title>New Page 1</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

p {padding: 0; margin: 0; }

html {padding:0; margin:0;}


.leftDiv {
	height: 100px;
	width: 30px;
	background-color: teal;
	float: left;
}

.mainDiv {
	padding: 5px 0 10px 0px;
	width: 200px;
	height: 20px;
	background-color: blue;

}

.mainPara {
	padding-left: 5px;
}

</style>
</head>

<body>
<div id="contentDiv" style="width: 700px; height: 700px;">
	<div class="leftDiv">
	
	</div>
	<div class="mainDiv">
		<p class="mainPara">
		First Para
		</p>
	</div>
	<div class="mainDiv">
		<p class="mainPara">
		Second Para
		</p>
	</div>
</div>
</body>

</html>

And have two questions. First, why the gap between the left div and mainDiv in IE? I thought 3px bug was only for block elements with no dimensions?

Second, why does padding left not take effect in FF untill I have overcome the width of the float? Even padding-left in the para does not take effect, which should be based off of its parent.

Any help is appriciated,

CJB

Cant Move Div... Why?

Similar Tutorials

View Content

On this page: http://lfswear(dot)com/sites/lfs2/index.php?main_page=product_info&cPath=1&products_id=8

I can't seem to get the "Size" div to move over right to match up with the color one... Any help would be greatly appreciated.

Trying To Get An Element To Move Up Next To Another

Similar Tutorials

View Content

Hi, I am trying to get image on the bottom right hand side of the page to align with the chart in the middle.

I have it floated to the right, but I can't seem to make it move up vertically.

Not sure how to do this, absolute positioning is not an option because it will be stuck there regardless of browser size.

this is where the img is now, see how it is not lined up?
URL

this is where it is supposed to go.
URL

my code is this

Code:

<div style="float:right; vertical-align:baseline;"><img src="/free-gold-charts/gold.png" alt="Free Interactive Gold Charts" width="320" height="290" align="top"/></div>

and I have it next to the code for the chart.

Help!

Help Using Hover To Move A Div

Similar Tutorials

View Content

I'm trying to make a menu using only css basically when you hover over an li element if there is another level below it a div is moved into place to reveal the links. It is working for the top level, but I can't figure out why it won't display/work for the 3rd tier. Both the css and the html validated, a link and the code is below. Thanks for any advice.

edit: I can't actually post the link but I will PM it to anyone who wants to see it halfway working.

HTML:
-------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"edit:no links">
<html>
<head>
<title>Test Page for drop menu</title>
edit:there would be an include for the css here but I can't post anything resembling a link
</head>

<body>
<div id="menuHolder">
<ul>
<li><a href="#url">Advising Network</a>
<div class="subHolder">
<ul>
<li><a href="#url">Student PASSPort</a>
<div class="bottom">
<ul>
<li><a href="#url">Test 1</a></li>
<li><a href="#url">Test 2</a></li>
<li><a href="#url">Test 3</a></li>
<li><a href="#url">Test 4</a></li>
</ul>
</div>
</li>
<li><a href="#url">Adivsor PASSPort</a>
<div class="bottom">
<ul>
<li><a href="#url">Test 1</a></li>
<li><a href="#url">Test 2</a></li>
<li><a href="#url">Test 3</a></li>
</ul>
</div>
</li>
<li><a href="#url">Form Bank</a></li>
<li><a href="#url">Timeline</a></li>
<li><a href="#url">Videos</a></li>
<li><a href="#url">Contact</a></li>
</ul>
</div>
</li>
<li><a href="#url">Career Investigations</a>
<div class="subHolder">
<ul>
<li><a href="#url">Student</a>
<div class="bottom">
<ul>
<li><a href="#url">Test 1</a></li>
<li><a href="#url">Test 2</a></li>
<li><a href="#url">Test 3</a></li>
<li><a href="#url">Test 4</a></li>
</ul>
</div>
</li>
<li><a href="#url">Alumni</a></li>
<li><a href="#url">Parents and Family Members</a></li>
<li><a href="#url">Employers</a></li>
<li><a href="#url">eRecruiting</a>
<div class="bottom">
<ul>
<li><a href="#url">Test 1</a></li>
<li><a href="#url">Test 2</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><a href="#url">Campus Life</a>
<div class="subHolder">
<ul>
<li><a href="#url">Student and University Life</a></li>
<li><a href="#url">Student Activities</a></li>
<li><a href="#url">Commuter Services</a></li>
<li><a href="#url">Community Service Learning</a></li>
<li><a href="#url">USM Partnership with STRIVE U</a></li>
<li><a href="#url">USM Calendar of Events</a></li>
</ul>
</div>
</li>
<li><a href="#url">Scholarships and Finances</a></li>
<li><a href="#url">Academic Success</a>
<div class="subHolder">
<ul>
<li><a href="#url">Academic Strategies</a></li>
<li><a href="#url">Courses</a></li>
<li><a href="#url">Additoinal Support Resources</a></li>
</ul>
</div>
</li>
<li><a href="#url">Major Discovery</a>
<div class="subHolder">
<ul>
<li><a href="#url">Being Undeclared</a></li>
<li><a href="#url">GO Program</a></li>
<li><a href="#url">Aspirations - Early Study</a></li>
<li><a href="#url">Choosing Your Major</a></li>
<li><a href="#url">FAQ</a></li>
</ul>
</div>
</li>
<li><a href="#url">Orientation</a></li>
</ul>
</div>
</body>

</html>

CSS
-------------------
a {text-decoration:none; color:#ffffff;}

#menuHolder {height:60px; background:#0072ad; position:relative; text-align:center; width:1000px; font-size:16px; margin:0px;}

#menuHolder ul {list-style:none;}
#menuHolder ul li {float:left; padding:0px 10px 0px 10px; line-height:60px;}
.subHolder {position:absolute; left:0px; top:200px; overflow:hidden; font-size:14px; background:#0083ad;}

#menuHolder ul li:hover .subHolder {left:0px; top:60px; width:1000px; text-align:center; height:60px;}
#menuHolder ul li:hover {background:#0083ad;}

/* sub menu */
.subHolder ul {list-style:none;}
.subHolder ul li {float:left; padding:0px 10px 0px 10px; line-height:60px;}
.bottom {position:absolute; left:0px; top:500px; overflow:hidden; font-size:12px; background:#0094ad;}

.subHolder ul li:hover .bottom {left:0px; top:120px; width:1000px; height:60px; text-align:center; line-height:60px;}
.subHolder ul li:hover {background:#0094ad;}

/*bottom level*/
.bottom ul {list-style:none;}
.bottom ul li {float:left; padding:0px 10px 0px 10px;}

Move Nav Bar To Center

Similar Tutorials

View Content

Hi,

I am looking to move my nav bar into the center

www.leehughes.co.uk

Am not sure how to do this, am worried about messing up the IE hacks..

Code:

ul#nav {
    height:1.75em;
    border-top:1px solid #000;
    border-bottom:1px solid #646060;
    list-style:none;
    margin:0; /* reset the default left margin in IE */
    padding:0 .5em 0 0; /* reset the default left padding in good browsers */
    background:#000;
    font-size:1em;
}
#nav li {
    position:relative; /* establish stacking context for the AP'd dropdown sublist */
    float:right;
    padding:0;
    line-height:1.75em;
}
#nav li a {
	float:left;
	padding:0 .5em;
	border-right: 1px solid #333;
	color: #CCCCCC;
	text-decoration: none;
}
#nav li a.first {border:none;}

#nav li:hover, 
#nav li.sfhover{ 
    background:#transparent;/* background for all links on hover */
    visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
#nav li:hover a, 
#nav li.sfhover a {color:#FFF;}/*1st level font color on hover*/

/*=== All Sublist Styles ===*/
#nav ul {
    position:absolute; /* position the sublist to nearest positioned ancestor, the (#nav li) in this case*/
    width:12em; /*150px*/
    margin-left:-999em;/* hide the sublist */
    padding:0;
    left:0; /* IE6/7 need this to position the sublist correctly on hover*/
    top:1.75em;
    background: url(fake-image.jpg);/* IE needs some sort of BG on the nested ul */
}
#nav li li {
    float: none;/*reset the float from #nav li*/
    display:block;
    height:auto;
    line-height:1.5;
    border:none;/*reset borders from #nav li*/
}
#nav li li a {
    float: none;/*reset the float from #nav li*/
    display:block;
    width:11em;/*IE6 needs a width (12em total with padding)*/
    padding:0 .5em;
	border:0;
}
* html #nav li li a {display:inline-block;} /*hide an overflow bug in IE6*/
*+html #nav li li a {display:inline-block;} /*hide same overflow bug in IE7*/

/*=== Hide All Sublists ===*/
#nav li:hover ul,
#nav li.sfhover ul {
    margin-left:-999em;
}
/*=== Sublist Font Colors ===*/
#nav li:hover li a, 
#nav li.sfhover li a  {color:#FFF;} /*2nd level font color*/

#nav li li:hover a, 
#nav li li.sfhover a  {color:#003366;} /*2nd level font color on hover*/

/*=== Second Level UL position on hover ===*/
#nav li:hover ul,
#nav li.sfhover ul { 
    margin-left: 0; /* show the sublist (line up with left border on main list items)*/
}

Thanks

Move Stats Up

Similar Tutorials

View Content

http://members.cox.net/sherry72/index.html

that is my website. I have a stats box to the right but i want it exactly to the right of my content box. It is underneath right now. How do i change the css to make it like i want it?

Move My Container Up

Similar Tutorials

View Content

Hi all,

Helping out a buddy, but am stuck myself. Possibly simple fatigue.

At this site, I'd like to move the entire center container up so that it's only about 20px below the very top. As of right now, when I do this, the top BG image disappears. As you can see from the CSS, there's actually two BG images.

I don't want that, I merely want the center container to cover the BG.

How, please?

Thanks!

Chris

Move Containers To The Right

Similar Tutorials

View Content

Trying To Move Two Boxes - Please Help

Similar Tutorials

View Content

Hi

I am creating a new site for a friend in Wordpress

ilovelifebecause.com

I can usually muddle through in css to make changes, but i'm stumped at the moment.

What I am trying to do is swap around the two cream coloured boxes so the larger one is on the right, the thinner one on the left and the blue box in the middle still. I've tried a number of things in the css file but can't seem to find the right method - can anyone help?

many thanks in advance
Paul

How To Move Right Navbar Down

Similar Tutorials

View Content

Hi,

Am editing a template within dreamweaver as it saves a lot of time for me but I can figure out how to move the right nav bar down.

Am trying to include a screenshot but i can't figure out how as I am a new user and it won't let me link..

Basically, it is a two column layout with a picture under the heading and the nav bar up to the height of the picture. Am looking to expand the picture out right and center meaning the nav bar will have to come down just below the picture if you know what i mean? I have tried with design view, won't let me. Had a look at the code but nothing really there that I picked up on (considering am only a beginner)..

any thoughts?

How To Move Right Nav Menu Down

Similar Tutorials

View Content

sorry I posted it again by mistake..

please delete

My Div Tag Move Their Position When I Zoom In/out

Similar Tutorials

View Content

ok

in my site I have set the header and the menu as absolute because I want the header to go over the container and the menu to go over the header

but my problem is that when I zoom in or out my header and menu move position to the left

is there a way to make them not move their position but still have them one on top of the other

this is my site for now (it's my course at uni and I have to include all those pages in it) http://padrewa.comeze.com

this is my css code for:

Code:

 body {
    background-color: #FFF;
    }

    #wrapper {
    background-color: #FFF;
    }


    #header {
 * border:#999 0px solid;
   position: absolute; 
   opacity: 0.50; filter:alpha(opacity=50);
    }


    #menu {
*  border:#999 0px solid;
   position:absolute;
   padding-top:80px;
   padding-left:180px;
    }


     #content {
    border:#999 0px solid;
    background-color:#FFFF99;
    width:1050px;
    padding-top:110px;
    padding-bottom:70px;
    margin-left: auto;
    margin-right: auto;
    }


     #footer {
    border:#999 0px solid;
    background-color:#FFFF99;
    width:1050px;
    margin-left: auto;
    margin-right: auto;

    }

and this is my header template I included it in my page using php:
Code:

<div id="header"><table>
<tr>
<td><a href="index.php"><img src="style/logo.jpg" alt="Logo" height="100" /></a></td>
</tr>
</table>
</div>
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />


<div id="menu" >
<a href="index.php"><b>Home Page</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="gallery.php"><b>Gallery</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="biography.php"><b>Biography</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="draw.php"><b>Draw</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="write.php"><b>Write</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="contact.php"><b>Contact Me</b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

</div>

Setting A Div To Move On Y Axis But Not X

Similar Tutorials

View Content

Hello all,

More or less, i'm trying to replicate a spreadsheet type of thing online.

hxxp://img241.imageshack.us/img241/4100/imagewm.jpg

The white bar stays at a fixed y axis (height) no matter how far down the page you scroll. I just used position: fixed to accomplish this. However, I need it to stay stuck to the left side of the page (not just the visible browser window) at the same time.

I can do this, however by making it stick to the left of the page (and thus scroll with the content when you scroll left and right), the bar will no longer scroll up and down at a fixed height

I hope this makes sense to you all - if needed I can give a live demo to show what i'm talking about. I've been trying to figure this out for a while now, and no luck.

Any and all help or direction is appreciated!

Andrew