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*/
}
Related
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.
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'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
I currently have a simple header set up in HTML, and am using CSS to style it. I have created multiple styles: '#header' and '#header #right'. When I use 'float: right;' for the second style I mentioned, it moves the text down almost completely under the header.
Code:
index.html:
<html>
<link rel="icon" type="image/png" href="images/favicon.png">
<link href='main.css' type='text/css' rel=Stylesheet>
<head>
<title>FriendSub</title>
</head>
<body>
<div id='header'>
<font size='+3'>FriendSub </font>
<a href='index.php'>Home</a> |
<a href=''>Subscribers</a> |
<a href=''>Subscriptions</a>
<div id='right'>
<p><a href=''>Log in</a> | <a href='register.php'>Register</a></p></div></div>
</body>
</html>
main.css:
#charset "utf-8";
/* CSS Document */
#header {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
background-color: #093;
border-top-left-radius: 18;
border-top-right-radius: 18;
width: 96%;
height: 58px;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 14px;
padding-right: 14px;
color: #FFF;
font-weight: bold;
text-shadow: #000 0.1em 0.1em 0.2em;
}
#header a {
color: #FFF;
text-decoration: none;
text-shadow: #000 0.1em 0.1em 0.2em;
}
#header a:hover {
color: #CCC;
}
#header #right {
float: right;
width: 220px;
background-color: #093;
}
#content {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #CCC;
width: 1000;
height: 58px;
margin-left: auto;
margin-right: auto;
padding-top: 14px;
padding-left: 14px;
padding-right: 14px;
padding-bottom: 600;
font-weight: bold;
border-bottom-left-radius: 18;
border-bottom-right-radius: 18;
line-height: 1%;
}
JSFiddle here: http://jsfiddle.net/aKtep/
try adding a <div style='clear:both'></div> right after you close #right and see what happens
A quick solution (assuming I understand your desired result) is to rearrange the elements so the item you want to float to the right is the first in header. Floated elements are removed from the normal flow of the document, and often are pushed to the next line unless they have enough space. However, if the floated element comes first, subsequent elements will arrange themselves around it. See fiddle.
Remove the p tag from around the Login/Register link, modify the #header #right to include a padding-top:10px; You're also using too many divs when you don't really need to (divitus)
You need to specify a width of units for your container #header that will accommodate all of its content.
All I did here was change #header width from 96% to 960px
I guess I'm not 100% sure on what you're asking but it sounds like your normal header is pushing the right header down below it. From what I can see, it may have to do with your header container having a width of 96%. Then the #right #header has a width of pixels and the original header container might not have enough room left for that many pixels. Try changing the width of #header #right to a %
A word of advice, don't use ID's so much. You are creating very high specificity that can be a pain for you later on.
As mentioned before, you should use clear: float after the #right segment.
The reason for this is that the clear property is related directly to the float property. It specifies if an element should be next to the floated elements or if it should move below them. This property applies to both floated and non-floated elements.
Hey all I posted a question earlier here : Why am I getting white space between my HTML element? which was solved.
I have continued working on this page and have ended up with the following:
IE Screenshot:
http://postimage.org/image/2aqd5k99g/
Chrome Screenshot:
http://postimage.org/image/1xdm95138/
What I really want is basically the chrome screenshot but without the white space below my red footer. What can I do to get this desired effect for both IE and Chrome?
My HTML file is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
</head>
<body>
<img src="final.jpg" id="banner"></img>
<ul id="nav">
<li class="links">Home</li>
<li class="links">Planning</li>
<li class="links">Construction</li>
<li class="links">Evaluation</li>
</ul>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
</div>
<div id="rightcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS file is:
html{
font-family: sans-serif;
background-color:#464E54;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 5px solid black;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#mainc {
float: left;
width: 760px;
background-color: white;
margin: 0;
}
#rightcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 197px;
}
#footer {
clear: both;
background-color: red;
}
.links {
float: left;
margin: 0px;
}
a:link {
display: block;
width: 232px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 232px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
Once again cheers for everyones help - hopefully after this I will be a bit more familiar to these mysterious white lines showing up.
add the following rule
div#footer p {
margin:0;
}
Use inspect element on chrome by right clicking.
you will find the area which is blue by moving mouse over the respected area and then you can solve the problem
Have you checked it on different chrome browsers (From different PCs chrome browsers) or do you have any download manager extension installed on your browser, if yes; then disable that first and then reload your page.
Hope this works for you.
Many of these problems are solved, only by importing and using a CSS Reset. Why don't you use them?
Theory: Browsers apply some default style on HTML elements, and they are not the same in that. For example, IE might add 15px margin to p elements, while Chrome might add 13px. This means that incosistencies can exist between default styles of HTML elements across browsers. CSS Reset is technically a set of CSS rules which zero-outs these default values. For example, you can see that in CSS reset, a p is directed to have 0 margin.
p
{
margin: 0;
}