I'm trying to vertically align text in a box that has a height that changes to match the width (so that it's a perfect square). I just cannot get it to work. I have 2 issues:
I'm trying to vertically align the text within the "smallbox" class.
Besides this, I also cannot get the "text" class to vertically align either.
Here's my fiddle
Here's my CSS:
* {
margin: 0;
padding: 0;
}
html, body {
background: yellow;
font-size: 2.5vmin;
}
body {
text-align: center;
}
#container {
margin: 0 auto;
width: 100%;
}
.box {
/*width: 200vmin;*/
width: 90%;
margin: 0 auto;
display: inline-block;
/*padding-bottom: 5vmin;*/
padding-bottom: 2.5%;
}
.smallbox {
position: relative;
float: left;
vertical-align: middle;
width: 16.8%;
border-radius: 2vmin;
font-size: 6vmin;
text-align: center;
word-wrap: break-word;
display: table;
table-layout: fixed;
color: red;
background-color: blue;
}
.smallbox b {
margin-top: 100%;
display: block;
zoom: 1.0;
}
.smallbox p {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-decoration: none;
display: table-cell;
vertical-align: middle;
}
.content {
width: 80%;
min-height: 28vmin;
background-color: white;
float: right;
border-radius: 2vmin;
font-size: 3.5vmin;
position: relative;
padding-bottom: 5vmin;
}
.content:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -4.75vmin;
top: 13.5vmin;
border-top: 3vmin solid transparent;
border-bottom: 3vmin solid transparent;
border-right: 5vmin solid white;
}
.title {
height: 5vmin;
padding: .75vmin 1.5vmin;
border-radius: 2vmin 2vmin 1vmin 1vmin;
margin: .5vmin;
font-weight: bold;
text-align: left;
color: red;
background-color: blue;
}
.text {
padding: .5vmin 2vmin;
text-align: center;
}
.left {
padding: .5vmin 2vmin;
position: absolute;
bottom: 0;
font-weight: bold;
}
.right {
padding: .5vmin 2vmin;
position: absolute;
bottom: 0;
right: 0;
font-weight: bold;
border-radius: 2vmin 2vmin 2vmin 2vmin;
margin: .5vmin;
color: red;
background-color: blue;
}
.right a {
text-decoration: none;
}
.arrowleft {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
Here's my HTML:
<!DOCTYPE html>
<html><head>
<link rel="stylesheet" href="box.css">
</head>
<body>
<div id="container">
<div class="box">
<div class="smallbox"><b></b><p>Onceuponatimeinafarawayland</p></div>
<div class="content">
<div class="title">Some Title</div>
<div class="text"><p>This is just some example text here</p>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</div>
</div>
</body></html>
Add this CSS:
.smallbox p:before{
content:" ";
display:inline-block;
vertical-align:middle;
height:100%;
width:1px;
}
.smallbox p span{
display:inline-block;
vertical-align:middle;
width:99%;
}
Credit goes to Paul.
You're using position: absolute; on the paragraph within the .smallbox class which is forcing it to display block, so vertical-align will have no effect. In the fiddle below I used the line-height property to align the .smallbox text though I don't think that'll work with a dynamic height.
I also centered the .text class paragraph by adding display: inline-block; and using the px value for vertical-align. Just adjust it to your needs.
Related
I currently have this HTML:
#circle {
background-color: orange;
max-width: 40px;
margin-right: 20px;
margin-bottom: 20px;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
float:left;
}
#innerContent {
border: solid 2px black;
padding: 3px;
}
#pointerDiv{
float:left;
}
<div id="circle"><span id='innerContent'>123</span></div><div id='pointerDiv'>text goes here</div>
I'm trying to achieve this effect:
Basically, a line that goes from the border to point to an element I can fill with text that explains the number. How do I do this?
The below is one sample method to achieve this by using a pseudo-element and then positioning it absolutely as required.
The reason for the left: -58px is because the margin-right (I had modified it from the 20px in question to 50px in answer just for illustration) is 50px + the border of the box is a few px inside the circle and so that also had to be considered. The width of the line is made smaller than the left value so as to make the line end just before the pointerDiv.
Note that I have also added a clear: both to the #circle just in-case you want to add more such entries one below the other. If not required, it can be removed.
#circle {
background-color: orange;
max-width: 40px;
margin-right: 50px;
margin-bottom: 20px;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
float: left;
clear: both;
}
#innerContent {
border: solid 2px black;
padding: 3px;
}
#pointerDiv {
float: left;
position: relative;
height: 40px;
line-height: 40px;
}
#pointerDiv:before {
content: '';
position: absolute;
border: 1px solid black;
top: 50%;
left: -58px;
width: 55px;
}
<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>text goes here</div>
<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>some lengthy text goes here</div>
<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>short txt</div>
You can either use a CSS border or a SVG to draw a line (may not be compatible with some browser)
#circle {
background-color: orange;
max-width: 40px;
margin-bottom: 20px;
min-width: 40px;
min-height: 40px;
font-size: 12px;
border-radius: 50%;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 40px;
float: left;
}
#innerContent {
border: solid 2px black;
padding: 3px;
}
#pointerDiv {
float: left;
line-height: 40px;
}
#line-svg {
float: left;
margin-top: 20px;
margin-left: -6px;
width: 100px;
}
<div id="circle"><span id='innerContent'>123</span>
</div>
<svg id="line-svg">
<line x1="0" y1="0" x2="100%" y2="0" style="stroke:rgb(0,0,0);stroke-width:4" />
</svg>
<div id='pointerDiv'>text goes here</div>
You could always use pseudo elements? I've created a basic mockup below:
.circle {
height: 55px;
width: 55px;
border-radius: 50%;
background: orange;
position: relative;
display: inline-block;
}
.circle:before {
position: absolute;
content: "hi";
height: 60%;
top: 20%;
left: 20%;
width: 60%;
border: 2px solid black;
}
.circle:after {
position: absolute;
content: "";
width: 100%;
right: -85%;
top: 50%;
border-bottom: 1px solid black;
}
.tooltip {
display: inline-block;
margin-left: 55px;
height: 60px;
width:60px;
}
.wrapper{
display:block;
}
<div class="wrapper">
<div class="circle"></div>
<div class="tooltip">text goes here</div>
</div>
This is my HTML structure:
<div class="pageSlider">
Visitor's Lounge
News Stream
<a class="slide-button"></a>
</div>
And here are my CSS rules:
.pageSlider {
margin: 15px auto !important;
font-size: 1.2em;
white-space: nowrap;
height: 35px;
}
.pageSlider a[href] {
display: inline-block;
text-align: center;
text-decoration: none;
z-index: 2;
}
.pageSlider a[href].active {
color: #000;
}
.pageSlider .slide-button {
background-color: #cccc00;
position: relative;
top: -35px;
display: inline-block;
height: 35px;
padding: 0;
float: left;
height: inherit;
z-index: 1;
}
The .pageSlider .slide-button is set to z-index: 1 and .pageSlider a[href] is set to z-index: 2, but the lower z-index actually overlaps the higher.
I somehow need toget the .slide-button under the links, but I can't seem to figure out a better way.
Live demo:
(function(e){e.parseURL=function(e){if(typeof e==="undefined"&&typeof window.location.href!=="undefined")e=window.location.href;var t={whole:/^((http|https):\/\/)?((.*\.)?.*\..*|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\/.*/,protocol:/^(http|https):\/\//,absolute:/^\/\/((.*\.)?.*\..*|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\//,relative:/^[\/](?!\/).*(\..*|\/)?.*$/,params:/\?.*=.*(\&.*\=.*)+[^#.*]/},n={protocol:undefined,hostname:undefined,hash:undefined,href:{original:undefined,noparams:undefined},parentDomain:undefined,parameters:undefined,pathname:{nohash:undefined,withhash:undefined},type:undefined};if(typeof e!=="string")throw new TypeError("Argument must be a string!");else if(!t.whole.test(e)&&!t.absolute.test(e)&&!t.relative.test(e))throw new Error("Invalid string");n.href.original=e;if(e.indexOf("#")!==-1){n.hash=e.substring(e.indexOf("#"));e=e.substring(0,e.indexOf("#"))}if(t.params.test(e)){n.parameters={};var r=e.match(t.params)[0].substring(1).split("&");for(var i=0,s=r.length;i<s;i++){var o=r[i].split("=");n.parameters[o[0]]=o[1]}e=e.replace(t.params,"");n.href.noparams=e+(typeof n.hash!=="undefined"?n.hash:"")}if(t.protocol.test(e)){n.protocol=e.match(t.protocol)[0];n.hostname=e.replace(t.protocol,"");n.hostname=n.hostname.substring(0,n.hostname.indexOf("/"));n.parentDomain=n.hostname.split(".");n.parentDomain.splice(0,1);n.parentDomain=n.parentDomain.join(".");if(n.parentDomain=="")n.parentDomain=n.hostname;var u=e.replace(t.protocol,"");n.pathname.nohash=u.substring(u.indexOf("/"));u=undefined;n.type="normal"}else{n.protocol=window.location.href.match(t.protocol)[0];if(t.absolute.test(e)){var u=e.replace(/^\/\//,"");n.hostname=u.substring(0,u.indexOf("/"));n.pathnam.nohashe=u.substring(u.indexOf("/"));n.type="absolute";n.href.original=n.href.original.replace(/^\/\//g,n.protocol)}else if(t.relative.test(e)){n.hostname=window.location.href.replace(t.protocol,"");n.hostname=n.hostname.substring(0,n.hostname.indexOf("/"));n.pathname.nohash=n.href.original;n.type="relative"}else{throw new Error("Invalid string")}}n.pathname.withhash=n.pathname.nohash+n.hash;return n};if(typeof e(".pageSlider")[0]!=="undefined"){e.pageSlider=function(t){if(t==="update"){e('.pageSlider a.active:not([href="'+e.parseURL().hash+'"])').removeClass("active");e('.pageSlider a[href="'+e.parseURL().hash+'"]').addClass("active");e(".pageSlider").each(function(){var t=e(this);var n=t.find("a.slide-button");var r=t.find("a[href]");var i=r.size();var s=100/i;var o=r.index("a.active");r.css("width",s+"%");console.log(o);n.css("width",s+"%").animate({left:o*-1*s+"%"})});return e('.pageSlider a.active[href="'+e.parseURL("/index.php").hash+'"]')}};window.location.hash="lounge";e.pageSlider("update");e(window).on("hashchange",function(){e.pageSlider("update")})}})(jQuery)
.pageSlider {
margin: 15px auto !important;
font-size: 1.2em;
white-space: nowrap;
height: 35px;
}
.pageSlider a[href] {
display: inline-block;
text-align: center;
text-decoration: none;
color: #fff;
z-index: 2;
}
.pageSlider a[href].active {
color: #000;
}
.pageSlider .slide-button {
background-color: #cccc00;
position: relative;
top: -35px;
display: inline-block;
padding: 0;
float: left;
height: inherit;
z-index: 1;
}
body{background-color:#777}#media all and (max-width: 500px){.pageSlider{white-space: normal}.pageSlider a[href]{display: block !important;width: 100% !important}.pageSlider [href].active {background-color: #cccc00}.pageSlider .slide-button{display: none}}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageSlider">
Visitor's Lounge
News Stream
<a class="slide-button"></a>
</div>
You forgot to add:
position:relative;
on your link (.pageSlider a[href]). z-index only applies to positioned elements.
Trying to get the grey box on the right to centre align without adding margins/padding to it:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 { margin: 0em; padding: 0em; }
h3 span { margin-left: 0.5em; }
a { float: right; text-align: right; }
a span { vertical-align: middle; background-color: #ccc; width: 1em; height: 1em; color: #fff; margin-right: 0.5em; display: inline-block; }
#content { height: 16em; }
</style>
</head>
<body>
<div id="frame">
<div id="header">
<h3><span>Heading</span><span></span></h3>
</div>
<div id="content">
</div>
</div>
</body>
</html>
http://jsfiddle.net/hotdiggity/4yGh8/
There are a few different ways to go about this, but none of them are perfect.
I've modified the markup slightly to make it easier to write selectors for:
<div id="frame">
<div id="header">
<h3><span>Heading</span><span></span></h3>
</div>
<div id="content">
</div>
</div>
CSS Tables
The result might not be pretty if you have content that's going to wrap:
http://jsfiddle.net/4yGh8/4/
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 { margin: 0em; padding: 0em; display: table; width: 100%; }
h3 span { display: table-cell; vertical-align: middle; }
h3 span { padding: 0 0.5em; width: 100% }
h3 span:last-child { width: 1px; line-height: 1; }
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
Flexbox
Make sure you check http://caniuse.com/#search=flexbox to see which prefixes you need to make this work.
http://jsfiddle.net/4yGh8/6/ (prefixes not included)
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 {
margin: 0em;
padding: 0em;
display: flex;
width: 100%;
justify-items: space-between;
align-items: center;
}
h3 span {
margin: 0 .5em;
}
h3 span:first-child {
flex: 1 1 auto;
}
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
Absolute Positioning
http://jsfiddle.net/4yGh8/7/
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 {
margin: 0em;
padding: 0em;
position: relative;
}
h3 span {
padding: 0 .5em;
}
h3 span:last-child {
position: absolute;
right: 0;
top: 50%;
margin-top: -.5em; /* half of the element's height */
}
a { background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
2 things you can do.
add another box en limit is in width until your block is in the middle with float right
use margin & padding
You just need to add position:relative to your #frame and then position:absolute;top:0;bottom:0; margin:auto; to yout #header. I edited your fiddle
I need show a notication modal window.. But since its a fluid layout the position changes on bigger screens.
How can i position the modal window below the link like in image. I want it in the exact position. How do i go about doing it?
This should work as a base for you.
HTML
<div class="notificaton-bar">
<div class="notice">Notification
<div>
Here is the applicable note.
</div>
</div>
</div>
CSS
.notificaton-bar {
background-color: #999999;
padding: 0 10px;
}
.notice {
position: relative;
display: inline-block;
background-color: inherit;
font-size: 1.5em;
min-width: 140px;
padding: 10px 5px;
text-align: center;
}
.notice div {
display: none;
width: 130px;
padding: 10px;
font-size: .75em;
text-align: left;
background-color: inherit;
border-radius: 10px;
position: absolute;
top: 100%;
left: 50%;
margin-left: -75px;
margin-top: 10px;
}
.notice div:before {
content: '';
display: block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 11px solid #999999;
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
}
.notice:hover div {
display: block;
}
Bellow is my css i'm using. The div with the largebutton class on it works with the exception of the hover. I would like it to change it's background color, but am not sure why its not working. Any ideas?
edit - I'm working in FF at the moment. I'm not looking for support in IE6, possibly not IE7 either.
.top .bottombar .largebutton
{
position: relative;
float: left;
height: 100%;
width: 195px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 33px;
text-align: right;
background-color: #99CCFF;
margin-left: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .bottombar .largebutton:hover
{
background-color: #9999FF;
}
edit - Full files
HTML
<html>
<head>
<link rel="StyleSheet" href="css/LCARS.css" type="text/css" media="screen">
</head>
<body>
<div class="top">
<div class="content">
</div>
<div class="leftbuttonbox">
<div class="button">
Label
</div>
<div class="largebutton">
Label
</div>
<div class="button">
Label
</div>
</div>
<div class="bottombar">
<div class="button">
Label
</div>
<div class="largebutton">
Label
</div>
<div class="button">
Label
</div>
<div class="label">
This is a label, it grows as large as it needs to
</div>
</div>
<div class="cap">
<div class="capinner">
</div>
</div>
</div>
</body>
</html>
CSS
#font-face {
font-family: "LCARS";
src: url('../FONT/lcars.ttf');
}
body
{
font-family: "LCARS";
position: relative;
background-color: black;
padding: 0px;
margin: 0px;
}
.top
{
position: relative;
height: 220px;
min-width: 100px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
background-color: #6666FF;
-moz-border-radius-bottomleft: 50px;
}
.top .content
{
position: absolute;
top: 0px;
right: 0px;
left: 100px;
bottom: 25px;
background-color: black;
-moz-border-radius-bottomleft: 25px;
}
.top .leftbuttonbox
{
position: absolute;
top: 0px;
left: 0px;
width: 100px;
bottom: 60px;
background-color: black;
overflow: hidden;
}
/*
* the button is 1/2 the size of the large button
* the button box can hold 4 buttons or 2 large
* buttons or any combination of equal size
*/
.top .leftbuttonbox .button
{
position: relative;
height: 35px;
width: 95px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 53px;
text-align: right;
background-color: #99CCFF;
margin-bottom: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .leftbuttonbox .button:hover
{
background-color: #9999FF;
}
.top .leftbuttonbox .largebutton
{
position: relative;
height: 75px;
width: 95px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 133px;
text-align: right;
background-color: #99CCFF;
margin-bottom: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .leftbuttonbox .largebutton:hover
{
background-color: #9999FF;
}
.top .bottombar
{
position: absolute;
bottom: 0px;
height: 25px;
left: 200px;
padding-right: 5px;
background-color: black;
overflow: hidden;
}
.top .bottombar .button
{
position: relative;
float: left;
height: 100%;
width: 95px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 33px;
text-align: right;
background-color: #99CCFF;
margin-left: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top .bottombar .button:hover
{
background-color: #9999FF;
}
.top .bottombar .largebutton
{
position: relative;
float: left;
height: 100%;
width: 195px;
font-size: 13px;
letter-spacing: 1px;
text-transform:uppercase;
line-height: 33px;
text-align: right;
background-color: #99CCFF;
margin-left: 5px;
padding-right: 5px;
overflow: hidden;
cursor: pointer;
}
.top:hover .bottombar:hover .largebutton:hover
{
background-color: #9999FF;
}
.top .bottombar .label
{
position: relative;
float: left;
height: 100%;
min-width: 50px;
font-size: 22px;
letter-spacing: 1px;
font-variant: small-caps;
padding-left: 5px;
padding-right: 5px;
background-color: #CC99CC;
margin-left: 5px;
cursor: default;
}
.top .cap
{
position: absolute;
height: 25px;
width: 20px;
right: 0px;
bottom: 0px;
padding-left: 5px;
padding-right: 5px;
background-color: black;
cursor: default;
}
.top .cap .capinner
{
position: relative;
height: 100%;
width: 100%;
background-color: #6666FF;
cursor: default;
-moz-border-radius-topright: 50%;
-moz-border-radius-bottomright: 50%;
}
div.top div.bottombar div.largebutton:hover
{
background-color: #9999FF;
}
I think it's a bug in Firefox. Sometimes, when you add CSS for nested classes without specifying what elements these are applied to, the browser goes crazy. Your code works OK in other browsers, so technically it's not your fault, but FF's ;)
I suggest this solution:
.top .largebutton:hover
{
background-color: #9999FF; /* make this whatever color it was before */
}
This worked for me when I tried it with your full code.
Hope it works for you :)
Amit
The key concept of styling a link stands toward following steps:
You have to declare styles of 4 different condition which are a:link , a:visited , a:hover , a:active .
You have to be careful about the order. Because it matters. link > visited > hover > active. (especially to have :hover and :visited work...)
Eventhough you don't need styling one or more of conditions, nevertheless, style them all.
If you pay attention to these, you may have perfectly styled links.
I hope it helps.