Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am new to this language so I want to know how I can color the container (the part between header and footer). Is it possible without using div? I have tried this, but problem is that when I change the position of the container to "absolute" it overlaps the header more over changes the page's width Please give an example code. Thanks.
html , body {
height: 100%;
}
body {
background: red;
}
I made html and body 100% just in case. You probably don't need it. But I suggest that you never have a naked body as your background.
EDIT : Or if you want an image
body {
background:url('http://www.planwallpaper.com/static/images/canberra_hero_image.jpg');
}
https://jsfiddle.net/xqxrmm96/1/
html-
<html>
<body>
<header></header>
<section></section>
<footer></footer>
</body>
</html>
css-
header {
height: 30px;
background-color: #e0e0e0;
}
section {
height: 60px;
background-color: #efefef;
}
footer {
height: 30px;
background-color: #e1e1e1;
}
you can do it something like this
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
How to create a responsive square container in which to place elements?
You use viewport units
div {
width: 40vw;
height: 40vw;
background: black url(http://www.lorempixel.com/500/500/nature) center no-repeat;
background-size: contain;
}
<div>
</div>
Or percent
html, body {
height: 100%;
}
div {
width: 40%;
height: 40%;
background: black url(http://www.lorempixel.com/500/500/nature) center no-repeat;
background-size: contain;
}
<div>
</div>
And here is a post showing an aspect ratio solution: Maintain the aspect ratio of a div with CSS
You currently can't assign the same width to a html element as the height if you use %-s. You need to use javascript
var element = document.getElementById("your-element");
element.style.height = element.style.width;
//Note: you need to put after the style tags or you need to make it load after fhe document has been loaded
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
so I am trying to make my banner expand across the page,
I have already tried width: 100% but it has a gap (about 5px width) on either side, any ideas why it's doing this?
CSS
.banner {
width: 100%;
height: 300px;
border-bottom: 1px solid #000;
}
It is your browser default margins and padding, do this in your css:
body {
margin: 0;
padding: 0;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
How can I replace the image tag src value through css ? and i want support in ie8 ,firefox ,chorme,safari
<div class="any">
<img src="images/i.png"/>
</div>
replace this src value through css only.
Thanks
try setting a background image and then moving (with padding) out of the box the original image
something like this...
EDIT i had to tweak it a bit to have it working...
.any img {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://placehold.it/150) no-repeat;
width: 150px;
height: 150px;
padding-left: 150px;
}
... and here is the working example
http://jsfiddle.net/nNaRn/1/
You can't change the src tag of the image with CSS, because the image src is nothing to do with CSS.
The closest you can do is set the background image of the div and get rid of the img tag altogether:
.any {
background-image: url('images/myimage.png');
}
Beyond this, you will need to use Javascript.
You cannot change the src through CSS. Although what you can do is define a blank div, and give it a width, height, and background-image through CSS. The only drawback with that approach is that the element will not behave like an image for the user (drag/drop, rightclick to save, etc.).
div.any {
width: 200px;
height: 200px;
background-image: url('./some-url-that-you-can-override-by-another-stylesheet');
}
The only thing that you can do is to set background-image to .any and display:none to img but you will need to set also width and height of the div, since div without content have width of 100%, and height of 0.
.any {
width: 300px;
height: 300px;
background-image: url(image/1.gif);
}
.any img {
display: none;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm trying to add a background image to my site-header. Part of the image should be covered by the main-content.
It is positioned correctly however even though I've added z-index, the main content doesn't cover the background image.
Here is the website.
Why would that be?
Thanks!
Edit:
If you look on the right side you will see the brown egg is not covered by the main content. You can still see part of it.
Here is some code:
.header-navigation.back {
z-index:-1;
position:absolute;
margin-left:0;
margin-top:-6px;
border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('http://frenchegg.com/images/backmenu.png');
}
and here is the main content that should cover the image:
.main-content {
z-index:99;
position:relative;
padding:1em 0 8.5em 0;
background:#fff;
}
please add the overflow:hidden css to the header-wrap class
.header-wrap {
...
overflow: hidden
...
}
and it should look good.
For the log in issue:
remove the z-index: 99999 from the class .bann
and add this css to the class tooltip-wrap
sorry something went wrong
Thanks
Seems like you could just reduce the height of the header-navigation.back rule to 100px rather than mess with z-index.
I changed the bann class to :
.bann {
cursor: pointer;
display: block;
height: auto;
position: relative;
width: 101.5%;
z-index: 99999;
margin-left: 12px;
}
after that it seems ok ... check it and inform me of the result;
I tested the code above with firebug ;)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
The below css coding is used in my page. But in chrome it displays the image fine. but in firefox it breaks. I dont know why it shows like that. If anybody know the solution for this please help me. Thanks in advance.
.vote
{
position:absolute;
margin: 53px 3px 0 115px;
}
http://domian.com/mysite/pollpage.php?id=2&mview=72
This is my website page. The vote image alignment is correct in chrome but not in firefox
add position relative
.contentbox
{
position: relative;
}
and remove margin ,
add bottom and right
.vote {
position: absolute;
bottom: 0;
right: 45px;
}
...
Now define your main div #polling .pollpagewidth div .contentbox position relative and give to img tag position absolute and define right or bottom value according to your design
Hi now add this css in your style sheet and fixed this problem
#polling .pollpagewidth div .contentbox{
position:relative;
}
.contentbox > img {
bottom: 16px;
margin: 0;
padding: 0;
position: absolute;
right: 43px;
}