Have tried a lot of different things, and still having a lot of trouble centring this navbar:
http://www.miriammedical.co.uk/miriam2012
If I follow the advice here...
Editing Nav Menu - How Do I Wrap display:block, float:left to have a Centered Menu?
... which is to add a fixed with and use margin 0 auto, all that happens is the list appears off-centre.
And then there's this, which suggests using margin-left: auto and margin-right: auto...
CSS Issue Centering NavBar
... but the same thing, it's off-centre
There are other tutorials suggesting using float: left, but any time I add floats (to either the list itself, or the list and its container), I either get the list appearing on the very left of the screen, or I just get everything split gaps appearing in the container instead of the list being on one line.
I know this is an oft-covered topic, but the same old advice isn't working for me. I'm obviously missing something, so help would be appreciated. Hopefully some illumination with clarify the core coding issues at play, as opposed to all the other answers on the net, which just seem to make the same basic suggestions. Thanks.
It's not an ultimate solution, but in that specific case it works
ul#nav {
font-size: 12px;
width: 666px;
margin: auto;
alignment-baseline: central;
}
Element which have any width , with margin:auto; will get centered position relatively to it's parent
You could use this:
div.navbar_wrapper { text-align: center; }
ul#nav { display: inline-block; width:auto; }
Related
I have some ads I need displayed as rows of three within a div #ad-720.
I had it working then something changed and now they are all in a column. The footer is also cut off instead of being fullwidth. I've tried adding display: inline-block and a few other suggestions I've found here thru search but nothing is working.
I'd appreciate any guidance I can get. I'm mostly a graphics guy who gets asked to solve code problems here and there! ;)
http://www.cavallino.com/
Right now the CSS for the div is set to:
#ad-720 {
display: inline-block;
text-align: center;
padding-top: 10px;
padding-bottom: 0px !important;
}
For starters the display setting for the is set to block. Try setting it to inline. If that doesn't handle it, post the relevant HTML/CSS here and we will help you out.
I'm trying to create a "grid" of "blocks" that when hovered over will reveal some text in a div beneath it. In the example I've got everything how I'd like it but- is there a way to make it work in the arrangement I have it in?
What I'd like is for only the bottom div to push down (like the bottom-left one in the example) when the one above it is "expanded". But obviously I'm not getting something right since it creates a giant gap and it's not showing the animation either.
The way the bottom div reacts in the second column is not what I'm going for, though.
Any ideas?
Thanks, appreciate it!
http://jsfiddle.net/nbFkZ/
Through your comments, i think i understood your question finally:
What I've done:
I've moved the second and third li into a new UL-elements.
And let both UL elements float to the left.
The HTML is a bit to much to post here, so i just post the CSS:
ul.things {
list-style: none;
float: left;
width: 240px;
}
ul.things li {
display: inline-block;
/*float:left;*/
margin:15px;
}
HTML, CSS & Live Demo: http://jsfiddle.net/nbFkZ/4/
Hope it helps :)
I am struggling with a CSS issue. I want to display a Google +1 button next to ShareThis buttons (I am using Drupal).
For some reason, Drupal adds a panel searator CSS class:
I tried to modify my CSS file as following:
.panel-separator { display: none; }
but it only produced this:
There is enough space to the right of the ShareThis buttons to display the Google +1 buttons. But, the buttons are stacked on top of each other.
How do I get the button to align horizontally? Thanks.
Update
I have set a lot of width and I also added float: left;:
.GYPO_social_buttons {
padding-top: 91px;
width: 200px;
float: left;
}
.GYPO_share_this {
width: 90px;
}
.GYPO_google_plus_one {
width: 40px;
}
Here is the enclosing div according to firebug (I am using Firefox):
Update II
Woops, my bad. I have now set the float: left; on the button themselves rather than the enclosing div and the issue is solved. Thanks !!!
.GYPO_share_this {
width: 90px;
float: left;
}
.GYPO_google_plus_one {
width: 40px;
float: left;
}
You need to give enough width to the container div, that is holding these icons. After that you can float these icons by giving float: left; . The reason why Google +1 is moving down is because the container div doesn't have enough width to accommodate this next to mail icon.
From the portion of html and css you are providing it is a little bit difficult to find out what would be the best way to do this. The question is what generates the break. It could be that the parent element is not wide enough to and the +1 needs to be below. In that case you can simply change the width. It could also be that there is css that generates a break (e.g. display: block and no float for on eof the elements) In that case you might try to change that to display: inline or a float: left for the buttons. There might be a clear somewhere in there which would cause the float to break (although it doesnt look like a clear on the image)
I suppose there are more possibilities than that...
I need to see more of your code. If you have tried to make your container larger to hold all of the icons and that didn't work, I would guess it was another element forcing the icon to the next line. Without more code, all I can do is make a guess...
I was in the same situation once. Here's what solved my problem:
You can also choose the "style" setting on the region and choose "No markup at all". This will remove the panel separator.
For more info: https://www.drupal.org/node/579020#comment-8163459
So I'm trying to code out my design for my new portfolio website, but I'm having a few issues there that research and hours of smashing my face against the computer screen have not yet solved. There are two big issues right now that I'm stuck on, though there is yet another that I'm currently considering if I even want to deal with at all.
The first issue is the menu. I want the typeface to go from regular to bold when you hover over it, or when you're on that page. Which works. Problem is when you hover over it, the other two items in the menu adjust slightly because the change in type weight pushes them out. My attempts thus far have all ended with failure.
The second issue is the footer. I want it to stay on the bottom of the page. My research has gotten me this far, but instead of what I wanted, now it actually stays at the bottom of the browser, not at the bottom of the content. Thank you for any help you can give!
The page in question can be found at: http://personal.justgooddesign.net/draft/
Your footer is getting jumbled up because you float left and clear right. My personal preference for footers always starts with this very clean method and builds from there. If you're getting confused, separate your inner content from the rest of the page and test away.
With fonts, you have to think more like a UI developer than a graphic designer. Unlike Indesign, Illustrator, etc, fonts and spacing aren't 100% pixel perfect. What will render one way in one browser will render a very different way in another. Bolding a font on the web will make it larger, and it will push spacing. To compensate for that, setup your menu elements to be a bit wider to compensate, then test like crazy. If you solely rely on margins and padding, then a bolded hover element is going to push the menu around every time.
Just a suggestion, setup your css in a separate file and load it in. The code will be cached, which will result in a performance improvement on subsequent loads. Further, you could save yourself a lot of code by doing one class to attach styling to your elements and being mindful positioning relative to other elements. There's no need to individually style every element in your portfolio for positioning.
You can fix the jump in the menu by setting a fixed width on the #menu li, so
#menu li {
display: block;
float: right;
width: 40px; //something like this.
padding: 0px;
list-style-type: none;
position: relative;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
}
EDIT:
To fix the footer issue
remove height: 600px; from the #right rule
add a clearing br in between the #container div and the #footer div
</div>
<br style="clear:both;">
<div id="footer">
You have floating problems as you are not clearing your floats.
Your div#wrapper is always going to be equal to the height of the viewport.
Your div#container is collapsed beacuse you have floated div#left to "left", div#right to "right" and also have absolutely positioned div#footer. What this does is that, it takes these divs from the normal flow of the document and subsequently the div#contaiver is not "wrapped" around these three divs (div#left, div#right and div#fotter")
The same is the case with div#right. The div#intro and div#portfolio have been floated inside the div#right and it is not wrapping it's child divs.
Ther are many ways around these problems. I suggest this.
Include the following code after the last floated element.
<div class="float_clear"></div>
div.float_clear
{
clear: both;
}
For the menu, there is not enough space, Just add.
div#menu>ul>li
{
width: 50px;
}
Try this to fix your footer issue?
<p style = "clear:both">
<div id="footer">
Also
#right {
clear: right;
float: right;
height: 600px; //Remove this line
width: 490px;
padding: 0px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 0px;
}
add overflow:hidden to the container...
Whenever you have stuff that is floating, put a div around the floating content and give it
overflow:hidden;
display:block;
width: (some width);
That will fix most floating issues
I need the menu (home, portfolio, services, about) is aligned in the middle and left.
The div#header-login should be flush right
How can I accomplish these tasks?
To solve the first problem, I put the divs with display: inline; but for some reason the ul#header-menu is leaving a space at the top
To solve the second problem, I tried to put the div#header-login with 100% width and thus align the text to the right but failed.
Here is the complete code:
The easiest way to achieve this is to make sure you float everything in the header. With the current mix of some float and some non-float (plus some elements with display:inline), this will be tricky to manage and potentially problematic if you need this to work in older versions of Internet Explorer.
I've made a few small modifications to your jsFiddle. This now floats the 3 elements in the header and applies float clearing to the header div itself so that the content after the header clears properly (there are also commented examples of how you'd need to do this for the IEs with conditional stylesheets).
http://jsfiddle.net/y4Qyw/1/
I've not tweaked the spacing specifically, but it should be a formality now to position everything where you want with some padding and/or margin. Automatic vertical positioning in this situation isn't possible unless you're working with display:table-cell (which isn't entirely cross browser), so you'll just need to vertically offset your menu downward to get it centre-aligned.
Here is the deal:
div#header
{
clear:both;
overflow:hidden;
}
div#header-login
{
text-align: right;
overflow:hidden;
float:right;
margin-top:-30px;
}
img#header-logo
{
display: block;
float:left;
}
ul#header-menu
{
margin: 0 auto;
padding: 15px;
display: block;
list-style-type: none;
overflow:hidden;
}