I was wondering is there a way to stretch only the footer in blogger simple template to full width, without affecting other blog elements? I read the similar topics, but they were about wordpress or changing the other elements, too, and mine is blogger platform. I tried with changing this code:
.content-outer, .content-fauxcolumn-outer, .region-inner {min-width: auto; max-width: auto; _width: $(content.width);}
and I did stretched the footer, but also the other blog elements. So, is there a way to leave other elements unaffected and manipulate only with footer element?
My blog's URL is: http://fashionsanja.blogspot.rs
Another possible solution is to use position:fixed. It absolutely positions elements in the browser window. Additionally, by setting left and right it will span the entire width of the browser window. Based on your site, the following worked in dev tools:
#KBD {
background-color: #000;
color: #fff;
font-size: 11px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
Related
I've lately come across a weird issue, where a div like the following is not behaving like expected in most browsers (Chrome, Edge) as it does in Firefox:
footer > div {
display: flex;
position: absolute;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
justify-content: flex-end;
align-items: center;
}
footer {
position: relative;
display: table-row;
height: 40px;
background-color: gray;
}
I expect the div inside the footer to fill it's parent div so an element inside that div tag can be aligned vertically.
To make it work in chrome, I included the following rule
#media screen and (-webkit-min-device-pixel-ratio:0) {
footer > div { position:relative; }
}
The idea is to vertically align some elements in the footer without having to enter a specific value for its height (yes I'm more of a programmer, so I'm trying my best to avoid having to put the same value on multiple places in case it needs to be changed). How is this done correctly across multiple browsers?
The final solution just has to be supported in current versions of Chrome and Firefox so ignore all that IE not supporting CSS3 and HTML5 bull that most of other people have to consider. I'd also rather not do the styling using JS including JQuery since I feel like the layout is such a basic thing it should be possible to do without any of it.
If needed, you can also check out this jsFiddle which shows the problem in the context of the layout.
I suppose this isn't really necessary but if you want to, you can also check out the source code (it's a Spring webapp using Thymeleaf) on GitHub.
Lastly, if you feel like it, feel free to comment on other flaws in the design. This is a project I'm doing for an University course so I'm always open to improvements.
Thank you very much!
You could solve this by replacing the following for footer > div:
top: 0;
right: 0;
left: 0;
bottom: 0;
..with:
width: 100%;
height: inherit;
You'll find an updated Fiddle here. The solution seems to be working in all the latest browsers.
I have this site:
http://dl.dg-site.com/functionmentes/
There is a div with color #D9D9D9
Code CSS:
#full_bar{background:#D9D9D9;width:100%;height:100px;}
I want to my div to be the full width site and to be glued to footer.
How can i make this?
I use a theme in Wordpress.
Thanks in advance!
By making the position fixed, this will ensure that it will follow the user as they scroll up and down your website.
#full_bar {
background: #d9d9d9;
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
left: 0;
}
If you add position:absolute; left: 0; to the css, the bar will more or less do what you're trying to do, but it's a dirty hack.
The real problem is that you're adding your 'full_bar' in the wrong place (inside a div which restricts the width). Personally I would opt for placing the full-bar in your <footer> tag.
You should placed your gray bar outside the section, between section and footer or on footer on html.
But if you want a css solution, you need to put your section parent to position relative and set your gray bar on absolute bottom with full width:
section {
position: relative;
padding-bottom: 100px; // Your bar height
}
#full_bar{
background:#D9D9D9;
width:100%;
height:100px;
position: absolute;
bottom: 0;
left: 0;
}
You are putting #full_bar inside class="container". container is the parent of div id #full_bar, that's why its not taking full width.
Do your code outside contaner class and you can see the changes.
See the attachment, i think you want this as per i understand your question.
I'm currently modifying a Xenforo theme for my website and I'm having trouble with my header bar after I downloaded a new theme.
http://www.ausfifa.com/forums/index.php?forums/head-to-head.2/
If you scroll down the page, you'll notice that certain elements such as the search bar, breadcrumb arrows and mini avatars are appearing above my header bar.
I'm not sure why this is happening as I've set the header bar's z-index to 9999 and its position is fixed (when you scroll down after a certain point, javascript sets position = fixed). All the elements that are overlapping it have z-indices that are lower than 9999. The odd thing is, this wasn't an issue on my older theme and I never modified any CSS for it to start doing this.
This is the div which contains my header:
#header-menu-cont {
font-family: DIN-Cond;
font-size: 15pt;
min-width: 1000px;
float: left;
width: 100%;
height: 52px;
background: #333333;
z-index: 9999;
position: relative;
}
This is the mini avatar that overlaps my header:
.discussionListItem .posterAvatar .miniMe {
bottom: 1px;
left: 29px;
padding: 0;
position: absolute;
z-index: 10;
}
The search bar that overlaps my header:
#searchBar {
position: relative;
z-index: 52;
}
I've also tried setting a high z-index to all of the elements inside my header bar but it makes no difference.
Feel free to inspect any of the HTML in my website if you'd like to get more information.
Any help would be greatly appreciated. Thanks.
When setting Z-index you need to do this on the containing element not the ones inside it.
In your case the #headerMover div has z-index:1; applied to it.
If you take this out of your CSS or add a higher z-index on #headerMover it solves your problem.
#headerMover, .footer, .footerLegal {
z-index: 1000;
}
You need to give the parent/container the z-index, not the elements inside it.
I have a fixed navigation bar on my website that stays at the top with links that take me to different sections further down the page. However, because my fixed nav bar has a height of 40px, the beginning 40px of every section is covered up. How would I offset where my links take me by 40px using either HTML or CSS?
Thanks.
You might try absolutely positioning "dummy" anchors 40 pixels above the top of each section. You can give them zero width/height and hidden visibility to ensure that these anchors don't affect how your page is displayed. When the user clicks one of the links in your fixed navigation bar, the window will scroll to the top of the dummy anchor, 40 pixels above the beginning of its actual section.
Example HTML:
<div class="navbar">
Anchor 1
Anchor 2
Anchor 3
</div>
<div class="section">
<span id="anchor1" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor2" class="anchor"></span>
Section Content
</div>
<div class="section">
<span id="anchor3" class="anchor"></span>
Section Content
</div>
Example CSS:
body {
padding-top: 40px;
}
.navbar {
position: fixed;
width: 100%;
height: 40px;
top: 0;
left: 0;
z-index: 10;
border-bottom: 1px solid #ccc;
background: #eee;
}
.section {
position: relative;
}
.anchor {
display: block;
position: absolute;
width: 0;
height: 0;
z-index: -1;
top: -40px;
left: 0;
visibility: hidden;
}
For a working example, see http://jsfiddle.net/HV7QL/
Edit: CSS3 also includes the :target pseudo-class, which applies to an element whose id has been referenced by the href of a link in the document, or the hash value of the URL. You can apply a 40-pixel padding to the top of the :target that will be applied only to the section the user selects from the fixed navbar.
Example CSS:
.section:target {
padding-top: 40px;
}
This is semantically cleaner than the method described above, but won't work on older browsers.
Working example: http://jsfiddle.net/5Ngft/
I just happened to stumble across this problem myself today so I had been thinking about it for a bit already, but I think I just found a solution:
Add a padding-top: 40px; margin-top: -40px to the element that you want to jump to. The negative margin cancels the padding, but the browser still thinks that the top of the element is 40px higher than it actually is (because in fact it is, only the content of it starts lower).
Unfortunately, this might collide with already set margins and paddings, and if you're using a background on the targeted element it's going to mess it all up.
I'll see if I can work around that and post a jsfiddle, but in the meantime here's a basic answer at least :)
edited: I thought I had a solution for the background, but it didn't work. Removed again.
final edit:
It does kind of work if you know the background color of the wrapping element. In my example I know the text is on a white background, but the titles have a silver background. To prevent the title from having a background on the extra padding we set, instead I put it on a pseudo-element before it:
#three:before {
content: " ";
background: white;
display: block;
margin-top: -40px;
padding-top: 40px;
}
This way the extra padding has a white background again, but this only works if you already know what background it needs. Setting it to transparent for example will show the underlying background of the title itself, not of the article.
jsFiddle: http://jsfiddle.net/Lzve6/
Heading one is the default one you're having problems with.
Heading two is my first solution, guaranteed to work on almost all browsers
Heading three is using the :before pseudo-element, might not work on older browsers.
I'm working on designing a full-page site, which will be powered mostly with javascript (ajax in particular). Right now, I'm working on the basic structure and such.
I've seen several questions with similar goals, but none of them really helped. Maybe I'm misinterpreting, or something. I dunno. Anyway, my goal is to create a page that takes up exactly the amount of space a user's browser provides, without empty space on the sides or top. This means I have to rely upon percent-based measurements for my structure.
Problem is, one of the two key elements is to be a specific size, in pixels. Any bigger, and there will be space left empty and put to waste. Any smaller, and my site's logo won't fit. Take a look at my code:
HTML
[nav]The Beef[/nav]
[footer]The Cream Filling[/footer]
CSS
html, body{height: 100%; margin: 0; overflow: hidden; padding: 0; position: relative; width: 100%; z-index: 0;}
nav{display: block; height: 100%; position: absolute; width: 100%; z-index: 1;}
footer{bottom: 0; display: block; height: 170px; position: absolute; width: 100%; z-index: 2;}
The problem is, now the full-page navigation (as I mentioned, javascript-powered site) continues on "under" the footer. What I want it to do, is take up all of the space the footer isn't using, without extending the page beyond the capacity of the user's screen (IE, no scroll bars).
I'd rather not use javascript for this, but I'm willing to do so if there are absolutely no other options.
Why not specify the bottom position of the content block:
bottom: 170px;