For the code, please visit http://coloradohypnosis.com.s51572.gridserver.com/
In the nav bar, I cannot get the text to be center aligned for the nav items such as "Home", "What Others are Saying", "What to Expect", etc.
The current alignment skews the design slightly. I've played around with Chrome's Developer tools to change the CSS in the browser, but nothing I did changed the text's alignment.
Thank you.
I'd recommend to change the left and right padding to be of the same value, this way it will add the same padding on the left and right section to center align the text in your anchor element. For example:
#nav ul li a { padding: 34px 0.5em 18px 0.5em }
I'd recommend setting the a tags to be text-align:center and display: block then add equal left and right padding to the a tags. Maybe set the li tags to be text-align:center too just to be sure :p
change your anchor padding in your style.css (line 41):
#nav ul li a
Related
There is a white space between my nav bar and the rest of the content on my page I am trying to figure out how to get rid of it. Here is an image of the issue as well.
as MichaelvE said hard to know without seeing HTML...
You define space between nav li as margin and padding value so it should be that who set space at end of nav.
In that case you've to set margin and padding of last nav element(li?) to 0 or more acurately to margin-bottom:0; and padding-bottom:0; if the space is at bottom of nav (or left or right if you've space at left or right).
edit: you can see which element margin or padding will make unapropriate space by setting a test value as border:1px solid red; on nav and li (using a different color) and see where (in which element)the space is no wanted.
I have the following page with some HTML / CSS : http://jsfiddle.net/Hf6dB/1/
For some reason the buttons of the toolbar at the top of the screen have a margin right. Margin left, top and bottom is ok because the container has a padding, but where is the margin right from ?
Also in the real version of the page, which you can't see on the fiddle bbecause there are no icons, i have a similar problem in each of the menu entries :
<li>
<div class="draggable">
<input id="tb-btn-search" title="Search" type="button">
<p>Search</p>
</div>
</li>
When the mouse is out of the button, the <p> has a width that gets animated from 0 to something like 2 using CSS transitions. For some reason, when the width of the <p> is zero, the icon is not centered anymore because, here too, there is an extra margin that comes from nowhere.
Would this be related to the usage of inline block display property ?
Thanks for yor help !
display: inline-block creates a gap between elements. Further reading here.
Edit:
bjb568 mentioned in the comments re 4px gap:
NO! 4px gap depends on the font and size. You cannot use negative margins to solve this, since you don't know how big the gap is. -4px is a magic number, and thus should be avoided. Use font-size: 0, instead
You can delete inline-block in the <ul> and add float: left; to the li
#toolbar ul,
#toolbar li
{
display: inline-block; /* delete this
}
#toolbar ul,
#toolbar .tb-separator,
#toolbar li
{
float:left;
}
Updated JsFiddle
The line breaks between the elements are treated as whitespace, because the elements are inline-block, so they are part of a line of text. You can solve this by removing spaces and line breaks between the elements. If you want to keep the indenting in your document, you can choose to add a line break inside the element itself:
<outer
><inner
></outer>
I am trying to solve this issue for a few days now. I am unable to place the Child1, 2 and 3 between the 25px orange spot. The parent and child menu is a CSS based ul - li menu, where I set the <a> as an inline-block and set the width and height but it still ignores those parameters. I am out of ideas on how to solve this matter. Thank you for your help in advance.
Due to the length of the code I decided to upload the "whole" source code:
source.zip
The problem is that your <a> tags on the sub-menu have the padding:15px from the main menu. You will need to set it to 0. You can then set the line-height of the element to match the orange bar's height to center it vertically.
Add this to fix it:
#header .cssMenuA a{
padding:0;
line-height:25px;
}
It looks like the Child 1, 2, 3 a tags have padding applied to them, which is pushing them down past the orange. See screenshot:
Try removing the padding from the a tags (bodystyle.css, line 78), and reapplying it only to the parent menu items.
You have 15px of padding around all of the <a> elements in the nav list (including PARENT), but this also applies to the "Childs." Add the rule:
#header li li a {
padding-top: 0;
}
This may not look exactly like you want because the <a> is set at 25px high, but the font is smaller than that. Also add
#header li li a span {
line-height: 25px;
}
I am having trouble with my navigation menu, I have some li that are floated left of each other, and each li has a back ground image set to the right to give a seperation effect, within the li I have a a that is text aligned center.
On hover I have a bottom-border but I need said board to span the full width of the li not the a is this possible?
Here is a fiddle of my current attempt,
Fiddle
The following CSS should do the trick:
header nav a { width:100%; }
I have dropdown menu and its made via a list and position absolute, however the dropdown links are very very very small area and do not cover the text completely.
How can I fix this?
Example http://outreviews.com/v%202/index.html (the dropdown menus)
Remove the padding from the sub menu's UL and LI and give the A element "display:block" This will make the A element take up the entire width of the menu.
You can fiddle with the padding to get it the way you want it.
If you add:
ul li a {
display: inline-block;
width: 100%;
height: 100%;
}
It should work okay, and since even IE allows display: inline-block; on natively in-line elements it should be relatively cross-browser friendly (certainly under a valid doctype).
It's worth remembering that padding on the parent li will also reduce the possible width of the child a element, and the display: inline on the same parent li is also likely to cause you a little trouble (since display: block; on the a would be so much simpler).
Edited to note that #Chris Bentley correctly noted the points in my final paragraph (above the hr) just prior to my answer.
make the following changes:
in #headermenu li change the padding:20px; to padding :0 20px;
add delete the top:55px; from #headermenu li ul
What you can do is make the li elements display:list-item and the a elements display:block. That's what's being done on the site you're linking to.