Problem:
I want to vertically center the text on the left side of the input field. Also I want to center the calendar icon.
HTML:
<div id="dateselect">
<div id="arrivalContainer">
<span class="annotation">Anreise</span>
<input type="text" name="arrival" id="arrival" class="input-styling" maxlength="10" size="10" />
</div>
<div id="departureContainer">
<span class="annotation">Abreise</span>
<input type="text" name="departure" id="departure" class="input-styling" maxlength="10" size="10" />
</div>
<div class="clearer"></div>
</div>
CSS:
#dateselect {
padding-top: 14px;
}
#arrivalContainer {
float: left;
width: 160px;
}
#departureContainer {
float: right;
width: 160px;
}
#arrival {
height: 25px;
width: 68px;
}
#departure {
height: 25px;
width: 68px;
}
.ui-datepicker-trigger {
position: relative;
top: 7px;
left: 3px;
}
.input-styling {
color: #575756;
font-family: "Myriad Roman", Helvetica, Arial, sans-serif;
font-size: 12px;
padding-left: 4px;
}
Live example:
http://bfb.bplaced.net/
The span element should be display: inline-block; I think. I tried it with the line-height and the display: table-cell; approach. I get it work in all browsers except IE7 and IE8.
I know it is an often occuring problem but perhaps you could give me some advice.
Solution:
HTML:
I tried it with valign="middle" but IE8 had still problems. I ended up with this:
<div id="arrivalContainer">
<div class="calendarText"><span class="annotation">Anreise</span></div>
<div class="calendarInput"><input type="text" name="arrival" id="arrival" class="input-styling" maxlength="10" size="10" /></div>
<div class="clearer"></div>
</div>
CSS:
.calendarText {
float:left;
padding-top:14px;
padding-right:5px;
}
.calendarInput {
float: left;
}
For all IE version I have conditional stylesheets.
Try vertical-align:middle; for both your image and your text divs.
This should vertically center the text, by forcing it to display at 25px tall (same as your input field). Line-height then vertically centers the line at 25px tall, too.
.annotation {
display: inline-block;
zoom: 1;
*display: inline;
height: 27px; /* +2px for border */
line-height: 27px;
}
try this:
annotation {
position:realtive;
top: -5px; /*adjust to value that visually centers your text*/
}
for you calendar do the same.
Related
Okay, so maybe I'm not searching properly but I can't seem to find exactly what I'm looking for.
I have a form, let's say something like this:
div.some_form {}
div.some_form>span {
font-weight: bold;
position: relative;
text-align: left;
}
div.some_form>form {
text-align: center;
font-size: 16px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
div.some_form>form>input.txtfield {
padding: 13px;
width: 25%;
}
.button {
background-color: #7AB55C;
border: none;
color: white;
text-align: center;
padding: 15px 32px;
}
<div class="some_form">
<form>
<span class="some_class">Some text</span>
<br>
<input type="text" class="txtfield" />
<input type="button" class="button" value="Submit" onclick="doSomething()" />
</form>
</div>
what I want it to do is pretty much keep the inputs centred (which I'm able to do), which is why everything is in a div, I used text-align: center to centre everything, but I want the span element to be stuck to the top left corner of the first input, which I can't seem to do properly.
I mean, I get it, but then once I resize the window, the span shoots off into space (i.e. the text field will expand at a lower rate than the span is, which is great because the text stays centred even with the button attached) and I can't seem to get it to just stick.
(also this seriously isn't homework, I'm just getting into CSS and this is really bothering me..)
any help is obviously very much appreciated!
Thanks in advance :)
Adding a display: block to your span will work. And remove the <br />. You have the class specification wrong. The <span> isn't a direct child there. So > doesn't work:
body {
text-align: center;
}
div.some_form span.some_class {
font-weight: bold;
position: relative;
text-align: left;
display: block;
padding: 0 4.5%;
}
div.some_form>form {
text-align: center;
font-size: 16px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
div.some_form>form>input.txtfield {
padding: 13px;
width: 45%;
}
.button {
background-color: #7AB55C;
border: none;
color: white;
text-align: center;
padding: 15px 32px;
}
div.some_form {
display: inline-block;
}
<div class="some_form">
<form>
<span class="some_class">Some text</span>
<input type="text" class="txtfield" />
<input type="button" class="button" value="Submit" onclick="doSomething()" />
</form>
</div>
Preview
Here the answer hope it can help you
.container{
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -150px;
}
.txtfield {
padding: 13px;
width: 25%;
}
.button {
background-color: #7AB55C;
border: none;
color: white;
text-align: center;
padding: 15px 32px;
}
<div class="some_form">
<form>
<div class="container">
<span class="some_class">Some text</span>
<div class="input_container">
<input type="text" class="txtfield" />
<input type="submit" class="button" value="Submit" onclick="doSomething()" />
</div>
</div>
</form>
</div>
I'm using a <ul> with css display: inline; set to use as a toolbar/menu at the top of my page like this:
As you can see, the text vertically aligns perfectly, however the img on the left is too high, and the input box on the right is slightly low. I'm struggling to move them so they are perfectly vertically aligned.
Below is my CSS:
.mynav {
font-weight: 300;
border: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #0067b1;
}
.mynav li {
display: inline;
align-items: center;
vertical-align:middle;
line-height:35px;
}
.mynav a {
color: white;
display: inline-block;
padding: 15px;
font-size: 14pt;
text-decoration: none;
}
.mynav input {
margin-left: 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-style: italic;
-moz-border-radius: 10px;
border-radius: 10px;
border: none;
padding: 5px;
width: 200px;
height: 25px;
margin-top: 0px;
}
.mynav i
{
font-weight: 300;
color: white;
font-size: 24px;
margin-left: 15px;
}
And my HTML (if needed):
<ul class="mynav">
<li><img src="http://www.advancegroupholdings.com.au/my_logo_nav.png" style="width: 100px; height:25px; padding-right:25px;" /></li>
<li>My Jobs</li>
<li>Obtain a Quote</li>
<li>Submit New Instruction</li>
<li>Settings</li>
<li>Help</li>
<li><input type="text" placeholder="Enter Your Ref or Job Number"/><i class="fa fa-search"></i></li>
</ul>
As for the input box, it has a padding of 5 which I have tried to remove with no luck. I have also set margin-top: 0px on the input, still no luck.
As for the logo, I'm also quite stumped. I've tried adding margin-top: 5px, but it's not working.
I also have found both these questions on StackOverflow:
<ul> horizontal nav bar... vertically-align element
css - verticaly align horizontal li
The first had no effect and the second wanted to change the CSS to display: flex, which for me gets rid of the horizontal bar, doesn't it?
Can anyone help me get the logo and the input box (and the magnifying glass) vertically centered? Thank you in advance!
Plunker here
I created a small bootstrap example for what you require. Different to what you have but give the required output more or less. Hopefully you can continue from here if this solution works for you.
HTML
<div class="col-md-2"><img src="http://www.advancegroupholdings.com.au/my_logo_nav.png" /></div>
<div class="col-md-1">My Jobs</div>
<div class="col-md-2">Obtain a Quote</div>
<div class="col-md-2">Submit a New Instruction</div>
<div class="col-md-1">Settings</div>
<div class="col-md-1">Help</div>
<div class="col-md-3"><input class="inputHeight" type="text" placeholder="Enter Your Ref or Job Number"/><i class="fa fa-search"></i></div>
</div>
</div>
CSS
.navbar {
width:80%;
font-weight: 300;
border: 1px solid #ccc;
border-width: 1px 0;
margin: 0;
padding: 0;
text-align: center;
background-color: #0067b1;
vertical-align:middle;
line-height:50px;
}
.inputHeight {
margin-left: 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-style: italic;
-moz-border-radius: 10px;
border-radius: 10px;
border: none;
padding: 5px;
width: 200px;
height: 25px;
margin-top: 0px;
}
Plunker Example
Adding next two rules to your image will center it correctly.
display: inline-block;
vertical-align: sub; /* or text-bottom */
As for the input , it looks correctly centered to me.
In your specific example it's enough to add vertical-align:middle; to <img> and to <a>, <i> elements! Also I'd recommend to have <li> elements as inline-block, not inline for more flexibility.
In general case, to align vertically the image height must be equal as
other element's line-height in the line and vertical-align:middle has to be set.
If image height is 25px then set:
.mynav li, .mynav i {
vertical-align:middle;
line-height:25px;
}
img {
vertical-align:middle;
height: 25px;
line-height:25px;
}
Here you go: https://plnkr.co/edit/Xf3uvvjuqykQMjnhVxes?p=preview
There is some padding from the top to the Keep me logged in text.
How can I remove the padding and make it look like this ?
HTML:
<div class="login-radio">
<input type="radio">Keep me logged in
</div>
CSS:
.login-radio {
font-size: 12px;
position: fixed;
left:60%;
top: 7%;
color: white;
font-family: arial;
}
Try this:
HTML:
<div>
<div class="email">
<input type="email" />
</div>
<div class="checkbox">
<input type="checkbox" />
<span>Keep me logged in</span>
</div>
</div>
CSS:
.email input {
float: left;
margin-top: 5px;
margin-left: 5px;
font-family: arial, sans-serif;
font-size: 12px;
outline: none;
}
.checkbox input {
float: left;
margin-top: 10px;
margin-left: 5px;
color: #000;
clear: both;
}
.checkbox span {
float: left;
margin-top: 7px;
margin-left: 2px;
font-family: arial, sans-serif;
}
Here's the fiddle.
Regards, Milan.
Try to use this:
HTML
<div class="login-radio radio">
<input type="radio" class="radio">
<label>Keep me logged in </label>
</div>
CSS
.login-radio, .login-checkbox, .radio, .checkbox {
display: block;
min-height: 20px;
margin-top: 10px;
margin-bottom: 0px;
padding: 0px;
margin-left: -20px;
}
input[type=checkbox] {
box-sizing: border-box;
margin: 4px 0 0;
line-height: normal;
}
.radio label, .checkbox label {
display: inline;
cursor: pointer;
}
Is this is what you want exactly the position of your radio button to be or something else
.login-radio input {
vertical-align:top;margin-top:1px;
}
http://jsfiddle.net/we9x6k3j/1/
3 steps that will fix your problem:
Remove the default margin and padding that the browser applies to the <input> by default.
Wrap the text in a <label>.
Apply vertical-align: middle to the <input> and the <label>.
Working Code Snippet:
.login-radio {
font-size: 12px;
position: fixed;
left:60%;
top: 7%;
color: black;
font-family: arial;
}
input{
margin: 0px;
padding: 0px;
}
input, label{
vertical-align: middle;
}
<div class="login-radio">
<input type="radio">
<label>Keep me logged in</label> <!-- wrap the text in a label -->
</div>
FIDDLE HERE
CSS:
.login{
width: 200px;
height:80px;
background-color: brown;
color: white;
}
.loginInput{
margin-left: 3%;
margin-top: 1%;
}
.loginRadio input{
margin-left: 3%;
vertical-align: top;
}
Key change is the vertical alignment of loginRadio input.
I am new to web designing and I am currently designing a website for my college project.Right now, I am facing a problem which is as follow:-
When I resize the browser window,specially when i resize the browser window to a small size, the div elements jumps out of it's normal flow and everything gets scattered on giving width:100% value in my container id of CSS.
But as as i give the width of the wrapper id in pixels(say 960px), everything works and looks fine. But i want to design a full width browser window website so that it can adjust on any browser window size Please tell me how it can be done.
jsfiddle link is http://jsfiddle.net/9BuHt/3/
My CSS code is as under:-
I am new to web designing and I am currently designing a website for my college project. Right now, I am facing a problem which is as follows:
When I resize the browser window, specially when I resize the browser window to a small size, the div elements jumps out of its normal flow and everything gets scattered on giving width:100% value in my container id of CSS.
But as as I give the width of the wrapper id in pixels(say 960px), everything works and looks fine. But I want to design a full width browser window website so that it can adjust on any browser window size. Please tell me how it can be done. My CSS code is as follows:
html {
height: 100%;
width: 100%;
}
body {
margin: 0px;
padding: 0px;
background-color: #e9e5e5;
}
* {
margin: 0px;
padding: 0px;
}
#container {
min-height: 300px;
margin: 0 auto;
width: 1400px;
}
#header {
height: 150px;
width: 100%;
}
#logo {
padding-top: 10px;
padding-left: 20px;
float: left;
}
#header #title_panel {
float: left;
padding-top: 25px;
min-width: 60px;
}
#header #title_panel h1 {
color: #125ab4;
font-size: 36px;
}
#header #title_panel p {
color: #f5071d;
font-size: 20px;
font-family: "Comic Sans MS", cursive;
}
#search_panel {
margin: 10px 0px 0px 80px;
float: left;
width: 180px;
position: relative
}
#search_panel img {
float: right;
margin-top: -20px;
z-index: 1;
}
#search_field, #usrnam_field, #pwd_field {
border-radius: 20px;
color: #999;
padding-left: 4px;
s
}
#login_panel {
float: right;
width: 520px;
margin: 10px 200px 0px 0px;
min-height: 40px;
}
#login_btn, #signup_btn {
height: 20px;
width: 70px;
border-radius: 30px;
background: #125ab4;
text-align: center;
color: #FFF;
font-weight: bold;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
.
}
#login_btn {
float: right;
margin-top: -20px;
text-decoration: none;
}
#signup_btn {
margin: 0 auto;
}
#header h3 {
text-align: center;
padding-right: 20px;
color: #125ab4;
}
#sidebar {
min-height: 200px;
width: 136px;
margin-top: -20px;
border: solid 1px #999999;
background: #FFF;
}
#sidebar_header {
height: 32px;
background-color: #009933;
}
#sidebar_header h2 {
text-align: center;
text-decoration: none;
color: #FFF;
vertical-align: middle;
text-decoration: none;
padding-top: 2px;
}
#sidebar_header img {
position: absolute;
float: left;
margin-left: 15px;
}
#sidebar ul {
list-style: none;
}
#sidebar ul a {
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
color: #009933;
}
#sidebar ul li {
padding-top: 15px;
text-align: center;
display: block;
vertical-align: middle;
}
#sidebar a:hover {
background-color: #009933;
padding: 10px 5px 10px 5px;
color: #FFF;
}
And the html code is as under:-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>App Store-The one stock shop for all</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="images/logo.png" width="100" height="100" alt="logo"></div>
<div id="title_panel">
<h1>App Store</h1>
<p>The one stock shop for all</p>
</div>
<div id="search_panel">
<form action="" method="post">
<input name="search" type="text" value="Search..." id="search_field">
</form>
<img src="images/Search_icon.png" width="22" height="22" alt="SearchIcon"> </div>
<div id="login_panel">
<form action="" method="post">
<input name="usrname" type="text" value="Username" size="30" id="usrnam_field">
<input name="psswrd" type="text" value="Password" size="30" id="pwd_field">
</form>
<a href="#">
<div id="login_btn">Login</div>
</a>
<h3> </h3>
<h3>Not a member yet?</h3>
<a href="#">
<div id="signup_btn"> Signup</div>
</a>
</div>
</div>
<div id="sidebar">
<div id="sidebar_header"> <img src="images/logo_small.png" width="22" height="28" alt="logoIcon">
<h2 style="">Store</h2>
</div>
<ul>
<li>Technologies</li>
<li>Categories</li>
<li>Developers</li>
<li>Apps</li>
</ul>
</div>
</div>
</div>
</body>
</html>
There are cases where you need to specifically fix small browser windows(this just might be one of them)
.myClass {
width: 50%;
}
but at small sizes, 50% is not big enough and we make it 100%
#media (max-width: 600px) {
.myClass {
width: 100%;
}
}
so when the browser window is less than 600px, we fix it.
here are common device sizes http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
EDIT
after creating an html file of the code and looking at it, it looks like you have a 100% header with some floating elements in it.
under that you have a float left sidebar.
2 fixes that make it look a bit better are:
clear: both; on your #sidebar
and use max-width instead of width on your login_panel
so clear: both will make sure that it accounts for any element floating left or right.
max-width means that the login_panel won't get too big when the screen is huge, but when the screen it small, it won't go off-screen.
As I correctly understand you. You are need to create a fluid markup for any device support. So look to my example and try to adapt your code the same way.
So, for example you need #wrapper width = 960px for desktops and full sized content on mobile devises (if device width < 960px). So your code must be:
HTML
#wrapper {
max-width:960px;
margin:0 auto;
overflow:hidden // if you have float elements inside wrapper
}
If you have a question - welcome
I have a checkbox within a div that is appearing higher than the text I want it to be aligned with.
Here's how it appears in Firefox:
As you can see, the checkbox is just a few pixels higher than the text. I have tried applying various padding / margins, including negative values, but to no avail.
HTML:
<div id="read-confirm-box">
I Have read the above
<input type="checkbox" id="checkbox" />
</div>
CSS:
#read-confirm-box
{
color: #FFF;
width: 180px;
font-size: 12px;
background-color: #333;
border-radius: 3px;
padding: 6px 11px;
margin: auto;
float: left;
}
#checkbox
{
/* Empty */
}
check this jsFiddle
HTML
<div id="read-confirm-box">
I Have read the above
<input type="checkbox" id="checkbox" />
</div>
CSS
#read-confirm-box
{
color: #FFF;
width: 180px;
font-size: 12px;
background-color: #333;
border-radius: 3px;
padding: 6px 11px;
margin: auto;
float: left;
}
#checkbox
{
position: relative;
top: 3px;
}
You can wrap both text and input into a div, It's a good practice.
To align both the divs containing text and control accordingly, use display properties
Try:
HTML
<div id="read-confirm-box">
<div class="inline">I Have read the above </div>
<div class="inline"><input type="checkbox" id="checkbox" /></div>
</div>
<label for="checkbox">I Have read the above </label>
<input type="checkbox" id="checkbox" />
<span>I Have read the above </span>
<span><input type="checkbox" id="checkbox" /></span>
CSS
.inline{
display:inline-block;
vertical-align:middle;
}
Fiddle Example
Updated
Try to use following css.
#checkbox {
vertical-align: middle;
}
The checkbox is likely higher for lack of a reset.css (browsers apply their own defaults).
For usability, you should use the label element, rather than wrapping the input and text in extra divs.
Give the input and label the same margin and voila!
HTML
<div id="read-confirm-box">
<input type="checkbox" id="checkbox" />
<label for="checkbox">I Have read the above </label>
</div>
CSS
#read-confirm-box {
color: #FFF;
width: 180px;
font-size: 12px;
background-color: #333;
border-radius: 3px;
padding: 6px 11px;
margin: auto;
float: left;
}
input {
margin: 3px;
}
label {
float:left;
margin: 3px;
}
http://jsfiddle.net/djungle/x6EUp/1/
Pretty easy fix.
CSS:
#checkbox {
vertical-align:middle;
}
Or as an alternative, forking that fiddle: Fiddle
#checkbox
{
vertical-align:-2px;
}