I'm trying to underline a h1-title, but for some reason it always takes the whole length of the parent div. The only way I was able to do so, was by adding the position: absolute-property in the css...
This is the design:
And this is what I get:
Point is to get the blue line only as wide as the h1 and a gray border line under the parent div.
HTML:
<div class="title">
<h1>Contacteer ons</h1>
</div>
CSS:
h1 {
border-bottom: 8px solid #57c4d0;
position: absolute; /* As I've said, adding this allowed me to do so, but the result was far from ideal! */
}
.title {
border-bottom: 1px solid #dedede;
}
I'm planning on using the HTML across my whole website (each h1 will be different in length, adding a fixed width on each title isn't an option), so I'm looking for a robust solution. Anyone with advice?
You can change h1 to display: inline-block;
See a live example at (added margin-bottom to .title for clarity):
http://jsfiddle.net/P4BGC/
See this fiddle. H1 is a a block element, so it grows to fill its parent. You can set display: inline, but I also suggest to put it in its own div (or any other element with display: block) so you ensure that no content goes along side.
<div><h1>Hello, world</h1></div>
Lorem ipsum
the css
h1 {
border-bottom: 3px solid red;
display: inline;
}
You could also use CSS style text-decoration.
html:
<div><h1>Hello, world</h1></div>
css:
h1 {
text-decoration: underline;
}
Related
The inline element display perfectly if I remove the border or I change the display to block or inline-block. I don't understand why I can't see the border.
html:
<div class="content">test test test</div>
css:
body{
padding: 0;
margin: 0;
}
.content {
display: inline;
background: palegreen;
border: 5px solid red;
}
http://jsfiddle.net/Kodam/h1c3r5u3/
Let me quote this answer:
display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
But if top border would be taken into account, it would make your div vertically misaligned with the other elements on the same line, even though in your case there is only a single element on the line. However, top border is ignored, therefore it is "sticking out" of the body and you cannot see it.
As a "proof", try to modify your HTML code in the provided fiddle as:
<div style="line-height: 50px"><div class="content">test test test</div></div>
Then you'll be able to see the top border, as the height of parent element has enough space for it not to stick out.
Why not use display: inline-block ?
.content {
display: inline-block;
background: palegreen;
border: 5px solid red;
}
I'm trying to make a header's background color look like a rectangular speech bubble by adding a text element ◥. Below you can see the spanned text for the background shape and the style for ◥. But this creates a blank space between the bottom of the border and the ◥, and I would like the two to line up in order to look like a speech bubble.
Image of fail in action.
http://i.imgur.com/1T09F.png
{block:Link}
<h1><span class="Headers"><a href="{URL}" {Target}>{Name} ☞</a></span>
<div class="triangle">◥</div>
</h1>
{block:Description}{Description}{/block:Description}
{/block:Link}
.triangle{
margin-left: 10px;
font-size: 35px;
color: #123033;
}
span.Headers{
display: block;
background-color: #123033;
padding: 8px
}
I tried the trick with adding a parent group in which the font size is 0, and that didn't work. Nor did setting the margin on the header to 0. Putting the ◥ div on the same line hasn't done anything either. I spent about an hour looking through other questions to see what I could do, and I couldn't find a solution, but I am nub so forgive me if I missed something obvious.
It is unreliable to use text to create the effect. Different devices will render it differently, which is not what you want.
In your case, it would be best to use an image with the same colour, placing it in a <div/> below the heading, ensuring that they touch each other. Then, add some padding on the left, as you did with the .triangle style.
I have created an image for you to use: Grab it here
All in all, your markup would look like this:
HTML:
{block:Link}
<div class="header">
<h1><a href="{URL}" {Target}>{Name} ☞</a></h1>
<div class="triangle"></div>
</div>
{block:Description}{Description}{/block:Description}
{/block:Link}
CSS:
div.header > h1 {
background-color: #123033;
padding: 8px
}
div.header > div.triangle {
background: url('Arrow.png') top left no-repeat;
height: 50px;
padding-left: 10px
}
Do let me know if this works for you.
If you're able to use generated content (which, I suppose, depends on your site's users), then I'd suggest (with the slightly amended HTML for demo purposes):
<h1><span class="Headers">a name</span></h1>
The following CSS:
h1 {
display: block;
position: relative;
background-color: #ffa;
padding: 0.5em;
}
h1::after {
content: '';
border: 1em solid #ffa;
position: absolute;
top: 100%;
left: 2em;
border-bottom-color: transparent;
border-left-color: transparent;
}
JS Fiddle demo.
In terms of compatibility caniuse suggests that generated content is supported in IE from version 8 onwards.
References:
CSS generated content compatibility, from caniuse.com.
I have some text I want to be positioned inside a holder as follows:
[...........]
[.the]......]
[.[title]...]
[...........]
The holder needs to have a black background and I'd like the text to have a white background and black text. I am using the following structure:
<div class="holder">
<div class="title">
<span>The</span>
<span>Title</span>
</div>
</div>
I am not sure if it's correct or not, but I am using the <span>s over <p>s becuase the p was going full width of the holder whereas the width of the span sizes itself to the text itself.
I want each span on a new line and this is where it is breaking atm. Currently the spans just sit on the same line together. I tried adding a <br> after the first span but that doesn't fix it either, this time the second span is slightly below but positioned to the right.
The css I am using:
.holder {
width: 200px;
height: 300px;
}
.title span {
background: #fff;
color: #000;
float: left;
display: block;
padding: 2px;
}
You shouldn't use float for that.
Moreover, span was created to span text in the middle of the line.
Is that what you were trying to do: http://jsfiddle.net/Rhjtv/ ?
Try adding clear:both; to the style declarations for your spans.
If this does not solve your problem, than please build an example on http://www.jsfiddle.net so wie can better understand what's the problem.
If you want your line siting one after another you should use divs
just try removing float:left; from
.title span {
background: #fff;
color: #000;
float: left;
display: block;
padding: 2px;
}
separate the lines by using the css word-break
click here view the result
http://gucoders.com/css3/css_wordbreak.php
you probably see this question a lot. However, I've been through threads and I can't seem to find a solution to my situation. It's probably something very minute that I'm missing, or perhaps I'm just barking up the wrong tree all together.
Basically what I'm trying to do is take an anchor with a {display:block;} with a set height and width and have its text be vertically and horizontally centered.
Right now this is my css
.logo
{
width:140px;
height:75px;
border-right:1px dotted black;
border-bottom:1px dotted black;
float:left;
text-align:center;
font-size:15px;
font-weight:bold;
color:#c60606;
}
.logo a
{
display:block;
width:140px;
height:75px;
background-color:#fff;
font-size:15px;
font-weight:bold;
color:#c60606;
}
/*the reason for the double declaration of text information is because
some of the logo divs do not have anchors in them, and it's for uniformity
purposes.
*/
.logo a div
{
margin-top:10px;
}
and then the html would be
<div class="logo"><div>my link</div></div>
Now the reason i stuck a div inside of the anchor is because I thought it would be a good way to separate the text from the actual block, but with that margin setting it moves the anchor down instead of just the text. The vertical-align attribute does basically nothing, and I'm at a loss in terms of what to do. Any suggestions or restructuring ideas would be great. Thank you.
a sample can be found at http://www.dsi-usa.com/test/clientele.php feel free to browse the site it's still a work in progress a lot has to be organized and re-coded. Anyhow, that sample is exactly what I want, just need the text to be vertically aligned as well.
If you set your line-height of the containing box (your anchor -- just ditch the inner div, you don't need it) equal to its height, then a single line of text will be vertically centered. If you require line-wrapping, it gets more complicated.
Here's a fiddle with just one anchor element to demonstrate the simpler scenario: http://jsfiddle.net/vdkAb/1/
UPDATE
...and if you don't need to worry about IE6/7 support (lucky you!), then you can use display:table-cell, and it works effortlessly -- without specifying line-height -- even with multiple lines, like this: http://jsfiddle.net/PH5Yw/
You can't have a <div> inside an <a>, it's invalid HTML. Use a <span> set to display: block; instead.
Update:
As of HTML5, you can now have a div inside an anchor (or any block level element.)
For this to be legal though, you must use the HTML5 doctype:
<!DOCTYPE html>
This usually works for me
$(function(){
$("button").click(function(){
$(".navbar").toggleClass("large");
});
});
*{
box-sizing: border-box;
}
.navbar{
display: flex;
color: white;
background: black;
height: 30px;
margin-bottom: 10px;
transition: all 0.25s ease;
}
.navbar.large{
height: 120px;
}
a{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 20px;
padding: 0 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<a>TITLE</a>
<a>Contact</a>
<a>About Us</a>
</div>
<button>Change Nav Size</button>
Just thought I should put this out there :)
Works only when the link container is display: flex
I have the following HTML:
<div class="selfClear" style="float: left; border: 1px solid black;">
...floated stuff in here...
</div>
<span style="margin-top: 10px; border: 1px solid purple;">hello world</span>
I'd like there to be a 10px gap between the div and span, per the margin-top. But, since the div above is floated, it won't render that way. The fix to make sure something clear's the DIV. To do that via pure CSS, it appears one should use the '::after' method of inserting content that is then set to clear:
.selfClear::after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.selfClear {
display: inline-block;
}
However, this doesn't quite do what I think it should be doing. If I don't include the height/visibility styles so that I can actually see the period as it is inserted, I see that it's actually rendering inside the div (the black border encloses it), rather than after the div (so it's between the div and span). Am I misunderstanding how this should be working?
EDIT:
Here's a simpler example:
CSS:
#theDiv {
border: 1px solid green;
}
#theDiv::after {
content: ".";
}
#theOtherDiv {
border: 1px solid orange;
}
HTML:
<div id="theDiv">
Hello
</div>
<div id="theOtherDiv">
World
</div>
That ends up placing a period after 'Hello' rather than after the div.
It appears that ::after and ::before are actually appended to the CONTENTS of the element, not the element itself. Is that correct?
Yes, it appends to the content of the selected element. You could try wrapping the div then appending after the wrapper div, but that defeats the whole purpose of using :after in the first place.
You could also try setting the enclosing div to 'overflow: auto'. That works everywhere.
I would suggest using clearfix - it's a lot simpler, you just set up a surronding with a class of clearfix.
See this example.