<div class="card">
<img class='sound' src='https://www.google.com/images/srpr/logo4w.png'>
<div class='txt'>
this is a sentence.this is a sentencethis is a sentence.
</div></div>
.card{
margin:5px 14px;
border:thin solid blue;
}
.sound{
width:32px;
height:32px;
cursor:pointer;
}
.txt{
display:inline-block;
margin-left:25px;
vertical-align:middle; //doesn't work
border:thin solid red;
}
How can I align .txt div to be on the middle of .sound image ?
fiddle is here
Put vertical-align on .sound?
.card{
margin:5px 14px;
border:thin solid blue;
}
.sound{
width:32px;
height:32px;
cursor:pointer;
vertical-align:middle;
}
.txt{
display:inline-block;
margin-left:25px;
border:thin solid red;
}
http://jsfiddle.net/hWejY/1/
Insert vertical-align: middle into class sound
.card{
margin:5px 14px;
border:thin solid blue;
}
.sound{
width:32px;
height:32px;
cursor:pointer;
vertical-align:middle
}
.txt{
display:inline-block;
margin-left:25px;
vertical-align:middle;
border:thin solid red;
}
DEMO
vertical-align:middle;
Should be on .sound
Related
I have a navigation bar at the top of my website.
HTML:
<text align="center">
<div class="home-nav">
<button class="nav-btn">What's New</button>
<button class="nav-btn">Community</button>
<button class="play-btn">Coming Soon</button>
<button class="nav-btn">Profile</button>
<button class="nav-btn">Information</button>
</text>
CSS:
.home-nav {
width:1240px;
height:49px;
background-color:#F1B84E;
border:5px solid #FFDE84;
border-style:outset;
}
.nav-btn {
width:auto;
height:49px;
background-color:#F1B84E;
border:none;
font-family:showcard gothic;
color:white;
-webkit-text-stroke:1.25px #000000;
-webkit-text-fill-color:#FFFFFF;
font-size:20px;
}
.play-btn {
width:auto;
height:69px;
background-color:#79E119;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:5px solid #FFFFFF;
font-size:20px;
font-family:showcard gothic;
color:white;
}
I want the play button to be bigger than the normal buttons. But when I make the height higher than the normal buttons and look at it, it makes the normal buttons change position. How can I fix this?
Ok I have bring some small changes to your CSS styling just try these and let me know its working as you wanted or not.
body{
margin:0; padding:0;
}
.home-nav {
width:90%;
margin: 0 auto;
display: block;
background-color:#F1B84E;
border:5px solid #FFDE84;
border-style:outset;
}
.nav-btn {
width:auto;
height:49px;
background-color:#F1B84E;
border:none;
font-family:showcard gothic;
color:white;
-webkit-text-stroke:1.25px #000000;
-webkit-text-fill-color:#FFFFFF;
font-size:20px;
}
.play-btn {
width:auto;
height:70px;
background-color:#79E119;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:5px solid #FFFFFF;
font-size:20px;
font-family:showcard gothic;
color:white;
}
I want image in left side and content in right side. But the image not in the middle when I using float:left, maybe someone of you give me a solution?
HTML:
<div class="wrap-shop"><div class="pro-img">
<img src="http://tshop.r10s.com/c18/f19/b968/3a87/a005/a662/e954/11bee5abd6005056ae13f2.jpg?_ex=125x125"/></div>
<div class="kanan">
<div class="discount">
40%
</div> <!-- end discount -->
<div class="judul">
beauty korea beauty korea beauty korea beauty korea beauty korea
</div>
<div class="harga-coret">Rp<del>1,000,000</del></div>
<div class="harga-asli">Rp 500,000</div>
<div class="bonusRsp">
300,000
</div>
<span class="go-shop">
Rincian Produk
</span>
CSS:
.wrap-pop{
margin-top:10px;
}
.wrap-shop{
border:solid #eaeaea 1px;
width:100%;
height:130px;
}
/* here is problem */
.pro-img{
padding:2px;
border:1px solid red;
--float:left;
vertical-align: middle;
display: table-cell;
width:125px;
height:125px;
background: #fff;
background-size:135px 100px;
--border-right:2px solid #bf0000;
}
.pro-img img{
max-width:125px;
max-height:125px;
border:1px solid yellow;
}
.kanan{
border:3px solid brown;
}
.judul{
font-family:Arial;
font-weight:bold;
margin-left:145px;
text-transform:capitalize;
text-decoration:none;
margin-bottom:1px;
color:black;
font-size:12px;
height:30px;
border:1px solid red;
overflow:hidden;
}
.discount{
border:1px solid yellow;
text-align:center;
font-weight:bold;
font-size:12px;
}
.discount::before {
content: "Diskon ";
}
.bonusRsp{
color:#bf0000;
margin-top:4px;
margin-bottom:5px;
font-size:12px;
}
.bonusRsp::before {
content: "Bonus ";
color:black;
font-size:12px;
}
.bonusRsp::after {
content: " Poin";
color:black;
font-size:12px;
}
.discount a{
color:yellow;
}
.harga-coret{
margin-top:5px;
font-size:11px;
margin-left:150px;
}
.harga-coret a{
color:black;
text-decoration:none;
}
.harga-asli{
font-size:15px;
color:#bf0000;
font-weight:bold;
margin-left:150px;
margin-bottom:2px;
}
.harga-asli a{
color:#bf0000;
text-decoration:none;
}
.go-shop{
border:1px solid #bf0000;
border-radius:2px;
width:120px;
color:#bf0000;
text-align:center;
background-color:white;
margin-left:9px;
text-decoration:none;
font-size:12px;
}
.judul a{
color:black;
text-decoration:none;
}
.go-shop a{
color:black;
text-decoration:none;
}
Here is my code https://jsfiddle.net/dedi_wibisono17/m6snbftt/2/
thank you.
--float:left;, change it to float:left; to work. Update: Add top padding and decrease the height.
Please try following:
.pro-img{
padding-top:15px;
padding-right:2px;
border:1px solid red;
float:left;
vertical-align: middle;
display: table-cell;
width:125px;
height:111px;
background: #fff;
background-size:135px 100px;
--border-right:2px solid #bf0000;
}
HI now used to this code
Define
.kanan{display:table-cell;}
Remove float left .pro-img
Demo
.kanan{display:table-cell;vertical-align:top;}
.wrap-pop{
margin-top:10px;
}
.wrap-shop{
border:solid #eaeaea 1px;
width:100%;
height:130px;
}
/* here is problem */
.pro-img{
padding:2px;
border:1px solid red;
vertical-align: middle;
display: table-cell;
width:125px;
height:125px;
background: #fff;
background-size:135px 100px;
--border-right:2px solid #bf0000;
}
.pro-img img{
max-width:125px;
max-height:125px;
border:1px solid yellow;
}
.kanan{
border:3px solid brown;
}
.judul{
font-family:Arial;
font-weight:bold;
margin-left:145px;
text-transform:capitalize;
text-decoration:none;
margin-bottom:1px;
color:black;
font-size:12px;
height:30px;
border:1px solid red;
overflow:hidden;
}
.discount{
border:1px solid yellow;
text-align:center;
font-weight:bold;
font-size:12px;
}
.discount::before {
content: "Diskon ";
}
.bonusRsp{
color:#bf0000;
margin-top:4px;
margin-bottom:5px;
font-size:12px;
}
.bonusRsp::before {
content: "Bonus ";
color:black;
font-size:12px;
}
.bonusRsp::after {
content: " Poin";
color:black;
font-size:12px;
}
.discount a{
color:yellow;
}
.harga-coret{
margin-top:5px;
font-size:11px;
margin-left:150px;
}
.harga-coret a{
color:black;
text-decoration:none;
}
.harga-asli{
font-size:15px;
color:#bf0000;
font-weight:bold;
margin-left:150px;
margin-bottom:2px;
}
.harga-asli a{
color:#bf0000;
text-decoration:none;
}
.go-shop{
border:1px solid #bf0000;
border-radius:2px;
width:120px;
color:#bf0000;
text-align:center;
background-color:white;
margin-left:9px;
text-decoration:none;
font-size:12px;
}
.judul a{
color:black;
text-decoration:none;
}
.go-shop a{
color:black;
text-decoration:none;
}
<div class="wrap-pop">
<div class="wrap-shop">
<div class="pro-img">
<img src="http://tshop.r10s.com/c18/f19/b968/3a87/a005/a662/e954/11bee5abd6005056ae13f2.jpg?_ex=125x125"/>
</div> <!-- end pro-img -->
<div class="kanan">
<div class="discount">
40%
</div> <!-- end discount -->
<div class="judul">
beauty korea beauty korea beauty korea beauty korea beauty korea
</div>
<div class="harga-coret">Rp<del>1,000,000</del></div>
<div class="harga-asli">Rp 500,000</div>
<div class="bonusRsp">
300,000
</div>
<span class="go-shop">
Rincian Produk
</span>
</div>
</div> <!-- end wrap shop -->
</div> <!-- end wrap-pop -->
Add this display: table; class .wrap-shop
https://jsfiddle.net/m6snbftt/5/
If you go to Google Play Store Website,you will notice that the width of the SearchBar at the top changes if you change the window width.
Can someone please give me an example on how I can achieve such variable width behaviour using just HTML and CSS?
CSS
body {
margin:0;
min-width:960px;
}
#upperbar {
background-color:#F1F1F1;
white-space:nowrap;
height:60px;
width:100%;
}
#logobardiv {
margin:10px 20px 10px 30px;
display:inline-block;
}
#logo {
height:39px;
width:183px;
}
#searchbardiv {
font-size:0;
display:inline-block;
height:100%;
padding-left:10px;
vertical-align:middle;
white-space:nowrap;
min-width:200px;
}
#searchbar {
height:28px;
/*max-width:589px;*/
max-width:100%;
width:589px;
min-width:545px;
font-size:16px;
border:1px solid #A8A8A8;
border-right:none;
display:inline-block;
vertical-align:middle;
}
#searchbar:hover {
border:1px solid black;
border-right:none;
}
::-webkit-input-placeholder {
color:#A9A9A9;
padding:0 0 0 7px;
}
#searchbutton {
vertical-align:middle;
background:#4584F0;
height:28px;
width:60px;
display:inline-block;
border:1px solid transparent;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
padding:0;
margin:0;
outline:none;
white-space:nowrap;
}
#searchbuttonimg {
vertical-align:middle;
background:url(images/search.png) no-repeat center;
display:inline-block;
height:100%;
width:26px;
}
#signindiv {
display:inline-block;
height:100%;
white-space:nowrap;
vertical-align:middle;
}
#appsimg {
display:inline-block;
vertical-align:middle;
}
HTML
<body>
<div class="container">
<div id="upperbar">
<div id="logobardiv">
<img id="logo" src="https://www.gstatic.com/android/market_images/web/play_logo_x2.png" />
</div>
<div id="searchbardiv">
<input id="searchbar" type="text" placeholder="Search" />
<button id="searchbutton"> <span id="searchbuttonimg"></span>
</button>
</div>
<div id="signindiv">
<img id="appsimg" src="images/apps.png" />
</div>
</div>
</div>
JSFiddle
simple way is you need to set a 3 different width max-width, min-widtht and actual width
like
input{
max-width:100%;
min-width:300px;
width:800px;
}
I used display:flex to achieve the variable length of the elements.
Refer the below link for a good explanation
FlexBox
Is it possible to create a header div that is sheared/oblique like in the image below?
Its for a mobile website
Yes, this is possible: DEMO
.wrapper {
overflow:hidden;
height:300px;
width:100%;
background: url(http://placekitten.com/g/300/300);
position:relative;
}
.top {
background:gray;
height:60%;
width:130%;
position:absolute;
top:-30%;
left:-5%;
transform:rotate(5deg);
border-bottom:10px solid white;
}
.text{
position:absolute;
top:20px;
right:10%;
padding:10px;
border-radius:10px;
border:5px solid white;
transition:all 0.8s;
}
.text:hover{
box-shadow:0 0 10px white;
}
<div class="wrapper">
<div class="top"></div>
<div class="text">MENU</div>
</div>
I want to position an input element inside a div , but for some reason the input element is overflowing the div. What is the issue?
http://jsfiddle.net/aklintsevich/p1o584wg/
html:
<section class="full" id="third">
<div id="contact">
<form action="#" method="post" id="form">
<div class="email_info top white_border icomoon">
<div id="name_font" class="icon center_text">
</div>
<div>
<input type="text" name="firstname">
</div>
</div>
<div class="email_info bottom white_border icomoon">
<div id="email_font" class="icon center_text">
</div>
<div >
<input type="text" name="firstname">
</div>
</div>
</form>
</div>
</section>
css:
#third{
background-color:#22AFA0;
}
#contact{
background-color:blue;
margin:0px auto 30px auto;
position:relative;
top:30%;
width:65%;
height:30%;
background-color:red;
}
.email_info{
height:40%;
width:45%;
position:absolute;
background-color:green;
}
.message{
position:absolute;
right:0px;
height:100%;
width:45%;
background-color:green;
}
#message_icon{
height:40%;
width:20%;
background-color:blue;
border-right:1px solid white;
border-bottom:1px solid white;
}
#message_icon:before{
color:white;
display:block;
width:100%;
height:100%;
text-align:center;
line-height:80px;
font-size:2.5em;
content:"\e610";
}
.text_position{
float:right;
position:absolute;
}
.top{
top:0px;
}
.bottom{
bottom:0px;
}
#form_button{
position:relative;
width:65%;
height:20%;
/*background-color:orange;*/
}
.icon{
width:20%;
height:100%;
background-color:blue;
border-right:1px solid white;
}
.icomoon{
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
.white_border{
border:2px solid white;
}
.center_text{
text-align:center;
}
#name_font:before{
font-size:2.5em;
display:block;
width:100%;
height:100%;
line-height:80px;
color:white;
content:"\e611";
}
#email_font:before{
font-size:2.5em;
display:block;
width:100%;
height:100%;
line-height:80px;
color:white;
content:"\e60f";
}
set the attribute 'overflow' to 'auto' in relevant div s. as an example,
.email_info{
overflow : auto;
}
Divs have a default display of block,therefore, to have two divs to be able to line up on the same line you have to declare them as inline-block.
.email_info{
display:inline-block;
}