Okay so this is my first html/css/javascript website. I am not sure what's going wrong basicly I used css to make the background image fit, then I tried to add an image link using
<div id="project_button" style="position:relative; top: 1000px; left: 1000px" >
the result being 1000 pixels of scroll room on the horizontal scroll bar.
There are similar results when I try to edit the location with
margin-left:1000px
margin-top: 1000px
Except it will be the vertical scroll bar that has extra room.
<html>
<head>
<title>Home Page</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
var button1_up = new Image();
button1_up.src = "project1.gif";
var button1_over= new Image();
button1_over.src = "project2.gif";
}
function over_button(){
if (document.images) {
document["buttonOne"].src = button1_over.src
}
}
function up_button() {
if (document.images) {
document["buttonOne"].src = button1_up.src
}
}
//-->
</SCRIPT>
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
</style>
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute;
padding-right:800px;
margin-right:-800px;}
#project_button {position:static;}
</style>
<![endif]-->
</head>
<body>
<div id="page1" style='position: relative'>
<div id="bg"><img src="WebBacking.jpg" width="100%" height="100%" alt="">
</div>
<div id="project_button" style="position:relative; top: 1000; left: 1000" >
<a href="projects.html" onMouseOver="over_button()"
onMouseOut="up_button()">
<img src="project1.gif" alt="click me"
width="1800" height="200" name="buttonOne"
border=0>
</a>
</div>
</div>
</body>
</html>
This is the rest of my code. Any help is appreciated.
btw when I scroll vertically or horizontally the background still fits but because the image's location is static it moves when scrolling. I should also mention that when i set
top: 0; left:0;
the scroll bar is removed. this also goes for top-margin.
If you don't want a scroll bar at all in certain elements add overflow:hidden to the css. this way everything outside the element will be clipped, and no scroll bars are visible.
Also try overflow:auto. It shows scroll bar when the content overflows only.
Related
I want to achieve this: two decoration elements (sort of waves) on both sides of the screen. Here's what I've got so far. If more elegant solution is possible (like styling with CSS only body element), then please advise.
Below solution would be fine, if both < img > elements would not be visible.
You can check this in action.
Here's the working FIDDLE.
Can you help?
<!doctype html>
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="styles/style.css" >
<style type="text/css">
.background_left {
background-image:url("http://www.destadesign.com/destacms/images/background_border_left.png");
background-repeat:repeat-y;
background-position:left;
position:absolute;
left:0;
}
.background_right {
background-image:url("http://www.destadesign.com/destacms/images/background_border_right.png");
background-repeat:repeat-y;
background-position:right;
position:absolute;
right:0;
}
.background_left, .background_right {
height:100%;
}
</style>
</head>
<body>
<div class="background_left">
<img src="http://www.destadesign.com/destacms/images/background_border_left.png">
</div>
<div class="background_right">
<img src="http://www.destadesign.com/destacms/images/background_border_right.png">
</div>
<div class="content" style="height:500px;"> <!-- content -->
</div>
</body>
</html>
Just do it like this:
body {
background:url("http://www.destadesign.com/destacms/images/background_border_left.png") left repeat-y,url("http://www.destadesign.com/destacms/images/background_border_right.png") right repeat-y;
}
This CSS adds two background images to body, positions them right or left respectively, and sets the repeat-y, so it doesn't fill the screen.
JSFiddle Demo
I am having an annoying issue to position an element on top of a background image. Say we have a html as :
<html>
<head>
</head>
<body style = "margin: 0 auto;">
<div style="background:url('image.png'); background-size:cover;">
<button>Button </button>
</div>
</body>
</html>
The button should be placed at left: 50px; top: 100px; against the original image, but because the device screen ( desktop chrome or ios safari ) change, and the background-size: cover; property, the image is actually scaled, so the button would not appear at the right position.
I tried another way :
<html>
<head>
</head>
<body style = "margin: 0 auto;">
<div style="width:100%;">
<img src="image.png" width="100%" />
<button style="top: -100;z-index: 5;">Button </button>
</div>
</body>
</html>
This way the page may scroll because the image might beyond screen height, once i positioned the button to the right place, and changed to another device resolution, the position was altered again.
I also tried javascript to listen to resize event to absolutely position the button, it still has obvious difference between desktop and ios screens.
How can i make it ? Thanks in advance!
Edit:
If the image is scaled due to screen resolution, i want the button be scaled same ratio too. It would be great to find a way without complex javascript.
If you want the button size change with the scale of the page, so you must add width and height style for that in% unit. Because pixel is a fix unit on different devices but % depends on device resolution. And finally you can add min-width and min-height or max-width and max-height to your div style to have a good control on other devices. Good luck.
Add CSS position absolute to your image and button elements. In this way you will be able to set their position accordingly to their parent element <div>.
http://jsbin.com/mevuxizuzu/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div style="width:100%;">
<img style="position:absolute" src="image.png" width="100%" />
<button style="position:absolute; left: 50px; top: 100px;z-index: 5;">Button </button>
</div>
</body>
</html>
You can use the position:absolute; for your button and set the right place with top and left position with %, because your width and height are based on % not pixels .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="width:100%;">
<img style="position:absolute" src="image.png" width="100%" />
<button style="position:absolute; left: 15%; top: 10%;z-index: 5;">Button </button>
</div>
</body>
</html>
Try the following code that use relative position for the button:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
button {
position: relative;
left: 20px;
top:100px;
}
.bd{
background-image: url('http://lorempixel.com/650/1000/sports/1/');
background-size: cover;
height: 1000px;
width: 650px;
}
</style>
</head>
<body>
<div class="bd" style="width:100%;">
<img style="position:absolute" src="" width="100%" />
<button>Button </button>
</div>
</body>
</html>
Checkout this DEMO: http://jsbin.com/pemafigafa/3/
I have an iFrame in a php, i want to show it as centered horizontal atleast, Here is my code. How can i edit it to make it show center horizontal in browser
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
</head>
<body>
<div>
<iframe src="https://<??>" width="850" target="_parent" height="850" scrolling="no" style="overflow:hidden; border:none;" style = "display:block;"></iframe>
</div>
</body>
</html>
You have two separate style tags. Be sure to merge them into one.
Try adding margin: 0 auto; to your style tag.
You need to put the iframe in a div then use css to center in the div like so:
<div class="myframe">
<iframe src="http://google.com" width="850" target="_parent" height="850" scrolling="no" border:none;></iframe>
</div>
<style type="text/css">
.myframe
{
margin: 0px auto;
width: 850px;
}
</style>
I want to place a stretched background image that covers the entire window and content in divs and tables.
This code works fine:
<!doctype html>
<html>
<head>
<title>Background to fit screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">
<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
</head>
<body>
<div id="bg"><img src="../images/background.jpg" width="100%" height="100%" alt=""></div>
<div id="content">
<table>
<tr>
<td>
<img src="images/1.jpg">
</td>
<td>
<img src="images/2.jpg">
</td>
</tr>
</table>
</div>
</body>
</html>
The problem is the spacing between images in the cells of the table!
It's pretty bad once you have a very big table with tons of images.
Please help!
For your table div, you can rework it and add background-size: 100% 100%;
<div id ="bg" style="background-image: url(../image/background.jpg); background-size: 100% 100%;">
<table>
<!--table stuff-->
</table>
</div>
Obviously you'd want to pull out my inline css into your css file, but this gives you the general idea. With your IE 6 version, since it doesn't support CSS3, you may want to just use a background color instead.
give your table width 100% and give the style to the table
#content { background-image:url('image.jpg'); }
I have a very simple holding page I built centering a div, anchor and image. For some reason it will not center in IE8 (either mode), and I am hoping someone can tell me why. I haven't had a chance to try it in other IE browsers. I have tried this in Chrome and FF3 where it works OK.
<html>
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
I said it was really simple. :)
Thank you,
Brett
Do you really want your page to work in quirks mode? Your HTML centers fine once I added doctype to to force standards mode:
<!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" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px;margin:0 auto;text-align:center;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div>
</body>
</html>
The margin of auto on the sides of the div leave it up to the browser to decide where it goes. There is nothing telling the browser that the div should be centered in the body, or left or right aligned. So it's up to the browser. If you add a directive to the body, your problem will be solved.
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center;}
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
I added a 1px border to the div so that you could see what was happening more clearly.
You're leaving it up to the browser because it's in quirks mode. To remove quirks mode, add a doctype definition to the top, like so:
<!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" xml:lang="en">
<head>
<title>Welcome</title>
<style>
#pageContainer {width:300px; margin:0px auto;
text-align:center; border:thin 1px solid;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<a href="http://portal.thesit.com" id="toSite">
<img src="LOGO_DNNsmall.png" id="toLogo">
</a>
</div>
</body>
</html>
Now you'll be able to see your 300 px div center on the page.
Add text-align:center to the body. That should do it when combined with the margin:0 auto on the div.
You can center without using the text-align:center on the body by wrapping the entire page contents in a full-width container & then setting text-align:center on that as well.
<html>
<head>
<title>Welcome</title>
<style>
#container {text-align:center;border:1px solid blue}
#pageContainer {width:300px; margin:0 auto; border:1px solid red}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="container">
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</div>
</body>
</html>
(I added the container div). It doesn't really change anything though... just an extra div. You still need all the same css properties.
You probably want to change it to the following:
<html>
<head>
<title>Welcome</title>
<style>
body { text-align: center; }
#pageContainer {width:300px;margin:0 auto;}
#toLogo{border:none; }
</style>
</head>
<body>
<div id="pageContainer">
<img src="LOGO_DNNsmall.png" id="toLogo">
</div>
</body>
</html>
The text-align:center; is moved to the body. If you want to place other aligned left content within the div #pageContainer, then you'll need text-align:left; for that class. This is the solution that I have used in quite a few websites now and seems to work across all browsers (it's what Dreamweaver uses in it's starter templates).
FOR BLUEPRINT USERS
This drove my nuts, until i found this post: problem with ie8 and blueprint
Long story short, in you html code change the
<!--[if IE]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
for
<!--[if lt IE 8]>
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
Regards
Alex
This works for me on IE6,7,8,FF 3.6.3:
#container
{
width:100%;
}
#centered
{
width:350px;
margin:0 auto;
}
and
<div id="container">
<div id="centered">content</div>
</div>