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.
Related
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/
I am learning web-designing. Trying to replicate a web for practice. Everything seem to be OK.However the space between the nav bar and the first div takes 20px margin space. I want the margin space to be 0px. The css file hold margin as 0px but there is always 20px when I inspect the page. how do i solve this? Thanks in Advance.
You can overwrite the css class that has the 20px margin by using
.className {
margin: 0px !importart;
}
As you suggested i tried the above soln.It didnt work.
I am sending an image and the code.. hope it helps.
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
the image is for the inspect of the nar bar...where the margin is not accepting 0px.
I am attempting to create a style that applies a background color to header text. This is simple enough by including an inline element within my header, but problems arise when there is a line wrap because the left padding is only applied to the first line of text. To solve this issue I am applying a left-border to my header tags, which properly maintains left padding during line wraps. However, I'm having serious issues matching the left-border height with the inline element background across browsers. I get it matched up in Chrome/Safari, and it's off in Firefox, etc. I've created a fiddle to demonstrate:
http://jsfiddle.net/spidercoder/4KJn2/1/
My approach is:
HTML:
<h1><span>Lorem ipsum dolor sit amet consectetur adipiscing elit.</span></h1>
CSS:
h1{
color: white;
text-transform: uppercase;
font-family: sans-serif;
font-size: 34px;
line-height: 44px;
border-left: 10px solid black;
padding: 8px 0 7px 0;} // This tweaks the height of the left-border
h1 span{
white-space: pre-wrap;
background: black;
padding: 10px 10px 10px 0;}
I've attempted several different approaches, but unfortunately nothing is working. This seems like a fairly simple effect to pull off, but I have been unable to properly match the height of the border with the span background across browsers, which ruins the effect.
Does anyone have any ideas on how to pull this off so it works across browsers? An approach that doesn't require the left-border would probably be best, so that we don't have to match element heights.
Thanks for any suggestions!
Add to the span:
box-shadow: 10px 0 0 black, -10px 0 0 black;
Or Just:
box-shadow: -10px 0 0 black;
Used this myself after finding it here:
http://css-tricks.com/multi-line-padded-text/
There are many other methods by which this can be done listed there.
The problem is that the span is overflowing the h1 by a pixel or so. One easy way around this is to add:
overflow: hidden;
to the h1 style.
Demo on jsFiddle.
HTML
<div class="padded-multiline">
<h1><span>Lorem ipsum dolor sit amet consectetur adipiscing elit.</span></h1>
</div>
CSS
.padded-multiline {
line-height: 1.3;
padding: 2px 0;
border-left: 20px solid #000;
width: 400px;
margin: 20px auto;
}
.padded-multiline h1 {
background-color: #000;
padding: 4px 0 5px;
color: #fff;
display: inline;
margin: 0;
}
.padded-multiline h1 span {
position: relative;
left: -10px;
}
Use margin-left instead of a border-left.
h1 {
font-size: 3em;
line-height: 1em;
margin-left: 15px;
}
h1 span {
background: rgb(241,241,241);
box-shadow: 15px 0 0 rgb(241,241,241), -15px 0 0 rgb(241,241,241);
}
i made a demo http://jsfiddle.net/pa8J8/
<div style="float:right;">
Upgrade now
Buy more credits
</div>
The float:right|left (whether inline, or in my stylesheet) seems to make the links lose both their vertical padding and their bottom border. If I remove it, I have no problem.
Here's the CSS for the links:
.button2 {
color: #fff;
font-size: 18px;
text-shadow: 0 -1px 0 #064687;
border: 0;
border-bottom: 2px #0B5BAC solid;
border-radius: 8px;
background: #1E88F2;
background: -moz-linear-gradient(top, #6BB0F7, #2089F2);
padding: 9px;
cursor: pointer;
box-shadow: 0 2px 2px #999;
text-decoration: none;
width: 270px;
}
Try the old 'hasLayout' fix by adding zoom: 1;
.button2 {
zoom: 1;
}
http://www.satzansatz.de/cssd/onhavinglayout.html
I don't like doing hacks like that but it seems to achieve what you want.
That is because you are trying to assign styles to an inline element in which they typically don't apply. Such as vertical padding, widths, and borders. Try giving it display:inline-block or display:block; float:left;, and in the case of IE7 if you use display:inline-block, look for the display:inline-block fix for IE 7 and you should be all set. jsFiddle: http://fiddle.jshell.net/wUD9q/5/show/light/
FYI - Float has nothing to do with it at all. Removing the float on the outer div doesn't fix it either. jsFiddle for it still broken: http://fiddle.jshell.net/wUD9q/1/show/light/
IE7 is used by less than 1% of the world browsing the internet. Just move on!
SOURCE: http://theie7countdown.com/
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;