I have a header containing an image and search box. Both header area and results area are separate divs .
Search box is in header area. In left side of results div there are some menu items. I need to align my search box with results start area.
In .tk-bl-header I have added margin-left=5em to work. But when I move to different screen resolution it gets misaligned.
.tk-bl-header .tk-header-search-area {
display: inline-block;
float: left;
width: 43.75%;
padding-left: 1.5625%;
padding-right: 1.5625%;
position: relative;
color: black;
margin-left: 5em;
}
.searchform-container .searchform {
margin-bottom: 1em;
}
header .tk-bl-header h1 #logo a {
text-decoration: none;
}
a.library-logo {
background: url("../abc.jpg") no-repeat scroll left top transparent;
width: 110px;
height: 100px;
}
a.logo-name {
margin-top: 10px;
font-size: 20px;
}
div#second-header {
display: inline-block;
height: 65px;
position: relative;
width: 100%;
/* overflow: hidden; */
}
<header class="tk-bl-header">
<div id="second-header">
<h1 id="logo">
ABCD
</h1>
<div class="tk-header-search-area">
<div class="tk-header-search-form">
<div class="searchform-container ">
<form id="" class="searchform" action="" method="get" data-filters="">
<fieldset>
<legend>Search</legend>
<input type="text" name="q" class="query" value='${query.value.display}' placeholder="Search documents.." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" required>
<input type="submit" class="submit" value="Search">
</fieldset>
</form>
</div>
</div>
</div>
<div id="col-right-top" class="sidebar col"></div>
</div>
</header>
Related
I am aiming to make text boxes that adapt to the size of the browser window. I'm using css flex properties. The textboxes in the code below do not adapt with the screen size, and I'm not sure exactly why. I believe it might be because I have an outer div that's interacting with the css properties for the actual textboxes.
One other thing that I'm not sure how to do, is to align the button to the right edge of the text boxes, so that the button does not go past the textboxes. Because the textboxes are not dynamically reshaping their width I'm not sure how to proceed with the button.
.search_btn {
width: 150px;
padding: 10px;
background-color: black;
color: white;
border: 0;
}
.search_btn:hover {
box-shadow: 1px 1px 1px grey;
/*background-color: darkblue;*/
}
input {
justify-content: flex-left;
padding: 5px;
position: absolute;
margin-left: 200px;
}
.txt_box {
display: flex;
width: 80%;
}
.search_section {
/*padding: 5px;*/
padding-top: 10px;
padding-bottom: 10px;
}
.search_options {
padding-bottom: 10px;
}
.row {
display: flex;
flex-direction: row;
align-items: left;
justify-content: left;
padding-top: 10px;
padding-bottom: 10px;
}
<form action="/action_page.php">
<div class="search_section">
<div class="search_options">
<h3 class="tit_label" for="fname">SHAPES</h3>
<div class="row">
<label class="left_label" for="fname">average square:</label>
<!-- <div id="wrapper" -->
<input class="txt_box" type="text" id="fname" name="fname" />
</div>
<div class="row">
<label class="left_label" for="lname">average circle:</label>
<input class="txt_box" type="text" id="lname" name="lname" />
</div>
</div>
<div class="form-buttons">
<input class="search_btn" type="submit" value="calculate" />
</div>
</div>
</form>
You need to remove position: absolute from input to make it flex-item. Since you have made absolute positioned then it comes out of the normal flow, then you don't need to use display: flex on input.
No need to use the below style, since txt_box will be a flex item then it will adjust its width accordingly
.txt_box { // Not Required
display: flex;
width: 80%;
}
There is no such property justify-content: flex-left;. There is justify-content: flex-start; instead
.search_btn {
width: 150px;
padding: 10px;
background-color: black;
color: white;
border: 0;
}
.search_btn:hover {
box-shadow: 1px 1px 1px grey;
}
input {
padding: 5px;
}
.search_section {
padding-top: 10px;
padding-bottom: 10px;
}
.search_options {
padding-bottom: 10px;
}
.row {
display: flex;
padding-top: 10px;
padding-bottom: 10px;
}
.left_label {
flex-basis: 20%;
}
.txt_box {
margin: 0;
flex-basis: 80%;
}
<form action="/action_page.php">
<div class="search_section">
<div class="search_options">
<h3 class="tit_label" for="fname">SHAPES</h3>
<div class="row">
<label class="left_label" for="fname">average square:</label>
<input class="txt_box" type="text" id="fname" name="fname" />
</div>
<div class="row">
<label class="left_label" for="lname">average circle:</label>
<input class="txt_box" type="text" id="lname" name="lname" />
</div>
</div>
<div class="form-buttons">
<input class="search_btn" type="submit" value="calculate" />
</div>
</div>
</form>
I know this question has been asked and aswered before, but for some reason, the answers are not working for me; so any help is much appreciated.
I'm creating a hybrid mobile app and I need to add an clickable icon (SVG) inside an input field. Even though I have managed to add the icon, when I test my design in different screens, the icon doesn't not respect the position I need it to be in.
Here are some shots: This is how it's supposed to look in all screens and this is what it looks like in landscape mode, for example.
Here's my code: https://codepen.io/paulamourad/pen/djXvxq
CSS:
.wallet-body {
width: 100%;
margin: 0 auto;
}
.form-group {
position: relative;
}
.form-group input {
border: 1px solid #2C2C2C;
height: 48px;
}
.qr-scanner-img {
float: left;
width: 11%;
margin-top: -39px;
margin-left: 120px;
position: relative;
}
HTML:
<div class="wallet-body">
<form class="form-pagar">
<div class="form-group">
<input type="amount" class="form-control" id="amount" placeholder="Monto">
</div>
<div class="form-group">
<input type="IDuser" class="form-control" id="IDuser" placeholder="Email del destinatario">
<a href="#">
<img class="qr-scanner-img" src="img/qr.svg" alt="qr"></a>
</a>
</div>
</form>
</div>
.wallet-body {
width: fit-content;
margin: 0 auto;
float: left;
}
.form-group{
position: relative;
}
.form-group input {
border: 1px solid #2C2C2C;
height: 48px;
}
.qr-scanner-img {
width: 11%;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
<div class="wallet-body">
<form class="form-pagar">
<div class="form-group">
<input type="amount" class="form-control" id="amount" placeholder="Monto">
</div>
<div class="form-group">
<input type="IDuser" class="form-control" id="IDuser" placeholder="Email del destinatario">
<a href="#">
<img class="qr-scanner-img" src="img/qr.svg" alt="qr"></a>
</a>
</div>
</form>
</div>
Given I have the html and css in the snippet below the question, how can I vertically centre the login view no matter what screen height is?
I have tried this for the .login-layout__positioner class:
.login-layout__positioner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 42%;
transform: translateY(-42%);
}
But this does not centre well in large screen heights?
Is there a better way?
body {
height: 100%;
background-color: #f7f7f4;
}
.app-layout__body {
height: 100vh;
display: flex;
flex-direction: column;
}
.app-layout__container {
flex: 1 0 auto;
}
.banner__container {
background-color: #fff
}
.banner__top {
padding-top: 15px;
}
.login-layout__container {
background-color: #f7f7f4;
width: 100%;
}
.login-layout__positioner {
text-align: center;
margin: auto;
}
footer {
background-color: #0065bd;
}
a {
color: #fff;
}
ul {
list-style: none;
margin-left: 0;
}
li {
display: inline;
}
.form__group {
background-color: #fff;
}
<body>
<div id="root">
<div class="main-content">
<div class="app-layout__body">
<div class="app-layout__container">
<div class="banner__container">
<div class="banner__top">
<div>
<div>
<h2>Banner</h2></div>
</div>
</div>
</div>
<div class="login-layout__container">
<div class="login-layout__positioner">
<div class="form__group">
<div>
<form>
<div class="login__container">
<div class="login__wrapper">
<div>
<div>
<div class="login__form__elements">
<div>
<div>
<h2 class="">Sign In</h2></div>
</div>
<div>
<div>
<div>
<label for="email" id="email-label" class="label__default label__strong label__double-margin">Email</label>
<div>
<input type="text" autocomplete="off" class="input__default form-control" id="email" name="email" aria-invalid="false" aria-describedby="email-error" value="">
</div>
<div id="email-error" aria-hidden="true" role="alert"></div>
</div>
</div>
</div>
<div>
<div>
<div>
<label for="password" id="password-label">Password</label>
<div>
<input type="password" autocomplete="off" id="password" name="password" aria-invalid="false" aria-describedby="password-error" value="">
</div>
<div id="password-error" aria-hidden="true" role="alert"></div>
</div>
</div>
</div>
<div>
<div><a to="/">Forgotten your password?</a></div>
<div>
<button type="submit">LOGIN</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer>
<div>
<div>
<div>
<ul>
<li><a target="_blank" href="/static/about">About</a></li>
<li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
<li><a target="_blank" href="/static/cookies">Cookies</a></li>
<li><a target="_blank" href="/static/privacy">Privacy</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>
</body>
When it comes to centering something both vertically and horizontally I like to use css flex. Adding it to the parent container surrounding the element you wish to center will cause it to flex in all screen dimensions and heights. Justify-content centers it horizontally and align-items centers it vertically. Here is a helpful guide to learn more about flex:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent-container{
width:100vw;
height:100vh;
background-color:black;
display:flex;
justify-content:center;
align-items:center;
}
.child{
width:50%;
background-color:white;
text-align:center;
}
<div class="parent-container">
<div class="child">
<h1>Centered</h1>
</div><!-- child -->
</div><!-- parent-container -->
Flexbox and grid work great for this, the difference being that grid is said to be 2 dimensional whereas flexbox is 1 dimensional. See MDN's Relationship of flexbox to other layout methods. BTW: If you want a sticky footer add min-height: 100vh; to your container.
Both Ron and Jeh's answer are correct. Though I'm wondering why do you have so many container wrappers then if you can just use certain wrappers to display your entire login form, banner and footer.
Here's my template for my custom login forms.
You will noticed that I use calc on height to differentiate the height of banner and footer and then less it to the height of your .section-login container, in which it will automatically adjusted the height no matter what the browser height does. And I declared min-height just to avoid overlaying above to each container wrapper.
Hope this helps.
.login {
background: pink;
margin: 0;
padding: 0;
}
.body-wrapper {
background: white;
width: 100%;
height: 100vh;
}
.hero-wrapper,
.globalfooter {
background: #CCC;
text-align: center;
}
.hero-wrapper {
line-height: 200px; /* just for the text v-alignment only */
height: 200px;
}
.globalfooter {
line-height: 100px; /* just for the text v-alignment only */
height: 100px;
}
.section-login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #EEE;
min-height: calc(100% - (200px + 100px));
padding: 30px;
box-sizing: border-box;
}
.help-text-wrapper {
font: 300 12px sans-serif;
color: red;
text-align: center;
margin: 15px 0 0;
}
.help-text-wrapper.hidden {
/* Remove comment to enable
display: none; */
}
h1 {
font: 600 24px sans-serif;
text-align: center;
text-transform: uppercase;
margin: 0 0 15px;
}
form {
background: #FFF;
font: 300 12px sans-serif;
text-transform: uppercase;
width: 260px;
padding: 30px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.50);
box-sizing: border-box;
border-radius: 3px;
}
form > fieldset {
margin: 0 0 15px;
padding: 0;
border: 0;
}
form > fieldset label:first-child {
display: block;
margin-bottom: 15px;
}
form input {
display: block;
width: 100%;
height: 30px;
margin: 5px 0;
padding: 6px;
box-sizing: border-box;
}
form button {
display: block;
background: #888;
color: #FFF;
text-transform: uppercase;
height: 30px;
margin: auto;
padding: 7px 15px;
border: 0;
cursor: pointer;
}
<body class="login page">
<div class="body-wrapper">
<header class="hero-wrapper">
Banner
</header>
<section class="section-login">
<h1>Sign In</h1>
<form action="" method="post">
<fieldset>
<label for="username">
Username
<input type="text" id="username" value="" placeholder="Username" autofocus>
</label>
<label for="password">
Password
<input type="password" id="password" value="" placeholder="Password">
</label>
</fieldset>
<button type="submit">Login / Sign In</button>
</form>
<div class="help-text-wrapper hidden">
Something around here after fallback.
</div>
</section>
<footer class="globalfooter">
Footer
</footer>
</div>
</body>
Just change some class properties which I wrote down:
.login-layout__positioner {
display: flex;
align-items: center;
justify-content: center;
}
.form__group {
background-color: transparent;
}
a {
color: #333;
}
footer a {
color: #fff;
}
I want to have something like this
instead I
My html code is this
`
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<form class="quote" action="javascript:void(0);">
<span class="close">×</span>
<article class="goright">
<input type="name" name="Name" placeholder="" style="width: 140px"><br>
<input type="lastname" name="lastname" placeholder="" style="width: 140px"><br>
<input type="Place" name="Place" placeholder="" style="width: 140px"><br>
</article>
<aside id="sidebar">
<textarea type="name" name="Name" placeholder="" style="height: 80px"></textarea> <br>
</aside>
</form>
</div>
</div>
</div>
And this is my CSS
.modal {
display: none;
position: relative;
z-index: 1;
padding-top: 100px;
left: 0;
top: -300px;
float: right;
width: 40%;
height: 40%;
overflow: auto;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin:auto;
padding: 0;
border: 1px solid #888;
width: 80%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4;
overflow: hidden;
}
article#goright
{
float: right;
}
aside#sidebar
{
float: left;
}
aside#sidebar .quote input, aside#sidebar .quote textarea
{
width: 90%;
padding: 5px;
}
so I tried to look up this thing here but I could not find an answer that works for me, I tried a lot of variations but nothing really works and I can not get the result, I only managed to get one side that is floated right and aside bar that is left but aside is under previous bar.
So, can you give me a hint or code that can help me achieve the desired result ?
You don't need to use <aside> and other CSS tweaks to achieve the structure.
Just move the <textarea> above the <input> tags and add a float:left class and float:right class to them respectively.
The width of the form is inherited from the .modal class.
Also <input> tags type attribute used are invalid. Supporting type attributes are as mentioned in: https://www.w3schools.com/tags/att_input_type.asp
Also <textarea> does not have a type attribute by default.
.modal {
width: 40%;
height: 40%;
overflow: auto;
}
.align-right {
float: right;
}
.align-left {
float: left;
}
.modal-content {
background-color: #fefefe;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4;
}
input {
margin-bottom: 5px;
}
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<form class="quote" action="javascript:void(0);">
<textarea name="Name" placeholder="Textarea" style="height: 80px" class="align-left"></textarea>
<input type="text" name="Name" placeholder="Input A" style="width: 140px" class="align-right" />
<input type="text" name="lastname" placeholder="Input B" style="width: 140px" class="align-right" />
<input type="text" name="Place" placeholder="Input C" style="width: 140px" class="align-right" />
</form>
</div>
</div>
</div>
Here's an example of what you're trying to achieve -
.wrapper {
max-width: 500px;
}
.textarea-wrapper,
.input-wrapper {
float: left;
width: calc(50% - 10px);
}
.textarea-wrapper {
margin-right: 20px;
}
.textarea {
width: 100%;
height: 90px;
}
.input {
margin-bottom: 16px;
}
<div class="wrapper">
<div class="textarea-wrapper">
<textarea class="textarea"></textarea>
</div>
<div class="input-wrapper">
<input type="text" class="input" placeholder="Text 1">
<input type="text" class="input" placeholder="Text 2">
<input type="text" class="input" placeholder="Text 2">
</div>
</div>
Here's a link.
https://codepen.io/aphextwix/pen/MmZxjR
Take a look at this fiddle: https://jsfiddle.net/5xw7ssa4/
But you have some mistakes in your css:
Height should not be in %.
Both container must float to right.
Do not forget to clear:both after last floating element.
article#goright must be article.goright
In your html you have type="name" for example. It must be type="text".
Hi there you should review both your html markup and css as well bellow are my suggestions
css
.modal {
position: relative;
z-index: 1;
padding-top: inherit;
width: 50%;
height: 123px;
margin: 0 auto;
margin-top: 20px;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin:auto;
padding: 0;
border: 1px solid #888;
width: 80%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4;
}
form {
width: 100%;
padding: 10px 0px;
}
.close{
position: absolute;
right: 0;
color: #fff;
background: #000;
padding: 5px;
z-index: 3;
}
/*a classis identified by a "." an id is identified by an "#" so article#goright is wrong you should have wrote article.goright*/
article.goright {
float: left;
width: 50%;
}
aside#sidebar {
float: left;
width: 50%;
}
/* .quote is the form class aside is inside the form so instead of aside#sidebar .quote textarea you should write .quote aside#sidebar textarea */
.quote aside#sidebar input, .quote aside#sidebar textarea
{
width: 90%;
padding: 5px;
}
article.goright input {
width: 80%;
margin-bottom: 5px;
height: 20px;
}
/*very important to solve the issue*/
.clear{
width: 100%;
height: 0;
clear: both;
float: none;
}
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Testing Page</title>
</head>
<body style="width:100%; margin: 0 auto; padding: 0; text-align: center;">
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<form class="quote" action="javascript:void(0);">
<span class="close">×</span>
<aside id="sidebar">
<textarea type="name" name="Name" placeholder="" style="height: 80px"></textarea> <br>
</aside>
<article class="goright">
<input type="name" name="Name" placeholder=""><br>
<input type="lastname" name="lastname" placeholder=""><br>
<input type="Place" name="Place" placeholder=""><br>
</article>
<!-- this is the div you need to have myModal div cover the div inside it since they are floating left -->
<div class="clear"></div>
</form>
</div>
</div>
</div>
</body>
</html>
So I'm in the process of building my website, this is all I have in my body tag:
#social-media {
width: 175px;
margin-left: auto;
margin-right: auto;
padding-top: 10%;
}
#social-media img {
padding: 5px;
}
#social-media ul li {
display: inline;
}
<div id="logo"></div>
<div class="search">
<form action="search.php" method="get">
<input name="keywords" type="text" placeholder="Search for a movie!" autocomplete="off" size="40">
<input type="submit" value="DRINK!">
</form>
</div>
<div id="social-media">
<img src="facebook2.png">
<img src="twitter2.png">
</div>
I'm trying to pin the social-media div to the bottom of the page no matter what device the user is viewing on, is it possible to do this with no wrapper?
If you want it to always appear at the bottom of the screen then use
#social-media {
positioning: fixed;
bottom: 0;
}
The documentation on W3Schools can be found here
If you want to ensure that it is always at the bottom of the actual page (below other content) then try:
#social-media {
clear: both;
}
You seem to need the div to be "absolutely" positioned at the bottom, like this:
#social-media {
width: 175px;
margin-left: auto;
margin-right: auto;
position:absolute;
left:0;
right:0;
bottom:0;
}
#social-media img {
padding: 5px;
}
#social-media ul li {
display: inline;
}
<body>
<div id="logo"></div>
<div class="search">
<form action="search.php" method="get">
<input name="keywords" type="text" placeholder="Search for a movie!" autocomplete="off" size="40">
<input type="submit" value="DRINK!">
</form>
</div>
<div id="social-media">
<img src="facebook2.png">
<img src="twitter2.png">
</div>
</body>