Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
How do I properly center the menu on this page http://bit.ly/An65z5? Been poking at firebug for over an hour now, please help :)
Remove the float: left property from #top-menu, set the margin: 0 auto; and add a width. You can also remove the padding on the left of #top-menu as it isn't needed once the nav is centered. So it should look like the following:
#top-menu {
width: 300px; /* 300px will need to change to the actual width of your nav element */
margin: 0 auto;
padding-top: 10px;
}
In your style.css, add the append the following lines of code in the end.
#top-menu {
float: none;
padding-left: 0;
padding-top: 10px;
width: 271px;
margin: 0 auto;
}
To avoid harmful need for limiting width of container, use display: table for centered block and display: table-cell for its child elements.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
My website is currently hosted here: https://jogh-reports-zaksheikh.c9users.io/. At the bottom a load more button appears and I need to center this button and make it fill the width of the last post. How can I do this?
Thanks
Try this
#infinite-handle {
overflow: hidden;
max-width: 88%; /* adjust as per requirement*/
margin: 20px auto; /* adjust as per requirement*/
}
As per your comment the Updated Code :
#infinite-handle {
overflow: hidden;
max-width: 50%;
margin: 20px 0px;
}
if i get you right, you problem is in your max-width for infinite-handle, you should use something like none or 90% instead of fixed value and change magin left/right to feel space. For example:
margin: 20px 1%;
width: 98%;
max-width: none;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I want to remove the extra space above header and after footer of my blog. How to remove it?
I am using WordPress and Genesis News Pro Theme on my blog.
You can take a look at the blog - https://web.archive.org/web/20160306192700/http://recruitmentapplicationforms.in/
You need to change the margin:60px auto in class .site-container
.site-container {
background-color: #fff;
border: 1px solid #e3e3e3;
margin: 0px auto; /* change 60px to 0px */
max-width: 1140px;
}
You have applied margin: 60px auto; to your .site-container class. Just change it to margin: 0px auto;
Currently, the site has 60px margin at top and bottom of the page.
This is happening because of margin style you are using in "site-container" class.
If you do not want margin at the top and bottom then you specify explicit margins for left and right i.e.
margin-left and margin-right instead of using just margin:60px auto;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a sidebar on the right and I want to create two centered together columns for Tumblr posts on the left. What can I do?
#wrapper /*for two columns*/ {
display: inline-block;
margin: 15px 15px 15px 30px;
}
#wrapper .posts {
width: 400px;
margin: 0 15px 15px 0px;
padding: 10px;
}
#sidebar /*including some other stuff, obviously*/ {
display: table;
width: 250px;
height: 100%;
position: fixed;
top: 0px;
right: 0px;
}
To make HTML elements center aligned:
For Block element such as div, p, ..etc., these should have width or max-width set to some value and there should be margin-left: auto & margin-right:auto
For inline element such as span, em, ..etc., we can center align by giving text-align:center to its parent element.
Your horizontal margins on #wrapper should be set to auto. That’s the key. The parent (possibly the body) may need to also have set text-align: center.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
im already finished with the site but i got a lil problem.
i would like to put three hover boxes on the top of the icon box and text as u can see on this pic.
the problem is that if i do a new div box its on top of the #webicons box .
would be nice if ya could !
Here is the actual status. http://www.awesom-media.de/umgebung/index.html
jsfiddle.net/D6V6R/
This solution work's though I dont think your lis in the #referenzbox are the correct dimensions as currently they are too big for all to fit on one line.
Currently the container has a width of 1200px and the three lis at 400px plus padding are to wide for this.
If you white-space: nowrap; on #referenzbox ul you can see this issue.
Personally, I would close #block-container just before #referenzbox and set width: 100%; on this #referenzbox.
You can adjust the sizes to fit your needs.
#referenzbox {
height: 400px;
background-color: red;
clear: both;
width: 100%;
}
.webdesignbox {
max-width: 520px;
float: left;
min-height: 545px;
margin-bottom: 30px;
}
In short, as you floated the icons, you needed to clear them on the next div with clear: both;
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Currently I am using Concrete5 to build a website, located here: http://tinyurl.com/cee5rvo
Firefox pushes the header (navigation and h1 tag) down on certain pages (such as Gallery) and I have no idea why.
Chrome and IE10 both display correctly.
Thanks for any help.
The best way to handle this is to add a line to your #content div.
#content {
overflow: hidden;
width: 800px;
}
The overflow hidden will clear the floats and stop the undesired effect of pushing the content down.
Your elements aren't taking up space correctly due to float issues.
add this to your css:
#content {float:left}
I think your problem is to do with how you're floating elements.
If you inspect nav-selected nav-path-selected in your nav, you'll see it's computed height is 0px.
This is a very common issue caused by floating elements not forcing their parent containers to resize automatically. When an element is floated, its parent no longer contains it because the float is removed from the flow. As browsers handle this problem in different ways, a common solution is to use a 'clearfix'.
If you add the following to your global css...
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
And add the clearfix to elements with 0px height (e.g. nav-selected), you'll see the element inherits the correct height.
You have a 10px margin on the div #asmillerGalleryBlock... set this to margin: 0 auto;