Not sure why as top and bottom are both set to 0px; but when using Opera 11.50 and then minimizing opera and then opening it back on from task menu what happens is a certain div element that is set to top and bottom 0px keeps showing some empty space in the bottom if you resize the window its ok but doing minimization of the program and opening it back up to full size messes the position: absolute element.
Here is the code could some one tell me why this is occruing and how I can fix it.
#Panel {
background-color: #fff;
border-right-color: #cdcdcd;
border-right-style: solid;
border-right-width: 1px;
bottom: 0px;
box-shadow: 0px 0px 5px #1b1b1b;
left: 0px;
position: fixed;
text-shadow: 0px 1px 0px;
top: 0px;
width: 280px;
z-index: 3;
}
JSFiddle: http://jsfiddle.net/PcrUB/1/ <-- full code + others
If I'm understanding this correctly, you want the panel to be full height - to stretch from top to bottom at all times? While the content sits to the right and scrolls? I'm guessing a little, so, sorry if that's not what you're trying to do...
While I think the position:fixed problem might actually be an Opera bug, you can avoid it by changing it to position:absolute. It seems to give the same result without the bug.
This test case seems to work in Opera 11.5, IE9, FF5, Chrome 13:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<title>Page Title</title>
<style>
body { background: #cdcdcd; overflow: hidden; }
#Panel {
background: #fff;
border-right: 1px solid #cdcdcd;
box-shadow: 0px 0px 5px #1b1b1b;
text-shadow: 0px 1px 0px;
position: absolute;
top: 0px;
right: 280px;
bottom: 0px;
left: 0px;
width: 280px;
}
#Content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 285px;
overflow: auto;
}
</style>
</head>
<body>
<div id="Panel">
<div id="Panel_Logo"></div>
<p>panel</p>
</div>
<div id="Content">
<div id="Content_Header"></div>
<p style="height: 2000px;">Forced-height paragraph to induce scrolling.</p>
<p>end</p>
</div>
</body>
</html>
Hope that helps.
Related
I have made a sticky menu and it is not working under Chrome (mobile) 79
Under safari and desktop Chrome it is working perfect.
I use it in a DIV
<div style=divsticky>blabla </div>
.divsticky {
position: sticky;
position: -webkit-sticky;
left: 0;
display: table-cell;
background-color: #e2b577;
border: 1px solid #dddddd;
padding: 3px, 10px;
white-space:nowrap;
}
When i zoom totally out then it works.. So it have something to do with zooming.
This line make it work. But not when you zoom in...
When i place the entire index3.html into a iframe it works perfect.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PLB_Admin</title>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
</style>
</head>
<body>
<div id="content">
<iframe width="99%" height="99%" frameborder="0" src="http://www.kraan.net/css/index3.html">
</div>
</body>
Hi I basically have this text block, which sits inside a Div that displays a confirmation. I want it to be in the middle of the page on top of the image instead of it being at the bottom. How can I do this?
This is my code, I want process to be in the middle of the page on top of the image
<DOCTYPE! html>
<html>
<head>
<meta charset="uft-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"">
<meta name= "viewport" content="width=device-width, initial-scale=1.0">
<link href="style/styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<h2 id="siteTitle">Westend</h2>
<nav>
<ul class="main_menu">
<li>Home</li>
<li><a href="booking.php" >Booking</a></li>
</ul>
</nav>
<div><img src="images/curtains.jpg" id="open"/>
<div id="process">
</br>Hi <?php echo "'".$_SESSION['name']."'"; ?></br>
Your tickets have been booked for <?php echo "'".$_SESSION['production']."'";?>
</br>Playing on <?php echo "'".$_SESSION['date']."'";?> at <?php echo "'".$_SESSION['time']."'";?> </br>
You are in <?php echo $_POST["zone"];?> in row <?php echo $_POST["row"];?></br>
The total cost is £<?php echo $_POST["quotation"];?></br>
Confirmation of your booking has been sent to: <?php echo "'".$_SESSION['email']."'"; ?></br>
</br>
Enjoy the show!
</br>
</div>
<footer id="pageBottom">
<p>© Westend 2015</p>
</footer>
</body>
</html>
This is my CSS
#process {
text-align: center;
font-family: San-Serif;
font-size: 20px;
text-shadow: 1px 1px 0 #1a1a1a;
background-color: #802000;
width: 450px;
height: 270px;
margin-top: 25px;
margin-bottom: 10px;
margin-left: 750px;
border: 1px solid white;
padding-bottom:2px;
box-shadow: 3px 4px 5px grey;
clear: inherit;
}
You can use absolute position as follows:
#process {
position: absolute;
top: calc(50% - 135px);
left: calc(50% - 225px);
text-align: center;
font-family: San-Serif;
font-size: 20px;
text-shadow: 1px 1px 0 #1a1a1a;
background-color: #802000;
width: 450px;
height: 270px;
border: 1px solid white;
padding-bottom:2px;
box-shadow: 3px 4px 5px grey;
clear: inherit;
}
here is the codepen, hope this helps
I don't think this is the right solution for your problem.
You may consider to add .process background-image with background-size: contain.
And then centerize the element .process with position absolute:
.process{
background-image: url("../images/curtains.jpg");
background-size: contain;
background-position: center;
position: absolute;
width: 450px;
height: 270px;
top: 50%;
left: 50%;
margin-left: -225px;
margin-top: -135px;
}
You can do it using different approaches. One way to achieve your desired behavior is to put your div positioning out of the normal flow of the page, setting its position to absolute. This way you need also to set the properly positioning properties (top, left) to center the element within the page:
#process {
position: absolute;
width: 450px;
height: 270px;
top: 50%; /* distance from top border */
left: 50%; /* distance from left border */
margin-left: -225px; /* half the width */
margin-top: -135px; /* half the height */
}
I have problem that I am using after property for making an arrow for tooltip. When I set its(arrow) position absolute its position changes according to the position of body not main div. For example when I set position of arrow to left:100% it goes to the left side of body, it creates problem for me.When I set its position relative to left:100% it goes to the left of main div but loses its actual shapeProblem: How should I set the position of arrow that it remains in its actual shape and its position sets to the left side of main div?Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ToolTip</title>
<style>
#mainDiv{
width: 300px;
height: 150px;
border: 1px solid pink;
background:pink;
margin-right: auto;
margin-left: auto;
margin-top: 15em;
}
#mainDiv:after{
content: '';
position: relative;
border-top: 10px solid green;
border-right: 10px solid blueviolet;
border-bottom: 10px solid yellow;
border-left: 10px solid red;
width:0px;
height: 0px;
left: 98%;
top: 50%;
}
</style>
</head>
<body>
<div id="mainDiv">
</div>
</body>
You'll want to add position:relative; to #mainDiv and position:absolute; to #mainDiv:after.
I'm a newbie when it comes to CSS. My overall goal is to convert a small web application that I have which displays data in table to using CSS.
A description of what the application displays is that in a left hand window there is a list of employee names, on the right is a cell for each day that the employee has worked which spans a user selectable period.
In the code below, I can't get the cell elements to overflow so that the user can scroll to the right, instead the cells are overflowing down.
Is there a way I can get the overflow to work horizontally rather than vertically so I can scroll left and right to see all the cells rather than what it is doing now which is creating a scroll bar vertically?
Much appreciated if anyone can help - it's got me frustrated!
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">Header</div>
<div id="centreposition">
<div id="centrecontent">
<?php
for ($counter = 0; $counter < 100; $counter++)
{
?>
<div id="cell">AB</div>
<?php
}
?>
</div>
</div>
<div id="footer">Footer.</div>
<div id="left">Left <div>
</body>
</html>
CSS:
body {
margin: 0px;
}
#header {
height: 100px;
background-color: #9FF300;
}
#centreposition {
width: 600px;
padding-right: 10px;
padding-left: 10%;
}
#centrecontent {
z-index: 100;
min-width: 1px;
height: 40px;
border: 1px solid #999999;
padding: 4px;
background-color: #FFFF00;
overflow-x: scroll;
}
#footer {
padding-left: 175px;
background-color: #20F3F7;
}
#left {
width: 10%;
position: absolute;
top: 100px;
left: 0px;
padding: 10px 0px 10px 6px;
}
#right {
width: 130px;
position: absolute;
top: 100px;
right: 0px;
height: 200px;
}
#cell {
float: left;
width: 24px;
height: 16px;
margin: 1px;
background-color: #aaccdd;
font-size: 10px;
border-style: solid;
border-left-width: 1px;
border-color: #555555;
}
Two suggestions:
You're essentially asking for a table-based layout, so you may as
well use an HTML table.
Each of your cells has a fixed width, and your PHP code should know
how many of them to create, so you can set the width of the
container element (#centrecontent here) wide enough to contain them
all.
Also, element IDs are supposed to be unique within the HTML doc, so creating 100 elements all with #cell as their ID is incorrect - you should use a CSS class name instead.
You could put all of the cells in another div and set that div to a specific width.
jsfiddle
I have a page with fixed width and I am trying to put borders on it, left and right without success.
I know how to show borders but I cannot make them to reach the bottom of the page and stay there, unlees I set my divs to position:fixed which is not desired for my content div since I want it to scroll. is there a way to get around it?
Here is my css file (the code as shone below makes my borders go until 1/3 of my window even if I set body height:100%) - Thank you in advance:
body {
margin: 0 auto;
padding: 0 0 0 0;
width: 1024px;
/*height: 100%;*/
min-width: 50%;
font-family: calibri;
background-color: #999;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
overflow-y: scroll;
overflow-x: auto;
border-right: solid;
border-right-width: 5px;
border-left: solid;
border-left-width: 5px;
border-color: #1d687b;
}
div#all {
position: relative;
width: 1024px;
height: 100%;
margin: 0 auto;
/*padding: 0 0 5px 0;
border-right: solid;
border-right-width: 5px;
border-color: #1d687b;*/
}
div#top {
position: fixed;
margin: 0 auto;
width: 1024px;
height: 145px;
background-image: url("images/bg_ttl.jpg");
/*border-right: solid;
border-right-width: 5px;*/
border-bottom: solid;
border-bottom-width: 5px;
/*border-left: solid;
border-left-width: 5px;*/
border-color: #1d687b;
overflow: hidden;
z-index: 1;
}
div#top_left {
position: relative;
width: 190px;
height: 135px;
padding: 5px;
float: left;
text-align: left;
vertical-align: middle;
}
div#top_right {
position: relative;
width: 190px;
height: 135px;
padding: 5px;
float: right;
text-align: center;
vertical-align: middle;
}
div#top_center {
position: absolute;
left: 200px;
width: 624px;
height: 135px;
padding: 5px 0;
float: right;
font-family: metalord;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
div#left_menu {
position: fixed;
top: 150px;
float: left;
width: 185px;
height: 100%;
padding: 15px 5px 15px 5px;
border-right: solid;
border-right-width: 5px;
/*border-left: solid;
border-left-width: 5px;*/
border-color: #1d687b;
overflow: hidden;
}
div#content {
position: relative;
top: 150px;
left: 205px;
width: 784px;
height: 100%;
padding: 15px 15px 5px 15px;
/*border-right: solid;
border-right-width: 5px;
border-color: #1d687b;*/
}
HTML
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>arserus.com</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="all">
<div id="top">
<div id="top_left">
<span class="ttl_sd_l">
<img src="images/bttn_prpl.png" class="tl_txt" alt=""> network
<br />
& support
<br />
<br />
<img src="images/bttn_prpl.png" class="tl_txt" alt=""> creative ideas
<br />
& organization</span>
</div>
<div id="top_center">
<span class="ttl_txt">ARSERUS</span>
</div>
<div id="top_right">
<div>
<span class="ttl_sd_r">
<u>e-mail:</u>
<br />
info#arserus.com
<br />
<br />
<u>phone No. (cy):</u>
<br />
7000 17 37</span>
</div>
</div>
</div>
<div id="left_menu">
<div align="right">
<span class="mn_lnk"><a id="p_home" class="lnk">home</a></span>
<br />
<br />
<span class="mn_lnk"><a id="p_about" class="lnk">about us</a></span>
</div>
<div id="cp_rght">
<span class="txt_cr">© 2012 ARSERUS</span>
</div>
</div>
<div id="content">
<?php
require_once('p_home.php');
?>
</div>
</div>
</body>
</html>
The old school answer to this problem is to use Faux Columns -
http://www.alistapart.com/articles/fauxcolumns/
The idea is that you actually use a background image on your body element that is 1px tall, and as wide as you want, including the 'border' as part of the image, and to tile the image vertically.
True, it doesn't rely on CSS borders, and making changes involves image editing, but it is reliable.
For the most part, I've found approaching web design with the idea of a fixed height to be problematic, and I try to avoid it.
It sounds like there is another css rule conflicting with your border rule. So what I would do to begin with, is:
remove all css rules.
apply your css border rule.
Re-add your other rule one at a time till the styles break over the problem rule.
This will narrow down the problem, and make the solution easier to find.
Aside from that, you could try applying the border styles to the <html> tag. Hope this helps!
You might try setting a static height:
height: 768px;
If you are looking to make a fluid (% - based) height scheme in CSS, that is really tough. You might try using jQuery to get the window height and style your elements according to that:
var divHeight = $(document).height();
$('#yourDivId').height(divHeight);