How would I be able to position all these elements in the middle of the webpage?
for example the h1 a bit above the input, but all relative to each other, also taking into account that it should be responsive. I know how to position them using position: absolute; but I'd like to know what a better practice would be.
https://jsfiddle.net/w75ksg69/3/
html {
background-color: rgb(171, 248, 235);
font-family: sans-serif,Tahoma, Verdana, 'Times New Roman';
}
h1#maintitle {
margin: 0 0 0 0;
text-align: center;
}
div#info {
font-size: 1em;
margin: 0.5em;
}
<body>
<h1 id="maintitle">Find your new abcde</h1>
<div id="info">
<input name="arrive" type="date" placeholder="Arrival date:">
<input name="departure" type="date" placeholder="Departure date:">
<input name="guests" type="number" placeholder="Guests:">
<button id="search_button" type="button">Search</button>
</div>
</body>
I made all your inputs on the center using just text-align: center:
div#info {
font-size: 1em;
text-align: center;
}
Hope, it helps
Related
I'm trying to set the toggle buttons to the right. float, right : 0, align-self is not working for me.
What am I doing wrong ?
The picture is at the end.
HTML:
<div if:true={showCards} class='main-container'>
<div class="main-container-top">
<p class="currs-available"> {trainingPlans.length} {headerLabel} </p>
<lightning-input
class="search slds-p-vertical_small"
type="search"
onchange={handleSearch}
variant="label-hidden"
placeholder="Search" >
</lightning-input>
<c-toggle-button
class="toggle"
buttons={toggleData}
ontoggleswitch={handleToggleSwitch}
default=1>
</c-toggle-button>
</div>
.............
......
.....
and relevant CSS:
.main-container{
background: #f5f5f5;
}
.main-container-top{
display: flex;
}
.currs-available{
width: 33%;
font-size: 20px;
font-weight: 700;
padding: 9px 0 0 20px;
}
.toggle{
width: 33%;
}
Image of element
You can use position: absolute; if you're using right: 0;
Although, the display: flex; will be ignored
I try to bring input fields in to the centre of the page. For some reasons the padding that I have set for the input fields moves them to right and I don't want this. Could please somebody help me to fix this? Here is the code.
.BeWeird_register_container {
display: flex;
justify-content: center;
}
.BeWeird_register_wrapper {
width: 60%;
}
input[type=text],
select {
border: none;
width: 100%;
padding: 30px 20px;
margin: 8px 0;
display: inline-block;
background-color: #000;
color: #BBFB34;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 1.2vw;
}
<div class="BeWeird_register_container">
<div class="BeWeird_register_wrapper">
<div class="BeWeird_login_wrapper">
<div class="login_image"><img src="Images/LoginImage.png" alt="" /></div>
<form method="post" action="BeWeird_login.php">
<?php include('errors.php'); ?>
<div class="login_form_wrapper">
<div class="input-group">
<input class="login" type="text" placeholder="Username" name="username">
</div>
<div class="input-group">
<input class="login" type="password" placeholder="Password" name="password">
</div>
<div class="input-group">
<button class="login" type="submit" class="btn" name="login_user">Login</button>
</div>
</form>
</div>
</div>
</div>
Help would much appreciated. Thanks for in advance.
In my opinion, you put display: flex in styles of the wrong container.
You want to center the DOM of login_form_wrapper.
Remember that flex-direction is set to row` as default.
Here's a nice explanation of how to use flex.
A Complete Guide to Flexbox
Correct me if I am wrong but as far as I understand that's what you are looking for:
JsFiddle
David
To center inputs in your form, add style="text-align:center;" to the parent element that contains the inputs, in this case that is the login_form_wrapper class.
Also, if you check the boxes in the browser (F12), you will see that the div BeWeird_login_wrapper shows larger than it should be. For simplicity, just make use of the structure above this heading MDN web docs and nest the divs.
thanks for your help guys. The code was fine. It just needed in the input css code box-sizing:border-box;
like this:
input.login[type=text], select {
border:none;
width: 100%;
padding: 30px 20px;
margin: 8px 0;
box-sizing:border-box;
background-color: #000;
color:#FEA6E5 !important;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size:1.2vw;
}
You can mention use:
outer-element{
display:flex;
justify-content:center;
align-items:center;
}
I am trying to create Google's Advanced Search page copy. I am new to programming and I'm having 2 problems. First is that link titled "google search" should be inside the gray bar positioned at the start of the page. Second, I am trying to write css code to reverse positions of texts and their correlated input fields, because I noticed in Google's html that it is also coded in reverse and then corrected from initial position.
Help would be greatly appreciated!
.label {
color: rgb(218, 32, 32);
margin-left: 15px;
padding: 15px;
margin-bottom: 15px;
} */
html, body {
padding: 0;
margin: 0;
font-size: 16px;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color:black;
text-decoration: none;
}
.navbar a:hover{
text-decoration: underline;
}
.content {
margin-top:100px;
text-align:center;
}
#textbox {
font-size: large;
height: 30px;
width: 500px;
border-radius: 25px;
}
.graybar{
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial,sans-serif;
height: 60px;
width: 100%;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
.margin {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
body {
font-family: arial,sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Search</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
<a href="index.html">
Google Search
</a>
</div>
</div>
<div class="label">Advanced Search</div>
<h3 style="font-weight:normal">Find pages with...</h3>
<form action="https://google.com/search">
<input class="margin" value autofocus="autofocus" id="xX4UFf" name="as_q" type="text">
<label for="xX4UFf" class="float">all these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="CwYCWc" name="as_epq" type="text">
<label for="CwYCWc" class="float">this exact word or phrase:</label>
<br>
<input class="margin" value autofocus="autofocus" id="mSoczb" name="as_oq" type="text">
<label for="mSoczb" class=float>any of these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="t2dX1c" name="as_eq" type="text">
<label for="t2dX1c" class="float">none of these words:</label>
<br>
<input type="submit">
</form>
</body>
</htmL>
Here is how website looks
Assuming that you can change your HTML, flexbox is the solution to both of your issues.
Let's start with your header. You need your image and your text to be both in the grey box, with the image on the left side and the text on the right side.
If you set your header to use display: flex, then you can specify justify-content: space-between to tell the browser to render the child elements with as much space as is possible between them. For two children, that will result in the first child being on the left, and the second child being on the right. If there were more children, they'd be spaced evenly between (eg left, middle, right for three children etc.)
In your case, this would simply require adding the appropriate styling to the .graybar class which is serving as your header:
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial, sans-serif;
height: 60px;
width: 100%;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color: black;
text-decoration: none;
}
.navbar a:hover {
text-decoration: underline;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
body {
font-family: arial, sans-serif;
}
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
Google Search
</div>
</div>
I've left the other styling as you had in your original.
CSS's flexbox is extremely powerful; you can use it for your other issue with the labels/inputs as well, if you can modify your HTML. Looking at the actual Google advanced search page here, your HTML doesn't actually look anything like the original, so I'm assuming you're not restricted to keeping the same HTML as you have in your original post.
Let's instead structure our HTML like this:
<div class="row">
<input type="text" id="allwords" >
<label for="allwords">All these words</label>
</div>
We can now apply display: flex to each row and leverage the flex-direction property to reverse the order of the children so that the label is displayed prior to the input.
.row {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
label {
display: block;
margin-right: 8px;
}
<div class="row">
<input type="text" id="allwords">
<label for="allwords">All these words:</label>
</div>
Generally I wouldn't recommend doing it like this, but I'm equally unsure why you're trying to force inputs before labels in your HTML. :)
For more information about CSS's flexbox, I highly recommend this guide from CSS-Tricks.
I have an HTML tag like below :
<div id="Code_G" class="editor-group">
editor-group<br />
<div id="Code_L" class="editor-label ">
editor-label
</div>
<div id="Code_F" class="editor-field ">
editor-field
</div>
</div>
I must give style with CSS to this tags without any changing in the HTML tags to make an input like below picture. The id="Code_F" must be converted to an input tag. How can I do this only with CSS ?
The most important thing is that this job must be done without any adding element to the HTML tags or any direct changing in the HTML tags and all the changes must be done with CSS!
Any help will be appriciated!
No, you can use the css content property to generate / replace content like this.
p:after {
content: "lorem";
}
If you want to alter the html, you would have to use javascript.
There is not a way you could programmatically create/delete/replace DOM elements using using HTML/CSS. Such requires Javascript, or creating the elements manually, even the pseudo elementlike after can only do so much since there is no way you could add a working input inside the content property, here is a way you could use in javascript
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a basic input field</p>
<button onclick="myFunction()">create</button>
<script>
function myFunction() {
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("value", "this is a simple input");
document.body.appendChild(x);
}
</script>
</body>
</html>
#Code_G {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 1;
color: #d9d3d3;
text-align: center;
position: relative;
}
#Code_L {
position: absolute;
right: 15px;
top: 16px;
background: #fff;
padding: 0 10px;
color: #000;
}
#Code_F {
min-height: 46px;
box-sizing: border-box;
border: 1px solid #ced4da;
border-radius: 4px;
padding: 15px 15px 10px 15px;
font-size: 16px;
font-weight: 400;
color: #495057;
text-align: right;
margin-top: 8px;
}
<div id="Code_G" class="editor-group">
editor-group<br />
<div id="Code_L" class="editor-label ">
editor-label
</div>
<div id="Code_F" class="editor-field ">
editor-field
</div>
</div>
You can use fieldset and legend for this purpose.
legend {
text-align:right
}
.output {
font: 1rem 'Fira Sans', sans-serif;
}
input {
border:none;
width:100%;
outline:none;
}
fieldset {
border-radius:5px;
width:400px;
}
input::placeholder {
text-align:right
}
<div>
<fieldset>
<legend>editor-field</legend>
<input type="text" id="monster" name="monster" placeholder="editor-field">
</fieldset>
</div>
I'm brushing up my HTML/CSS skills for a new job. The last time I wrote some HTML was in 1999... So, no need to say that I fell behind.
So, as a fan of "Space Trader" game on Palm OS, I have decided to rewrite in HTML all the screens of the game. And I'm struggling with a CSS issue.
Here is the screen I'm trying to rewrite :
And here is my markup :
<div class="screenTitle">
<h1 class="leftTitle">Bank</h1>
<span class="titleButtons">
<input type="button" id="btB" value="B" />
<input type="button" id="btS" value="S" />
<input type="button" id="btY" value="Y" />
<input type="button" id="btW" value="W" />
</span>
</div>
And the CSS :
.screenTitle {
height: 0.7em;
border-bottom-style: solid;
border-color: rgb(49,0,156);
font-size: 40px;
}
.leftTitle {
margin-top: 0;
font-size: 0.5em;
text-align: center;
color: white;
padding-left: 0.1em;
padding-right: 0.1em;
background-color: rgb(49,0,156);
float: left;
border-top-left-radius: 0.3em;
border-top-right-radius: 0.3em;
line-height: 1.5em;
font-weight: bold;
}
.titleButtons {
float: right;
}
And here is the result
So, you can see that I'm struggling with the positionning of the 4 shortcuts buttons.
Do you have any clue for me to sort this out ? And do you have any critic to formulate ?
Thanks a lot
You need to change the vertical alignment of your buttons. Have this in your CSS:
.titleButtons input{
vertical-align:top;
}
Demo
.titleButtons input {
float: right;
vertical-align:top;
margin:7px 0px 0px 0px;
}
If you add some top margin and remove som left/right margins, the buttons will also position themselves nicer on the bar.