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;">
Related
I am created a web page. I have a div, with an image and some text, along with a form. The image goes outside of the div.
I want the gray line to expand to fit the image. I want to be able to put any size image, height (already works), and width in there, and have it be fine, so fixed width divs are out of the way. I am also using flexbox styling.
Here is the minimum reproducible code.
.cardstyle {
margin: 2em;
border: 2px solid lightgray;
overflow: visible;
}
#block_container {
display: flex;
}
<form method="POST">
<div id="block_container">
<div class="cardstyle">
<div style="width:15vw; height:15vw">
<img src="https://cdn.iphoneincanada.ca/wp-content/uploads/2020/03/model-3.png" height="100%">
</div>
<br>
<p style="font-size: 2.5vw; margin-left: 7%;">Tesla Model Y</p>
<p style="margin-left: 7%;">Luxury Electric Car. </p>
<p style="margin-left: 7%;">60000/each</p>
<select style="margin-left: 7%;" name="select">
<option value="0">0</option>
</select>
<br>
<br>
</div>
</div>
</form>
Try putting display: inline on the div surrounding the img tag
Example of it working here: https://codepen.io/annaazzam/pen/NWxwpgJ?editors=1010
The Markup you wrote! Could be more web standard and semantic, Here I just update code on top of your code.
<!DOCTYPE html>
<html>
<head>
<style>
.cardstyle {
margin: 2em;
border: 2px solid lightgray;
}
#block_container {
display: flex;
}
.cardstyle img {
object-fit: contain;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<form method="POST">
<div id="block_container">
<div class="cardstyle" style="width:25vw;">
<img src="https://cdn.iphoneincanada.ca/wp-content/uploads/2020/03/model-3.png">
<br>
<p style="font-size: 2.5vw; margin-left: 7%;">Tesla Model Y</p>
<p style="margin-left: 7%;">Luxury Electric Car. </p>
<p style="margin-left: 7%;">60000/each</p>
<select style="margin-left: 7%;" name="select">
<option value="0">0</option>
</select>
<br>
<br>
</div>
</div>
</form>
</body>
</html>
I'm trying to turn my header at http://ukgraffiti.tumblr.com/ into a link back to the main page.
CSS:
#header {
position: fixed;
padding: 50px 500px 90px 80px;
background-image: url(http://s32.postimg.org/nqrhk4r9h/graffiti_header3.jpg);
background-repeat: no-repeat;
}
HTML:
<div id="header">
<h1>{Title}</h1>
</div>
The problem seems to be that the id and h1 actually control the default text header, which I've hidden with CSS, rather than the image I've put in its place.
I tried giving creating a simple link with a different id, and then changed the id in the CSS, but this didn't work and messed up my layout anyway.
Thanks in advance.
You can just apply the header id to the <a> tag:
<a id="header" href="http://ukgraffiti.tumblr.com/">{Title}</a>
I just looked at your site now. The issue is that div is what you wanna make clickable because it has a background image. So do this
Edited: So I made some changes to get what you may want
<div>
<img src="http://s32.postimg.org/nqrhk4r9h/graffiti_header3.jpg">
<div id="topsearch">
<form action="http://ukgraffiti.tumblr.com/search" method="get" id="searchform">
<p><input onfocus="this.value=''" type="text" value="Search" name="q" results="5"></p>
</form>
</div>
Also to remove white gap, remove margin-top: 200px; from #content.
Replace your html:
<div id="header">
<h1>UK GRAFFITI</h1>
<p id="description"><br></p>
<div id="topsearch">
<form action="/search" method="get" id="searchform">
<p>
<input onfocus="this.value=''" type="text" value="Search" name="q" results="5">
</p>
</form>
</div>
</div>
With this one:
<a id="header" href="href="http://ukgraffiti.tumblr.com/">
<h1 class="header-text">UK GRAFFITI</h1>
</a>
<form action="/search" method="get" id="searchform">
<input onfocus="this.value=''" type="text" value="Search" name="q" results="5">
</form>
And add this to your css:
#searchform {
width: 80px;
position: absolute;
top: 128px;
left: 738px;
z-index: 1000;
}
Here you can set the position of your search box.
And set the text-indent for the headline. Think you have it as text just for search engines.
.header-text {
text-indent: -9999em;
}
#Jud This work. I make a full copy of your page html and change like described. Here you can test it.
CODEPEN
I have a page with a menu which is used to generate a table out of MySQL query which fields are selected in the menu. I needed the "Refresh table button" to generate the table only in part of the screen and in terms of functionality the iframe did its job. When I focused on the view, however, I started having problems with the frame. Although it seems bounded on the left and top, on the right and bottom it exceeds the size of the parent frame div and the body div.
Is there anyway to deal with this without changing the functionality?
HTML
<div class="menucontainer">
<div class="leftbox">
Selected options
<form method="post" action="genTable.php" target="myIframe">
<select id="leftValues" name="cols[ ]" size="5" multiple>
<option>paper</option>
<option>authors</option>
</select>
<div class="submitbutton">
<input type="submit" name="submit" value="Refresh Table" onclick="selectAll();">
</div>
</form>
</div>
<div class="buttons">
<input type="button" id="btnLeft" value="<<" />
<input type="button" id="btnRight" value=">>" />
</div>
<div class="rightbox">
Available options
<select id="rightValues" size="5" multiple>
<option>id</option>
<option>journal</option>
<option>title</option>
</select>
</div>
</div>
<h1>Financial Frictions Papers</h1>
</div>
<iframe name="myIframe">
</iframe>
</div>
</body>
CSS
body {
font-family: Helvetica, Arial, Verdana, sans-serif;
color: #111;
font-size: 12px;
background:#2e2e2e;
height: 100%;
/*292929*/
/* default bfbfbf*/
}
.frame {
padding: 20px;
color: #000000;
height: 100%;
min-height: 580px;
background: #3AAB8D;/*#504f4f;*/
}
.top {
background: #1188FF;
}
iframe{
position: absolute;
width: 100%;
height: 100%;
}
You're positioning the iframe absolutely and then giving it a width of 100%, which means it's going to be as wide as the entire page, not the div the tag occurs in because it isn't really 'in' the div.
Try either reducing the width or not making the iframe absolutely positioned.
When I edit your CSS in Firefox, removing the absolute positioning and changing the width to 99.8% (to accomodate the scrollbar) worked.
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.