How do I match the style (and also the position is off) of the button on
http://jsfiddle.net/nA4P9/21/
using the compatible codes in CSS?
See image attached from different browsers - Chrome/IE/FF.
CSS -
.FindHome {background-color:#09F; width:300px; border:1px solid #09F; padding:10px 40px 10px 15px; border-radius:5px; display:block; margin-left:auto; margin-right:auto; background: #09F url('http://www.magnixsolutions.com/clients/tas/img/arrow.png') no-repeat; background-position:320px center; margin-bottom:35px; overflow: hidden; text-decoration:none; color:#ffffff;}
.FindHome:hover {border:1px solid #4d4d4d; background: #4d4d4d url('http://www.magnixsolutions.com/clients/tas/img/arrow.png') no-repeat; background-position:320px center;}
.FindHome-div{display:inline-block;}
HTML -
<div class="fluid FindHome-div">
<h1>Find your home </h1>
</div>
Related
I need to display two divs one next to another on the same line, but I can't understand why the second one is slightly lower than the first one.
<div class="cont-title">
<div class="triang-header"></div>
<div class="h2-stripe">
<h2 itemprop="name">
Title
</h2>
</div>
</div>
This is the css:
.cont-title{
margin-right: -7px;
min-width: 90%;
max-width: 100%;
height:51px;
float:right;
text-align:right;
white-space: nowrap;
}
.triang-header{
position:relative;
width:39px;
height:38px;
display:inline-block;
background:url('../images/titlebar.png') no-repeat top left;
}
.h2-stripe{
position:relative;
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
What am I doing wrong?
I think you did not count the line-height,
should be like this the style for .h2-stripe:
.h2-stripe{
position:relative;
line-height: 23px; // <----
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
box-shadow: 2px 3px 5px 0 #555;
}
here it is an example with line-height:23px for .h2-stripe: http://jsfiddle.net/6a0ga3uq/
you misspelled your class
.h2-strispe{
position:relative;
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
should be
.h2-stripe{
position:relative;
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
The margin of your h2 element causes the second div to shift down. Also, you should vertical-align inline-block elements. See this updated snippet (also with corrected class name in CSS).
.cont-title{
margin-right: -7px;
min-width: 90%;
max-width: 100%;
height:51px;
float:right;
text-align:right;
white-space: nowrap;
}
.cont-title > * {
vertical-align: middle;
}
.triang-header{
position:relative;
width:39px;
height:38px;
display:inline-block;
background:url('http://placehold.it/39x38') no-repeat top left;
margin: 0;
}
.h2-stripe{
position:relative;
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
h2 {
margin:0;
}
<div class="cont-title">
<div class="triang-header"></div><div class="h2-stripe"><h2 itemprop="name">
Title
</h2>
</div>
</div>
In the second div, you have line height and lot of other stuff. So other elements can extend your div. If you want your div to be the same size regardless to its other elements you should change display attribute like this
.h2-strispe{
position:relative;
z-index:10;
display:inline-block;
box-sizing:border-box;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
You can see i added box-sizing to border-box and that will save the position of your div no matter what you do to inner elements
Hello so while creating a site I've been working on I've ran into a problem. I have a link and next to it I have an image. The link is aligning the text in the link with the bottom of the image. I would like the surrounding box around the link to align with the bottom of the image without living a ~20px area below it. The code to see what I mean is below.
HTML:
<div id="links">
Link1
Link2
<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/0/0a/350x175.jpg" />
Link3
Link4
</div>
CSS:
#links{
/* SIZING */
width:70%;
min-width:625px;
min-height:10px;
/* POSITIONING */
margin-left:auto;
margin-right:auto;
background-color:#FF0;
}
.links {
/* DISPLAY */
display:inline-block;
background-color:#CCC;
border-radius:15px;
box-shadow: 2px 2px 5px #888888;
/* SIZING */
width:calc(16.25% - 10px);
height:50px;
margin:5px;
/* TEXT */
line-height:50px;
text-align:center;
text-decoration:none;
font-size:auto;
color:#000;
}
#logo{
text-decoration:none;
border:0px;
width:calc(35% - 10px);
padding-top:10px;
}
If you set the vertical-align to bottom it will align to the bottom like so;
.links {
background-color: rgb(204, 204, 204);
border-radius: 15px;
box-shadow: 2px 2px 5px rgb(136, 136, 136);
color: rgb(0, 0, 0);
display: inline-block;
height: 50px;
line-height: 50px;
margin: 5px;
text-align: center;
text-decoration: none;
vertical-align: bottom; //// ADDED STYLE
width: calc(16.25% - 10px);
}
Demo Here
When I resize my page the items in my navigation bar overlap and get distorted. I want to either keep the layout how it is and stay still, or resize while keeping everything in order without overlapping. Part of this I know will include getting the search bar to resize as the screen size changes but I dont know how to do that. Please help! lol thank you!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website</title>
<style>
html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders **/
background:#fff; /*color background - only works in IE */
/* hide overflow:hidden from IE5/Mac */
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%;
max-height:100%;
overflow-y:scroll;
padding:0;
margin:0;
border:0;
font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;
font-weight:bold;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
padding-left:100px;
position:relative;
z-index:3;
word-wrap:break-word;
top:45px;
}
#head {
position:absolute;
margin:0;
top:0;
display:block;
width:100%;
height:40px;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background:#333333;
background: -moz-linear-gradient(center top , #333333, #111111) repeat scroll 0 0 transparent;
}
#settings {
left:75%;
position:fixed;
width:40px;
height:40px;
color:red;
}
#home {
left:85%;
position:fixed;
width:40px;
height:40px;
color:blue;
}
#logo a {
background: url(logo.gif) no-repeat scroll 20px 9px;
color: #ffffff;
display: block;
height: 35px;
margin-right: 5px;
outline: medium none;
text-indent: -9999px;
width: 140px;
float:left;
}
.searchbox{
-moz-border-radius: 4px 4px 4px 4px;
-moz-box-shadow: 0 1px 0 #444444;
background: none repeat scroll 0 0 #666666;
border: 1px solid black;
color: #CCCCCC;
font: 13px Arial,sans-serif;
padding: 6px 25px 4px 6px;
width: 215px;
border-radius:15px;
float:right;
position:relative;
top:-33px;
left:-275px;
}
.searchbox:focus {
background: none repeat scroll 0 0 #eeeeee;
border: 1px solid #999999;
}
#news a { margin:30px; padding-left:25%; }
.nav { display:inline;}
.nav a { padding-left:20px; color:#BABABA; text-decoration:none; font-size:24px;}
.nav a:hover { color:#FFFFFF; }
</style>
</head>
<body>
<div id="head">
<div id="logo">
</div>
<div class="nav" id="news">News
</div>
<div class="nav" id="settings"><img src="redbox.gif" />
</div>
<div class="nav" id="home"><img src="bluebox.gif" />
</div>
<form>
<input class="searchbox" type="text"/>
</form>
</div>
</body>
</html>
I recommend putting all the contents that should not overlap together in a containing div then using min-height/min-width on that container to prevent the layout pieces (floats? fixed positions?) from sliding under or wrapping under one another.
Hi I've got a Div I wont to expose on Click of a link, it reveals a pop up at the bottom of the page... at the moment it looks like this:
http://jsfiddle.net/XPJC5/
body{margin:0;}
#lightbox {
display:none;
position:absolute;
bottom:5px;
z-index:1000;
width:100%;
background-color:#09F;
height:50px;
float:left;
font-family: 'helvetica_bqregular';
font-size:20px;
line-height:65px;
color:#FFF;
text-align:center;
}
/* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */
#lightbox:target {
display:block;
}
Register
<div id="lightbox">
<div style=" background-color:#CBE376; width:100%; line-height:65px; height:65px; border-bottom:solid #999 thin; -webkit-box-shadow: 4px 4px 4px 4px #333;box-shadow: 4px 4px 4px 4px #333; clear:both;">
Consumer
</div>
<div style=" background-color:#94C8F1; line-height:65px; width:100%; height:65px;">
Business</div>
<div style=" background-color:#333; width:100%; height:65px;">Close
</div></div>
but I want the box to slide up from the bottom similar to this:
http://jsfiddle.net/R8zca/4/
Can anyone help with accomplishment? seems to fail on trial.
Thanks
remove the heights from the inline styles in the html and set the boxes to an initial height of 0px in the css, then use the css transition to bring them to full height
html
Register
<div id="lightbox">
<div style=" background-color:#CBE376; width:100%; line-height:65px; border-bottom:solid #999 thin; -webkit-box-shadow: 4px 4px 4px 4px #333;box-shadow: 4px 4px 4px 4px #333; clear:both;">
Consumer
</div>
<div style=" background-color:#94C8F1; line-height:65px; width:100%; ">
Business</div>
<div style=" background-color:#333; width:100%;">Close
</div></div>
css
body{margin:0;}
#lightbox div
{
height: 0px;
}
#lightbox {
display:block;
position:absolute;
bottom:5px;
z-index:1000;
width:100%;
background-color:#09F;
float:left;
font-family: 'helvetica_bqregular';
font-size:20px;
line-height:65px;
color:#FFF;
text-align:center;
}
/* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */
#lightbox:target div
{
height: 65px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
}
http://jsfiddle.net/axrwkr/XPJC5/2
I have the following css :
img { border-style : none }
a { text-decoration : none }
#header { width : 100%}
#header #topbar{width:705px;
padding:3px 10px 0 10px;
float:left;
height:30px;
line-height:22px;
background-color:#eee;
max-width:750px;
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
-webkit-border-radius-bottom-left:3px;
-webkit-border-radius-bottom-right:3px;
}
#header #logo { height : 61px;
width : 250px;
float : left;
}
/* BUTTONS */
.buttons a, .buttons button{
display:block;
float:right;
margin:0 7px 0 0;
background-color:#E0EEEE;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
/* POSITIVE */
button.positive, .buttons a.positive{
color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
background-color:#E6EFC2;
border:1px solid #C6D880;
color:#529214;
}
.buttons a.positive:active{
background-color:#529214;
border:1px solid #529214;
color:#fff;
}
with the html code:
<body>
<div id="header">
<div id="topbar">
<div id="logo">
<a href="" >
<img src="images/logo-temp.png">
</a>
</div>
<div id= "buttons">
<div class="buttons">
<a href="/password/reset/" class="positive">
<img src="icons/arrow_up.png" alt=""/>
Send
</a>
<a href="/password/reset/" class="positive">
<img src="icons/arrow_down.png" alt=""/>
Receive
</a>
<a href="#" class="positive">
<img src="icons/user.png" alt=""/>
Users
</a>
</div>
</div>
</div>
Problem:
Right now the logo is floating left however the 3 buttons floating right but also horizontally aligned to the top. How do I fix this so all buttons are aligned to the bottom with the logo on the same line?
Add a margin to the button class to push the buttons down.
.buttons {margin-top:30px;}
Edit after comment
You want to add the margin to the <div class="buttons">
Put it right above .buttons a in the css.
/* BUTTONS */
.buttons {margin-top:30px;}
.buttons a, .buttons button{
...
}
#header #logo
{
height : 61px;
width : 100%;
float : left;
}
There's also an error in your CSS where you terminate the brackets twice after this declaration.
Reasoning:
Currently you're floating the #header #logo to the left but it doesn't fill it the width of its parent container, leaving space available on the right hand side. When you float the buttons they fall into this free space, so you need to fill it by increasing the left float to the full width.
JSBin, working demo.