Why I cannot use margin for my a links in div with id="menu".
I can use margin-left right but I cannot use margin-top or bottom. I want to move the text a bit to the top, because I think it is crushed a little on the bottom border.
Why does margin top and bottom not work? Any ideas?
Live page is here: http://www.woojoin.com
Depending on your goal, to move the entire bar, you can add the attribute 'position:absolute' to #menu, or to just move the text you can apply that attribute to #menufix. This is just an introductory idea of course.
Did you try using this?
margin:0 auto;
Based on what I'm currently seeing on your site, adding display: inline-block should do the trick.
#menu a {
font-family: Calibri;
font-weight: bold;
margin-left: 50px;
margin-right: 50px;
text-decoration: none;
color: #000;
margin-top: 1px;
display: inline-block;
}
Because it has no layout. Set display:block, or display:inline-block.
Related
I have one of my <a> links set to inline-block and there is some space added to the bottom of the containing div. I am not sure how to get rid of this and was wondering if someone could help.
Here is a fiddle: http://jsfiddle.net/RQ69r/1/
Thanks in advance.
You can fix that adding the following style to the inline-block element:
vertical-align: middle;
Demo
Why dont you change it to display: block; ?
Check the updated fiddle:
http://jsfiddle.net/RQ69r/3/
When you want more <a> elements next to each other (horizontal), you could use list-items and / or float:left;
This is the default behavior of inline-block elements. Set the parent div font-size: 0px;
DEMO http://jsfiddle.net/RQ69r/7/
.row_20 {
width: 20%;
font-size: 0px;
}
And set the correct font-size of the child element
.header .logo {
font-size: 13px; <-- set font size
height: 45px;
width: 100%;
display: inline-block;
background: blue;
}
Im having trouble vertically aligning text inside a image button.
Vertical-align: middle doesnt seem to work.
Here what i got so far:
#navbar ul {
padding-top: 10px;
float:left;
}
#navbar li {
background-image:url("../images/btns.png");
width: 78px;
height:32px;
float:left;
text-align: center;
font-size: 12px;
list-style:none;
vertical-align: middle;
}
Simplest way to fix this is to give a line-height for the li same as that of its own height.
http://jsfiddle.net/KHBG4/
#navbar ul {
padding-top: 10px;
float:left;
}
#navbar li {
background-image:url("http://placehold.it/78x32");
float:left;
width: 78px;
height:32px;
text-align: center;
font-size: 12px;
list-style:none;
line-height:32px;
}
vertical-align can only be used with inline elements. That having been said, I know img tags are "inline-block" so not really sure what to expect there, but I don't think you mean to vertically align the img, but rather the text, so you need a separate inline tag (span would do fine) and use "position" and "vertical-align" to set it up right.
I have had a recent post about that very issue here:
How can I resize a background-image to fit my element (without set width) in CSS 2?
I would suggest the simplest route of giving your button padding-top (and reducing it's height by that number of course).
It's not truly "auto-centered", as it won't be centered if you change the height without updating the padding, but - it works and it's clean and easy, and simple to update.
I have an issue with the sliding doors technique here. The heading right after the description is floating left due to the sliding doors technique, but all I want is that is stands alone in the center, above the products.
Can you help me understanding how to do it?
Here is the CSS I used for the heading:
h3.offer-title, h3#comments, h3#reply-title {
background:url(images/offer-title-bg.png) no-repeat right bottom;
color:#434343;
display:block;
float:left;
font-size: 14px;
margin-right: 6px;
padding-right:6px;
text-decoration:none;
height: 43px;
line-height: 0;
position: relative; }
h3.offer-title span, h3#comments span, h3#reply-title span {
background:url(images/offer-title-bg.png) no-repeat;
display:block;
padding-left: 20px;
height: 43px;
line-height: 43px;
padding-right: 16px;
}
Thank you.
It's floating because you set float: left in your first CSS code block. To get rid of that behaviour you need to get rid of the float.
Once the float is gone, if you want the header's background to nicely fit the text like it did before, the element needs to have display: inline-block.
But with display: inline-block and no set width on the header (you could add a width, but then it might break if you want to change the text or font size), it's not centered. To get it centered, you need a wrapper element around it which has text-align: center.
So:
Add this block:
h3.offer-title {
display: inline-block; /* this makes the bg fit the text */
float: none; /* this overrides float:left */
}
Wrap the offer-title element in another div.
Style the wrapper with
.offer-title-wrapper {
text-align: center;
}
I'm getting some problems with vertical aligment.
I want to put my <span>›</span> element centralized in vertical.
http://jsfiddle.net/vpVEf/
Is there a way to centralize it automatically as the "li a" in this example? Note that the a element is centralized without using line-height.
http://jsfiddle.net/vpVEf/9/
The reason this is happening is because the a tag has a padding, pushing down everything in it by 12px.
Remove the top/bottom padding and use line-height to make it 68px tall.
padding: 0 12px;
line-height: 68px;
It might not look like it, but this does fix the problem. Remove all formatting from the span to see! But now the issue is that the text isn't aligned center within the span. You can use line-height on the span to adjust that as well.
line-height: 55px;
Seems to work well.
DEMO
Try using line-height to adjust the vertical alignment on your span:
#MenuEventos li span{
position: relative;
float: right;
font-size: 3.5em;
color: white;
font-family: serif;
font-weight: bold;
margin: auto 0px auto 0px;
line-height: 44px; /* Adjust this as needed */
}
Example: http://jsfiddle.net/vpVEf/1/
Take the line-height: 2.8em; that you have in #MenuEventos li a style and move it to the #MenuEventos li style.
See this jfiddle: http://jsfiddle.net/zFnJb/
You need to make <a> element floating left and <span> element floating right.
I imagine there is a simple solution, but it eludes me. If you look at this page you will see that only the header has a grey background. The grey background is set by the #container DIV which I would like to stretch down the entire height of the page:
#container {
padding: 0;
margin: 0;
background-color: #292929;
width: 1200px;
margin: 0 auto;
}
At the moment it is only stretching over the header section of the page, and the content below is not contained within it. I imagine that is because the main content in the #content DIV has absolute positioning, which I need in order to be able to do some animations on the positioning of this div (you can see this when you hover over the nav bar image):
#content {
font-family: Lucida sans unicode !important;
color: #CECBBB;
text-align: justify;
position: absolute;
top: 210px;
padding: 20px 40px;
}
From some research it would seem that DIVs with absolute positioning are not included in the height of parent DIVs, but I am not sure how to fix this.
I'd be grateful for some help.
Thanks,
Nick
Yes, you're right. Elements with absolute positioning are not considered anymore in layout of their parent container. To understand it better, I recommend you read CSS Positioning from A List Apart.
IMHO, you have many solutions:
Use floated layout, instead of absolute positioned layout
Hardcode the height of container element
Use JavaScript to always update the height of the container element.
If you need to have #content absolutely positioned (as you state in your question) then the best way to get the background you desire is to either put the background-color: #292929 on the #content itself (you will probably need to adjust some positioning and padding to eliminate any black).
However, if the animation is the submenu at the top that opens on hover, then I suggest setting both the menu and the content divs to position: relative, and instead of animating the top position of the #content (as your script appears to be doing), animate the height of the menu (have it zero as default and animate to something like 45px high [that's what firebug showed the height to be open]).
#content {
color: #CECBBB;
font-family: Lucida sans unicode !important;
margin-top: 40px;
padding: 20px 40px;
text-align: justify;
}
add a margin-top and remove the position absolute will do this.
Expanding a bit on Cecil's answer here.
One can position divs with margins instead, in order to make sure parent grows with child.
Se this fiddle
https://jsfiddle.net/944oahmy/10/
Where the following css is used
#parent {
border: 1px solid blue;
margin-top: -5px;
margin-left: 10px;
display: inline-block;
}
#child {
border: 1px solid red;
margin-top: 75px;
margin-left: 150px;
width: 500px;
}