I'm new to HTML and CSS. I have a project due on Friday and I don't understand how to make my page look the same in all browsers and resolutions. I will leave my CSS and HTML code, so if anyone is kind enough to help me figure it out I'd really appreciate it. We did some simple designs before but I was trying new things out and I guess what I did looks good on like bigger displays but on smaller ones the elements are just messed up.
body{
font-family: 'Playfair Display';
font-size: 20px;
}
.figure1{
float:right;
clear: both;
padding-bottom: 150px;
padding-left: 450px;
padding-right: 8px;
background-color: #D1C45E;
width: 500px;
height: 600px;
}
.figure2{
float:left;
clear: both;
padding-top: 250px;
padding-bottom: 50px;
padding-right: 450px;
padding-left: 8px;
background-color: #D1C45E;
width: 400px;
height: 400px;
}
.imgMe {
position: absolute;
left: 770px;
top: 65px;
}
.navbar {
overflow: hidden;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 10px 12px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: #D1C45E;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #D1C45E;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #D1C45E;
}
.dropdown:hover .dropdown-content {
display: block;
}
h1{
display: inline;
float: none;
padding-left: 140px;
font-size: 80px;
font-weight: 700;
line-height: 1.2;
}
h3{
display: block;
float: none;
padding-top: 350px;
padding-left: 340px;
text-transform: uppercase;
color: #d5c455;
font-size: 20px;
}
h2{
display: block;
float: right;
position: relative;
left: 1030px;
bottom: 650px;
text-transform: uppercase;
font-size: 42px;
}
button {
margin: 20px;
outline: none;
}
.custom-btn {
width: 130px;
height: 40px;
padding: 10px 25px;
border: 2px solid #000;
font-family: 'Lato', sans-serif;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
position: relative;
left: 395px;
font-weight: bold;
font-style: italic;
}
.btn-1 {
transition: all 0.3s ease;
}
.btn-1:hover {
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
}
br {
display: inline-block;
content: "";
margin-top: 35%;
}
.pText{
display: block;
float: right;
position: absolute;
left: 930px;
top: 1500px;
line-height: 40px;
}
a{
all: revert;
text-decoration: none;
color: black;
}
html {
scroll-behavior: smooth;
}
#down {
margin-top: 100%;
padding-bottom: 25%;
}
footer {
text-align: center;
padding: 40px;
background-color: #D1C45E;
color: white;
display: block;
position: absolute;
top: 2100px;
left: 0px;
width: 1823px;
height: 100px;
}
.socials{
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.copyright{
text-align: left;
display: inline;
position: absolute;
bottom: 0px;
left: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Janko's homepage </title>
<link href="assets/CSS/project1.css" rel="stylesheet" type="text/css">
<link rel="icon" href="assets/media/home.png">
</head>
<body>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">
<img src="assets/media/menu.png" alt="an image of a dropdown menu" height="50" width="50">
</button>
<div class="dropdown-content">
Education
Personal
Résumé
</div>
</div>
</div>
<section>
<figure class="figure1">
<img class="imgMe" src="assets/media/janko-image.png" title="Janko " alt="An image of me" width="950" height="815">
</figure>
<h3> Web designer & developer </h3>
<h1> I'm Janko </h1>
<button class="custom-btn btn-1">About me</button>
</section>
<section>
<br>
<figure class="figure2">
<div id="down">
<h2> About me </h2>
</div>
<p class="pText"> I'm a 19 year old Web developer and designer from Croatia. I specialise in HTML and Java. I'm interested in finding a fullstack developer job. The mission of this site is to showcase my web-developing and designing abilities to my potential employers, my professors and viewers who might take inspiration from my website. Not to mention all the feedback I can get will most definitely help me form my webdesign style in the future.</p>
</figure>
<br>
</section>
<section>
<br>
<footer>
<ul class="socials">
<li><img src="assets/media/instagram.png" alt="instagram icon" height="60" width="60"></li>
<li><img src="assets/media/email.png" alt="mail icon" height="60" width="60"></li>
<li><img src="assets/media/facebook.png" alt="facebook icon" height="55" width="60"></li>
</ul>
<p class="copyright"> Copyright © Janko 2022</p>
</footer>
</section>
</body>
</html>
I want to move to the text area to align with other fields and then move all these fields to the down of the text "Feel free...." I was trying to use marigin-left, marigin-top, but nothing works. All the time these fields stay in one place. Do not know why.
It has to work on ip 6/7/8 plus resolution.
Could you tell me how can I achieve it?
* {
margin: 0;
padding: 0;
}
header {
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
height: 1080px;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img {
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav {
float: right;
color: #000000;
margin-top: 40px;
margin-right: 0px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo {
margin-top: 10px;
float: left;
}
#tekst {
position: absolute;
}
#sign a {
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#profilesign {
margin-top: 400px;
margin-left: 250px;
font: Bold 40px/40px Georgia;
letter-spacing: 0;
color: black;
}
.left {
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 150px 150px;
}
img.left {
padding: 0px 40px 20px 40px;
width: 250px;
height: 250px;
margin-left: 400px;
margin-top: 500px;
}
article input {
width: 300px;
height: 40px;
background: white;
border-radius: 4px;
text-decoration: none;
text-align: center;
font: Bold 25px/12px Arial;
border-radius: 120;
border-style: none;
padding: 6px;
margin-left: 1000px;
margin-top: 500px;
}
article #textSign {
font-size: 50px;
color: black;
text-align: center;
}
#centerText {
text-align: center;
}
#something {
width: 700px;
height: 300px;
text-align: justify;
margin-left: 1000px;
font-size: 30px;
font-weight: bold;
}
#media only screen and (max-device-width: 500px) {
#profilesign {
width: 1000px;
margin-top: 750px;
margin-left: 400px;
font: Bold 60px/40px Georgia;
letter-spacing: 0;
color: black;
}
img.left {
padding: 0px 40px 20px 40px;
width: 550px;
height: 550px;
margin-left: 550px;
margin-top: 450px;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background-color: black;
color: white;
text-align: center;
}
footer img {
margin-top: 5px;
height: 50px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
#sign a {
background-color: #DCDFDE;
padding: 20px 15px 17px 1px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
#logo img {
margin-left: 550px;
text-align: center;
width: 650px;
}
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
background-size: 100% 3000px;
width: auto;
}
.row {
width: 2500px;
display: grid;
grid-template-columns: 0% 80%;
}
.main-nav {
margin-left: 100px;
margin-top: 250px;
float: left;
display: inline-flex;
list-style: none;
}
.main-nav li a {
border-right: 3px solid black;
color: #000000;
text-decoration: none;
font: Bold 58px/45px Arial;
}
#something {
width: 700px;
height: 300px;
text-align: justify;
margin-top: 200px;
font-size: 30px;
font-weight: bold;
}
article input {
width: 400px;
height: 70px;
background: white;
border-radius: 4px;
text-decoration: none;
text-align: center;
font: Bold 45px/12px Arial;
border-radius: 120;
border-style: none;
padding: 6px;
margin-left: 700px;
}
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="css-images/style-contact.css">
</head>
<body>
<header>
<div class="row">
<ul id="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">PROFILE</li>
<li style="padding-left:10px">MAP</li>
<li style="padding-left:10px">YOUR FRIENDS</li>
<li style="padding-left:10px">MAILBOX</li>
<li style="padding-left:10px" id="sign">LOG OUT</li>
</ul>
</div>
<section>
<article>
<p id="profilesign">Feel free to send us a question.</p>
<img class="left" src="css-images/mial.jpg" style='position:absolute;left:0px; top:0px;' />
<div id="lala">
<p id="centerText">
<label><input type="email" name="email" placeholder="Email" style='margin-top:250px;position:absolute;left:0px; top:0px;' ></label><br/>
<label><input type="name" name="name" placeholder="Name" style="margin-top: 350px; position:absolute;left:0px; top:0px;"></label><br>
<label><input type="subject" name="subject" placeholder='Subject:' style="margin-top: 450px; position:absolute;left:0px; top:0px;"></label><br></p>
<textarea placeholder='Type something' id="something" style="margin-top: 550px; position:absolute;left:0px; top:0px;"></textarea>
</div>
<label id="submit"><input type="submit" name="send" value="Send" style="margin-top: 900px;position:absolute;left:0px; top:0px; background: #2699FB 0% 0% no-repeat padding-box;"></label>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>
</body>
</html>
I build simple template web from scratch. I use css minheight on div-content but it's not working in Internet Explorer version 11 (but other browser is fine.) and footer is too low. How should I do to make it work correctly with IE browser?
screenshots:
IE: https://s21.postimg.org/p31mpj4zb/11111.png
Chrome: https://s18.postimg.org/mjdo260ft/22222.png
html,
body {
margin: 0px;
padding: 0px;
}
body {
background: #cceeff;
font-family: "verdana";
}
#wrapper {
margin: auto;
padding: 0px;
width: 75%;
}
.toptext {
margin-top: 1vh;
margin-bottom: 1vh;
}
.toptext span a {
padding: 3px;
color: #000;
text-decoration: none;
background: lightblue;
}
#header {
margin: 0px;
padding: 0px;
width: 100%;
height: 18vh;
float: left;
background: #99d6ff;
}
#header h1 {
margin: 0px;
padding: 0px;
/*border-bottom:1px solid #eee;*/
font-size: 20px;
padding-bottom: 10px;
}
#nav {
margin: 0px;
padding: 0px;
width: 100%;
float: left;
background: #80ffe5;
}
#nav ol {
list-style: none;
margin: 0px;
padding: 0px;
}
#nav ol li {
display: block;
padding: 6px 10px;
float: left;
position: relative;
}
#nav ol a {
display: block;
padding: 5px 10px;
color: #000;
text-decoration: none;
}
#nav ol a:hover {
background: #f2f2f2;
}
#nav ol ol {
position: absolute;
top: 35px;
left: 0px;
display: none;
background: #80ffe5;
}
#nav ol ol li {
border-bottom: 1px;
}
#content {
float: left;
margin-top: 2vh;
padding: 0px;
width: 100%;
display: flex;
min-height: 70vh;
word-break: break-all;
}
#right-side {
float: left;
margin-left: 2vh;
width: 30%;
border: solid 1px grey;
background: white;
}
#right-side ol {
list-style: none;
}
#left-side {
float: left;
width: 70%;
border: solid 1px grey;
background: white;
}
#footer {
float: left;
margin-top: 2vh;
padding: 2vh;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #99d6ff;
}
.searchbox {
background: #9999ff;
margin: 10px;
margin-top: 20px;
padding: 5px;
border-radius: 5px;
}
.search-bar {
height: 29px;
background-color: #e1e1e1;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
width: 230;
position: relative;
}
.search-bar .searchbutton {
position: absolute;
top: 23%;
right: 5px;
}
.sfield {
float: left;
margin: 5px 0 0 8px;
font: 8pt Verdana;
color: #888;
height: 20px;
line-height: 18px;
padding: 0;
background: transparent;
border: 0;
max-width: 100%px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><p>Header</p></h1>
</div>
<div id="nav">
<ol>
<li>Home
</li>
<li>About us
<ol>
<li>ประวัติ
</li>
<li>xxxxx
</li>
<li>xxxxxx
</li>
</ol>
</li>
<li>Product
<ol>
<li>xxxxx
</li>
<li>xxxxx
</li>
<li>xxxxxx
</li>
</ol>
</li>
<li>Contact us
</li>
</ol>
</div>
<div id="content">
<div id="left-side">
aaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div id="right-side">
<div class="searchbox">
<?php echo form_open( 'search');?>
<h4 style="text-align:center;"> ค้นหาสินค้า </h4>
<div class="search-bar">
<input type="text" size="20" class="sfield" name="searchterm" value="Search...">
<input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
</div>
<?php echo form_close();?>
</div>
</div>
<div class="fa fa-search"></div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
Use modified css
html,
body {
margin: 0px;
padding: 0px;
}
body {
background: #cceeff;
font-family: "verdana";
}
*{overflow:auto;}
#wrapper {
margin: auto;
padding: 0px;
width: 75%;
}
.toptext {
margin-top: 1vh;
margin-bottom: 1vh;
}
.toptext span a {
padding: 3px;
color: #000;
text-decoration: none;
background: lightblue;
}
#header {
margin: 0px;
padding: 0px;
width: 100%;
height: 18vh;
float: left;
background: #99d6ff;
}
#header h1 {
margin: 0px;
padding: 0px;
/*border-bottom:1px solid #eee;*/
font-size: 20px;
padding-bottom: 10px;
}
#nav {
margin: 0px;
padding: 0px;
height: 4vh;
width: 100%;
float: left;
background: #80ffe5;
}
#nav ol {
list-style: none;
margin: 0px;
padding: 0px;
}
#nav ol li {
display: block;
padding: 6px 10px;
float: left;
position: relative;
}
#nav ol a {
display: block;
padding: 5px 10px;
color: #000;
text-decoration: none;
}
#nav ol a:hover {
background: #f2f2f2;
}
#nav ol ol {
position: absolute;
top: 35px;
left: 0px;
display: none;
background: #80ffe5;
}
#nav ol ol li {
border-bottom: 1px;
}
#content {
float: left;
margin-top: 2vh;
padding: 0px;
width: 100%;
display: flex;
height: 65vh;
word-break: break-all;
}
#right-side {
float: left;
margin-left: 2vh;
width: 30%;
border: solid 1px grey;
background: white;
}
#right-side ol {
list-style: none;
}
#left-side {
float: left;
width: 70%;
border: solid 1px grey;
background: white;
}
#footer {
float: left;
margin-top: 2vh;
padding: 2vh;
height: 9vh;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #99d6ff;
}
.searchbox {
background: #9999ff;
margin: 10px;
margin-top: 20px;
padding: 5px;
border-radius: 5px;
}
.search-bar {
height: 29px;
background-color: #e1e1e1;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
width: 230;
position: relative;
}
.search-bar .searchbutton {
position: absolute;
top: 23%;
right: 5px;
}
.sfield {
float: left;
margin: 5px 0 0 8px;
font: 8pt Verdana;
color: #888;
height: 20px;
line-height: 18px;
padding: 0;
background: transparent;
border: 0;
max-width: 100%px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><p>Header</p></h1>
</div>
<div id="nav">
<ol>
<li>Home
</li>
<li>About us
<ol>
<li>???????
</li>
<li>xxxxx
</li>
<li>xxxxxx
</li>
</ol>
</li>
<li>Product
<ol>
<li>xxxxx
</li>
<li>xxxxx
</li>
<li>xxxxxx
</li>
</ol>
</li>
<li>Contact us
</li>
</ol>
</div>
<div id="content">
<div id="left-side">
aaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div id="right-side">
<div class="searchbox">
<?php echo form_open( 'search');?>
<h4 style="text-align:center;"> ??????????? </h4>
<div class="search-bar">
<input type="text" size="20" class="sfield" name="searchterm" value="Search...">
<input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search">
</div>
<?php echo form_close();?>
</div>
</div>
<div class="fa fa-search"></div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm working on my website and the heading (h1) text is taking up two lines, which it has space for but shouldn't as it has plenty of space to just take up one line. I want it to only span one line, and I'm wondering why it isn't doing that? Thanks!
The text I'm taking about is the <h1>, id="welcome", content Welcome to my website!.
P.S. if your going to run the code snippet make sure to do it full screen to see the effect.
Here's my Code:
li {
display: inline-block;
}
ul {
float: right;
margin: 0px;
padding: 0px;
position: relative;
top: -45px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
margin: 3px;
margin-top: 0px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
float: right;
}
#logo {
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background: red;
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
border: 1px solid #999;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 10px;
margin-top: 20px;
margin-bottom: 130px;
padding: 0px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h1 id="welcome">Welcome to my Website!</h1>
<p id="space_filler"></p>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
It's being caused by the floats on your search-box and on your ul menu. If you're going to use floats you should clear them, although in general, floating things just causes more problems than it fixes.
Add a clear-fix for your header:
header::after {
clear: both;
content: '';
display: table;
}
CodePen
Try using "display: inline-block;" at the end of your 'welcome' CSS.
#welcome {
border: 1px solid #999;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 10px;
margin-top: 20px;
margin-bottom: 130px;
padding: 0px;
display: inline-block;
}
You can use padding instead of margin.
here is the code
#welcome {
border: 1px solid #999;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
Below code after padding are css3 that helps in cross browser compatibility
Is there a way to have a responsive container, so all items inside of that container are in the middle of the page, no matter what screen dimension?
Thanks :)
Images are obviously missing, but here's the code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sharpturn Network</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:500' rel='stylesheet' type='text/css'>
<meta content="width=device-width; initial-scale=1; maximum-scale=1" name="viewport">
<link href="stylesheet.css" rel="stylesheet"><!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<img id="logo" src="img/upload.png">
<nav>
<ul>
<li><a class="active" href="index.html">HOME</a></li>
<li><a class="nav" href="#">UPLOAD</a></li>
<li><a class="nav" href="support.html">SUPPORT</a></li>
<li><a class="nav" href="#">FAQS</a> </li>
</ul>
</nav>
</header><img class="banner" src="img/banner.jpg">
<h1 class="title">SIMPLE AS 1, 2, 3!</h1>
<div class="steps">
<img src="img/form.png">
<h2 class="subtitle">Complete our form</h2>
<p>A form diversly designed to take you upto no more than 5 minutes to complete and submit.</p>
</div>
<div class="steps">
<img src="img/wait.png">
<h2 class="subtitle">Patience is a virtue</h2>
<p>Allow upto 72 hours for an submission review and response from our team.</p>
</div>
<div class="steps">
<img src="img/uploaded.png">
<h2 class="subtitle">Viola! All done.</h2>
<p>Your talent is now being promoted and showcased world wide.</p>
</div>
<img class="banner" src="img/grande.jpg">
</body>
</html>
CSS
/*MAIN*/
body {
line-height: 1.25em;
font-family: 'Roboto',sans-serif;
background: url(img/banner.png);
background-size: cover;
/* For flexibility */
color: #505050;
margin: 0;
padding: 0;
}
header {
background: #505050;
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid #fff;
z-index: 100;
padding-bottom: 10px;
margin-bottom: 5px;
}
#logo {
margin-top: 20px;
margin-left: 60px;
float: left;
width: 80px;
height: 60px;
display: block;
padding-bottom: 25px;
}
nav {
float: right;
padding: 20px;
color: #fff;
}
nav .active {
font-size: 20px;
color: #cc293f;
}
nav a {
margin-right: 20px;
font-size: 20px;
color: #fff;
text-decoration: none;
}
#menu-icon {
width: 40px;
height: 40px;
background: #fff url(img/menu-icon.png) center;
}
a:hover {
color: #cc293f;
}
a:hover#menu-icon {
background-color: #fff;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
color: #fff;
display: inline-block;
float: left;
}
.banner {
width: 100%;
height: 300px;
border-bottom: 1px solid #000;
}
.supportbox1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox1 p {
padding-left: 8px;
padding-right: 8px;
}
.supportbox1 img {
padding-left: 41%;
padding-top: 50px;
}
.supportbox2 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox2 p {
padding-left: 8px;
padding-right: 8px;
}
.supportbox2 img {
padding-left: 41%;
padding-top: 40px;
}
.supportbox3 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox3 p {
padding-left: 5px;
padding-right: 5px;
}
.supportbox3 img {
padding-left: 41%;
padding-top: 50px;
}
.supportbox3 a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #505050;
border: 3px solid #505050;
color: #cc293f;
font-size: 20px;
margin: 90px 0 55px;
padding: 5px 10px;
position: absolute;
text-decoration: none;
}
.imgicon {
margin-left: -117px;
max-height: 80px;
max-width: 80px;
min-height: 80px;
min-width: 80px;
}
h1.title {
text-align: center;
font-size: 30px;
color: #cc293f;
margin-top: 25px;
margin-bottom: 45px;
}
h1.sub {
font-size: 24px;
color: #cc293f;
text-align: center;
padding-bottom: 50px;
}
h2.subtitle {
color: #cc293f;
text-align: center;
padding-top: -5px;
}
p {
font-family: 'Roboto',sans-serif;
margin-bottom: 20px;
}
.steps {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
float: left;
margin: 0 100px 10px -5px;
max-height: 3500px;
max-width: 300px;
min-height: 350px;
min-width: 300px;
}
.steps p {
font-size: 19px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
.steps img {
display: block;
margin-left: auto;
margin-right: auto;
}
/****Responsive ****/
#media only screen and (max-width:640px) {
header {
position: absolute;
}
.banner {
width: 100% !important;
height: 300px;
border-bottom: 1px solid #000;
}
#menu-icon {
display: inline-block;
}
nav ul,nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: #505050;
border: 5px solid #fff;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
font-color: #fff;
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
background-color: #505050;
display: block;
}
nav ul {
background: #505050;
}
Set the container property
text-align:center;
and in the element inside the container ( like a paragraph or img) specify
display:inline-block