I've been learning CSS for a while now, but the simplified layout below is still a little beyond me, so I am asking whether anyone knows of a model for such a layout, or would have an explanation to make this work.
The page should have 3 bands or blocks:
header, bottom, and content.
The 'header' would start at left 0, top 0 in the visible screen, go all the way to the right edge, and be 70 px in height.
The 'bottom' band would start at left 0, but at the bottom of the visible screen, and also be 70px in height (eg start at the bottom of the visible screen minus 70px). It would extend all the way to the right edge of the visible screen.
The 'content' band would start at left 0, the top would start at the bottom of the 'header' band, and the bottom of the content block would extend down as far as the top of the 'bottom' band.
It would also be nice if the 'header' and 'bottom' band were fixed in their places, but the 'content' block were scrollable if there were more content that space in the block.
I think it's doable, but I can only get this so far at my current level, so I'd like to see how an expert would do it.
Many thanks
Mike Thomas
Fixed headers at the bottom of pages are difficult to implement and maintain. Can you guarantee that your content will always fit? Scrolling just a block instead of the entire page can be tedious for users because you have to get the focus right before using page-up and page-down.
Better solution would be to let the footer naturally go after the content is finished. You can set a min-height on the content for pages with out much content.
Sorry not a real answer, but your site will be better this way.
I'm not sure if this solves it, but for fixed header and footer with a scrolling middle content section you can check this link out:
http://www.cssplay.co.uk/layouts/basics2.html
here is a great site i have come across concerning css
CSS tips and tutorials
i think it would be best to just follow some basic designs there and learn from there :-)
What you want is a sticky footer. As for the content, you'll need to implement a scrollable DIV - the key there is handling overflow.
CSS Frames
This example covers the headers and footers that stay fixed at the top and bottom, although the width is less than 100%. I'm sure you can adjust.
By the way, the way I found this was by searching for "CSS frames" - keeping one part of the content stationary while the rest scrolls is sometimes referred to that way, because it's similar to what people used to do with HTML frames.
Examples - Css List Properties / Examples - Css Layer Properties / Examples - Css TextBox Properties / Examples - Css Font Properties / Examples - Css Text Properties / Examples - Css Cursor Properties / Examples - Css Background Properties / Examples - Css Table Properties / Examples - Css Scroll Bar Properties / Examples - Tools - Units - Parameters - Template Page - Web Design
http://www.css-lessons.ucoz.com/
Blueprint CSS is a nice tool that simplifies making CSS layouts.
Related
I'm currently working on a website using Elementor. I tried integrating a Footer using a separate plugin (Elementor Footer&Header), however, the footer didn't stick to the bottom of the page if there was only little or no content.
As this seems to be a common issue, I solved the problem by adding the following code:
div.footer-width-fixer {
position: fixed;
bottom: 0;
}
Now, the footer sticks to the bottom of the page, however, there 2 other problems:
The footer overlaps with the content in the bottom of the page (see attached image)
The footer is sticky, although I didn't set it up to be so. I only want the footer to appear at the bottom of the page, not while the visitor is scrolling.
Any ideas how to solve this? Thank you!
Best Regards,
Maurice ( :
overlapping-footer
Its tough to tell if the footer is actually overlapping another sentence (I only speak english so I cant tell if the sentence ends or read it at all). But it looks like its only overlapping the padding on the button and its just snug to the text content.
You could try to add either
padding-top: {desired pixel amount}px;
or
margin-top: {desired pixel amount}px;
to the footer and see if that does the trick.
As for the position sticky, If your familiar with the inspect element feature in google chrome; you can see what the class selector is that is applying the sticky to the element and then you should be able to write a bit of css to overwrite that fairly easily!
I have had the same problem a few times but I simply fix this by setting the height of the section to either "fit to screen" or the VH to 100 - the header height (If you use a transparent header). I hope this has helped you and if you have any questions don't mind asking!
I am working on removing tables from my site, and just learning the div tricks involved. My home page currently has a centered table nested in another table. Removing the outer table was a bit tricky for someone just learning non-table methods, but it's done.
My problem is, the inner table is super-easy to center ("margin:0 auto" in the CSS), but its div equivalent is not. The div will center if I specify an absolute width (such as 640px), but since I'm designing with the user's font size (not something I specify), I don't know how wide it will actually be for a given user.
I've simplified the home page and have it online (test.html and HoH.css Here is an overview image of test.html.
Sorry for all the links. But with a floaty thing inside another floaty thing, I don't know what is relevant. The file test.html contains 63 lines of formatted HTML. The 640px hr is there for reference only; it will not be part of the final page.
PS: I'm removing the tables because when I asked for site reviews, the first comment almost everyone had was, "get rid of the damn tables".
Probably you shouldn't worry about users font size because all modern browsers zoom whole page, not only font size, and everybody will be happy with your fixed width.
Also you can use EM values instead of PX, 1em = font size in px. You can change 640px to 40em if you have 16px font size. If someone have for example twice bigger font, he will get twice wider block.
And if you want css-solution for unknown width block centering, you can use inline-block and text-align:center: http://jsfiddle.net/rBc4T/
use CSS and jQuery -
css -
#divID{ left:50%;}
jQuery -
(function(){
var marginLeft = $('#divID').width();
$('#divID').css('marginLeft','-'+ marginLeft /2 +'px');
});
...and by 'no reason' I mean; for a reason I'm clearly (and likely blatently) overlooking. This is such a NOOB question - but I for the life of me can't figure out what's going wrong with my floating divs.
As seen here: http://codysilfies.com/kenji/beta.html
I've got a Container div (#Wrapper), which houses a few divs - among them a content area (#content) which has a menu (#menu) that floats left; and a div to house text (which doesn't have an ID just yet).
I THOUGHT that aligning them both left would have the two divs sit right against each other; but it's not working that way. The box with text overlaps the menu messing with the layout. I also have to place the text PRIOR to the menu in the code; or else it'll show up below the main menu (which shouldn't be normal behavior - it should sit against the other div!
I know I can set a width and float the text RIGHT - but it's been requested that the page resize with the browser page.
I know it's something stupid and simple that I'm overlooking...but I can't see it. Any help would be hot! Thanks in advance.
HI now give to the margin-left:190px; in your float right div
as like this
<div style="float:right;margin-left:190px;">
result is
this
also, remember the box model. It's generally a good idea to give a width to a floated element when it's more structure related, as this is, versus just an image. That will also help side-step issues in IE 7 and 8.
Solution was just me being dumb. I forgot to add a float to the menu. D'oh!
I've a fixed width 3 columns css layout working good when vertical scrollbar is hidden, but it will break as soon as vertical scrollbar shows up.
I've 2 questions,
Can I deal with the scrollbar as an css element defining z-index to make it in top of right div?
Since I think the answer to my first question is "No, you can't do that", I ask What can I do to avoid this?
example here:
http://www.mataborrao.eu/teste.html
1 - No
2 - One simple option is to always display the scrollbar. Check out this answer: Making the main scrollbar always visible
You're correct on answering your first question; As far as I know, you can't attach styles to the scrollbar. Your second question is somewhat broad, as many browsers out there will deal with scrollbars differently.
For example, depending on your OS/browser, the content on your page will shift to make room for the bar, while other browsers (for instance FF on Windows, I believe), will keep the content where it would be if there wasn't a scrollbar present (this prevents shifting if more content appends/flows vertically).
Alternatively, you could try to force the bar to always be there... this would work in most cases:
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
Hope this kinda helps?!
Would this solution work for you? One of the columns is fluid but perhaps it will help: http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
The solution is there for a layout that looks like this:
It's trivial to exit the pixel values but take note of the "nested div structure". To convert this to a fixed layout you can look at http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width - I'm not sure that it will work though - you may run into the same problem. I suggested the liquid layout because it will dynamically resize for you when the scrollbar is there...
So I have a case of client-itus here. The client is whining and my boss is demanding that I add a logo underneath the Archives tab over the banner ad seen, which would break through the structure I've set up. We're two days from launch and I have a choice of either taking precious time away from other work to restructure the layout, or find a way to position that logo without having to futz with the divs. I understand HTML and basic CSS, so I thought I'd see if I could find a better solution before going about this the hard way. Thank you for all your help! The current page can be seen at ctdailydose.com/new
(Just for clarity, what I want to do is add big circular logo on the right that says "Scolari Engineering" without having to rewrite the CSS and change the header's entire structure.)
Just add your image (logo) at the end of the end of the achor in your menu-banner div and position:absolute right:0px top:0px for it in your css. Adjust the position as needed.