text-align:center isn't working to center my buttons. I've also tried "margin:0px auto" but that didn't work either. I'm just trying to stack the buttons vertically in the middle of the page with a small space between them. How do I do it?
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align:center;
margin:0px auto;
background-image:url("one1.jpg");
background-repeat:repeat-x;
}
.bf_button {
display:block;
background: url(bf_button_fon_right.gif) no-repeat 100%;
float: left;
outline: none;
padding-right: 32px;
text-decoration: none;
}
.bf_button:hover {
text-decoration: none;
}
.bf_button span{
display:block;
background: url(bf_button_fon_left.gif) no-repeat;
white-space: nowrap;
line-height: 74px;
padding: 0 0 0 32px;
font-family: Arial, Verdana;
font-size: 34px;
font-weight: normal;
color: rgb(0,0,0);
text-transform: none;
}
</style>
</head>
<body>
<img src="one.jpg"></img>
</body>
<div style="text-align:center;">
<br /> <br /> <br />
<span>Time & Attendance (Kronos)</span>
<br /> <br /> <br />
<span>401K</span>
<br /> <br /> <br />
<span>Medical: </span>
<br /> <br /> <br />
<span>Dental, Vision, Life, AD&D: </span>
<br /> <br /> <br />
<span>Flex Programs: </span>
</div>
</html>
You are floating your buttons to the left, which means they will naturally move to the left.
Remove the float: left; from .bf_button
Add a static width to .bf_button (since you defined it as a block).
Add margin: 0 auto; to .bf_button
The final CSS definition should look something like this:
.bf_button {
display:block;
background: url(bf_button_fon_right.gif) no-repeat 100%;
outline: none;
margin: 0 auto;
padding-right: 32px;
text-decoration: none;
width: 150px;
}
You can also remove the <br /> <br /> <br /> as it's not needed when setting the buttons to display: block;. Block elements (or those with display: block) will automatically drop to a new line and stack. To add spacing, simply add a bottom or top margin to your buttons.
Another note. You are closing your <body> tag too soon. Your </body> tag should be directly before your </html> tag.
Related
Currently my search bar is in the navigation bar but on a different line and I was wondering why it is doing this. I stays the same even when I make the writing smaller and change the padding and margin.
I am doing this in class
this is my code all help is appreciated
<!--
#navbar ul {
margin: 0;
padding-right: 5px;
list-style-type: none;
text-align: center;
background-color: #fafafa;
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
font-size: 29px;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #000;
background-color: #fafafa;
}
#navbar ul li a:hover {
color: #000;
background-color; #fff;
}
-->
</style>
</head>
<body>
<div id="navbar">
<ul>
<li>Home</li>
<li>Rowing</li>
<li>School</li>
<li>Attractions</li>
<form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
<input type="hidden" name="cref" value="" />
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="" />
<input name="q" type="text" size="40" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="https://www.google.com/cse/tools/onthefly? form=searchbox_demo&lang="></script>
</ul>
</div>
Because is a block level element and, by default, block level elements begin in a new line. That is why in this case, the containing the search bar goes to a new line - under the navbar. By making it appear as an inline element, the will stay in the same line with the <li> elements that are, as you can see in the style above, also set to be displayed as inline elements.
Put this in your CSS:
form{
display:inline;
}
I've got a page that has a background color for the main container, but for some reason, the color ends just below the header div. The page and the CSS validate in the w3 validators, though, and I have no idea why and I've tried several different fixes.
CSS
body{
margin:0;
padding:0;
line-height: 1.5em;
background-color: #e5e5dc;
color: #000;
}
#maincontainer{
background-color: green;
width: 98%;
margin: 0 auto;
border: 1px solid black;
}
#topsection{
background-color: transparent;
height: 90px; /*Height of top section*/
}
#logo{
background-image: url();
text-align: center;
margin: 0 auto;
width: 100%;
}
#contentwrapper{
float: left;
width: 100%;
background-color: transparent;
}
#contentcolumn{
margin-right: 230px; /*Set right margin to RightColumnWidth*/
}
#rightcolumn{
float: left;
width: 230px; /*Width of right column in pixels*/
margin-left: -230px; /*Set left margin to -(RightColumnWidth) */
background-color: transparent;
}
#footer{
clear: left;
width: 100%;
background-color: transparent;
text-align: center;
padding: 4px 0;
border-top: 1px solid black;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
.error{
background-image: url("images/misc/scroll.jpg");
background-position: top left;
background-repeat: no-repeat;
}
a:link, a:visited{
color: #000;
text-decoration: none;
}
a:hover, a:active{
color: #000;
text-decoration: underline;
}
EDIT -- Raw html source straight from view source in my browser
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Haven • Login</title>
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<script src="includes/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function init()
{
var e = document.createElement('script');
e.src = 'includes/all.js';
document.getElementById('script_insertion').appendChild(e);
}
</script>
</head>
<body onload="init();">
<div id="script_insertion"></div>
<div id="maincontainer">
<div id="topsection">
<div class="innertube">
<h1>IMG</h1>
</div>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<form action="./login.php?mode=login" method="post">
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="username" size="10" title="Username" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" id="password" size="10" title="Password" /></td>
</tr>
<tr>
<td><input type="reset" value="Clear" /></td>
<td><input type="submit" name="login" value="Login" /></td>
</tr>
</table>
<input type="hidden" name="remember" value="true" />
</form>
<br />
Don't have an account yet? Register here!
</div>
</div>
</div> <div id="rightcolumn">
<div class="innertube">
Chat
</div>
</div>
</div>
</body>
</html>
You are floating #contentwrapper which takes it out of the document flow so #maincontainer no longer contains it.
To contain it, you need to give #maincontainer an overflow attribute (auto should work).
FYI, adding borders to your elements are a good way to debug things like this.
If I understand correctly, this is a well addressed question. See CSS 100% height in ie or http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
Here is my CSS
.FrontSlideShow
{
display:block;
overflow: none;
height: 323px;
margin-bottom: 12px;
background-color:#005596;
background-image: url(/*edited*/);
background-repeat: repeat-x; width:754px; font-family: verdana; font-size:large;
color:#FFFFFF;
clear:both;
}
.FrontSlideShow .SlideShowImage
{
float: left;
vertical-align:text-bottom;
padding-right: 24px;
}
.FrontSlideShow .SlideShowSubTitle
{
vertical-align: text-bottom;
margin-bottom: 10px;
}
Here is the markup
<div class="FrontSlideShow">
<div class="SlideShowMainTitle">
<asp:Label ID="lblSlideTitle" runat="server"></asp:Label>
</div>
<div class="SlideShowImage">
<asp:Image ID="imgSlide" runat="server" />
</div>
<div class="SlideShowSubTitle">
<asp:Label ID="lblSlideDescription" runat="server"></asp:Label>
</div>
<asp:Button ID="btnPrev" runat="server" Text="Prev" /><asp:Button ID="btnNext" runat="server" Text="Next" />
<asp:SlideShowExtender ID="slExtender" runat="server" AutoPlay="true" Loop="true" PlayInterval="3000" TargetControlID="imgSlide" NextButtonID="btnNext" PreviousButtonID="btnPrev"
ImageTitleLabelID="lblSlideTitle" ImageDescriptionLabelID="lblSlideDescription" SlideShowServiceMethod="GetSlides" SlideShowServicePath="~/WebServices/SlideShowService.asmx">
</asp:SlideShowExtender>
<asp:Literal ID="liMarkup" runat="server"></asp:Literal>
</div>
The subtitle div needs to be positioned at the bottom right of the parent container. Any ideas? But all I can get is:
But I want:
Try this:
.FrontSlideShow {
position: relative;
}
.FrontSlideShow .SlideShowSubTitle {
position: absolute;
right : 20px;
bottom: 20px;
}
.FrontSlideShow {
....
position:relative;
....
}
.FrontSlideShow .SlideShowSubTitle {
position:absolute;
top: 300px; // your values
left: 400px;// your values
}
THis way your text will always be consistent and in the same spot
I have the following code slightly modified from the Visual Studio 2010 css template. My problem is I'm getting extra top padding/margin of approx 10px in the parent div's of the menu controls in chrome only. It's fine in IE. Whats going on here?
CSS
/* CSS RESET
----------------------------------------------------------*/
*{margin:0;padding:0;}
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
/*font-variant: small-caps;*/
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
min-height: 420px;
}
.mainContent
{
float:left;
width:790px;
padding-left:8px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
}
div.topMenuContainer
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 0px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
margin:0px;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
margin:0px;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
margin:0px;
}
/* LEFT MENU
----------------------------------------------------------*/
div.leftMenuContainer
{
background-color:#3a4f63;
width:160px;
float:left;
min-height: 420px;
}
div.leftMenu
{
padding: 4px 0px 4px 8px;
}
div.leftMenu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.leftMenu ul li a, div.leftMenu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.leftMenu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.leftMenu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: block;
float: left;
text-align: left;
width: auto;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
ASPX
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MTGames.SiteMaster" %>
<!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" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My Site
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear topMenuContainer hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/Content/SavingsClub.aspx" Text="Savings Club"/>
<asp:MenuItem NavigateUrl="~/Content/BuySellExchange.aspx" Text="Buy Sell Exchange"/>
<asp:MenuItem NavigateUrl="~/Content/Photos.aspx" Text="Photos"/>
<asp:MenuItem NavigateUrl="~/Content/ContactUs.aspx" Text="Contact Us"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<div class="clear leftMenuContainer hideSkiplink">
<asp:Menu ID="LeftNavMenu" runat="server" CssClass="leftMenu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Vertical">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/Content/SavingsClub.aspx" Text="Savings Club"/>
<asp:MenuItem NavigateUrl="~/Content/BuySellExchange.aspx" Text="Buy Sell Exchange"/>
<asp:MenuItem NavigateUrl="~/Content/Photos.aspx" Text="Photos"/>
<asp:MenuItem NavigateUrl="~/Content/ContactUs.aspx" Text="Contact Us"/>
</Items>
</asp:Menu>
</div>
<div class="mainContent">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
HTML Output as requested...
<!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" xml:lang="en">
<head><title>
MT Games LTD - Home
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="default.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkLDnBf84MIbFVqD400rg+QLHpOjYA01q5saPk2YvtQR8=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=e5ggu92Xslxua3kL9nz8UEofZFOqESloGE_Cj0acdYupGWiZv6mA-7j9gl1qZyu-Y2_dOyT682uBRYryo2Uk1qSiI78I-2pgTagWwnubNEw1&t=634220066968172593" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=vohUtv47l55JX-_SEfdvXX1rc3wSNSZ9IvoYKmaPF-0UDpWX_2VTYUNkLm7PO0jeF56__8cFVok93Md1-jOV27X9JbBIl3KWaifSkCmwKvk3Dgj6N7xFweVjQK5drnmfItGQ0AEWh8sbhd1vBIHoeA2&t=6df0ad7a" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=r99416_-lUTvcLqe0vx1emg4MR_VAgLHwDco9wPW98QgH03QnH7DRQkA0mx2FQZ5VppBb7JYwOM3gTOTGs8r_j6W0xaQKJo8xTEbbaYeAM9WE90s6Tp-uohjL07JySbKxyIzs5kMm3DtV3kkrbMsJmAIQGWT7gReSVSkk-vQtlSm8AGzdfW36I9zdQwR-z_60&t=2610f696" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=otDNNytXiqv-illCGIud3TULs9-clnOJc4rCdck1L_NgOC9rQIuScBEulatBNXXmu3mRYEY-IBlraYglBRImGj3VFqJMq5q1D8augYHxad15XoOHRiy4KA8ZCRoOmHQsaZmo-EGDbQ833sK4G1QpyLm1dIkybv0r0OSMKV_PkG29XB8AWUm5gsLlNrC2G67K0&t=2610f696" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ScrptManager', 'ctl01', [], [], [], 90, 'ctl00');
//]]>
</script>
<div class="page">
<div class="header">
<div class="title">
<h1>
MT Games LTD
</h1>
</div>
<div class="loginDisplay">
[ Log In ]
</div>
<div class="clear topMenuContainer hideSkiplink">
<img alt="Skip Navigation Links" src="/WebResource.axd?d=RbjyXrlFzBsX7QUn2iOIQq1pniIyextRs7F3B_K9nBzVv8mpeirENaJZ5ab4b0VRcLOj22AZ4sBUNuu-Qa1e4ZDAX4puffSVufxEEatcG2U1&t=634220066968172593" width="0" height="0" style="border-width:0px;" /><div class="menu" id="NavigationMenu">
<ul class="level1">
<li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="Content/SavingsClub.aspx">Savings Club</a></li><li><a class="level1" href="Content/BuySellExchange.aspx">Buy Sell Exchange</a></li><li><a class="level1" href="Content/Photos.aspx">Photos</a></li><li><a class="level1" href="Content/ContactUs.aspx">Contact Us</a></li>
</ul>
</div><a id="NavigationMenu_SkipLink"></a>
</div>
</div>
<div class="main">
<div class="clear leftMenuContainer hideSkiplink">
<img alt="Skip Navigation Links" src="/WebResource.axd?d=RbjyXrlFzBsX7QUn2iOIQq1pniIyextRs7F3B_K9nBzVv8mpeirENaJZ5ab4b0VRcLOj22AZ4sBUNuu-Qa1e4ZDAX4puffSVufxEEatcG2U1&t=634220066968172593" width="0" height="0" style="border-width:0px;" /><div class="leftMenu" id="LeftNavMenu">
<ul class="level1">
<li><a class="level1" href="Content/Consoles.aspx">Consoles, Games & Accessories</a></li><li><a class="level1" href="Content/DVDBRMusic.aspx">DVD, BLUERAY & Music</a></li><li><a class="level1" href="Content/Collectables.aspx">Collectables & Figurines</a></li><li><a class="level1" href="Content/Guns.aspx">Guns</a></li><li><a class="level1" href="Content/Knives.aspx">Knives</a></li><li><a class="level1" href="Content/Archery.aspx">Archery</a></li><li><a class="level1" href="Content/Other.aspx">Other Products</a></li>
</ul>
</div><a id="LeftNavMenu_SkipLink"></a>
</div>
<div class="mainContent">
<p>
To learn more about ASP.NET visit www.asp.net.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</div>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script><script type='text/javascript'>new Sys.WebForms.Menu({ element: 'LeftNavMenu', disappearAfter: 500, orientation: 'vertical', tabIndex: 0, disabled: false });</script></form>
</body>
</html>
Now on jsfiddle http://jsfiddle.net/hhdTe/1/ although the format is a but screwed up on there - the problem still exists. Run it in IE & Chrome and you'll see the extra padding above the menus
Set SkipLinkText="" in the menu.
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" IncludeStyleBlock="false" Orientation="Horizontal" SkipLinkText="">
The padding will vanish.
Both Safari and Chrome have a problem with this. It's accessibility feature in the Menu Control.
If you interested in more information:
http://sim4all.com/blogging/?p=47
Just a follow-up on this. using the above methods to fix this issue is not recommended. There is a very good reason for that image being there. It is an accessibility feature to allow people with screen readers to skip navigation menus and move directly to the content.
See explanation here: http://webaim.org/techniques/skipnav/
Using display: none; hides the link from screen readers as well as visual users, rendering it useless. Changing the link text will mean that people that are looking for it will not be able to find it.
The recommended approach is to leave the image visible, yet move it off the screen. That way it cannot be seen, but screen readers will still find it. Add the below CSS to acheive this:
img[alt='Skip Navigation Links'] {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}
That will fix the issue, without affecting accessibility.
It's the image inside the 'skip links', not sure why you need it. Try this in your CSS:
img[alt='Skip Navigation Links'] {
display: none;
}
I have a master page which is using the style sheet..
My problem is that my vertical scrollbar does not work and horizontal scrollbar is not showing when i restore down the page.
here is my .aspx code..
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 id="Head1" runat="server">
<title>test</title>
<meta name="generator" content="HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<link href="NewFolder1/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.style1
{
font-size: medium;
font-weight: bold;
}
.style2
{
text-align: left;
}
</style>
</head>
<body bgcolor="#6794cb" >
<form id="form2" runat="server"
style="background-color: #6794CB;padding-bottom:1%; padding-top: 2%; width:100%; height:100%;">
<div id="container" style="visibility: visible;">
<div id="header">
<div class="style2">
<asp:TextBox ID="TextBox1" runat="server" BorderColor="#000099" BorderWidth="2px"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Search" BackColor="#ADC6C9"
BorderColor="#CCCCCC" BorderStyle="Outset" />
<asp:HyperLink ID="HyperLink1" runat="server">corp\tbruschi</asp:HyperLink>
<asp:HyperLink ID="HyperLink2" runat="server">Settings</asp:HyperLink>
<asp:HyperLink ID="HyperLink3" runat="server">Help</asp:HyperLink>
<asp:HyperLink ID="HyperLink4" runat="server">LogOff</asp:HyperLink>
<br />
<br />
<span class="style1"><br />
</span><br />
<asp:Panel ID="Panel1" runat="server" Width="100%">
<hr style="padding: 1px; background-color: #000000" />
</asp:Panel>
<br />
</div>
</div>
<!-- end header -->
<div id="left">
<asp:Panel ID="Panel3" runat="server" Height="100%" ScrollBars="Auto"
Width="100%">
<p>
</p>
<br />
<asp:TreeView ID="TreeView2" runat="server" OnUnload="TreeViewMain_Unload"
ontreenodepopulate="TreeView2_TreeNodePopulate"
onselectednodechanged="TreeView2_SelectedNodeChanged">
<Nodes>
<asp:TreeNode PopulateOnDemand="True" Text="Machine Groups"
Value="Machine Groups"></asp:TreeNode>
</Nodes>
</asp:TreeView>
<br />
<asp:TreeView ID="TreeView3" runat="server" OnUnload="TreeView3_Unload"
ontreenodepopulate="TreeView3_TreeNodePopulate"
onselectednodechanged="TreeView3_SelectedNodeChanged">
<Nodes>
<asp:TreeNode PopulateOnDemand="True" Text="Policies"
Value="Policies"></asp:TreeNode>
</Nodes>
</asp:TreeView>
<br />
</asp:Panel>
</div>
<div id="content-wrapper">
<div id="content-inner">
<!-- end left division -->
<div id="main">
<asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div> <!-- end footer -->
</div>
</form>
</body>
</html>
**
And here is my Css file code..
body
{
font-family: arial, verdana, helvetica, sans-serif;
font-size: 12px;
cursor: default;
background-color: #FFFFFF;
width: 100%;
height: 100%;
}
*
{
margin: 0px 0px 0px 1px;
padding: 0px;
text-align: left;
}
html
{
height: 100%;
margin-bottom: 1px;
}
#container
{
width: 80%;
margin-right: auto;
margin-left: auto;
text-align: left;
background-color: #FFFFFF;
height: 595px;
}
#header {
width:100%;
padding-top:15px;
height: 121px;
}
.spacer {
width:100%;
height:15px;
}
hr {
border-style: none;
border-color: inherit;
border-width: 0px;
color:Black;
background-color:#CDCDCD;
height: 0px;
width: 100%;
text-align: left;
}
h1 {
font-size:28px;
color:white;
background-color: #4F81BD;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-weight:300;
}
h2 {
font-size:15px;
color:Black;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-weight:300;
background-color:#FFFFFF;
}
h3 {
color:Black;
font-size:15px;
text-align:left;
font-weight:300;
padding:5px;
margin-top:5px;
}
#left {
float:left;
width:250px;
background-color:#FFFFFF;
color:black;
height: 417px;
}
#main
{
margin: 1px 5px 5px 260px;
border-left: 1px solid silver;
height: 409px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
p {
color:black;
background-color:#FFFFFF;
line-height:20px;
padding:5px;
}
a {
color:Blue;
text-decoration:none;
}
a:hover {
color:#cc0000;
text-decoration:underline;
}
#footer {
clear:both;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.right {
color:gray;
background-color:#FFFFFF;
float:right;
font-size:100%;
margin-top:5px;
}
.left {
color:gray;
background-color:#FFFFFF;
float:left;
font-size:100%;
margin-top:5px;
}
I have tried a lot of stuff but nothing seems to work... it will be great if some 1 could have a look and guide me in the right direction..
Thanks
when the browser window is restored down the content on the page gets cramped up..
This means i have to keep the content in the body or main to be fixed.. i dont know how to do that any help..???
In your css class, in the body definition, if you remove
position: fixed;
then the scrollbars appear.