Thursday, November 15, 2018

Centering a div between a div floating left and a div floating right – Responsively

Here is what I ended up using for the CSS

<style>
#contain {
width: 100%;
padding: 0;
margin: 0;
display: table;
}
#left,
#right {
text-decoration: none;
display: table-cell;
width: 310px;
text-align: center;
background: #FF9000;
color: #FFFFFF;
padding: 2% 0;
}
#filler {
display: table-cell;
width: auto;
background: #F00;
text-align: center;
}

@media (max-width: 800px) {

#contain {
display:block;
width: 100%;
}

#left,
#right {

display: block;
width: 100%;
}

#filler {
display: block;
width: 100%;
}

}

</style>

Here is the HTML.

<div id=”contain”>
<div id=”left”>1</div>
<div id=”filler”>m</div>
<div id=”right”>2</div>
</div>

I used the following link to get this result.

http://stackoverflow.com/questions/21782502/how-to-make-a-divs-width-stretch-between-two-divs

I hope this helps someone else out there…

CSS transitions – Background Color

Here is an example using a class

.someclass {
-webkit-transition: background-color 2s;
-moz-transition: background-color 2s;
-o-transition: background-color 2s;
transition: background-color 2s;
}

.someclass:hover {
background-color: #new color;
}

This page helped me get it working.

transition

Here is a link to all the properties that can be effected.

https://www.w3.org/TR/css3-transitions/#animatable-properties

I hope helps someone else out there…

Make a div / div tag a hyperlink or link

This tip is very helpful with today’s web where a lot of the graphic stuff such as drop shadows and gradients are being done through CSS.

<div onclick="location.href='newurl.html';">&nbsp;</div>

New Window:

<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;">&nbsp;</div>

 

I hope this helps someone else out there….