I'm trying to create three buttons on either side of my main logo. These buttons should appear vertically center however when applying different display properties and/or margins and padding of 24px~ nothing changes. The attached JSFiddle shows the issue I have.
http://jsfiddle.net/LRaJy/
.header {
width: 100%;
background-color: #64767f;
background-position: bottom;
padding: 10px 0;
}
.header .logo {
background-image: url('../img/header-logo.png');
display:inline-block;
width: 415px;
height: 100px;
background: #fff;
}
.header-container {
width: 733px;
height: 100px;
margin: 0 auto;
}
.hover-buttons {
height: 44px;
display: inline-block;
padding-top: -5px;
}
.hover-buttons .button {
width: 44px;
height: 44px;
display: inline-block;
margin-right: 5px;
background: #fff;
}
with the HTML
<div class="header">
<div class="header-container">
<div class="hover-buttons">
<div class="button backups"></div>
<div class="button currency"></div>
<div class="button contact"></div>
</div>
<div class="logo">
</div>
<div class="hover-buttons">
<div class="button satisfaction"></div>
<div class="button security"></div>
<div class="button care"></div>
</div>
</div>
</div>
Is this what you're looking for?
jsFiddle Demo
.button, .logo {
vertical-align: middle;
}
Related
I have a floating layout in HTML and I want to place boxes both at the beginning, ending and also in the middle.
Here is my snippet:
html,
body {
height: 100%;
margin: 0;
text-align: center;
}
#root {
background-color: blue;
height: 80%;
width: 80%;
}
.tray {
box-sizing: border-box;
background-color: red;
border: thin solid black;
}
.tray-top,
.tray-bottom {
height: 48px;
line-height:48px;
clear: both;
}
.tray-left,
.tray-right {
width: 48px;
height: calc(100% - 96px);
float: left;
position: relative;
}
.tray-right {
float: right;
}
.button {
background-color: yellow;
width: 46px;
height: 46px;
}
.tray-top .button,
.tray-bottom .button {
max-width: 33%;
}
.tray-left .button,
.tray-right .button {
max-height: 33%;
}
.tray-top .button.begin,
.tray-bottom .button.begin {
float: left;
}
.tray-top .button.middle,
.tray-bottom .button.middle {
float: left;
}
.tray-top .button.end,
.tray-bottom .button.end {
float: right;
}
.button.middle {
}
.tray-left .button.end,
.tray-right .button.end {
position: absolute;
bottom: 0px;
}
<div id="root">
<div class="tray tray-top">
<div class="button begin">1</div>
<div class="button middle">2</div>
<div class="button end">3</div>
</div>
<div class="tray tray-left">
<div class="button begin">4</div>
<div class="button middle">5</div>
<div class="button end">6</div>
</div>
<div class="tray tray-right">
<div class="button begin">7</div>
<div class="button middle">8</div>
<div class="button end">9</div>
</div>
<div class="tray tray-bottom">
<div class="button begin">10</div>
<div class="button middle">11</div>
<div class="button end">12</div>
</div>
</div>
How can I make (please see it in Full page):
Box2 and Box11 to go into middle (while keeping box3 and box12 at the end)?
Box5 and Box8 to go into middle vertically?
Box6 and Box9 to go to the end vertically?
I don't want to stick to this layout but I would like to keep the widest support for all the browsers (including IE11 too).
Please note that #root has 80% width and height. It only means #root's size != body's size (so absolute positioning and left: 50% is not a way to go).
I would add some flexbox for this. It would be difficult to do it with only float and probably not good to use positionning:
html,
body {
height: 100%;
margin: 0;
text-align: center;
}
#root {
background-color: blue;
height: 85%;
width: 85%;
}
.tray {
box-sizing: border-box;
background-color: red;
border: thin solid black;
}
.tray-top,
.tray-bottom {
height: 48px;
line-height: 48px;
clear: both;
}
.tray-left,
.tray-right {
width: 48px;
height: calc(100% - 96px);
float: left;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.tray-right {
float: right;
}
.button {
background-color: yellow;
width: 46px;
height: 46px;
display:inline-block;
}
.begin {
float:left;
}
.end {
float:right;
}
<div id="root">
<div class="tray tray-top">
<div class="button begin">1</div>
<div class="button middle">2</div>
<div class="button end">3</div>
</div>
<div class="tray tray-left">
<div class="button begin">4</div>
<div class="button middle">5</div>
<div class="button end">6</div>
</div>
<div class="tray tray-right">
<div class="button begin">7</div>
<div class="button middle">8</div>
<div class="button end">9</div>
</div>
<div class="tray tray-bottom">
<div class="button begin">10</div>
<div class="button middle">11</div>
<div class="button end">12</div>
</div>
</div>
This solves my issue but I'm not sure if this is the most sophisticated solution for this problem:
html,
body {
height: 100%;
margin: 0;
text-align: center;
}
#root {
background-color: blue;
height: 80%;
width: 80%;
}
.tray {
box-sizing: border-box;
background-color: red;
border: thin solid black;
}
.tray-top,
.tray-bottom {
height: 48px;
line-height:48px;
clear: both;
position: relative;
}
.tray-left,
.tray-right {
width: 48px;
height: calc(100% - 96px);
float: left;
position: relative;
}
.tray-right {
float: right;
}
.button {
background-color: yellow;
width: 46px;
height: 46px;
}
.tray-top .button,
.tray-bottom .button {
max-width: 33%;
}
.tray-left .button,
.tray-right .button {
max-height: 33%;
}
.tray-top .button.begin,
.tray-bottom .button.begin {
float: left;
}
.tray-top .button.middle,
.tray-bottom .button.middle {
float: left;
}
.tray-top .button.end,
.tray-bottom .button.end {
float: right;
}
.button.middle {
float: left;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.tray-left .button.end,
.tray-right .button.end {
position: absolute;
bottom: 0px;
}
<div id="root">
<div class="tray tray-top">
<div class="button begin">1</div>
<div class="button middle">2</div>
<div class="button end">3</div>
</div>
<div class="tray tray-left">
<div class="button begin">4</div>
<div class="button middle">5</div>
<div class="button end">6</div>
</div>
<div class="tray tray-right">
<div class="button begin">7</div>
<div class="button middle">8</div>
<div class="button end">9</div>
</div>
<div class="tray tray-bottom">
<div class="button begin">10</div>
<div class="button middle">11</div>
<div class="button end">12</div>
</div>
</div>
I had to make the middle boxes position: absolute and their parents to position: relative then I'm able to change their position within their parents.
I have this flip box which looks like this
When I hover on it, it would turn around and would look like this.
I want to know, how do I move the text to the right only, I tried putting text-align: right; on my css but it didn't work. Am I doing it wrong?
Here's my CSS and HTML:
.box9 {
background-color: #4C586F;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 45px;
}
.box10 {
background-image: url("../img/commended/erwin.png");
background-size: 50%;
background-repeat: no-repeat;
width: 250px;
height: 150px;
margin: 0 auto;
padding: 45px;
}
<div class="col_third">
<div class="hover panel">
<div class="front">
<div class="box9">
<p style="font-size:180%; color: white">Kudos!</p>
</div>
</div>
<div class="back">
<div class="box10">
<p style="font-size:180%; color: black">sdasdsadas</p>
</div>
</div>
</div>
</div>
I would do it like this, setting text-align: right in the back view and to center in the front view, vertical centering of the p tag and also changing some other settings (no padding [therefore changed width and height settings] and some other details):
.box9 {
background-color: #4C586F;
width: 340px;
height: 240px;
margin: 0 auto;
text-align: center;
}
.box10 {
background-image: url(http://placehold.it/150x250/);
background-size: auto 100%;
background-repeat: no-repeat;
width: 340px;
height: 240px;
margin: 0 auto;
text-align: right;
}
.box9 p,
.box10 p {
margin: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.box10 p {
padding-right: 20px;
}
<div class="col_third">
<div class="hover panel">
<div class="front">
<div class="box9">
<p style="font-size:180%; color: white">Kudos!</p>
</div>
</div>
<div class="back">
<div class="box10">
<p style="font-size:180%; color: black">sdasdsadas</p>
</div>
</div>
</div>
</div>
I am facing a weird issue while using display: inline-block on 2 elements.
Maybe I am missing something but why there is some space on top of the button ?
Code here:
.contact-validation {
text-align: right;
}
.contact-captcha {
width: 320px;
height: 90px;
background-color: #879;
display: inline-block;
}
.contact-submit {
display: inline-block;
}
.contact-button {
margin-top: 0;
height: 90px;
width: 300px;
font-size: 35px;
background-color: #000;
color: #fff;
border: 0;
}
<div class="contact-validation">
<div class="contact-captcha"></div>
<div class="contact-submit">
<button type="submit" class="contact-button">Get in Touch</button>
</div>
</div>
Issue here: http://jsbin.com/jowosejahe/edit?html,css,output
Just apply the Vertical-align :
.contact-validation {
text-align: right;
}
.contact-captcha {
width: 35%;
height: 90px;
background-color:#879;
display: inline-block;
}
.contact-submit {
display: inline-block;
vertical-align: top;
}
.contact-button {
margin-top: 0;
height: 90px;
width: 300px;
font-size: 35px;
background-color: #000;
color: #fff;
border:0;
}
<div class="contact-validation">
<div class="contact-captcha"></div>
<div class="contact-submit">
<button type="submit" class="contact-button">Get in Touch</button>
</div>
</div>
i have change same css and remove you can replace two class
.contact-validation {
text-align: right;
display: inline-block;
float: right;
}
.contact-captcha {
width: 320px;
height: 90px;
background-color: #879;
/* display: inline-block; */
}
I tried your code in my computer and I can see like there is something strange on the space between the two divs:
<div class="contact-captcha"></div>
<div class="contact-submit">
<button type="submit" class="contact-button">Get in Touch</button>
</div>
If you erase the newline between the divs:
<div class="contact-captcha"></div><div class="contact-submit">
<button type="submit" class="contact-button">Get in Touch</button>
</div>
The space between them disappears. I think is because of the properties of the inline-block, that takes each character into his code as something to be written. Also if you end your first div like this:
<div class="contact-captcha"/>
<div class="contact-submit">
<button type="submit" class="contact-button">Get in Touch</button>
</div>
It works different too. Maybe you want this to happen instead. Hope it helped a bit.
Change these two elements to contain float:right.
.contact-captcha {
width: 320px;
height: 90px;
background-color:#879;
display: inline-block;
float:right;
}
.contact-submit {
display: inline-block;
float:right;
}
I have a js fiddle where i want a padding between two divs, i have placed a css padding rule on the div that requires padding but it is not being applied:
http://jsfiddle.net/Cnr2V/
css:
.gap {
display: inline-block;
width: 15%;
height: 300px;
float: left;
background-image: url("/images/forward_enabled_hover.png");
background-repeat: no-repeat;
background-position: center center;
}
.feature-addons {
background-color: #303030;
width: 100%;
color: #ffffff;
font-size: 15px;
padding-top: 5px;
padding-bottom: 5px;
}
.feature-container {
display: inline-block;
width: 40%;
float: left;
overflow: hidden;
}
.feature-item {
padding: 5px;
height: 50px;
display: block;
}
.feature-options {
background-color: #f5f5f5;
display: block;
width: 100%;
height: auto;
background-image: url("/images/plus.png");
background-repeat: no-repeat;
background-position: center right;
}
.radio-button {
display: none;
}
html:
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_UpdatePanel_Features">
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel_FeatureOptions">
<div class="call-features-table">
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel_SelectFeatures" class="feature-container">
<div class="feature-addons">Feature add-ons</div>
<label for="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_RadioButton_Item" id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Label_FeatureItem">
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel_FeatureItem" class="feature-item">
<div class="feature-options">
<h4>Title</h4>
<p>lorum ipsum</p>
<p>lorum ipsum</p> <span class="radio-button"><input id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_RadioButton_Item" type="radio" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$RadioButton_Item" value="RadioButton_Item" /></span>
</div>
</div>
</label>
<label for="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_RadioButton_Item" id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Label1">
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel1" class="feature-item">
<div class="feature-options">
<h4>Title</h4>
<p>lorum ipsum</p> <span class="radio-button"><input id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_RadioButton1" type="radio" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$RadioButton1" value="RadioButton1" /></span>
</div>
</div>
</label>
</div>
<div class="gap"></div>
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel_SelectedFeatures" class="feature-container"></div>
</div>
</div>
How can i create the padding required between two feature-item divs?
Remove height from feature-item div.
.feature-item {
padding: 5px;
display: block;
}
You have defined height for feature-item which is not allowing space between the divs. Try removing the height or specify a higher value.
You are applying feature-item class to a div which is already a block element, Removing height will solve your query, but removing extra css will also improve your code quality. So you just need to write :-
.feature-item {
padding: 5px;
}
How do I do this in widths? The gray middle div is 100% - 50px - 50px. Please show code; below this image is my guess
EXAMPLE : (http://mediahood.net/mesgr.png)
<div style="position:absolute;left:0px;width:50px;height:50px;">
<div style="width:50;height:50px;background-color:#000;margin:0px;">
<img id='txtrattach' src="/assets/txtr-attach.png" height='50px'></div>
</div>
<div style="position:absolute;left:50px;width:258px;height:50px;font-family:'Harabara';font-size:12px;">
<input id="txtrinput" type="text" name='message' onKeyPress='return charLimit(this)' onKeyUp='return characterCount(this)'>
</div>
<div style="position:absolute;right:0px;width:50px;height:50px;">
<div style="width:50px;height:50px;background-color:#000;margin:0px;">
<span id='charCount'>150</span><span id='charCount2'> chars.</span>
<input id='txtrsend' src="/assets/txtr-enter.png" height='50px' name="send" type="image" value="Send">
</div>
</div>
</dov>
I have two examples. The first uses a fixed height for the footer as a whole, and floats for the sides. The second uses a variable height footer (based on the "middle" div's content), using a trick that sets the background of the footer to black and the middle part to grey and margins to reveal the background for the rest of the area that the variable-height sides do not extend to (there would be grey underneath the text if not for the margins).
<div id="footer">
<div id="left">50px</div>
<div id="right">50px</div>
<div id="middle">100%</div>
</div>
<div>2:</div>
<div id="footer2">
<div id="left2">50px</div>
<div id="right2">50px</div>
<div id="middle2">100%<br />100%<br />100%</div>
</div>
CSS:
#footer {
height: 115px;
text-align: center;
background: #ccc;
}
#left {
float: left;
height: 100%;
background: #000;
color: #fff;
text-align: center;
width: 50px;
}
#right {
float: right;
height: 100%;
background: #000;
color: #fff;
text-align: center;
width: 50px;
}
#footer2 {
text-align: center;
background: #000;
}
#left2 {
height: 100%;
float: left;
color: #fff;
text-align: center;
width: 50px;
}
#right2 {
float: right;
color: #fff;
text-align: center;
width: 50px;
height: 100%;
}
#middle2 {
margin: 0 50px;
background: #ccc;
}
What about setting margin on inner div?
Just showing style tags for convenience, move to css file.
<style>
.outer {
width: 400px;
background-color: #ddd;
}
.inner {
margin: 0 50px;
background-color: #ccc;
}
</style>
<div class="outer">
<div class="inner">
inner div
</div>
</div>