I have tried using CSS to set the position of the background and the objects to all possible types (fixed, relative, absolute). I have also adjusted the width, min-width of the background image.
The Test Page
CSS:
Background:
/* BG Image Style */
.bg {
position: relative;
width: 100%;
height: 100%
}
Player
/* Player Style */
#player {
position: absolute;
width: 680px;
top: 60px;
left: 380px;
border: outset 5px white;
}
Menu
/* Nav Menu */
ul#menu {
position: absolute;
top: 175px;
left: 68px;
padding: 0;
list-style: none;
clear: both;
}
HTML:
<html>
<head>
<title>BKK Testing Zone</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<img class="bg" src="http://thebkk.net/Images/BVF-Template-Complete.png"/>
<div id="player">
<script type='text/javascript' src='http://thebkk.net/Scripts/jwplayer/jwplayer.js'>
</script>
<div id='mediaspace'></div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': 'http://thebkk.net/Scripts/jwplayer/player.swf',
'playlistfile': 'http://www.thebkk.net/test/playlist.xml',
'backcolor': '000000',
'frontcolor': '00FFFF',
'lightcolor': '33FF33',
'playlist': 'right',
'controlbar': 'bottom',
'width': '680',
'height': '360',
});
</script>
</div>
<ul id="menu">
<li class="home"></li>
<li class="rules"></li>
<li class="forums"></li>
<li class="links"></li>
</ul>
</body>
</html>
Thanks! I searched around, and there were parts of what I wanted to do, but can't seem to find exactly what it is I want.
You might want to read up on "Responsive Web". There's a lot of ideas in there in terms of making fluid grids that might help in what you're doing.
Regardless, I don't know if you're going to get what you're looking to do to work perfectly with CSS alone. You'll probably have to work with some JavaScript as well.
I would start over and try doing something like this for basic HTML:
<body>
<div class="container">
<div class="media"></div>
<div class="menu"></div>
<img src="background.png" />
</div>
</body>
I would put things in a container div just because I don't like working directly off the body element for CSS. It's a little more self contained modules.
As for CSS, you will make your background image like you have.
Your menu will then need to images put into the list items (LI) with the IMG tag. Those IMG will need a width:100% style.
Right now, you're using the menu images as backgrounds, which won't be fluid very well, so just like you did with the main background image, you need to do with your menu.
You then need to set the menu container width to be a % of the larger container (ie. the background image).
To get this % you need to divide the width of the area you want the menu to fit in by the total container width.
Your background image looks like it's 1280px. The total width of the "window" is like 214px.
This would mean the width of the menu should be:
214px / 1280px = 0.1671875 * 100% = 16.71875%
You then need to place the menu container properly using the same CSS as you where using but use % instead of pixels because this will allow the positioning to move with the browser size.
The upper left corner of that background "window" looks like it starts 20px in from the left and 263px down from the top.
20px / 1280px = 0.015625 * 100% = 1.5625%
left: 1.5625%
263px / 960px = 0.27395833333333333 * 100% = 27.39583333333%
top: 27.39583333333%;
Now, the menu container should have a proportional width compared to the background image (which is what you're trying to line the menu up with), meaning it should sort of expand or contract with the background image.
And remember the menu HTML needs to be like this:
<ul>
<li><img src="..." alt="" /></li>
[...]
</ul>
with CSS:
#menu li img{
width:100%;
}
I'm not really sure this will work but it might get you going in the right direction. Regardless, I don't see the result of this being very good.
This might be a case where you're better off making a full Flash website (as much as I don't like using Flash).
I hope that helps!
Cheers!
-- UPDATE --
I put together a little proof-of-concept. I only tested it in Chrome and the latest FF. As I expected, you can get it to work but you're going to run into support issues.
Anyway, here's a background image I made with basically 2 target areas (boxes). It's similar to original one.
background image (1000x750. I started with 1024x768 or iPad dimensions and made it 1000px wide for easy percentages)
http://tinypic.com/r/11r9edw/5
menu image 1
http://tinypic.com/r/2s7ucmg/5
menu image 4 (i'll skip uploading all the menu images for sake of brevity)
http://tinypic.com/r/2nlv42x/5
The CSS (percentages are sloppy, but it's only a proof-of-concept)
body{
margin:0;
padding:0;
}
.container{
position: relative;
width: 100%;
height: 100%;
background-color:#F0F;
}
.bg-img{
display:block;
position: relative;
width: 100%;
height: 100%;
z-index:1;
}
.menu{
position:absolute;
width:15%;
height:33%;
top:33%;
left:10%;
border:1px dashed red;
z-index:10;
}
.menu ul{
height:100%;
margin:0;
padding:0;
}
.menu li img{
width:100%;
height:100%;
margin:0;
padding:0;
}
.menu li{
position:relative;
height:24.5%;
}
.media{
position:absolute;
width:43%;
height:15%;
top:16%;
left:31%;
background:#9CC;
z-index:10;
}
The HTML
<div class="container">
<img class="bg-img" src="bg.png" alt="" />
<div class="menu">
<ul>
<li><img src="menu1.png" alt="Menu 1" /></li>
<li><img src="menu1.png" alt="Menu 2" /></li>
<li><img src="menu4.png" alt="Menu 3" /></li>
<li><img src="menu4.png" alt="Menu 4" /></li>
</ul>
</div>
<div class="media"></div>
</div>
I more or less just used position:absolute to "float" everything as a ratio/percentage of the background image, which is stretched to 100% width/height of the browser.
Defined heights/widths are necessary (and setting margins/padding to zero to reset browser defaults).
Chrome seemed to work well. FF seemed to have an issue with height:100%. It's possible it could be cleaned up some more, but that should be a start to get what you're looking to do with CSS.
But like I said, this kind of thing isn't well handled in CSS, even with CSS3 this kind of design will cause a lot of headaches for backwards compatibility.
HTML 5 is here and that's not going to be a magic bullet either. This design concept is very vector based and Flash is perfect for that kind of thing.
Hope this helps! =)
You cannot combine a relatively sized background with elements that are of fixed size and with fixed margins, and expect the fixed elements to "follow" the background when you resize the window.
My suggestion would be that you use a fixed size background as well, that is the only way to get the other elements (menu etc.) to end up at its expected spot.
Also, when creating a background, you should really use the CSS background property, instead of using an image like you do.
This:
<img class="bg" src="http://thebkk.net/Images/BVF-Template-Complete.png">
Should probably be this:
body { background: url('http://thebkk.net/Images/BVF-Template-Complete.png') no-repeat; }
Related
I'm trying to design a css and html website but I am having some issues making it responsive. http://finfeeder.x10host.com/
Below are the pictures of what I'd like it to look like when on mobile and desktop.
Essentially, As the monitor gets smaller and smaller, the pictures should get smaller and stay in the same place until it becomes and certain size to completely change for mobile devices. Instead, it just gets smaller and more misaligned...
At the heart of it I know I don't understand how CSS layouts work but W3schools just didn't get the point across for my dumb self.
<!DOCTYPE html>
<html>
<head>
<style>
div.main {
position:absolute;
z-index:-1;
left:0;
top:0;
width:100%;
}
div.buttons {
position: absolute;
left: 330px;
top: 550px;
z-index: 0;
}
</style>
</head>
<body>
<div class="main">
<img src='https://xo2.x10hosting.com:2083/cpsess6981183432/viewer/home%2ffinfeede%2fpublic_html%2fimages/desktop_betta.jpg' style='width:100%' alt='[]' />
</div>
<div class="buttons">
<a href="http://facebook.com">
<img src='http://i.imgur.com/dhFsqcW.gif' style='width:15%' style='height:15%' />
</a>
<a href="http://pinterest.com">
<img src='http://i.imgur.com/qatEe7q.gif' style='width:15%' style='height:15%' />
</a>
<a href="http://instagram.com">
<img src='http://i.imgur.com/IoRiRiD.gif' style='width:15%' style='height:15%' />
</a>
<a href="http://twitter.com">
<img src='http://i.imgur.com/eqsUM0m.gif' style='width:15%' style='height:15%' />
</a>
<a href="http://kickstarter.com">
<img src='https://xo2.x10hosting.com:2083/cpsess6981183432/viewer/home%2ffinfeede%2fpublic_html%2fimages/kickbutton.gif' style='width:100%' alt='[]' />
</a>
</div>
</body>
</html>
Please see my reply for links to what website should look like.
Thank ya kindly!
Firstly, the div itself is designated with a hard-coded absolute position. If you change that to a percentage, it will stay in the same part of the screen regardless of how narrow the screen is.
You may also potentially use max-width and min-width properties to prevent elements from getting too small or large.
You should also make sure to define the width and height of your html and body as 100% of the viewport. This way and elements with in it will inherit the correct width and height.
<style>
html, body {
height: 100%;
width: 100%;
}
div.main {
position:absolute;
z-index:-1;
left:0;
top:0;
width:100%;
height: 30%; /* This could also be coded with a px, pt, etc */
}
div.buttons {
position: absolute;
left: 5%;
top: 5%;
width: 90%;
z-index: 0;
}
</style>
Since the html, body and div.main are all 100% the width of the viewport, positioning the div.buttons to be 5% from the left and setting it's width to 90% positions it to have 5% of space on either side, no matter how big or small the viewport is.
It's generally good practice to define things like height and width even if you don't think you need to because at some point another element may inherit that property, or be positioned relative to it.
If you use Google's Chrome browser you can enable the developers tools with control + shift + i and preview how your page with look on a variety of devices.
I have a page where the header is a gradient and on first load everything looks perfectly fine. When I refresh the page the gradient gets messed up and it seems like it puts in 2 gradients (1 really small) example below:
The first one is after a reload and the second is on first hitting the page.
The small gradient on top that I don't want is the same height as the padding in that div.
I've also noticed that imgs get resized on reloads like this as well and I've solved that by setting the height in css. I can't set the height in css because the height should be dynamic.
Can anyone explain to me why this might be happening and a way to solve it? I would really prefer a non-javascript solution because I already know how I might solve using jquery.
Some Code:
HTML:
<header>
<a id="settings-gear" href="#"><img src="/img/gear.png"> </a>
<div id="logo">
<img src="logo" alt="logo">
</div>
</header>
CSS:
header {
background: -webkit-linear-gradient(top, #F0F7F7 0%,#B8D9DD 100%);
max-height: 122px;
padding: 12px;
position: relative;
display: block;
}
header #logo img {
display: block;
margin: 0 auto;
}
header #settings-gear img {
height: 33px;
}
Well, it's difficult if we can't see a link or example, but the first think that comes to my mind is set the background as image and tell it to fit only the content with background-origin:content-box;. Try put that line into the header properties, and hope it helps. Note that the background-origin property don't work in IE 5, 6, 7 or 8...
I have an image that should be positioned near the bottom of the screen. I have a main image that is the background image and will resize with the browser size. I need the image over the background image to be 20-30px from the bottom no matter what size screen or if the screen is resized. (Image also must be centered.)
I am not sure how to go about doing this. What is the best way to do this?
Here is the code I have tried:
.bottom{
position:absolute;
margin-left: -355px; /* Image is 710 in width */
left:50%;
bottom:-20px;
}
That code has the image centered on the page properly but not 20px from the bottom. Also I have content below the image and I want the content to stay below the image but it currently comes up over the image.
HTML:
<img class="bottom" src="src-path.png" alt="Text" />
<p style="clear:both;"> </p>
<!-- More Content here that consist of img and p tags. -->
I guess to position the image 20-30 px from the bottom you can use css property
margin-bottom:30px; or 20px what ever value suits you.
for aligning at the center use vertical-align:middle Please do share the code that the thing is more clear. Hope I answered it correctly.
CSS Together must look like:-
margin-bottom:30px;
vertical-align:middle;
You better use a CSS file, in which you declare a footer to be at the bottom of your page. Then put your image in your page, with class of that CSS and id of "footer". Clear enough?
Here is the way I finally did this:
CSS:
.image_block {
/* Size of image is where the width/height come from */
width: 710px;
height: 500px;
}
.image_block a {
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
}
.image_block img {
/*Nothing Specified */
}
HTML:
<div class="image_block">
<img src="src.png" alt="Alt Text" />
</div>
When ever I develop HTML pages, I get problem with window resize. The page alignment gets disturbed. One element or tag overlaps with the other.I want my page that when I resize,
my page it should remain the same & srollbars should appear.Someone Pls suggest solution.Which style attribute (position, overflow) is good to use for this?
Set a width on the body (or, more preferably, a min-width)
Not sure if this is what you need, but probably:
overflow:auto;
is what you are looking for
i understand i think, the issue is that you place your elements in a relative position(the default for position on any element), so relative to your current screen size. you can change the position to absolute and they will not move, this can cause you to loose control if your not an css ninja. ill show some cool techniques now how to control elements.
hint 1:
wrap your tags! a wrapped element will stay put!
example:
html =>
<div id="box_wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
css =>
#box_wrapper {
margin: /*top and bottom*/5px /*left and right*/ auto; /*this will center your wrapper*/
height: 300px; /*what ever height you want*/
width: 1200px; /*what ever width you want*/
}
.box {
/*what dimensions you want*/
}
this a good way of keeping objects in place, they will never leave the wrapper element if you specify a overflow.
hint 2:
position: absolute; caution this can get messy.
i use position absolute when positioning logos to the corner of a screen so that if you change the size of the screen the logo will still remain in the corner. this is cool cause you dont need a specified width for the parent elements.
html
<div class="header">
<img src="/images/logo.png" alt="page_logo">
<div id="login_button">
/*......*/
</div>
</div>
css
.header {
width: 100%
height: 150px;
border: 1px solid #ccc;
}
.header img{
position: absolute;
margin: 0px; /*position: absolute must have a margin even if its 0*/
float: left;
height: 150px;
}
#login_buttons {
float:left;
position: absolute right;
margin-right: 5px;
}
this example puts a logo on the top left hand side and the login buttons on the right and if you then change the screen size it will keep them where they need to be.
i dont want to write a whole tutorial here but these tips should help in designing solid pages that adapt to multiple screen sizes.
its hard to kinda guess what the issue could be if i cant see the code but i hope this helps.
<body id="page" onload=" pageHeight = document.getElementById('page').offsetHeight;
pageWidth = document.getElementById('page').offsetWidth;
pageHeight=1000 px ;
pageWidth=600 px ;
"> </body>
you got to fix the width of the body on page load to pixels instead of % based on the resized browser window size.
I have a problem. The designer I hired did not separate out the logo and the header and its to late to get it done from him.
so I have a header image which has the sites logo in it. I want to make this logo clickable. You can see the site here: http://www.stopsweats.org/
The code for the logo tag is:
<div id="header">
<p id="logo">
</p>
Here is the CSS, added as per comments
#header {
background-image: url("http://www.stopsweats.org/wp-content/uploads
/2010/12/sweatbackground1.jpg");
border-color: transparent;
height: 108px;
padding-top: 2em;
z-index: -1;
}
So how can I make this into a valid link.?
I don't want to add any visible text as it will look ugly.
I will change the #logo width and height and placement as an overlay on the image. Hope fully that should be ok among all browsers.
The easiest thing to do is make the a take up some space. It's already properly positioned, so there's only a little bit to do.
Remove these css width and height properties:
#logo a {
width:1px;
height:1px;
}
Then add a little text to the a:
StopSweats
The text won't be displayed because you have text-indent: -9999px applied to that a, but the block will be about the right width and height to cover the banner image area.
Write like this:
HTML:
<div id="header">
</div>
CSS:
#header {
background-image: url("http://www.stopsweats.org/wp-content/uploads/2010/12/sweatbackground1.jpg");
border-color: transparent;
height: 108px;
z-index: -1;
width:1000px;
padding-top:10px;
}
#logo{
display:block;
width:245px;
height:60px;
margin-left:90px;
}
http://jsfiddle.net/rEFRw/
Esiaest way to do according to your structure I would prefer to put your logo image directly into your html instead of background-image through css. If you would like to do than only need to add image tag between your anchor tag (....) just change your css and html according to below code..
CSS
#header {
border-color: transparent;
height: 108px; /* change according your logo image height */
padding-top: 2em;
z-index: -1;
}
HTML
<div id="header">
<p id="logo">
<img src="http://www.stopsweats.org/wp-content/uploads/2010/12/sweatbackground1.jpg" alt="logo" title="go back to home" width="logo width here" height="logo height here" />
</p>
</div>
Check your logo image url properly and make sure you endup your header div tag where it is in your current html file.
Also if your #logo id has width and height value set than change accordingly.
#logo a{display:block; height:XXpx; width:XXpx; text-indent:-999px;}
you may have to adjust some css of other tags also. but it will work