This is quite the opposite of 'styling NOT being applied,' but I have no styling for this div, but it is still getting styling?
I am working on a new website for my father's business making the website with HTML, CSS, and JavaScript. I have this page that has an area where he can add his own listings to the site (not relevant to the problem however). The container at the very top has a blue border (circled in a screenshot below), much like the other containers have (which these one are specified to have it), but there is not styling to make this container have a blue border. I had checked to make sure all CSS and HTML is closed, and that seems to be the case. I have no idea what is happening here. Also, the unwanted border is pushing the second link inside of it out? Why?
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/x-icon" href="/images/icon.ico"/>
<link rel="stylesheet" type="text/css" href="/styling/css_reset.css"/>
<link rel="stylesheet" type="text/css" href="/styling/navigation_bar_and_body.css"/>
<link rel="stylesheet" type="text/css" href="/styling/web_editor_styles.css"/>
<title>Website</title>
</head>
<body>
<article id="web_editor_article">
<div id="editing_options">
Add machine listing
Edit machine Listing
</div>
<!--Based on what editing option is selected, JavaScript will change the layout-->
<div id="add_machine_listing">
<div>
<h1>Add a machine listing</h1>
<input type="text" placeholder="Enter Full Machine Name" id="machine_name"/>
<input type="text" placeholder="Enter Machine Price (Exclude $, include commas)" id="machine_price"/>
<textarea placeholder="Enter a very short description of the vehicle (use commas for professional format)" rows="4" cols="45" id="machine_specs_short"></textarea>
<br>
<textarea placeholder="Enter specs and long machine description. Include such things as possible damage, what was fixed, and some information about it" rows="7" cols="70" id="machine_specs"></textarea>
<label for="image_selector">Select images of the machine to upload. Hold shift or ctrl/cmnd to select multiple images.</label>
<input type="file" name="images" placeholder="Select images to upload" id="image_selector" accept="image/png, image/jpeg" multiple/>
<button id="add_machine_submit_button">Submit Listing</button>
</div>
<div id="selected_images">
<h2>Images you have selected show up here</h2>
<p>Scroll down to see all images</p>
<br>
<!--JavaScript will fill this in :). JS saves the day agin!-->
</div>
<p id="upload_status">Upload status:</p>
</div>
<h2 style="margin-left: 15px;">All machine listings</h2>
<table id="listing_table">
<thead>
<tr>
<!--Headers for columns-->
<td>Name</td>
<td>Date Created</td>
<td>Date Edited</td>
<td>Options</td>
</tr>
</thead>
<tbody>
<!--JavaScript will fill this area in :) JS helps out again-->
</tbody>
</table>
</article>
</body>
<script type="module" src="/scripts/upload_script.js"></script>
<script type="module" src="/scripts/all_listings_script.js"></script>
</html>
...and here is the CSS for the page:
#add_machine_listing{
width: 96%;
height: fit-content;
border: 3px solid blue;
border-radius: 25px;
margin-left:10px;
margin-right: 10px;
padding: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/*The two style groups below this comment are for the div with the unwanted border*/
#editing_options{
display: flex;
flex-direction: row;
justify-content: flex-start;
margin: 30px 10px;
}
#editing_options a{
margin-left: 50px;
margin-right: 50px;
}
#selected_images{
margin-left: 50px;
padding: 20px;
width: 500px;
overflow-y: scroll;
height: 500px;
scrollbar-width: 10px;
border: 3px solid blue;
border-radius: 25px;
}
#selected_image{
height: auto;
width: 500px;
}
input{
display: block;
height: 25px;
width: 400px;
margin-top: 10px;
margin-bottom: 20px;
}
input[type="file"]{
margin-top: 5px;
margin-bottom: 10px;
margin-bottom: 20px;
}
a{color: blue;}
label{display: block;}
#submit_button{
background-color: wheat;
color: red;
font-weight: 600;
height: 30px;
width: 150px;
border-radius: 20px;
}
textarea{
resize: none;
font-family: inherit;
font-size: 13px;
margin-bottom: 25px;
}
/*For the listings table*/
#listing_table{
color:white;
width: 98%;
height: auto;
}
table, th, td {
border: 10px solid white;
}
#listing_table tbody tr td{
background-color:lightgray;
border-collapse:separate;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 100px;
vertical-align: top;
}
#listing_table thead tr td{
background-color:blue;
padding:10px;
color:white;
}
#listing_table tbody #listing_change_buttons{
background-color: white;
border: 1px solid black;
display: flex;
flex-direction: row;
justify-content: start;
}
#listing_change_button{
height: 25px;
width: 25px;
margin-right: 10px;
}
#upload_status{
margin-left: 50px;
height: 200px;
width: 275px;
border: 3px solid blue;
border-radius: 20px;
padding: 10px;
}
This is the output:
What I have tried
I just want to note that the JavaScript files are not altering this container in any way.
I had tried negating the border effects by setting border: none; on the container, however this did not work.
I am using visual studio code with the live server plugin to test the website. I had restarted the software several times with the same result.
Testing the website with Firefox was what I thought to be the cause, but when using another browser like Chrome or Safari, the same issue occurs
You are using the same id="add_machine_listing" on mulitple elements, thus your styles for #add_machine_listing are getting applied to both. Remove or change the id on your anchor tag:
Add machine listing
It's also worth noting that no two elements can have the same ID. And for styling purposes, it's generally "best practice" to use class names instead of id's (it's an unwritten rule of sorts). I usually try to avoid IDs in general.
Related
Why does my tablet display the button differently than it does on my computer?
Code:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-color: yellow;
font-family: monospace;
margin: 0px 0px;
}
h1 {
text-align: center;
}
input[type=number] {
width: 100%;
padding: 10px 0px;
font-size: 20px;
background-color: #f50;
border: none;
text-align: center;
border-radius: 40px;
outline: none;
-moz-appearance: textfield;
}
input[type=number]:focus {
background-color: #f70;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=submit] {
width: 50%;
margin-left: auto;
margin-right: auto;
display: block;
background-color: #f00;
padding: 5px;
font-size: 20px;
outline: none;
border: none;
border-radius: 5px;
color: white;
}
</style>
</head>
<body>
<h1>ENTER CODE</h1>
<form action="topage.php" method="post">
<input name="code" type="number" oninput="this.value = this.value.slice(0, 8);">
<br><br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
Website in my tablet:
Website in my computer:
Ma tahan et tahvelarvutis näeks see samasugune välja kui arvutis.
Both screenshots are made in Chrome, my computer is linux and the tablet is an iPad.
Thank you very much to all the respondents!
Different user-agents have different default styles for html elements. Many websites and frameworks start with specially crafted CSS to normalize or reset styles consistently across different browsers and operating systems, and then layer on their own styles afterward.
Try using one of these systems to start from a consistent point across user-agents. Alternatively, you'll need to test on various user-agents and determine which styles need to be overwritten. For instance, it looks like the tablet has a gradient on the button, which you'd need to override using the background property instead of the background-color property.
I found a solution:
Strange button styling on chrome on iOS
To be used:
-webkit-appearance: none! important;
I am a beginner level at web programming. I am trying to make a clone of the google search page. I achieved to build the structure of the clone website.
First Problem
However, I have trouble with the positioning of the divs. I am using form class to search written text, and I want to add the picture of the google logo above this form with a specific margin. I used divs to divide the page to achieve this. However, when I change the google frame div position all divs are changing with this change. For example, when I change #oneGoogleBar margin, form and #otherlinks is changing. I could achieve to change #otherlinks by changing its margin value but it is not the solid solution (every time do I need to change it, for example (if I have multiple divs this approach will be very tedious).
Second Problem
When I resize (make webpage smaller) the #otherlinks starts to move down. I also did not understand that reason.
I have asked these questions in the same question due to the fact that probably these are beginner-level problems. You can find the code below.
HTML
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="index_css.css">
<html lang="en">
<head>
<title>Search</title>
</head>
<body>
<div id="oneGoogleBar">
<iframe id="backgroundImage" frameBorder = "0"
src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</iframe>
</div>
<div id="form_div">
<form action="https://google.com/search" class="form">
<input type ="text" name="q"> <br><br>
<input type ="submit" value="Google Search">
<input type ="submit" value ="I'm Feeling Lucky">
</form>
</div>
<div id = "other_links">
<a href="googleImage.html" class=google_image_page>Google Image Search</a>
<a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
.form{
text-align: center;
padding-top:150px;
}
input[type=submit]{
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
border-radius:inhterit;
color: #3c4043;
font-family: arial,sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
padding-left: 25px;
outline:none;
}
input[type=text]:hover{
border-color:#9DD9F3;
}
input[type=text]{
width : 385px;
height: 25px;
border-radius: 15px;
outline:none;
}
.google_image_page{
font-family: arial,sans-serif;
color:black;
text-decoration:none;
font-size:13px;
}
.google_advanced_page{
font-family: arial,sans-serif;
color:black;
text-decoration:none;
font-size:13px;
}
#other_links{
margin-top : -40%;
margin-left : 80%;
margin-bottom: -85%
}
#oneGoogleBar{
position: relative;
margin-left : 42%;
margin-top: 15%;
max-width:10%;
max-height: 10%
}
Edited:
List of changes:
I couldn't find any 'Google Image Search' in the google.com, so I just assumed that you want it as header. So I placed it on the top.
I changed the name 'index_css.css' to 'style.css'
I changed the name 'oneGoogleBar' to 'one-google-bar'
I changed the name 'form_div' to 'form-div'
I changed the name 'other_links' to 'other-links'
I answer your questions in the same order you asked them:
1- The first element in your Html, is 'one-google-bar'. In Html, first element is above second element, second is above third and... . Basically I mean elements appear on the page, based on their place in your code.\
Your Html Structure:
1) one-google-bar
2) form-div
3) other-links
If you change the place of 'one-google-bar', the place of those below it, also changes.
Solution:
You have to work in order. Start from the top elements, then move down.
List of changes:
I placed 'other-links' above 'one-google-bar', because like I said before, I don't know exactly where you wanted to put it. I assume you want it in the top part of the page.
I removed the 'other-links' from your css. Because this element is already in the top part.
I made some changes in your 'one-google-bar' css file. The changes are as follows:
I removed 'position: relative'. because what is it that you want it to get relative to?
I assume you first gave it 'margin-left: 50%' and since it didn't get placed in the middle (because the image takes some place too) you changed it to 'margin-left: 42%'.
Well there is a neat trick to put the element in the middle:
margin: 0 auto;
With this, you set the top and bottom margin to 0. And browser automatically sets the right and left margin in a way that the element is placed in the middle.
Now below that, change the top and bottom margin as you please.
I also changed 'max-width: 10%' to:
width: fit-content;
Not the right way to use max-width.
2- You said that you don't realize why all elements move when you resize the page.
In your 'one-google-bar', you have:
margin-top: 150px;
That % is the reason this happens. This means add 15% of the current width to the top margin, and since you change the width, it also changes. Thus the whole page moves (because elements are placed in order...).
Solution:
Simply use px instead of %.
List of changes:
I changed 'margin-top: 15%' to:
margin-top: 15%;
Index.html:
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
<head>
<title>Search</title>
</head>
<body>
<div id = "other-links">
<a href="googleImage.html" class=google_image_page>Google Image Search</a>
<a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
</div>
<div id="one-google-bar">
<iframe id="backgroundImage" frameBorder = "0"
src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</iframe>
</div>
<div id="form-div">
<form action="https://google.com/search" class="form">
<input type ="text" name="q"> <br><br>
<input type ="submit" value="Google Search">
<input type ="submit" value ="I'm Feeling Lucky">
</form>
</div>
</body>
</html>
style.css:
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
.form {
text-align: center;
padding-top: 150px;
}
input[type="submit"] {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
border-radius: inhterit;
color: #3c4043;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
padding-left: 25px;
outline: none;
}
input[type="text"]:hover {
border-color: #9dd9f3;
}
input[type="text"] {
width: 385px;
height: 25px;
border-radius: 15px;
outline: none;
}
.google_image_page {
font-family: arial, sans-serif;
color: black;
text-decoration: none;
font-size: 13px;
}
.google_advanced_page {
font-family: arial, sans-serif;
color: black;
text-decoration: none;
font-size: 13px;
}
/* #other-links { //REMOVED
margin-top: -40%; //REMOVED
margin-left: 80%; //REMOVED
margin-bottom: -85%; //REMOVED
} */
#one-google-bar {
/* position: relative; //REMOVED
margin-left: 42%; //REMOVED
margin-top: 15%; //REMOVED
max-width: 10%; //REMOVED
max-height: 10%; //REMOVED
*/
width: fit-content; /*ADDED*/
margin: 0 auto; /*ADDED*/
/* margin-top: 15%; //REMOVED*/
margin-top: 150px; /*ADDED*/
}
You have made your html document very complex which is not required. instead of <iframe> you could simply use <img> tag. and in your CSS you have used % for margin property, which is making the alignment messy.
Take a look at this.
HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav>
<ul>
<li>Gmail</li>
<li>Images</li>
</ul>
</nav>
<main>
<img
class="logo"
src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
alt=""
/>
<form action="">
<input type="text" /> <br />
<br />
<input type="submit" value="Google Search" />
<input type="submit" value="I'm Felling Lucky" />
</form>
</main>
</body>
</html>
CSS File
body {
margin: 0;
padding: 0;
}
nav ul {
list-style: none;
display: flex;
flex-direction: row-reverse;
}
nav ul li {
margin: 20px;
}
main {
align-items: center;
}
.logo {
display: block;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
}
form {
text-align: center;
}
input[type="text"] {
margin-top: 20px;
width: 385px;
height: 25px;
border-radius: 15px;
outline: none;
}
You are basically applying margin to each div, so it gets to the place you want it to be. Well that is not a very good practice.
Instead of doing this, simply use a
display: flex, ...
to achieve what you want.
And basically in Html, elements are displayed based on their place in your code. Meaning, if you want to have a header that has 'Google Image Search' in it, Just write it first.
The reason that the place of your elements changes when you resize the page is, well you are using margin allover the place. It is only natural that it happens.
I would avoid using iframe, because there is no reason to use it. Just use a simple img tag in your html.
Index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
<head>
<title>Search</title>
</head>
<body>
<main>
<img src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="google-img" />
<div class="form-div">
<form action="https://google.com/search" class="form">
<input type ="text" id="search-field">
<div>
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</form>
</div>
</main>
</body>
</html>
Style.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
}
main {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
margin-top: 200px;
}
header {
display: flex;
width: 100%;
align-items: right;
justify-content: right;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.form-div {
width: 100%;
margin-top: 35px;
}
.form div {
margin-top: 20px;
}
.form div button {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
color: #3c4043;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
}
.form div button:hover {
cursor: pointer;
}
#search-field {
width: 80%;
height: 44px;
border-radius: 24px;
border: 1px solid #dfe1e5;
padding-left: 30px;
}
#search-field:focus {
outline: none;
}
Just some notes:
In Html and css, you don't use camelCaseNaming, you simply put a - between different parts. So oneGoogleBar should be one-google-bar
Don't use iframe.
You shouldn't use <br> for aligning iteams. See how I did it using flex box.
Name your css file, Style.css. There is no rule, but usually that 's the way people usually write their code.
And if you want to build a page that already exists, it's a very good practice to inspect the page. You can learn a ton from it.
And the last but the most important thing: Keep up the good work.
Edited:
List of changes:
I couldn't find any 'Google Image Search' in the google.com, so I just assumed that you want it as header. So I placed it on the top.
I changed the name 'index_css.css' to 'style.css'
I changed the name 'oneGoogleBar' to 'one-google-bar'
I changed the name 'form_div' to 'form-div'
I changed the name 'other_links' to 'other-links'
I answer your questions in the same order you asked them:
1- The first element in your Html, is 'one-google-bar'. In Html, first element is above second element, second is above third and... . Basically I mean elements appear on the page, based on their place in your code.\
Your Html Structure:
1) one-google-bar
2) form-div
3) other-links
If you change the place of 'one-google-bar', the place of those below it, also changes.
Solution:
You have to work in order. Start from the top elements, then move down.
List of changes:
I placed 'other-links' above 'one-google-bar', because like I said before, I don't know exactly where you wanted to put it. I assume you want it in the top part of the page.
I removed the 'other-links' from your css. Because this element is already in the top part.
I made some changes in your 'one-google-bar' css file. The changes are as follows:
I removed 'position: relative'. because what is it that you want it to get relative to?
I assume you first gave it 'margin-left: 50%' and since it didn't get placed in the middle (because the image takes some place too) you changed it to 'margin-left: 42%'.
Well there is a neat trick to put the element in the middle:
margin: 0 auto;
With this, you set the top and bottom margin to 0. And browser automatically sets the right and left margin in a way that the element is placed in the middle.
Now below that, change the top and bottom margin as you please.
I also changed 'max-width: 10%' to:
width: fit-content;
Not the right way to use max-width.
2- You said that you don't realize why all elements move when you resize the page.
In your 'one-google-bar', you have:
margin-top: 150px;
That % is the reason this happens. This means add 15% of the current width to the top margin, and since you change the width, it also changes. Thus the whole page moves (because elements are placed in order...).
Solution:
Simply use px instead of %.
List of changes:
I changed 'margin-top: 15%' to:
margin-top: 15%;
Index.html:
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<html lang="en">
<head>
<title>Search</title>
</head>
<body>
<div id = "other-links">
<a href="googleImage.html" class=google_image_page>Google Image Search</a>
<a href="googleAdvanced.html" class=google_advanced_page>Google Advanced Search</a>
</div>
<div id="one-google-bar">
<iframe id="backgroundImage" frameBorder = "0"
src="https://www.google.com.tr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</iframe>
</div>
<div id="form-div">
<form action="https://google.com/search" class="form">
<input type ="text" name="q"> <br><br>
<input type ="submit" value="Google Search">
<input type ="submit" value ="I'm Feeling Lucky">
</form>
</div>
</body>
</html>
style.css:
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
.form {
text-align: center;
padding-top: 150px;
}
input[type="submit"] {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
border-radius: inhterit;
color: #3c4043;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
padding-left: 25px;
outline: none;
}
input[type="text"]:hover {
border-color: #9dd9f3;
}
input[type="text"] {
width: 385px;
height: 25px;
border-radius: 15px;
outline: none;
}
.google_image_page {
font-family: arial, sans-serif;
color: black;
text-decoration: none;
font-size: 13px;
}
.google_advanced_page {
font-family: arial, sans-serif;
color: black;
text-decoration: none;
font-size: 13px;
}
/* #other-links { //REMOVED
margin-top: -40%; //REMOVED
margin-left: 80%; //REMOVED
margin-bottom: -85%; //REMOVED
} */
#one-google-bar {
/* position: relative; //REMOVED
margin-left: 42%; //REMOVED
margin-top: 15%; //REMOVED
max-width: 10%; //REMOVED
max-height: 10%; //REMOVED
*/
width: fit-content; /*ADDED*/
margin: 0 auto; /*ADDED*/
/* margin-top: 15%; //REMOVED*/
margin-top: 150px; /*ADDED*/
}
I developed a python back-end and is trying to design a html and javascript front end for my app. I am new to HTML.
The code is provided below
html{
font:normal 14px/1.5 Courier New;
}
h1{
margin: 7rem;
margin-top: 8rem;
}
form{
margin: 3rem;
width: 800px;
}
.form-IFS_DataLocation{
font-size: 1rem;
width: 100px;
position: absolute;
margin-left: 400px
}
.form-IFS_DataLocation button{
font-size: 0.7rem;
border: none;
padding: 0.5rem 0.5rem;
color: white;
background-color: cornflowerblue;
cursor: pointer;
}
.form-PDF_Location{
font-size: 1rem;
width: 200px;
position: absolute;
margin-top: 10px;
}
.form-PDF_Location button{
font-size: 0.7rem;
border: none;
padding: 0.5rem 0.5rem;
color: white;
background-color: cornflowerblue;
cursor: pointer;
}
.form-Output_Location{
font-size: 1rem;
width: 200px;
position: absolute;
margin-top: 10px;
}
.form-Output_Location button{
font-size: 0.7rem;
border: none;
padding: 0.5rem 0.5rem;
color: white;
background-color: cornflowerblue;
cursor: pointer;
}
.form-HighLight{
font-size: 1rem;
width: 200px;
position: absolute;
margin-top: 10px;
}
.form-Highlight button{
font-size: 0.7rem;
border: none;
padding: 0.5rem 0.5rem;
color: white;
background-color: cornflowerblue;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Working with HTML Forms</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<h1><center>Test<center></h1>
<form id="form-user" action="#" method="post">
<div class="form-IFS_DataLocation">
<button id="button1">Shop Order</button>
<div>
<div class="form-PDF_Location">
<button id="button2">PDF Drawings</button>
<div>
<div class="form-Output_Location">
<button id="button3">Output</button>
<div>
<div class="form-Highlight">
<button id="button4">Execute</button>
<div>
</form>
<script src="./test.js"></script>
</body>
</html>
In the css portion of the code for the highlight button (ID: button4), changing the margin-top property is having no effect. From what I understand, it should move the button 10px below the button above.
Let's go through that step by step.
The html is invalid. You have to close all tags in html (with a few exception which you'll find on google). the div and center is not closed. If you use an IDE like webstorm or eclipse or ... (many many...) they'll show your mistakes immanently. Think of DIV's in your html as wrappers, or boxes which enclose whatever that is inside of them:
<!-- close the center tag: -->
<h1><center>Test</center></h1>
<!-- here! close the div tag: -->
<div class="form-IFS_DataLocation">
<button id="button1">Shop Order</button>
</div>
<!-- Just the same for rest of div blocks... -->
You are making your life a lot harder than it needs to be. When writing CSS, you shouldn't style every element in your html individually. Instead, in CSS you would say: I want all my buttons to be cornflowerblue, with text size of .7 rem and then, in HTML, you just tag those elements that should behave like a button. Your wish will be applied to them:
/* state your wish, and name your wish such as .btn */
.btn { background-color: cornflowerblue; font-size: .7 rem; }
/* another wish, about danger elemets */
.danger { color: red; }
And in html:
<!-- which wishes to apply here? you can combine -->
<!-- this is both "button" and "dangerous" -->
<div class="btn danger">BURN THE KITTENS</div>
<!-- this is just a "button" -->
<div class="btn">Feed the kittens</div>
Don't use absolute in css unless necessary. Which in this case is not! I believe you want your buttons on the left side of screen. Think of different screen sizes, mobile screen, TV, event pages being printed on paper. Absolute will make your life hell. Also you can see the margin is not working on an absolute element. If you want your buttons always on the left side of screen make their parent div fixed.
Sometimes it's a good idea to stack related things (like buttons) together (wrapping them in a div). But don't over do it.
So finally:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Working with HTML Forms</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<h1>
<center>Test</center>
</h1>
<form id="form-user" action="#" method="post">
<div class="app-buttons">
<div class="form-IFS_DataLocation form-element">
<button id="button1">Shop Order</button>
</div>
<div class="form-PDF_Location form-element">
<button id="button2">PDF Drawings</button>
</div>
<div class="form-Output_Location form-element">
<button id="button3">Output</button>
</div>
<div class="form-Highlight form-element">
<button id="button4">Execute</button>
</div>
</div>
</form>
<script src="./test.js"></script>
</body>
</html>
And:
html { font: normal 14px/1.5 Courier New; }
h1 { margin: 7rem; margin-top: 8rem; }
form { margin: 3rem; width: 800px; }
/* Style all the buttons in one go */
button {
font-size: 0.7rem;
border: none;
padding: 0.5rem 0.5rem;
color: white;
background-color: cornflowerblue;
cursor: pointer;
min-width: 100px;
}
.form-element {
font-size: 1rem;
width: 200px;
margin-top: 10px;
}
Run the example here: https://codepen.io/hkoosha/pen/XWWYvxd
Final note: you are wrapping your button in another div with class form-IFS_.... This could be unnecessary and you can simply use the button element only. Your mileage may vary though.
Add margin-top property to button tag, and remove all other margin-top property from, other classes.
#form-user button{
margin-top:10px;
}
I want the blue bits of the buttons to all be the same length as each other so it looks cool in a column instead of all messy
context context context
.button {
border: 0px solid #000000;
background: #70D4C7;
padding: 3.5px 7px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
text-shadow: #70D4C7 0 1px 0;
font-size: 20.5px;
font-family: Fira Sans;
text-decoration: none;
vertical-align: middle;
text-align: center;
color: #000000;
}
<!doctype html>
<html>
<head>
</head>
<body>
<div id="button">
<strong>Homepage</strong>
<br>
<br>
<a href="#" style="color: black" class="button"> <strong>exampleexample</strong>
</a>
<br>
<br>
<strong>example </strong>
</nav>
<p></p>
</div>
</body>
</html>
You can wrap each link in a div:
<div>
<strong>Homepage</strong>
</div>
Remove the <br/> tags. And add the following CSS (notice, I moved the background color from your CSS segment to here):
#button > div {
margin: 10px;
width: 100%;
background: #70D4C7;
}
#button {
width: 40%;
}
NOTE: It is generally considered to be poor coding style to use elements for purposes other than which they were intended. So, for example, buttons should be used as buttons, and links should be used as links. Links should not be styled as buttons. But, if you insist on your current structure, the above modifications will produce the following effect:
Here is a Fiddle Demo
<a> is by default display:inline, so it can not have a width. Just add to the class button :
.button{
width:200px;
display:block;
}
and your problem is solved.
I'm currently following a UDemy course where the instructor is teaching us Full Stack Development from scratch. Problem is, he made a lot of mistakes that I needed to improvise on like adding <span> next to sign in, instead of his idea of a <p> and my screenshots of the BBC Logo and Sign In button needed it's height modified in order for them to fit properly in that small nav bar.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Wadson's BBC</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
font-family: Helvetica, Arial, sans-serif;
}
#topbar {
background-color: #7A0000;
width: 100%;
height: 45px;
color: #fff;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
}
#logodiv {
padding-top: 15px;
float: left;
border-right: 1px solid #990000;
padding-right: 10px;
}
#signindiv {
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
position: relative;
width: 200px;
height: 45px;
float: left;
}
#signindiv img {
position: relative;
top: 15px;
left: 15px;
}
#signintext {
position: relative;
top: 10px;
left: 25px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
margin: 0px;
padding: 0px;
}
#topmenudiv li {
list-style: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
padding: 15px 20px 0px 20px
}
</style>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/logo.png" height="25px" />
</div>
<div id="signindiv">
<img class="signinhead" src="images/signin.png" height="20px"/><span id="signintext">Sign In</span>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- /#container -->
</body>
</html>
Any suggestions for an aspiring programmer? How can I think much differently so that I can spot errors while his is talking instead of copying his stuff verbatim? I understand HTML very well, I'm getting stuck on position, margin and padding.
There is a few things wrong with the code here, I'm not going to go too deep into structure or how using a CSS framework is a great option for beginners(I highly recommend bootstrap and following a tutorial to understand how they use each component as well following a up to date CSS tutorial).
A few quick pointers to fix the problems your border was going past the #topbar because the list items were being stacked vertically instead of horizontally. This was fixed by adding float: right; to the #topmenudiv li. You need to offset the padding you have on your list item elements by setting a height - the padding in this case 30px.
Check the updated version below and always try to include a codepen or jsfiddle with your answer whenever possible.
http://codepen.io/anon/pen/VLEENL
As I understand your question:
Any suggestions for an aspiring programmer? How can I think much differently so that I can spot errors while his is talking instead of copying his stuff verbatim? I understand HTML very well, I'm getting stuck on position, margin and padding.
Use the CSS property outline When you apply it to a class, tag, or id of an element(s), it looks like the CSS property border. The difference between border and outline is that outline will not affect the area surrounding the element(s) which mikes it perfect for seeing your divs and their actual position.
Place this css under your body rule (ie body {...}) in the <style> block:
CSS
/* body * { outline: 1px solid blue; } */ /* Uncomment to see all elements */
.green { outline: 2px dashed green } /* Highlight in green */
.black { outline: 3px dotted #000; } /* Highlight in black */
.yellow { outline: 4px double #fc0; } /* Highlight in yellow */
In order to handle padding and margins easier put the following at the top of your CSS:
CSS
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
This will unify all of the elements under one box-sizing rule. An element's dimensions, padding, and border are included to the element's content. Normally by default (content-box), only width and height are considered. See this for more on box-sizing