I am having difficulty aligning SNS buttons using CSS on this page giantmango.com/news. I am using the exact css and html, but I cannot align giantmango.com/news SNS buttons like the giantmango.com ones.
If you talk about social netoworks buttons, then you can make the first to be upper adding margin-top: -8px; for #content .mixi in style.css
Try this:
Set the width of the UL element to something that would fit all LI elements (e.g. if each of the LI element is 20px wide and there are 5 elements, the UL element should be at least 100px.) You should also consider the padding and margin of each of the UL element and add that to the total width of the UL element.
Set the style of the LI element to: li { float: right; }
Related
I'm running into a bit of a problem with some code I'm working on. I want the list in the menu to always be vertically centered in relation to the menu div. I've tried various solutions found here but the list always end up at the top of the div. Can it be done? Ideally it must work even if the does not have a fixed height.
and here's the CSS:
you can try converting ul and li elements to display as inline-block elements. And set vertical alignment to middle
ul, li {
display:inline-block;
vertical-align:middle;
}
You can also consider using line-height to achieve this (if the menu is the only thing within the div).
See fiddle here
For example: Add a height of 200px to #menu, and add a line-height of 200px to #menu ul
A common technique is to use the display: table; for the parent and display: table-cell; for the child. Then you can apply vertical-align: middle; to the child.
Here's a code example
You might consider applying display: flex; to #menu.
See fiddle
hi i used bootstrap vertical navbar in my home page and now i want to make horizantal navbar in my gallery page.
but new navbar also displaying vertically. i want to make bootstrap default navbar for this page.
i used this code segmant to make vertiacl navbar in home page.
/* make sidebar nav vertical */
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
now i want to undo these navbar to horizantal
thnx
You should learn what these properties you are using do..
Display:block; :
Quote from W3C
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block boxes in a block formatting context collapse.
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's content area may shrink due to the floats).
Float:none;:
Quote from Noah Stokes
The float property has four values that we can apply to it: left, right, inherit, and none. Each value is pretty self explanatory. For example, if you assign float: left to an element, it will move to the left-most boundary of its parent element. The same idea applies if you were to assign float: right; to an element. That element would be sent off to the right-most boundary of its parent element. The inherit value tells an element to inherit the float value of its parent element. The value none is the default value and tells an element not to float at all.
Floating means, very generally, to push a block-level element to the left or to the right, manipulating the flow in relation to other block elements.
Block means to define the type of element and the space it takes up on the page. The majority of HTML elements are either going to be block or inline elements by default. The display properties is used to manipulate these defaults. Block elements, or elements manipulated with the display properties to be block elements will take up all of the horizontal space of it's parent, or, very generally, often begin at the beginning of a line and end at the end of the line.
Change your float:none; to float:left; and display:block; to display:inline-block;
I am currently creating a navigation bar for my site, and I've looked everywhere and tried some stuff but I couldn't figure out what I've fudged up :P
Anyways, I've got some boxes I named 'nav-box' and they hold the navigation elements inside them. I have these displayed inline-block so that they look like nav elements.
2 things now, the text inside these boxes are stuck to the left of the box, I have to have them centered. Alongside this, the boxes seem really big. Do i have to set their width manually or can I have css make them fit?
Here is the JSFiddle i have created with my code. I've tried adding 'inline-block' to both the element and it's parent container, but neither of them work for this situation :(
This is what I've tried:
.nav > .nav-content > .nav-inner {
width: auto;
float: right;
text-align: center;
}
As you can see that is my parent element holding the nav-box element and I added the text-align: center;, but it still didn't do what I need.
http://jsfiddle.net/qhPwt/
The text inside the boxes are not aligned to center because there is a margin-right being applied to the content inside the boxes.
Check this FIDDLE
CSS changes
.nav > .nav-content > .nav-inner > .nav-box > .nav-link:last-child {
margin-right: 80px; // Remove this style
}
However I search, I cannot find a valid example....
I have a typical horizontal menu build with a :
div ul li a li a ... /ul / div
(li elements has align left)
Overflow hidden applied on div or ul does nothing. I have always a vertical adjust of li elements when I resize the browser to test the overflow behavior
I have played with position, etcs....
Can any "charitable" soul write an example or give a link?
Thanks....
If your div or ul don't have a specified height, they will grow to adjust to their content, and the content will not be treated as overflow.
Unless you properly clear: both; after floating your li elements, the div and the ul will have no height at all.
If you have done that, then it is not very clear what you are trying to hide, with overflow: hidden;
One thing is sure: You should figure out if the div and ul have heights and widths, and what those values are, and if they don't, you can manually assign them, to fit your toolbar (for example).
I just can't set the height and width of a elements of my navigation.
#header div#snav div a{
width:150px;
height:77px;
}
#header div#snav div a:link{
width:150px;
height:77px;
}
#header div#snav div a:hover{
height:77px;
background:#eff1de;
}
Any ideas what I am doing wrong?
add display: block;
a-tag is an inline element so your height and width are ignored.
#header div#snav div a{
display:block;
width:150px;
height:77px;
}
Anchors will need to be a different display type than their default to take a height.
display:inline-block; or display:block;.
Also check on line-height which might be interesting with this.
Your problem is probably that a elements are display: inline by nature. You can't set the width and height of inline elements.
You would have to set display: block on the a, but that will bring other problems because the links start behaving like block elements. The most common cure to that is giving them float: left so they line up side by side anyway.
From the definition of height:
Applies to: all elements but non-replaced inline elements, table columns, and column groups
An a element is, by default an inline element (and it is non-replaced).
You need to change the display (directly with the display property or indirectly, e.g. with float).
Thanks to RandomUs 1r for this observation:
changing it to display:inline-block; solves that issue. – RandomUs1r May 14 '13 at 21:59
I tried it myself for a top navigation menu bar, as follows:
First style the "li" element as follows:
display: inline-block;
width: 7em;
text-align: center;
Then style the "a"> element as follows:
width: 100%;
Now the navigation links are all equal width with text centered in each link.