I am learning how to make a website and have hit a bump.
The website is here, and as you can see, it's possible to scroll to the right, which I don't want to happen.
I think the problem is with the following element:
.logo_bg {
background-color: #FFFFFF;
box-sizing: border-box;
padding: 40px;
padding-bottom: 130px;
text-align: center;
width: 100%;
position: relative;
top: 0px;
}
which relates (I hope) to the container that holds the logo and the text at the top of the page. I think width being 100% is the problem, but I'm not sure why; it seems to span more than 100% at the moment.
Any help is appreciated.
Remove
.logo_text width: 100%
.logo_image position: relative
Remove left from the logo_image class to center it and fix the overflow.
Also add left: 0; to your logo_text, because it has padding 40px from parent plus 100% width (100% + 80px [overflow]) or just remove the width and position it relative
Related
As can be seen here (please make it wider): http://jsfiddle.net/CZayc/1368/, I wanted to make my navbar width 100% of browser width, and place some links (First Second Third Fourth) in the centered, 1200px wide space.
I do not know why, but the middle container just overlaps the navbar.
Changing position: absolute; on navbar caused it to shrink to 1200px size (not desired).
What can I do about it? There is also a problem with link container, because I couldnt center First Second Third Fourth in the desired 1200px space (probably due to overlap).
Thanks!
Using absolute position on an element takes it out of the content flow: meaning that other elements in the flow act like its not there. The elements overlap because there is nothing to push the middle content down below the header.
There are 2 things you could do:
stop using position absolute. as #NendoTaka suggests, relative should be fine. If there is some reason for absolute positioning you haven't explained, then
add a margin to the middle content area.
Example CSS
.middle {
background-color: #7f7f7f;
height: 1050px;
margin: 74px auto 0; /* height of nav plus its borders*/
}
You can move .middle out of the way by adding margin-top: https://jsfiddle.net/CZayc/1371/
Be sure to set margin-top to the height of .nav. This includes borders, too.
Change your nav class to
.nav {
background-color: #34384A;
height: 70px;
width: 100%;
border-top: solid;
border-bottom: solid;
}
Note: You don't need the width: 100% but just in case.
You need to apply position:relative to both the .nav and the .middle
Your problem before was that .nav had an absolute position which caused the overlap. the relative positioning keeps that from happening because it formats each div relative to the previous div as written in your HTML.
.nav {
position: relative;
background-color: #34384A;
height: 70px;
/* position: absolute; */
left: 0;
right: 0;
border-top: solid;
border-bottom: solid;
}
.middle {
position: relative;
background-color: #7f7f7f;
height: 1050px;
margin: 0 auto;
}
You’re trying to solve the wrong problem with your question. The example below is a cleaned up version of your code.
* { margin:0; padding:0 }
nav {
background-color: #34384A;
height: 70px;
border-top: solid;
border-bottom: solid;
text-align: center;
}
<header>Test test</header>
<nav>
<a>First</a>
<a>Second</a>
<a>Third</a>
<a>Foruth</a>
</nav>
<div class="middle">
11111<br>22222<br>33333<br>44444<br>55555<br>66666
</div>
<footer>Test</footer>
Be mindful of the HTML you use. The HTML tags you choose should provide meaning to the content they wrap. Also you should avoid using position: absolute for general layout concerns such as this one.
Hope that helps.
I'm trying to figure out how to get the footer to stick to the bottom of the page in the css of http://bit.ly/138xOAB
I've tried alot of things which were said in tutorials, such as:
the position absolute,
bottom:0,
and min-height of the container 100%,
height of the body 100%,
But none of those things turned out well.
You can see the HTML and CSS by inspecting the website. I can't get the proper code over here.
Can someone help me, maybe there is something wrong in the HTML?
The problem with you footer's position: absolute; is that it will hide the other elements behind it.
Your footer can be best viewed if you remove position: absolute; so as to show all elements and add margin-top: 20px; for some gap in between the footer and the element before it..
Try it.
EDIT:
If you want the footer to be always float on the screen, use the following CSS (comments inline):
.container {
max-width: 1200px;
margin: auto;
padding: 0px 3%;
margin-bottom: 250px; /* so that all content is visible */
}
.footer {
background: #efefef;
position: fixed; /* so that the footer floats */
overflow: auto;
bottom: 0px; /* float at bottom */
padding-top: 20px;
padding-bottom: 20px;
height: 180px;
width: 100%;
margin-top: 20px;
}
Remove "position: absolute" and "bottom: 0" from the .footer class. I think that fixes your issue. And add a small margin above the footer so there is a small space between the content and the footer.
In image above you can footer top border is not aligned with the login box.I want to restrict border width equal to login container width.
and also I dont want x axis to scroll as in image.
To solve overflow issue I used,
html {
overflow:hidden !important;
}
But it does not seems promising to me,
I want something like this ,
footer top border should be aligned with red lines
Fiddle
You are using position: absolute; so you need to use left: 0; for the .google-footer-bar
Demo
.google-footer-bar {
position: absolute;
bottom: 0;
left: 0; /* Add this here */
height: 35px;
width: 100%;
border-top: 1px solid #ebebeb;
overflow: hidden;
}
Also, it will be better if you wrap up the elements, say a maximum 1000px in width and than use margin: auto; to center them, having no wrapper element will just spoil your layout. As far as 100% width element goes, you can use width: 100%; for the container and then nest 1000px; of another child element with margin: auto;, this way your layout will be stable.
You might want to start by removing width and min-width and also height and min-height.
I have a div which has its CSS initially defined as:
.mydiv {
position: absolute;
top: 60px;
left: 60px;
right: 60px;
bottom: 60px;
background-color: cyan;
overflow: hidden;
}
That is with equal distance from screen borders and I wanted to make it draggable via jQuery. This wouldn't work because of the right and bottom CSS directives.
So my next idea was to use this CSS definition:
.mydiv {
position: absolute;
width: 90%;
height: 90%;
margin-left: 5%;
margin-top: 5%;
background-color: cyan;
overflow: hidden;
}
Which according to my understanding would create a div with a width and height equal to 90% of the screen width/height and additionally the margin directives (5% on each side) would position it in the center of the screen.
This solution doesn't seem to work for 100%.
It works horizontally, the div is centered horizontally BUT vertically the space in the bottom is less than the space on top. Which is not what I want it to be.
I know I could use calc() to solve it in a different way but I want to avoid it due to browser compatibility (IE8).
I was wondering what I'm doing wrong?
i'm kind of stupid today.
i removed the margins and used:
top: 5%;
left: 5%;
and it solved my problem.
My header holds a logo image as well as my nav element. I would like my nav to sit at the bottom of the header, but without using absolute positioning or specific top/left pixels because I would like this to be responsive.
Here is my code so far
http://jsfiddle.net/Aiedail/86ZGd/
I had tried adding like a
nav{margin-top: 50%;}
but that used the full page height rather than the containing div height.
Any suggestions or help would be appreciated.
I do think the best way for you to solve this, is to set your parent container to
position: relative;
and in your nav, use
position: absolute;
bottom: 0;
right: 0;
this way, your nav is always in the rightbottom corner of your header, but your header is still relative, so you don't lose the responsiveness.
JSFiddle Here
Basically, I took your logo and the nav and made them both display: inline-block; Removed the float styles.
Then you can use the vertical-align: bottom; for the nav element.
I forked your jsfiddle here http://jsfiddle.net/tQg8d/1/
img{
#extend .layout;
padding: 10px;
width: 30%;
height: auto;
max-width: 300px;
display: inline-block;
}
nav{
position: relative;
margin: 0;
padding: 0;
width: 69%;
height: auto;
border: 5px solid $red;
bottom: 0px;
display: inline-block;
vertical-align: bottom;
I also had to make the width of the nav a little smaller so changed it to 69% so that it shows up to the right of the logo. Might be because of the border.
Hope this is will help, if like to increase header height and and nav width may fine for you
nav { width :100% }
and
header { max-height : 200px; }
I would honestly suggest you follow the position:absolute model that Jamie detailed, but if you want a different way, you can use some negative margins.
For this, though, you need to be able to specify the height of the nav element (use ems, as they work better with responsive designs).
So you would just clear the float after the image--then you can set the top margin to -xxx (whatever the height of the element is).
Here is an example:
http://cdpn.io/bfoyj
Not as pretty as using the absolute positioning, but also works.