Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Have a look at mockup image
The site have a fixed content width. I need elements inside a red area to be stretched, depending on the screen width. So in case it's like on the image, green and blue stripes should go till the end of the screen. If screen is wider, site content area( that is inside the vertical red lines ) will be the same. But blue and green lines will stretch more, to reach the sites left and right side.
I was going to implement it using absolute positioning. But I need to know the width of the block. And as it can be different I do not know how to do it, except for using javascript. but I'd like to use html and css only.
There are many ways to accomplish this, but the coolest of all is using the before & after pseudo elements to fill in the edges.
.container {
width: 1200px; /* whatever... */
margin: 0 auto;
}
.header {
position: relative;
background: #000; /* whatever... */
}
.header:before, .header:after {
content: '';
position: absolute;
background: #000; /* whatever... */
top:0 ; bottom: 0; width: 999em;
}
.header:before {
right: 100%;
}
.header:after {
left: 100%;
}
Here's the fiddle: http://jsfiddle.net/bnket/
Check out this cool article by Chris Coyer: Full Browser Width Bars.
using css assume your center content is 800px in width..
You would add 800 plus the width of the stripes and asign fixed left & right
thats about it.
This is all i can provide due to the lack of a jsfiddle
Related
I am using the right and left properties to place tiny images on the edges of my page.
.class img {position:absolute;left:60%}
The above example places the image at the end of the screen on the right and only half of the image is visible but it also triggers a horizontal overflow making the page draggable towards the full width of the image.
I tried setting overflow to hidden but it didn't help.
Any ideas on how I can achieve this?
Any time you want to allow for items off screen, but prevent scrolling, you're going to have to restrict the user's viewport. This can usually be done by setting the overflow-x or overflow-y to hidden on the body.
/* The problem */
.off-screen {
position: absolute;
right: -50px;
width: 100px;
height: 100px;
background-color: red;
}
/* The solution */
body {
overflow-x: hidden;
}
<div class="off-screen"></div>
Note: Depending on your specific situation, this may need to be tweaked, but the concept is the same. I can update this to be more specific if you include more code in your initial post.
It sounds like you want your images to appear at the right edge of the screen. This should work:
.class img {
position: absolute;
right: 0;
}
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
On my work2 Website i am having problems with keeping down the footer in my page to the bottom, when there is not enough content in the page. I googled already, searched on youtube csstricks etc.
But there are always the same "solutions";
but not for my page. Now i am here for some help.
What i want is this.
I would really appreciate a good solution.
Your sincearly.
Mike
You can simply implement the code from the link. The keys are:
fixed footer height, and having it absolutely positioned with bottom: 0 inside a relatively positioned element
content bottom padding that equals the footer height in order to push it downwards if needed
So, for your website, you need to add the following:
html {
height: 100%;
}
body {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
bottom: 0;
height: 35px;
width: 100%;
}
.content {
padding-bottom: 60px;
}
Just tested it on your website by appending it to your style.css file.
Move your footer inside the body, it's invalid html otherwise. Also you can use flex to simply stretch the content to fill the space left over on the screen:
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
#content {
flex: 1;
}
Why use this method? Simple, footers don't need a specific height this way, it can be variable in height if needed.
If you follow the example that you provided, you'll see that the html and body tags both have the height attribute set to 100%, and the wrapper div has a min-height of 100% and is set to relative.
That allows the footer div in the example to be absolutely positioned on the bottom of the wrapper div, which also happens to be the bottom of the page.
If you have Chrome, open up the DOM inspector and select the html or body tag (your choice), the wrapper div, and the footer div in that order and you'll be able to follow along.
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 have a logo on my site and the problem is when you hover under it or around it you can still click it. I want it only to be clickable once on it.
www.theanimedatabase.com
The logo is found in the top right!
If you right click on your logo and click "Inspect Element", you will be able to see the area of your image is actually 200px x 200px.
Try crop away your logo extra height at the bottom (and extra height on the top I am guessing you have extra height at the top as well because you set the header img margin-top as -68px to push your logo upwards) so that the total height of your logo is 70px. Which will match with your header.
Next, change this in your css:
header img {
margin-top: -68px;
float: left;
width: 200px;
height: 200px;
float: left auto;
}
to:
header img {
float: left;
width: 200px;
height: 70px;
float: left auto;
}
best solutions would be to crop image appropriately, but you can solve it with adding this css rule to your image:
overflow: hidden
notice this will hide part of the image, so if you have something under Anime Database it would be hidden.
Look at this image:
Just as stated by everybody, cropping your image is the best solution.
header {
overflow: hidden;
}
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
I am doing a website with wordpress and I have this problem. While editing some of the css of the page, I wanted to make the footer go a little bit closer to the image widgets. The problem is on Firefox, the site is perfect, but when we look at it from other browsers (eg: chrome or safari) it is on top of the images.
Can anyone figure this one out? I have spent hours trying to change this but it doesn't really work.
Here is the link of the website:
http://portugalweddingphotographer.com/
Thank you very much
I agree, refresh your cache. To make footer closer than what it is currently, remove/adjust padding and margin for:
footer#footer-container p.copyright {
margin: 30px 0; /*can make this 10px for example*/
}
footer#footer-container {
padding: 30px 0; /*can make this 10px for example*/
}
I like doing something like this:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
}
Where .footer is the class on your outermost footer wrapper, and it's the last thing inside the body but below your content wrapper or whatever. And you'd change the 60px to whatever height that entire footer is.
It's hard to say for sure what's happening though because I couldn't reproduce the bug just looking at the website -- could you post the html/css of your site?
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have two spans with inline-block display, in responsive mode (for resolution lower than 768X1024) I need to position one on top of the other so I set display to block but the wrong one is on top how can i make the second span to go on top?
thanks
See if this variation helps:
http://jsfiddle.net/panchroma/RLSkL/
The important bits are that I flipped the order of the two divs in the HTML then used CSS to manage the layout
CSS
/* pull the first div to the right and the second to the left for desktop views */
#loginContent{
width:330px;
float:right;
}
#attensions{
width:330px;
float:left;
}
.LgnBtn{
clear:both;
}
/* for tablets and smartphones, remove the floats above */
#media (max-width: 790px){
#loginContent{
width:100%;
float:inherit;
}
#attensions{
width:100%
float:inherit;
}
}
Hope this helps!
Use float:left on the <div> you'd like to be on top.
the only way is move up the #loginContent in your html code, in other hand you can use absolute position to set their position as you like. for exam:
#attensions{
position: absolute;
top: 180px;
}
#loginContent{
position: absolute;
top: 0;
}