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.
Related
I am very new to CSS.
I have some wishes for scrollbars.
In my example (see code below) I have two independent blocks side by side.
Think of the rectangles as being images.
So far I have got:
I have got a vertical scrollbar for the left pink rectangles in block (“navigation”).
I have got a horizontal scrollbar at the bottom of the page window (which is good) for the large cyan rectangle in block (“content”). But it does not work good, cannot scroll to the right side of the cyan image.
Tested in Chrome and IE.
Here is an image of the html page at http://arxfoto.se/ScrollbarTest.html
(see http://arxfoto.se/scrollbartest.jpg).
I would like to have a horizontal scrollbar for the left pink “navigation” block at the bottom of the page window.
I would like to have a vertical scrollbar for the cyan “content” block, at the right edge of the page window. Hm, I just noticed that the scroll wheel on the mouse performs this vertical scrolling! But that is a bit hidden..?
I would like to have a better horizontal scrollbar for the “content” block.
.
Is this at all possible in CSS?
.
Any help is very much appreciated!!
.
Code (see http://arxfoto.se/ScrollbarTest.html):
<!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>Scrollbar test</title>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0 10px 0 10px;
height:100%;
overflow: auto;
}
#content {
margin:0px 0px 0px 210px;
display:block;
background:white;
height: 100%;
width: 100%;
border:1px solid #888;
position:fixed;
overflow: auto;
}
#navigation {
margin: 0px 0px 0px 10px;
display:block;
background:lightgrey;
padding: 10px;
padding-right: 25px;
top:0px;
left:0px;
width:170px;
height: 100%;
border:1px solid #888;
position:fixed;
overflow: auto;
}
* html #content {position:absolute;}
</style>
</head>
<body>
<div id="navigation">
<div style="width:170px;height:100px;border:1px solid #000;background:pink;">
Vertical scrollbar!<br> Wanted:<br> Horizontal scrollbar
<br> at the bottom<br> of browser window</div><br>
<div style="width:250px;height:100px;border:1px solid #000;background:pink;"><br>
A wider image.</div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;"></div><br>
<div style="width:170px;height:100px;border:1px solid #000;background:pink;">
<br> Last image.</div><br>
</div>
<div id="content">
<div style="width:1500px;height:1000px;border:1px solid #000;background:cyan;">
<br> This is a large image.
<br> Wanted:
<br> Vertical and (better) horizontal scrollbar for this block,
on the edges of the browser window.
<br><br>
<h1>
1
2
3
4
5
6
7
8
9
10
</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br<br><br><br><br><br><br>
<br><br<br><br><br><br><br><br><br><br><br<br><br><br><br><br><br><br><br><br<br><br><br><br><br>
<h1> Bottom of image</h1>
</div>
</body>
</html>
You need to add overflow attribute to both the div like this:
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
height: 100vh
}
#navigation {
margin: 0px 0px 0px 0px;
background:lightgrey;
width:25%;
height: 100%;
float: left;
border:1px solid #888;
overflow-x: scroll;
overflow-y: scroll;
}
#content {
margin:0px 0px 0px 0px;
background:white;
width: 74%;
height: 100%;
float: left;
border:1px solid #888;
overflow-x: scroll;
overflow-y: scroll;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,.6);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,0.6);
}
</style>
Link for HTML Page - https://68wgy.csb.app/
I am a new css programmer and there is a very annoying problem in my code. when I put the grey bars in they are not touching the left side of the screen they touch the right side but not the left side and I do not know why there is nothing in my code that is stopping them so I do not know why it would be doing that please help me fix it thanks! (the big white space in the middle is supposed to be there it is for a picture.)
<!doctype html>
<html>
<head>
<title>AndrewDevs.Com</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<style type="text/css">
#white{
color:white;
}
.large {
font-size:300%;
}
#green {
color:black;
}
.underline {
text-decoration:underline;
}
.bold {
font-weight:bold;
}
.picture{
position: absolute;
top: 45px;
right: 0;
width: 1870px;
height: 10px;
}
.greybox {
background-color:#a5a5a5;
position: absolute;
top: 380px;
right: 0;
width: 1870px;
height: 10px;
border: 3px solid #a5a5a5;
}
.connect {
background-color:#6b6b6b;
position: absolute;
top: 340px;
right: 0;
width: 1870px;
height: 40px;
border: 3px solid #6b6b6b;
}
.top {
top:10px;
width: 1870px;
height:700px;
z-index:2;
text-align: center;
}
.bottom {
background-color:#0a0a0a;
width: 1600px;
height:200px;
text-align: center;
}
.purplebox {
background-color:#6b6b6b;
position: absolute;
top: 0px;
right: 0;
width: 1870px;
height: 40px;
border: 3px solid #6b6b6b;
}
.greenbox {
top:0px;
width: 1870px;
height: 500px;
z-index:2;
text-align: center;
margin:150px 100px 30px 10px;
float:center;
font-family: 'Oswald', sans-serif;
}
}
p {
padding:0;
margin:0;
}
</style>
</head>
<body>
<div class="greybox">
</div>
<div class="purplebox">
<p class="large"></p>
</div>
<div class="picture">
<img src="code.jpg" alt="code" height="300" width="1870">
</div>
<div class="connect">
<p> Connect with me! </p>
</div>
<div class="top">
<p id="green" class="large">idfk</p>
</div>
</div>
<div class="greenbox">
<p id="green" class="large">idfk</p>
</div>
<div class="greenbox">
<p id="green" class="large">idfk</p>
</div>
<div class="bottom">
<p id="white" class="large">Connect With me!</p>
</div>
By default the body on the page has this css:
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
at the top of your css file just add:
body {
margin:0;
}
this way you're working with 0 margins to begin with.
Margins of <body> don't matter because those grey bars are absolutely positioned to the right therefore they stick to the right side of <html> element. If the screen resolution (the width of your screen or window) is bigger then the width: 1870px;, they are gonna stick to the right side and leave an empty space on the left.
If you want those grey boxes to always stick to both sides of your screen, use width: 100%; or no width and left: 0; instead:
.connect {
background-color: #6b6b6b;
position: absolute;
top: 340px;
right: 0;
width: 100%;
height: 40px;
border: 3px solid #6b6b6b;
}
or
.connect {
background-color: #6b6b6b;
position: absolute;
top: 340px;
right: 0;
left: 0;
height: 40px;
border: 3px solid #6b6b6b;
}
Both will stretch the element to the width of their parent element.
But it is good to set the body's position to relative and get rid of its default margins. In my opinion, you shouldn't use the <html> tag for styling. It will make those absolutely positioned grey boxes stick to the sides of <body> and not <html>:
body {
margin: 0;
position: relative;
}
See this link to learn more about positioning: http://www.w3schools.com/css/css_positioning.asp
I can't seem to get my div to align side by side inside a div, can someone see where the problem is? I am trying to position the divContainer element with a height up to the buttonPanel element and the 2 testDiv elements positioned side by side. I also tried setting the testDiv element with float: left but that didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Test</title>
<style type="text/css">
* {
font-family: tahoma;
font-size: 8pt;
}
#buttonPanel {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: right;
background-color: buttonface;
}
#buttonPanel hr {
margin: 0;
}
#buttonPanel button {
margin: 10px;
width: 75px;
}
#divContainer {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 45px;
border: 2px solid #FFFF00;
}
.testDiv {
display: inline-block;
width: 50%;
height: 100%;
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="divContainer">
<div id="test1" class="testDiv">test1</div>
<div id="test2" class="testDiv">test2</div>
</div>
<div id="buttonPanel">
<hr/>
<button id="btnOK">OK</button>
<button id="btnCancel">Cancel</button>
</div>
</body>
</html>
Let me give you an example:
you have two div left-div say ldiv and right-div say rdiv.These divs are inside main-div say mdiv
ie
<div class = "mdiv">
<div class="ldiv">
</div>
<div class="rdiv">
</div>
</div>
then you css shoul be like this:
#mdiv{}
#ldiv {float:left;}
#rdiv{ float:left;}
Make the following changes to your code: http://jsfiddle.net/ak9Gs/. box-sizing instructs the browser to take padding and borders into account when sizing an element.
CSS:
.testDiv {
width: 50%;
height: 100%;
border: 2px solid blue;
box-sizing: border-box;
}
.testDiv:first-of-type {
float: left;
}
.testDiv:first-of-type {
float: right;
}
You are giving width as 50% and border with 2px that's why your div'a were not placed sise by side. If you remove border you can get your div's as you need.
DEMO
CSS:
.testDiv {
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#ccc;
}
.testDiv:first-child{
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#f0f0f0;
}
I gave color difference instead of border for both test div's.
change the testDiv class to have display of inline then they will be side by side
.testDiv {
display: inline;
width: 50%;
height: 100%;
border: 2px solid blue;
}
Hope this helps.
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.
I'm trying to set up a simple horizontal tab structure for a page I'm working on, and I'm running into some trouble with floating div's combined with z-index.
Viewing the following code in a browser:
<!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">
#main { width: 500px; z-index: 1;}
.left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 2; margin-right: -2px }
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; }
.clear { clear: both; }
</style>
</head>
<body>
<div id="main">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
<br />
RIGHT
</div>
<div class="clear"></div>
</div>
</body>
</html>
Why doesn't the left div's orange border overlap the right div's green border?
z-index property will not apply to statically positioned elements. In order to use z-index the CSS must also include any position value other than static (ie relative, absolute, fixed).
.left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 3; margin-right: -2px; position: relative; }
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 2; position: relative; }
Will give you what you want I think. I added position: relative; and changed the z-index of the .left to 3 (from 2) and changed the z-index of .right to 2 (from 3).
z-index has no effect on elements that are not positioned (eg position:absolute;)
Use the position property for element upper. Adding position:relative to .left.
Negative margin-left?
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; margin-left: -5px;}