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 2 years ago.
Improve this question
The footer is at the bottom as intended on my Home page and Form page. But something is causing the footer to appear at the top of my Gallery page. I'm assuming it's an issue with specificity or one of my selectors. But I'm new to this and so far everything I've tried hasn't resolved the issue.
My footer code is basic so something else must be forcing it to the top. I checked the Gallery ID's and none of them appear to be effecting my footer element.
footer {
background:#333333;
color:#FFFFFF;
padding:10px;
}
/* || gallery-items */
.gallery-item {
text-align:center;
width:300px;
height:300px;
margin:10px;
background-color:#ADD8E6;
border:10px solid #333333;
border-radius:4px;
float:left;
object-fit:contain;
}
/* || gallery item hover */
.gallery-item:hover {
border-color:#03A9FC;
}
Here is a link to my Replit. I apologize for not being able to asses what the root of the issue. This is my first week doing CSS styling.
Your .gallery-item has float: left; this means that those elements don't get "considered" as taking any space when rendering the other elements on your page. You can put a div with a style clear: both (in your case only clear:left will work) between your gallery and your footer elements to fix this
Add overflow: hidden; on #gallery-content
#gallery-content{
overflow: hidden;
}
Related
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 finished coding this website using bootstrap and now I have this issue regarding that horizontal scroll which was not supposed to happen. This is my first website using boostrap.
I tried using 'divide et impera' by removing snippets of code in order to find the issue. The horizontal scroll disappeared when I removed pretty much the entire content / website so I suppose it is related to the main container ?
I can't seem to figure out the problem, been banging by head against the wall for the past few hours.
Not to take anything away from #Tulio Castro, as putting overflow-x: hidden; on the body should fix this. This is a hacky fix, however, in that it doesn't fix the problem itself, rather, it fixes a currently visible consequence of the problem. I figured you might want to know the actual problem--why this is happening and what you can do better.
First let me say that bootstrap is a delicate system: Every time you apply your own styles, you'll need to be checking to make sure your styles don't clash with bootstrap's.
So here are the fixes:
You can run this jQuery when the horizontal scrollbar is visible, and it will tell you which elements are causing the overflow:
$('*').filter(function() { return $(this).width() > $('body').width(); });
In your case, it will return three culprits, all of them .row elements:
1) The first .row needs to be nested in a .col-xs-12 element. You can't have a .row as an immediate child of a .row element in bootstrap.
2) The second .row has a parent with class .partneri. You applied custom CSS to this parent element, which broke bootstrap. In this case, bootstrap wanted 10px of padding on the right and left, but your CSS took this away:
.parteneri
{
....
padding: 10px 0 10px 0;
}
Change this to
.parteneri
{
....
padding: 10px;
}
And you should be fine.
3) The third .row has the same thing. The parent with class .sub-footer breaks bootstrap's padding. Change
.sub-footer
{
border-top: 2px solid #f8f8f8;
padding: 10px 0 4px 0;
}
to
.sub-footer
{
border-top: 2px solid #f8f8f8;
padding: 10px 10px 4px 10px;
}
And you're set. Best of luck.
I saw this horizontal scroll in apple iphone 4, just solve this, just define thiss css:
html,body{
overflow-x:hidden;
}
Hope it helps
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 9 years ago.
Improve this question
I often see this code on some sites:
body:before {
content: "";
width: 0;
height: 100%;
float: left;
margin-top: -31700px;
}
What is the result of using this CSS?
According to this Website, it's an opera fix http://www.cssstickyfooter.com/using-sticky-footer-code.html , on this site, it's used for a sticky footer.
Sticky footer means it always sticks to the bottom of any window, also when there is not enough content to fill the screen.
The CSS Code
Below is the CSS code that makes your sticky footers actually stick to the bottom.
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
See a fiddle here: http://jsfiddle.net/f3Uvs/2/
Used to add cosmetic content to an element, by using the content property. This element is inline by default. The ::before notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :before introduced in CSS 2.
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/::before
Opera Browser grab the bottom of the window and move it up and then down to see that it's not working as expected. This has always been operas main problem.
So in that case body:before { } used.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
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.
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.
Improve this question
I'm trying to build the layout of my page, so far so good. Until I've placed a image on my header.
When I try styling the image, a white line appear on top of my page. I've place the code on JSFiddle: http://jsfiddle.net/CCZjL/
When I remove the:
#header img {
width:66px;
height:61px;
position:absolute;
top:25px;
}
From my CSS file, the line is no longer there...???
Can anyone explain this to me?
Thank you!
Add margin: 0; and line-height: 65px; to #header h1
like so:
#header h1 {
text-align:center;
font-size:20px;
margin: 0;
line-height: 65px;
}
you can also remove vertical-align: middle; from #header. It's not needed.
white-space is coming from h1.
Browser applies by default styles to elements.
It is better to remove all default styles. Like:
*{
margin:0;
padding:0;
}
Write:
#header h1 {
margin:0;
}
Updated fiddle here.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
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.
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
Improve this question
See http://www.levomedia.com/contact-us/
If your screen is of a good size there might not be a scroll so you will have to zoom in... but when there is a scroll and you move down the page, my theme forces my header to travel with you, which I would like to remove if possible.
What would be the best way of stopping this from happening, so that it stays in the same position and does not travel with you?
The Best thing would be to remove the relevant Js code , which is causing this.
I have found this
<script src="http://www.levomedia.com/wp-content/themes/sensitive/js/jquery.stickymenu.js?ver=3.6" type="text/javascript">
js code file inclusion in your page, just remove it, everthing should works fine, as you intend to.
this will also improve your page rendering time and efficiency :)
Happy Coding :)
you need to remove the css attribute :
position: fixed
Which you had used on the header.
Stop using the jquery.stickymenu.js script and things gonna be ok. It applies position:fixed to your header, when you scroll the page down and you don't need it.
Like this
please add position:fixed, top:0; width:100%; in .navbar-wrapper selector
and
please add position:relative; top:66px; in this selector .type-post, .type-post .post, .type-page, .type-page .post
CSS
.navbar-wrapper {
background: url("images/wild_oliva.png") repeat scroll 0 0 #EEEEEE;
margin-bottom: 20px;
padding-bottom: 0;
padding-top: 20px;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.type-post, .type-post .post, .type-page, .type-page .post {
margin: 0 !important;
padding: 0 !important;
position: relative;
top: 66px;
}
In your case, Js is adding the position:fixed attribute in topmenu once you scroll down.So you can do this by css.
convert this :
<div id="topmenu" class="container" >
to this:
<div id="topmenu" class="container" style="position:relative !important" >
If you dont want inline Css Make a class like this:
.container{
position:relative !important
}
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
I have a website that needs a few css made banners and I'm having a bit of trouble creating them. I would show you what I had, but their too embarrassing to share...
My goal is to try and only use html and css to build these instead of images. This is kind of what I'm trying to build with the text inside of it...I think that is where I'm failing.
Any help would be much appreciated and would save my head the pain of hitting against the wall.
The only thing you need is a <div> element and manipulate the CSS.
Have a look here and here as they have everything that you will need to get started
I've also created a Fiddle for you that will give you the effect you want.
EXAMPLE
HTML
<div class="bookmarkRibbon"></div>
CSS
.bookmarkRibbon{
width:0;
height:100px;
border-right:50px solid blue;
border-left:50px solid blue;
border-bottom:30px solid transparent;
}
And here is your flag with text inside as you show it in the picture.
EXAMPLE
HTML
<div class="ribbon">BANNER</div>
CSS
.ribbon {
text-align:center;
display:block;
width:100px;
height:100px;
background:#d00202;
}
.ribbon:after {
content:"";
display:block;
position:relative;
top:80px;
width:0;
height:0;
border-width:30px 50px 50px 50px;
border-style:solid;
border-color:#d00202 #d00202 transparent #d00202;
}