I'm really new to programming. Whenever I try inserting an image using it moves the border down and inputs down. I then have to move them back to match the text as shown in the picture below. I do that using "margin:" in CSS. Why do the borders and input move down when I try inserting it? Is there an easier way to position things like borders rather than using :margin:" ?
CSS(for the navbar and the input):
#navBar {
border: 2px solid black;
height: 30px;
width: 43%;
margin-top: -42px;
margin-left: 405px;
padding: 5px;
}
#searchInput {
margin-top: 3px;
margin-left: 1250px;
height: 35px;
width: 185px;
border-radius: 10px;
font-family: 'Roboto', sans-serif;
font-size: 20px;
outline: none;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Restaurant</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href= "{{ url_for('static', filename='style.css') }}">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<img src="/static/searchImage.png" id="searchImage">
<div id="search">
<input id="searchInput" type="text">
</div>
<div id="navBar">
<a href="deals">
<button id="dealsButton">Deals</button>
</a>
<a href="burgers">
<button id="burgersButton">Burgers</button>
</a>
<a href="drinks">
<button id="drinksButton">Drinks</button>
</a>
<a href="sides">
<button id="sidesButton">Sides</button>
</a>
<a href="desserts">
<button id="dessertsButton">Desserts</button>
</a>
</div>
</body>
</html>
Image:
The border was perfectly aligned with the text before inserting the image and input was right next to the border. But when I insert this happens.
Related
I have made a textarea but I want tomake a header writing "HTML" in the top right corner in small letters like css-tricks.
My code:
<code><pre><textarea rows="16" cols="60" readonly style="resize:none; font-size: 18px;border:8px ridge #ff0000;">
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Button Ripple Effect | #Programmer</title>
</head>
<body>
<div class="wrapper">
<div class="btns">
<a href="#">Button 1</a>
<a href="#">Button 2</a>
</div>
</div>
</body>
</html>
</textarea></pre></code>
Just need a bit of CSS. You may want to use a class selector instead, though.
pre {
position: relative;
display: inline-block;
}
pre::before {
position: absolute;
top: 10px;
right: 10px;
content: "HTML"
}
<pre><textarea rows="16" cols="60" readonly style="resize:none; font-size: 18px;border:8px ridge #ff0000;">
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Button Ripple Effect | #Programmer</title>
</head>
<body>
<div class="wrapper">
<div class="btns">
<a href="#">Button 1</a>
<a href="#">Button 2</a>
</div>
</div>
</body>
</html>
</textarea></pre>
It's easy if you remove textarea element.
Because I think you don't need it.
To do that:
Add a span tag before any code.
Optional: Add (an id || a class)
Write Html in span tag.
In CSS set code tag's position to relative
In CSS set span tag's position to absolute
Style the span For example:
background: hsla(0, 0%, 0%, 0.3);
color: white;
padding: 6px 8px;
border: none;
outline: none;
/* Below gives it full round corners */
border-radius: 999px;
Then set it's position to right top corner:
top: 5px;
right: 5px;
transform: translate(-50%, -50%);
Your Done!
Note: If you are unfamiliar with some of the top propersties search css that property.
For example CSS outline
The final:
<pre><code>
<span class="tag">HTML</span>
<!-- Your codes -->
</code></pre>
And:
pre > code {
position: relative;
}
.tag {
position: absolute;
top: 5px;
left: 5px;
transform: translate(-50%, -50%);
color: white;
background: hsla(0, 0%, 0%, 0.3);
padding: 6px 8px;
font: 300 10px sans-serif;
border: none;
outline: none;
border-radius: 999px;
}
You should learn a CSS Grid Layout Module.
Here you have A Complete Guide to Grid.
In this use case, a CSS Grid is a bit like "Shooting birds with a cannon" but it is a great CSS tool that I am certain that you should learn and you will be grateful that you did.
It will eliminate such problems with positioning elements like in the GIF below:
I assume that You want to achieve a similar effect like in this snippet:
header {
display: grid;
justify-items: end;
}
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Button Ripple Effect | #Programmer</title>
</head>
<body>
<header>
<span class="logo">HTML</span>
</header>
<div class="wrapper">
<div class="btns">
Button 1
Button 2
</div>
</div>
</body>
</html>
For future posts please add more info on what did you tried to achieve your goal and maybe add a sketch picture created eg. in Paint or handmade.
I've been learning web development for about a month now and I recently got stuck on something. I was making a simple login page as practice but when I try to make the input fields bigger, it doesn't do anything. This is my HTML and CSS code:
<!DOCTYPE html>
<html lang="en_US">
<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Isaac Guillen">
<!-- Link CSS -->
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<!-- Website Title -->
<title>My Website</title>
</head>
<body>
<section id="Login-Box">
<h1 class="login-txt">Login</h1>
<div class="usrname-input">
<input type="text" placeholder="Username">
</div>
<div class="passwd-input">
<input type="password" placeholder="Password">
</div>
<div class="submit-button">
<input type="button" value="Submit">
</div>
</section>
</body>
</html>
*{
margin: 0;
padding: 0;
color: black;
font-family: "Fira Code";
}
.login-txt{
font-size: 60px;
position: relative;
left: 1400px;
top: 150px;
}
.usrname-txt{
font-size: 40pt;
}
Can anyone help me? I don't know if I did anything wrong.
Your problem is that you changed only the size of a different element not a textarea.
You can correct it by adding a class to both textareas and than changing their width and height.
Just like this:
<!DOCTYPE html>
<html lang="en_US">
<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Isaac Guillen">
<!-- Link CSS -->
<link rel="stylesheet" type="text/css" href="../CSS/style.css">
<!-- Website Title -->
<title>My Website</title>
</head>
<body>
<section id="Login-Box">
<h1 class="login-txt">Login</h1>
<div class="usrname-input">
<input type="text" placeholder="Username" class="username-area">
</div>
<div class="passwd-input">
<input type="password" placeholder="Password" class="password-area">
</div>
<div class="submit-button">
<input type="button" value="Submit">
</div>
</section>
</body>
</html>
Plus CSS:
*{
margin: 0;
padding: 0;
color: black;
font-family: "Fira Code";
}
.login-txt{
font-size: 60px;
position: relative;
left: 1400px;
top: 150px;
}
.usrname-txt{
font-size: 40pt;
}
.username-area{
width: 30%;
height: 40px;
}
.password-area{
width: 30%;
height: 40px;
}
You are using a wrong class selector, try this css:
*{
margin: 0;
padding: 0;
color: black;
font-family: "Fira Code";
}
input{
font-size: inherit; /*Takes parent element's font size*/
}
.login-txt{
font-size: 60px;
position: relative;
left: 1400px;
top: 150px;
}
.usrname-input{ /*usrname-txt does not exists*/
font-size: 40pt;
}
Demo: https://jsfiddle.net/pjm5b4d0/2/
You have to select the input fields using a class or an id.
Here is a quick example:
input {
font-size: 3rem;
padding: 1rem;
margin-bottom: .5rem;
}
I just wanted to copy some dropdown menu to other site of mine. but it seems i did something wrong, so all of my dropdown items have some white space aside them. (like the picture)
white space side the dropdown items
but in the first site i developed the code, this problem did not exist! (example)
example of source code dropdown item
actually i mixed bootstrap and materialize to form the code (and i know this is a bad idea, but it worked last time for me).
I just don't know what to do, to remove the gap!
and this is part of my code:
`
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="{% static 'petrobavar/css/materialize.min.css' %} "
media="screen,projection"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<nav class="mb-3">
<div class="nav-wrapper blue-grey darken-1 amber-text darken-text-5" style="font-family: IRANSansWeb">
<i class="material-icons">menu</i>
<a href="{% url 'petrobavar:home' %}" class="left hide-on-large-only"><img
src="{% static 'petrobavar/petrologo.png' %}" style="width: 5rem"></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="tab dropdown-trigger " data-target="dropdown6" style="text-shadow: 0 2px 5px rgba(0,0,0,.5);"><a href="#">ارتباط با
ما</a></li>
</ul>
<ul id="dropdown6" class="dropdown-content center-align" style="font-family: IRANSansWeb">
<li>آدرس و تلفن های تماس</li>
</ul>
<style>
/* Dropdown list color */
.dropdown-content li > a, .dropdown-content li > span {
background-color: #546e7a;
margin: 0;
border: 0;
width: 100% !important;
}</style>
`
Can you please just add padding: 0; width: auto !important; in .dropdown-content class in CSS file as below:
We have added padding and width in last line.
.dropdown-content {
background-color: #fff;
margin: 0;
display: none;
min-width: 100px;
overflow-y: auto;
opacity: 0;
position: absolute;
left: 0;
top: 0;
z-index: 9999;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
padding: 0;
width: auto !important;
}
Please try and let me know.
Basiaclly, I am trying to make a upload form for my website. I was wondering if there is any CSS that would make this look much more pleasing and unique. The code below is only HTML. I only need the CSS but if you find any way to improve the HTML, let me know.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<form action = "index.php" method="post" enctype="mutlipart/form-data">
<label for="file">Choose a file:</label>
<input type="file" name="file1"/>
<input type="submit" value="send!"/>
</form>
</body>
</html>
One way you could improve is change the <input type="submit" value="send!"/> code to <button id="" class="" type="submit">Your Text Here</button>. Also for css codes for like buttons I reccomend use something like this
ButtonIDHere {
border-radius: 25px;
border: 4px solid blue;
padding: 10px;
}
and to make inputs a little nicer use something like this
.InputClass {
position: absolute;
width: 150px;
top: 150px;
left: 730px;
z-index: 4;
}
Also maybe change the border color and stuff.
yo so what do you actually wanna see I just made the form centred and added some colour.
do u want the buttons to look nicer?
https://jsfiddle.net/jqc05Ldk/5/
.container{
width: 50%;
margin: 0 auto;
padding: 24px 24px;
background-color: #57b3e4;
height: auto;
color: #BBDEF0;
border-radius: 25px;
}
input[type="submit"]{
border-radius: 25px;
border: 4px #00A6A6 solid;
background-color: #00A6A6;
color:#BBDEF0;
cursor:pointer;
}
input[type="submit"]:hover{
color: #00A6A6;
background-color: #BBDEF0;
}
For these type of file inputs you can use form control in bootstrap which does not include the external css that much because bootstrap is a css framework and the button styling also will be nice when we use bootstrap Try this code.This code also includes the alert that comes after send button.Try doing these type of forms with bootstrap
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form</title>
<style>
.container{
width: 300px;
height: 150px;
border: 1px solid black;
border-radius: 25px;
}
</style>
<script type="text/javascript">
function showMessage(){
alert("Thanks Your papers have been evaluated");
}
</script>
</head>
<body>
<form action = "index.php" method="post" enctype="mutlipart/form-data">
<div class="container mt-4 mb-2">
<form>
<div class="form-group mt-2">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
<button type="submit" onclick = "showMessage()"class="btn btn-primary mt-2">send </button>
</div>
</form>
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;