Tumblr sidebar overlapping the main column - css

I have a very specific issue with my sidebar in a tumblr blog. I have put it in to encompass all the navigation and fixed it on the left, but it overlaps the main column:
I cannot find a way of making the main body separate and starting to the right of the sidebar. I am clearly missing something. (Well, I think I need to encompass and define the position of the posts, but I can't see where or what.)
Thank you,
Ana

It's the position: fixed on the sidebar that is giving you grief. If you must have that, you could set a left margin on the #main section:
#main {margin-left: 200px;}
It leaves a very narrow content area, though, so I would consider widening the layout a bit.
I'm not a fan of margin: 0 auto; on the body element. Preferably, place everthing in a centered wrapper.
If you want the content to wrap around the sidebar, then remove position: fixed from the sidebar, remove the margin I showed above, and also remove overflow: hidden from here (line 265f.):
article > div {
padding: 0px;
overflow: hidden;
}
That will mean that the sidebar will scroll with the content, though, and not be visible all the time.

Related

Sticky footer in HTML/CSS, display issues

I am working on a website and have tried to stick the footer to the bottom, since many pages will not be long enough to push the footer to the bottom.
I have applied this technique: http://mystrd.at/modern-clean-css-sticky-footer/
My page can be viewed here: https://jsfiddle.net/cgLf0oLa/
I believe that this CSS input is very important:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 400px;
}
However, I am experiencing trouble. The footer is being rendered on top of the other content, and I have no clue how to make it adjust to the content size.
Help is much appreciated.
Kind regards,
Clemens
Try adding an :after with height equal the height of the footer to the wrapper above the footer. It leaves blank area below the footer, which pushes the footer to the bottom.

Learning CSS div placement , positioning

i am learning CSS, i am trying to place the div with red background just below the body, i can't seem to make it fit to the body, whenever i adjust the width it doesn't align with the body,when i tried to place it center and 100% width, it occupies 100% of the width of the page it does not align with the white background area, whenever i do 80% it does align left and does not align with the white background area. Please point me to the right direction. I'm stuck :(
the code i have so far is here: http://pastebin.com/VPMgbzQ2
Thanks in advance.
Make your footer div out of the tabs div and no need of position: absolute on it. Make following changes:
#footer
{
margin-top:80%;
height: 20px;
width:50%;
text-align:center;
background:#C00;
}
Here is fiddle.
Also it seems that you are trying to make responsive design but let me tell you that the way you are proceeding is not the right one for it. You may read Responsive Design By Ethan Marcotte for learning it.
EDIT
Make following changes:
Give height: 400px; or as required to table div.
Make your footer div out of the table div.
Either remove margin-top or change it to 5% or 10% as required in footer div.
Add min-height: 100%; to .tabs.
Check out the fiddle.
Try hardcoding the height value
#spaceheader {
width: 100%;
height: 100px;
background: #000000;
}
I see your issue now. The parent element <div class="tab"> is what's causing your issues. If I were you, I'd take the radio buttons out of the tab, make it not have a float:left on it, and this will probably fix things. You then need to remove the absolute positioning on your footer div.
Also, it looked like you put the footer div inside of the tab, when in actuality, it should be outside of all of the tabs, beneath them in the code.

How to get correct overflow for proper div with fixed footer?

I am creating a site that has three major components - the navigation bar on the left, the central content (which is broken into a Title + Data), and a footer. The footer is fixed to the bottom of the page. I have JSFiddle example here: http://jsfiddle.net/6Ur89/1/
The issue I am running into is that, I want to the #data div to scroll vertically when it is too big for the div. The problem that I am seeing is that, when this happens, the div just gets pushed underneath the footer (instead of stopping at the footer) until infinity and scrolling never happens.
Within my CSS, I do have this:
html, body {
overflow: hidden;
}
which I put in to prevent horizontal and vertical scroll bars appearing (presumably due to the footer). However, when I remove this style, the entire content div scrolls which is almost what I want (I would prefer that the title doesn't scroll...but that isn't the end of the world).
Can anybody provide any suggestions where I am going wrong? Again - want #data div to scroll and to stop at the footer. I want a fixed footer at the bottom of the site and I don't want the footer to create the scroll bars. Please let me know if you need clarifications.
Update: Yay for Stackoverflow - after typing up this question, one answer popped up immediately. I put a clearfix on the wrapper, so scrollbars don't appear due to the fixed footer. Updated my jsfiddle to reflect. So, essentially, I'm looking to understand how to just have the #data div scroll.
http://jsfiddle.net/Xsu3Q/
added a padder inside the content div:
<div id="content">
<div class='padder'>
<div id="title">title</div>
<div id="data">Lots of data...
.padder {padding-top: 100px;}
moved the content 100px up outside the frame:
#content {
position: relative;
top: -100px;
margin-left: 350px;
height: 100%;}
This way you can use the height:100% property to match the height of the body
AND subtract the 100px for your footer.
for a cleaner example look at a similar answer

Navigation Links Suddenly Unclickable

I'm working on a page for a class, just to display things (you can see them sorted by chapter in the body) but I originally had a list on the left that I used initially that just listed them all, and I wanted to keep it.
Problem is, once I started adding more CSS - I don't know where exactly - the area on the left just became completely unclickable. You can't highlight the text, you can't click any of it - nothing. I have absolutely no idea whatsoever what is causing this.
link to the site here
here is a pastebin link showing everything I have.
thank you, i really appreciate any help.
The .content div overlaps entire body area, because of "position: absolute;"
Add z-index: 9999; to #menu in your CSS and it should be clickable.
Other way is to use "position: relative; float: left;" to both .content and #menu, but you have to be carefull with their widths. Their sum of widths (including padding and margin and border) should be less or equal to the container width. In your case it should be body tag (actually a don't see body tag in your html).
That's because your .content div is using position: absolute; so it's taken out of the page flow and overlapping your sidebar because it has no width set (block elements span the full width of your viewport unless you give it a fixed width) ... just add a negative z-index value to your .content div and it should work fine.
More on z-index

trying to use a negative margin in css on a list

I have been trying for an hour to get a list in a sidebar of WordPress to have a negative margin. Fooled around with margins, padding, sidebar placement in the php files... But the link images just keep disappearing behind the background.
Here's the page where I'm working: http://kirahenschel.com/
This is what I am trying to achieve:
http://emgraphics.net/kira/idea2-11.jpg
Ideally I'd also like that sidebar to be a finite height so the white boxes on the bottom spread, but I can cope with them being off to the right.
Anyone have any ideas? Neg margins are working fine on the logo, so it is just a list thing?
Thanks
If you're merely trying to get the list to be bumped to the left, why not use a CSS positioning property? Negative margins can get really wonky, and are (most likely) unneeded in this application.
#nameoflistdiv {
left: -20px;
}
You may also need to change the value of your div's position element, but this will bump your div and everything in it left, overlapping the container div.
If that doesn't answer your question, can you post the HTML and CSS you are using? The CSS code
margin-left: -20px;
really should work in this application as well, so show us what you've got.
Your negative margin is working as expected. The reason the images are getting cut off is because you have set overflow:hidden on the #main container. If you remove that property your images will appear.
#main {
background: url("images/blend.png") repeat-x scroll center top #2765CA;
clear: both;
height: 630px;
overflow: hidden; /* delete this line */
padding: 0;
}

Resources