I've recently started to learn CSS, and I've come across something I just can't figure out.
http://jsfiddle.net/HDKsq/7/ is my fiddle.
I'm trying to set the buttons in my navbar to be aligned perfectly in the middle vertically. The buttons are elements in an unordered list, and I've set them to vertical-align:middle; but the space on top of the buttons is visibly larger than the bottom, am I using the wrong syntax?
ul li{
list-style:none;
display:table-cell;
vertical-align: middle;
border: 2px solid white;
padding-right : 10px;
padding-left: 10px;
background-color:black;
border-radius:6px;
line-height:100%;
text-align:center;
width: 150px;
for clarification this is what I'm asking about
Change the following line:
padding: 10px 10px;
to
padding: 6px 10px 10px;
To center the lis, you'll have to manually adjust the padding. This has to do with the height of the picture you have for the home logo. If that remains at 30px, then you need to adjust because it's affecting the height of the lis, which have a line-height of 100% (meaning the text will adjust to the height of the picture). Therefore, depending on the size of the picture used, you'll need to specify the padding-top, since the picture will flow downwards (it's larger than the size it should be to center).
fiddle
Please forgive my use of a placeholder kitten. I hope you don't break out into tears of joy.
It's perfect man, just because of small 'g' in Google you feel it like it's touching to the bottom border.
This is because the character formation of 'g', you will get same effect for 'q'.
Your CSS is perfect.
Related
I'm using a set of FontAwesome4 icons and I'm finding that they're not all the same width. This offsets the alignment on subsequent divs where different icons are used.
As you can see the fa-file-text icon is slightly narrower than the fa-video-camera icon. Is there any way to make them the same width? Or at least calculate a margin for the fa-file-text file?
Taking a cue from this question I added a float and width to all the elements with icons. And this fixed it.
.entryicon{
margin-left: 3px !important;
margin-right: 3px !important;
float: left;
width: 20px;
}
Please take a look here, on my code. I am trying to make a responsive web page, but there is weird margin from top and bottom of first article column. I am talking about margin between top navigation and content column and between footer and content column, and I just set 10px margin to right column like below.
.content {
width: 69%;
float: left;
margin:0;
padding:0 10px 0 0;
}
I am new to web designing, and I don't know what wrong I am doing here. Please help me
Using
.topcontent{
display: inline-block;
}
should solve your problem.
You're experiencing the way margins collapse together. Set the top-margin on the H2 tag to 0, and the bottom-margin on the last paragraph to 0. Then to restore the white space, add top and bottom padding to the article element.
More info about margin collapse here:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
I am trying to build a simple div with a span of text inside of it.
<div id="bottom-text">
<span>ONE STOP</span>
</div>
And here is the simple CSS styling I have in effect for "#bottom-text":
#bottom-text{
font-weight:700;
font-size:50px;
text-align:center;
margin:auto;
position:relative;
padding-top:25px;
height:65px;
width:auto;
}
For some reason, the text "ONE STOP" displays partially outside of #bottom-text. (only the top portion of all the letters...) I've tried using padding to fix it but the text then overflows partially into the padding region!
Can anyone help me figure out why this text is displaying outside the div it is supposed to be contained within? (I've been testing Chrome and Firefox)
Thanks all.
.largefont {
color: #0066FF;
font-family:arial;
font-size: 6px;
display: inline;
}
<span class="largefont">block level span</span>
Assign a class to the span and play with that.
look at your code, the #bottom-text is 65px height, the font-size is 50px, and padding-top is 25px
65-(50+25) = -10
So you will see only the top 10 pixel of your text.
Set padding-top to a lesser amount, and play with just so it is correct
Check your line-height. Only thing I can think of is you might have some styles elsewhere that are adding some in. Try adding "line-height: 1;" to your existing #bottom-text CSS so that your text is actually 50px high. Or, if you want the text to vertically center in #bottom-text make your line-height match the height of #bottom-text (65px).
trying to reproduce the header here, and so far i have this http://www.webdevout.net/test?0A. I can't figure out why the text containers extend out below the bottom of the bar by 1px, and why they dont on the other site.
Thanks
i have fixed it here:
http://jsfiddle.net/HZLC4/1/
i removed the width of wrapper to fit in JSFiddle's display. you can add it back.
tips to note though:
reset always comes first
to have friendly links, pad the links. makes the links have bigger "box" to click on
padding links and text adds height to the parent container so you wont have to declare height for the wrapper.
divs autofit to content if it has no dimensions declared. it means divs autofit the links and text resulting in to no more "1px problem"
i forgot, for link padding to take effect, <a> must be styled with display:block
You set line-height for .header h1 to 11px, but actually you need only 10px.
The problem is the header styling:
header li, header h1 {
display: block;
font-weight: bold;
font-size: 12px;
line-height: 11px;
padding: 20px;
background-color: #2d2d2d;
border-right: 1px solid #333;
}
padding-top 20px + padding-bottom 20px + line-height 11px = 51px
Either you need to increase the height of the header to 51px, or you need to decrease either padding or line-height.
Dont know if you can see it.
But i changed line-height from 11 to 10 on
header li, header h1 {
And that worked.
Take a lok at this site: http://www.naaf.no/fersking
If you hover the mouse over the three article boxes, you will see that both text and image changes.
I've placed the text in a DIV which floats above anothe div (image) with opacity set to 60%. But can anyone explain to me why the first article is approx 5px lower than the two other boxes? The first article is aligned with the bottom - it should be 5px higher up.
Here is the CSS for the text box:
#articleImageList .introText {
background-color:#000000;
color:#FFFFFF;
height:50px;
margin:0 2px;
opacity:0.6;
overflow:hidden;
padding:5px 20px;
position:relative;
top:-75px;
z-index:0;
}
Make all your images the same size. Resize /upload/Ferskingen/COLOURBOX1021676.jpg (the image in the first article box) so it´s 440x239px (like the other images, it´s 430x239 atm).
The image makes the div.articleImage higher then the other two hence makes your position: relative; bottom: -75px; not render the result you want (but it behaves right).
Or:
remove min-width in the #articleImageList img-selector in main.css line 439.