The issue I'm facing today is with the width of a gadget. I would like the border-bottom line of #customheader to extend to the full width of any given screen. Right now however the border-bottom is only the width of the blog. How would I go about lengthening the border-bottom without compromising on the other elements of the gadget?
The URL to my blog is as follows: http://www.blankesque.com and the coding to the gadget is stated below:
<style>
#customheader a {
font-size: 60px;
font-family: lato light, 'cantarell';
color: #737373;
text-transform: uppercase;
font-weight: normal!important;
letter-spacing: 0.07em;
}
#customheader {
margin: 7% 0 2% 0;
padding: 0 0 3.5% 0;
border-bottom: 1px solid #cccccc;
}
#customheader a:hover {
color: #000000!important;
}
</style>
<center>
<div id='customheader'>
<a href='http://www.blankesque.com'>Blankesque</a>
</div>
</center>
You need to move it outside of .content-outer, which is set to 1080px.
If possible, move the entire <header>...</header> outside of .content-outer
you could add an invisible div with position: absolute where you need the border, and set the width to 100%. Then you can either set the border on that or use the div as a border.
example JSFiddle
If you want a line that goes below your #customerheader and extends to the full width of the screen then its best to introduce an independent <hr/> which sits below your <center> element and has the following CSS properties:
hr {
width: 100%;
border-bottom: 1px solid #cccccc;
}
Keep in mind, you will have to remove the border-bottom: 1px solid #cccccc; from your #customerheader, since the horizontal line element is replacing this effect.
In retrospect, the above is not even necessary if you fix the layout issues in your site, which are causing your elements to seem to be out of alignment. You need to look into what is making them skew to the left, but with the code you have provided I cannot easily identify the root of the issue.
Let me know if you have any questions
I recently realised that padding property adds spacing between the content and the border of this content.
I was testing this property when I discovered an instance where padding doesn't add spacing.
I have a paragraph
<p>Some text</p>
and some styling
p {
background: red;
color: white;
border: dashed 2px blue;
margin-left: 44px
}
Result (JSFiddle)
Then I add padding: 49px to CSS. Logically, I shoud get something like it
but finally I obtain it (JSFiddle)
As we can see, the text moves, but the red spacing isn't added. Why?
PS : maybe I express myself badly, I'm sorry about it
You have a margin-left. Difference between Margins and Paddings.
Remove it:
CSS
p {
background: red;
color: white;
border: dashed 2px blue;
padding-left: 49px
}
In this fiddle
No more space :)
The red is the background-color which is also by default painted into the padding area, and not the margin. The behavior you are seeing is correct.
If you don't want the background painted into the padding area, you can set:
background-clip: content-box;
However I think that only works in IE9 and up, so if you need to support IE8, then you can't use that.
The result you get is correct.
Margin - adds space outside your box
Border - adds a border around your box
Padding - adds space between content and border
Look up "css box model" on google for more.
K
I have not understand what you are trying to do but i guess you want this
<html>
<head>
<style>
p
{
background: red;
color: white;
border: dashed 2px blue;
/* display: inline-block; */
padding-left: 49px
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
Trying to set wider the underline tag in text. Is it possible to widen the underline using the css? I tried to use the css width but nothings happen.
jsbin example
<u>Paragraph</u>
u {
width: 40px;
}
Use a <span> instead of <u>. Add a border-bottom and some padding right and that'll be that.
HTML
<span>Some text</span>
CSS
span {
border-bottom: 1px solid black;
padding-right: 40px;
}
Demo
I have a layout issue where the internal div "data" seems to be popping out of its containing div and showing outside. I've placed coloured borders around the bottom picture and the problem I'm having is the yellow text should be in the white box, but it's not. Anyone know what the issue is here I'm currently stumped. I've tried using clear:both but it didn't seem to work.
.whiteContainer
{
border: 1px dotted red;
margin:3%;
background: white;
border-radius: 15px;
}
#display
{
border: 1px dotted green;
margin:3%;
}
.header
{
border: 1px dotted blue;
float:left;
}
.data
{
border: 1px dotted yellow;
float:right;
}
HTML portion:
<div class="whiteContainer">
<div id="display">
<div class='header'>Program Name: </div>
<br />
<div class='data'>
Strategic Project Grants
</div>
</div>
</div>
EDIT:
removing the <br/> gives me the results of http://jsfiddle.net/SgEMc/ which still pop the content of the blue and yellow elements out of the green one, which is not what I want. I can't specify an exact height for the white element because the amount of program names displayed in the white space will vary. I will also need the break statement later on as I would need something along where Header is displayed followed by a <br/> and then centered text. All this needs to be inside the white container.
Set the parent container of the data (id=display) to "overflow:hidden" or "overflow:auto". It will force the parent to conform to the shape of the floats. There are actually quite a few techniques to achieve your goal. See CSS Tricks - All About Floats, there is a section about clearing floats.
The br is the reason for the missallignment, but you need to clear the float. put a clearfix style on the white container
http://www.webtoolkit.info/css-clearfix.html
or add a clearing element after your floating elements if you don't mind the extra markup.
<br style="clear:both" />
after your data div.
then if either wraps, the container will stretch to suit the content.
Get rid of the <br /> tag in your code.
You may also want to slightly alter your CSS. This is what I used in the following jsFiddle:
.whiteContainer {
border: 1px dotted red;
margin:3%;
background: white;
border-radius: 15px;
height:50px;
}
#display {
overflow:auto;
border: 1px dotted green;
margin:4px;
}
.header {
border: 1px dotted blue;
float:left;
}
.data {
border: 1px dotted yellow;
float:right;
}
jsFiddle example.
Remove the <br>
http://jsfiddle.net/SgEMc/
remove the "br" betwen your floated elements and add overflow: hidden; to #display.
see this:
http://jsfiddle.net/HOLYCOWBATMAN/updZW/
How do you make a vertical line using HTML?
Put a <div> around the markup where you want the line to appear to next, and use CSS to style it:
.verticalLine {
border-left: thick solid #ff0000;
}
<div class="verticalLine">
some other content
</div>
You can use the horizontal rule tag to create vertical lines.
<hr width="1" size="500" style="0 auto" />
By using minimal width and large size, horizontal rule becomes a vertical one.
You can use an empty <div> that is styled exactly like you want the line to appear:
HTML:
<div class="vertical-line"></div>
With exact height (overriding style in-line):
div.vertical-line{
width: 1px; /* Line width */
background-color: black; /* Line color */
height: 100%; /* Override in-line if you want specific height. */
float: left; /* Causes the line to float to left of content.
You can instead use position:absolute or display:inline-block
if this fits better with your design */
}
<div class="vertical-line" style="height: 45px;"></div>
Style the border if you want 3D look:
div.vertical-line{
width: 0px; /* Use only border style */
height: 100%;
float: left;
border: 1px inset; /* This is default border style for <hr> tag */
}
<div class="vertical-line" style="height: 45px;"></div>
You can of course also experiment with advanced combinations:
div.vertical-line{
width: 1px;
background-color: silver;
height: 100%;
float: left;
border: 2px ridge silver ;
border-radius: 2px;
}
<div class="vertical-line" style="height: 45px;"></div>
You can also make a vertical line using HTML horizontal line <hr />
html, body{height: 100%;}
hr.vertical {
width: 0px;
height: 100%;
/* or height in PX */
}
<hr class="vertical" />
There is no vertical equivalent to the <hr> element. However, one approach you may want to try is to use a simple border to the left or right of whatever you are separating:
#your_col {
border-left: 1px solid black;
}
<div id="your_col">
Your content here
</div>
HTML5 custom elements (or pure CSS)
1. javascript
Register your element.
var vr = document.registerElement('v-r'); // vertical rule please, yes!
*The - is mandatory in all custom elements.
2. css
v-r {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}
*You might need to fiddle a bit with display:inline-block|inline because inline won't expand to containing element's height. Use the margin to center the line within a container.
3. instantiate
js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>
*Unfortunately you can't create custom self-closing tags.
usage
<h1>THIS<v-r></v-r>WORKS</h1>
example: http://html5.qry.me/vertical-rule
Don't want to mess with javascript?
Simply apply this CSS class to your designated element.
css
.vr {
height: 100%;
width: 1px;
border-left: 1px solid gray;
/*display: inline-block;*/
/*margin: 0 auto;*/
}
*See notes above.
One other option is to use a 1-pixel image, and set the height - this option would allow you to float it to where you need to be.
Not the most elegant solution though.
You can draw a vertical line by simply using height / width with any html element.
#verticle-line {
width: 1px;
min-height: 400px;
background: red;
}
<div id="verticle-line"></div>
There is a <hr> tag for horizontal line. It can be used with CSS to make horizontal line also:
.divider{
margin-left: 5px;
margin-right: 5px;
height: 100px;
width: 1px;
background-color: red;
}
<hr class="divider">
The width property determines the thickness of the line. The height property determines the length of the line. The background-color property determines the color of the line.
There isn't any tag to create a vertical line in HTML.
Method: You load a line image. Then you set its style like "height: 100px ; width: 2px"
Method: You can use <td> tags <td style="border-left: 1px solid red; padding: 5px;"> X </td>
To create a vertical line centered inside a div I think you can use this code.
The 'container' may well be 100% width, I guess.
div.container {
width: 400px;
}
div.vertical-line {
border-left: 1px solid #808080;
height: 350px;
margin-left: auto;
margin-right: auto;
width: 1px;
}
<div class="container">
<div class="vertical-line"> </div>
</div>
Rotate a <hr> 90 degrees:
<hr style="width:100px; transform:rotate(90deg);">
You can use hr (horizontal line) tag and than rotate it 90 degree with css below
hr {
transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
http://jsfiddle.net/haykaghabekyan/0c969bm6/1/
One more approach is possible : Using SVG.
eg :
<svg height="210" width="500">
<line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
Sorry, your browser does not support inline SVG.
</svg>
Pros :
You can have line of any length and orientation.
You can specify the width, color easily
Cons :
SVG are now supported on most modern browsers. But some old browsers (like IE 8 and older) don't support it.
I used a combination of the "hr" code suggested, and here's what my code looks like:
<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>
I simply changed the value of the "left" pixel value to position it. (I used the vertical line to line-up content on my webpage, and then I removed it.)
Vertical line right to the div
<div style="width:50%">
<div style="border-right:1px solid;">
<ul>
<li>
Empty div didn't shows line
</li>
<li>
Vertical line length depends on the content in the div
</li>
<li>
Here I am using inline style. You can replace it by external style or internal style.
</li>
</ul>
</div>
</div>
Vertical line left to the div
<div style="width:50%">
<div style="border-left:1px solid;">
<ul>
<li>
Empty div didn't shows line
</li>
<li>
Vertical line length depends on the content in the div
</li>
<li>
Here I am using inline style. You can replace it by external style or internal style.
</li>
</ul>
</div>
</div>
Why not use |, which is the html special character for |
If your goal is to put vertical lines in a container to separate side-by-side child elements (column elements), you could consider styling the container like this:
.container > *:not(:first-child) {
border-left: solid gray 2px;
}
This adds a left border to all child elements starting from the 2nd child. In other words, you get vertical borders between adjacent children.
> is a child selector. It matches any child of the element(s) specified on the left.
* is a universal selector. It matches an element of any type.
:not(:first-child) means it's not the first child of its parent.
Browser support: > * :first-child and :not()
I think this is better than a simple .child-except-first {border-left: ...} rule, because it makes more sense to have the vertical lines come from the container's rules, not the different child elements' rules.
Whether this is better than using a makeshift vertical rule element (by styling a horizontal rule, etc.) will depend on your use case, but this is an alternative at least.
To add a vertical line you need to style an hr.
Now when you make a vertical line it will appear in the middle of the page:
<hr style="width:0.5px;height:500px;"/>
Now to put it where you want you can use this code:
<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>
This will position it to the left, you can inverse it to position it to the right.
In the Previous element after which you want to apply the vertical row , You can set CSS ...
border-right-width: thin;
border-right-color: black;
border-right-style: solid;
Simply use either of the UTF-8 Miscellaneous Symbols
|
|
That's all you need and its compatible with all browsers.
Thanks me later.
For an inline style I used this code:
<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />
and that positioned it directly in the center.
I needed an inline vertical line, so I tricked a button into becoming a line.
<button type="button" class="v_line">l</button>
.v_line {
width: 0px;
padding: .5em .5px;
background-color: black;
margin: 0px; 4px;
}
I think it is a simple way not do to anything more You can change border left or right according to your need
.vertical-line{
border-left:1px solid #000
}
<span class="vertical-line"></span
You can also use the HTML symbol | which renders as '|'
To make the vertical line to center in the middle use:
position: absolute;
left: 50%;