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.
Related
#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
I'm working on a browser app. I have read about a couple of dozen pages about the DIV tag. I just can not get it to work. I know I should use CSS but I will incorporate that at the end after I get some other things done.
Basically I want a header and a footer. Then a fixed width side bar and the rest to be filled with a content area. I almost got it but the sidebar starts too low (it should be the same height of the content) and the content does not expand to fit the width of the browser.
Here is what I have got:
<header style='background-color:#013499; height:60'>
<br>
<span style='color:white'>    Whole Number</span>
<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</header>
<div>
<div style='display:inline-block; background-color:#7690C5; width:200'>
Task1
<br>Task2
<br>
</div>
<div style='display:inline-block; background-color:#F2F2F2'>
Top
<br>Content
<br>Bottom
</div>
</div>
<footer style='background-color:#013499; height:60'>
<br>
<form name="Actions" action="test.html" method="post">
   
<input type="submit" name="send_button" value="Save">   
<input type="submit" name="send_button" value="Cancel">
</form>
</footer>
I found this post which helped a lot. But it is still not right. I cant seem to find any documentation that explains how these things work together.
I cant figure out how to get the content to fill up the remaining space. It ends up too short (sizing to the actual content) or extending beyond the screen size because at 100% it includes the width of the sidebar. I know whats going wrong but I do not know how to make it right.
I moved the styles out of the HTML now.
html, body {
height: 100%;
margin: 0;
}
header {
width: 100%;
height: 60px;
background-color: #013499;
margin: 0;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 0 -60px 0; /* the bottom margin is the negative value of the footer's height */
position: relative;
}
#sidebar {
background-color: #7690C5;
width: 300px;
height: auto !important;
bottom: 60px;
top: 60px;
display: inline-block;
position: absolute;
}
#content {
background-color: #F2F2F2;
width: 100%;
height: auto !important;
bottom: 60px;
top: 60px;
margin-left: 300px;
display: inline-block;
position: absolute;
}
footer {
margin: -60px 0 0 0;
width: 100%;
height: 60px;
background-color: #013499;
}
#buttons {
margin-right: 20px;
text-align: right;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Viewer test</title>
<link rel=Stylesheet Type='text/css' href=ERP.css>
</head>
<body>
<div id="wrapper">
<header>
<br>
<span style='color:white'>    Whole Number</span>
<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</header>
<div id="sidebar">
Task1<br>
Task2<br>
</div>
<div id="content">
Content
</div>
</div>
<footer>
<br>
<form id='buttons' name="Actions" action="test.html" method="post">
<input type="submit" name="send_button" value="Save">   
<input type="submit" name="send_button" value="Cancel">
</form>
</footer>
</body>
</html>
Firstly, don't use inline styles. Anyone that touches your code will hate you and when you want to apply a change to 100 elements that are the same at once you will equally hate yourself.
Also, HTML is the bread, CSS is the butter. On their own they're rubbish but together they're super awesome.
The only reason your "sidebar" isn't full height is because the content of the element next to is has more content. You need to incorporate CSS to stop this from happening.
See the fiddle
The reason why the sidebar was a little bit down was because of the inline-block that you had in the style.In the fiddle that i have made i have replaced the display:inline-block; with float:left;. Kindly see the fiddle
The new markup is as follows
<header style='background-color:#013499; height:60px'>
<br> <span style='color:white'>    Whole Number</span>
<select>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</header>
<div>
<div style='float:left; background-color:#7690C5; width:200px;'>Task1
<br>Task2
<br>
</div>
<div style='float:left; background-color:#F2F2F2;'>Top
<br>Content
<br>Bottom</div>
</div>
<footer style='clear:both;background-color:#013499; height:60px'>
<br>
<form name="Actions" action="test.html" method="post">   
<input type="submit" name="send_button" value="Save">   
<input type="submit" name="send_button" value="Cancel">
</form>
</footer>
Try using fixed (or absolute) positions perhaps. Try this, for example:
<header style="background-color:#013499; height:60; right: 0;left: 0;top: 0;position: fixed;">
<div style="display:inline-block; background-color:#F2F2F2;float: right;top: 60px;position: fixed;right: 0;">
<footer style="background-color:#013499; height: 62px;position: fixed;width: 100%;left: 0;bottom: 0;">
I'm trying to get 'ADD' and the search box to sit next to each other, side by side and align them right.
I've checked out other answers and I have implemented an inline-block solution, they sit side by side (but for some reason it's not working on the fiddle). How can I align the elements to the right of their parent?
<div class="span6">
<h2 class="pull-left">TITLE</h2>
</div>
<nav class="span6">
<form action="/gateway" method="get">
<input name="search" size="10" type="search" placeholder="Search" results=5>
</form>
<a class="btn" href="/add">ADD</a>
</nav>
Fiddle
JSFiddle does not use SCSS by default. Expand the Languages menu on the left and choose "SCSS" instead of "CSS". This should result in the elements aligning side-by-side.
To align the nav to the right, make both span6's 50% width and float/text-align the nav right.
.span6{
float: left;
width: 50%;
}
nav{
float: right;
text-align: right;
...
}
Fiddle
Erik Gillepsie is right. Here is your Fiddle in CSS structure and with the correct HTML input tag: http://jsfiddle.net/6MY8g/
<input name="search" size="10" type="search" placeholder="Search" results=5 />
Edit: to align right (only the second div), add a class "right" to your div and make it float right.
Try This : just replace your code with this
<div class="span6">
<h2 class="pull-left">ARTICLE MANAGER</h2>
</div>
<nav class="span6">
<form action="/gateway" method="get">
<input name="search" size="10" type="search" placeholder="Search" results=5>
<a class="btn" href="/add">ADD</a>
</form>
</nav>
So, if i'm understanding you correctly you want the title "Article Manager" and the search box and the ADD link to all be on the same line. AND, you want the "Article Manager" to be on the left, and the search and add group aligned to the right, correct?
Create a container for your row, and put everything in it, and give it 100% width so it spans the entire width of the page. Then float the title to the left, and float the search box group to the right. Done and done.
<div class="header-container">
<div class="span6 title">
<h2 class="pull-left">ARTICLE MANAGER</h2>
</div>
<nav class="span6 search">
<form action="/gateway" method="get">
<input name="search" size="10" type="search" placeholder="Search" results=5>
</form>
<a class="btn" href="/add">ADD</a>
</nav>
</div>
http://jsfiddle.net/9p2VM/7/
Your CSS is not well-formed in the fiddle. Without changing a line of code in the fiddle ie. by just indenting the CSS properly, your code works fine.
This is how your CSS is:
.span6{
float: left;
}
nav{
white-space: nowrap;
.btn{
display: inline-block;
}
form{
margin: 0;
padding: 0;
display: inline-block;
input[type=search] {
margin: 15px 0 0 0;
}
}
}
Change it to:
.span6 {
float: left;
}
nav.span6 {
white-space: nowrap;
float:right;
}
.btn {
display: inline-block;
}
form {
margin: 0;
padding: 0;
display: inline-block;
}
input[type=search] {
margin: 15px 0 0 0;
}
And it works fine. See here->http://jsfiddle.net/9p2VM/8/
Hope this helps!!!
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>
Hi there, I am designing a questionnaire which is embedded into an Accordion widget structure. Originally, I started it using table for layout (I know, I know) which was ok.
Question text goes to accordion panel and user's guidance and responses go to accordion content area.
Now I would like get rid of table and use pure css, maintaining the same layout. The problem is - I cannot put two major blocks (div=Guidance and form=Response) together on the same line (flow does not help). I can move "Response" up to line it up with Guidance but only if I use negative top: -250px which seems wrong.
So, here is HTML for a single question:
<div id="Q08150"> <!-- BEGIN OF PANEL -->
<div class="Question">
<span class="QNumber">8.150</span>
<span class="QText">Question text</span>
</div>
</div> <!-- END OF PANEL -->
<div class="PanelContent"> <!-- BEGIN OF CONTENT -->
<div class="Guidance">
<p>Guidance text1</p>
<p>"Guidance text 2</p>
</div>
<form class="Response">
<div class="ResponseControls">
<label><input type="radio" name="RadioXXXX" value="Y" id="RXXXXY">Yes</label>
<label><input type="radio" name="RadioXXXX" value="N" id="RXXXXN">No</label>
<label><input type="radio" name="RadioXXXX" value="NS" id="RXXXXNS">Not Seen</label>
<label><input type="radio" name="RadioXXXX" value="NA" id="RXXXXNA">Not Applicable</label>
</div>
<div class="responseDetails">
<div class="Observation">
<label for="ObsXXXX">Observation:</label>
<textarea name="observation" id="ObsXXXX" rows="6" disabled></textarea>
</div>
<div class="DueDate">
<label for="DueDateXXXX">Due date:</label>
<input name="DueDate" class="DueDate_in" type="text" id="DueDateXXXX"/>
</div>
<div class="actions">
<label for="paXXXX">Actions required to correct and/or prevent this observation:</label>
<textarea name="actions" id="paXXXX" rows="6"></textarea>
</div>
</div> <!-- end of div class="responseDetails" -->
</form> <!-- end of class="Response" -->
</div> <!-- END OF CONTENT -->
and the following CSS
.Question {
width: 100%;
}
.PanelContent {
width:100%
}
.QNumber {
font-weight: bold;
}
.QText {
font-weight: bold;
padding-left: 20px;
}
.Guidance {
width:55%;
padding-right: 20px;
}
.Response {
position: relative;
left:60%;
width: 45%;
}
textarea[name="observation"] {
resize:none;
width: 530px}
textarea[name="actions"] {
resize:none;
width: 530px}
Now, because it is accordion - I cannot wrap the entire question in a div, otherwise it will not work; so I have to keep question and response parts separated.
The top picture is what I would like to have and lower one shows current look using table.
Thanks in advance!
Surely, set these two major "players" as below:
.Guidance {
position: absolute;
width:55%;
padding-right: 20px;
}
.Response {
position: relative;
width: 37%;
float: right;
position: absolute will do the trick.