I can't seem to get boxclosed1.png to stay in the same spot if i re-size the browser. does anyone have any ideas? i'm testing in chrome. I tried to follow what was posted at this link: CSS: position absolute fails in resizing
EDIT:
so i tried taking out all the other items (grass etc) and then it seems to be positioned correctly. in this case, what do i need to change about my current setup in divs and styles to make this work together?
Code:
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<!-- START HTML -->
<html>
<!-- START HEAD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/27.css" />
<!-- END HEAD -->
</head>
<!-- START BODY -->
<body>
<div id="cont">
<img class="animated bounceInDown" src="boxclosed1.png" alt="Malmö">
</div>
<!-- END BODY -->
</body>
<!-- END HTML -->
</html>
If you place boxclosed1.png with position: absolute inside a <div> relatively positioned, then the image will be still absolutely positioned in relation to its parent, which will move if the browser is resized ... so does the image.
Move the image out of any container (before the </body> closing tag) and give it a position: fixed AND set its position in relation to the bottom and right of the page like
.fixed { position: fixed; bottom: 20px; right: 20px; }
Check (and resize) fiddle
BTW, I wouldn't set width or height neither position to the html tag in order to avoid unexpected cross-browser results (unless you know exactly what you are doing)
Related
I want to tile an image through the entire web document which I want to print. I have used background property to tile that, but I have to set the z-index property to make that image placed over all elements of the web page. Help me solve this.
stick it to the root style
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root
{
background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRxExzbsZCvO6lpE1tll_7pQLB5nd4RkWkrMannssfhAYni_Ct");
opacity: .4;
}
</style>
</head>
<body>
<div id="overlay" onclick="off()"></div>
<div style="padding:20px">
<h2>Overlay</h2>
<p>Add an overlay effect to the page content (100% width and height with background with 40% opacity).</p>
<button>some button here</button>
</div>
</body>
</html>
So I was experimenting with internal stylesheets on the latest version of chrome and it seems that there is a bug that breaks the code.
For some reason, I can not add any comments before background-color:rgb(51,51,51) without causing the code to fail.
Here is my code (background color doesn't change):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
width:100%; <!--browser screen must be fixed width-->
height:100%; <!--and height-->
margin:0px; <!--removes uneven margin added to row's margins-->
background-color:rgb(51,51,51); <!--note that height and width must be specified to work-->
}
</style>
</head>
<body>
<h1>
Headline
</h1>
</body>
</html>
Here is my other code (this time background works):
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
background-color:rgb(51,51,51); <!--note that height and width must be specified to work-->
width:100%; <!--browser screen must be fixed width-->
height:100%; <!--and height-->
margin:0px; <!--removes uneven margin added to row's margins-->
}
</style>
</head>
<body>
<h1>
Headline
</h1>
</body>
</html>
Notice that the comments might not make sense (I removed extra code but kept the comments). So what exactly is going on? What am I doing wrong?
As defined in CSS2 specification:
Comments begin with the characters "/*" and end with the characters "*/"
So you should use /* */ comments in CSS.
However HTML style comments <!-- --> are also possible, but the only valid position for them is wrapping entire CSS rules block:
<style>
<!--
body {
background-color:rgb(51, 51, 51);
width:100%;
height:100%;
margin:0px;
color: red;
}
-->
</style>
<!-- --> delimiters are used to to prevent CSS blocks from being displayed by browsers that don't support HTML 3.2. (this is the same as wrapping Javascript code with <!-- -->). These are very ancient user-agents though.
You are using wrong comment syntax , use block comment
/* my comment */
in css you dont comment this way like html, use comment this way instead
/* background: grey ; */
I'm trying to get rid of <center tag in my HTML, but apparently it is not so easy in some cases.
This answer: HTML: Replacement for <center>
also did not work for me.
The following example is supposed to center both Foo and Bar, but it does not center Bar. What is wrong here?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
</head>
<body>
<div style=" margin: 0 auto; text-align:center;">
Foo
<table>
<tr>
<td>Bar</td>
</tr>
</table>
</div>
</body>
</html>
If I replace <div> with <center> then everything works as indended, but <center> tag is deprecated...
Your current code centres the containing div but since it has width: auto (the default), it expands to fill the horizontal space available. This means that being centred puts it in the same position as if it was left (or right) aligned. If you want to centre that element, give it a width … but it doesn't look like that is what you want to do.
If you want to centre inline content (such as the text "Foo"), then apply text-align on the container.
If you want to centre block content (such as that table), then apply the auto margins you are using to that block content (not the container).
See also Centring using CSS
I have a div centered on my page (width and height set, margin:auto). I am then adding images into it, and each image launches its own Shadowbox. However, there are two problems:
The shadowbox - while taking up the entire screen - is offset to the right side of the page. How do I get it back to center as if there was no div?
Each successive time I open a shadowbox on any given image (either all the same image or different image on each open), the shadowbox gets smaller. I didn't have this problem until I put the images inside the div.
You can see it in action here.
When I run it using the available Firefox consoles, I see a lot of warnings about fetching the height and width (presumably of the image). That partially explains the problems, but I'm not sure of the solution.
Source:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="../shadowbox-3.0.3/shadowbox.css">
<script type="text/javascript" src="../shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<body>
<div id="pageDiv" style="background-color:#FFFFFF">
<img src="http://www.sport2play.com/baseball/pics/1.jpg" width="100px"/>
</div>
</body>
</html>
For what it's worth, the CSS:
#font-face{
font-family:"Officina";
src:url(OfficinaSansStd-Book.otf);
}
body{
font-family:"Officina";
background-color:#AAAAAA;
}
img{
box-shadow: 3px 3px 7px #777;
background-color:#FFFFFF;
}
canvas{
background-color:#FFFFFF;
}
div{
width:500;
height:647;
margin:auto;
}
Thoughts on how to fix these two problems?
You need to use doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
It solves your 1st problem.
I was just playing around with CSS positioning and I have got a few doubts regarding the the elements being rendered in browsers? Would someone please explain to me why this is?
HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="background:#ccc;height:150px;width:300px;">
parent div
<div style="background:#ff0;height:50px;position:absolute;">
child div
</div>
</div>
</body>
</html>
1.Why is the child div being displayed in-line with the content of the parent div in IE6 but not in Safari?
2.And when I positioned the child div absolute,it lost its width? But if I specify width:inherit it gets its full width back in Safari but not in IE6[i know inherit is not supported in IE].
Thank You
Absolutely-positioned block-level elements are supposed to live in their own formatting context. Furthermore, since div is a block-level element, the child is supposed to go on a new line instead of inlining with the parent's content. And of course, one can't expect IE6 to know all this.
Absolutely-positioned block-level elements do not expand to fit their container if you do not give them a width.