I've been trying to learn HTML and CSS by creating a portfolio website and can't past through this problem.
What I want to achieve is to reduce the 'Source code' width and fit to the upper div called 'Project #'.
Also tried with tables but the result is kinda meh.
Do I miss something or should I just change my strategy to solve this problem?
This is the A element:
.projects-table a {
font-size: 30px;
text-decoration: none;
border: solid 2px;
border-radius: 10px 10px 0 0;
padding: 0 10px 0 10px;
margin: 0 20px 0 20px;
color: #00CF80;
}
And here is a link to the full code:
https://codepen.io/xAndreei/pen/BGyNVe
If I'm understanding correctly, you probably just need
display: block;
added to your CSS rule for the <a>, since an element has a default of display:inline.
more about CSS Display Property:
https://css-tricks.com/almanac/properties/d/display/
Related
I just started using css for a personal project where i want to show a set of icons one on the side of the other and aligned, i found a part of them on font-awesome and the others on aenter code herenother database.
The problem is the non font-awesome icons padding spills in the section above. I still can align them using more padding but in this way the design is not responsive anymore and resizing the window they get disaligned.
This is how it looks like without the 2.55% padding https://imgur.com/a/J4hNO
After reading about font-awesome default padding i tried resetting it but didn't work.
This is the css and html of one of the sections:
.one-fourth {
width: 20%;
float: left;
text-align: center;
color: #e0e0e0;
background-color: #4fb3bf;
}
#python i {
vertical-align: bottom;
border: 3px solid red;
padding-top: 2.55%;
}
.one-fourth i {
color: #e0e0e0;
max-height: 100px;
font-size: 500%;
padding: 13% 0 4%;
}
<section class="one-fourth" id="python">
<td>
<i class="icon-python"></i>
</td>
<h3>Python</h3>
</section>
After fiddling with the values and the various functions I found that the only way is to align the blocks not using the padding with a percentage value, but with a px value, so instead of
#python{
padding-top:2.55%;
}
.one-fourth{
:padding-top:13%;
}
I had to use
#python{
padding: 34px 0 0;
}
.one-fourth{
padding: 30px 0 20px;
}
How do I vertically align the characters/text inside an input without changing the height of the input (it has to be exactly 28px)? The input has this CSS, so I don't understand why it has some padding-top (?):
input {
font-family: arial;
font-size: 28px;
line-height: 28px;
height: 28px;
padding: 0;
border: none;
outline: none;
background-color:#cdcdcd;
}
<input value="asdg">
Some letters like g, p and q get cut off
Removing the margin-bottom doesn't help.
https://jsfiddle.net/4rtL6415/
There is no padding top, it's about font size. I've changed your snippet input with a special char that fit the whole height (I'll explain below):
input {
font-family: arial;
font-size: 28px;
line-height: 28px;
height: 28px;
padding: 0;
border: none;
outline: none;
background-color:#cdcdcd;
}
<input value="ￂgs">
This image:
Explain how a font is construct. 99% of the time you'll see characters with Body < EM and that's why we may think that there is a sort of padding-top.
Sometimes, you'll cross characters for which Body == EM, that's the case of ￂ (and a lot of others).
What you are seeing is not a bug but a feature. From here you have 3 choices:
Changing the font-size;
Changing the input height;
Changing the font-family for one that doesn't "overflow".
The choice is all yours.
The Problem
In some fonts, characters with descenders, like g, p, q, and y, "overflow" the vertical space defined by the font-size property. Normally, that's not a problem, because the line-height property provides enough extra space to accommodate the descenders. However, if the characters are placed in a container element with a fixed height that's less than the line-height, the descenders may get clipped if that's how the container handles overflow (text inputs being one example of such).
If you were hoping to bump the text up a few notches to avoid the clipping, then you'll be disappointed to know that there is currently no way to reposition text within its own line-height. (vertical-align, in case you were wondering, positions an inline element relative to its parent.) However, there are a few CSS tricks that we can use to achieve the same visual effect...
Solution 1 (Webkit only)
This one works by giving the input a large enough height to fit the font's lower extremities, and then using clip-path to trim it back down to 28px. This is probably the most elegant solution, but unfortunately, clip-path isn't well supported outside of Webkit browsers (Chrome, Safari, Opera).
input {
display: inline-block;
padding: 0;
border: none;
height: 32px;
font-size: 28px;
line-height: 32px;
font-family: arial;
background: #cdcdcd;
vertical-align: baseline;
-webkit-clip-path: inset(4px 0px 0px 0px);
clip-path: inset(4px 0px 0px 0px);
}
input: <input value="asdg">
Solution 2
This one was inspired by DebRaj's answer, but mine uses an inline-block wrapper instead of a block (not sure how you would use it otherwise). Like the previous solution, it increases the height of the input, but instead of using clip-path to trim it back down, it uses a container element with overflow: hidden;. This is probably the most practical approach until support for clip-path improves.
.text {
display: inline-block;
vertical-align: baseline;
overflow: hidden;
margin: 7px 0 -7px 0;
height: 28px;
}
.text > input {
margin-top: -4px;
border: none;
padding: 0;
background: #cdcdcd;
font-size: 28px;
line-height: 32px;
font-family: arial;
}
input:<span class="text"><input value="asdg"></span>
Solution 3
Although you can't reposition text within its own line-height, this may be the next best thing. If you set the line-height to something less than the font-size, the text will indeed move upward relative to its normal baseline. That means you can bring the clipped parts into view without changing the container height. Unfortunately, if you try this with a text input, you'll discover a strange quirk: line-height is completely ignored if it's less than the input's height. So we'll have to substitute a different element, and turn it into an editable textbox somehow. That can be accomplished with the contenteditable attribute.
.fauxTextInput {
display: inline-block;
vertical-align: baseline;
margin: 6px 0 -6px 0;
padding: 0 3px 0 3px;
width: 9em;
height: 28px;
overflow: hidden;
font-size: 28px;
line-height: 23px;
font-family: arial;
background: #cdcdcd;
}
Faux input: <span class="fauxTextInput" contenteditable>asdg</span>
As #Thomas mentioned there is a default spacing as per font construction rules. If we concentrate the output you want to achieve is make font exact same height at the input area, you can wrap your input into a div and give that a height to adjust the input into it using as a mask.
Here is the code:
<div class="input-wrapper">
<input value="asdg">
</div>
CSS:
.input-wrapper{
position: relative;
font-family: arial;
width: 100%;
height: 90%;
padding: 0;
background-color: #fff;
overflow: hidden;
}
.input-wrapper input {
display: block;
width: 100%;
height: 124%;
margin-top: -0.19em;
margin-bottom: 0em;
font-size: 28px;
padding: 0;
outline-offset: 0;
border: none;
}
.input-wrapper input:focus{
outline-offset: 0;
outline: 0;
border: none;
box-shadow: none;
}
fiddle: https://jsfiddle.net/x8jmLp8m/12/
Hope that helps.
Although there have been plenty of answers. I thought I'd add my solution to the bunch.
In this Fiddle, you can see how I managed to create an input field with a span tag, and the contenteditable attribute. The pros of taking this route are that the input field can stretch and wrap and that we can make it exactly 28px high.
In the CSS, I've added the following rules that are important:
span{
display: inline-block;
font-size: 25px; /*higher than 25px simply doesn't fit a 28px container*/
line-height: 1;
padding: calc(-.5em + 14px) 0;
}
display, of course, to style the bunch
font-size to declare the height of the font
line-height of 1 to make sure the text actually takes up 25px by default.
a padding of calc(-.5em + 14px) 0. And that's the tricky part
Because of this padding, the element will stay 28px high, while still centering the text. See the table below to see how the calculation works. The font-size and output * 2 always add up to a minimum of 28.
font-size | calculation | output |
--------------------------------------
50px | calc( -25px + 14px) | -11px | a negative padding translates to a padding of 0
25px | calc(-12.5px + 14px) | 1.5px |
20px | calc( -10px + 14px) | 4px |
15px | calc( -7.5px + 14px) | 6.5px |
10px | calc( -5px + 14px) | 9px |
With this code, you can edit the span's height by editing the 14px part in the calc, and edit the font-size without having to recalculate yourself
Hope this helps
Edited your fiddle here
The problem is your font is larger than the height of the element enclosing it. So you just need to set both the height and line-height to a couple of px larger than the font size you're using.
Hope this helps.
Just decrease the font-size:
input {
font-family: arial;
font-size: 20px;
line-height: 28px;
height: 28px;
padding: 0;
border: none;
outline: none;
background-color:#cdcdcd;
}
<input value="asdg">
I hope this will help you know what you want to achieve
In CSS, the line-height
property sets the height of
an entire line of text, so the
difference between the font-
size and the line-height is
equivalent to the leading (as
shown in the diagram above).
And our css is this
input {
font-family: arial;
font-size: 28px;
line-height: 28px;
height: 28px;
padding: 0;
border: none;
outline: none;
background-color:#cdcdcd;
}
Here we have set line-height and font size equal and because of that decent is getting cut.So you either need to decrease font-size or increase line-height.
input {
height:34px;
}
Just change height and line-height to 40px or more.
https://jsfiddle.net/525raf3L/
input {
font-family: arial;
font-size: 28px;
line-height: 40px;
height: 40px;
padding: 0 12px;
border: none;
outline: none;
background: yellow;
}
<input value="asdg">
I am scratching my head to resolve this issue but without success.
It is very simple: a div with rounded corners with a h3 on the top (I am trying to simulate a panel with title), very simple.
For some reason, the h3 always has a space, feels like it has a margin or something.
.example-wrapper {
border: 1px solid #555;
border-radius: 10px 10px 0 0;}
.example-wrapper h3 {
background: #555;
color: #fff;
border-radius: 10px 10px 0 0;
padding: 10px;
font-size: 16px;}
<DIV class="example-wrapper">
<H3>Herry Potter</H3>
</DIV>
Any comments would be appreciated.
You can find the issue here.
Yes, H# has margins by default. Set H3{ margin: 0; } to solve it. You can always use developer tools to inspect elements and see any style applied to them.
Is it possible to add padding before line-break? As in, making from this to this .
Current CSS code:
span.highlight { background: #0058be; color: #FFF; padding: 2px 5px; }
I had to add an extra margin-left:0; to make the two lines start at the same point.
This can be done with pure CSS. Create a solid box-shadow to the left and right of the highlight in the same color (and use margin to correct the spacing). For your case:
span.highlight {
background: #0058be;
color: #FFF;
box-shadow:5px 0 0 #0058be, -5px 0 0 #0058be;
padding: 2px 0;
margin:0 5px;
}
It took some tryouts, but here it is: the single- and multi-line highlighter with additional padding.
HTML:
<h3>Welcome to guubo.com, Gajus Kuizinas</h3>
<p><span>So far you have joined: </span><em>Networks guubo.com</em><ins></ins></p>
CSS:
h3 {
padding-left: 5px;
}
p {
background: #0058be;
position: relative;
padding: 0 5px;
line-height: 23px;
text-align: justify;
z-index: 0;
}
p span {
background: #fff;
padding: 2px 0 2px 5px;
position: relative;
left: -5px;
}
p em {
background-color: #0058be;
color: #fff;
padding: 2px 5px;
}
ins {
position: absolute;
width: 100%;
line-height: 23px;
height: 23px;
right: -5px;
bottom: 0;
background: #fff;
z-index: -1;
}
The trick is to style the whole paragraph with a blue background, and only put white background on top of that at the beginning and the end. Doing so assures blue background elsewhere...;)
Two main disadvantages:
The highlighted text has to start at the first line (but does not necessarily have to flow into a second),
The paragraph has to be aligned with justification.
Tested in Opera 11, Chrome 11, IE7, IE8, IE9, FF4 and Safari 5 with all DTD's.
See edit history for the previous less successful attempts.
You can achieve this using just box shadow, with no messy padding or margins.
The trick is to use box-shadow's spread option, and the padding on wrapped inline elements behaves as you expect.
.highlight {
background: black;
color: white;
box-shadow: 0 0 0 5px black;
}
display: block will achieve part of what you want, but of course it will make the span a block element, and so you won't get the wrapping behaviour seen in your example.
Your screenshot holds the clue to what you need to try and do: you need to impose a margin to the left and right on your "normal" paragraph text, and then have the span disregard this (and include its padding), to achieve an "overhang" of your blue highlight when compared to the rest of your text. You can't do that with straight CSS on your span, because it covers two lines and obviously "left" and "right" only refer to the span, and not the individual pieces of text contained therein.
Straight CSS isn't the answer here. You might want to take a look at this question, which uses a jQuery filter to grab the first word in an entity, etc.:
jQuery first word selector
Maybe you can use this technique.
http://samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/
The closest thing, if it really matters that much I'd say is to add display: inline-block;
Problem
I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.
Requrements
I need to style a h3 tag to have an
underline/border after the content.
This h3 will be used multiple times
on the page, so the conent length can
vary
The solution needs to be
cross-browser (IE 6/7/8, FF 3, &
Safari)
Sample Code
<div class="a">
<div class="b"><!-- etc --></div>
<div class="c">
<h3>Sample Text To Have Line Afterwards</h3>
<ul><!-- etc --></ul>
<p class="d"><!-- etc --></p>
</div>
</div>
Sample Output
Sample Text to Have Line Afterwards ______________________________________
Another Example __________________________________________________________
And Yet Another Example __________________________________________________
Notes
I think #sample:after { content: "__________"; } option wouldn't work since that would only be the correct length for one of the tags
I tried a background-image, but if it gave me problems if I gave it one with a large width
Using text-indent didn't see to give me the effect I was looking for
I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either
Any ideas would be much appreciated!
This will work if class 'c' is always the parent of the h3...
.c {
position: relative;
margin-top: 25px;
border-top: 1px solid #000;
padding: 0px;
}
h3 {
font-size:20px;
margin-top: 0px;
position: absolute;
top: -18px;
background: #fff;
}
It lets the container have the border, then uses absolute positioning to move the h3 over it, and the background color lets it blot out the portion of c's border that it's covering.
try attaching a background image to class c of a repeating underline, then add a background color to the h3 to match the background of the container. I believe that you would have to float the h3 left in order to get the width to collapse. does that make sense?
.c {
background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
margin: 0;
padding: 0 0 2px 0;
float: left;
font-size: 20px;
background: #ffffff;
}
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
http://besh.dwich.cz/tmp/h3.html
H3 {
border: 1px solid red;
border-width: 0 0 1px 0;
text-indent: -60px;
}
You need to know the width of the text, but works pretty well.
The only solution I've imagined so far is to make a PNG or GIF image, with 1px height and a very large width (depends on your project, could be like 1x2000px), and do something like this:
h3#main-title { background: url(line.png) no-repeat bottom XYZem; }
where the XYZ you'd set manually, for each title, in 'em' units. But I can't figure out a 100% dynamic solution for this one, without using JS or adding extra markup.
this worked for me
div.c
{
background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
}
div.c h3
{
height:20px;background-color:white;display:inline;
}
you make the div the width of your content
then you set the background of the h3 to the background of your page. this will then overlap the background imageof the full div. You might want to play with background positioning depending on your image
Can you pad content in the UL tags? If so, this might work:
h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }
check source code of: http://nonlinear.cc/lab/friends/elijahmanor.html
then again i have NO IDEA how to control the end of the line.
Assuming that you're working with dynamic content, the best I could suggest is to accept graceful degradation and use a mix of great_llama and Bohdan Ganicky
Imagine:
A long title that will wrap to two lines___________________
and leave you like this in great_llama's solution
and nothing appearing at all with Bohdan Ganicky's solution if ul isn't immediate preceded by ul.
Solution:
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
We care about IE6, but accept that this is an aesthetic touch and IE6 users will not suffer. If you can't get the designer to accept this AND you can't alter the HTML, then do something else (before you find another job ;))
Here's a better answer:
.c {
background: url('line.png') repeat-x 0 20px;
}
H3 {
background-color: white;
display: inline;
position: relative;
top: 1px;
}
Use a small, 1px height, couple px wide image as your underline and occlude it with a background color on your H3.
h3:after {
content: '___________';
}