I have tried below code to get desired output, how to display that lock in middle of that.
I have tried so many thing, which I found on SO, but nothing helpful.
I am not very experienced in CSS.
I want to display like this:
.inline-block {
display: inline-block;
}
.lock_image {
width: 30px;
height: 30px;
}
hr {
width: 250px;
margin: 0px;
bottom: 1px;
margin-bottom: 5px !important;
margin-top: 5px !important;
}
.title {
margin: 0px;
}
<div class="inline-block"><img src="https://image.ibb.co/f7sA2Q/icons8_Lock_50.png" alt="icons8_Lock_50" border="0" class="lock_image"></div>
<div class="inline-block">
<p class="title">Google Drive Integrated Email</p>
<hr>
<a class="mgl20" href="javascript:void(0);">xyz#gmail.com</a>
</div>
I added a wrapper around the content you had and made it a flexbox with vertical center alignment.
.wrapper {
display: flex;
align-items: center;
}
.inline-block {
display: inline-block;
}
.lock_image {
width: 30px;
height: 30px;
}
hr {
width: 250px;
margin: 0px;
bottom: 1px;
margin-bottom: 5px !important;
margin-top: 5px !important;
}
.title {
margin: 0px;
}
<div class="wrapper">
<div class="inline-block">
<img src="https://image.ibb.co/f7sA2Q/icons8_Lock_50.png" alt="icons8_Lock_50" border="0" class="lock_image">
</div>
<div class="inline-block">
<p class="title">Google Drive Integrated Email</p>
<hr>
<a class="mgl20" href="javascript:void(0);">xyz#gmail.com</a>
</div>
</div>
Please add vertical-align:middle in inline-block class.
.inline-block{
display:inline-block;
vertical-align:middle;
}
.lock_image{
width:30px;
height:30px;
}
hr{
width: 250px;
margin: 0px;
bottom: 1px;
margin-bottom: 5px !important;
margin-top: 5px !important;
}
.title{
margin:0px;
}
<div class="inline-block"><img src="https://image.ibb.co/f7sA2Q/icons8_Lock_50.png" alt="icons8_Lock_50" border="0" class="lock_image"></div>
<div class="inline-block"><p class="title">Google Drive Integrated Email</p><hr>
<a class="mgl20" href="javascript:void(0);">xyz#gmail.com</a>
</div>
Try this code:
Here is the jsfiddle: https://jsfiddle.net/rhulkashyap/71a9uLvy/
.inline-block{
display:inline-block;
vertical-align:middle;
}
.lock_image{
width:30px;
height:30px;
}
hr{
width: 250px;
margin: 0px;
bottom: 1px;
margin-bottom: 5px !important;
margin-top: 5px !important;
}
.title{
margin:0px;
}
<div class="inline-block"><img src="https://cdn.pbrd.co/images/GHHKwv7.png" alt="icons8_Lock_50" border="0" class="lock_image"></div>
<div class="inline-block"><p class="title">Google Drive Integrated Email</p><hr>
<a class="mgl20" href="javascript:void(0);">xyz#gmail.com</a>
</div>
Related
I am new due css & Html design. I am facing an issue in aligning text to center of a last div.
I have created js fiddle :http://jsfiddle.net/80sems56/
Please help aligning last div text "Stress" to center of last image.
Code is like:
<div>
<div id="imgWeight" class="floatLeft">
<img alt="Body Weight" class="icon110" src="../../images/OnTrack/bmi_icon_100.png"/>
<div class="textaligncenter">Body Weight</div>
</div>
<div id="imgBloodPressure" class="margin5 floatLeft">
<img alt="Blood Pressure" class="icon110" src="../../images/OnTrack/health_manager_icon_100.png"/>
<div class="textaligncenter">Blood Pressure</div>
</div>
<div id="imgStress" class="floatleft">
<img alt="Stress" class="icon110" src="../../images/OnTrack/stress_icon_100.png"/>
<div class="textaligncenter">Stress</div>
</div>
</div>
css
.
padding20px{
padding:20px;
}
.margin20px{
margin:20px;
}
.imgSteps{
padding:20px;
position:absolute;
}
.bckColor{
background-color: #secondary;
color:#white;
}
.fontfamily {
font-family: "Avenir Next Light";
}
h3{
color:grey;
}
.margin5 {
margin-left: 5%;
margin-right: 5%;
}
.margin15 {
margin-left: 15%;
}
.margin6{
margin-left: 6%;
}
.margin10 {
margin-left: 10%;
}
.margin50{
margin-left:50%;
}
.absPosition{
position: absolute;
}
.floatLeft{
float:left;
}
.shadow {
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4);
}
.opacity{
opacity: 0.3;
filter: alpha(opacity=30);
}
#dvNavigationArea ul li {
display: inline;
padding-right:20px;
width:100px;
position:relative;
}
.underline{
content:'';
height: 0;
left:0;
bottom:0px;
border-bottom: 4px solid #53ADB3;
}
/*for css chart control*/
.container {
width: 100px;
margin: 20px;
background: #fff;
padding: 20px;
float: left;
}
.horizontal .progress-bar {
height: 45px;
width: 100%;
padding: 12px 0;
}
.horizontal .progress-track {
width: 100%;
height: 20px;
background: #ebebeb;
}
.horizontal .progress-fill {
background: #666;
height: 20px;
width: 50%;
color: #fff;
text-align: center;
font-size: 12px;
line-height: 20px;
}
.fontColor{
color:#53ADB3;
}
.fontsizexlarge{
font-size: x-large;
}
.fontsizexxlarge{
font-size: xx-large;
}
.fontsize22{
font-size: larger;
}
.fontsize10{
font-size: large;
}
.icon110
{
background-color:#secondary;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius: 50%;
width:#col-size;height:#col-size;
}
.textaligncenter{
text-align:center;
}
.minwidth
{
}
You did the typo while assigning the class for the last div. Use floatLeft instead of floatleft (the letter l is culprit)
Js Fiddle
Your last div class name should be floatLeft instead of flaotleft.
<div id="imgStress" class="floatLeft">
Fiddle
* add this code *
.floatleft{
float: left;
text-align: center;}
http://jsfiddle.net/80sems56/3/
Your HTML has a mistake in. Your missing a capital 'L' on the floatLeft class.
Updated Fiddle
<div>
<div id="imgWeight" class="floatLeft">
<img alt="Body Weight" class="icon110" src="../../images/OnTrack/bmi_icon_100.png"/>
<div class="textaligncenter">Body Weight</div>
</div>
<div id="imgBloodPressure" class="margin5 floatLeft">
<img alt="Blood Pressure" class="icon110" src="../../images/OnTrack/health_manager_icon_100.png"/>
<div class="textaligncenter">Blood Pressure</div>
</div>
<div id="imgStress" class="floatLeft">
<img alt="Stress" class="icon110" src="../../images/OnTrack/stress_icon_100.png"/>
<div class="textaligncenter">Stress</div>
</div>
</div>
I'm trying to vertically centered align the text with my image. Currently, the text looks like it's aligned at the bottom of the image.
Here's my jsfiddle:
http://jsfiddle.net/huskydawgs/L5Le0w37/7/
Here's my HTML:
<div class="column-resources-box">
<img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" />
<h4 class="title-bar">Apple<br>
Center</h4>
<ul>
<li>Gala</li>
<li>Pink Lady</li>
<li>Fuji</li>
</ul>
</div>
Here's my CSS:
.column-resources-box {
width: 200px;
float: left;
margin: 15px;
}
.column-resources-box img {
margin:0 2%;
float:left;
height:50px;
width:50px;
}
}
h4.title-bar {
color: #2251a4;
background: none;
font-family: 'Arial', inherit;
font-weight: normal;
text-transform: none;
line-height: normal;
margin: 0;
padding: 0;
text-align: left;
}
Try this out.
I wrapped the two items you want centered in the div, and then centered the image.
.wrap {
display:inline
}
.apple_image {
vertical-align:middle
}
.column-resources-box {
width: 200px;
float: left;
margin: 15px;
}
.column-resources-box img {
margin:0 2%;
float:left;
height:50px;
width:50px;
}
}
h4.title-bar {
color: #2251a4;
background: none;
font-family: 'Arial', inherit;
font-weight: normal;
text-transform: none;
line-height: normal;
margin: 0 0 0 0;
padding: 0;
text-align: left;
}
<div class="column-resources-box">
<div class="wrap">
<a class="apple_image" href="http://en.wikipedia.org/wiki/Apple">
<img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" />
</a>
<h4 class="title-bar">AppleCenter</h4>
</div>
<ul>
<li>Gala</li>
<li>Pink Lady</li>
<li>Fuji</li>
</ul>
</div>
You could use absolute positioning to put things exactly where you want them.
Fiddle: http://jsfiddle.net/t8rL871j/
.column-resources-box {
width: 200px;
float: left;
margin: 15px;
position: relative;
}
.column-resources-box img {
margin:0 2%;
height:50px;
width:50px;
position: absolute;
}
h4.title-bar {
color: #2251a4;
background: none;
font-family:'Arial', inherit;
font-weight: normal;
text-transform: none;
line-height: normal;
margin: 0 0 0 0;
padding: 0;
text-align: left;
position: absolute;
top: 10px;
left: 60px;
}
.column-resources-box ul {
margin:60px 2%;
height:50px;
width:70px;
position: absolute;
}
<div class="column-resources-box"> <img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" />
<h4 class="title-bar">Apple<br>
Center</h4>
<ul>
<li>Gala</li>
<li>Pink Lady</li>
<li>Fuji</li>
</ul>
</div>
There's a syntax error in your CSS. Here's your CSS, excerpted from the top:
.column-resources-box {
width: 200px;
float: left;
margin: 15px;
}
.column-resources-box img {
margin:0 2%;
float:left;
height:50px;
width:50px;
}
}
Notice the extraneous close brace. That seems to be preventing the browser from getting to the remaining CSS.
Fixed: http://jsfiddle.net/L5Le0w37/13/
You can move it down a little to center it with position:relative; top:7px;:
Centered: http://jsfiddle.net/L5Le0w37/16/
I rewrote your code a bit but here's another possible way using top padding..
vertical-align: top;
padding: 4px 0px 0px 0px; /* adjust top padding */
http://jsfiddle.net/Hastig/mj5yzsr7/3/
You can adjust the spacing between Apple and Center with h4.title-bar { line-height: 25px; } then adjust the top padding to compensate.
Wrap your text and image inside of a div and style it like this:
HTML
<div class="appleWrapper">
<img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" />
<h4 class="title-bar">Apple<br>Center</h4>
</div>
CSS
.appleWrapper {
height: 50px;
}
.title-bar {
margin: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
Check out the online example here
I have just started learning html and css3. trying to create a login page but when I am trying to add once check box its not inline with label. When I run the same code only for check box its inline. not able to understand what is the exact issue.
HTML Code is
<div class="checkbox1">
<input type="checkbox" id="cb">
<label for="cb">Stay signed in</label>
</div>
CSS code is
#wrapper #subwrapper .checkbox1{
display: inline-block;
float: left;
font-size: 20px;
color: #ffffff;
}
When I include the same in my complete html code and css code the check box and label are not perfect.
Complete HTML code is.
<!doctype html>
<head>
<title>Dchamps-Signin</title>
<style>
body {
background-image: url("bg_signin.jpg");
background-repeat: no-repeat;
}
</style>
<link rel="stylesheet" type="text/css" href="signin.css">
</head>
<body>
<header>
<div class="header">
<div>
</header>
<div id="wrapper">
<div class="logo">
<img src="Logo_FF.gif">
</div>
<div class="heading">
Sign in to your account
</div>
<div id="subwrapper">
<div class="un">
Username
</div>
<input type="text" size="60">
<div class="pw">
Password
</div>
<input type="text" size="60">
<div class="signin">
<button class="button">Sign in</button>
</div>
<div class="checkbox1">
<input type="checkbox" id="cb">
<label for="cb">Stay signed in</label>
</div>
<div class="needhelp">
Need Help?
</div>
</div>
</div>
<footer>
<div class="footer">
<ul>
<li>Help</li>
<li>Terms</li>
<li>CompanyInfo</li>
</ul>
</div>
</footer>
</body>
</html>
and My complete CSS Code
.header {
width: 100%;
height: 50px;
margin-bottom: 25;
}
#wrapper{
width: 800px;
margin: 0 auto;
float: center;
text -align: center;
}
#wrapper .logo{
margin-top: 25px;
text-align: center;
}
#wrapper .heading{
padding-top: 20px;
font-size: 45px;
color: #e94324;
text-align: center;
}
#wrapper #subwrapper {
width: 400px;
margin: 0 auto;
}
#wrapper #subwrapper .un {
padding-top: 15px;
color: #f6ec28;
font-size: 25px;
float: left;
padding-left: 5px;
}
#wrapper #subwrapper .pw {
padding-top: 15px;
color: #f6ec28;
font-size: 25px;
float: left;
padding-left: 5px;
}
#wrapper #subwrapper input{
padding-top: 5px;
background-color: transparent;
height: 50px;
}
#wrapper #subwrapper .signin{
padding-top: 15px;
color: #f6ec28;
font-size: 25px;
}
#wrapper #subwrapper .button{
background-color: #f26534;
height: 65px;
width: 380px;
font-size: 35px;
/*-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;*/
color: #ffffff;
top: 55%;
}
#wrapper #subwrapper form {
}
#wrapper #subwrapper .checkbox1{
display: inline-block;
float: left;
font-size: 20px;
color: #ffffff;
position: relative;
}
#wrapper #subwrapper .needhelp{
float: right;
color: #f6ec28;
padding-bottom: 80px;
}
.footer{
height: 20px;
clear: both;
border-top: 1px solid #254A73;
}
.footer ul li{
float: right;
display:inline-block;
margin-right: 20px;
color: #ffffff;
}
I am not sure why the check box is not in line.
Regards,
KJ
Here is a fiddle with the fixed checkbox alignment issue, it is just a quick fix but you should try to think about your structure and how you style: http://jsfiddle.net/n2b93zaz/2/
#wrapper #subwrapper .checkbox1 {
display: inline-block;
float: left;
font-size: 20px;
color: #000000;
position: relative;
}
/*Added this css rule to override the input properties set earlier*/
#wrapper #subwrapper .checkbox1 input{
height:auto;
}
Your problem this:
#wrapper #subwrapper input{
padding-top: 5px;
background-color: transparent;
height: 50px; //This is your problem. Change height to auto or without value.
}
As the title suggests, my website works how I want it to work in Firefox: when I use arrow down, it doesn't flicker. But this functionality isn't such in IE and Chrome. Is there a resolution to this? The website is as follows: Contrabang. Thank you advance for your help.
HTML is as follows:
<section class="main">
<div class="icons">
<a class="twitter" target="_blank" href="http://www.twitter.com/kadeemlaurie"></a>
<a class="facebook" target="_blank" href="http://www.facebook.com/pages/Contrabang/127379984089682"></a>
<a class="googleplus" target="_blank" href="http://googleplus.com/pages"></a>
</div>
<div id="wrap">
<div id="featured">
<div class="wrap">
<div class="textwidget">
<div class="cup">
<img src="../Contrabang/img/red-cup.png" height="200" alt="red-cup">
</div>
</div>
</div>
</div>
<div id="theFixed"><h1>CONTRABANG</a></h1></div>
<div class="bg1">
<hgroup class="billboard second">
<h2 style="font-size: 33px; opacity: 1; font-family: 'dosis'">
We are an events management agency based in London. We create memorable experiences. Check out our upcoming event.</h2>
</hgroup>
<br>
<br>
<br>
<div class="pad">
<img src="../Contrabang/img/Contrabang.jpg" width="300" height="400" alt="contrabang">
</div>
<h2 style="font-size: 33px; opacity: 1; font-family: 'dosis'">
Buy Tickets: 07949747971</h2>
</div>
</div>
</section>
& the main CSS
.main{text-align:center;}
#featured {
background: #E94F78 url(http://www.contrabang.com/Contrabang/img/bubbles.png) no-repeat top;
background-size: 385px 465px;
color: #fff;
height: 535px;
overflow: hidden;
position: relative;
z-index: -2;
}
#featured .wrap {
overflow: hidden;
clear: both;
padding: 70px 0 30px;
position: fixed;
z-index: -1;
width: 100%;
}
#featured .wrap .widget {
width: 80%;
max-width: 1040px;
margin: 0 auto;
}
.textwidget{
padding: 0;
}
#wrap {
margin: 0 auto;
padding: 0;
}
.cup{
margin-top:210px;
}
body, h1, h2, h3, p {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
a img { border: 0; }
#theFixed{
position:fixed;
background-image:url(http://www.contrabang.com/Contrabang/img/leopard-print.jpg);
width:100%;
text-align:center;
overflow: hidden;
background-position: center;
}
h1{
font: 800 1.313em "proxima-nova", sans-serif;
font-size:3.125em;
text-align:center;
padding:10px 10px;
margin:20px 20px;
background-color:#E94F78;
padding-left: 0.15em;
text-decoration:none;
display:inline-block;
letter-spacing: 6px;
padding-left: 0.15em;
color:yellow;
}
h1 a{
text-decoration: none;
letter-spacing: 8px;
padding-left: 0.15em;
color:yellow;
}
.bg1{
background-image:url(http://www.contrabang.com/Contrabang/img/grey-background.jpg);
width: 100%;
height:900px;
background-color: #e94f78;}
h2{
font-family: georgia;
font-size:3em;
color:black;
}
.billboard {
overflow: hidden;
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.pad{
padding:20px;
}
.billboard a {
color: #000000;
}
.billboard {
padding-top:230px;
}
That Rita Ora image is almost 4mb in size. I'd hazard a guess that that's your culprit right there.
I'd suggest doing some reading up on optimising images for use on the web.
That image should be about 30/40k at most.
As the title suggests my website, www.contrabang.com doesn't seem to function in Moxilla. But it functions fine in Google Chrome, and a bit less fine in IE. This is the first time I've made a website before so apologies in advance if I've made any beginner errors. But I cant seem to find a solution.
HTML is as follows:
<div class="icons">
<a class="twitter" href="http://www.twitter.com/kadeemlaurie"></a>
<a class="facebook" href="http://www.facebook.com/pages/Contrabang/127379984089682"></a>
<a class="googleplus" href="http://googleplus.com/pages"></a>
</div>
<div id="wrap">
<div id="featured">
<div class="wrap">
<div class="textwidget">
<div class="cup">
<img src="..\Contrabang\img\red-cup.png" height="200">
</div>
</div>
</div>
</div>
<div id="theFixed"><h1>CONTRABANG</h1></div>
<div class="bg1">
<hgroup class="billboard second">
<h2 style="font-size: 33px; opacity: 1; font-family: 'dosis'">
We are an events management agency based in London. We create memorable experiences. Check out our upcoming event.</h2>
</hgroup>
<br>
<br>
<br>
<div class="pad">
<img src="..\Contrabang\img\Contrabang.jpg" width="300" height="400">
</div>
<h2 style="font-size: 33px; opacity: 1; font-family: 'dosis'">
Buy Tickets: 07949747971</h2>
</div>
</div>
</section>
& the main CSS
.main{text-align:center;}
#featured {
background: #E94F78 url(http://www.creativityfluid.com/wp-content/themes/creativityfluid/images/img-bubbles-red.png) no-repeat top;
background-size: 385px 465px;
color: #fff;
height: 535px;
overflow: hidden;
position: relative;
z-index: -2;
}
#featured .wrap {
overflow: hidden;
clear: both;
padding: 70px 0 30px;
position: fixed;
z-index: -1;
width: 100%;
}
#featured .wrap .widget {
width: 80%;
max-width: 1040px;
margin: 0 auto;
}
.textwidget{
padding: 0;
}
#wrap {
margin: 0 auto;
padding: 0;
}
.cup{
margin-top:210px;
}
body, h1, h2, h3, p {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
#theFixed{
position:fixed;
background-image:url(http://s10.postimg.org/wyyotlk15/krystalrae_2012_fall_print_leopard_sketch.jpg);
width:100%;
text-align:center;
overflow: hidden;
background-position: center;
}
h1{
font: 800 1.313em "proxima-nova", sans-serif;
font-size:3.125em;
text-align:center;
padding:10px 10px;
margin:20px 20px;
background-color:#E94F78;
padding-left: 0.15em;
text-decoration:none;
display:inline-block;
color:yellow;
}
h1 a{
text-decoration: none;
letter-spacing: 8px;
padding-left: 0.15em;
color:yellow;
}
.bg1{
background-image:url(http://www.coalmarch.com/sites/all/themes/coalmarch/images/paper-background-coalmarch-website-design.jpg);
width: 100%;
height:900px;
background-color: #e94f78;}
h2{
font-family: georgia;
font-size:3em;
color:black;
}
.billboard {
overflow: hidden;
width: 960px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.pad{
padding:20px;
}
}
.billboard a {
color: #000000;
}
.billboard {
padding-top:230px;
}
Try removing this extra brace. FF might not be as forgiving as Chrome here:
.pad{
padding:20px;
}
}
Links to your stylesheets are set the wrong way and I can imagine browsers handles this differently. also, you're trynig to load a file from your c:\drive, which is obviously not going to work