Here's my login page:
Sorry, i tried to post my code on jsfiddle but it messes it up big time...
Anyway...here's my html and css:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Território Levita</title>
<link type="text/css" rel="stylesheet" href="css/StyleSheet1.css" />
<script src="js/JavaScript1.js"></script>
</head>
<body>
<form id="form1" runat="server">
<header class="headerLogin">
<h1>Território Levita</h1>
</header>
<div class="boxLogin">
<h1>Área de Login</h1>
<label>
<span>Usuário: </span>
<asp:TextBox runat="server" ID="txtUsuario" CssClass="inputText" ></asp:TextBox>
</label>
<label>
<span>Senha: </span>
<asp:TextBox runat="server" ID="txtSenha" TextMode="Password" CssClass="inputText"></asp:TextBox>
</label>
<label id="labelBtn">
Cadastre-se
Esqueci minha senha
<asp:Button runat="server" CssClass="btn" ID="btnLogar" Text="Entrar" />
</label>
</div>
</form>
</body>
</html>
* { /*Zerando margin e padding global.*/
margin: 0px;
padding: 0px;
}
body { /*Estilo de body*/
background-color: #fff;
}
.inputText { /*Zerando padding dos inputs*/
padding: 0px;
}
.headerLogin { /*Área de login*/
width: 95%;
background-color: #67BCDB;
margin: 10px auto 150px auto;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 100px;
line-height: 100px;
position: relative;
-moz-box-shadow: 0 0 10px #4e707c; /*Sombra Firefox*/
-webkit-box-shadow: 0 0 10px #4e707c; /*Sombra chrome*/
box-shadow: 0 0 10px #4e707c;
}
.headerLogin h1 { /*Texto do cabeçalho*/
color: #fff;
text-transform: uppercase;
margin-left: 20px;
display: inline-block;
}
.boxLogin { /*Estilo da área de login*/
-moz-border-radius: 5px; /*Firefox*/
-webkit-border-radius: 5px; /*Chrome*/
border-radius: 5px; /*IE*/
border: 8px solid #eee;
-moz-box-shadow: 0 0 10px #4e707c; /*Sombra Firefox*/
-webkit-box-shadow: 0 0 10px #4e707c; /*Sombra chrome*/
box-shadow: 0 0 10px #4e707c; /*Sombra IE*/
margin: 0px auto;
width: 500px;
position: relative;
}
.boxLogin h1 { /*Estilo do cabeçalho*/
font-weight: normal;
font-size: 22px;
text-align: center;
background-color: #67BCDB;
color: #fff;
text-transform: uppercase;
padding: 2px 2px 2px 2px;
margin-bottom: 10px;
height: 50px;
line-height: 50px;
}
.boxLogin label { /*Container dos controles*/
display: block;
width: 90%;
background-color: #dbd8d8;
margin: 0 auto 10px auto;
-moz-border-radius: 6px; /*Firefox*/
-webkit-border-radius: 6px; /*Chrome*/
border-radius: 5px; /*IE*/
padding: 1px 1px 1px 1px;
}
.boxLogin span { /*Estilo do texto (usuário e senha)*/
float: left;
width: 60px;
text-align: left;
margin-left: 5px;
font-size: 1.2em;
letter-spacing: 1px;
font-family: 'Bitstream Vera Sans Mono';
font-weight: normal;
}
.boxLogin .inputText { /*Estilo dos inputs*/
width: 200px;
padding: 5px;
margin-top: 1px;
margin-bottom: 1px;
margin-left: 150px;
}
.boxLogin #labelBtn { /*Container do botão*/
background: #fff;
position: relative;
text-align: right;
}
.btn { /*Estilo do botão*/
background-color: #E44424;
padding: 7px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
color: #fff;
-moz-box-shadow: 0 0 10px #4e707c; /*Sombra Firefox*/
-webkit-box-shadow: 0 0 10px #4e707c; /*Sombra chrome*/
box-shadow: 0 0 10px #4e707c;
cursor: pointer;
width: 150px;
}
#labelBtn .btn {
}
a {
text-decoration: none;
}
As you can see, i have labels as containers for my spans and asp.textboxes...here's the thing: i'm trying to make the label with the anchors and the button inside display them as three 'blocks' with same size...like 33% each...and the button would be exactly where it is now. It is in the right position because i've set its parent label to have text-align set to right...But it wrecks my "3 blocks with same size each" plan...how can i make it happen?
And one more thing....labels or field sets for encapsulation of components?
For your purposes, "label" in HTML 5 is just like "div", so you can add classes and id's the same way that you would for a div:
If your box width isn't dynamically adjusting, and assuming your ".boxLogin" label is 180px tall, just give each of your labels a class like ".heightSetter", and in your css add:
.heightSetter {
height: 60px;
float: right;
}
This will give then all an equal height and float the to the right of the enclosing element.
Make sure to also set the "height" property for ".boxLogin" in your CSS.
Related
I want to achieve drop-down button as per following design image. See drop-down menu starts just after middle of button. My problem is that button has transparent background to utilize background image from root parent div.
So far I have achieved following image. As I said above, I want to achieve white edges outside of border-radius.
.dropdown-header {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: 210px;
height: 185px;
margin: auto;
}
.div-user-header {
width: 210px;
margin: auto;
position: relative;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.div-user-header-1 {
width: 206px;
height: 24px;
border: 2px solid #9CB2C7;
border-radius: 20px;
display: inline-block;
text-align: center;
padding-top: 5px;
}
.div-user-header-1 a {
text-decoration: none;
color: #FCCC00;
display: block;
}
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
}
.div-user-header-2 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-2 {
height: 40px;
padding: 12px 15px;
}
.div-user-header-3 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-3 {
height: 40px;
padding: 12px 15px;
}
.div-add-profile-card {
padding: 0px 15px;
}
.div-add-profile-card a {
text-decoration: none;
color: #8C8C8C;
font-size: 10px;
padding: 12px;
display: block;
border-top: 1px solid #D6D6D6;
}
<div class="dropdown-header">
<div class="div-user-header">
<div class="div-user-header-1">
ProfileUser 01
</div>
<div class="div-user-header-list">
<div class="div-user-header-2">
<img src="../../../assets/images/avtar2.png" width="34px" height="34px" style="padding-right: 5px; vertical-align: middle" />
ProfileUser 01
</div>
<div class="div-user-header-3">
<img src="../../../assets/images/user-02.png" width="30px" height="30px" style="padding-right:5px; vertical-align: middle" />
ProfileUser 02
</div>
<div class="div-add-profile-card">
+ Add Profile Cards
</div>
</div>
</div>
Any suggestion would be really helpful.
Use ::after ::before pseudo elements for the dropdown and apply separate background-image as marked in the image. Apply position:absolute and align then in the top left and right corners based on the design.
It's very simple. You have achieved almost 99%. Just add below styles to your CSS of .div-user-header-list as below:
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
padding-top: 20px;
margin-top: -20px;
z-index: -1;
}
See the updated fiddle here: https://jsfiddle.net/8ukj3wy1/1/
Check this one out:
https://jsfiddle.net/sLy7fnzg/
Essentially use a negative margin to move the .div-user-header-list up and use relative positioning to enable z-indexes.
Also, to resolve the issue with the half border, remove the border from the .div-user-header-1 and add a whole element as a ::before to the .div-user-header like so:
.div-user-header::before {
content: "";
background: #9CB2C7;
width: 210px;
height: 30px;
display:block;
position: absolute;
top: 0;
left: 0;
border-radius: 20px;
z-index: 1;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<style>
body{
background-color: grey;
}
.dropdown-header {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: 210px;
height: 203px;
margin: auto;
overflow: hidden;
/*background-color: #fff;*/
}
.div-user-header-list:before,
.div-user-header-list:after {
content: "";
position: absolute;
height: 10px;
width: 20px;
bottom: 0;
}
.div-user-header-list:before {
/*right: -20px;*/
left: 1px;
top: -10px;
border-radius: 0 0 0 10px;
-moz-border-radius: 0 0 0 10px;
-webkit-border-radius: 0 0 0 10px;
-webkit-box-shadow: -10px 0 0 0 #fff;
box-shadow: -10px 0 0 0 #fff;
}
.div-user-header-list:after {
/*left: -20px;*/
right: 1px;
top: -10px;
border-radius: 0 0 10px 0;
-moz-border-radius: 0 0 10px 0;
-webkit-border-radius: 0 0 10px 0;
-webkit-box-shadow: 10px 0 0 0 #fff;
box-shadow: 10px 0 0 0 #fff;
}
.div-user-header {
width: 210px;
margin: auto;
position: relative;
border-radius: 20px;
}
.div-user-header-1 {
width: 206px;
height: 24px;
border: 2px solid #9CB2C7;
border-radius: 20px;
display: inline-block;
text-align: center;
padding-top: 5px;
}
.div-user-header-1 a {
text-decoration: none;
color: #FCCC00;
display: block;
}
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
/*margin-top: -14px;
z-index: -9;
padding-top: 14px;*/
}
.div-user-header-2 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-2 {
height: 40px;
padding: 12px 15px;
}
.div-user-header-3 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-3 {
height: 40px;
padding: 12px 15px;
}
.div-add-profile-card {
padding: 0px 15px;
}
.div-add-profile-card a {
text-decoration: none;
color: #8C8C8C;
font-size: 10px;
padding: 12px;
display: block;
border-top: 1px solid #D6D6D6;
}
</style>
</head>
<body>
<div class="dropdown-header">
<div class="div-user-header">
<div class="div-user-header-1">
ProfileUser 01
</div>
<div class="div-user-header-list">
<div class="div-user-header-2">
<img src="../../../assets/images/avtar2.png" width="34px" height="34px" style="padding-right: 5px; vertical-align: middle" />
ProfileUser 01
</div>
<div class="div-user-header-3">
<img src="../../../assets/images/user-02.png" width="30px" height="30px" style="padding-right:5px; vertical-align: middle" />
ProfileUser 02
</div>
<div class="div-add-profile-card">
+ Add Profile Cards
</div>
</div>
</div>
</body>
</html>
I'm trying to make a small web page with a search bar and an accounts menu (currently just a circle), but I've noticed, when I zoom in, or resize the page, the accounts menu overflows onto the search bar. I've tried changing from absolute positioning, to relative and adjusting the right: 30px accordingly, but this didn't work. I'm incredibly stuck, can anyone offer any advice/code?
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: 500px;
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
width: 600px;
position: absolute;
left: 200px;
top: 15px;
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
position: absolute;
left: 0;
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
position: absolute;
right: 30px;
width: 66px;
height: 66px;
top: 4px;
padding: 0px;
border-radius: 100%;
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
If you remove the absolute positioning and stick with the default relative, then use a display of inline-block (Read up on what it does here: https://www.w3schools.com/css/css_inline-block.asp) and use dynamic widths instead of static ones, you should get your desired result.
See the updated code below;
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: calc(100% - 100px); /* CHANGED */
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
max-width: 600px; /* CHANGED */
width: calc(100% - 300px); /* ADDED */
/* position: absolute; REMOVED */
/* left: 200px; REMOVED */
/*top: 15px; REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
/*position: absolute; //REMOVED */
/*left: 0; //REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
/* position: absolute; REMOVED */
/* right: 30px; REMOVED */
width: calc(100% - 809px); /* CHANGED */
height: 66px;
/* top: 4px; REMOVED */
padding: 0px;
border-radius: 100%;
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
text-align: right; /* ADDED */
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
display: inline-block; /* ADDED */
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
try this
.header {
position: relative;
min-width: 900px;
}
https://jsfiddle.net/59ncte3m/1/
It will avoid the issue where your menu gets drawn on top of the search by making the header a positioned element, the menu absolute position will be relative to the header. giving it a min-width will make sure all elements fit within.
This is still not a good responsive design, as it should avoid pixel dimentions, but it is enough to fix the overflowing issue.
I have buttons as active and deactive. These buttons are used as toggle. I want center align text in button. Please help.
Here is code snippet in Plunker
CSS Code
body {
font-family: 'Montserrat', sans-serif;
background-color: #E5E5E5;
min-width: 1280px;
overflow: scroll;
}
/* toggle switch style ======================================= */
.profile_status {
padding: 6px 50px 0px 0px;
}
.active_inactive_container {
display: inline-block;
height: 28px;
border: 1px solid #DFDFDF;
background-color: #FFFFFF;
border-radius: 15px;
padding: 2px 0px 2px 2px;
}
.active_button,
.inactive_button,
.clicked_active_button,
.clicked_inactive_button {
height: 22px;
background-color: #FFFFFF;
border: none !important;
color: #333333;
border-radius: 15px;
outline: none;
font-size: 11px;
padding: 0px 5px 0px 18px;
}
.clicked_active_button {
background-color: #51B151 !important;
color: #FFFFFF !important;
margin-left: 62px;
position: absolute;
opacity: 0;
}
.clicked_active_button1 {
opacity: 1 !important;
-webkit-transform: translateX(-140px);
-ms-transform: translateX(-140px);
transform: translateX(-140px);
transition: .1s;
}
.clicked_inactive_button {
background-color: #f75252 !important;
color: #FFFFFF !important;
margin-left: 6px;
position: absolute;
opacity: 0;
}
.clicked_active_switch {
margin-left: 78px !important;
}
Html Code
<div class="active_inactive_container toggle_switch_container">
<button class="clicked_inactive_button clicked_inactive_switch ng-binding">Inactive</button>
<button class="active_button ng-binding" ng-click="">Active</button>
<button class="clicked_active_button clicked_active_switch ng-binding clicked_active_button1" >Active</button>
<button class="inactive_button ng-binding" >Inactive</button>
</div>
How to centralize the Active and Inactive button text?
change padding
.active_button, .inactive_button, .clicked_active_button, .clicked_inactive_button {
background-color: #ffffff;
border: medium none !important;
border-radius: 15px;
color: #333333;
font-size: 11px;
height: 22px;
outline: medium none;
padding: 0 11px;
}
remove the height and play with the padding of the container it will work .
.active_inactive_container {
display: inline-block;
border: 1px solid #DFDFDF;
background-color: #FFFFFF;
border-radius: 15px;
padding: 6px 10px;
}
Padding for the buttons is the problem padding: 0px 5px 0px 18px;
try changing it like this
padding: 0px 10px 0px 10px;
margin: 0px 0px 0px 23px;
This may not be the best solution out there
Update
Here is a working fiddle: http://codepen.io/anon/pen/WoBVZM?editors=0100
Below is the class I changed, just modified padding and added margin.
I used padding to fix the text alignment issue and margin to center the button.
.active_button, .inactive_button, .clicked_active_button, .clicked_inactive_button
{
height: 22px;
background-color:#FFFFFF;
border:none !important;
color: #333333;
border-radius: 15px;
outline: none;
font-size: 11px;
padding: 0px 10px 0px 10px;
margin: 2px 5px;
}
I found that by adding the padding: 0 11px; to .active_button, .inactive_button, .clicked_active_button, .clicked_inactive_button your problem will be resolved. Also i added some margin to .active_inactive_container button.
Please check the entire CSS Changes below.
.active_inactive_container button{
margin:3px;
}
.active_button, .inactive_button, .clicked_active_button, .clicked_inactive_button
{
height: 22px;
background-color:#FFFFFF;
border:none !important;
color: #333333;
border-radius: 15px;
outline: none;
font-size: 11px;
padding: 0 11px;
}
You mean like this?
body {
font-family: 'Montserrat', sans-serif;
background-color: #E5E5E5;
min-width: 1280px;
overflow: scroll;
}
.profile_status {
padding: 6px 50px 0px 0px;
}
.active_inactive_container {
display: table;
border: 1px solid #DFDFDF;
background-color: #FFFFFF;
border-radius: 15px;
}
.active_button,
.inactive_button,
.clicked_active_button,
.clicked_inactive_button {
display: table-cell;
vertical-align: middle;
padding: 1rem;
background-color: #FFFFFF;
border: none !important;
color: #333333;
border-radius: 15px;
text-align: center;
outline: none;
font-size: 11px;
margin: 0;
}
You need to add the padding to get the text in center. i have created demo for both active and inactive option selected.
edited padding in this class
.active_button,
.inactive_button,
.clicked_active_button,
.clicked_inactive_button {
height: 22px;
background-color: #FFFFFF;
border: none !important;
color: #333333;
border-radius: 15px;
outline: none;
font-size: 11px;
padding: 0px 18px 0px 18px;
}
Example :
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
body {
font-family: 'Montserrat', sans-serif;
background-color: #E5E5E5;
min-width: 1280px;
overflow: scroll;
}
/* toggle switch style ======================================= */
.profile_status {
padding: 6px 50px 0px 0px;
}
.active_inactive_container {
display: inline-block;
height: 28px;
border: 1px solid #DFDFDF;
background-color: #FFFFFF;
border-radius: 15px;
padding: 2px 0px 2px 2px;
}
.active_button,
.inactive_button,
.clicked_active_button,
.clicked_inactive_button {
height: 22px;
background-color: #FFFFFF;
border: none !important;
color: #333333;
border-radius: 15px;
outline: none;
font-size: 11px;
padding: 0px 18px 0px 18px;
}
.clicked_active_button {
background-color: #51B151 !important;
color: #FFFFFF !important;
margin-left: 62px;
position: absolute;
opacity: 0;
}
.clicked_active_button1 {
opacity: 1 !important;
-webkit-transform: translateX(-140px);
-ms-transform: translateX(-140px);
transform: translateX(-140px);
transition: .1s;
}
.clicked_inactive_button1 {
opacity: 1 !important;
-webkit-transform: translateX(-140px);
-ms-transform: translateX(-140px);
transform: translateX(-140px);
transition: .1s;
}
.clicked_inactive_button {
background-color: #f75252 !important;
color: #FFFFFF !important;
margin-left: 6px;
position: absolute;
opacity: 0;
}
.clicked_active_switch {
margin-left: 78px !important;
}
.clicked_inactive_switch {
margin-left: 198px !important;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as $ctrl">
<div class="active_inactive_container toggle_switch_container">
<button class="clicked_inactive_button clicked_inactive_switch ng-binding">Inactive</button>
<button class="active_button ng-binding" ng-click="$ctrl.toggleSwitchOn()">Active</button>
<button class="clicked_active_button clicked_active_button1 clicked_active_switch ng-binding " >Active</button>
<button class="inactive_button ng-binding" ng-click="$ctrl.toggleSwitchOff()">Inactive</button>
</div>
<div class="active_inactive_container toggle_switch_container">
<button class="clicked_inactive_button clicked_inactive_switch clicked_inactive_button1 ng-binding">Inactive</button>
<button class="active_button ng-binding" ng-click="$ctrl.toggleSwitchOn()">Active</button>
<button class="clicked_active_button clicked_active_switch ng-binding " >Active</button>
<button class="inactive_button ng-binding" ng-click="$ctrl.toggleSwitchOff()">Inactive</button>
</div>
</body>
</html>
I want to put 3 image's in the header, left is logo and right is search box.
how can I put them in the same line?
I want it so that its the logo on the left of the header and the search box is on the right..
Please help.
#logo {
float: left;
margin-left: 10%;
height: 30%;
width: 20%;
}
#searchlogo {
float: right;
height: 30px;
width: 30px;
margin: 5px;
position: relative;
top: -5px;
}
/*search box*/
input.rounded {
margin-left: 85%;
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
}
input.rounded:focus {
border-color: #969063;
}
<header>
<a href="main.html">
<img id="logo" src="logo.gif" />
</a>
<input type="text" class="rounded" />
<input type="image" id="searchlogo" src="searchbutton.png" />
</header>
It's your margin-left:85% rule for the input.rounded class. Any reason why you need margin that is most of the screen width? If you remove that rule, everything lines up in one row.
You need to change the way the elements behave in terms of block and inline.
the below code should achieve what your looking for.
also your margin's where totally out of whack i have removed them from the equation and float.
I've also added a few extra css rules to help you with this kind of thing in the future.
.align {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: top;
}
.align-center {
text-align: center;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-table {
display: table;
width: 100%;
table-layout: fixed;
}
.t-align {
display: table-cell;
vertical-align: top;
width: 100%;
}
#logo {
height: 30%;
width: 20%;
}
#searchlogo {
height: 30px;
width: 30px;
margin: 5px;
position: relative;
top: -5px;
}
/*search box*/
input.rounded {
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
}
input.rounded:focus {
border-color: #969063;
}
<header class="align-table">
<div class="t-align">
<a href="main.html">
<img id="logo" src="logo.gif" />
</a>
</div>
<div class="t-align align-right">
<form class="align">
<input type="text" class="rounded" />
<input type="image" id="searchlogo" src="searchbutton.png" />
</form>
</div>
</header>
I want to display the range input slider in "Vertical".
i use this code to display vertical -webkit-appearance: slider-vertical it displays the slider but css is not working it showing ordinary inputrange slider.
Can anyone help me how to do that .
this is my code
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;"/>
<title>How to style an HTML5 range input with CSS</title>
<style type="text/css" media="screen">
body {
font-family: Helvetica, sans-serif;
margin: 0;
padding: 10px;
}
input[type='range'] {
-webkit-appearance: slider-vertical !important;
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #333;
background-color: #157DEC;
display: block;
height: 15px;
left: 10px;
margin: -100px 0 0 100px;
position: absolute;
right: 10px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
-webkit-border-radius: 10px;
background-color: #FFFFFF;
background-image: -webkit-gradient(circular, left top, left bottom, from(##FFFFFF), to(#AAA));
border: 1px solid #999;
height: 33px;
width: 33px;
}
#range {
display: block;
font-size: 200%;
font-weight: bold;
margin: -58px -12px 107px 4px ;
text-align: center;
}
p {
position: absolute;
bottom: 0;
left: 10px;
font-size: 10px;
right: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<span id="range">0</span>
<input type=range name=salary min="0" max="5" value="0" step="1" onchange="showValue(this.value)" />
</div>
<script type="text/javascript">
function showValue(newValue) {
document.getElementById("range").innerHTML=newValue;
}
</script>
</body>
</html>
Don't of height in your css. You forcing to a fixed dimension.
here is my suggestion for your style
body {
font-family: Helvetica, sans-serif;
margin: 0;
padding: 10px;
overflow:hidden;
}
input[type='range'] {
-webkit-appearance: slider-vertical;/*comment this to see the result*/
-webkit-border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #333;
background-color: #157DEC;
display: block;
/*height: 15px;*/
left: 10px;
/*margin: -100px 0 0 100px;*/
/*position: absolute;*/
right: 10px;
margin-top:50px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
-webkit-border-radius: 10px;
background-color: #FFFFFF;
background-image: -webkit-gradient(circular, left top, left bottom, from(##FFFFFF), to(#AAA));
border: 1px solid #999;
/* height: 33px;*/
width: 33px;
}
#range {
display: block;
font-size: 200%;
font-weight: bold;
margin: -58px -12px 107px 4px ;
text-align: center;
}
p {
position: absolute;
bottom: 0;
left: 10px;
font-size: 10px;
right: 10px;
text-align: center;
}
A here is a preview on fiddle: http://jsfiddle.net/QXzLT/