|
HTML - Backgrounds, Tale, And Layers
I've moved away from the difficult Liquid background and have came up with a more simpler solution...yet i still need help here, amazing isnt it?
So heres what im trying to do; notice the word "trying". I have a plain background colour ( a dark green ), I then added a layer containing a image of parchment to set the background for text, which i then centered on the page so this fixes the problem of people with different screen resolutions. I now want to add text, so i made another layer, typed the text for the welcome page, and clicked centre....uh ohhh, guess what? It didnt work! I then tried copying codes from the first table i centered, but it simply refuses to hate me and doesnt work. If you cant visulise what im trying to get i drew a pretty picutre for you; Link shown below. http://s195.photobucket.com/albums/z...nt=Website.jpg So heres the big question. How do i set the writing to be centered on the page ( not centered text, the text is left alligned but i need it to apear in the centre of the page), and a certain amount of pixles from the top so as it will always fit on the background parchment layer wihtout moving about all over the place? Many Thanks, Nathan Similar Tutorialswhen i add more information to my background it gets lower... then if i move this info up the page the empty background space stays there how do i get rid of this empty space at the bottom of my page? ive tryeed using both html and css codes but the problem stays the same someone PLEASE HELP Hi, I was wondering if it is possible to have more than one background to a certain element in a page. ie. I have an element called main so within <div class="main"></div> Can i have two backgrounds, and can one of these only ever appear at the bottom as a sort of footer section? Thanks for any help, I'm going to be building a website, and instead of adding color to the background of the page, I'm going to add an image of a scene. How can I add it so that the image does not scroll but the content does. I've seen it done in the past. Thank you. My main background for my website is a jpg image. Once it ends, it repeats itself; the problem with this, is that it interferes with some text I have on the page when the image repeats. Is there a way that I can have two backgrounds? After the first ends, I would like to put another background image for further down the page. So I am thinking something like this: <body background = "image.jpg" > SITE STUFF GOES HERE </body> <body background = "image2.jpg"> MORE SITE STUFF </body> </html> But it's not working. Any ideas? THanks (I am super new to this, sorry if this is a stupid question) Hello first post, Somewhat a noob on this, but I have my pages background set to black. Now I have a header and one side bar. It was a up side down L but I cut the two up and put them in a three part table. Not sure if that is best. Now in the 3rd column is where I made a background that looks like paper. I can not figure how to set the background in this column. The reason I am doing this is cause some pages will have more text than the others, thus why I need a scrollable background. Hope that makes since and thx ahead of time. Plus, I am using Yahoo sitebuilder and pagebreeze, cause I am a noob and hate trying to place pictures via code . Hi y'all. Could anyone tell me if it's possible or, even better, supply the code for this. I want to create tables on a page with a semitransparent background so the underlying backgrounds shows through. To do this I've used the following code: <style> table, tr, td { background-color:transparent; border:none; border-width:0;} body { background-image:url('background_image_url'); background-attachment: fixed; background-position:center; background-repeat:no-repeat; border-color:000000; border-width:5px ; border-style: solid; } table table { border: 0px } table table table table{border:0px} table table table { border-style:solid; border-width:3px; border-color:000000; background-color:transparent; } table table table td { background-color: FFFFFF; filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50; -khtml-opacity:0.50; } table table table table td {filter:none;} </style> My problem is that the text and images in the tables also go semitransparent. Is there anything I can add to the to make the text and images clearer against the table background? Alrighty, I've got div backgrounds that aren't showing up! Some are showing in ie but not in firefox, and some aren't showing anywhere. Here is a screenshot of what I'm experiencing (IE is on the left, firefox on the right) Also, the light blue background around the top nav. should be behind the page content as well (meaning the crappy "multi-monitor mounts" image and the crappier "featured products" text) any help would be appreciated! Thanks How do I prevent the background of a table cell from repeating when the cell gets bigger? My handcoding is not that good and Dreamweaver doesn't seem to provide any code suggestions. Any help would be appreciated. Hi everyone- I have a pretty simple question, I think. I made some banners for my site to add on put I'd prefer to have them stay on the top of the page even when you scroll down. Currently, I have them as a background that is fixed in one position but the only problem is that all of the rest of the page's content goes on top of the image. I would prefer not to use frames so I guess I am asking is there any other way to keep something at the top of the page and on top of everything else and/or is it possible to have you're background image remain on top of the rest of the page's content? Thanks for your time- Good day. I'm actually trying to make a good site now (still humorous), and am having problems with the background of my right collum. http://web.vtc.edu/users/cjb06271/CI...nal/order.html Quote: <form method="post" action="mailto:cjb06271@vtc.edu"> <table style="border:1px solid black"> <tr> <td><fieldset/>The always favorite Locusts. </td> <td colspan="1"><fieldset/> <input type="checkbox" value="Locusts" name="Locusts"/> </td> </tr> </form> same kind of thing happening on register page. you can see how I wanted it on any of the other pages. Also on the navbar you can see the right collum background image was chopped in half. Not too worries about that but if an easy fix would be apreciated http://web.vtc.edu/users/cjb06271/CI.../real%20final/ my css is in there (as are links to images and all the other sites in navbar) css name is new1. I may also be halucinating but the text seems to change fonts between pages and I don't know why. Thank you very much for any help you may offer. For some reason the text and links on the following page are not working... as in you can't click on them. At first they wouldn't show over the background, and now they do but they don't function. Why? How do I fix that? Also, how do I get the iframe background to be transparent against that image so it all flows together and do I need to do anything to ensure that the iframe comes up? Why doesn't it show? HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fresh Sessions</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#bg img{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
}
#content {
position:relative;
z-index:1;
}
</style>
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
</head>
<body style="overflow: hidden">
<div id="bg"><img src="skates/shred.jpg" width="100%" height="100%" style="opacity:0.4;filter:alpha(opacity=40)"></div>
<div id="content">
<center><h1>FRESH SESSIONS</h1>
<br><a href="about.html" target="steezbox">About</a>
<a href="" target="steezbox">Max & Mike</a>
<a href="" target="steezbox">Pricing</a>
<a href="" target="steezbox">Safety</a>
<a href="" target="steezbox">Links</a> </center>
</div>
<iframe src="about.html" name="steezbox" align="middle" width="400" height="100%" scrolling=no frameborder=0>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
Hi. I'm a FP/html/website builder noob. Is there a way to change all fonts/all backgrounds in FP2003/with html? e.g. Is there an easy way to change all fonts in headers, text areas, tables etc from one font to another. Thanks. Hi, I can make basic websites but I am not very skilled in web design. I am in need of help. Since I made the website inside Photoshop using slices, I need to create a table at the center of the website. Since the center of the website is made of slices of jpeg images, I cannot create a table nor add any text here without disturbing the images. I can get around this by making the pictures part of the cell background, but when I try and remove the images in the center after, the cell background images repeat over and over, and the whole website is unaligned and a big mess! Below is a picture of what I mean... I have included a zip file containing my html pages and image folder. Please download it he http://homepage.ntlworld.com/stephan.../Portfolio.zip The file I need help with is work.html. I can ensure you it's virus free. I want to show my photoshop work off on a website, this is the reason why I am making this website. hello all.. i am pretty new to web creation, so this question might be pretty studpid.. Anyhow, I am using layers in my website. But everytime i view it on a browser (safari, firefox, ie) they are all over the place... Sometimes its just a small displacement or something.. but the layers just dont stay where i specify them in dreamweaver. I was wondering if anyone would be able to help me fix this problem? or if there is workaround to this.. thanks Theoretically, a webpage is made up of layers, of which some things can go on top - or bottom - of others. Does anyone here know if it is possible to change the position of them? Thanks Hello, I have an image that I want to make "float" above a small green bar, so that it sticks out above it. I have been able to achieve the effect with the <layer> tag, but the problem is that it only displays correctly in Firefox and not in IE. Also, I want to avoid the layer tag since it is not universally supported. Here is an example with the layers: http://dqnmusic.googlepages.com/indexenlayer.html Here is what it looks like when I try to avoid layers: http://dqnmusic.googlepages.com/indexen.html Is there away around the layer tag that can still achieve the effect I want? Hi everyone, I was wondering if it's possible to stack images on top of each other in html so that the position of the images stacked on top are relative to the bottom image, instead of being relative to the screen edges (eg, 100 pixels above bottom of screen, 200 pixels left, etc)? I want to create a simple image menu like this: Where I have one large image on the bottom, and three image-links on top of it, aligned so that they're always in the same spot relative to the base image no matter what the computer screen resolution is. If I make them relative to the screen edges then computers with different resolutions would display the images out of order. I'm pretty new to html, using Adobe Dreamweaver CS5.5 at the moment. This is what I have so far: Code: <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<LINK href="style.css" rel="stylesheet" type="text/css">
<title>Main Playlist</title>
</head>
<body>
<!-- Layering priority low -->
<DIV STYLE="{z-index:1;}">
<p><img src="pictures/baseimage.png" alt="baseimage" align="middle"/></p>
</DIV>
<!-- Layering priority high -->
<DIV STYLE="{z-index:2;}">
<p><img src="pictures/button1.png" alt="button1" align="middle"/></p>
</DIV>
<DIV STYLE="{z-index:2;}">
<p><img src="pictures/button2.png" alt="button2" align="middle"/></p>
</DIV>
<DIV STYLE="{z-index:3;}">
<p><img src="pictures/button3.png" alt="button3" align="middle"/></p>
</DIV>
</body>
</html>
Quite obviously it's not right as I have no idea how to set the buttons so they are "X pixels from the top/bottom/left/right of the base image". Thanks! Hi all, I have a problem with two layers i want to place on top of an iframe in at table. The website: http://kvc.dk/CTC7/2.htm As you can see its positioned below the iframe. I know it can be done because i have done on this: http://kvc.dk/CTC7/index.htm The problem is that its not working in firefox. Hope you can help. Thanks I own a website at, www.Catwiskers.co.nr If you look, there are two characters on both sides of the main page. In order to position them there, I used a div position:absolute; script. Also if you notice, there is movement behind them. That's a flash movie I made, but then the movie disappears. But I also used div position:absolute; to place that there as well. How do I get the flash movie to be ONTOP of everything else on the page? Is there some sort of alpha:true or something? Hi, I have a cell within a table and into that I would like to place 4 x layers, all on top of each other. Adjacent to this I have 4 rows in a table, each with an image - the aim is to use OnMouseOver to hide / unhide the layers depending on which of the 4 smaller images are hovered over... The problem I have is that my website uses tables (width 950px) that are centred on the screen - and with resizing the screen in different browsers, the layers go out of alignment. Is there an easy way to ensure the layers always stay within the table cell? I'm using Dreamweaver MX2004. Thank you in advance for your very kind help. Matt |
|||||||