#header {
background: black;
color: white;
font-family: Arial;
height: 10%;
text-align: center;
}
#footer {
clear: left;
width: 100%;
height: 10%;
background: black;
color: white;
font-family: Arial;
text-align: center;
}
<html>
<head>
<title>This is a page used by admins to change the content.</title>
</head>
<link REL="STYLESHEET" TYPE="text/css" HREF="../includes/style.css">
<div id="header">
<h2> <strong> Admin page. </strong> </h2>
</div>
<body style="background-color:cyan;">
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertext">
<h3>
<p> Insert your credentials here: Note that if you log in, you will be redirected to the main page.</p>
</h3>
<form action="index.php" method="post" autocomplete="off">
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<input type="submit" value="Submit" />
</form>
</div>
<?php if (isset($error)) { ?>
<strong> <small style="color:aa0000;">
<?php echo $error; ?>
</small></strong>
<?php } ?>
</div>
</div>
<br> <br> <br> <br>
<div id="footer">
Main Page
</div>
</body>
</hmtl>
I have a small site, and for some reason, this appears:
Page with issue. The issue is that a cyan line appears above the black header, when it shouldn't appear.
And the CSS code for the header, where the issue appears:
#header {
background: black;
color:white;
font-family:Arial;
height:10%;
text-align:center;
}
Now, what I've tried (all of these failed):
a) Change the header id on the first div to footer, which has this code:
#footer {
clear:left;
width:100%;
height:10%;
background:black;
color:white;
font-family:Arial;
text-align:center;
}
b) Change the code of header to be the same as footer.
The only thing that works, although I don't know why, is if I write something before the <h2> tag of the first div, like so:
<div id="header">
a<h2> <strong> Admin page. </strong> </h2>
</div>
Which results to this
I honestly don't know why the issue is present only here, because I have other sites where this issue isn't present. Could someone please explain?
Also, this HTML code is under some PHP code, which is essentially a login form.
The collapsing margin is cousing the problem. Remove top margin on h2 or add a padding or a boarder (1px) to a header element
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing.
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, or min-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.
More on mdn
Add This Line at the top of your CSS file:
* { box-sizing: border-box; margin: 0; padding: 0; }
Working Code:
* { box-sizing: border-box; margin: 0; padding: 0; }
#header {
background: black;
color:white;
font-family:Arial;
height:10%;
text-align:center;
}
#footer {
clear:left;
width:100%;
height:10%;
background:black;
color:white;
font-family:Arial;
text-align:center;
position: absolute;
bottom: 0;
left: 0;
}
<html>
<head>
<title>This is a page used by admins to change the content.</title>
<link REL="STYLESHEET" TYPE="text/css" HREF="../includes/style.css">
</head>
<body style="background-color:cyan;">
<div id="header">
<h2> <strong> Admin page. </strong> </h2>
</div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertext">
<h3>
Insert your credentials here: Note that if you log in, you will be redirected to the main page.
</h3>
<form action="index.php" method="post" autocomplete="off">
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<input type="submit" value="Submit" />
</form>
</div>
<?php if (isset($error)) { ?>
<strong> <small style="color:aa0000;">
<?php echo $error; ?>
</small></strong>
<?php } ?>
</div>
</div>
<br> <br> <br> <br>
<div id="footer">
Main Page
</div>
</body>
</html>
And for god's Sake please learn some basics of HTML
Related
I'm was just passing my time by working on random code of HTML and CSS where I have a div which has class .box and has an Image, Text and a Form in it with input boxes.
I found that when I provide text-align: center; to my parent, all elements comes in the center.
I can't understand what's happening here and why Image and Input boxes react text on text-align: center;
here is the codepen link to my code http://codepen.io/rhulkashyap/pen/MKvzzZ
#import url(https://fonts.googleapis.com/css?family=Roboto);
body{
margin:0;
font-family: 'Roboto', sans-serif;
}
.box{
width:500px;
border:1px solid #ccc;
margin:40px auto;
text-align:center;
padding:20px;
border-radius:5px;
}
<div class="box">
<img src="http://minions-2015.gloryone.pl/it/gfx/images/delivery/minion_1.png" alt="" width="200"/>
<h1>Hello Universe</h1>
<form>
<input type="text" placeholder="Username"/> <br />
<input type="text" placeholder="Password"/> <br />
<input type="submit" value="Login"/>
</form>
</div>
From the CSS specification:
This property describes how inline-level content of a block container is aligned. https://www.w3.org/TR/CSS2/text.html#alignment-prop
All inline and inline-block elements (input, img) are affected of text-align!
You can avoid this by using display:block; for the inner elements (like form, h1, div).
#import url(https://fonts.googleapis.com/css?family=Roboto);
body{
margin:0;
font-family: 'Roboto', sans-serif;
}
.box{
width:500px;
border:1px solid #ccc;
margin:40px auto;
text-align:center;
padding:20px;
border-radius:5px;
}
input {
display:block;
}
<div class="box">
<img src="http://minions-2015.gloryone.pl/it/gfx/images/delivery/minion_1.png" alt="" width="200"/>
<h1>Hello Universe</h1>
<form>
<input type="text" placeholder="Username"/>
<input type="text" placeholder="Password"/>
<input type="submit" value="Login"/>
</form>
</div>
A Test Case
div {
border:1px dashed #000;
text-align:center;
width:500px;
}
.block {
display:block;
}
.inline {
display:inline;
}
<div>
<input type="text" value="standard: inline-block">
<input type="text" class="block" value="with display:block">
<input type="text" class="inline" value="with display:inline">
</div>
When you pass text-align: center, it means that the data inside particular div will be placed center according to a rule. Data can be anything, it can be image, text or input box. Your elements are coming in center because all the inline elements are effected by "text-align: center". Please have a look on the following url https://www.w3.org/Style/Examples/007/center.en.html
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph. This text has no alignment specified.</p>
<div style="text-align:center;border:1px solid red">
This is some text in a div element!
</div>
<p>This is a paragraph. This text has no alignment specified.</p>
</body>
</html>
I'm newbie with HTML and CSS. I'm struggling with (horizontal) element alignement and I would appreciate any help provided.
This is what I got so far:
http://jsfiddle.net/vayacondios2015/umpk0xht/
HTML
<div class="mainbody">
<h2>This is uppercase title</h2>
<div class="right">
Link1
Link2
</div>
<div class="left">
<form>
<label for="textarea">This is a comment about textarea</label><br>
<textarea rows="10" cols="80" placeholder="Example" autofocus required></textarea><br>
<label for="textarea"><span>Note</span>: You can only use <span>this</span> word in textarea!</label><br>
<input type="submit" value="Send"><br><br>
</form>
</div>
<div class="middle">
Link3
<select><option>Select1</option></select>
<select><option>Select2</option></select><br><br>
</div>
</div>
<div class="mainbody">
TOP
<img> Home<br>
©Company
</div>
CSS in a link jsfiddle above (couldn't attach it properly).
This is how I would like it to be:
http://i.stack.imgur.com/VCWcL.jpg + centered on the page.
I'm looking forward for HTML semantic correction also, if you have some extra time and will.
Try these css. I will help you check this link https://jsfiddle.net/35sgma83/
.middle {
text-align: center;
}
div.mainbody {
text-align: center;
}
I would highly recommend getting to grips with HTML and CSS. I won't add specific links as there are thousands upon thousands of excellent resources all over the web.
However to help you I have modified the HTML so it's a little more structured:
<div class="mainbody">
<h2>This is uppercase title</h2>
<div class="right">
Link1
Link2
</div>
<div class="left">
<form>
<label for="textarea" class="form-label">This is a comment about textarea</label><br>
<textarea rows="10" cols="80" placeholder="Example" autofocus required></textarea>
<span class="note"><strong>Note</strong>: You can only use <strong>this</strong> word in textarea!</span><br>
<input type="submit" value="Send" class="submit"><br><br>
</form>
</div>
<div class="middle">
Link3
<select><option>Select1</option></select>
<select><option>Select2</option></select><br><br>
</div>
</div>
<div class="mainbody">
TOP
<img> Home<br>
©Company
</div>
You'll notice that the text area has a class, the note that appears under it also has been put into a span. I felt it better to use the <strong> tag when highlighting the bold text. You could go one step further and add a class in your CSS just for bold text. That will allow for re-usability.
I altered the CSS so that the container div which has .mainbody has the text aligned in the center. The rest of the changes are:
div.mainbody
{
text-align: center;
}
div.mainbody h2{
text-transform: uppercase;
text-align: center;
}
div div.right{
text-align: right;
float: right;
}
div div.left form label{
text-align: left;
}
.form-label, .note
{
float: left;
}
textarea {
width: 100%;
}
.submit {
clear: both;
display: block;
}
I think that satisfies your picture. Check out the fiddle here: http://jsfiddle.net/phyjauhc/1/
HTML semantic correction
Can be done via the w3c Markup Validation Service
Add below css
div.middle {
text-align: center;
}
div.ft_body {
text-align: center;
}
And change bottom div class name to ft_body and update cols="80" to cols="100%" for textarea
I've tried several combinations but have not found one yet that will display gracefully without adding unneeded scrolls bars.
I have a page that displays a Navigation column and then a content column. In the content column I am displaying a PDF in an IFrame. The left hand column is fixed at say 150px. I need the the right hand column to consume the rest of the width of the page and all of the height of the page. For some reason when the IFrame is put in the right hand div grows by about 5px and it adds an additional scroll bar that just mucks things up. I can make the scroll bar go away using the overflow-y: hidden but that seems to be hack rather than the right thing to do.
I've tried it with both an iframe and object tags and the behavior is the same.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html, body
{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
background-color:#808080;
}
div#nav
{
position: absolute;
height: 100%;
width: 150px;
top: 0;
left: 0;
background-color:#C0C0C0;
}
div#content
{
top: 0px;
height: 100%;
margin-left: 150px;
background-color: #2F4F4F;
}
iframe#pdf
{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="nav">
<fieldset class="lookupFields">
<div>
<label for="book" >Book:</label>
<input type="text" id="book" size="5" />
</div>
<div>
<label for="page">Page:</label>
<input type="text" id="page" size="5" />
</div>
<div>
<input type="button" id="btnViewImage" value="View" />
</div>
</fieldset>
</div>
<div id="content">
<iframe id="pdf" frameborder="0" src="06500001-2.pdf"></iframe>
</div>
</body>
</html>
Here's a FIDDLE based on your code.
The PDF seems to fit quite nicely and I don't get an extra scroll bar. The PDF page resizes with I change the size of the page (I'm using IE11).
I didn't change much in the HTML.
<div id="nav">
<fieldset class="lookupFields">
<div>
<label for="book" >Book:</label>
<input type="text" id="book" size="5" />
</div>
<div>
<label for="page">Page:</label>
<input type="text" id="page" size="5" />
</div>
<div>
<input type="button" id="btnViewImage" value="View" />
</div>
</fieldset>
</div>
<div id="content">
<iframe id="pdf" frameborder="0" src="http://www.historytools.org/sources/lincoln-gettysburg.pdf">
</iframe>
</div>
I'm working on a very very simple template. Or so I thought. The template didn't originally come with sidebars so I tried to sneak them in there myself. It's not working at all- I don't see my test text show up at all.
Can someone please point me to what I did wrong?
You can see the page in question at http://www.stfuisland.com/add.html
The code is posted below
<!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=iso-8859-1" />
<title>STFU Island</title>
<style type="text/css">
a.header:link {
color:#ffffff;
text-decoration:none;
hover {color:#ffcc00;}
}
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontent{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px; /*Height of frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
top: 75px; /*Set top value to HeightOfFrameDiv*/
//left: 0;
//right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}
#leftbar {
float: left;
width: 30%;
}
#rightbar {
float: right;
width: 30%;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 130px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="leftbar">
<div class="innertube">
<p>test</p>
</div></div>
<body>
<div id="rightbar">
<div class="innertube">
<p>test</p>
</div></div>
<div id="framecontent">
<div class="innertube">
<center><h3><font color="white"><a class="header" href="index.html">home</a> | Are You on an Island? | About</font></h1></center>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<center>
<form class="pure-form">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Your Name" name="creatorname" size="50">
<input type="text" class="pure-input-1-2" placeholder="Your Email" name="creatoremail">
<input type="email" class="pure-input-1-2" placeholder="Relationship to people being sent to island" name="relationship">
</fieldset>
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Name of first person sent to STFU Island" name="person1">
<input type="text" class="pure-input-1-2" placeholder="Their email address" name="email1">
</fieldset>
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Name of second person sent to STFU Island" name="person2">
<input type="text" class="pure-input-1-2" placeholder="Their email address" name="email2">
</fieldset>
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Name of third person sent to STFU Island" name="person3">
<input type="text" class="pure-input-1-2" placeholder="Their email address" name="email3">
</fieldset>
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Tell them why they're being sent to STFU Island!" cols="40" rows="5" name="reason">
</fieldset>
<button type="submit" class="pure-button pure-input-1-2 pure-button-primary" name="submit">Send them to STFU Island!</button>
<br>aaaaEmail addresses are sacred and we will treat them that way. Email addresses collected are only used to send emails when people are added or are being set free from STFU island. No other company will ever see or use them for any reason. Period.
</form>
</center>
</div>
</div>
</body>
</html>
Add to your CSS: (for #leftbar and #rightbar)
z-index: 2;
position: relative;
That works for me, also you might want to use color:#fff so you can see it.
Use text-align:center instead of center,
Use 1 div instead of multiple divs inside each other..
The source is very busy and messy; too messy for something which is pretty simple.
I'll make a clone which shows how simplified it can be and update later.
Your left side bar and right side bar are underneath your title. I imagine you want them inside the maincontent and next to your innertube. moving your divs next to the inner tube will show up in the layout you want.
<div id="leftbar">
...
</div>
<div class="innertube">
...
</div>
<div id="rightbar">
...
</div>
also add a float: left to your inner tube
Your header is position: absolute, which takes it out of the normal flow and hides your sidebars.
A typical three column layout with header and footer might look like
HTML
<div class="header">Header</div>
<div class="wrapper">
<div class="nav left">Left Navigation</div>
<div class="nav right">Right Navigation</div>
<div class="content">
</div>
</div>
<div class="footer">Footer</div>
CSS
.nav {
background: green;
width: 100px;
}
.nav.left {
float: left;
}
.nav.right {
float: right;
}
.content {
margin-left: 100px;
margin-right: 100px;
}
See full JSFiddle
Looking at your codes, I can't quite tell what you are after. Is it a three column layout with left and right bars and middle content has framecontent on top and maincontent at the bottom OR left bar | framecontent | right bar and have maincontent sitting under all three?
If you are trying to achieve a basic 3-column layout, there really is no need to have that div with a width of 100% plus an absolute position. The result will be the div sitting on top of the left and right bars.
just float left bar to the left (float:left), float the middle content to left as well and float the right content to right, and you will have 3 column layout. If you want both framecontent and maincontent to sit in the middle, then you can put maincontent inside the framecontent div.
I hope my explanation is not too confusing.
I am trying to learn table-less design and having a difficult time with something that should be easy
I am trying to make a save or cancel button at the bottom right of the screen in the designer it looks good but in the browser (IE and Chrome) the buttons move into the the right part of the form
I have tried height auto and leaving it out all together. If I fix the height of the main div then it works, but I don't always know that height. Is there anyway to make the buttons "flow" at the bottom of the main div?
Thank You
The Code
<%# Page Title="" Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="NewAccount.aspx.cs" Inherits="BudgetApplicationCSharp.NewAccount" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css" media="screen">
#container
{
width:500px;
margin: 5px;
}
#main
{
width:500px;
height:auto;
margin:1px;
}
#left
{
float:left;
width:50%;
padding-left:0px;
margin:0px;
}
#right
{
float:right;
width:50%
}
ol
{
list-style:none;
}
input[type=button]
{
float:right;
clear:right;
}
input[type=Text]
{
font:15px "MS Sans Serif";
}
label
{
font:15px "MS Sans Serif";
}
fieldset
{
padding:0px;
margin:0px;
border:0px none;
}
ol
{
padding:0px;
margin:0px;
border:0px none;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="container">
<div id="main">
<div id="left">
<fieldset>
<ol>
<li>
<label for="AccountName">
Account Name</label>
<input id="AccountName" runat="server" />
</li>
<li>
<label for="Description">
Description</label>
<input id="Description" runat="server" />
</li>
<li>
<label for="InstituteName">
Institute Name</label>
<input id="InstituteName" runat="server" />
</li>
<li>
<label for="AccountType">
Institute Name</label>
<select id="cboAccountType" runat="server">
</select>
</li>
</ol>
</fieldset>
</div>
<div id="right">
<fieldset>
<ol>
<li>
<label for="AccountNumber">
Account Number</label>
<input id="AccountNumber" runat="server" />
</li>
<li>
<label for="RoutingNumber">
Routing Number</label>
<input id="RoutingNumber" runat="server" />
</li>
</ol>
</fieldset>
</div>
</div>
<div id="buttons">
<input id="btnSave" type="button" value="Save" runat="server" />
<input id="btnCancel" type="button" value="Cancel" runat="server" />
</div>
</div>
</asp:Content>
Adding the style rule #buttons { clear: both; } should cause the button div to go below the floated divs.
this is a floating-problem. you need some kind of "clearfix". in your case i would add an overflow:hidden; to #main... this will create a new box model context, which will solve your issue. here you got a jsfiddle to demonstrate this behaviour (just remove the overflow:hidden there to see the difference) -> http://jsfiddle.net/3k3yd/
Add
overflow: auto
to the #main definition.
This solves what others have said without the need for additional markup (ie adding an empty div)
Here's a fiddle with the result.
Your experiencing an issue common across browsers that occurs when you float two divs within a container. The issue is that the container's height does not expand to the height of the floated divs within it. The fix to this issue is commonly referred to as the clearfix.
I have applied the clearfix to your markup in this example: http://jsfiddle.net/3D7hz/
It adds this styling to your stylesheet:
/* float clearing for IE6 */
* html .clearfix{
height: 1%;
overflow: visible;
}
/* float clearing for IE7 */
*+html .clearfix{
min-height: 1%;
}
/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
And adds the clearfix class to your main element in the markup:
<div id="main" class="clearfix">
This link describes the clearfix problem in detail:
http://www.positioniseverything.net/easyclearing.html