I have a div main that I have wrapped around my content and a sidebar. I have assigned the #main to have a background image and a min-height of 1200px.
In Google Chrome & Firefox, when I inspect the div doesn't have any properties when I inspect the source. Thus the div's background image and height don't work either.
<!--Main content layout -->
#main {
clear:both;
position: relative;
min-height: 1200px;
background-image:url(images/white.png);
background-repeat: repeat-x;
}
.sidebar1 {
float: right;
width: 20%;
padding-bottom: 10px;
margin-top: 20px;
}
.content {
padding: 10px 0;
width: 76%;
float: left;
margin-top: 20px;
}
The site address is: http://www.tibetskyvillage.org/
Would really appreciate someone elses eyes on this. I use this method all the time and for some reason this time it's failing.
The comment <!--Main content layout --> is not a valid CSS comment but an HTML comment instead causing a parse error.
See the screenshot, I have found some disturbances in your layout, to fix this or solution to your problem is
Don't give the image as background in CSS, give it as image in html like this
<img width="1360" height="675" src="images/bg0.jpg" class="wraper">
<div id="main">Your content</div>
Add styles to the image and main as
.wraper {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
#main{
position: absolute;
min-height: 1200px;
width:100%;
}
Related
I would just like to know how to resize an image width to fit the browser width, The image is basically my header image that i want to fit the screen width.
I would thereafter need to place a div on the image. I have the following at the moment but nothing seems to work.
#container {
position: relative;
}
#divWithin {
position: relative;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
#imgWithin{
width: 100vw;
height: 100vh;
left: 0;
}
<div id="container">
<img id="imgWithin" src="~/images/image(2).png" style="height:325px; margin-top: 75px;" />
<div id="divWithin">Testing</div>
</div>
Any help or ideas would be gladly appreciated
What I am trying to achieve is displayed in an image below:
With 1 being : The image that I want displayed across the screen width (fit screen width)
and with 2 being : The div that I would want to place upon the image
To make a image responsive You need to use a class like this:
.responsive {
width: 100%;
height: auto;
}
If you need more details about responsive images this link should help https://www.w3schools.com/howto/howto_css_image_responsive.asp
Try changing your css to this:
html, body {
width: 100%;
}
#container {
width: 100%;
position: relative;
}
#imgWithin {
width: 100%;
}
#divWithin {
position: absolute;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
This will make the image the full width of the browser window with the text overlaid on top.
You are going to warp the image with a fixed height in your html though. If you provide a link to an image mocking up what you are trying to achieve I might be able to help you further
Why don't you use background: url()?
so new html now is:
<div id="container">
<div id="divWithin">Testing</div>
</div>
and css:
#container {
background: url("Your image url") no-repeat center center;
background-size: cover;
}
learn more about background and background-size
what ever media query you use put every where
CSS:-
.container{
padding: unset;
width:auto;
}
i am expecting inside container id is your image this works perfectly fine in every screen if you face any problem ping me
The vertical repetition of the background image in both sidebars on each side of the page stops where the computer screen ends, not where the page ends. As you can see, I have already tried to make all parents height: 100% in CSS, but it doesn't work. How do I make the image repeat itself till the bottom of the page?
HTML:
<body>
<div class="sidebar" id="sidebar1"></div>
<div id="content">
</div>
<div class="sidebar" id="sidebar2"></div>
</body>
CSS:
html, body {
min-height: 100%;
min-width: 100%;
}
#content {
min-height: 100%;
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.sidebar {
min-height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
#sidebar1 {
background: url(image.png) repeat-y bottom left;
background-size: 125px 125px;
}
#sidebar2 {
background: url(image.png) repeat-y bottom right;
background-size: 125px 125px;
}
Here's a similar question with a very detailed answer which suggest to use a css3 feature called Viewport Percentage Length as in :
height:100vh;
Please refer to that answer which includes explanations on when this can be used and what browsers support it, to see if it can help to you. There are other answers worth a look to achieve the same kind of effect without setting the height.
you can solve it with javascript (jQuery). resize your sidebars after page loaded. for example:
$(document).ready(function(){
if($('#content').height()>$('#sidebar1').height()){
$('#sidebar1').height($('#content').height());
$('#sidebar2').height($('#content').height());
}
});
(I didn't try it, but I think it works.)
I would like to put footer on the bottom of the page (or bottom of the screen, if page is shorter than a screen). I am using code:
<div id="wrapper">
<div id="header-wrapper">
...
</div> <!--header-wrapper-->
<div class="clear"></div>
<div id="body-wrapper">
<div class="row960">
<div class="menu">...</div>
<div class="content">...</div>
</div> <!--row960-->
</div> <!--body-wrapper-->
<div class="clear"></div>
<div id="footer-wrapper" class="gray">
</div> <!--footer-wrapper-->
</div> <!--wrapper-->
and css:
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:24px;
margin:0px
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
background-color: #000000;
color: #FFFFFF;
font-size: 14px;
}
#wrapper{
min-height: 100%;
position: relative;
}
#header-wrapper{
height: 100px;
}
#body-wrapper{
padding-bottom: 50px;
}
#footer-wrapper{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
.row960{
width: 960px;
margin: auto;
overflow: auto;
}
#menu{
width: 200px;
float: left;
}
.content{
width: 740px;
margin-left: 20px;
float: right;
}
The problem is that footer is on the bottom of the screen even if the page is longer than a screen (it covers a text). I've checked it with Firebug and body-wrapper has right height, but row960 has height of screen instead of height of page. I can't figure out how to fix it. Does any one have idea what to do?
You can see my page on http://www.domenblenkus.com/fiap/notice.php
Thanks for your help!
EDIT: I don't know if I emphasized it enough, so I would like to point it out that the main problem is that height of row960 is not right.
Hmmm, I think I have a solution that fits the requirements you stated. There are certainly other ways to do this though, so you can keep looking around if you don't agree with this method. (Also, when I looked on your site it appeared that your #wrappper element was a sibling of #footer-wrapper, and not a parent.)
So, the HTML would look like (structure copied from your site):
<div id="wrappper">
<div id="header-wrapper" class="gray">
<div class="clear"></div>
<div id="body-wrapper"></div>
<div class="clear"></div>
<div class="spacer"></div>
</div>
<div id="footer-wrapper" class="gray"></div>
Note the addition of the .spacer element at the bottom of #wrappper, it's required for this approach of the "sticky footer".
Now, CSS you'll need to add (add to any current definitions if you already have them):
body, html{
height: 100%;
}
#wrappper{
min-height: 100%;
margin-bottom: -50px;
height: auto;
}
.spacer{
height: 50px;
}
If you're wondering why I chose 50px for the height, it's because that's the height of your footer element, #footer-wrapper.
Anyways, I only really tested this in the Firebug console, so I'm not sure how it will behave in a live environment, but I'm fairly certain this will give you what you want. If this isn't what you were looking for, let me know and I'll be happy to help further!
If you want it at the bottom, then you don't need the position:absolute or bottom:0, it will be at the bottom of your div anyway.
You can try doing it using margin. Here is a fiddle of what I'm taking about: http://jsfiddle.net/8WLyP/
Basically for your HTML, place all your content inside a "container" element and then your footer will be a sibling of that element.
Then in your CSS what you will need is to give them html and body elements a min-height: 100%
You "container" element will also have min-height: 100%
You will then need to give your footer a heightof X, in my example it's 50 pixels.
The "container" element will need to have margin-bottom: -50px or whatever value you give the height of the footer.
With all that done, make sure you don't give "container" and "footer" any other margins or paddings than the ones shown, if you need to give them, then you will need to give it to the child elements, in my example p element.
With this technique, as opposed to position: fixed the footer will stick to the bottom of the window if the content is too short, and it will move with the content when the content is bigger than the window/viewport.
HTML:
<div id="container">
<header>
<p>Header</p>
</header>
<section>
<p>Section</p>
</section>
</div>
<footer>
<p>Footer</p>
</footer>
CSS:
html, body, header, footer, section, p, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
p {
padding: 5px 10px;
}
header {
width: 100%;
background: #f00;
color: #fff;
}
section {
width: 100%;
height: 200px;
background :#0f0;
color: #fff;
}
#container {
width: 100%;
min-height: 100%;
margin-bottom: -50px;
}
footer {
width: 100%;
background :#00f;
color: #fff;
height: 50px;
}
You want to place the footer at the bottom of the content. BUT: You want to have it at the bottom of the viewport (window) if the content above it is shorter.
So, try this:
the CSS:
#footer-wrapper {
position: relative;
width: 100%;
height: 50px;
}
#body-wrapper {
position: relative;
height: 100%;
}
… and the JavaScript (jQuery):
var bodyWrap = $('#body-wrapper'),
footerWrap = $('#footer-wrapper'),
windowHeight = $(window).height();
var heightRemaining = parseInt(windowHeight - bodyWrap.outherHeight() - footerWrap.outerHeight());
if (heightRemaining > 0) bodyWrap.css('min-height', heightRemaining);
Didn't test it due to little time.
Give it a try.
I've found a method of placing the footer that I like, except for the fact that footer overlaps the content when the page resizes.
Using the structure and formatting I have already, how can I "clear" the footer, so that it drops off when the page resizes (avoiding an overlap of #content)?
I've tried clear: left and that does nothing for this.
Essentially, I want the footer to always be visible, and attached to the lower left of the window, as long as space allows; however, when the window gets smaller, I don't want the footer to overlap my content.
CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
background-size: cover;
margin: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
height: 100%;
min-width: 900px;
overflow: hidden;
}
.main_nav {
margin: 0;
width: 160px;
float: left;
padding-left: 40px;
overflow: hidden;
}
#content {
float: left;
width: 750px;
height: 600px;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
}
HTML:
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
<ul class="main_nav">
<li></li>
</ul>
</div>
<div id="content">
</div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
The answer has been already choosen, but i wanted to give an alternative.
The "wrapper" contains "header" and "content", while the "footer" is outside of it. You could, for example, add
z-index:10;
to the wrapper's css and
z-index:1;
to the footer's css.
This one last isn't really needed, but it's for completeness. This way, whenever they get in "touch", the one with higher z-index will remain on foreground (ie, higher level on the z-axis, that is the axis perpendicular to the screen surface) and the other elements will slide behind, according to their own index.
This problem is because of width. You width is different in each case i.e. in content , footer & wrapper as well. I created a jsfiddle
[http://jsfiddle.net/jvaibhav/xncuF/37/]
try this.
I want to have a login form centred on the page. An example is here
I know how to centre an element what I can't work out is how to centre an element always in the centre of the page even if the browser window changes size
Classic problem. Here's some example CSS:
#your_element{
position: fixed;
left: 50%;
top: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
}
Important bit: the negative margins should be half of the respective dimensions.
Add position: fixed; to it's style. If you know how to center it, then just adding this should do the trick.
Have a look here for more info: http://www.w3.org/TR/CSS2/visuren.html#choose-position
I keep this template HTML just for this situation, when I need a container that is vertically and horizontally centered:
CSS:
html, body {
height: 100%;
}
body {
background: #ffc;
margin: 0;
padding: 0;
}
#vertical-center {
float: left;
height: 50%;
width: 100%;
margin-top: -185px;
}
#content {
background: #ffffde;
border: 2px dashed red;
clear: both;
margin: 0 auto;
padding: 10px;
height: 350px;
width: 500px;
}
HTML:
<div id="vertical-center"></div>
<div id="content">
<h1>Centered Content</h1>
<p>This content is centered on the page.</p>
<p>More importantly, it won't get cut off when the browser window becomes too small to display it.</p>
</div>
Note that the #vertical-center has a margin-top that has to be half the height of the #content div, and it has to be negative.