I have a page with the following structure:
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="css/coachmaster.css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="dashboard.js"></script>
</head>
<body>
<div id="outer">
<div id="wrap1">
<img id="logo" src="/images/dashboard.png" />
<div id="status">Status</div>
<div id="menu">Menu</div>
</div>
<div id="grip1" ></div>
<div id="wrap2">
<div id="content">
<table class="title"><tr><td>Ian's Dashboard</td></tr></table>
<div class="fields">This is the screen content
</div>
<table class="listhead"><tr>.. row of command buttons... </tr></table>
</div>
</div>
</div>
</body>
</html>
The key CSS fragment are:
div.fields {
position: absolute;
top: 32px; bottom: 36px;
width: 99.8%;
overflow-y: scroll;
border-right:1px solid #d3d1d1;
border-left:1px solid #d3d1d1;
}
table.listhead {
position: fixed;
bottom: 0;
width: 100%;
}
This means that the .listhead table is always at the bottom of the screen, and when the div.fields gets too big for the space available, a vertical scroll bar appears.
The customer wants the table.listhead moved up to butt on to the div.fields so any spare space appears below it.
I have tried everything I can think of to achieve this, and failed. I wondered about wrapping div.fields with table.listhead, but I could not get anything to work.
Is it even possible?
Thanks. Ian
a little easier to understand now, thanks! :)
I would try playing around with position, I could move the bottom table up by doing:
table.listhead {
position:relative;
top: 285px;
}
Related
I have the following code:
<html>
<head>
<title>convas</title>
</head>
<body>
<canvas width="1745" height="569" style="width: 1730px; height: 1680px; position: absolute; z-index: 1"></canvas>
<div id="container">
html elemets (buttons, links)
</div>
</body>
</html>
The canvas is over the div element, but any buttons or links do not works.
Please check my example:
http://jsfiddle.net/58WC6/2/
It needs to work the image link with the falling snow over it.
I'm assuming you want to sit the Container over the Canvas?
http://jsbin.com/eNUdUvAg/4/
Float the container and set the Z-Index.
<canvas width="1745" height="569" style="width: 1730px; height: 1680px; position: absolute; z-index: -1; background-color:red;"></canvas>
<div id="container" style="z-index:99 float:left;">
<button />
hi,
Currently the text is at the top of my website but i want it bottom;
<p style="text-align:relative;">this is best day ever!this is best day ever!this is best day ever!<p>
when i edit it and add text-align:bottom it dosent works!!!!
Try this code :
<html>
<head>
<title>test</title>
</head>
<body>
<div style="position: relative">
<p style="position: fixed; bottom: 0; width:100%; text-align: center"> TEXT YOU WANT
</p>
</div>
</body>
</html>
Try this:
style="position:absolute; bottom:0px;"
Absolutely position the element and set its bottom property to 0.
p{
position: absolute;
bottom: 0;
}
Working Example http://jsfiddle.net/zMKbf/
<p id="Bottom">this is best day ever!this is best day ever!this is best day ever!<p>
and CSS :
#Bottom {
position : absolute;
bottom : 0;
}
Demo
p {
height:200px;
display: table-cell;
vertical-align: bottom;
}
This is a better way...
<html>
<head>
<title>test</title>
</head>
<body>
<div style="display: table;">
<p style="display: table-row;vertical-align: bottom; text-align: center"> TEXT YOU WANT
</p>
</div>
</body>
</html>
i found it in this question, http://stackoverflow.com/questions/526035/how-can-i-position-my-div-at-the-bottom-of-its-container/19110204#19110204
in Hashbrown answer
Below is my code for a simple page. I'm trying to have (A) a banner on the top which consists of a logo, a header to its right and then a "sign in/register" link, (B) below all this then I will have the main text of the site.
I would like a large gap between the main text and banner at the top. So I divide the page up with divs. But when I apply a "margin-top" to #main to keep the banner at a certain distance, EVERYTHING, that is, the main text and everything in my banner all move down the page. Same thing happens if I apply a "margin-bottom" to the header element.
I'm kind of new to CSS and HTML but I though I had the hang of it until this. I've scratched my head for ages about this but I can't seem to understand positioning here at all!
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta charset="utf-8"/>
<title>My Page</title>
</head>
<body>
<header id="masthead" role="banner">
<img src="jep.jpeg" alt="My Page">
<h2>Welcome!</h2>
<p>Sign in Register</p>
</header>
<div id="main" role="main">
<!--main text here -->
</div>
</body>
</html>
Here is the CSS code:
#masthead {
position: relative;
}
#masthead img {
position: absolute;
}
#masthead h2 {
position: absolute;
left: 150px;
}
#masthead p {
position: absolute;
right: 10px;
}
#main {
margin-top: 40px;
}
The problem is that all of the absolute positioning removes the elements from the document flow. That means your header has a height of 0px, but everything is still positioned relative to it.
Just give your masthead a height.
JSFiddle
You just need to wrap your elements in their own containers so you can position them a little bit better. You will probably want to define some heights in this also. Including a height on #masthead
Assuming you need a responsive design:
<header id="masthead" role="banner">
<section class="logo">
<img src="jep.jpeg" alt="My Page">
</section>
<section class="title">
<h2>Journal of Electronic Publishing</h2>
</section>
<section class="sign-in">
Sign in Register
</section>
</header>
.logo {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}
.title {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}
.sign-in {
width: 30%;
float: left;
margin-right: 0;
box-sizing: border-box;
}
Note that the total 100% is assuming you include the margins in that calculation. So, 30+30 = 60 + 5 + 5 = 70 + 30 = 100%
Edit: Now that I can see your CSS, your specific issue is the use of position:absolute;. Removing these should get you along the correct path.
I suggest using a table layout. Using 1-row tables for styling is a bit frowned upon by some, but this seems to work:
HTML:
<body>
<header id="masthead" role="banner">
<table>
<tr>
<td><img src="jep.jpeg" alt="My Page"></td>
<td><h2>Welcome!</h2></td>
<td><p>Sign in Register</p></td>
</tr>
</table>
</header>
<div id="main" role="main">
<p>Testing</p>
</div>
</body>
</html>
and CSS:
#masthead {
width: 100%;
}
#masthead table {
width: 100%;
}
#main {
margin-top: 40px;
}
EDIT: Using divs.
This is a bit messy, but it works. It's been a while since I've used div for positioning like this.
HTML:
<body>
<header>
<div class="col">
<div class="content">
<img src="jep.jpeg" alt="My Page">
</div>
<div class="content">
<h2>Welcome!</h2>
</div>
<div class="content">
<p>Sign in Register</p>
</div>
</div>
</header>
<div id="main" role="main">
Testing
</div>
</body>
</html>
CSS:
header {
width: 100%;
}
.col {
height: 100px;
position: relative;
}
.content {
float: left;
width: 33.3%;
}
#main {
margin-top: 50px;
}
I'm having difficulty in placing a div containing contact info in my header. I've been reading up on this issue for a few hours & haven't quite found a solution yet. I'm trying to stack my contact info on the top right of my layout.
--
Image of what I'd like to achieve:
http://i45.tinypic.com/2zrgu8o.jpg
Image of what my code is currently producing:
http://i48.tinypic.com/mbhlcz.jpg
--
My HTML:
<html>
<head>
<link rel="stylesheet" href="/css/header.css" />
</head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" /></head>
<body style="margin:0; padding:0;">
<div id="logo">
<img src="/images/logo-top.png">
</div>
<div class="contact">
Email: sadlkj#yahoo.com | Phone: 1 (732) 235-7239
</div>
<div id="header-bg">
</div>
</body>
</html>
My CSS:
#logo {
postion: fixed;
width: 300px;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
#header-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 50px;
background-image: url("/images/header-bg.png");
background-repeat: repeat-x;
z-index: -1;
}
.contact {
float:right;
margin-left:10px;
margin-bottom:10px;}
}
Your help is much appreciated.
I would suggest using a <span> instead of a div, either that or using <div style="display: inline;">
The problem can be solved by putting the contact div BEFORE the logo div in your HTML.
floats only float to the right or the left, not up. The contact div is below the bottom of the logo div and so floats right at that level. By putting it before the logo it floats right before the logo pushes it down.
use this html structure and change your css
<div id="header-bg">
<div class='center_wrap'>
<div id="logo">
<img src="/images/logo-top.png">
</div>
<div class="contact">
Email: sadlkj#yahoo.com | Phone: 1 (732) 235-7239
</div>
</div>
</div>
can't do more luck of time
You've got it all right, you just have a typeo in your class definition. You have to say 0px rather than just 0 for your positioning
top:0px;
left:0px;
Here... take a look: http://jsfiddle.net/t5LZL/2/
I have three div's and I want two side divs seize as only space that is demanded by their content, and middle div to be as wide as possible. That's of cource in one row and with CSS.
The code is something like:
<div class='wrapper'>
<div class='small'>Left/div>
<div class='big'>Big</div>
<div class='small'>Right</div>
</div>
Any clues?
Have a look at The Perfect 3 Column Liquid Layout.
And here's one on Dynamic Drive.
Finally, for historical reasons, here's the A List Apart Holy Grail article.
The Perfect 3 Column Liquid Layout is a good place to start. You could also try something like this, which is very similar to that.
<html>
<head>
<title></title>
<style type="text/css">
.small1 {
float: left;
width: 20%;
height:100%;
}
.small2 {
float: right;
width: 20%;
height: 100%;
}
.big {
width: 60%;
height: 100%;
margin-left: 20%;}
</style>
</head>
<body>
<div class='small1'>Small1</div>
<div class='small2'>Small2</div>
<div class='big'>Large</div>
</body>
</html>
Edited due to slight markup mistake.
you can also use multiple wrappers (that way it'll be easier to set backgrounds)
<head>
<style>
.wrapper{background-color:black;}
.wrapperLeft{float:left;background-color:blue;width:70%}
.small{float:left;width:20%;background-color:red;}
</style>
</head>
<body>
<div class='wrapper'>
<div class='wrapperLeft'>
<div class='small'>Left</div>
<div class='big'>Big</div>
</div>
<div class='small'>Right</div>
</div>
</body>