This should be a no brainer but I have a small mystery with the CSS for a pair of divs. Here is the HTML:
<body>
<form id="form1" runat="server">
<div class="centered" id="selectReport">
<asp:DropDownList ID="p0" runat="server"></asp:DropDownList>
<asp:Button ID="viewReport" runat="server" Text="View Report" OnClick="ViewReport" />
</div>
<div>
...a centered table...
</div>
<div class="centered" id="buttons">
<asp:Button runat="server" ID="saveEdits" Text="Save Edits" OnClick="SaveEdits_Click" />
<asp:Button runat="server" ID="redoEdits" Text="Redo Edits" OnClick="RedoEdits_Click" />
</div>
</form>
</body>
If I put this CSS in the same file:
<style>
.centered
{
margin: auto;
}
</style>
Both of the divs are left justified.
However if I put this CSS in a separate file:
.centered
{
margin: auto;
}
the first div is left justified while the second div is centered. I also tried writing identical CSS for each div id with the same results -- the first one is left justified while the second is centered.
Here is the screenshot:
And here is the rendered HTML:
<!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><title>
Network Operations Dashboard
</title>
<link href="NetworkOperations.css" rel="Stylesheet" type="text/css" /></head>
<body>
<h1 style="text-align: center; font-size: 30pt" >Network Operations Dashboard</h1>
<form method="post" action="NetworkOperationsReport.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTAyNTkyMjcyNw9kFgICAw9kFgQCAQ8QDxYGHgxBdXRvUG9zdEJhY2tnHg1EYXRhVGV4dEZpZWxkBQ9BcmNoaXZlRmlsZU5hbWUeC18hRGF0YUJvdW5kZ2QQFQYURGFzaGJvYXJkXzIwMTItTWF5LTEGVHJlbmRzBlN0eWxlcwdTY3JpcHRzCEFwcF9EYXRhB0FjY291bnQVBhREYXNoYm9hcmRfMjAxMi1NYXktMQZUcmVuZHMGU3R5bGVzB1NjcmlwdHMIQXBwX0RhdGEHQWNjb3VudBQrAwZnZ2dnZ2dkZAIFDxYCHgdWaXNpYmxlaGRkUrfXkiabK3mrjfzXNLtumhzsq/lXy+2nab/n0oCTc60=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebApp/WebResource.axd?d=J72WHhxz11o7F4T65-nk2s6O8A5yTLJdKan5j1GWRlsyEEDvOExumPz8U-TIG_EGGghKU7cpVHXCxLarpokjZhHzOtYqhdwyIhY1CB4wM9o1&t=634746614287359483" type="text/javascript"></script>
<div class="aspNetHidden">
<input type="hidden" name="__SCROLLPOSITIONX" id="__SCROLLPOSITIONX" value="0" />
<input type="hidden" name="__SCROLLPOSITIONY" id="__SCROLLPOSITIONY" value="0" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCwLY4tiyDgLwppLRBwKPpuCFAgLH2cPODQLV24ysCQLizdSlDwKFsO2xAgLfhdOhDAK46ZnWCAKVndrNAwK4r5OaCipKQs8Qpkd25hYiUSafRFyvUGzpZRXvRzfKNuVsC9Js" />
</div>
<div class="centered" id="selectReport">
<select name="Archives" onchange="javascript:setTimeout('__doPostBack(\'Archives\',\'\')', 0)" id="Archives">
<option selected="selected" value="Dashboard_2012-May-1">Dashboard_2012-May-1</option>
<option value="Trends">Trends</option>
<option value="Styles">Styles</option>
<option value="Scripts">Scripts</option>
<option value="App_Data">App_Data</option>
<option value="Account">Account</option>
</select>
<input type="submit" name="viewReport" value="View Report" id="viewReport" />
</div>
<div class="centered" id="buttons">
<input type="submit" name="saveEdits" value="Save Edits" id="saveEdits" />
<input type="submit" name="redoEdits" value="Redo Edits" id="redoEdits" />
</div>
I must be missing the blindingly obvious but I am stumped. Any advice is appreciated.
Regards.
Try giving your divs a fixed width and centering them:
.centered {
margin: 0 auto;
width: 60%; // or whatever you need.
}
To center a div you usually need to have given it a concrete width.
Your div is likely already centred (although if your CSS rules are, literally, just margin: auto, they're not doing anything until you specify a width on your div). The issue is that the controls inside it (your form fields) are not.
Try adding text-align: center; to your .centered CSS rules.
Remember input elements are inline elements, meaning they are affected by rules that would apply to text (like text-align, line-height, text-indent etc.).
You can see this for yourself by using some developer tools to inspect what's going on. IE has some, WebKit browsers like Chrome and Safari have them, Firefox has them, Opera does too. With them, you can (in real time) understand how your CSS rules affect layout, and the shape of the elements on the page.
Answer provided by a comment from Kit Grose: http://jsfiddle.net/ZrdUY/1/.
Related
I'm new to the ARIA thing and from what I've read on the internet about it nothing says something should be installed in order for this to work. I've tried a very simple example but nothing happens except pure html5 with a little css that I wrote in the style tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<h1>ARIA<h1>
<style>
input:focus + [role="tooltip"] {
display: block;
position: absolute;
top: 100%;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>Login form</legend>
<div>
<label for="username">Your username</label>
<input type="text" id="username" aria-describedby="username-tip" required />
<div role="tooltip" id="username-tip">Your username is your email address</div>
</div>
<div>
<label for="password">Your password</label>
<input type="text" id="password" aria-describedby="password-tip" required />
<div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>
</div>
</fieldset>
</form>
</body>
</html>
I'm clearly doing something wrong, so can someone please tell me what exactly? :D
I have tried styling my form submit button, but it isn't responding to any CSS styling. I tried using its class individually and also id individually and even both the class and id together, but nothing is working. I've attached the code:
HTML/PHP
if ($_POST['submit']) {
$member_username = "username";
$member_password = "pass****";
$username = $_POST['username'];
$password = $_POST['password'];
if ($username == $member_username && $password == $member_password) {
$_SESSION['username'] = $username;
header('Location: secret.php');
} else {
echo 'Incorrect username or password';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel=stylesheet />
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<title>Topaz</title>
</head>
<body>
<div class="index">
<div class="indexcontainer">
<h1>Topaz</h1>
<div class="indexform">
<form action="index.php" method="POST">
<input class="textbox" type="text" name="username" placeholder="Username" /><br /><br /><br />
<input class="textbox" type="password" name="password" placeholder="Password" /><br /><br /><br />
<input class="submit" id="submit" type="submit" name="submit" value="Login" />
</form>
</div>
</div>
</div>
</body>
</html>
CSS
.submit {
width: 200px;
}
#submit {
width: 200px;
}
Its probably just relative pathing to the style sheet, hit F12 (for chrome, though may need to enable dev console, google if needed) and see whether the network panel or console panel show a 404 error for one or more files.
The actual css applies fine
<!DOCTYPE html>
<html>
<head>
<!--
<link href="style.css" rel="stylesheet" />
-->
<style>
.submit{width:200px; color:red;}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<title>Topaz</title>
</head>
<body>
<div class="index">
<div class="indexcontainer">
<h1>Topaz</h1>
<div class="indexform">
<form action="index.php" method="POST">
<input class="textbox" type="text" name="username" placeholder="Username" />
<br />
<br />
<br />
<input class="textbox" type="password" name="password" placeholder="Password" />
<br />
<br />
<br />
<input class="submit" id="submit" type="submit" name="submit" value="Login" />
</form>
</div>
</div>
</div>
</body>
</html>
Ensure that "style.css" is on the same level as the php or html file that is actually being hit, or use relative pathing.
Also its good form to validate your html and css, as unrelated syntax mistakes can break styling.
For html: https://validator.w3.org/
For css: https://jigsaw.w3.org/css-validator/
But these likely wont be able to pickup on pathing issues, just syntax, so ensure you use the developer console for whatever browser your using.
You can try to add an inline style to have precedent over the external style sheet. Just use the tag and then put in the in the head tag area.
<style>
.submit {
width: 200px;
}
#submit {
width: 200px;
}
</style>
I've been working on our company website this morning and I've hit a bit of a problem. I have the page formatted into two cells, one on the right and one on the left. The one on the right contains an image which is around 790 pixels wide. When I shrink the browser window to the point to where it will no longer fit, the whole cell jumps below the first cell. How can I prevent this from happening?
Code...
xhtml
<!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>
<title>
Test
</title>
<link href="StyleSheet1.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg2ODI4NzA2OWQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFCUNoZWNrQm94MU+tEbqmFYLAUCuNpKlG5GJdxlTP" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwKUzskuAuzRsusGAoznisYGAuzR9tkMAuzRirUFAoLk17sJArursYYIEh1rVMqwd3ohPqFy9J1P74IvCz4=" />
</div>
<div style = "padding-left:15%;">
<div class = "header">
<img src="images/logoclr.bmp" style="height:56px;width:253px;border-width:0px;" />
<input name="TextBox1" type="text" id="TextBox1" style="width:414px;" />
<input type="submit" name="Button1" value="Search" id="Button1" />
</div>
<br /><br /><br /><br /><br />
<div class="loginSide">
<div class = "internalBox">
Log On To Invoice Viewer
</div>
<br />
<span>Login ID:</span>
<br />
<input name="TextBox2" type="text" id="TextBox2" />
*<br />
<br />
<span id="Label1">Password</span>
<br />
<input name="TextBox3" type="text" id="TextBox3" />
*<br />
<br />
<input id="CheckBox1" type="checkbox" name="CheckBox1" />
Remember my Login ID<br />
<br />
<div style="padding-left:20px;"><input type="submit" name="Button2" value="Login" id="Button2" /></div>
<br />
</div>
<div class = "imageSide">
<img src="images/1_back11.jpg" style="border-width:0px;" />
</div>
</div>
</form>
</body>
</html>
css
body
{
background-color:rgb(227,227,225);
font-family:Verdana;
font-size:.8em;
margin-left:auto;
}
.loginSide
{
float:left;
border-width:1px;
border-right:0px;
border-color:rgb(186,107,255);
border-style:solid;
width:275px;
height:292px;
padding:10px;
background-color:rgb(223,232,237);
}
.imageSide
{
border-width:1px;
border-color:rgb(186,107,255);
border-style:solid;
width:792px;
padding:10px;
background-color:rgb(223,232,237);
float:left;
}
.internalBox
{
padding-left:50px;
padding-right:50px;
padding-top:5px;
padding-bottom:5px;
background-color:rgb(54,113,109);
color:White;
}
Try to set an id to the div that wraps everything (e.g. <div id="wrapper" style="padding-left:15%;">) and create a CSS selector for it where you specify a minimum width:
#wrapper {
min-width: 900px;
}
The width you should choose according to the minimum width where the image div doesn't wrap. Of course, now that you have a selector for the wrapper, you could move the padding-left into the CSS as well instead of having it inline.
Here's and example fiddle
You can try to make the width of your cells dynamic. If you use a percentage instead of a fixed width it will automatically adjust to the window size.
.imageSide
{
border-width:1px;
border-color:rgb(186,107,255);
border-style:solid;
width:70%;
padding:10px;
background-color:rgb(223,232,237);
float:left;
}
.loginSide
{
float:left;
border-width:1px;
border-right:0px;
border-color:rgb(186,107,255);
border-style:solid;
width:30%;
height:292px;
padding:10px;
background-color:rgb(223,232,237);
}
Just Don't provide the width of imageSide because it must adjust with remaining width of browser window while loginSide must stick to its own solid width.
Try this fiddle.
One more thing, you are using float: left in both loginSide and imageSide, just use it at loginSide, imageSide will than adjust automatically.
Here is the updated fiddle.
And, finally if you want your own code without any much altration, i got this also for you. :)
Here is the your second updated fiddle with imageSide width:792px also..
Cheers.. :)
Figured it out, I wrapped the image in this div:
<div style = "overflow: hidden;">
I've got three items on the top of my web page. I expect them to be located left, center, and right. However, that one in the center is a bugger (partially because it's created late in the game). I've tried the auto margin tricks with no luck. I've tried relative positioning but can't get it perfectly centered (and it draws on its neighbors). In the full code below, can you get the "showInMiddle" centered? You need to click the login button for that item to show up. Ideally, the items would wrap if the page was too narrow but still maintain their alignment (rather than drawing on top of each other or all on the left).
<!DOCTYPE html>
<html>
<head>
<title>This is dumb</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js"></script>
</head>
<body style="font-family: 'Segoe UI'; margin: 5px 20px;">
<header style="width: 100%">
<h4 id="showOnLeft" style="font-size: 1.1em; display: inline;">I'm the title</h4>
<span id="showInMiddle" data-bind="visible: LoggedIn">
I'm supposed to be in the middle with my two buttons.
<button>B1</button>
<button>B2</button>
</span>
<div id="showOnRight" style="display: inline; float: right">
<form id="someLoginForm" style="display: inline;" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<input type="submit" value="Login" />
</form>
<form id="someLogoutForm" style="display: inline;" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
<span>Howdy</span>
<input type="submit" value="Logout" />
</form>
</div>
<nav><hr/></nav>
</header>
<script type="text/javascript">
function LoginViewModel() {
var self = this;
self.LoggedIn = ko.observable(false);
self.login = function (formElement) { self.LoggedIn(true); };
self.logout = function (formElement) { self.LoggedIn(false); };
}
ko.applyBindings(new LoginViewModel());
</script>
</body>
</html>
You cannot center a span because it's an inline element which doesn't know its width by default.
You can simply replace span with div like this (watch the inline CSS):
<div id="showInMiddle" data-bind="visible: LoggedIn" style="text-align:center ">
I'm supposed to be in the middle with my two buttons.
<button>B1</button>
<button>B2</button>
</div>
This is quick - I am off to go home. Try adjusting the width where the login form is concerned. You need to be aware that the total of floatdiv should never exceed the total of container or it will go wrong.
<!DOCTYPE html>
<html>
<head>
<title>
This is dumb
</title>
<style>
#container {
width:900px;
margin: auto 0;
overflow: auto;
}
.floatdiv {
float:left;
margin:0;
}
</style>
</head>
<body style="font-family: 'Segoe UI'; margin: 5px 20px;">
<div id="container">
<div class="floatdiv" style="font-size: 1.1em; width:200px">
I'm the title
</div>
<div class="floatdiv" id="showInMiddle" data-bind="visible: LoggedIn" style="text-align:center; width:300px ">
<button>
B1
</button>
<button>
B2
</button>
</div>
<div class="floatdiv" id="showOnRight" style="width:300px; float:right; text-align:right">
<form id="someLoginForm" style="" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<input type="submit" value="Login" />
</form>
<form id="someLogoutForm" style="" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
<span>
Howdy
</span>
<input type="submit" value="Logout" />
</form>
</div>
</header>
</div>
</body>
</html>
It ends up that this works flawlessly when you use a table. Who knew?
<!DOCTYPE html>
<html>
<head>
<title>This is dumb</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js"></script>
<style type="text/css">
table, tr, td, h4, div { margin: 0px; padding: 0px; }
</style>
</head>
<body style="font-family: 'Segoe UI'; margin: 5px 20px;">
<header style="width: 100%">
<table style="width: 100%; border-width: 0px;">
<tr>
<td><h4 id="showOnLeft" style="font-size: 1.1em;">I'm the title</h4></td>
<td>
<div id="showInMiddle" data-bind="visible: LoggedIn" style="text-align: center;">
I'm supposed to be in the middle with my two buttons.
<button>B1</button>
<button>B2</button>
</div>
</td>
<td>
<div id="showOnRight" style="text-align: right;">
<form id="someLoginForm" style="display: inline;" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<input type="submit" value="Login" />
</form>
<form id="someLogoutForm" style="display: inline;" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
<span>Howdy</span>
<input type="submit" value="Logout" />
</form>
</div>
</td>
</tr>
</table>
<nav><hr/></nav>
</header>
<script type="text/javascript">
function LoginViewModel() {
var self = this;
self.LoggedIn = ko.observable(false);
self.login = function (formElement) { self.LoggedIn(true); };
self.logout = function (formElement) { self.LoggedIn(false); };
}
ko.applyBindings(new LoginViewModel());
</script>
</body>
</html>
Is there any way to have the width of a <fieldset> be the width of the largest field inside it?
Just put your question in a general context. A <fieldset> is a block element, thus its default behaviour is to expand to fill the available horizontal space. So you basically have two options:
Set a new explicit width.
Change its layout from block to something else.
Here's a quick example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
fieldset.explicit-width{
width: 1%; /* Will expand to fit content */
}
fieldset.inline-block{
display: inline-block;
}
--></style>
</head>
<body>
<fieldset><legend>Unstyled</legend>
<p><input type="text" size="2"></p>
<p><input type="text" size="20"></p>
<p><input type="text" size="50"></p>
<p><input type="text" size="30"></p>
</fieldset>
<fieldset class="explicit-width"><legend>Explicit width</legend>
<p><input type="text" size="2"></p>
<p><input type="text" size="20"></p>
<p><input type="text" size="50"></p>
<p><input type="text" size="30"></p>
</fieldset>
<fieldset class="inline-block"><legend>Inline-block</legend>
<p><input type="text" size="2"></p>
<p><input type="text" size="20"></p>
<p><input type="text" size="50"></p>
<p><input type="text" size="30"></p>
</fieldset>
</body>
</html>
Update: I forgot to mention that floating a block-level element also changes its layout.
Do you mean this:
jsFiddle fieldset that is wide as biggest containing input-element
<form action="#" id="test" name="test">
<fieldset>
<input type="text" class="first" />
<input type="text" class="second" />
<input type="text" class="third" />
</fieldset>
</form>
fieldset{
overflow: hidden;
float: left;
background-color: #eee;
}
input {
display: block;
}
input.first{ width: 150px; }
input.second{ width: 200px; }
input.third { width: 250px; }
It is a floating fieldset. If you want it in another way, please let us know.