I would like to create a header that spans over 1 or two lines vertically. I would like to align these headers via the bottom line. I have created a jsfiddle page to demonstrate this:
http://jsfiddle.net/S35Db/
HTML:
<h3>ABC</h3><h3>DEF JEH</h3>
CSS:
h3 {
float:left;
border: 1px solid grey;
padding:10px;
margin: 5px;
max-width:3em;
height:3em;
}
What I would like to do is align the ABC to the JEH. How do I go about doing this? Do I need to create container around the header?
Thanks
CSS :
h3 {
float:left;
border: 1px solid grey;
padding:10px;
margin: 5px;
max-width:3em;
height:3em;
}
.bottom {
line-height:65px;
}
HTML :
<h3 class="bottom">ABC</h3>
<h3>DEF JEH</h3>
Try this I think ie. what you need.
Yes you need to keep one container around it. Also remove float element and apply table-cell property like below.
div{display:table;height:3em;}
h3 {
border: 1px solid grey;
padding:10px;
margin: 5px;
max-width:3em;
border: 1px solid grey;
height: 100%;
vertical-align: bottom;
display:table-cell;
}
DEMO
you can provide line-height to your first header.
Fiddle
I have a dropdown that will show some content.
<ul class="menus" style="">
<li>hey</li>
</ul>
And this is the css:
.menus {
width: 607px;
background-color: white;
border-bottom: solid 1px #9f9f9f;
border-left: solid 1px #9f9f9f;
border-right: solid 1px #9f9f9f;
bottom: 20px;
margin: 0;
position:relative;
}
.menus li {
list-style: none;
display: block;
padding: 15px;
border-bottom: solid 1px #d6d6d6;
}
.menus li:hover {
background-color: #71bfdb;
color: white;
border-bottom: solid 1px #3fb7d3;
border-top: solid 1px #3fb7d3;
text-decoration: none;
}
.menus li a:hover {
text-decoration: none;
}
Whenever the dropdown opens, All of the content moving to the bottom, depending on how long the list is.
Question
How can I prevent this?
If I put position absolute, the whole dropdown will go crazy, like move positions, not like I wanted.
Use position: absolute to remove it from the flow of the page (relative means it is still in the page flow, which is what causes it to push content after it down).
You can change where an absolutely positioned element shows up by using the top, bottom, left and right css properties (i.e. top: 0px; left: 10px;). These pixel values are relative to the first parent element with position: relative, so if you relatively position the parent element it should be simple to get it displayed in the appropriate place on the page.
That should address your concern of absolute positioning causing it to 'go crazy' as you put it!
How do I cut the shared border line between these two divs? I want the top small div to have border on three sides expect bottom and the larder div below that to have only top border but leaving the shared border. So it will look like a line running across both divs upper borders.
I tried overlaying top div on the bottom. But Not getting what I want.
.ihead {
background-color: #EEE;
width: 15em;
height: 3em;
text-align:center center;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:none;
}
.ibody {
background-color: #EEE;
width: 60em;
height:20em;
margin-top:3em;
border-top:1px solid black;
z-index: 10;
}
<div class="ihead"><h>Hello !</h></div>
<div class="ibody">......</div>
From -
To -
The normal way you'd achieve this effect is to have the box on top move down over the top of it's border. In your example, you can achieve this by adding position: relative; bottom: -1px to your .ihead class and removing the margin-top: 3em from your .ibody class.
See the jsFiddle.
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}
<div class="bordered"><h1>Test1</h1></div>
<div class="bordered"><h1>Test2</h1></div>
<div class="bordered"><h1>Test3</h1></div>
This question was the first that popped up for me so i felt it was best if i answered it properly unlike the accepted answer above.
Using css:
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}
How can I make border-left the same height as border-right? In other words, how to change the order of the borders? Border-left is taller than border-right. Which results in a 1px "gap".
.tab-header > ul > li
{
display: inline-block;
background-color: #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #cecece;
border-right: 1px solid #cecece;
border-top: 1px solid #cecece;
padding: 8px;
font-size: 10px;
text-transform: uppercase;
}
What is happening, is that the css tries to make a nice diagonal colour change in the border. If you change all the 1px to 10px, you see the problem. (Image, see: http://jsfiddle.net/DaTCy/1/)
If you are using 1px widths of the borders, the bottom and the right border will always overlap in the bottom-right pixel.
EDIT: As a solution, you can try giving the bottom border a width of 0px, and solving the height problem in the container you put the button in.
The simplest solution is to explicitly use:
border-bottom-width: 0;
JS Fiddle demo.
Use border-left/-top/-right and border-bottom for different [nested] elements.
I have an unordered list full or anchors. I have a CSS :Hover event that adds borders to it but all the anchors to the left slightly adjust when i hover because it is adding 1px to the width and auto adjusting. how do i make sure the positioning is absolute?
div a:visited, #homeheader a{
text-decoration:none;
color:black;
margin-right:5px;
}
div a:hover{
background-color:#D0DDF2;
border-radius:5px;
border:1px solid #102447;
}
div li{
padding:0;
margin:0px 10px;
display:inline;
font-size:1em;
}
<div>
<ul>
<li>this</li>
<li>that</li>
<li>this again</li>
<li>that again</li>
</ul>
</div>
I made a JS Fiddle demo here.
You can add a transparent border to the non-hover state to avoid the "jumpiness" when the border appears:
http://jsfiddle.net/TEUhM/3/
#homeheader a:visited, #homeheader a{
border:1px solid transparent;
}
You can also use outline, which won't affect the width i.e. so no "jump" effect. However,support for a rounded outline may be limited.
You could use a box shadow, rather than a border for this sort of functionality.
This works because your shadow doesn't 'take size in the DOM', and so won't affect the positioning, unlike that of a border.
Try using a declaration like
box-shadow:0 0 1px 1px #102447;
instead of your
border:1px solid #102447;
on your hover state.
Below is a quick demo of this in action:
DEMO
#homeheader a:visited,
#homeheader a {
text-decoration: none;
color: black;
margin-right: 5px;
}
#homeheader a:hover {
background-color: #D0DDF2;
border-radius: 5px;
box-shadow: 0 0 1px #102447;
}
#homeheader li {
padding: 0;
margin: 0px 10px;
display: inline;
font-size: 1em;
}
<div id="homecontainer">
<div id="homeheader">
<ul>
<li>this
</li>
<li>that
</li>
<li>this again
</li>
<li>that again
</li>
</ul>
</div>
</div>
Add a margin of 1px and remove that margin on hover, so it is replaced by the border.
http://jsfiddle.net/TEUhM/4/
After taking a long time pressure i found a cool solution.
Hope that it will help others.
on the add the folloing code :
HTML
<div class="border-test">
<h2> title </h2>
<p> Technology founders churn rate niche market </p>
</div>
CSS
.border-test {
outline: 1px solid red;
border: 5px solid transparent;
}
.border-test:hover {
outline: 0px solid transparent;
border: 5px solid red;
}
Check live : Live Demo
Hope it will help.
No one has mentioned it here, but the best and simplest solution to this in my opinion is to use "box shadow" instead of borders. The magic is on the "inset" value which allows it be like a boarder.
box-shadow: inset 0 -3px 0 0 red;
You can offset the X or Y to change top/bottom and use -negative value for opposite sides.
.button {
width: 200px;
height: 50px;
padding: auto;
background-color: grey;
text-align: center;
}
.button:hover {
box-shadow: inset 0 -3px 0 0 red;
background-color: lightgrey;
}
<div class="button"> Button </div>
You can use box-shadow which does not change your box-size, unlike border.
Here is a little tutorial.
Just add the following code into your css file
#homeheader a {
border:1px solid transparent;
}
The CSS "box-sizing" attribute fixed this problem for me. If you give your element
.class-name {
box-sizing: border-box;
}
Then the width of the border is added to the inside of the box when the browser calculates its width. This way when you turn the border style on and off, the size of the element doesn't change (which is what causes the jittering you observed).
This is a new technology, but the support for border-box is pretty consistent. Here is a demo!
The easiest method I found was using 'outline' instead of 'border'.
#home:hover{
outline:1px solid white;
}
instead of
#home:hover{
border:1px solid white;
}
Works the best!
https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm
Add a negative margin on hover to compensate:
#homeheader a:hover{
border: 1px solid #102447;
margin: -1px;
}
updated fiddle
In the fiddle the margin: -1px; is a little more complex because there was a margin-right getting overridden, but it's still just a matter of subtracting the newly-occupied space.
I too was facing the same problem. The fix mentioned by Wesley Murch works! i.e. adding a transparent border around the element to be hovered.
I had a ul on which :hover was added to every li. Every time, I hovered on each list item, the elements contained inside li too moved.
Here is the relevant code:
html
<ul>
<li class="connectionsListItem" id="connectionsListItem-0">
<div class="listItemContentDiv" id="listItemContentDiv-0">
<span class="connectionIconSpan"></span>
<div class="connectListAnchorDiv">
Test1
</div>
</div>
</li>
</ul>
css
.listItemContentDiv
{
display: inline-block;
padding: 8px;
right: 0;
text-align: left;
text-decoration: none;
text-indent: 0;
}
.connectionIconSpan
{
background-image: url("../images/connection4.png");
background-position: 100% 50%;
background-repeat: no-repeat;
cursor: pointer;
padding-right: 0;
background-color: transparent;
border: medium none;
clear: both;
float: left;
height: 32px;
width: 32px;
}
.connectListAnchorDiv
{
float: right;
margin-top: 4px;
}
The hover defn on each list item:
.connectionsListItem:hover
{
background-color: #F0F0F0;
background-image: linear-gradient(#E7E7E7, #E7E7E7 38%, #D7D7D7);
box-shadow: none;
text-shadow: none;
border-radius: 10px 10px 10px 10px;
border-color: #AAAAAA;
border-style: solid;
}
The above code used to make the containing elements shift, whenever I hovered over connectionsListItem. The fix was this added to the css as:
.connectionsListItem
{
border:1px solid transparent;
}
Use :before to create the border, that way it won't modify the actual content and gives you more freedom. Check it out here:
http://codepen.io/jorgenrique/pen/JGqOMb
<div class='border'>Border</div>
<div class='before'>Before</div>
div{
width:300px;
height:100px;
text-align:center;
margin:1rem;
position:relative;
display:flex;
justify-content:center;
align-items: center;
background-color:#eee;
}
.border{
border-left:10px solid deepPink;
}
.before{
&:before{
content:"";
position:absolute;
background-color:deepPink;
width:10px;
height:100%;
left:0;
top:0;
}
&:hover{
background-color:#ccc;
&:before{
width:0px;
transition:0.2s;
}
}
}
Be careful if you also use padding.
In my case, I had a 5px padding inside the hover defn. It should be moved inside the actual class of the element you want to hover over.
Code snippet