How would I achieve the below shown design using html and css?
The sidebar should be on top of all other items such as logo and menu and content. The menu should be behind wrap the sidebar. The content are is in 'L' shape. The content area should go up to sidebar and the come below the sidebar. The sidebar length is less than the total content area.
Here is a good rough draft to get you started.
(http://jsfiddle.net/tech0925/Sm8HB/)
Cheers!
Related
Please guys help me ... The sidebar will be allways active so i need to center the content on the webpage such as the highlighted text. The problem is that it's centered with width of the whole page counting the sidebar. can i divide the the widths somehow? the sidebar is made in bootstrap it's made with cols so i dont know the exact width.
You can post your code, but the general idea would be for you to place a div next to sidenav (to the right), you can do that by setting the margin-left to the width of the sidenav and center the text in that div
Here's a js fiddle of the problem: http://bit.ly/Zd8JAU
I'm trying to place a header with a logo and a centred title at the top of the page. The idea is to center the title to the page itself and not within the gap left to the right of the logo, if that makes sense?
So I floated the logo over the top of the title and then altered the position of the logo shifting it upwards (as otherwise it insists on going beneath the title). The problem is this then creates a gap, which cascades down the page and I'd have to somehow shift everything up by the hight of the logo, and I really don't want to have to do that.
So is there a better way to get my logo positioned to the left of the title without creating gaps anywhere and without it causing an off-set on the text in the title?
EDIT: updated the fiddle to be clearer what I'm trying to achieve.
Yes, consider using a CSS background for your logo as part of your NAV element, which makes it easier to pad your text and position the image without interference.
I am new to using Skeleton CSS grids, so please excuse my ignorance!
My problem seems a simple one at first, but it's had me a bit stumped.
Say for example, that I have a website with a left column sidebar at 4 columns wide and then a right column content area spanning 12 columns. Something like this:
On smaller screen sizes, the sidebar collapses to be on top of the main content area. This is not what I want though...because of the linear nature at smaller sizes, I want the sidebar to appear below the main area, so that content is shown 'first' on more mobile devices.
The default behaviour of Skeleton is to stack this sidebar on top of the main area.
Any ideas as to a solution on this? Could I perhaps use negative margins and semantically adjust the markup to place the sidebar below the main area?
Thanks,
Michael.
For a lot of you this is easy but it's making me mad:
I have a webpage (black area) where div (red area) contains some content which I don't know how much is.
If the content is less then it needs to reach the logo, the logo should stay positionend in that point of my div, it shouldn't go up.
If the content is more, it shuld go down (keeping a fixed distance from text)
How to achieve this?
The min-height CSS property:
div { min-height:400px; }
http://jsbin.com/oxodak/2/
You want a "sticky footer", but contained inside a div instead of the whole page.
Tweak the method shown here: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I have two relatively positioned areas on my page, the content and the header.
The content has a higher z-index than the header - this is a requirement for the structure of the page.
I've simplified the HTML and CSS to illustrate what I'm trying to do here:
http://cb3.securetree.com/example.html
This presents an issue with dropdown menus that exist in the header because they display underneath the content region even though their z-index is higher.
On the example page, notice how the dropdown menu goes beneath the content region.
Appreciate any assistance in solving this issue.
Relatively positioned elements will display on top of things that are not relatively positioned. You should avoid having to use relative positioning where it's not necessary. If you use floats and margins etc to move things around on the page, you shouldn't have any z-index issues.