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.
Related
I want to position an image (basically a logo) at the bottom right side of my page. I am trying to do it using TOP and LEFT. However, that doesn't have any effect. Moreover, I don't want to do absolute positioning but a relative positioning.
P.S: I know you can align towards the right by using align=right. But, is there also something to align to the bottom right?
<body style="height: 100vh; width: 100vw" background="images/background.jpg">
.........
<img src="images/logo.png" alt="logo" style="TOP:235px;LEFT:270px;">
</body>
Relative positioning will only move the element in relation to it's current position as defined by the current layout.
To fix it in relation to the viewport use fixed positioning
#ImSticky {
position: fixed;
bottom: 0;
right: 0;
}
<img id="ImSticky" src="http://www.fillmurray.com/140/100" />
Note:
This element will stay where it is regardless of the amount of content on the page. It won't move up or down when you scroll. Accordingly, this may not be precisely what you actually require.
Note 2:
Positioning is a very poor method of laying out webpages. It is extremely inflexible and there are much better and more responsive options. Check out LearnLayout.com
Hey try this, it has worked for me it will display your logo at right
bottom
<style type="text/css">
.log
{
position:absolute;
right:0;bottom:0;
}
</style>
<div class="log">
<img alt="mylogo" src="c1.png">
</div>
You can use position: fixed that will place an element relative to the viewport.
body {
height: 100vh;
width: 100vh;
margin: 0;
}
.logo {
position: fixed;
bottom: 0;
right: 0;
}
<body>
<img class="logo" src="images/logo.png" alt="logo">
</body>
I want to make so that when the user visits my site to see only one image (100% width) and when he scrolls down to be able to view the rest of the site.
I've seen this and tried it...it works: Full page background image with vertical scrolling
But i have two main concerns:
By this method i must use position: absolute for every section below the image (I will have at least different 4-5 sections with content). Is that the right thing to do ?
This method does not seem to be responsive, is there a way to make it ?
You don't have to use position at all. Once you set a div's size with the screen size all the rest of your content will be below.
Here you go: example
The image div will contain your image, and you set it to width: 100% and height: 100%
then, just add your content below this div.
HTML:
<div class='image'>
<img src="image.jpg" />
</div>
<div class='content'>Content</div>
CSS:
html, body{
margin: 0;
height: 100%;
}
.image{
width:100%;
height:100%;
background: green;
}
.image img{
width:100%;
height:100%;
}
.content {
width:100%; height: 100px;
}
You also need to add
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
to support all screen sizes.
Try this: http://jsfiddle.net/stddC/
In this way the image will be 100% height and width and won't mess with the content.
I would like to make a page with two columns of fixed width, each with their own background color, strechting over the entire height of the page, even when scrolling down for large content. A simple drawing for clarification: https://dl.dropbox.com/u/3060536/twocol.png
I have found several solutions that almost do what I want.
Putting height:100% everywhere, looks great as long as you don't scroll: this seems to be relative to the height of the screen (the background disappears when scrolling down for longer texts).
Putting height:100% on html and body, and min-height:100% on one of the divs, I can make one column fill the entire height. But this needs to be done directly below body, and hence it seems not combinable with the centered two-columns lay-out that I want.
Putting padding-bottom:100000px and margin-bottom:-100000px in the columns and overflow-y:hidden in the parent, works fine if everything fits on the screen, but it entirely removes the option to scroll down if the text doesn't fit on the screen.
So none of the above does what I want. What is the proper way to do this?
You could probably get some idea here.. if position:relative does not bother you, try this.
<html>
<head>
<title>sample</title>
</head>
<body style="height:100%;">
<center>
<div style="position:relative; width:900px; height:100%;">
<div style="position:relative; float:left; background-color:blue; width:200px; height:auto; min-height:100%;">
'//some texts or controls
</div>
<div style="position:relative; float:left; background-color:green; width:700px; height:auto; min-height:100%;">
'//some texts or controls
</div>
</div>
</center>
</body>
</html>
Have a look at blog post. It took me a while to understand how it works but it does and it's great.
I've not tested this, and im pretty sure the left: 50%; margin-left: -450px doesn't work very well to center the elements. but its been a while since ive done html.
#background: {
position: fixed;
top: 0;
bottom: 0;
width: 900px;
left: 50%;
margin-left: -450px;
background-color: red;
}
#background div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background-color: blue;
}
And the HTML
<div id="content"></div>
<div id="background"><div></div></div>
Update
As I said, it was untested. It turns out I forgot to include the height or bottom for #background, possibly something else too.
Here's an example of the idea that does work http://jsfiddle.net/bEuTU/
so, I have a couple questions. The site in question is here:
www.vutallindustries.com/penultimatum
What I am trying to do, is get the center box to stretch between the two divs already on the side, but also take up the full screen (just not go above the top margin I already have set), Currently, the DIV will stretch with text and resize as appropriate, but only if i put in that much text. Dont like to rely on text to do my job!
The other thing, is since people will be accessing this site from various mediums, it is important that things don't overlap when the screen is stretched or resolutions are different. I have played around with different floats and widths, but this is the best I could come up with.
Additionally, on the Gallery link, any idea how to insert those images as they are but not transparent? Id like to keep the middle div transparent, but not the screenshots. Thanks for all your help!
Any additional tips errors you might see, or coding optimizations you could find would be much appreciated as well!
Here is the Style sheet:
body {
background-color:#000000;
background-image:url(http://www.vutallindustries.com/websitefiles/welcomepage.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
color:#000000;
margin: 0px;
padding: 0px;
}
/* Corp Logo */
.logo {
position: fixed;
height: 128px;
width: 128px;
left: 0px;
top: 0px;
}
/* EVE Logo */
.logo2 {
position: absolute;
height: 128px;
width: 128px;
top: 0px;
right: 0px;
}
/* Site Navigation menu */
.menu {
position: fixed;
width: 128px;
height: 100%;
left: 0px;
top: 128px;
background-color:#FFFFFF;
border: 1px solid black;
text-align:left;
opacity:0.6;
filter:alpha(opacity=60);
}
/* Official EVE news via RSS */
.news {
float:right;
width: 128px;
height: auto;
margin-top: 129px;
margin-right:0px;
background-color:#FFFFFF;
border: 1px solid black;
text-align:left;
opacity:0.6;
filter:alpha(opacity=60);
}
/* website content */
.content {
width: auto;
height: 100%;
text-align: center;
background-color:#FFFFFF;
border: 1px solid black;
opacity:0.6;
filter:alpha(opacity=60);
}
/* centers website content */
div.centerbox-outer {
margin-top:129px;
margin-right:136px;
float: left;
position:fixed;
left:136px;
}
And here is the main index HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Penultimatum</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link REL="StyleSheet" TYPE="text/css" HREF="layout.css">
</head>
<body>
<div class="logo">
<img src="http://www.vutallindustries.com/websitefiles/emblem.png" alt="Penultimatum">
</div>
<div class="menu">
<p> <b> Home </b>
</p>
<p> <b> Forum </b>
</p>
<p> <b> Gallery </b>
</p>
<p> <b>Note: if anyone can figure out how to make the center box centered and scroll with, it would be much appreciated. </b>
</p>
</div>
<div class="logo2">
<img src="http://www.vutallindustries.com/websitefiles/evelogo.jpg" alt="Penultimatum">
</div>
<div class="news">
<p>
<script type="text/javascript" src="http://output42.rssinclude.com/output?type=js&id=629071&hash=623340dcbe5d6196e04dc473e9f193b0"></script>
</p>
</div>
<div class="centerbox-outer">
<div class="centerbox-inner">
<div class="content">
<p> <b>Welcome to the EVE Online corporation, Penultimatum! We are currently standing up offices, and this website is under construction. Check back in later for more details</b>
</p>
</div>
</div>
</div>
</body>
</html>
Then the gallery page is the same as the index, it just replaces the line about welcome to the EVE online corp with the following code:
<p>
<center>
<a href="http://www.vutallindustries.com/websitefiles/test.png">
<img src="http://www.vutallindustries.com/websitefiles/test.png" alt="Vutall's Character"
width="auto" height="150">
</a>
</center>
</p>
<p>
<center>
Vutall's Character
</center>
</p>
I finally came up with the solution here: http://jsfiddle.net/yKVq4/5/
Summary of Changes
I cleaned up a lot of your code, because there were a lot of redundant things.
I added containers to the left and right side because this will prevent things like writing position:fixed and width:128px a bunch of times.
I found when I changed the positioning of div.centerbox-outer to relative, but kept position:fixed later on down the line, the code suddenly centered and now always spans the full length, no matter what. After some playing around with the code, it is the combination of the right and left position that is doing it.
Because I changed the alignment of the containers from position:fixed; to float, the result was a more responsive solution. It is quite crude, but it will get the job done.
I hope this is what you are looking for.
Edit
I have found that if I change the div.centerbox-outer's positioning to absolute, then add a margin-right to the .menu-container, then there is a greater responsive design outlook
Update
I came up with a possible responsive design layout http://jsfiddle.net/yKVq4/42/
Summary
Once the screen gets to less than 400 px, move the welcome banner to the top to keep it out of the way.
Increase the menu size to 100% after it has shrunk past 300px and remove the float. Same with the other floated container. Also made the images responsive
Other Changes
Added some simple styles to the menu, after changing it into a unordered list
Added transitions
Fixed the problem with the background not working, although now it is not fixed.
I changed this a lot. But it is because I like coding so much ;)
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; }