I have a layout with a variable-length menu on the left, and variable-length content on the right. In between the menu and content is a divider implemented using a repeating background image, which is part of the content div. This means that as the content expands or contracts, so does the divider.
If the height of the content is less than the height of the menu, the divider is still the height of the content, when what I really want is the divider to be the height of the menu in this case. Is there any way to implement this in CSS?
Have the dividers background image in the content are and the menu and have the content area overlap the menu the width of the divider using negative margins or something similar.
An alternative would be to use the background image on a wrapper div and use background-position to place it between the menu and content divs.
Related
On my site, I've created a flex box which fills the whole window. It has a width of 100% and a height of 100vh. I've placed a text and a button in the center of it. Now I want to add a footer to the page. If I place the footer under the div (flexbox) It'll only show up if I scroll down a little bit. So can I create another div inside the flexbox which will place it's items in the lower right corner of the page?
Without code it is hard to help but maybe try in the css float:right
I got a navigation menu as image. I made a nav div with the image as background and a fixed width and height. Now in the little boxes under the lines I want nav links. So what I did is I made multiple divs in the nav div and positioned them in the little boxes. So they are all positioned perfectly inside firefox but, unfortunately in other browsers like chrome they have different positions (nothing extreme, but they arent perfectly aligned in the little boxes).
What I thought was that whenever you have a certain fixed height and width of the container div. The margins of the child divs will be the same on all browsers and screen sizes as they will always be the same size. How is this possible and what would be the best options to make this nav menu possible?
Try use this http://www.image-maps.com/ ... image maping tool lets you to set link coordinates.
If you know where these boxes are located pixel-wise in the background image, you could absolute position the nav divs and get them precisely where you want using top and left based on pixels of the parent div (with the image) instead of using margins.
on large screens my footer doesn't sit at the bottom of the page leaving a white "bar" along the bottom (color of the page background).
I'm aware of sticky footers etc but due to using absolute positioning on elements in the footer these techniques make the rest of the footer go awry. I have now added an empty div below the footer directly before and set its min height to 100% and background colour to match that of the footer (black) however it does not do anything - only a set height in pixels will do anything but i want it to be dynamic so it fills the space if it is there whether its 10px of space or 500px of space.
Has anyone got an for a work around?
If you don't want to do a sticky footer, make your body background color the same color as your footer, then set the background of your content area to white. This gives the appearance that the footer extends to the bottom of the page, no matter the size of the browser.
Yes, you don't use the 'absolute' style of footer positioning, it's a terrible solution.
Oddly enough, Twitter Bootstrap has the easiest example of how to implement a sticky footer - it's a technique that's been around for ages:
http://getbootstrap.com/examples/sticky-footer/
The method is simple. Put a wrapper div around all your code, except for the footer.
If you refer to the source of that link, you'll see a wrapper with an id of wrap.
If you then examine the css for the above:
http://getbootstrap.com/examples/sticky-footer/sticky-footer.css
Just copy the sticky footer styles section and adapt for your site. The key part of this is the footer height value matches the margin and padding values of the wrapper element.
I am building a web site for home made jewelry. I'd like it nice and centered ( for all those ppl with low resolution ) so all of the titles, navigation and content are in a single div, that I positioned in the center. On the left ( inside the div, everything is inside the div ) I have my vertical navigation sidebar div. On the right I have the title and the content. So far so good. Now to the problem:
I would like my sidebar to have a right border all the way from the top of the page to the bottom ( with 1em margins if possible ). The trick is that my content to the right variate from text to pictures and forms and is quite different on every page - when the content is larger then the screen the screen scrolls and in which case I'd like my sidebar border to scroll down with it - I've not been able to do that.
I think I have done quite a reading - my closest solution was to set the border's position to static but this quite obviously isn't working when the site is centered. So to the question - is there any CSS only way to make the sidebar div's height dynamic or something and define it to expand with the content to the right? This way the border will always reach the bottom.
Wrap your navigation in another div. Give this new div a height of 100% and assign it a border-right CSS property. You can also set padding too. Hope this helps.
How about giving left border to the content section Div, instead of Nav menu. so that way the border could change height according to the content area height
body,html{
height:100%;
}
#wrapperdiv{
height:100%
}
#navigation{
min-height:100%
}
I have a fixed size layout where I center the content container.
I want the menu (home, about, contact, login), to span 100% of the screen.
Take a look at this jsfiddle: http://jsfiddle.net/Hxhc5/1/
The result I want is this:
I have tried a to make a 100% width container with the menus, where I would have a container inside to center the menu, but it did not work well, because then the layout is relative, changed with the window size.
Wrap an extra div arround the menu, give it the grey background, remove the extra padding, make the menu bg white:
http://jsfiddle.net/sg3s/Hxhc5/3/
This is problematic when we want to keep the space between the menu and the right col 'open' though.
The easiest way and probably the best is to have a mock image of which the middle is left 'open' and use it as a background. Since a png image of this type is insanely small it is better than more markup, css or a js solution, plus it has no quirks if used correctly:
http://jsfiddle.net/sg3s/Hxhc5/10/
You also showed your actual developement site; if you want to implement this for the menu you will have to make the menu fixed height (everthing else and its width can still be fluid) due to the type of opacity you use in the layer. The same background trick can be made to work with it.
Why not use a background image that spans the entire page instead?
Just add the content of the menu into another div, with width: 500px, margin: auto; and set the menu width to 100%. Here is updated jsFiddle : http://jsfiddle.net/Hxhc5/2/