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;
}
Related
I have looked at some other posts and all I could find was answers using javascript. Is there some way that I hover over an element on top of another element but the element at the bottom won't change its style? By the way, I only want to use vanilla HTML and CSS, no javascript. In this example, the goal is to hover over blabla or blablabla without adding a border to the navigation bar.
HTML
<div class="navBar">
<div>
<h1 id="Title">A Random Website</h1>
</div>
<div class="navBarChild">
Notepad
Help
</div>
</div>
CSS
.navBar{
display: flex;
position: sticky;
top:0;
padding: 20px;
border: 2px solid gainsboro;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title{
color: black;
font-family: monospace;
}
.navBar:hover{
border: 2px solid black;
}
h3{
z-index: 2;
}
body{
background:url("...") left / cover no-repeat;
}
.navBarChild{
display: flex;
flex-direction: row;
position: relative;left: 290px;top: 17px;
}
#linkBla{
font-weight: bold;
text-decoration: none;
font-size: 26px;
font-family: monospace;
color: black;
}
#linkBla:hover{
color: orangered;
}
#linkBlaBla{
position: relative;left: 50px;
font-weight: bold;
text-decoration: none;
font-size: 26px;
font-family: monospace;
color: black;
}
#linkBlaBla:hover{
color: orangered;
}
Add a new 'navBarContainer'
Try bringing the 'navBarChild' out of the 'navBar' like this:
<div class="navBar">
<div>
<h1 id="Title">A Random Website</h1>
</div>
</div>
<div class="navBarChild">
Notepad
Help
</div>
Make a whole new 'navBarContainer' for the both of them
<div class="navBarContainer">
<div class="navBar">
<div>
<h1 id="Title">A Random Website</h1>
</div>
</div>
<div class="navBarChild">
Notepad
Help
</div>
</div>
Set the '.navBarContainer' in your css to 'position: relative;'
position: relative;
Set the 'navBarChild' to
position: absolute;
display: flex; //to keep the a-links together
and then you can position it to your desire
top: 0; //important
left: 75%;
height: 100%;
At this point there should be no need for the z-index
Lastly
Add a little padding to the #linkBla and #linkBlaBla and set the display to 'flexbox'
#linkBla, #linkBlaBla {
padding: 40%;
display: flexbox;
}
Checkout the whole thing in this pen https://codepen.io/emekaorji/pen/mdOMMRr
I don't believe this is possible without javascript, but you can put the script inside of the HTML like so:
<html>
<body>
...
<script>
function removeOutline() {
document.getElementsByClassName("navBar")[0].style.border = "2px solid transparent";
}
function addOutline() {
document.getElementsByClassName("navBar")[0].style.border = "2px solid black";
}
</script>
</body>
</html>
and use it like:
<div class="navBarChild" onmouseover="removeOutline()" onmouseout="addOutline()">
CSS does not allow you to change elements above the current element. In other words, you can't change the parent element based on the child element (the reverse works by using child selectors).
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*/
}
Update: I've updated my code (thanks to, Kodos Johnson). But I have another problem with the padding for the background image.
When I tried adding a background image inside my button, the text inside it moves outside the button. Can someone please help me? My code is below:
<div>
<button type="button" id="secondBarButton">See How It Works</button>
</div>
---Update 2: I want to add padding or margin for the image.
#secondBarButton {
float: right;
padding: 5px;
margin: 10px;
background-image: url(images/button.png);
}
I cannot make the text move back inside the button and center.
Forget about using a background image for a simple icon. Use icons from FontAwesome, the particular one used on this button is:
fa-play-circle
SNIPPET
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Button</title>
<link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
<style>
#btn1 {
position: relative;
width: 300px;
height: 50px;
border-radius: 25px;
background-color: white;
border: 1px solid #0070BA;
font-weight: bold;
font-size: 0.8em;
color: #0070BA;
line-height: 1;
cursor: pointer;
}
.fa {
position: absolute;
left: 2px;
top: -2px;
}
#btn1:hover {
background-color: #0070BA;
border: 1px solid #fff;
color: #fff;
}
</style>
</head>
<body>
<button id="btn1">
<i class='fa fa-4x fa-play-circle'></i> See How It Works
</button>
</body>
</html>
Showing the HTML would help a lot. Looks like your image is forcing a line break. Have u tried sectioning the image and text with col? That might be a quick and dirty fix to your problem
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