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.
Related
trying to setup amp-user-notification but the padding doesn't work. padding-right
amp-user-notification {
min-height: 30px;
font-family: 'Roboto';
font-weight: 500;
line-height: 30px;
padding: 8px;
background: #46b6ac;
}
https://github.com/ampproject/amphtml/blob/master/examples/user-notification.amp.html
padding: 8px; doenst work for rgiht side. i think cause parent amp-element is display: inline-block;
How to fix that?
Thanks!
It works just fine, it is just that the padding adds to the element's size, so the element overflows. You have to either subtract your padding from your width/height, either add box-sizing:border-box to said element.
padding in MDN
box-sizing in MDN
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.
Like the title, I want to vertical align center a <a> inside <ul><li>. Here the jsfiddle
Due to the fact you are specifying heights on both elements, this can easily be achieved by adding margin-top: 0.5em to a.
Like This
This is because the li has a height of 3em, the a has a height of 2em, so it needs half an em at the top to look vertically centered
Change the line-height of the a to match the line-height of the li.
a {
/*...preceding styles */
line-height: 3em; /* Elements line-height set to match parents */
height: 2em;
width: 5em;
text-align: center;
}
OR
Set the property vertical-align:middle on the a.
a{
/*...Other styles ommitted*/
vertical-align: middle;
}
Example http://jsfiddle.net/gvTLw/5/
You need to change the height and line-height of the a element to match the height of the li:
li {
height: 3em;
}
a {
line-height: 3em;
height: 3em;
}
Similar to Kevin's response, setting line-height on the anchor to inherit will do the same thing, without having to match the value manually
Fiddle
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 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;
}