I have reduced my problem to a simple example. I have multiple position:relative div containers, lets say checks, one per page. I lay out the data on the check using position:absolute div's. The layout is fine on the first check but all the following check data overlays the first check. In this example, the check numbers are all on the first box upper right. In one of my tests it looked OK in print preview but not on the screen. I have tested in both IE and Firefox.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.check {
position : relitive;
width : 200mm;
height: 2.5in;
border : 1px solid Black;
}
</style>
</head>
<body>
<div id="Check608" class="check" >
<div style="height: 100%; background: #ee3e64;">Check 1</div>
<div style="position: absolute; top: 8mm; left: 175mm;">608</div>
</div>
<div id="Check609" class="check" >
<div style="height: 100%; background: #44accf;">Check 2</div>
<div style="position: absolute; top: 12mm; left: 175mm;">609</div>
</div>
<div id="Check610" class="check" >
<div style="height: 100%; background: #b7d84b;">Check 3</div>
<div style="position: absolute; top: 16mm; left: 175mm;">610</div>
</div>
</body>
</html>
You have misspelt relitive. It should be relative like this:
.check {
position : relative;
width : 200mm;
height: 2.5in;
border : 1px solid Black;
}
That works correctly as demonstrated by this fiddle:
http://jsfiddle.net/jfngyu75/
Related
I have in my page the following section:
Screenshot of the bottom of my page
Basically i have a fixed div with some buttons that we show on the bottom of the page. The thing is, sometimes we include only one button, sometimes we include four or five. When you resize the page, the buttons get pushed down, this is the normal behaviour I guess:
What happens when I resize
I was wondering, is it possible to reverse the direction the buttons are being pushed towards? As in, force the div to take more space above itself, and not downwards, therefore keeping the buttons visible?
Our fixed element has the following CSS, in case it is useful
.actions_fixbar {
position: fixed;
bottom: 0px;
right: 0px;
width: 100%;
z-index: 9;
background: #fff;
height: 50px;
box-shadow: 0px 0px 5px 0px #ddd;
}
Remove height attribute.
let a = 1;
function addButton() {
$('#footer').append('<button>Button '+ ++a+'</button>');
}
#footer {
position: fixed;
width: 100%;
bottom: 0;
background: #c4c4c4;
}
button {
width: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="addButton()">Add more button</button>
<div id="footer">
<button>Button 1</button>
</div>
Try this with bootstrap.The buttons are just placeholders for a quick demo.Replace them with your actual elements
<style>
footer{
position: fixed;
bottom: 0;
width: 100vw;
}
</style>
<footer>
<div class="container">
<div class="row ">
<div class="col">
<button>Back</button>
</div>
<div class="col">
<button>Submit</button>
</div>
<div class="col">
<button>Request to update</button>
</div>
<div class="col">
<button>Export by default</button>
</div>
</div>
</div>
</footer>
Specifially, this code:
<html>
<body style="margin: 0px; padding: 0px">
<div style="width:100%; background-color:#FFDDDD">head</div>
<div style="height:100%; background-color:#DDFFDD">body</div>
</body>
</html>
Is rendered bigger than the window, creating a permanent scrollbar:
What is a proper way to fix this issue?
The problem is that you are making this div 100% height:
<div style="height:100%; background-color:#DDFFDD">body</div>
the height property in % will make the div take up that percentage of its container, which in this case is the HTML <body>, so changing the header div to be height: 10% and the body div to be height: 90% should fix the problem.
You can simply do it this way:
HTML
<div class="header"> Header</div>
<div class="main">Main content area</div>
CSS
body {
background: yellow;
}
.header {
height: 30px;
background: red;
}
Check it out: http://jsfiddle.net/EDWTM/
Move the background color to the body, and lose the height.
<html>
<body style="margin: 0px; padding: 0px; background-color:#DDFFDD">
<div style="width:100%; background-color:#FFDDDD">head</div>
<div>body</div>
</body>
</html>
http://jsfiddle.net/4XVrW/
Alternatively, you could use margins and absolute positioning to place the header above the body:
<html>
<body style="margin: 30px 0 0 0; padding: 0px">
<div style="height: 30px; width:100%; background-color:#FFDDDD; position: absolute; top:0; left: 0;">head</div>
<div style="height:100%; background-color:#DDFFDD;">body</div>
</body>
</html>
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 need a way to make a div repeat a certain number (36) of times vertically, with 1px of space between each one. The divs are absolutely positioned, so styling each one individually would be a ton of CSS.
I don't mind putting 36 divs into the HTML directly, although I'd prefer not to, but styling each one would be inefficient.
How about nest them?
you can nest them with relative positioning or maybe some margin: http://jsfiddle.net/zWbUu/
HTML
div id="container">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square">
<div class="square"></div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#container {
position: absolute;
top: -21px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
position: relative;
top: 21px;
}
If you need some content int them, you can use a nested absolute positioned div or this trick: http://jsfiddle.net/zWbUu/1/
HTML:
<div id="container">1 (doesn't apear)
<div class="square">2
<div class="square">3
<div class="square">4
<div class="square">5
<div class="square">6
<div class="square">7</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#container {
position: absolute;
top: -20px;
left: 20px;
}
.square {
background-color: #666;
width: 20px;
height: 20px;
line-height: 20px;
position: relative;
top: 1px;
color: #fff;
text-align: center;
}
As others have said, you cannot do this using pure HTML or CSS.
If you wanted to do it with PHP, you could do something like this:
Say that your div has a class called "mydiv."
This class should have
Position:absolute Height:10px Width:10px Border-radius:4px
just like you said. In addition to those, add a 1px top margin.
Your CSS should now look kinda like this:
.mydiv {
position:absolute;
height:10px;
width:10px;
border-radius:4px;
margin-top:1px;
}
To make your div repeat, put some code like the following inside your HTML where you want it to go.
<?php
for ($i = 1; $i <= 36; $i++) {
echo "<div class='mydiv'>your div</div>";
}
?>
Like I said, this uses PHP. If you've never used PHP before, then you should check if your webserver supports it. See this for a bit more info on using PHP inside HTML:
http://www.ntchosting.com/php/php-in-html.html
This code probably isn't perfect but I'm sure you'll be able to work with it.
This is not possible with absolute positioning, because as you stated with absolute positioning you must define the coordinates of the objective as it is taken out of the document flow.
You can do this with floats however. Take the following code for example:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#holder{
width:15px;
margin: 30px auto;
padding: 1px 1px 0 1px;
clear: both;
}
.box{
width:10px;
height:10px;
margin-bottom: 1px;
background-color: #3F6;
float:left;
}
</style>
</head>
<body>
<div id="holder">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html>
By making the holder div less than the width of two box divs you force the next box div to appear on a newline below the previous one without giving it an exact positioning value. Then just give it a margin to add the spacing.
The only way you can do this with one div would be to create an image of what the current div looks like, with 1px of whitespace. This way, you can create a fixed width/height div that has the background of the image set to repeat. This will give the illusion you want with only one div.
Otherwise, as already stated, you will need x amount of divs to get the repetition you need. This can be easily achieved using jQuery or something similar but if you really only want one div, then the background-image may be the way to go.
I have a relatively simple design that is puzzling me. It has 4 large images that need to be stuck to the top left, right and bottom left, right corners. The images are quite large and the content container overlaps them. A little something like this:
Structure http://www.kalleload.net/uploads/nizyjc/zxyagpfrmjqe.png
My problem is that my implementation works fine in all major browsers except IE8 (which I was just starting to respect). Is there a better way I can do this?
I'm using the following markup at the moment:
<div class="corner-top">
<div><img src="./images/top-left-corner.png" /></div>
</div>
<div class="corner-bottom">
<img src="./images/bottom-left-corner.png" />
</div>
<div id="container">
....
</div>
#container {
margin: 60px auto;
width: 488px;
}
.corner-top {
background: url('./images/top-right-corner.png') top right no-repeat;
height: 356px;
min-width: 868px;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: -20;
}
.corner-top div {
min-width: 868px;
}
.corner-bottom {
background: url('./images/bottom-right-corner.png') bottom right no-repeat;
bottom: 0;
height: 325px;
min-width: 868px;
overflow: hidden;
position: absolute;
width: 100%;
z-index: -20;
}
.corner-bottom div {
min-width: 868px;
}
There are many approaches to rounded corners (basically the same). I think the most comfortable one to have four divs in each other:
<div id="container" class="topleft">
<div class="topright">
<div class="bottomleft">
<div class="bottomright">
<!-- content -->
</div>
</div>
</div>
</div>
Another advantage is that you don't need the <img> tags.
you could try forcing IE8 into IE7 compatablity mode.
stick
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
in your <head>