i need to allign element under RED arrow right under the element where BLACK arrow is pointed at. In other words how do i allign element close enough to input like 2-5px.
http://i.stack.imgur.com/Q4IeX.png
code is here
CSS
form.loginform
{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 16px;
border-radius: 10px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
div.divbg
{
width: 200px;
height: 167px;
position: fixed;
text-align: center;
vertical-align: middle;
margin-top: 30%;
margin-left: 40%;
background-color: aliceblue;
}
a.register
{
font-family: Geneva,Arial,Helvetica,sans-serif;
font-size: 11px;
}
#pass
{
float: inherit;
margin: 0;
}
HTML
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel=StyleSheet href="loginstyle.css" type="text/css" media="screen"/>
</head>
<body>
<div class="divbg">
<form method="post" class="loginform">
Логин <div class="center"><input type="text" name="login"/></div><br/>
<div id="pass">Пароль <div class="center"><input type="text" name="password"/></div><br/>
хочу зарегистрироваться!<br/></div>
<input type="submit" name="submit" value="Войти"/><br/>
</form>
</div>
</body>
</html>
1 Get a modern browser
2 Install firebug or use developers tools
3 check if the last input box (black arrow) has some margin-bottom or padding-bottom.
4 If yes, set it to 0 or a negative value
5 if No, check if the element with the red arrow has margin-top, and remove it or set a negative margin-top value.
Without code, It's not so easy to help you
You have a <br /> tag after the #center div. That is what is pushing it down. You also have some padding around the input tag; both of those issues are what is causing that space.
Your code:
<div class="center"><input type="text" name="password"/></div><br/>
Remove that <br />
Related
I have tried to use justify content but the content contiously stacks on top of the other
below is my code and why i have tried
input
button
input
input
button
Above is how i would like the layout to look
I tried implementing classes for each and every input but coudnt make the not stack on top of each other any help would be greatly aprreciated.
<?php
if (isset($_POST["submit_address"]))
{
$address = $_POST["address"];
$address = str_replace(" ", "+", $address);
?>
<iframe padding ="5px" width="100%" margin="5px" height="600px" src="https://maps.google.com/maps?q=<?php echo $address; ?>&output=embed"></iframe>
<?php
}
if (isset($_POST["submit_coordinates"]))
{
$latitude = $_POST["latitude"];
$longitude = $_POST["longitude"];
?>
<iframe padding ="5px" width="100%" margin="5px" height="600px" src="https://maps.google.com/maps?q=<?php echo $latitude; ?>,<?php echo $longitude; ?>&output=embed"></iframe>
<?php
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Livestock Dashboard</title>
<style>
button{
width: 7%;
height: 45px;
background: #2364d2;
border: none;
border-radius: 5px;
font-size: 22px;
font-weight: 500;
font-family: "Source Sans Pro", sans-serif;
box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3);
color: #fff;
margin-top: 20px;
cursor: pointer;
}
input{
text-align: center;
width: 50%;
height: 40px;
border-radius: 5px;
box-shadow: none;
border: 1px solid #ced6e0;
transition: all 0.3s ease-in-out;
font-size: 18px;
padding: 5px 15px;
background: none;
color: #1a3b5d;
font-family: "Source Sans Pro", sans-serif;
}
body {
background-image: url('bull.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<form method="POST">
<p>
<input type="text" name="address" placeholder="Enter address">
</p>
<div style="justify-content:left; align-items:center; display:flex;">
<button type="submit" name="submit_address" style ="
">
Submit
</button>
</div>
</form>
<form method="POST">
<p>
<input type="text" name="latitude" placeholder="Enter latitude">
</p>
<p>
<input type="text" name="longitude" placeholder="Enter longitude">
</p>
<div style="justify-content:left; align-items:center; display:flex;">
<button type="submit" name="submit_coordinates">
Submit
</button>
</div>
</form>
</body>
</html>
I tried using justify content on the div but id didnt work
The English is quite difficult to understand but hopefully this will help you.
Add the following to the style in your <form>:
style="display: flex; justify-content: stretch;"
Change the justify-content and center as fit. An easy to understand list of possible options you can use can be found here, or you can use a better documented list from Mozilla.
This will make make your inputs and submit button be next to each other rather than stacked.
A mock on CodePen can be found here.
Also, remove the width: 7%; from your button's style.
I used text-align:center to center the three divisions, but they are all aligned on the left.
I was told that because these three elements are all block, so they wouldn't center.However, I tried to add display:inline-block, but when I inspected the page, it still showed me display:block.
Here's my code:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.Google-logo {
width: 250px;
}
.Google-search-box {
font-size: 13px;
padding-left: 15px;
height: 30px;
width: 460px;
border-radius: 15px;
border-style: solid;
border-color: rgb(160, 157, 157);
box-shadow: 0 1px 6px rgb(183, 181, 181);
margin-top: 15px;
}
.div {
text-align: center;
}
</style>
</head>
<body>
<div>
<img
class="Google-logo"
src="images/Google_2015_logo.svg.png"
alt="Google logo"
/>
</div>
<div>
<input
class="Google-search-box"
type="text"
placeholder="Search Google or type a URL"
/>
</div>
<div>
<button class="left-button">Google Search</button>
<button class="right-button">I'm Feeling Lucky</button>
</div>
</body>
</html>
Very simple,
div is not a class, is a html element, so do this;
CSS
div {
text-align: center;
}
You can do it in multiple ways, the simplest and the first way is to write a CSS like:
div {
text-align: center
}
The second way if you want to use a inline CSS in your HTML code itself:
<div style="text-align:center">
The third way is what you were trying to do by using classes/id for that you need to change both your HTML and CSS code:
*for class
HTML:
<div class="center"> </div>
CSS:
.center {
text-align: center,
}
*for id
HTML:
<div id="center"> </div>
CSS:
#center {
text-align: center,
}
And most importantly div is not a class it's an HTML tag so your code didn't work because you used
.div {
text-align: center,
}
in your CSS code and the . symbolizes a class whereas if you had written it like this it would have worked as it would have given the text center to all the divs present in your code
div {
text-align: center,
}
But I feel you should use classes and center the text in div so that it could be specific to the div you wanna center texts for so try to prioritize the second or third way over the first one.
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I my html page I have a checkbox and two buttons aligned horizontally. These are populated dynamically through a PHP function. I find aligning the checkbox to exactly the same size as buttons and in line with buttons difficult.
The following is a minimal example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript file upload</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="col-xs-6 col-sm-2 text-center">
<img src="" width="200" height="200" class="img"/>
<h6>Test Image</h6>
<input type="checkbox" id="'.$imgnam.'" title="Select Image" name="matchedImage" value="'.$imgnam.'" >
<button class="actButton" id="tbutton" onclick="downloadImage(this.id)" title="Download Image" style="background-color: #CECECE;border: none;color: white;
padding:6px 10px;font-size:12px;cursor:pointer;margin:10px 0px 22px 0px"><i class="fa fa-download" style="color:#040727"></i></button>
<button class="actButton dropbtn" id="shareImage" onclick="shareImage(this.id)" title="Share Image" style="background-color:#CECECE;border: none;color: white;
padding:6px 10px;font-size:12px;cursor:pointer;margin:10px 0px 22px 0px"><i class="fa fa-share-alt" style="color:#040727"></i></button>
</div>
</body>
</html>
If I apply css to checkbox such as :
input[type=checkbox] {
width: 10em;
-webkit-appearance: none;
-moz-appearance: none;
height: 10em;
border: 0.2em solid black;
padding-top: 3px;
}
The box appears few pixels above the button. How do I align the checkbox with the buttons. Attaching an image output
Remove all padding and add the following to .actButton:
display: inline-block;
vertical-align: middle;
line-height: 32px;
height: 32px;
width: 30px
Increase the font-size to 18px. Add .actButton class to checkbox as well and remove everything but the border and appearance properties.
Also the containing <div> has been changed to a <fieldset> and class .col-sm-2 was changed to .col-sm-6 at -2 means that there's less space as the screen gets bigger, did you really want backwards behavior? If so just change back to .col-sm-2. The <main class='container'> and <section class='row'> was added as well (normally these tags would be <div> but it's just easier to read using semantically correct tags).
Demo
input[type=checkbox] {
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid black;
}
.actButton {
display: inline-block;
vertical-align: middle;
line-height: 32px;
height: 32px;
width: 30px;
background-color: #CECECE;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
margin: 10px 0px 22px 0px;
}
<!DOCTYPE html>
<html>
<head>
<title>JavaScript file upload</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<main class='container'>
<section class='row'>
<fieldset class="col-xs-6 col-sm-6 text-center">
<img src="https://via.placeholder.com/200" width="200" height="200" class="img" />
<h6>Test Image</h6>
<input type="checkbox" title="Select Image" name="matchedImage" class='actButton'>
<button class="actButton dropbtn" id="tbutton" title="Download Image"><i class="fa fa-download" style="color:#040727"></i></button>
<button class="actButton" id="shareImage" title="Share Image"><i class="fa fa-share-alt" style="color:#040727"></i></button>
</fieldset>
</section>
</main>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
did you mean em? It's mm in your code.
input[type=checkbox] {
width: 10em;
-webkit-appearance: none;
-moz-appearance: none;
height: 10em;
border: 0.2em solid black;
padding-top: 3px;
}
Add this line in your css for the checkbox
vertical-align: middle;
I use to make a card. However, the doesn't seem to offer any boundary at all and thus the entire page has the background color of body. I have tried to tinker around, changing the place of but it doesn't work. Why is this? Below is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../static/main.css">
<title>Title</title>
</head>
<body>
<form method="POST" action="/" enctype="multipart/form-data">
<div>{{ form.csrf_token }}</div>
<div>{{ form.tweet_text()}}</div>
<div>{{ form.tweet_image()}}</div>
<div>{{ form.submit()}}</div>
</form>
<div>
<div class="card">
<img src="http://media.npr.org/assets/news/2009/10/27/facebook1_sq-17f6f5e06d5742d8c53576f7c13d5cf7158202a9.jpg?s=16" alt="" />
<h1>Rohit Falor</h1>
<p>From the restored 540 K Streamliner to the all-new S65 AMG Coupe to the Concept Coupe SUV.</p>
</div>
</div>
</body>
</html>
Here is my CSS:
body{
background-color : azure;
}
.card{
height: 100px;
width: 350px;
border: 1px solid gray;
box-shadow: 1px 1px 3px #888;
border-top: 10px solid green;
min-height: 250px;
padding: 10px;
margin: 10px;
}
img{
border-radius: 50%;
width: 70px;
margin: 10px;
}
Objects have no background-color attribute by default (the default is transparent). If you are looking to give it something other than a transparent background-color, you need to define it.
The easiest way to do this would be to set the following attribute in your .card class definition:
background-color: white;
or
background: white; /* This allows for more attributes */
I'm trying to create a custom textbox for a search function. However, the browser is ignoring the width setting in the css. I even took the code out completely and placed it in its own html file in case it was being restricted by something else. I've used both Google Chrome v38 and IE11
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/Site.css" rel="stylesheet" />
</head>
<body>
<input type="text" class="bigsearch">
</body>
</html>
with the css
.bigsearch {
top: 20px;
left: 20px;
padding: 5px;
border-radius: 10px;
box-shadow: 0 0 12px;
width: 700px;
font-size: 22px;
}
yet in the browser, the textbox is rendered with a width of about 300px, regardless of what I set it to in css.
If I change the code to
<body>
<input type="text" style="width: 700px" class="bigsearch">
</body
I get the same result. However, if I take all the css and put it in the html page, removing the link to the stylesheet file as such,
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.bigsearch {
top: 20px;
left: 20px;
padding: 5px;
border-radius: 10px;
box-shadow: 0 0 12px;
width: 700px;
font-size: 22px;
}
</style>
</head>
<body>
<input type="text" class="bigsearch">
</body>
</html>
it works properly. So, what gives?
EDIT:
I should add that the rest of the styles are being applied to the textbox - shadow, rounded corners etc.
It's not working because your style sheet is not properly linked
If your file is index.html and is in:
C:/User/Documents/index.html
and your style sheet is in
C:/User/Documents/Content/style.css
Then the following works fine
<link href="Content/style.css" rel="stylesheet" />