I am new to css and html. I made an application, and the pages in html and css. These are the images of my pages:
and the second one is home page, that is user page
This is my .css file code snippet:
body{
background-color:#D8D8D8;
background-image:url("../images/spring.png"), url("../images/security.png");
background-size:200px 100px, 200px 100px;
background-repeat:no-repeat, no-repeat;
background-position:top right, bottom right;
margin-right:200px;
margin-left:15px;
}
Problem: As you can see the images are not align same in the two pages, and I need the second image to be at the bottom of the page like the first one which is at top most of the page. Can any body guide me how to do it. I am sorry for the language as it is terrible. Thank you.
I dont know how it works for you (two background image at same object), but you can use this code:
<html>
<head>
<style>
img.first_image { position: absolute; top: 0px; }
img.second_image { position: absolute; bottom: 0px; }
body
{ background-color:#D8D8D8;
background-size:200px 100px, 200px 100px;
background-repeat:no-repeat, no-repeat;
background-position:top right, bottom right;
margin-right:200px;
margin-left:15px;
height:100%;
}
</style>
</head>
<body>
<img src="../images/spring.png" class="first_image" />
<div>
<!-- every things you need -->
</div>
<img src="../images/security.png" class="second_image" />
<body>
</html>
Add height:100% to the body and html.
try something like
body,html {height: 100%; width: 100%;}
#image-id {position: absolute; bottom: 0; right: 0;}
it seems to be that the body isn't the full height of the page
try
body{
background-color:#D8D8D8;
background-image:url("../images/spring.png"), url("../images/security.png");
background-size:200px 100px, 200px 100px;
background-repeat:no-repeat, no-repeat;
background-position:top right, bottom right;
margin-right:200px;
margin-left:15px;
height:100%;
}
That might be a little too much, though ... it might be worth setting it to height:95%; if it causes scroll-bars to appear
Set both pictures to position fixed. Then the first one to top right and the second one to bottom right.
Then you have the pictures at every time in the wished position, even when the page content gets longer and is scrollable.
Related
I'm working on a responsive website and I'm having an annoying problem. In my header is some text. And I set it offscreen with text-indent -9999px. After that I load a background image. But I want only the background image to be clickable. I don't know how to do this. I've found a few examples on google. But they never "inject" a picture with css. They always define the picture in the html.
So all that I want is a picture horizontally centered in the header and only the picture is clickable, not the margin around it.
<header>
<a href="alink">
<h1>this is gonna be replaced with an image(on desktop websites). It will stay here on mobile website</h1></a>
</header>
and the css:
header h1 {
margin:10px 0 30px 0;
text-indent:-9999px;
background-image: url('pika.png');
background-repeat: no-repeat;
background-size: contain;
background-position:50% 50%;
width:100%;
height:220px;
border:1px solid red;
float: left;
}
I've also uploaded the code to jsfiddle:
http://jsfiddle.net/Cm3yQ/
As you can see, currently the whole h1 is clickable, and I want only the picture to be clickable.
<edit>
Possibilities to have only image clikable are:
the use of img + map + area
or the use of SVG. one random tutorial : http://tutorials.jenkov.com/svg/a-element.html
Average example of what can be done : DEMO
</edit>
You should wrap link inside h1, and give it a display:block.
header {
background:url(http://lorempixel.com/400/150);
/* background could either be on h1 or a */
background-size:cover;/* optionnal */
}
header, h1 , h1 a {/* size them all at once */
display:block;
height:300px;
}
a {
text-indent:-9999px;/* hide text from screen */
/* still not working ? set background here or give it a color
almost transparent so it can catch click event :
background:rgba(0,0,0,0.001);*/
}
and HTML :
<header>
<h1>
SOME text
</h1>
</header>
it may look like a comment but i dont have enough reputations to put comment ,hence am putting it as an answer.
Why dont you create another div in the html and put your image inside it ,then style it accordingly.
HTML
<header>
<div class="headerDiv">
<h1>this is gonna be replaced with an image(on desktop website). It will stay here on mobile website</h1>
</div>
</header>
Css
.headerDiv{
border:1px solid red;
height:220px;
width:100%;
}
header h1 {
margin:10px 0 30px 0;
text-indent:-9999px;
background-image: url('http://img3.wikia.nocookie.net/__cb20120630141813/sims/images/d/d7/Pichu.gif');
background-repeat: no-repeat;
background-size: contain;
background-position:center;
height:220px;
// float: left; Get Rid of float: left
}
I'm designing a pretty simply website for a friend. In the design, he wants a ribbon to stretch out horizontally in the middle of the page.
Like so:
https://i.imgur.com/Hz4SH4Hh.png
My attempt at doing this was to crop the 'ribbon' parts of the right and left and display those images while floating them to the right and left. Then creating a content div, centering it to fill in the middle of the ribbon. This solution is super sloppy and doesn't work well at all. Here's a picture of it
https://i.imgur.com/66C2kj5h.png
The resolution is kinda off, but you can see that the border of the middle div are off, and when stretching or shrinking the page, the percent width of the middle div messes the whole thing up.
Heres my HTML/CSS
<div class='ribbon-container'>
<div id='ribbon-left'>
</div>
<div id='ribbon-right'>
</div>
<div class='clear'></div>
<div id='ribbon-middle'>
</br>
<center>
<span class='ribbon_header'>Food Around Your School</span>
</center>
</div>
</div>
.ribbon-container { width:100%; height:118px; position:relative;}
#ribbon-left { background-image:url('images/ribbon_left.png'); width:117px; height:119px; position:absolute; bottom:0; left:0;}
#ribbon-right { background-image:url('images/ribbon_right.png'); width:117px; height:119px; position:absolute; bottom:0; right:0;}
#ribbon-middle { width:85%; height:81px; background-color:#b5b5b5; border:7px; border-top-style:solid; border-bottom-style:solid; border-color:#61615f;top:0; margin:0 auto;}
You're just gonna have to size everything in the same units. I'd suggest just using pixels unless you're going with a responsive design, and if you're going with a responsive design, I'd suggest using something like foundation.js.
Edit: and +1 to Michael Peterson's SVG idea. That's a good one too.
Perhaps try setting
.ribbon-middle{
width: auto;
padding: 0 120px;
}
where ribbon's padding is the width of the left/right images. then you will have the text always visible.
Since the height of the banner is not changing, you can accomplish this using by using a horizontally-repeating image as the background for the banner and then using absolute positioning for the left and right portions of the banner.
The html becomes:
<div class='ribbon-container'>
<div id='ribbon-left'></div>
<div id='ribbon-right'></div>
</div>
And the css becomes:
.ribbon-container {
width: 100%;
height: 120px;
position: relative;
background: url('http://i.imgur.com/LVXiQ37.jpg') top left repeat-x;
}
#ribbon-left {
position: absolute;
top: 0;
left: 0;
width: 112px;
height: 120px;
background: url('http://i.imgur.com/2MOcrO9.jpg') top left no-repeat;
}
#ribbon-right {
position: absolute;
top: 0;
right: 0;
width: 97px;
height: 120px;
background: url('http://i.imgur.com/Q6NmXR6.jpg') top left no-repeat;
}
I've done a really crude mock-up using the initial image you posted. The problem is that the image itself is not perfectly horizontal, so it looks like the right side does not line up in my fiddle, but if you are more careful in creating the initial image, this will work. And I haven't added text, but this can be done using absolute positioning as well, or another method I'm sure.
You can see the example at: http://jsfiddle.net/M3GmY/
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/
In my website, I have a footer that has a height of 100px and the css for the footer looks something like the following:
.footnote {
width: 95%;
height: 100px;
position: fixed;
background: url('../images/coolfooter.png') bottom center;
bottom: 40px;
left: 30px;
}
The problem is if I have too much content on my web page, the content starts overlapping with the footer.
I want to restrict the content to only appear above the footer always somehow, so that no content gets overlapped with footer.
How can this be done?
Have you tried z-index? As others have said it's a bit hard to say without looking at the html. I'm not 100% sure what you're asking for.
You basically need to make sure that either the content has a bottom margin greater than or equal to the height of the footer, or (if the content is in a container of some sort) that it's container has a bottom padding equal to or greater than the height of the footer.
Here's a fairly popular reference site for doing this so-called "sticky footer": http://www.cssstickyfooter.com/
Adding overflow:auto to div.content should be sufficient.
<html>
<head>
<style type="text/css">
div.header
{
top:0px;
height:100px;
max-height:120px;
min-height:100px;
}
div.content
{
height:600px;
max-height:750px;
overflow:auto;
}
div.footer
{
height:100px;
max-height:120px;
min-height:100px;
clear:both;
}
</style>
</head>
<body>
<div class="header"></div
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
I have plans to create carousel with a background that spans the width of the browser.
To do this I set margin:0; padding:0; in the body and set my div that spans the background to width:100%. I chose this because it contains another div that has a left, and right margin:auto; making the second div centred within the div spanning the browser.
I encountered a problem trying to add the background image to the div that spans the width of the browser. When I use background-repeat:repeat-x; it is still just a 550x1 px sliver on the far left of the browser. It does not repeat. I have figured this is due to the 100% width. If I let go of the 100% width I encounter a problem of the inner div being forced to the right or left, depending on the resolution of the monitor being used. I do not want this to happen.
Does anyone know of a way I can achieve/simulate 100% width and still use background-repeat:repeat-x;?
EDIT, i use 2 divs because i am applying silverlight, and would like to place it kindof artistically on the screen. here is my code, it might make more sence what i am doing then. and if you still believe 1 div is better than 2, tell me that im wrong, but here is the code. it is very simple because much will be done in silverlight, or at least i thought it would be somewhat simple, but that's how it goes.
HTML
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="imd_data_Home" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Home</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id=NavContainer>
<div id="Navigation">
<img src="img_data/dem_Logo.png" id="Logo"/>
</div>
</div>
<div id="Carousel">
<div id="SilverlightContainer">
</div>
</div>
</body>
</html>
CSS
body
{
margin:0;
padding:0;
background-color:#000061;
}
#NavContainer
{
width:900px;
margin-left:auto;
margin-right:auto;
}
#Navigation
{
height:75px;
width:100%;
}
#Logo
{
float:left;
}
#Carousel
{
height:550px;
width:100%;
background-image:url('img_data/carousel_bar_01.png');
background-repeat:repeat-x;
}
#SilverlightContainer
{
height:550px;
width:900px;
margin-left:auto;
margin-right:auto;
}
You don't have to take two div's to achieve what you want.
Just take your background image in the body like
body{ background:url(image path here) repeat-x}
and give your div
certain width and give it a style like
div#yourID{margin:auto}
This will work for you just fine.
You simply need only one div, the one you want in the middle.
<div class="centered"></div>
You set the background on the body:
body {
min-height: 550px;
background: url(path/image.png) repeat-x;
background-size: 1px 550px;
}
And then you have the centered div:
.centered {
min-height: 150px; /* whatever values you wish for height and width */
width: 300px;
margin: 75px auto; /* whatever values you wish for top/ bottom margin */
}
You can see it live at http://dabblet.com/gist/2774626
Try this:
body {
width:100%;
height:100%;
background:url(your-image.jpg) repeat-x;
position:absolute;
}
Solved! The problem was that I was not putting in the right location for the image carousel_bar_01.png.