SharePoint: CSS - text at bottom of DIV
A seemingly simple request recently had me spinning around for a day, wrestling with CSS. A set of simple boxes, with text at the BOTTOM of the box. Thrown up by a Content Editor web-part. Easy? Heh! I futzed around for a day, before a colleague took it up and nailed it for me. Judicial use of just "position" and "bottom" and it works fine.
<!DOCTYPE html>
<STYLE type="text/css">
.bluebox {
background-color: rgb(0, 114, 198);
display: inline-block;
height: 100px;
width: 100px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
position: relative;
cursor: pointer;
}
.title {
font-family:'Segoe UI';
float: left;
margin: 5px;
bottom: 5px;
line-height: 9.5pt;
font-size: 10.5pt;
font-weight: 400;
color: white;
position: absolute;
}
.bluebox:hover {
background-color:rgb(0, 32, 80);
}
</STYLE>
<html>
<head>
<title>Modern Style</title>
<script src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.js"></script>
</head>
<body>
<div id="link1" class="bluebox" onclick="location.href='#';"><div class="title">Windows 8</div></div>
<div id="link1" class="bluebox" onclick="location.href='#';"><div class="title">Office 365</div></div>
<div id="link3" class="bluebox" onclick="location.href='#';"><div class="title">Surface</div></div>
<div id="link3" class="bluebox" onclick="location.href='#';"><div class="title">Windows Phone</div></div>
<div id="link3" class="bluebox" onclick="location.href='#';"><div class="title">Xbox Live</div></div>
<div id="link3" class="bluebox" onclick="location.href='#';"><div class="title">Windows Server</div></div>
<div id="link2" class="bluebox" onclick="location.href='#';"><div class="title">SharePoint</div></div>
<div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">SQL Server</div></div>
<div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Exchange</div></div>
<div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">System Centre</div></div>
<div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Visual Studio</div></div>
<div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Skydrive cloud storage</div></div>
<div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Skype</div></div>
<div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Bing</div></div>
<div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Outlook.com</div></div>
<div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Microsoft PhotoSynth</div></div>
<div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Azure</div></div>
<div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Biztalk</div></div>
<div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Lync</div></div>
<div id="link4" class="bluebox" onclick="location.href='#';"><div class="title">Microsoft Dynamics</div></div>
</body>
</html>