im currently working on my Personal Web Page. I have made a Starting page, that says my name and other stuff. I have a button, that I want to connect it to the Main Page. Here is the code: (It's Updated since the first code)
<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
<link rel="stylesheet" href="style.css" type="text/css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Patua+One"
rel="stylesheet">
</head>
<body>
<div class="heading">
<span class="title1">Alexandros Kordatzakis</span>
<span class="title2">Technology, Coding And More...</span>
<button class="continue">Continue Reading About Me</button>
<hr>
</div>
<div id=Copyright>Copyright ©2017 Alexandros Kordatzakis.</div>
</body>
</html>
And CSS:
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
background-color: #00469E;
background-position: center;
background-size: cover;
background-blend-mode: soft-light;
}
.heading{
width: 600px;
height: 300px;
margin: auto;
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 0px
}
.title1{
display: block;
text-align: center;
color:white;
font-size: 60pt;
font-family: big john;
}
.title2{
display: block;
margin-top: 30px;
text-align: center;
color:white;
font-size: 15pt;
font-family: 'Share Tech Mono', monospace;
}
.continue{
margin: 50px auto;
display: block;
width: 200px;
height:50px;
border:3px solid white;
background-color: rgba(255, 255, 255, 0);
color:white;
font-family: sans-serif;
font-weight: bold;
border-radius: 20px;
transition: background-color 1000ms, color 1000ms;
}
.continue:focus{
outline-width: 0px;
}
.continue:hover{
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;
transition: background-color 1000ms, color 1000ms;
}
.continue:active{
border: 3px solid white;
border-radius: 50px;
}
#Copyright{
clear: left;
background-color: #0053BC;
text-align: center;
padding: 12px;
height: 8px;
font-family: 'Patua One', cursive;
font-size: 18px;
}
Questions I have:
1) When the User press the button, "READ MORE ABOUT ME" it appears a blue line-border. Why?
2) How can I link this "Starting Page" to my main page?
Thanks!
**EDIT 1 : ** Some details, like Copyright and else, are not finished, so sorry for mistakes. Just help me with my questions! :)
**EDIT 2: ** I have thought about my page design and I think that it's better to make this code "Starting Page" and not allow the user to do anything else like rolling, then the user to press this button and "hide" this background and text and show my other content. My "biography". How can i do that? Thanks btw.
To remove the focus outline use something like this:
.continue:focus{
outline-width: 0px;
}
To link a page use href. Example
Your Text Here
EDIT 2:
To show content on button click I would do this:
First add a new div with your content inside like so, and another div to set the style of your info div:
<div id="yourInfo">
<p>Your Content Here</p>
<p>Your Content Here</p>
<p>Your Content Here</p>
</div>
<div id="yourInfoStyle"></div>
Then you want to add this to your css file:
#yourInfo{
display: none;
}
Lastly, we need to add a function to show and hide the div, so put this
script in your html file:
<script>
var shown = false;
function showContent(){
if(!shown){
document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:block;}</style>";
shown = true;
} else {
document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:none;}</style>";
shown = false;
}
}
</script>
So here's the full code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
<link rel="stylesheet" href="style.css" type="text/css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono"
rel="stylesheet">
<script>
var shown = false;
function showContent(){
if(!shown){
document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:block;}</style>";
shown = true;
} else {
document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:none;}</style>";
shown = false;
}
}
</script>
</head>
<body>
<div class="heading">
<span class="title1">Alexandros Kordatzakis</span>
<span class="title2">Technology, Coding And More...</span>
<button class="continue" onclick="showContent()">Continue Reading About Me</button>
<div id="yourInfo">
<p>Your Content Here</p>
<p>Your Content Here</p>
<p>Your Content Here</p>
</div>
<div id="yourInfoStyle"></div>
<hr>
<span class="copyright">Copyright</span>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
background-color: #00469E;
background-position: center;
background-size: cover;
background-blend-mode: soft-light;
}
.heading{
width: 600px;
height: 300px;
margin: auto;
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 0px
}
.title1{
display: block;
text-align: center;
color:white;
font-size: 60pt;
font-family: big john;
}
.title2{
display: block;
margin-top: 30px;
text-align: center;
color:white;
font-size: 15pt;
font-family: 'Share Tech Mono', monospace;
}
.continue{
margin: 50px auto;
display: block;
width: 200px;
height:50px;
border:3px solid white;
background-color: rgba(255, 255, 255, 0);
color:white;
font-family: sans-serif;
font-weight: bold;
border-radius: 20px;
transition: background-color 1000ms, color 1000ms;
}
.continue:focus{
outline: none;
}
.continue:hover{
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;
transition: background-color 1000ms, color 1000ms;
}
.continue:active{
border: 3px solid white;
border-radius: 100px;
}
.copyright{
}
#yourInfo{
display: none;
}
Hope this helped you! :D
To link your Starting page you can use the anchor tag. Ex in your Starting page:
(Name of the website).
For any help you can also visit w3shools. They provide the best tutorials.
Answer 1:
<button class="continue" style=".continue:focus{outline-width: 0px;}">Continue Reading About Me</button>
Answer 2:
example
Related
My link which would go to the home page is on the Egypt coat of arms. But the link is only clickable on the nav bar. How do I fix it? The first block is HTML and the second is CSS.-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
html
css
(HTML)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="coatofarms"> <img src="coabetter.png" class="coa" width="75px"></div>
<div class="topnav">
News
Contact
About
</div>
<button type="button"class="buttonbook" >BOOK</button>
<div style="padding-left:16px">
<h2></h2>
<p></p>
</div>
</body>
</html>
(CSS)
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url("goodyegypt.png")
}
.coatofarms {
margin-top: -16px;
margin-left: 5px;
width: 5%;
}
.topnav {
overflow: hidden;
background-color: #e1bc85;
margin-top: -151px;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
margin-left: 10%;
font-family: Bodoni Mt;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.buttonbook {
background-color: #e9cda4;
border-radius: 50%;
width: 250px;
height: 100px;
border: none;
opacity: 0.7;
font-family: Algerian;
font-size: 30px;
margin-top: 35%;
margin-left: 43%;
align: center;
}
.buttonbook:hover {
background-color: #e1c295;
opacity: 0.7;
}
The use of margin-top as the only layout mechanism is what is causing you problems. In this fiddle I instead absolutely placed your button.buttonbook element.
https://jsfiddle.net/cwzp5dya/2/
.buttonbook {
position: absolute;
top: 55%;
left: 43%;
Highly recommend NOT using margin as your primary layout method.
I am trying to make a website and am running into an issue of not being able to remove a chunk of white space.
I am using an image as a background and want the main text and logo to be in the middle of the background image.
I have tried using overflow-x: hidden; as well as messing with margin, padding, width and height values of different elements in the css file but, I cannot get it to work. I tried to set the width and height bigger but it won't expand to any size screen.
I haven't had this issue before and do not know why it is happening now.
My Code:
h1 {
font-family: "times new roman";
font-size: 2.5em;
color: rgb(100, 181, 204);
}
#box {
border-width: 0.25em;
border-style: solid;
border-color: black;
width: 50em;
margin-left: auto;
margin-right: auto;
padding: 1em;
font-family: sans-serif;
color: black;
background: rgb(135, 129, 140);
}
div {
margin: 0 auto;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
font-size: 1.2em;
}
.centertext {
text-align: center;
width: 60%;
margin-left: auto;
margin-right: auto;
}
#logo {
margin-top: .5em;
margin-left: 13.7em;
margin-right: auto;
padding: 0em 0em 0em 0em;
}
#background {
position: absolute;
z-index: -1;
left: -40px;
top: -88px;
width: 100%;
height: 100%;
padding: 0 0 0 0;
margin: 0 auto;
}
footer {
display: block;
background: rgb(81, 40, 117);
padding: 0.1em;
border-width: thin;
border-style: solid;
border-color: black;
clear: right;
}
#mainnav {
border-width: .1em;
border-style: solid;
border-color: black;
width: 40em;
padding-left: 0em;
margin-left: auto;
margin-right: auto;
text-align: center;
background: rgb(81, 40, 117);
}
#mainnav a:link {
color: white;
}
#mainnav a:visited {
color: blue;
}
#mainnav a:hover {
color: black;
}
#mainnav a:active {
color: light gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Christie Matterns Portfolio website</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<img id="logo" src="images/logo.jpg" width="840" height="200" />
<div id="box">
<div>
<p id="mainnav">
Home |
Who am I? |
Questionair |
</p>
</div>
<h1 class="centertext">My Portfolio</h1>
<p class="centertext">
Hello, My name is Christie Mattern, I am a web designer!
</p>
<p>
I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress.
<footer>
<p class="centertext">
Christie Mattern
</p>
</footer>
</div>
</body>
<img id="background" src="images/background.jpg" />
</html>
This is happening because your background image is outside your <body> tag.
There's better and more maintainable ways of doing what you're trying to do, without all that "hacking".
I'll try to modify a bit of your code and comment it out so you can understand it a bit more.
Using images as a background
When you want to use an image as a background, use it as a CSS background-image Property. There's some occasions it would be better to use the way you were trying to use it, but generally and for this specific case background-image is more suitable.
.myElement {
background-image: url("paper.jpg");
}
If you want your text centralized inside of an element with a background, wrap your content with a new element, insert the content inside of it, and then give to this new element the background-image property.
<div class="newElement">
<div class="content-wrapper">
<h2>Your Title Goes Here</h2>
<p>Your Description Goes Here</p>
</div>
</div>
.newElement{
background-image: url("paper.jpg");
}
All together your code should look something like this:
/* New Code Added */
.newElement {
background-image: url(http://lorempixel.com/400/400/abstract/);
background-repeat: no-repeat; /* Makes background nto repeat */
background-size: cover; /* Sets background size as a cover */
background-color: #cccccc;
padding: 2rem; /* Give the padding here instead of logo to avoid "breadking" the image's 100% width. A lesson for another day */
}
/* Old Code. Check comments */
h1 {
font-family: "times new roman";
font-size: 2.5em;
color: rgb(100, 181, 204);
}
#box {
border-width: 0.25em;
border-style: solid;
border-color: black;
/* width: 50em; No need for this being added */
margin-left: auto;
margin-right: auto;
padding: 1em;
font-family: sans-serif;
color: black;
background: rgb(135, 129, 140);
}
div {
margin: 0 auto;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
font-size: 1.2em;
}
.centertext {
text-align: center;
width: 60%;
margin-left: auto;
margin-right: auto;
}
#logo {
width: 100%;
max-width: 840px; /* Sets a max-width. Same size of the picture's width. So we avoid image losing focus when the screen gets bigger */
height: auto; /* automatically follows the lead of the width, scalling the image equally without distortion */
margin: 0 auto; /* Centers image horizontally */
display: block; /* Needed for the horizontal center */
}
footer {
display: block;
background: rgb(81, 40, 117);
padding: 0.1em;
border-width: thin;
border-style: solid;
border-color: black;
clear: right;
}
#mainnav {
border-width: .1em;
border-style: solid;
border-color: black;
/* width: 40em; No need for this being added */
padding-left: 0em;
margin-left: auto;
margin-right: auto;
text-align: center;
background: rgb(81, 40, 117);
}
#mainnav a:link {
color: white;
}
#mainnav a:visited {
color: blue;
}
#mainnav a:hover {
color: black;
}
#mainnav a:active {
color: light gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Christie Matterns Portfolio website</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div class="newElement">
<div class="content-wrapper">
<img id="logo" src="http://lorempixel.com/840/200/food/" width="840" height="200" />
</div>
</div>
<div id="box">
<div>
<p id="mainnav">
Home |
Who am I? |
Questionair |
</p>
</div>
<h1 class="centertext">My Portfolio</h1>
<p class="centertext">
Hello, My name is Christie Mattern, I am a web designer!
</p>
<p>
I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress.
<footer>
<p class="centertext">
Christie Mattern
</p>
</footer>
</div>
</body>
</html>
If you wanted a background image for all the website, just move the
background-image attributes to the body tag instead.
body {
background-image: url("paper.jpg");
}
Removing the width you were adding to the box and mainnav
elements, the content even becomes responsive so it's ready for mobile
devices.
Read more about background-image and its properties.
Not sure if I understood your question a 100%, but if you're trying to get the background image to cover the entire document, try wrapping it around the entire document with a css property.
Example: remove the img tag that you have.
<body id="background">
<!-- rest of your code here -->
</body>
then in the css add background-image to reference your img under the id background :
#background {
background-image: url("images/background.jpg");
}
When I am trying to add a border to a div element on my website, I am getting these weird borders.
This is the result I was looking for:
intended result
HTML
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
CSS
.outlined-button
{
border: 3px solid #fff;
border-radius: 10px;
box-sizing: border-box;
height: 48px;
width: 140px;
}
.outlined-button-text
{
color: #fff;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
}
The cause of the border is that a elements have inline flow while the enclosed p element has display block behaviour. Inline elements have no inherited width, this causes the border property to think that the element is 0 px wide, and places a border where it thinks the element is.
A fix for your solution is to use display: block for the link element(https://jsfiddle.net/qtdz296j/1/)
I also attached an alternative solution:
body {
background: #162CEA;
padding: 2rem 1rem;
}
.heading {
color: #FFF;
}
.button {
padding: .5rem 1rem;
border-radius: .5rem;
}
.filled-button {
background: #FFF;
}
.outline-button {
border: 3px solid #FFF;
color: #FFF;
}
<h1 class="heading">hey<h1>
<a class="button filled-button">sign up</a>
<a class="button outline-button">log in</a>
Can't tell anything without the rest of the css and html. Your post starts in the middle of a rule. I'd try playing with it and see what you can change. Make sure your css is affecting the elements you want it to be affecting.
Edit: Try changing your <p> tags inside the buttons to <span>. Or better yet, don't enclose them in anything, and just style the button text directly. I also highly suggest looking into the correct use of <button> vs. <a>. It's a lot easier to make buttons work when they're actually buttons. But changing the <p>s to an inline element like <span> will fix your immediate problem.
this works if you just need a border around that div. cleaned it up a little and added a missing ;. it there are a lot of nested classes and you just need to target the right one. there are only 2 divs in this, so if you are talking about the outer/parent div, just give that an id and target it. Enjoy!
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
</body>
<style>
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.filled-button-text {
display: table-cell;
vertical-align: middle;
}
.filled-button {
float: left;
width: 140px;
height: 48px;
margin-left: 15%;
background: #FFFFFF;
border-radius: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #000000;
display: table;
text-align: center;
}
.outlined-button {
width: 140px;
height: 48px;
box-sizing: border-box;
}
.outlined-button-text {
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #FFFFFF;
}
.buttons {
border: 2px solid black;
}
</style>
</html>
You can use this code
body {
margin: 0;
padding: 0;
font-family: Roboto;
background-color: #162cea;
}
.headline {
text-align: center;
color: #ffffff;
}
.buttons {
padding: 30px;
margin: 0 auto;
text-align: center;
}
.filled-button {
border-radius: 10px;
color: #000000;
font-weight: bold;
font-size: 30px;
height: 55px;
width: 140px;
background-color: #ffffff;
display: inline-block;
cursor: pointer;
margin: 0 10px 0 0;
padding: 0;
}
.filled-button .filled-button-text {
margin: 0;
padding: 9px;
}
.outlined-button {
border-radius: 10px;
color: #ffffff;
font-weight: bold;
font-size: 30px;
height: 52px;
width: 140px;
background-color: #162cea;
display: inline-block;
border: 3px solid #ffffff;
cursor: pointer;
margin: 0 0 0 10px;
padding: 0;
}
.outlined-button .outlined-button-text {
margin: 0;
padding: 9px;
}
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
Hello I hope this will help. and a small advice, as you might already know it. do not use a block level element inside a inline element even though you are changing the display property its safer that way.
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.button {
width: 100%;
text-align: center;
}
.filled-button-text,
.outlined-button-text {
display: block;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 1.75em;
line-height: 2.25em;
width: 100%;
text-align: center;
}
.outlined-button-text {
color: #FFFFFF;
}
.filled-button {
background: #FFFFFF;
}
.filled-button,
.outlined-button {
width: 49%;
display: inline-block;
border: 3px solid #FFFFFF;
box-sizing: border-box;
display: inline-block;
border-radius: 0.5em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button">
<span class="filled-button-text">sign up</span>
</a>
<a class="outlined-button">
<span class="outlined-button-text">log in</span>
</a>
</div>
</div>
</body>
</html>
I have 4 DIVs and I need them all to be sticked together. I have a white space between and only between first 2 DIVs and I don't know why. Any advices and a possible explanation? I don't have any padding of so, making this quite annoying.
#font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
background: #8C78B1;
height: 600px;
}
div.text1 {
padding-top: 100px;
color: white;
text-align: center;
font-size: 2.5em;
}
div.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover {
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body {
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
The default margin-top on the nested p element is collapsing vertically, which essentially creates an equal margin-top on the parent .surf2 element (that is why you are seeing a space).
According to the spec, this doesn't occur if you establish a new block formatting context, which means that one option would be to set the overflow of the .surf2 element to something other than the default value visible. Changing it to auto or hidden would resolve the issue.
.surf2 {
background: #41c3ac;
height: 600px;
overflow: auto;
}
#font-face {
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1 {
font-size: 2.5em;
}
p.title2 {
font-size: 3em;
}
div.surf1 {
display: block;
/*background-image: url("surf1.jpg");*/
background: #41c3ac;
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
display: block;
background: #41c3ac;
height: 600px;
overflow: auto;
}
div.surf3 {
display: block;
background: #ff6b57;
height: 600px;
}
div.surf4 {
display: block;
background: #8C78B1;
height: 600px;
}
div.text1 {
padding-top: 100px;
color: white;
text-align: center;
font-size: 2.5em;
}
div.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover {
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body {
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
That's just one work around. See the spec for the specific rules relating to collapsing margins. You could also simply remove the margin from the p element.
For all your surf# classed elements, set their overflow to auto.
It appears that the margin on the children on the 2nd div is pushing the first div up.
I recommend either adding a unifying class to those elements or use this rule:
[class^="surf"] {
overflow: auto;
}
You need to set the class="title1" margin to 0px. -> margin: 0;
I'm a n00b, so go easy on me. :)
Right now I'm stuck because I need to figure out why the text color of the two named buttons (Resume and Programs) isn't white. The buttons reside inside divs of class outerdiv; thus they should inherit the property font-color: #FFFFFF. But apparently they aren't doing that, since the font is still black.
Please explain the HTML logic that corrects this problem.
Code:
<html>
<head>
<title>my site</title>
<style type="text/css">
p
{
font-family: Arial;
color: #FFFFFF;
}
#mtx_bckgd
{
font-family: "Courier New";
height: 750px;
width: 1000px;
position: absolute;
z-index: -1;
background: linear-gradient(180deg, #39275b, #FFFFFF);
}
#mtx_bckgd > p
{
word-wrap: break-word;
color: #D8D8D8;
overflow: hidden;
}
#headerbox
{
height: 50px;
top: 25px;
left: 5px;
}
h1
{
color: #FFFFFF;
font-weight: 400;
text-align: center;
margin: auto;
padding: auto;
text-shadow: 2px 2px rgb(51,51,51);
}
#navbar
{
top: 120px;
left: 5px;
width: 1000px;
height: 30px;
}
#uwlogo
{
height: 50px;
float: left;
}
#JaminWEB
{
margin: 0px auto;
}
.navbutton
{
width: 33%;
height: 25px;
background-color: rgba(51,51,51,0.5);
margin: 0px;
padding: 0px;
}
#footer
{
top: 800px;
}
.outerdiv
{
position: absolute;
font-family: Arial;
width: 1000px;
border: solid 2px #FFFFFF;
background-color: rgba(215,169,0,0.5);
margin: 0px;
padding: 0px;
font-color: #FFFFFF;
}
</style>
<script type="text/javascript">
function change_bckgd()
{
var bitstr = "";
for (var i = 0; i < 4000; ++i)
bitstr += Math.floor(Math.random() * 10) % 2 ? "0" : "1";
document.getElementById("mtx_txt").innerHTML = bitstr;
}
</script>
</head>
<body>
<div id="mtx_bckgd">
<p id="mtx_txt"></p>
</div>
<div class="outerdiv" id="headerbox">
<div id="uwlogo">
<img src="C:\Users\XXXXXX\Desktop\uwlogo.png" height="50px">
</div>
<div id="JaminWEB">
<h1>JaminWEB</h1>
</div>
</div>
<div class="outerdiv" id="navbar">
<input type="button" class="navbutton" value="Resume"/>
<input type="button" class="navbutton" value="Programs"/>
<input type="button" class="navbutton"/>
<div class="outerdiv" id="footer">
<p>Last modified: March 21st, 2014</p>
</div>
<script type="text/javascript">
setInterval(change_bckgd, 200);
</script>
</body>
</html>
First, in your .outer-div rules, you have font-color which isn't a property, it's just color. But if you correct that, you'll see the text is still black, the default color. That's because browsers are notorious for having issues when rendering form controls.
As the MDN says:
CSS font and text features can be used easily with any widget (and
yes, you can use #font-face with form widgets). However, browsers'
behaviors are often inconsistent. By default, some widgets do not
inherit font-family and font-size from their parents. And many
browsers use the system default appearance instead.
The easiest way to fix this would be to add color:inherit; or color:white to your .navbutton class
jsFiddle example
.outerdiv input[type=button]
{
color:#fff;
}
You can set .navbutton to have a color of white in the css, or adding color:inherit should work. And the proper "font-color" property in CSS is just "color", fyi.
Example:
.navbutton
{
width: 33%;
height: 25px;
background-color: rgba(51,51,51,0.5);
margin: 0px;
padding: 0px;
color: #fff;
}
Inputs don't automatically inherit all parent styles, so you have to specify to inherit, or specify the style you want.