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/
Related
I have a photo gallery that I have created a frame for that has a bit of transparent tape at the top. I want it to look like a polaroid taped to my background.
The tape works perfectly onto the background, but i'd like it to also be in front of the picture. I am using a negative margin on my picture to make it overlap the frame. Unfortunately the picture appears to be in front of my frame.
Thank you in advance code gods of the internet.
This is my 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>
<style>
html, body {
background: black;
background-repeat: repeat;
background-position: left top;
background-image: url("http://moof-it.com/testing/body_bg.jpg");
background-attachment: fixed;
}
.galleryspace{
display:inline-block;
padding:15px;
margin:0px;
}
.galleryframe {
display:block;
text-align:center;
vertical-align:top;
margin:0px;
padding:0px;
border-color: white;
border-style:solid;
border-width:28px 10px 10px 10px;
-webkit-border-image: url(http://moof-it.com/testing/tapeframe2.png) 28 stretch;
-o-border-image: url(http://moof-it.com/testing/tapeframe2.png) 28 stretch;
border-image: url(http://moof-it.com/testing/tapeframe2.png) 28 stretch;
}
.imageingallery {
display:block;
background:white;
}
.imageingallery img{
height:240px;
margin:-12px -3px -1px -1px;
padding:0px;
}
.imageingallery a {
text-decoration:none;
font-size:14px;
font-variant:small-caps;
color: #C27890;
}
</style>
</head>
<body>
<div class='galleryspace'>
<center>
<div class='galleryframe'>
<div class='imageingallery'>
<a href='http://moof-it.com/testing/ALittleSpell.jpg' title='A Little Spell'>
<img src='http://moof-it.com/testing/ALittleSpell.jpg' alt='A Little Spell' title='A Little Spell'>
<br>
A Little Spell
</a>
</div>
</div>
</center>
</div>
</body>
</html>
I would recommend you not to use border-image for this, but rather make the tape a separate image and position it the way you want. Here's an example of what I mean. Note that I don't have access to your tape image separately, so I just made a red block. You can replace that with the image of the tape.
html,
body {
background: black;
background-repeat: repeat;
background-position: left top;
background-image: url("http://moof-it.com/testing/body_bg.jpg");
background-attachment: fixed;
}
.galleryspace {
display: inline-block;
padding: 15px;
margin: 0px;
}
.galleryframe {
display: block;
text-align: center;
vertical-align: top;
margin: 0px;
padding: 0px;
border-color: white;
border-style: solid;
border-width: 20px 10px 10px 10px;
}
.imageingallery {
display: block;
background: white;
}
.imageingallery .image {
height: 240px;
margin: -12px -3px -1px -1px;
padding: 0px;
}
.imageingallery a {
text-decoration: none;
font-size: 14px;
font-variant: small-caps;
color: #C27890;
display: block;
position: relative;
}
.blockOver {
display: block;
position: absolute;
left: 0;
right: 0;
margin: -40px auto;
}
<!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">
<body>
<div class='galleryspace'>
<center>
<div class='galleryframe'>
<div class='imageingallery'>
<a href='http://moof-it.com/testing/ALittleSpell.jpg' title='A Little Spell'>
<img class="blockOver" src="http://via.placeholder.com/50x50/ff0000">
<img class="image" src='http://moof-it.com/testing/ALittleSpell.jpg' alt='A Little Spell' title='A Little Spell'>
<br> A Little Spell
</a>
</div>
</div>
</center>
</div>
</body>
</html>
I have searched and searched and tried many of options to fix this "bug", and I cannot get it to work. I have a div that has a background image that is half-way hidden behind the wrapper. On hover, it animates towards the top. The link is inside an absolute positioned div, and has no text. On IE there is no "pointer", therefore making the link un-clickable. This works in Chrome/FF.
I've tried:
border-right 1px transparent (this i actually can get a "pointer"
on the far right, but it's so small
background:
url(/images/transparent.gif) 0 0 repeat; (yes i made a 1x1px trans
image)
put another div inside the anchor that has the background
image
z-index: 0 or 1 or 2
I would like the CSS/HTML fix for this, not javascript. Thanks so much!
CSS
#wrapper
{
width: 950px;
margin: 60px auto 40px;
background-color: #fff;
position:relative;
}
.login-btn
{
background: url(/images/btn-sprite.png) no-repeat 0 -48px;
height: 34px;
width: 98px;
}
#login-btn
{
position:absolute;
top:-15px;
right:20px;
z-index:-1;
}
#login-btn a
{
display:block;
width: inherit;
height: inherit;
background-image: url(/images/transparent.gif) 0 0 repeat;
}
HTML
<div id="wrapper" class="round">
<div id="login-btn" class="login-btn">
<a href="#">
</a>
</div>
.....
.....
Here is your code, i am attaching the image also please copy to youe image folder and test. i checked in ie8 and ie7 it is working fine.
<!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>
#wrapper {
width: 950px;
height:450px;
margin: 0 auto;
background-color: #fff;
border:#F33 solid thin;
position:relative;
}
#login-btn {
height: 33px;
width: 145px;
display:block;
position:absolute;
right:0;
top:5px;
}
#login-btn a:link, #login-btn a:visited {
background:url(images/btn-sprite.png) top left no-repeat;
height: 33px;
width: 145px;
display:block;
}
#login-btn a:hover {
background:url(images/btn-sprite.png) bottom left no-repeat;
height: 33px;
width: 145px;
display:block;
cursor:pointer;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="login-btn">
</div>
</body>
</html>
i figured it out. in IE, you cannot have an anchor w/ a negative z-index, b/c it hides it behind the body or whatever, and the event doesn't get passed through. basically what I ended up doing is placing the anchor around the div (login-btn), and giving the div a z-index of -1, therefore relieving the z-index on the anchor
HTML
<div id="wrapper" class="round">
<a href="#" id="login-btn">
<div class="login-btn">
</div>
</a>
....
....
CSS
#wrapper
{
width: 950px;
margin: 60px auto 40px;
background-color: #fff;
position:relative;
}
.login-btn
{
background: url(/images/btn-sprite.png) no-repeat 0 -48px;
height: 34px;
width: 98px;
}
a#login-btn
{
display:block;
height: 34px;
width: 98px;
position:absolute;
top:-15px;
right:20px;
}
a#login-btn div
{
z-index: -1;
position:relative;
}
I have a header logo where I'm adding one more image on the left of this logo.
I have used margin-left property and works perfectly across all major browsers except IE6.
As a bit of a research I used position:relativeproperty to fix this negative value.
But no luck. Here's the code I used.
in the <body> section I'm using this
<div id="logo">
<span style="position:relative;margin-left:-400px"><img src="image path"/>
</span>
</div>
now the DIV id="logo"
has following css styles
#logo {
background: url("../images/logo.jpg") repeat scroll 0 0 transparent;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
The following code works well on my IETester - IE6 mode.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
#logo {
background: url("logo.png") repeat scroll 0 0 #EEE;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
#logo span {
position:relative;
left:-400px;
background:blue;
}
</style>
</head>
<body>
<div id="logo">
<span><img src="logo.png" alt="" />
</span>
</div>
</body>
</html>
P.S. maybe you should use something like this:
<div id="logo-wrapper">
<div id="logo" style="float:right;"></div>
<div style="float:right;"><img src="logo.png" /></div>
</div>
If an element has floating, in this case IE6 doubles the margin value. So if you want to move 400px to left, you should separately for IE6 write margin-left: -200px
#logo{position:relative}
span {position:absolute:left:-400px}
Yes IE6 does not support negative margin-padding values so you can play with positioning with the use left right position negative or positive for getting your desired results......
like this:-
HTML
<div id="logo">
<span>span</span>
</div>
CSS
#logo {
background: red;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
#logo span {
position:relative;
left:-200px;
background:yellow;
width:50px;
height:50px;
}
You can try using position:relative with the left or the right attributes to position it in the right place. Or write specific styles for IE browser.
.header{
position:relative;
left: -200px;
}
Cant figure out why my footer is not sitting inside my "container" DIV.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div id="container">
<div id="innerContainer">
<div class="leftcol">
</div><!--/leftcol-->
<div class="centercol-home">
</div><!--/centercolHome-->
</div><!--/innercontainer-->
<div class="footer">
</div>
</div><!--/container-->
</body>
</html>
I have a 3px border on "container" but i can see visibly the the footer is sitting on top of container, andnot inside...
here is the CSS:
html {
font-family: Arial, sans-serif;
height:100%;
}
body{
margin: 0 auto;
padding: 0;
font-size: 12px;
height:100%;
/*min-width:995px;*/
background:url(/_images/body-bg.jpg) top center no-repeat;
}
#container {
width:995px;
margin: 0 auto;
padding: 0;
height:100%;
position:relative;
background:#fff;
border:3px solid #0068b3;
}
/* IE6 */
* html #container {
height:100%;
}
#innerContainer {
width:985px;
min-height:100%;
padding:0 5px 5px 5px;
margin:0 0 25px 0;
/*float:left;*/
background:#fff;
}
.footer {
clear:both;
float:left;
width:974px;
text-align: center;
/*bottom:0;*/
padding-top:5px;
padding-bottom:5px;
}
Remove min-height from #innerContainer
An alternative is adding float:left; to your #container.
The issue is that the #container isn't floated, and thus is in the normal page "flow". That allows the .footer to "float" above, and outside, the #container. If you float the #container as well, the .footer should appear where you expected.
You may also have to float all your "container" divs, including #container, .footer, and #innerContainer.
I need that this two divs look like one row of table , but thay don't show one beside other . Any help ?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Info-Stanković Inženjering</title>
<style type="text/css">
div#wrapper{
width:1004px;
width:602px;
margin-left: auto;
margin-right: auto;
}
div#left{
border-bottom: 1px solid #606060;
border-left: 1px solid #606060;
border-top:1px solid #606060;
width:640px;
height:600px;
min-width: 640px;
min-height: 600px;
}
div#right{
border-bottom: 1px dashed #FF2A2A;
border-left: 1px dashed #FF2A2A;
border-right: 1px dashed #FF2A2A;
border-top:1px dashed #FF2A2A;
margin-left:643px;
width:360px;
min-width:360px;
height: 600px;
min-height: 600px;
float:left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
</html>
try setting overflow: auto on #wrapper
To find out why, look at the answers to my question here:
Why does setting overflow alter layout of child elements?
The float:left should be on div#left not div#right
div#left still need "float:left", because div tag is a block element, it does not allow other element around it.