Somewhere along the way something went wonky with the CSS on this site. One some posts, the side bar is in the correct position to the right: http://emgraphics.net/legacyjar/category/the-civil-rights-movement/. But on the Pages and other Posts, it has scooted below the #wrapper area (http://emgraphics.net/legacyjar/). I had only made changes to the #comments section css but I don't see anything there that could have affected it. Have fooled around with all the elements' widths, clear settings, etc. and just cannot nail this down. Any help is appreciated!
Two things:
You're making your CSS work harder than it has to. You're setting container to 100% width then trying to use negative margin to give the sidebar room. Instead, give the main container a set width. Your site isn't fluid, so make life easier for yourself!
Here's the relevant CSS:
#container {
float: left;
width: 720px;
}
You're prematurely closing one of your divs. You have one too many close divs somewhere in the page that has the sidebar pushed down. If you're in FF or Chrome, hit F12 and investigate the sidebar nav. You'll see the div isn't in #main on the bad page, but it is on the good page.
It's not the CSS, it's the HTML layout.
<div id="primary" class="widget-area" role="complementary"></div>
is supposed to be enclosed within
<div id="main"></div>
like so...
<div id="main">
<div id="primary" class="widget-area" role="complementary"></div>
</div>
but on http://emgraphics.net/legacyjar/,
your primary div is outside of the main div like this...
<div id="main"></div>
<div id="primary" class="widget-area" role="complementary"></div>
Once you move the primary div back inside the main div, everything should work fine.
Ahha! This would all make sense if it was a standard html site. But I'm using a generic twenty-ten template for WordPress with css that I've edited. All the pages have the same index/head/sidebar php files. However, there was an extra div tag on the comments.php file. So pages where comments were not allowed worked. But pages/posts where they are allowed went wonky, EVEN if there were no comments OR even a comment form visible. Thanks for the tip-off on the extra div tag!
Related
I'm working on a mockup but keep running into issues with the navbar and main content layout. The page needs to look like the mockup image below on desktop.
I've tried everything I can think of and read up on the bootstrap site but continue running into problems.
First the navbar should be fixed so it scrolls with you. I've copied from one of their templates but it doesn't scroll like the demo unless I change it to pull-right. But if I use pull-right it removes the top spacing and first container spacing needed. I've tried the body tag padding-top but all it does is create more space between the nav and main container not above the nav.
The other issue is the row and column layout in desktop. The col-md-8 doesn't line up with the other col-md-4. It looks ok in mobile with 320 wide.
I'm pulling my hair and not sure what needs to fixed. If anyone can spare some time and have a look I'd really appreciate it.
Live links to the files are below.
link to image mockup
link to live webpage mockup
link to css override
On your CSS override you have the attribute .navbar (position:relative;) This overrides your navbar fixed top property.
As far as your col-md-4 goes..you have it wrapped in an html descriptor..which is this: <!-- -->. This just gives descriptions of what html attribute is listed. These descriptors are on a lot of your actual html and need to be removed in order for the code to work properly. Remember though some of them are actually descriptors...like <!--fixed navbar-->
hii just checked your live website all problems is the way you are using div tags .. so for first section of image and nav bar it should be in one div tag
<div class="col-md-12">
<div class="col-md-12">
<div class="col-md-4">IMAGE</div>
<div class="col-md-8">your nav bar </div>
</div>
<div class="col-md-12">
Banner
</div>
<div class="col-md-12">
<div class="col-md-4">
HR MARUTIS STUFF
</DIV>
<div class="col-md-8">
HI LOUREM THINGY
</div>
</div>
and soo on
HOPE THIS HELP IN YOUR FORMATTING OF PAGE
Everything seems to be fixed now. Perhaps the biggest issue I was having was getting the navbar in proper locations both desktop & mobile. Originally I was using an override for .nav to modify the margin in order to get the placement right in desktop, but in mobile view it would be in a different position, not to mention it kept sharing the margin ratios of 80px top and 120px right. This would force the toggled menu to be 80px further down rather default 0px. I couldn't figure a way around this so I figured why not try adding a div tag just for the margin spacing. Apparently this seemed to work after adding new info into the media queries. Also fixed a spacing issue when in tablet widths with nav and hero image.
As for the rest of the layout, I used col-md-3 and col-md-7 which pretty much lined everything up right away except for some padding needed. Everything else like h1 and h3 I used a simple class for mobile to adjust the margins again.
If there's an easier way or more efficient way of coding this I'm open to suggestions if anyone has some. Updated Live Link
Hi this is my first time on this page.
Lets get straight to it, I have a website http://harrimanpcrepair.com/index.php and when you look at the footer with something like firebug you can see the div footer itself not the children doesn't show up specifically cause it has no height. Also the entire footer area including it's three children aren't part of my page div. Is there a way to fix this without hacks or anything please. last time I used overflow to fix this it caused some issues on my contact page. I've been looking and see all hacks to fix this I'm really not into hacking to get what I want but rather doing it how it's meant to be done with no hidden drawbacks that sneak up on you.
<div id="footer">
<div id="footerLeft"> </div>
<div id="footerMiddle">Designed by Shawn Harriman</div>
<div id="footerRight"> </div>
</div>
I have though now decided to just force a height not realizing that it works if I do that though I hate knowing that the size doesn't affect the parent but I dont' really need it to due to the fact I don't like double lined footers. it's rare I'll ever have one so the way I have it now should work for now. Would like to hear things people have to say though and other solutions please I am still looking to fix this with better means
EDIT: I didn't feel CSS in this was very neccessary but they are floating divs within footer. They all float left while they footer itself is clear: both. Having 3 does serve a later purpose.
Try the below css for your footer in main.css
#footer {
position:fixed;
text-align:center;
width:100%;
height:20px;
padding:5px;
bottom:0px;
}
Hope this helps
I am not sure if this is possible. I have a page setup like this:
<div class="sidebar">
</div>
<div class="main">
</div>
The sidebar is set to float:right. It's fine apart from when I resize the window down (as it's responsive), the sidebar appears above the content. It's set to position:static and has no float.
Is it possible to make the sidebar appear 'after' the "main" div when in responsive mode - through CSS only? I can't think of a way to do it using pseudo-elements etc.
PS: I cannot move the .sidebar div down below the .main div in the HTML, because then Google decides it doesn't want to show my author avatar as it's "not relevant" i.e. too far down so ignores it.
Google showing your avatar is not the result of how far down it is. Google looks for this bit of html:
rel=author
See this article: http://searchengineland.com/googleplus-slowly-invading-googles-main-search-results-102416
Once you do that you can switch the order of your html to have "main" first, and then float "main" and "sidebar" left at the appropriate breakpoint.
I'm having a tuff time centering the navigation of my website with the content body. I'd like the navigation to center with that instead of the browser because it looks like its a bit left of the content body and doesn't quite look right.
Is that possible. http://www.bryananthonylewis.com/ Just a simple blog with Twitter Bootstrap.
I think you're on the wrong track here..
a quick scan using chromeinspect shows me you use span8 offset 2 for your main content (the first element within your container element right beneath #modal-contact), and i think you're main content is a bit to the right and not the header to the left.
my quick fix:
remove the offset,
and get a css style on that content with:
float: none;
margin: 0 auto; /*replace 0 for top margin*/
putting a width to the container as Pankaj suggests might work too, although you might loose dynamic width changes provided by bootstrap this way... didnt check so i might be wrong on that part
update
another update to clarify
remove previous fix.
in the container element right beneath your #modal-contact add a wrapping div,
not at the top of your page like i think you did...
<div class="container">
<div class='row'>
<div class="span8 offset2">
blogcontent here
</div>
</div>
<div>
woops code tags were missing here
i get a feeling this should do the same thing.
and i also believe that the header needs the same fix. but i'm not 100% sure, so pls try and comment if it works or not. this update is based on the official docs
bootstrap documentation
if things don't work, forget about my suggestion and stick to what works
There is no problem with your header. Actually your content below is not centered and this is happening because of unwanted div with classes "span8 offset2 middle" right under div.container. Fix this by removing that div altogether and overriding .container in your css file by
.container {
width:777px;
}
an example of same edits inside web inspector of chrome
If you refer to the following screenshot:
You will see that everything is lining up perfectly except, the icon does not have a width that is calculated in the centering. You obviously want the icon TO have width.
So how can we do that?
Perhaps add something to the i tags like so:
i {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
}
UPDATE:
The screenshot above points to the problem. After a media query, the site goes into tablet mode and the navigation is off. Now, back to work!
I've been developing this site for a while and suddenly today I noticed that the horizontal scrollbar on my browser was showing and was allowing the site to be scrolled an inch or two to the right.
The whole site is only 960px wide and my screen resolution is 1680px so clearly it should fit with plenty of space.
The site still displays exactly the same but the scrollbar is annoying me. I've tried adding borders to everything using the * selector in CSS but nothing seems to be protruding that extra inch. I've also used the Google Chrome console to highlight different sections of the site but none of them are causing the problem.
Every browser shows the same problem, do you have any explanations?
This is the site in question: http://compressmycode.com/
remove the position:relative in your #body-wrapper style around line 31 of your CSS and use margin-top:50px instead of top:50px
if you must keep the position:relative you can also just apply an overflow:hidden to your wrapper to remove whatever overflow may be there, but there are some inherent dangers in doing so.
EDIT
Upon further inspection, I've discovered that your .right div is the issue. For some reason, its being floated to the right is causing your problems.
The problem comes form your JS. if you disable it, it works perfectly.
More precisely with the facebook button:
div#body-wrapper > div#site-title > div.right > div.fb-root > div
setting this to overflow: hidden, fixes the problem
I had a similar issue. There was nothing that seemed to exceed the width but still there was a scroll bar at the bottom.
My structure of page was:
<body>
<div id='appContainer'>
<div class='page'>
<div>All the content along with "Youtube video"
which meant there was
an iframe within my page,
some other stuff like *sharethis buttons,
Which meant i had to add a few scripts.</div>
<div>more stuff</div>
<div>more fancy stuff</div>
<div>some more stuff with shadows and floating elements</div>
</div>
</div>
</body>
*sharethis: http://www.sharethis.com/#sthash.r7Bx1kDr.dpbs
I'm not sharing the CSS as there was nothing other than box-shadows at the outer levels and top-margin.
Although i'll share how the problem got fixed.
I gave the
<div class='page'></div>
css:
.page{
overflow: hidden;
}
This fixed the scroll issue for me.
Although the fix was just to find the right parent and give it the above CSS
I still would like to know the root cause for the scroll. Kindly share that knowledge if you have it.