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>
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 have links in my website and when I resize the browser window, they overlap. I have tried using some media query but didn't succeed.
I tried using max-width on my navigation div, but it only looked dumb in the browser. The text div shrinked properly but the navigation div was just long. When using a mobile device, it looked pretty sharp but...
Code of my front page including the navigation div (named #navi).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Site title</title>
<meta http-equiv="content-language" content="fi">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="tyyli.css" type="text/css">
</head>
<body>
<div id="runko">
<div id="logo"></div>
<div id="navi">
<a class="navi" href="index.php">Frontpage</a></div>
<div id="teksti">
Text here.</div>
And here is the navigation's css:
#runko {
max-width: 960px;
margin: auto;
background:none;
}
#teksti {
width: 100%;
box-shadow: 2px 2px 4px #715C3C;
min-height:50%;
background:#d3f0ff;
text-align: justify;
margin: auto;
margin-bottom: 5px;
padding: 5px;
line-height: 2.0;
}
h1{
font-family: 'Mirza', cursive;
font-size:50px;
padding:1px;
margin:1px;
text-transform: uppercase;
}
#teksti h1 {
border-bottom: 1px dotted #316e66;
color: #316e66;
font: 30px/30px 'Aref Ruqaa', serif;
margin: 0 0 18px;
text-transform:none;
}
#teksti h2 {
color: #316e66;
font: 25px/25px 'Aref Ruqaa', serif;
margin: 0 0 18px;
text-transform:none;
}
#logo {
background-image: url(kuvat/kuvalogopieni.png);
width: 520px;
height:320px;
margin: auto;
}
#navi {
width:100%;
margin:10px;
}
a.navi:link, a.navi:visited, a.navi:active {
margin: 4px;
padding:6px;
border:none;
display:block;
background-image: url(kuvat/bg-navigation.png);
background-repeat: repeat-x;
font-size:17px;
color:#08496b;
display:inline-block;
letter-spacing:2px;
text-decoration:none;
text-transform:uppercase;
}
a.navi:hover{
background-image: url(kuvat/bg-navi-hover.png);
background-repeat: repeat-x;
color:#ffffff;
}
Problem shown here in the picture also.
Note: I am a beginner. For some reason, my links that were working don't work at all anymore. What am I doing wrong?
Here's the HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="portfoliostyles.css">
<title>Home</title>
</head>
<body>
<div class="header"><img class="hoofd" src="images/leaugeau.png" alt="logo">
<ul>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<img class="line" src="images/line.jpg" alt="lijn" width='95%' height='2px'>
<div class=content>
<img class="image" src="images/thumbnails/watrgatrthumb.jpg" alt="watrgatr" width=400px height=400px>
<img class="image" src="images/thumbnails/typhlotrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
<img class="image" src="images/thumbnails/anneketrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
</div>
</body>
</html>
And here's my CSS:
#charset "UTF-8";
/* CSS Document */
html,body
{
height: 150%;
width: 100%;
margin: 0px 0px 0px 0px;
}
.hoofd
{
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.header
{
height: 216px;
width: 99%;
position: fixed;
background-color: #FFFFFF;
}
.line
{
margin: 0px 0px 15px 0px;
padding-top: 216px;
position:fixed;
}
ul
{
list-style-type:none;
margin-right:5%;
padding:0;
text-align:center;
}
li
{
display:inline;
float:right;
margin-right:2%;
font-size:45px;
line-height: 280px;
}
.content
{
padding: 230px 0 0 1.5%;
}
a
{
font-family: "HelveticaNeue-light";
text-decoration: none;
color: #000000;
}
a:hover
{
font-family: "HelveticaNeue-light";
color: #E8DA62;
}
h1
{
font-family: "HelveticaNeue-thin";
font-size: 24px;
}
p
{
font-family: "HelveticaNeue-thin";
font-size: 12px;
}
edit: Oh, and to clarify: My pages where, indeed, in the root folder, so no more folder-linking necessary.
But it got solved, thanks! Gotta work something out for the fixed line thing though. But it'll work out.
the problem with the CSS code is you are using fixed position on some classes.
would be better if you remove position: fixed; from below these two classes.
For better understanding check the Demo.
.header
{
height: 216px;
width: 99%;
position: fixed; /*Remove this line; so anchor tag could work*/
background-color: #FFFFFF;
}
.line
{
margin: 0px 0px 15px 0px;
padding-top: 216px;
position:fixed;/*Remove this line; so anchor tag could work*/
}
you are overlapping with position:fixed
remove it from
.line
Demo
It's kinda hard to see without an actual example, but it looks like your .line is on top of them. If I'm correct:
Since it's position:fixed, it is being overlayed at the top, then you have given it a padding-top:216px; which is increasing the area it is consuming from the top, likely overlaying itself ontop of your header and navigation menu.
To fix it, you should figure out another way to position .line wherever you are trying to. You likely want top:216:
.line {
margin: 0px 0px 15px 0px;
top: 216px;
position:fixed;
}
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;
}
My site has a wrapper with three background images. A static top and bottom image and a third image that repeats along the y axis. For some reason the top background image is getting cut off and I can't figure out way.
Here is a link to the live site: http://storrepictures.weebly.com/projects.html
I have offset the top and bottom images so you can see what they look like. You can see that the top one is cut off. I've tried messing around with some of the div padding settings but can't seem to get it to work.
One interesting note: The background images used to be JPEGs (I switched to PNG files because I needed transparency). When I was using JPEGs this was not a problem - the three images lined up perfectly.
Let me know if it would help to have the actual code posted. From what I've been reading on this forum, people seem to like looking at the live site and I didn't want to make the post too long.
Thanks a lot for all your help.
*Here's the CSS:
body {
background: #ffffff;
font-family: Tahoma, arial, sans-serif;
font-size:12px;
color:#666666;
margin: 0;
padding: 0;
}
#wrapper {
background: url(containerbg.png) center repeat-y;
}
#wrappertop{
background: url(containertop.png) no-repeat;
background-position: 0px -40px;
}
#wrappertbtm{
background: url(containerbtm.png) no-repeat;
background-position: 34px 480px;
padding-bottom: 65px;
}
.title{
width: 1022px;
min-height: 30px;
_height: 30px;
padding: 10px 0px 10px 0px;
font-size: 30px;
}
.title, .title a {
color: #fff;
}
#container {
width: 100%;
position: relative;
top: 125px;
bottom: 0px;
margin: 0px;
padding: -300px 0px 0px 0px;
}
#content{
width: 800px;
min-height: 500px;
_height: 500px;
margin: 0pt auto;
}
#content a{
color: #ff6633;
text-decoration: none;
}
.weebly_header{
background: url(%%HEADERIMG%%) no-repeat;
}
And here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<style>
#content
{
height:400px !important;
}
</style>
<![endif]-->
</head>
<body class="wsite-theme-light">
<div id="wrapper">
<div id="wrappertop">
<div id="wrappertbtm">
<div id="container">
<div id="header">
<div id="headerleft">{logo max-height="60"}</div>
<div id="navigation">{menu}</div>
</div>
<div id="content">{content}
<div id="footer">{footer}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
From what I can see, your body element has padding and margin values interfering:
body {
background: url(theme/backgroundtop.jpg?909894) left top repeat-x,
url(theme/backgroundbottom.jpg?909894) left bottom repeat-x,
url(theme/backgroundmid.jpg?909894) left repeat;
font-family: Tahoma, arial, sans-serif;
font-size: 12px;
color: #666666;
height: 100%;
margin: 100px 0 0 0;
padding: 100px 0 0 0;
}
You should get rid of these rules:
body {
/* ... */
margin: 0;
padding: 0;
}
and all should be fine.
Note: setting height: 100% to the body element is meaningless, you might wanna remove that, too.
Note #2: you have only 3 values for the multiple backgrounds of the body, which will be parsed as T/LR/B, while the order or those values indicates you should change their order, i.e. backgroundtop / backgroundmid / backgroundbottom instead of backgroundtop / backgroundbottom / backgroundmid