|
CSS - Horizontal Center A <submit>
CSS
Code: #manageSubmit {
width: 100%;
margin: 0 auto;
}
HTML Code: <div id="manageSubmit"> <INPUT TYPE="Submit" value=" Finish and Checkout "> </div> Everything else on the page is centered correctly but the submit button. Similar TutorialsThis is my 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=utf-8">
<title>123</title>
<link href="oto.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
* {
margin : 0;
padding : 0;
}
html, body, #wrap {
height : 100%;
margin : 0 auto;
width : 980px;
background-color : #666666;
}
body > #wrap {
height : auto;
min-height : 100%;
width : 980px;
background-color : #333333;
}
a img {
border : none;
}
#main {
height : 200px;
background-color : #999999;
}
#nav {
height : 35px;
}
#sad {
padding-bottom : 200px;
background-color : #999999;
height : 500px;
}
#footer {
position : relative;
margin-top : -200px;
height : 200px;
clear : both;
background-color : #000000;
}
.clearfix:after {
content : ".";
display : block;
height : 0;
clear : both;
visibility : hidden;
}
.clearfix {
display : inline-block;
}
* html .clearfix {
height : 1%;
}
.clearfix {
display : block;
}
.menu {
border : none;
border : 0;
margin : 0;
padding : 0;
font : 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
margin-left: auto;
margin-right: auto;
}
.menu ul {
background : #333333;
height : 35px;
list-style : none;
padding : 0;
}
.menu li {
float : left;
padding : 0;
}
.menu li a {
background : #333333 url("images/seperator.gif") no-repeat bottom right;
color : #cccccc;
display : block;
font-weight : normal;
line-height : 35px;
margin : 0;
padding : 0 25px;
text-align : center;
text-decoration : none;
}
.menu li a:hover, .menu ul li:hover a {
background : #2580a2 url("images/hover.gif") no-repeat bottom center;
color : #ffffff;
text-decoration : none;
}
.menu li ul {
background : #333333;
display : none;
height : auto;
padding : 0;
margin : 0;
border : 0;
position : absolute;
width : 250px;
z-index : 200;
}
.menu li:hover ul {
display : block;
}
.menu li li {
background : url('images/sub_sep.gif') no-repeat bottom left;
display : block;
float : none;
margin : 0;
padding : 0;
width : 250px;
}
.menu li:hover li a {
background : none;
}
.menu li ul a {
display : block;
height : 35px;
font-size : 12px;
font-style : normal;
margin : 0;
padding : 0 10px 0 15px;
text-align : left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background : #2580a2 url('images/hover_sub.gif') no-repeat center left;
border : 0;
color : #ffffff;
text-decoration : none;
}
.menu p {
clear : left;
}
-->
</style></head>
<body>
<div id="wrap">
<div id="main" class="clearfix">header</div>
<div id="nav">
<div class="menu">
<ul>
<li><a href="#" ><img src="images/bth.png" alt="Oto Nautika"></a></li>
<li><a href="#">Aaaaaa</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li><a href="/faq.php">Bbbbbbb</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</li>
<li><a href="/faq.php">Cccccccccc</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</li>
<li><a href="/faq.php">Ddddddd</a>
<ul>
<li><a href="#">1</a></li>
</ul>
</li>
<li><a href="/faq.php">Eeeeeee</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</li>
<li><a href="/faq.php">Ffffff</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="sad">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
I can't center the menu horizontally, I've tried a lot of methods. The last one I tried was Matt James Taylor's on his blog, but to no avail. I can't get it to work, so if anyone has ideas how to make the menu always in the center of the page....thanks I am wanting to move the icons underneath the banner centered horizontally. Myself, and a buddy of mine have tried for nearly three hours and still can't get it to work. Can someone look at the code, and the site and see what's going on please?? Thanks. Site: garou-motw.com Code: #kwick { width : 100%; align: center; } #kwick .kwicks { background : transparent; display : block; height : 70px; margin : 0; padding : 0; } #kwick li { float: left; margin : 0; padding : 0; list-style : none; } #kwick .kwick { display : block; cursor : pointer; overflow : hidden; height : 70px; width : 70px; } #kwick .kwick span { display : none; } #kwick .opt0 { background-color : transparent; outline : none; } #kwick .opt1 { background-color:transparent; outline: none } #kwick .opt2 { background-color:transparent; outline: none } #kwick .opt3 { background-color:transparent; outline: none } #kwick .opt4 { background-color:transparent; outline: none } #kwick .opt5 { background-color:transparent; outline: none } #kwick .opt6 { background-color:transparent; outline: none; } #kwick .opt7 { background-color:transparent; outline: none } #kwick .opt8 { background-color:transparent; outline: none } #kwick .opt9 { background-color:transparent; outline: none } #kwick .opt10 { background-color:transparent; outline: none } #kwick .opt11 { background-color:transparent; outline: none border-right: 0px none; } I want to center a horizontal menu (not the words - the entire menu). Everything I read says I need to insert align-text: center into the #menu ul portion of my CSS. However, I've tried that and it doesn't work for me. I'm using Dreamweaver for my editing and I'm rather new to CSS. The CSS code I have for the menu is: Code: #menuwrapper {width: 1280px;
height: 25px;
background: #FFC557 url(images/menu_background.jpg) repeat-x;
color: #000;}
#menu, #menu ul {display: inline;
margin: 0;
padding: 0;
list-style: none;}
#menu li {display: block;
float: left !important;
padding: 0;
margin: 0;
line-height: 25px;
position: relative;
left: 19px;}
#menu a {height: 25px;
width: 85px;
background: #FFC557 url(images/button.jpg) no-repeat;
color: #000;
display: block;
font-size: 105%;
font-weight: bold;
text-align: center;
text-decoration: none;
border-left: 1px solid #000;}
#lastbutton {border-right: 1px solid #000;}
#menu a:hover {background-position: 0 -25px;}
Now how the heck do I center the menu as opposed to having it aligned to the left??? I am using the following code how do I change it so that it would show up in the center of the brower window? Thanks Tim PHP Code: <div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\"> <object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0 ,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\"> <param name=\"allowScriptAccess\" value=\"sameDomain\" /> <param name=\"movie\" value=\"ads/cardio3.swf\" /> <param name=\"loop\" value=\"false\" /> <param name=\"quality\" value=\"high\" /> <param name=\"wmode\" value=\"transparent\" /> <param name=\"bgcolor\" value=\"#ffffff\" /> <embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" /> </object> </div> 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'); } ?> Hi this is my first post. I'm having trouble making a horizontal navbar with a picture background. here is the vertical menu. http://school(dot)timswildwackyemporium(dot)com/NewMouseOver/navtest.html replace (dot)s with period I want to make the buttons next to each other, but with about 10px space in between them. Thanks. Hi, I have the following menu that is currently laid out with a table: http://www.ianarmstrong.com/menutest/ I want to switch this to be styled in CSS somehow. I've looked at using a styled unordered list to do this, but that doesn't seem like the best idea as each image in my menu is different. Thus I can't have 5 different <li> elements, each with a different bg image. I need a way to handle the 5 different images, and have a mouseover effect as well. Could someone offer some direction on this problem? I have a horizonatal menu on my webise and the list items that drop down, are all jumbled into a single block of text. How do I create a new line fore each list item? I want to show 2 divs, and allow the user to horizontal scroll (in a surrounding div with overflow:hidden and white-space:nowrap) to the next 2 divs. It works fine if I use images with full widths. But... Issue I'm running into is this, if i use float:left, it wraps the divs to the next line and doesn't expand horizontally past the width of the div. If i use display:inline, i can't set the widths of the divs, and since they are text based, they show up as tiny divs, only the width of the text. So, what would be a solution here? CSS Code: #wrap {
padding:30px 0 0 0;
width:500px;
height:310px;
border:1px solid black;
white-space:nowrap;
overflow:hidden;
}
#wrap div {
display:inline;
width:245px;
}
HTML Code: <div id="wrap">
<div><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></div>
</div>
and obviously the javascript would be included to allow the div to scroll onlick. But I just need the initial setup of this. I've been fighting with this for a good couple of days here so I figure it's time to come ask people who might have a better idea than I do. I've been trying to get this list to display on a horizontal bar. It's not a navigation bar that's an integral part of the site's layout, just an unordered list that I need to have go across a line instead of down. I got the code from a site that does pre made menus because I'm still new to all of this so, you know, blah life story. Ha. My HTML looks like this: Code: <li><a href="#url">2005<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub pos1">
<li><a class="sub2" href="#">August<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="border b1"></div>
<div class="base div1">
<h4>August 2005</h4>
<p>August 29</p>
<p>New school division office will be in Weyburn</p>
<ul>
<li><a href="#url">Section 1</a></li>
<li><a href="#url">Section 2</a></li>
<li><a href="#url">Section 3</a></li>
</ul>
</div>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
and I'm still not really sure what part of the code is the CSS affecting this but I think? it's this: Code: #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul {float:left; padding:0; margin:0; list-style:none; width:200px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li {display:block; float:left; width:150px; height:auto; padding:0; margin:0;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a {width:190px; padding-left:10px; background:#fff url(vertical-list/dot.gif) no-repeat left center; color:#000; border:0; margin:0; height:auto; line-height:18px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a:hover {color:#069;}
Is there a way to over ride this code so I can put the list on a single line? I'm staring at the emoticon bashing its head against a wall and it seems pretty accurate at this point. PHP Code: echo "<div class=\"tbody2\">"; echo "<div class=\"client\">Client<div class=\"clientname\">Client Name</div></div>"; echo "</div>"; Using the above code it displays Client on top of Client Name. How do I make Client name appear to the right of Client using only css? I've been grappling with this for a long while now. I pretty much have it working, except for the life of me I cannot get the drop down menus to appear under the corresponding link. position: absolute makes the menus always appear off to the left. Does anyone know what the secret is to this? Code: <div id="nav_wrapper"> <div id="nav_bar"> <div id="nav_content"> <ul id="nav_ul"> <li><a href="/">Home</a></li> <li><a href="/forum/">Forum</a> <div class="nav_subcontent"> <ul> <li><a href="/forum/search.php">Search</a></li> <li><a href="/forum/memberlist.php">Members</a></li> </ul> </div> </li> <li><a href="#">A link without a menu</a></li> </ul> </div> </div> </div> Code:
/* Wrapper */
#nav_wrapper {
clear: both;
}
/* Bar */
#nav_bar {
background: url('images/nav_swish_fade.jpg');
background-repeat: repeat-x;
height: 36px;
}
/* All the buttons within the bar, the middle portion */
#nav_content {
display: inline;
margin: 0 auto;
text-align: center;
background: #fff;
height: 36px;
}
/* Entire unordered list */
#nav_ul {
list-style: none;
position: relative;
}
/* Top level unordered list */
#nav_content ul>li {
display: block;
}
/* Top level unordered list links */
#nav_content ul>li a {
display: block;
float: left;
padding: 9px;
margin-left: 2px;
margin-right: 2px;
}
/* Menus */
.nav_subcontent {
display: none;
position: absolute;
background: #222;
margin-top: 8px;
}
/* Menu link */
#nav_content .nav_subcontent a {
display: block;
padding: 9px 20px 9px 0;
margin-left: -5px;
text-align: left;
min-width: 100px;
}
/* Show menus */
#nav_content ul>li:hover .nav_subcontent {
display: block;
}
Hi, I'm trying to make a horizontal list using li tags. I got the text to align horizontally but the bullet icons I want to use (or even when I try with the default bullets) don't appear. Can anyone help me out with this? Here's the code : Code:
#onlineToolsNav ul {
margin-top: 0px;
margin-bottom : 0px;
margin-left : 5px;
padding: 0px;
line-height: 25px;
white-space: nowrap;
display : inline;
}
#onlineToolsNav li {
display: inline;
list-style-image: url(onlineArrow.jpg);
list-style: url(onlineArrow.jpg);
}
#onlineToolsNav li:before {
content: url(onlineArrow.jpg);
}
#onlineToolsNav li.first:before {
content: " ";
}
<div id="onlineToolsNav">
<ul>
<li><a href="link1.html">link1</a></li>
<li><a href="link2.html">link2</a></li>
<li><a href="link3.html">link3</a></li>
<li><a href="link4.html">link4</a></li>
<li><a href="link5.html">link5</a></li>
<li><a href="link6.html">link6</a></li>
</ul>
</div>
Thanx Olografix How do I create a div with a horizontal overflow? I have a div box which is 150px high and 200px wide. I need it to fill up the height and then overflow to the right so I can scroll it horizontally. The div box contains thumbnail images. Hey guys nice forums.....am a css noobie i wanna know one thing how do i make a div stretch horizontally 100% , basically i want my website to be divided into 2 colors black and white the lower part would be black and the upper part would be white , now am not using a div container as i read through previous topics before so am using 2 divs as follows <div id="White">White area</div> <div id="Black">Black area</div> when i preview in IE i see the colors as i want but the divs do not stretch 100% as i said in the css. how do i do it ? hope i made myself clear on this I've tried the tutorials on CSS menus but can't seem to get it to work right for my project. I want a spacer to seperate the buttons at 1 pixels wide but currently it's about 10 pixels wide. I've adjusted until i'm blue in the face can somebody help? The code is below: Code:
<tr>
<td width="766">
<div id="navcontainer">
<ul>
<li><a href="">Home</a></li>
<li><a href=""> Project Status</a></li>
<li><a href=""> Tasks</a></li>
<li><a href="">General Information</a></li>
<li><a href="">Completed Tasks</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
CSS Code:
body,html {
margin: 0;
}
#navcontainer ul {
list-style-type: none;
text-align: center;
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0.2em 1em;
color: #fff;
background-image: url(images/back.gif);
height: 24px;
line-height: 23px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #960033;
background-attachment: fixed;
background-repeat: repeat;
background-position: center;
background-image: url(images/backover.gif);
}
--- |
|||||||