Here is the relevant jsFiddle with full code sample.
I am trying to:
Change the color of the footer's <hr/>, however my styling rule doesn't seem to work; and
Figure out why, if you break the page out into a fullscreen, the page appears too wide and the browser presents you with a horizontal scrollbar
My CSS rule to color the <hr/> is:
hr {
color: rgb(255,0,0);
}
And as for why the page is too wide, I'm totally out of ideas. Any idea as to why my attempts here aren't working?
The hr tag use the property border to set the line ... if you need to change that color then use:
border-top-color
Try this:
footer hr {
border-top-color:blue;
}
The DemoFiddle
And the scroll bar on the page is because you are breaking the layout with the absolute position on the footer. http://jsfiddle.net/7j9q1ye4/2/
The HR will go over the whole Div so it depends how big the div is,
if the width of the div where the HR is within is over the whole page wide that the HR will do the same. It has probably something to do with the DIV where the HR is standing in.
Related
On this site, if you view in under 1024px wide screen (ideally use Chrome's mobile viewer for iPhone 5 or 6), there is white space on the right side of the footer and I can't figure out how to get rid of it (i.e make the green fill up the full space), without screwing up stuff above it.
Any ideas on which CSS can be altered/added to fix this would be super appreciated.
That's the scrollbar's silhouette. Your content's overflowing the footer:
Adding the following will remedy the issue:
.t3-wrapper { overflow-y:hidden; }
You have a rule on the body tag for overflow-x:hidden !important -- all you need to do is put the same rule on the html tag. Like so:
html,body{width:100%;overflow-x:hidden !important;}
Cheers!
I found other questions that address a similar problem, but this is slightly different, as the top bar content is dynamically changed. That means I don;t know at which screen width the bar will begin overlapping content.
This CSS works at a standard resolution with the current top bar text. I know I can use #media (max-width) in CSS to adjust the padding-top, but that doesn't account for dynamically changing top bar text.
body {
min-height: 2000px;
padding-top: 70px;
}
Is there a way to check the top bar's height, and add an offset to the body without using Javascript?
Another, perhaps better, option is to switch the top bar to the mobile view whenever it gets too crowded for a single row. Any thoughts on how to do that?
Thanks
https://jsfiddle.net/waspinator/4c2yespy/7/embedded/result/
Original fixed top example.
EDIT:
updated jsfiddle with javascript fix https://jsfiddle.net/4c2yespy/8/
There is no way to do this wit css only, but you could use the javascript resize event to dynamically change the body padding top:
function adjust_body_offset() {
$('body').css('padding-top', $('.navbar-default').outerHeight(true) + 'px' );
}
$(window).resize(adjust_body_offset);
$(document).ready(adjust_body_offset);
http://primoburgers.herokuapp.com/
I am working on this website. It looks fine on my laptop, but when I load it onto a bigger desktop monitor, it has a red bar under the html tag at the bottom of the page. This red bar shows under all of the pages. Does anyone know how to remove this?
Thank you for taking the time to look at this!
You need to set your html and body elements to height: 100% first.
After that set top-pic-wrapper to height: 85% or so. % height wont take effect till the other parent elements also have a height set for them.
No need to define a height for your menu pic class.
Just change your class below
.heightMenuPic {
height: auto;
}
I've read every post and google result about footer's height but I'm not able to fix this issue.
You can see my index here:
http://adamaweb.com/faqme/
As you can see, I want the footer extends to the end of the page. It's not a sticky footer, I just want it to extend.
But when you load the web you can see a big vertical scroll.
I thinks it appears because of the height:100% in the footer.
It is possible to extend the footer without the scroll issue?
You can put the dark footer background on the body. Then you need to add a 100% wide wrapper for the page content and use the light background on the new wrapper.
And yes, as per comments, you need to remove height:100%; from the footer.
Just set your html background to the same as your footer:
html, body {
margin:0;
background:black;
}
Let me see how well I can explain this. I am working on an index on a website that is in a div that is pushed off of the page via css margin with only part of it showing. When you hover over the part that is showing, the rest slides down into view. This works fine. I already have the transition effect in place for the margin change slide and also a background color change with rgba. It looks very nice.
My question is, the index is around 500px wide and the visible part before hovering is 70px high. So that is a fairly large area of the screen for people to accidentally catch with their mouse hover if they are not trying to display the index div. Is there some way that I can only make part of the initially visible portion of the div activate the hover transition animation to bring the full div into view? Or perhaps someway I can attach a smaller div to this one as a sort of tab, that will bring down the larger div and itself via transition on hover?
I hope this makes sense. Thank you.
Here is the basic idea of the current code:
#index {
position:fixed;
background:rgba(0,0,0,0.3);
width:500px;
height:500px;
top:0;
left:50%;
margin:-430px 0 0 -500px;
transition:0.5s;
-moz-transition:0.5s;
-webkit-transition:0.5s;
-o-transition:0.5s;}
#index:hover {
background:rgba(0,0,0,0.8);
margin:0 0 0 -500px;}
jsFiddle:
http://jsfiddle.net/wZ8zX/1/
html:
<div id="slider"><div id="trigger"><br></div></div>
js:
$('#trigger').hover(function(){
$(this).parent().animate({'top':0},500);
});
$('#slider').mouseleave(function(){
$(this).animate({'top':-150},500);
});
solution without jQuery:
http://jsfiddle.net/wZ8zX/3/
sorry i usually just browse jquery questions, so i didn't check the tags lol
Using only CSS you can use another block, or a pseudo-element to overlay the parts of block where you don't want to have transition, and then, after hover, make z-index for the element with transition bigger than overlaying element, so all the contents of it would be accessible.
Here is a fiddle with an example: http://jsfiddle.net/kizu/Y3px6/1/
This comes from the position:relative property. I strongly feel that your current div tag has position relative property. Please remove that.