Ok so I'm trying to program a bar that appears at the top of the webpage. On that bar I want there to be a title, a button, and an input/search bar. My problem is that the input keeps overlapping the button in the top bar. Please note that the bar at the top is a div. Here is the link to the page with the bug: Link to the page.
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Langmesh</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div id="topbardiv">
<h1 id="titletext">Langmesh</h1>
<button onclick="browse()" id="browsebutton">Browse</button>
<input type="text" id="searchbar" value="Search">
</div>
</body>
</html>
Here is the CSS code:
#titletext {
font-size: 50px;
font-family: "Brush Script MT", sans-serif;
}
#topbardiv {
background-color: darkorange;
text-align: center;
border: 10px solid lightgray;
}
#topbardiv h1,
#topbardiv button {
margin: 0px;
display: inline-block;
padding: 1em;
color: white;
-webkit-text-stroke: 1.5px #000000;
}
#browsebutton,
#searchbar {
height: 150px;
width: 100px;
font-size: 30px;
font-family: "Brush Script MT", sans-serif;
background-color: darkorange;
border: 0;
}
I have not added any Javascript yet.
If this is a stupid question with a simple answer and I'm just dumb, feel free to criticize me.
I tried using text a button and an input in the same div and used css to put them all right next to eachother and I expected that it would look like a bar at the top with a title a browse button and a search bar but instead the search bar and the browse button ended up overlapping.
I am using a Windows 10 OS and replit to program the page and a chrome web browser.
it's because you have set the width of the #browsebutton and #searchbar. Please unset it and it will work.
* {
margin: 0;
font-family: 'roboto';
}
.container {
text-align: center;
}
.container input {
border: none;
box-shadow: 0px 0px 2px;
height: 33px;
}
.container button {
border: none;
box-shadow: 0px 0px 2px;
height: 33px;
}
.container h1 {
}
.background_css {
width: 100%;
background: orange;
padding-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Langmesh</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container">
<div class="background_css">
<h1 id="titletext">Langmesh</h1>
<form method="POST" action="page.html" class="search_css">
<input type="search" placeholder="Search..."><button type="submit">Search</button>
</form>
</div>
</div>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
display: block;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0]
alert(dis.style.display)
}
</script>
</head>
<body>
<div class="navbar">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
When the top left button is pressed, the alert popup box prints nothing indicating that navbar has no display. But navbar is a div element with display = block explicitly set in the CSS code.
You're not returning a value because the style attribute does not contain any value in this instance. If for example we move the display: block to the element as a style attribute like style="display: block" then it would return the value as you expect. See example provided, but the behavior is expected.
Hope this helps, cheers!
PS - a div is a block element by default, no need to define it in the css unless you're overriding the default for whatever reason.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0];
console.log(dis);
alert(dis.style.display);
}
</script>
</head>
<body>
<div class="navbar" style="display: block">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
Looks like you want to get the CSS computedStyle. You can use getComputedStyle to return an object containing the values of all CSS properties of said element.
getComputedStyle(dis, "display").display
Will return the display rule set in your elements css. As Chris W explained in the prior answer if you use el.style.display, it is looking for the inline style rule for display.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
display: block;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0]
alert(getComputedStyle(dis, "display").display)
}
</script>
</head>
<body>
<div class="navbar">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
I recently started to make a web-server, I'm usually working with back-end code, but now I got a project to do. I'm still very green on CSS and HTML. So basically I need to somehow move the bank logo down and the Label - "Maze bank of Los-Santos" a bit closer to the logo, I have researched a lot of, but I still don't understand the working principle of the position, width, display, margin, top sometimes work, sometimes doesn't, at some times I use right, left positioning, but at this point I don't know how to do it.
This is how my website looks:
My index code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/static/style2.css">
<title>Maze bank - Log In</title>
<link rel="icon" href="https://i.ibb.co/hm8Fz83/bank.png">
<link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
</head>
<body>
<br>
<img src="https://i.ibb.co/hm8Fz83/bank.png"></img>
<p><span style="color:white">Maze Bank Of </span>Los-Santos</p>
<form action="http://127.0.0.1:8080/api/test?category=computers" method="POST" target="_blank">
<div class="login-box">
<div class="textbox">
<i class="fa fa-credit-card" aria-hidden="true"></i>
<input type="password" placeholder="Bill Number" name="bill" value="" maxlength="15" minlength="15" >
</div>
<div class="textbox">
<i class="fa fa-key" aria-hidden="true"></i>
<input type="password" placeholder="Pincode" name="pin" value="" maxlength="4" minlength="4">
</div>
<button class="link">Forgot password ?</button>
<input class="btn" type="submit" name="" value="Log in">
</form>
</div>
<div class="copyright">
<h4>©™ 2019 Copyright All Rights Reserved</h4>
</div>
</body>
</html>**strong text**
Here's my CSS Code:
#import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
p{
display:block;
color: #2ECC71;
font-family: 'Teko', sans-serif;
font-size: 50px;
text-align: center;
font-weight: bold;
border-block: 2px solid black;
text-shadow: 2px 2px #1a1111;
}
p:first-letter{
display:block;
/*adjust the letter position for best appearance*/
margin:4px 4px 0 5px!important;
/*set font family color and size*/
color:#2ECC71;
font-size:1.5em;
font-family: 'Teko', sans-serif;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
}
html, body{
margin: auto;
background: white;
background: url(https://external-preview.redd.it/ar2z7yTm97BFzRtPJXWA_twAbm-DlDKUt3mS0R8aJtY.png?auto=webp&s=c965a508182b77fbdec96dd82d6ed224a3b17543) no-repeat fixed center;
}
.logo{
font-family: fantasy;
}
.login-box{
width: 280px;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.textbox{
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 8px 0;
border-bottom: 1px solid #e16a74;
}
.textbox i {
width: 26px;
float: left;
text-align: center;
}
.textbox input{
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
float: left;
width: 80%;
margin: 0 10px;
}
.btn{
width: 100%;
background: #e16a74;
border: 2px solid #e16a74;
margin: 12px 0 ;
cursor: pointer;
font-size: 18px;
padding: 5px;
color: white;
}
.btn {border-radius: 12px;}
.copyright {
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
bottom:0;
}
.copyright h4{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 10;
text-align: center;
}
.login-box button.link
{
background:none;
border:none;
color: wheat;
font-family: 'Teko', sans-serif;
font-weight: normal;
font-size: 20px;
position:relative;
bottom:1000%;
left:55%;
}
Firsts, check your code to be valid :) For example, <img> element should not have a closing tag. You should always try to have valid html because html with errors can affect rendering in browsers.
Secondly, I see that you added a <br> after <body> and before <img>. Possibly this is to make a small margin above the logo. Don't do that because this way you will never get a reliable distance from the top across browsers. Remove <br> and use margin-top: 16px or so style in your css for img.
Next, give a css class to your p element, like <p class="bank-name"> and style it in css:
.bank-name {
color: white;
margin-top: 10px;
}
This p is very specific, so you should give it a dedicated class because you can have other <p>s on the page that do not need the same appearance.
Two more things:
Avoid inline styles in html.
Do not use !important unless you have a huge reason to do it.
Also <p> is block by default, so you do not need that display: block in html. You can often find default styles at W3school.
Hope, this helps!
You just need to have a div tag to regroup your image and text. That div must have display: block so that the text won't be on the same line, but under. Now depending of the width of the image, you will probably need to align the text with text-align: center
You can read more about css rules on w3Schools
img {
display: block;
text-align: center;
}
<div>
<img src="https://i.ibb.co/hm8Fz83/bank.png"></img>
<p><span>Maze Bank Of </span>Los-Santos</p>
</div>
Alrighty. I'm making a website, and I'm already screwing up. In the process of making a navbar, the animation I'm trying to make is not working correctly.
* {
margin: 0;
padding: 0;
font-family: Roboto;
}
header {
box-sizing: border-box;
max-height: 50px;
}
nav {
position: sticky;
top: 0;
padding: 7.5px;
}
.link {
padding: 7.5px;
display: inline-block;
font-size: 15px;
color: black;
text-decoration: none;
border-radius: 10px;
background-color: white;
transition-duration: 0.75s;
}
.linkanim {
padding: 7.5px;
display: inline-block;
font-size: 15px;
color: black;
text-decoration: none;
border-radius: 10px;
}
.linkanim:hover {
background-color: grey;
}
.icocredit {
position: absolute;
top: 97.5%;
font-size: small;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="./stylesheets/main.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
<title>Test</title>
</head>
<body>
<header>
<nav>
<a class="link linkanim" href="#test">Test</a>
</nav>
</header>
<main>
</main>
<footer>
<div class="icocredit">Icons made by Freepik from www.flaticon.com</div>
</footer>
</body>
</html>
The button is only supposed to show an animation when a mouse hovers over it.
However, the Button does some weird movement on page load.
I found out that it's either an issue with the font or with me loading the HTML file locally in chrome, on a real web server this isn't an issue. I'll mark this as the answer and thereby close this question.
My html form arpitpkh.pythonanywhere.com works fine on pc but not responsive on mobile phones(I'am using iphone7) even though i've added the <meta> tag.
Here's my html code for 'home.html'
What's wrong with my code?? What should i change in my code?
body {
background-image: url("/static/grey.jpg");
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
text-align: center;
margin-top: 250px;
font-size: 70px;
color: coral;
}
.input2:hover {
background-color: coral;
color: white;
}
.input1 {
position: absolute;
top: 60%;
left: 37%;
width: 250px;
height: 30px;
}
.input2 {
position: absolute;
top: 59.4%;
left: 59%;
width: 87px;
height: 35px;
background-color: #ddd;
border: none;
color: black;
padding: 10px 5px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
transition: 0.3s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Weather Forecast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
<script src="main.js"></script>
</head>
<body>
<p>
<form action='/weather' method="post">
<h1>City Name:</h1><input class="input1" type="text" name="city_name"> <br/>
<input class="input2" type="submit" name="form" value="Submit">
</form>
</p>
</body>
</html>
You're using absolute positioning and defining sizes in px which stays the same on all screen sizes, making your design unresponsive.
You need to use responsive units like ems and media queries.
Check out this article on responsive design principles and this quick tutorial.
I have a bootstrap collapsible panel set up to expand and collapse a search bar. This works fine with no styling but when styling is added, it has a mind of its own. It looks like the styling is getting In the way of the collapsing transition. Then it just stops working.
Here is the code with the styling attached to this. I want this to be clickable on an a href link.
#search-dropdown-div {
width: 100%;
padding: 10px;
display: inline-block;
background-color: transparent;
}
#center {
margin: 0 auto;
width: 1000px;
position: relative;
}
#center form {
position: relative;
}
#center form input[type="search"] {
width: 100% !important;
padding: 16px !important;
border-radius: 10px;
border-style: none;
font-size: 20px;
letter-spacing: 1px;
}
#center form input[type="submit"] {
background-color: #3A83F3;
width: 100px;
padding: 16px;
margin-left: -100px;
border-style: none;
border-radius: 5px;
color: white;
position: absolute;
top: 4px;
right: 4px;
float: right;
letter-spacing: 1px;
}
#center form input[type="submit"]:hover {
background-color: #0D5C9E;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>Bootstrap Collapse Training</title>
</head>
<body>
<a class="mag-search" data-toggle="collapse" href="#search-dropdown-div"><i class="fa fa-search" aria-hidden="true"></i>Search</a>
<div id="search-dropdown-div" class="collapse">
<div id="center">
<form role="search">
<input class="fontAwesome" type="submit" value="Search  " />
<input class="fontAwesome" type="search" placeholder=" Search our website..." />
</form>
</div>
</div>
</body>
From what I tested with your code, I think it's the display: inline-block of #search-dropdown-div that causes problem.
Can you tell me if it works if you remove this line ?