I am creating a front-end for google homepage for a project, but I am confused about how to apply spacing of the nav bar same as the original google home page. The code below has spacing something like this:About Store Images Sign in but I want something like this About Store Images Sign in.
html{
height: 100%;
min-height: 100%;
}
a{
display: inline-block;
padding: 15px;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="header">
About
Store
Images
Sign in
</div>
<div id="main">
<img src="google.png" alt="img" width="auto">
<form action="https://google.com/search">
<input type="text" name="q">
<br>
<input type="submit" value="Google Search">
<input type="submit" name="btnI" value="I'm Feeling Lucky">
</form>
</div>
<div id="footer">
Advertising
Business
How Search works
Privacy
Terms
Settings
</div>
</body>
</html>
I will appreciate any help or suggestions for this.
Here is a solution using display: flex and justify-content: space-between;
html{
height: 100%;
min-height: 100%;
}
a{
display: inline-block;
padding: 15px;
color: black;
}
#header {
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Search</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="header">
<div>
About
Store
</div>
<div>
Images
Sign in
</div>
</div>
<div id="main">
<img src="google.png" alt="img" width="auto">
<form action="https://google.com/search">
<input type="text" name="q">
<br>
<input type="submit" value="Google Search">
<input type="submit" name="btnI" value="I'm Feeling Lucky">
</form>
</div>
<div id="footer">
Advertising
Business
How Search works
Privacy
Terms
Settings
</div>
</body>
</html>
Related
So in my code I have 2 divs that exists inside a Parent div. When I open the code with live server or from the file folder and inspect it in google or mozilla for some reason my divs were combined into the other div.
Why does it do that? By the way I'm trying to align the search div to the right (school task)
HTML BELOW
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="teht14.css" />
</head>
<body>
<div id="base">
<div id="links">
Savonia (linkki)
<select name="" id="">
<option value="">Valitse</option>
<option value="">Ohjeet</option>
<option value="">Yhteystiedot</option>
</div>
<div id="search">
<form method="get" id="search">
<input type="text" placeholder="Search">
<input type="submit" value="Search">
</form>
</div>
</div>
</body>
</html>
CSS BELOW
#base {
display: flex;
background-color: rgb(196, 196, 196);
padding: 3em 0 3em 0;
justify-content: space-between;
}
a {
text-decoration: none;
}
I am expecting that the divs are separated in the browser as it is in the code but mainly I am trying to align the search div to the right. This is a school task.
You are missing a closing <select> tag. Some browsers try to correct the error and depending on what it is, respond differently. That is why you were seeing what you were seeing.
Below is what your code should be. Good luck. 🤞
#base {
display: flex;
background-color: rgb(196, 196, 196);
padding: 3em 0 3em 0;
justify-content: space-between;
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="teht14.css" />
</head>
<body>
<div id="base">
<div id="links">
Savonia (linkki)
<select name="" id="">
<option value="">Valitse</option>
<option value="">Ohjeet</option>
<option value="">Yhteystiedot</option>
</select>
</div>
<div id="search">
<form method="get" id="search">
<input type="text" placeholder="Search">
<input type="submit" value="Search">
</form>
</div>
</div>
</body>
</html>
Can anyone kindly help me on how to align these two buttons using css?
<div>
<form action="create.html">
<input type="submit" value="Add" />
</form>
<input type="button" value="Delete" onclick="deleteItem()" />
</div>
As I did the two buttons are one above the other
.buttons{
display: flex;
justify-content: center;
}
.buttons form{
margin: 0 10px;
}
<div class="buttons">
<form action="create.html">
<input type="submit" value="Add" />
</form>
<input type="button" value="Delete" onclick="deleteItem()" />
</div>
add class="container" to div
and id ="btn" to button
<style>
.container{
text-align: center;
padding-top: 100px;
}
#btn{
font-size: 25px;
}
</style>
whole code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Center align button</title>
<style>
.container{
text-align: center;
padding-top: 100px;
}
#btn{
font-size: 25px;
}
</style>
</head>
<body>
<div class="container">
<form action="create.html">
<input type="submit" value="Add" />
</form>
<br />
<input type="button" id ="btn" value="Delete" onclick="deleteItem()" />
</div>
</body>
</html>
This question already has answers here:
Why can't <fieldset> be flex containers?
(7 answers)
Closed 2 years ago.
Based on everyhting I've googled, flexbox should be displaying in a horizontal row by default, but I feel like I've tried everything and can't get this to work. I will post the code below. If you remove the "display: flex;" from the css it looks similar to how I want it to look, but I want the heights of the 3 divs to all be even, which is why I want to use flexbox. Any help would be appreciated.
/*PARENT*/
form fieldset{
display: flex;
flex-direction: row;
padding: 5px 0px;
border: 0;
}
/*CHILDREN*/
form fieldset > div{
display: inline-block;
width: 25%;
text-align: center;
border: solid thin black;
}
/*STYLES*/
form fieldset:first-of-type > div > p{
text-decoration: underline;
font-size: 1.2em;
}
form fieldset:first-of-type > div > div{
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
form fieldset:first-of-type div p{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<fieldset id="fieldset">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</fieldset>
</form>
</body>
</html>
Its fieldset tag that is not respond to flex container , you should use other element if you want flex to be worked. i have used below section tag to solve you are free to try other tags.
/*PARENT*/
form fieldset{
display: flex;
flex-direction: row;
padding: 5px 0px;
border: 0;
}
/*CHILDREN*/
form section > div{
display: inline-block;
width: 25%;
text-align: center;
border: solid thin black;
}
/*STYLES*/
form fieldset:first-of-type > div > p{
text-decoration: underline;
font-size: 1.2em;
}
form fieldset:first-of-type > div > div{
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
form fieldset:first-of-type div p{
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<section id="fieldset">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</section>
</form>
</body>
</html>
flex with fieldset will not go very well. I just used a wrapper and all other things will be taken care by flex(I hope that is not an issue here).
Remove unnecessary elements, justify-content will take care the things in your case.
make things simpler than making it complicated.
.MainDiv {
display: flex;
width: 100%;
justify-content: space-around;
}
.MainDiv>div {
width: 25%;
text-align: center;
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="temp_css.css">
</head>
<body>
<form action="temp.html">
<fieldset id="fieldset">
<div class="MainDiv">
<div id="movie">
<p>Movie or TV Show?</p>
<div>
<label for="movie">Movie</label>
<input type="radio" name="tv_or_movie" id="movie">
<label for="tv">TV Show</label>
<input type="radio" name="tv_or_movie" id="tv">
</div>
</div>
<div id="animated">
<p>Is It Animated?</p>
<div>
<label for="animated_yes">Yes</label>
<input type="radio" name="animated" id="animated_yes">
<label for="animated_no">No</label>
<input type="radio" name="animated" id="animated_no">
</div>
</div>
<div id="favorites">
<p>Would You Consider it One of Your Favorites?</p>
<div>
<label for="favorites_yes">Yes</label>
<input type="radio" name="favorite" id="favorites_yes">
<label for="favorites_no">No</label>
<input type="radio" name="favorite" id="favorites_no">
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
I am fairly new to web design so please bear with my lack of knowledge and possible stupid questions.
I am trying to create a login page as shown below.
I have placed the Username and Password form inside a div element which I have centred on the page. However, I haven't managed to centre the Username and Password field correctly inside this div element.
I tried to place form by centering it relative to the div element in the middle of the page and placing the login to the bottom right corner however, it still doesn't work.
Further, I am not able to correctly place The header "SampleWebPage" in its correct place.
Here's the CSS and HTML code for the centred div class inside which the form is placed.
.login_div {
width: 300px;
height: 300px;
/* Center form on page horizontally & vertically */
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}
<html>
<head>
<title>Login Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='login.css') }}">
</head>
<body>
<div class = "login_div">
<form action="" method = "post" class="login_form">
Username:
<input type="text" name="username" value="{{
request.form.username }}">
<br>
Password:
<input type="password" name="password" value="{{
request.form.password }}">
<br>
<input class="btn btn-default" type="submit" value="Login">
</form>
</div>
</body>
</html>
I'm sorry if this is a very broad question, however I require help getting this webpage to work correctly.
Thanks.
You can use flexbox:
.login_div {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.row {
padding: 10px;
}
.row.submit {
text-align: right;
}
<head>
<title>Login Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='login.css') }}">
</head>
<body>
<div class="login_div">
<form action="" method="post" class="login_form">
<div class="row">
<label>Username:
<input type="text" name="username" value="{{request.form.username}}">
</label>
</div>
<div class="row">
<label> Password:
<input type="password" name="password" value="{{request.form.password }}">
</label>
</div>
<div class="row submit">
<input class="btn btn-default" type="submit" value="Login">
</div>
</form>
</div>
</body>
I have created a login page but its not responsive and for achieving that I have messed up my entire design.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box
{
position: center;
top: 17;
left: 17;
}
.logo
{
position: absolute;
top:50px;
left: 100px;
border-right: 2px solid gray;
}
</style>
</head>
<body> <div class="container">
<h2>ADMIN PANEL LOGIN</h2>
<form>
<div>
<div class="form-group box">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<img src="back_box.png" class="box" width="900" height=" 400" />
<img src="logo_written.png" class="logo" width="250" height="300" />
</div>
</form>
</body>
</html>
i have added bootstrap classes too but i am unable to achieve my goal of responsive design
For Bootstrap you need to add bootstrap file source just add this to your head section.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
just add one link cdn of bootstrap.css..
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
.box
{
position: center;
top: 17;
left: 17;
}
.logo
{
position: absolute;
top:50px;
left: 100px;
border-right: 2px solid gray;
}
</style>
</head>
<body> <div class="container">
<h2>ADMIN PANEL LOGIN</h2>
<form>
<div>
<div class="form-group box">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<img src="back_box.png" class="box" width="900" height=" 400" />
<img src="logo_written.png" class="logo" width="250" height="300" />
</div>
</form>
</body>
</html>
Add this meta tag to your head tag
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
after that you can able to write media query for multiple devices like mobile & tablates...
#media (max-width: 767px) {
/* write css for mobile here */
}
#media (min-width: 768px) and (max-width: 1024px) {
/* write css for tablate here */
}