I'm looking to make an offline search page powered by Google. I am having a little trouble with the search button though, it just seems to do whatever it wants. I want it to be relative above the textarea on the left. I would like for it to stay in that corner of the textarea even when the textarea is expanded. (This webpage is not designed for multi-browser supported it is, designed for Firefox only.)
<style>
body{
background: url(bg.jpg);
background-size: cover;}
textarea{
display: block;
margin-left: auto;
margin-right: auto;
background-color: black;
border-radius: 12px;
color: #ffffff;
font-family:"Courier New", Courier, monospace;
font-size: 16px;
text-decoration: none;
cursor: poiner;
border: none;}
button{
background-color: #000000;
border-radius: 12px;
font-family: "Times New Roman", Times, serif;
font-size: 24px;
text-decoration: none;
cursor: poiner;
border: none;}
button:hover{
border: none;
background: #5B93F5;}
footer{
position: absolute;
bottom: 0px;
right: 0px;
text-align: right;
color: #FFFFFF;}
</style>
</head>
<body>
<div id="searchContainer">
<form id="searchForm" name="searchForm" onsubmit="onSearchSubmit(event)">
<button id="searchSubmit" type="submit" value="Search" title="Google Search">
<font color="blue">G</font><font color="red">o</font><font color="yellow">o</font><font color="blue">g</font><font color="green">l</font><font color="red">e</font>
</button>
<textarea id="searchText" type="text" name="q" maxlength="255" rows="3" cols="50" autocomplete="off" autofocus></textarea>
</form>
</div>
<footer>v5.0</footer>
</body>
</html>
Add following in your css code:
#searchContainer { text-align: center; }
#searchContainer > form { display: inline-block; text-align: left; }
it should resolve your issue.
For the code you have, you can add a padding to the container: JS Fiddle
Add this line to your CSS:
#searchContainer{padding: 2em; display: inline-block;}
For a little more style if you want them connected, you can adjust some border-radius' and margins of the button and text area: JS Fiddle 2
Related
I was working on a quick and dirty project of mine and when it came to some of the buttons no matter what I did they would not work, I have tried to put them in an <a> tag but it messes up my CSS and isn't worth the extra trouble, anyone know what to do? (The YouTube URL is only there for testing purposes)
Here is my HTML:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<header>
<input class="btn" type="button" value="Home" id="button1" onsubmit=""/>
<input class="btn" type="submit" value="Processors" id="button2" onsubmit="" />
<input class="btn" type="submit" value="Motherboards" id="button3" onsubmit"" />
<input class="btn" type="submit" value="Graphics Cards" id="button4" onsubmit="https://www.youtube.com" />
<input class="btn" type="submit" value="Power Supplys" id="button5" onsubmit="" />
<input class="btn" type="submit" value="Website Inquires" id="button6" onsubmit="" />
</header>
</div>
<h1 class="title"> Personal Computers Technology </h1>
<p><span class="paragraph"> Do you want to learn about computers? Do you not know where
to start? Well you have come to the right place! Here you will learn about the functionalities of a motherboard, what a processot is and what it does, how your graphics cards sends out video ouput. You will learn about what a power supoply does
and why they very important. Lastly you will learn about storage and what the difference between an SSD an HDD
</span></p>
<!-- Please try to avoid editing code under this line as much as possible-->
<div class="container">
<img class="child" src= "https://cdn.glitch.com/8282fc98-4236-406a-9a5e-f9535f41553b%2FPC.jpg?v=1604156880410" width="300" height="200">
</div>
<!--I beg you dont tuch the code above this comment line-->
<p><span class="secondParagraph">
We are here to support your learning journey on computer parts. As may have most likely alreasdy noticed at
the top of the webpage we have direct links to all of the other educational content. If you do have any inquires
feel free to leave us a notice and we will try to respond to it as fast as possible. Thank you and have a great learning experience.
</span></p>
<iframe width="350" height="250" class="video" src="https://cdn.glitch.com/8282fc98-4236-406a-9a5e-f9535f41553b%2FFROST%20Gaming%20PC%20-%20Time%20Lapse%20Build.mp4?v=1604766330602" type="video/mp4"></iframe>
</body>
</html>
And my CSS:
margin: 0;
}
body {
background-color: #e9e4dc;
}
.header {
height: 4.6rem;
width: 100%;
background-color: #555555;
border-bottom: 1px solid black;
font-size: 0;
padding-left: 0px;
margin-bottom: 25px;
}
.btn {
background-color: #555555;
padding: 26px;
padding-right: 45px;
padding-left: 45px;
border: none;
margin: 0;
font-size: 1.2rem;
color: #F5F5F5;
font-family: Garamond, serif;
}
.btn:hover {
background-color: #696969;
}
.btn:active {
outline: none;
border: none;
}
.btn:focus {
outline: none;
border: none;
}
.title {
margin-left: 385px;
margin-bottom: 55px;
font-size: 2.2rem;
font-family: Garamond, serif;
}
.child {
position: relative;
margin-top: -175px;
border-radius: 10px;
margin-left: 45px;
}
.container {
display: flex;
justify-content: center;
float: right;
margin-right: 35px;
}
.paragraph {
font-weight: normal;
font-size: 1.7rem;
margin-top: 0px;
margin-left: 0px;
font-family: Garamond, serif;
float: left;
padding-left: 20px;
padding-right: 350px;
position: relative;
}
.secondParagraph {
font-weight: normal;
font-size: 1.7rem;
margin-left: 375px;
font-family: Garamond, serif;
float: right;
display: inline;
margin-top: 45px;
margin-right: 100px;
position: relative;
}
.video {
width: 300px;
height: 200px;
outline: none;
border-radius: 10px;
margin-top: -165px;
margin-left: 20px;
}
I have copied what you have given for code and see what was wrong.
First off, I believe you are missing the first line in your .css file.
Second, I would change all of the
<input class="btn" type="button" value="Home" id="button1" onsubmit=""/>
to something like
<p class="btn">Yor Text Here</p>
and change the css for the btn to make it look like a button and how you wish. I recommend this website to help you with the styling.
I've created a website and the footer on the main page is alright on the bottom of the page. But the footer on other pages is in the middle of the page. On this page are actually two divs aligned next to each other and it looks like the footer is between them. I've tried everything I found on other questions like this (I mean position: absolute, relative, fixed) and nothing could move the footer on the bottom of the page. I'm very beginner in HTML and CSS, so I'm sorry if there are more problems in my code.
Here is my html code:
<div class="kontaktujte_nas">
<form class="kontaktni_formular" action="kontaktni_formular.php" method="POST">
<label for="jmeno">Celé jméno</label>
<input type="text" id="jmeno" name="jmeno" placeholder="Jan Novák">
<label for="email">Váš Email</label>
<input type="email" id="mail" name="mail" placeholder="jan.novak#email.cz">
<label for="predmet">Předmět</label>
<input type="text" id="predmet" name="predmet">
<label for="zprava">Zpráva</label>
<textarea id="zprava" name="zprava"></textarea>
<button type="submit" name="odeslat">ODESLAT</button>
</form>
<div class="kontaktni_informace" style="background-image: url(assets/icons/adresa.png);">
<span class="k_informace">Horní Domaslavice 293, 73951</span>
</div>
<div class="kontaktni_informace" style="background-image: url(assets/icons/mail.png);">
<span class="k_informace">info#bohmen.cz</span>
</div>
</div>
And my css:
body {
background-color: #212121;
}
.kontaktni_informace {
width: 40%;
float: right;
background-color: black;
background-repeat: no-repeat;
display: block;
margin-top: 40px;
}
.k_informace {
font-family: CovesLight;
font-size: 18px;
font-weight: bold;
padding: 8px 0px 8px 45px;
display: block;
color: #888888;
}
.kontaktujte_nas {
width: 50%;
margin: 0px auto;
padding-top: 40px;
display: block;
}
.kontaktni_formular {
font-family: TeXGyreAdventorRegular;
float: left;
width: 40%;
margin-top: 0px;
}
.kontaktni_formular input, textarea {
display: block;
width: 100%;
font-size: 16px;
padding: 7.5px;
border: 4px solid #888888;
}
.kontaktni_formular label {
display: block;
padding: 15px 0px 2.5px;
text-transform: uppercase;
font-size: 16px;
color: #ffffff;
}
.kontaktni_formular button {
font-family: TeXGyreAdventorRegular;
font-size: 18px;
margin-top: 15px;
padding: 5px 10px;
cursor: pointer;
margin-right: auto;
margin-left: auto;
display: block;
float: right;
}
.page_title {
margin-top: 0px;
text-align: center;
}
.title span {
font-size: 48px;
font-family: TeXGyreAdventorRegular;
color: #ffffff;
letter-spacing: 5px;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
}
footer {
font-family: TeXGyreAdventorRegular;
text-align: center;
background-color: #111111;
padding: 5px;
color: #ffffff;
width: 100%;
}
.copyright {
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
Try adding overflow: auto; to .kontaktujte_nas
You probably want something like this: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
Found by googling "footer at the bottom of the page" ;)
I believe your problem has been resolved.
But a quick review of your website which I think might help you now and forever:
Try following a semantic structure e.g let the header tag do the job of a heading just as you have the footer and let the main tag handle the remaining content e.g aside and so on.
So basically, i see you have some navigation elements but they are not inside a form of header=>nav=>ul, let that navigation elements at the topest of your page go into the header tag and let the lis go into the ul tag and let the ul go into the nav tag eg:
<header>
<nav>
<ul>
<li>
<a href=".../home">
Home
</a>
</li>
</ul>
</nav>
</header>
The reason why following a standard structure is because they abide by a rule that is been considered when building accessibility tools e.g screen-reader for disable people. And if you dont follow this standard, you will drain yourself either not doing it or doing it imperatively.
So in summary a body holds the header,the main and the footer.
Happy coding, cheers 😉🍺
So in my CSS I already have a class for my text which makes a clear white box appear behind the text to make it more readable, I would also like to do this for my login page, Id like to make it a black box in the middle of the screen sort of like the steam login page https://store.steampowered.com/login/ but putting it in a div and class doesnt seem to work.
ive tried putting the div in the form and ive also tried putting the form in the div
</div>
<form>
<div class="acc">
Username:<br>
<input type="text" name="Username">
<br>
Password:<br>
<input type="text" name="Password">
</div>
</form>
.acc(
font-family: "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: normal;
color: #000000;
margin-left: auto;
margin-right: auto;
background-color:black;
text-align:center;
vertical-align: middle;
padding:20px 47px;
}
Try styling the input elements either directly or by applying a class to them. See a working demo below:
body {
background-color: #252831;
color: white;
}
.container {
display: flex;
flex-direction: column;
}
form {
display: flex;
flex-direction: column;
width: 200px;
}
.input-wrap {
margin: 5px;
}
input {
background-color: #353A47;
border: 1px solid #4C4B63;
}
<div class="container">
<form>
<div class="input-wrap">
<label>Username:</label>
<input type="text">
</div>
<div class="input-wrap">
<label>Password:</label>
<input type="password">
</div>
</form>
</div>
Although this is similar to another answer, I've changed the font colour so it will display, rather than black text on a black background
input {
font-family: "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
font-size: 30px;
line-height: normal;
color: #ffffff;
margin-left: auto;
margin-right: auto;
background-color:black;
text-align:center;
vertical-align: middle;
padding:20px 47px;
}
I have a div container. Between this div i have another div named model and there is a input file type.
Now when i open up this in my mozilla firefox browser all are looks good. Problem is when i clicked Browse... then it's didn't open to upload a file, but when i clicked outside of Browse... field then it open to upload a file. Here is my html file
input{
margin-bottom: 15px;
padding: 10px;
width: 100%;
box-sizing: border-box;
border-radius: 5px;
height: 50px;
border:0px;
font-family: georgia;
font-size: 12pt;
text-align: center;
}
<div class="container">
<div class="model">
<form>
<div>
<label>Profile Picture</label>
<input type="file" name="img">
</div>
</form>
</div>
</div>
I google it but didn't find any good resource that's helpful for this problem . Sugesstion please . Thank you !
You need to change your CSS code a bit. Try this.
input {
margin-bottom: 15px;
margin-top: 15px;
box-sizing: border-box;
border-radius: 5px;
height: 50px;
border: 0px;
font-family: georgia;
font-size: 12pt;
display: block;
}
As a way to debug the area of the button, you can use the outline attribute.
You set the width: 100%, so it takes the whole line as a block.
Adding the outline attribute and you may see it.
input{
margin-bottom: 15px;
width: 85px;
box-sizing: border-box;
border-radius: 5px;
height: 40px;
border:0px;
font-family: georgia;
font-size: 12pt;
text-align: center;
outline: 1px solid #FF0000;
}
<div class="container">
<div class="model">
<form>
<div>
<label>Profile Picture</label>
<input type="file" name="img">
</div>
</form>
</div>
</div>
I want to center this submit button, using CSS, and have researched this in many other online posts, but have not yet found a solution, which seems odd for something that should be so simple.
td.class > div {
width: 100%;
height: 100%;
overflow: hidden;
height: 20px;
}
#buttonstyle {
border: 2px solid #777777;
background: #019966;
color: black;
font: bold 18px'Trebuchet MS';
padding: 4px;
cursor: pointer;
width: 150px;
border-radius: 12px;
display: inline-block;
margin: 0px auto;
}
.buttonHolder {
text-align: center;
}
.heading {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
color: #006633;
}
input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
}
input[type=text] {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}
input[type=date] {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}
ul {
list-style: none;
text-align: left;
}
input {
width: 20px;
position: relative;
left: 150px;
vertical-align: middle;
}
label {
width: 200px;
position: relative;
left: -20px;
display: inline-block;
vertical-align: middle;
}
<form name="InstructorForm" action="../instructorDB_protected/instructorDB_controller.php" method="post" enctype="multipart/form-data">
<div id='content'>
<center>
<span class="heading">Colorado Mountain Club - Boulder Group Instructor Database<br>Instructor Administrator Export Form</span>
</p>
<p>
Select which schools to export to a file to download.
<br>The file will contain a list of instructor names, emails and phone numbers:
<p>
<div id="yourdiv" style="display: inline-block;">
<ul>
<li>
<input type="checkbox" name="avi_instructor">
<label>Avalanche:</label>
</li>
<li>
<input type="checkbox" name="hiking_instructor">
<label>Hiking:</label>
</li>
<li>
<input type="checkbox" name="ice_instructor">
<label>Ice:</label>
</li>
<li>
<input type="checkbox" name="rock_instructor_trad">
<label>Rock, Trad:</label>
</li>
<li>
<input type="checkbox" name="rock_instructor_sport">
<label>Rock, Sport:</label>
</li>
<li>
<input type="checkbox" name="ski_instructor">
<label>Ski:</label>
</li>
<li>
<input type="checkbox" name="snow_instructor">
<label>Snow:</label>
</li>
</ul>
</div>
<br>
<div class="buttonHolder">
<input id=buttonstyle type="submit" name="submitAdminExport" value="Export">
</div>
<br>
Return to top
</center>
</div>
</form>
I have experimented with removing three other CSS files that get loaded, which did not make any difference: the submit button refuses to center, and aligns itself along the right margin of the checkboxes, in the list above it. Any help much appreciated!
just cancel left property on input
#buttonstyle{
left: auto;
}
Which u gave here
input{
width:20px;
position:relative;
left: 150px;
vertical-align:middle;
}
or you can just simply write like that
input:not(#buttonstyle){
width:20px;
position:relative;
left: 150px;
vertical-align:middle;
}
which would be more elegant to NOT include your button styles on input styles :)
And HINT for you, use web developers tools in future and see what happen there, mostly in 99% of cases you can solve your problems by watch what styles you got on specific elements :)
hope it helps you,
cheers
Your left property on input is the cause of the misalignment.
Change this:
input{
width:20px;
position:relative;
left: 150px;
vertical-align:middle;
}
To this:
#yourdiv input{
width:20px;
position:relative;
left: 150px;
vertical-align:middle;
}
So that the left: 150px; property will only apply to input elements under the #yourdiv div.
Link to jsFiddle: https://jsfiddle.net/AndrewL32/e0d8my79/101/
Very simply, its all because of the position:relative...
Update your button to be:
<input id="buttonstyle" type="submit" name="submitAdminExport" value="Export" style="position: static;">