I need a page that has an image overlapping the entire page. I have this code right now but my image is just being appended to the bottom.
Any help/suggestions would be greatly appreciated!
HTML Code
<html>
<head>
<link rel="stylesheet" href="/media/themes/txt/css/record_keeper/training_report.css" />
</head>
<body style="position:relative;">
<div class="content">
<p>Content here</p>
</div>
<img src="/media/images/record_keeper/lines.jpg" style="z-index:10; position:relative;">
</body>
</html>
If you want to have that image right on top, you need to use position: absolute, and give it some top, left etc options.:
<img src="/media/images/record_keeper/lines.jpg" style="z-index:10; position:absolute; top:0; left:0;">
An alternative solution using pure CSS is:
This will create a foreground div with a background image.
HTML
<div class="content">
<p>Content here</p>
</div>
<div class="MyImg"></div>
CSS
.MyImg{
background: #eee url(http://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png) center center no-repeat;
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:1000;
}
CLICK FOR DEMO
You can try adding a div tag around the body:
<div id=wrapper>
<body>
*content goes here*
</body>
</div>
then on your CSS:
#wrapper {
background-image:url('/media/images/record_keeper/lines.jpg');
}
Is that what you are trying to do?
Related
Can someone tell me what I can add the _layout page to have all my pages center align and adjust to 100 % depending on the resolution? Is this possible. I think it might be in:
Thanks!
.container {
width:90%;
}
Set margin:auto; on your .container div.
.container{
border:1px solid red;
margin:auto;
width:90%;
}
<div class="header">
<p>
Header
</p>
</div>
<div class="container">
<p>
some text
</p>
<p>
some more text
</p>
</div>
You can use the <center> HTML tag like this in your _Layout page
<center>
#RenderBody()
</center>
This will center the content of all views/pages that use that layout.
For more information take a look at this HTML center tag.
New here, I am making a web page for a school project and am having trouble getting the layout the way I want. was wondering if someone could point me in the right direction.
I am creating a layout. The top of the page is the navigation, then I have one main large image with some content over lay, and under that I have an image with content overlayed on the left and the right, then at the bottom the footer. * or thats what I would like anyway.
I have tried putting the images each in a but I can only get them to either be in a column or stacked. As I would like the first image under the header with navigation to be a wider picture , then two smaller ones each half the width of the main wider image if that makes sense..
I have searched online and the only things that looks similar to what I'm trying to accomplish are pay for templates.
<section>
<div class="container">
<img src="thebean.jpg" />
</div>
</section>
<section>
<div class="container">
<img src="rooftops.jpg" />
<div id="topleft"></div>
</div>
</section>
<section>
<div class="container">
<img src="thebean.jpg" />
<div id="topright"></div>
</div>
</section>
I'm not really sure if i got your question right without a figure that help me figure out the layout you are looking for.
Give a look at this picture and tell me if i got it right or not!
Layout testing
Here is the simple code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title>Testing</title>
</head>
<body>
<div id="largerPanel">
<img src="https://i.pinimg.com/originals/aa/49/54/aa4954451f16847cb657e68e5f46538a.jpg">
</div>
<div id="floatPanel" class="halfPanel">
<img src="https://i.ytimg.com/vi/fB8MYCGFqC0/maxresdefault.jpg">
</div>
<div class="halfPanel">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8nIMQ30DM-OKazFBcLM4m9kq3_fzph-eBoiax6M88O5nncGyB">
</div>
</body>
</html>
Test.css
body{
width: 100%;
height : 100%;
}
.halfPanel{
width:50%;
height: 20%;
}
.halfPanel img{
width:100%;
height:100%;
}
#floatPanel{
float:right;
}
#largerPanel{
width: 100%;
height: 20%;
}
#largerPanel img{
width: 100%;
height: 100%;
}
If i got it wrong please post a simple paint image with some boxes that show the layout you want, i will be happy to help you through this!
I'm having issues in making a piece of text on my website, which will be part of the navigation system, become responsive. Currently, the text is just sitting there and will not move when I readjust my browser.
Here is my HTML:
<div id="apDiv1">
<div class="wrapper1">
<h2>Home</h2>
</div></div>
Here is my CSS:
.wrapper1{
width:100%;
max-width:960px;
margin:0 auto;
}
You expect your text to move when you change the size of your browser window.
However, if the text is left adjusted (as you your case), it will always be on the left, regardless of the window size. So you should not expect it to "move".
Are you trying to center the div on-screen? I'm not sure what you mean by move the text.
If you want to center the div ".wrapper1", add position: relative to it.
If you want to center the text, make it text-align: center;
Did you include the css file correctly in your html?
The following works as expected. You can base your debugging on that:
<html>
<head>
<style type="text/css"> .wrapper1 {color:red; text-align:center; width:100%;} </style>
</head>
<body>
<div id="haha">
<div class="wrapper1">
<h2>Hello World.</h2>
</div>
</div>
</body>
</html>
I have the following problem.
I am using a twitter bootstrap to make my new website but I have difficulties with the background. The following is what I have :
<body>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-fixed-top">
...
</div>
<div id="header">
...
</div>
<div id="content">
...
</div>
<div class="push>
</div>
</div>
<div class="footer">
....
</div>
</body>
The navbar is fixed at top. (fixed height)
The header (title stuff) is scrolling with the page and is fixed height.
the footer is at the bottom of the page but scrolls if there is more content (not fixed at bottom but fixed height)
What I want is that the content has a background that takes all the avaiable space (from right after the header till the footer)
Image to clarify
Full HTML & CSS(without bootstrap css) code
So you want the content area to be at least 100% less header and footer so to speak?
This is how i would do it:
demo:
http://jsbin.com/ofijap/1/edit
.head {
height:100px;
background-color:green;
}
.wrap {
min-height:100%;
background-color:red;
}
.footer {
height:100px;
background-color:grey;
margin-top:-100px;
}
.content {
padding-bottom:100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="head">Head</div>
<div class="content">content</div>
</div>
<div class="footer">footer</div>
</body>
</html>
EDIT:
as a rule of thumb, if you want something to fill up all the vertical space it probably needs min-height:100%; But, its parent should have 100% height too, and so on up to the body element.
To the people who want to see my final result: thanks to #user1721135 ;)
http://jsbin.com/udoxet/2/edit
Now I'm gonna try and port it to my own website see if that works :)
I have a div (with a fixed width) that has 2 image elements as children.
Each image is the same width as the div so the images are placed not on the same row (see screenshot) .
This is great, but I want the images to displayed the same way (one on top of the other) but at the bottom of the div.
I'm able to achieve such behavior in some browsers using:
-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);
on the div css.
Is there a nicer way to achieve that?
Here is the code I used for the example:
<html>
<head>
<style type="text/css">
.container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px;
width:33px}
</style>
</head>
<body>
<div class="container">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
</div>
</body>
</html>
Make the container position:relative; and set the images to position:absolute; bottom:0;
However, this will not stack the images. They will overlay each other. If you need them stacked, the easiest (dynamic) way is to wrap the images with another container (like a div), and then set the styles on it. For example...
Markup:
<div class="container">
<div class="innerContainer">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" />
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" />
</div>
</div>
CSS:
.container {
background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;
height:116px;
width:33px;
position:relative;
}
.container .innerContainer {
position:absolute;
bottom:0;
}
The solution: Add an innner div and set its position to bottom:
<html>
<head>
<style type="text/css">
.container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px;position:relative;
width:33px;}
.inner {position:absolute;bottom:0px;}
</style>
</head>
<body>
<div class="container"><div class="inner">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
</div></div>
</body>
Thanks to Josh for suggesting this.