Okay, so I've looked at various posts on StackOverflow addressing the problem of centering a nav div. The solution seems to be:
.menu {
text-align: center;
}
But no matter what div wrapping around the nav I use this on it does nothing. You can see the problem at http://www.dustinlee.co
I'm using this framework: https://github.com/jbckmn/naked-wordpress
Notice the navigation is on the left hand side. Even more strange, when you resize the window it begins to almost to the center.
Adding even more to my confusion is the fact that it's wrapped in this:
<nav class="site-navigation main-navigation">
Which seems to be associated with nothing in the styles.
add this to your css
header nav ul{display:inline-block;}
Related
I need the anchor text to wrap to the second line and still maintain the layout.
I have tried everything and I am not sure what I am doing wrong here.
Above is how I want it. My demo site where u can see the live layout : http://www.iamvishal.com/residen/?q=node/54
I have tried many variations
max-width
word-wrap
but nothing seems to work.
The strange wrapping is due to the use of padding on an inline element. You should either move the padding to the li elements instead of the anchors or change the anchors to display: block or display: inline-block.
I played arnd with your CSS on your website. This seems to do the trick. Do post your css and html on jsFiddle so we can better help you.
#navigation .links, #navigation .menu {
text-align: -moz-center;
}
Ok, if you go here: http://opportunityfinance.net/Test/2013conf/index.html
You will notice 2 layout issues
This image of the 3 logos needs to be below the "Gold" <h4> tag. But for some reason it won't do it. I have assigned the <div> tag a position of relative since there are other divs within it that need to align the images to the bottom, and this does it correctly, however, it now won't go below the <h4>Gold</h4> HTML.
Next Layout issue:
I have been trying like hell to get a footer on the bottom of the page. Sounds simple right? WRONG! But now that I got the div to be at the bottom, it seems to be cutting off the top area divs above it. So, not all of the content is showing. Instead it is being pushed underneath of the footer. How can I fix this? Tried to put a padding on it, but now sure where and/or how? margin-top on the footer doesn't seem to do anything either.
Any help on this is greatly appreciated. I have been struggling like hell to get this simple layout in order. It should be a fluid layout, as I'm resizing text down as the page resizes also, which seems to be perfectly fine, except for these 2 problems :(
EDIT
Here is a pic of what it looks like when applying the container div a 100 pixel height value:
It is giving it too much space between the <h4>Gold</h4> and the 3 images. Atleast this is the case in Opera. Any possible work-arounds for this?
here's a fix for one
.body {
background-color: #FFFFFF;
padding: 2em 2em 52px 0;
}
you have 3 logo's in one div, on that div add a height, for example
element.style {
height: 100px;
position: relative;
width: 100%;
}
Pretty basic stuff really, you should look into clearfix's here http://css-tricks.com/snippets/css/clear-fix/
When you add a float or position:absolute; to a div, in a way it gives up its reserved space so that causes the parent div to think that there isnt anything inside and therefor has no height, clearfix will fix these problems for you, reason i say is becuase the 3 logo's are all either floated or absolute;
this is the result i get
alite so i used a tutorial from this site: http://www.webreference.com/programming/css_gallery/index.html
the problem is, when i added more images, the gallery on the right fell out of the div margins. to fix this i used overflow:auto. now when there are a lot more images, i am allowed to scroll down my div. problem is the image shown when i hover is positioned at the top part of the div. so when i scroll down too much, the image either gets cut out from the top or doesnt appear at all. so its kinda like on this page right here. if you scroll down this page far enough you wont see this post any more unless you scroll back up. is there a css code that i can use to fix this. basically what i want it a position:fixed effect in the div box with the hover thing. so how do i edit the tutorial code to do that?
The issue is with step 9 in the tutorial
#container li {
float:left;
}
An important concept to know with floats is the clear property. Because the space of the images exceed that of the containing div, the images effectively fall out of the div. There are several ways to resolve this issue. Read here for more http://css-tricks.com/all-about-floats/
1.overflow: auto; like you have already implemented
2.define a class
.clear {
clear:both;
}
and put <div class="clear"> right before the closing tag of the container
3.Use pseudo selector :after
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
change <div id="container"> ... to <div id="container" class="clearfix">
Personally, I prefer method 3, because it makes markup cleaner. Just be aware of browser compatibility for method 3.
I am trying to use <span> to move some text in my navbar. My navbar is a <ul> and the elements are all <li>s but the text is aligned to the top of the navbar and I want it to be vertically centered. As you can see in the JSFiddle, I am using an a:hover property in CSS to change the background and color of the text when it's hovered over. When I apply the span to just the text, the whole hovering section gets moved too. See if you can understand what I mean.
My JSFiddle is here:
http://jsfiddle.net/G8CJ7/
Basically I just want the text vertically aligned in a simple, concise way. Originally I was using '' tags and setting a margin on them but I want to avoid using header tags for this purpose for improved SEO. Thanks.
http://jsfiddle.net/G8CJ7/1/
Added line-height:40px to center the text vertically. IE7 will have issues with this as it is not fully supported, so a conditional stylesheet with a padding-top on the li will solve it.
Adding line height works, you could also adding padding to the top:
.class { padding-top: 10px; }
Adjust the padding to center.
Updating this a couple years later but there's always the option of using:
display:table;
display:table-row;
display:table-cell;
with vertical-align:middle; in order to center the items. I prefer this approach these days because you can apply responsive rules to the display style (for example, change it to display:block and display:inline-block etc. if you need to update it for other screen sizes. Here is a fiddle:
http://jsfiddle.net/G8CJ7/68/
http://jsfiddle.net/95pR2/1/
Essentially what the title says, I am trying to center the numbers to the center. This is taken from http://www.kevinresol.com/divslideshow/example.php
Something else that I am having an issue with is centering the facebook embedded div like button. It is the similar issue of centering a div within another div. I was able to get it to center by doing style="text-align:center" on the parent div, but doesn't work on the first issue (so I posted both).
http://jsfiddle.net/qWJm5/1/
I'm pretty sure its related to correctly styling parent and child divs, but i've tried other stack overflow forums and they don't seem to work for example doing margin:0px auto;.
Thanks in advance.
Your script is automatically floating your control elements with an inline style, if you remove that line from line:90 of your jquery.divslideshow-1.2.js script you can then style the control elements yourself. So, remove line:90, which reads:
.css('float','left')
And add the following CSS:
CSS
#dss .control-containter {
text-align:center;
}
.controls {
display:inline-block;
}
And all should be well.
demo: http://jsfiddle.net/95pR2/7/
Apply a text-align: center; to the parent div. Remove the float:left on the child divs, and make each child div an inline-block.