I am new to Html and css but I am stuck with a buggy problem. I created my first responsive website but when i scale it down to small sizes and scroll to the right there are 40-50 px of empty space with only the background . I must add that when I scale it up the empty part disappears. Some help?
html {
width: 100%;
display: inline-block;
margin: 0px;
}
body {
margin: auto;
font-family: Arial;
background-image: url("weed.png");
margin-left: 0px;
margin-right: 0px;
}
/*Weedmania Logo*/
#weedmania_shade{
z-index: -1;
height: 255px;
width: 100%;
margin-left: 0px;
margin-top: 0px;
background-color: rgba(0,0,0,0.7);
}
#weedmania_logo_img {
margin-right: -120px;
margin-top: -405px;
height: 370px;
width: 90%;
min-width: 350px;
max-width: 800px;
}
/*Site Banner*/
#site_panel {
float: left;
background-image: url(weeds.jpg);
font-family: "Gigi Regular";
width: 98%;
color: green ;
border: 4px solid black;
padding: 5px;
margin-left: 6px;
margin-top: -175px;
}
#site_panel p {
font-style: italic;
text-shadow: 1px 2px black;
}
#site_panel h1 {
text-shadow: 1px 3px black;
}
/*Menu*/
nav {
float: left;
width: 10%;
max-width: 200px;
min-width: 100px;
height: 100px;
margin-top: 0px;
margin-left: 6px;
}
nav ul{
padding: 0;
background-color: green;
border: 2px solid black;
}
nav ul li {
list-style: none;
border : 1px solid lime;
padding : 5px;
}
nav ul li a{
color: lime;
list-style: none;
text-decoration: none;
font-family: "Arial";
font-style: italic;
}
nav ul li a:hover{
color : #ccffb3;
text-decoration: underline;
}
/*Leaves And Joint*/
#joint_figure #joint_img{
float: center;
border: 3px solid black;
margin-top: 0px;
width: 50%;
min-width: 157px;
}
#leaf_img_left{
float: left;
max-width: 300px;
width: 25%;
height: 30%;
margin-left: -30px;
margin-top: 10px;
}
#leaf_img_right{
float: right;
max-width: 300px;
width: 25%;
height: 30%;
margin-right: -30px;
margin-top: 10px;
}
#description{
width: 50%;
height: 10%;
min-width: 300px;
font-size: 110%;
background-color: rgba(0,0,0,0.75);
}
#description_text{
color: rgba(255,255,255,0.5);
font-family: "Comic Sans MS";
padding-top: 2px;
text-align: center;
font-size: 83%;
}
<!DOCTYPE html>
<html>
<head>
<title> WeedMania - Weed's biggest community </title>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" contnet="initial-scale=1.0">
</head>
<body>
<div><nav>
<ul>
<li>
Index
</li>
<li>
Good Trip
</li>
<li>
Buy Weed
</li>
</ul>
</nav></div>
<article><center><figure id="weedmania_shade"></figure></center></article>
<div><figure id="weedmania_logo"><center><img src="weedmania_logo.png" id="weedmania_logo_img" alt=""></center></figure></div>
<div><figure id="stop"></figure></div>
<div><article id="site_start">
<header id="site_panel">
<h1> Smoke Weed Everyday </h1>
<p> Posted by <strong>WeedMania</strong> </p>
</header>
<div><figure class="leaves">
<img id="leaf_img_left" src="leaf.png" alt="">
</figure></div>
<div><figure class="leaves">
<img id="leaf_img_right" src="leaf.png" alt="">
</figure></div>
</article></div>
<div><center><figure id="joint_figure">
<img id="joint_img" src="joint1.jpg" alt="">
</figure></center></div>
<center><article id="description">
<p id="description_text">This forum is designed to bring you the latest news about weed worldwide, informations about weed strains, smoking stories and , basically everything you need to know about weed. Feel free the create an account and join the community</p>
</article></center>
</body>
</html>
If you don't want space to the right side. you need to remove 'min-width' or width with padding. Please see below example. you cannot have any spaces.
html {
width: 100%;
display: inline-block;
margin: 0px;
}
body {
margin: auto;
font-family: Arial;
background-image: url("weed.png");
margin-left: 0px;
margin-right: 0px;
}
/*Weedmania Logo*/
#weedmania_shade{
z-index: -1;
height: 255px;
width: 100%;
margin-left: 0px;
margin-top: 0px;
background-color: rgba(0,0,0,0.7);
}
#weedmania_logo_img {
//margin-right: -120px;
margin-top: -405px;
height: 370px;
width: 90%;
//min-width: 350px;
max-width: 800px;
}
/*Site Banner*/
#site_panel {
float: left;
background-image: url(weeds.jpg);
font-family: "Gigi Regular";
//width: 98%;
color: green ;
border: 4px solid black;
padding: 5px;
margin-left: 6px;
margin-top: -175px;
}
#site_panel p {
font-style: italic;
text-shadow: 1px 2px black;
}
#site_panel h1 {
text-shadow: 1px 3px black;
}
/*Menu*/
nav {
float: left;
width: 10%;
max-width: 200px;
min-width: 100px;
height: 100px;
margin-top: 0px;
margin-left: 6px;
}
nav ul{
padding: 0;
background-color: green;
border: 2px solid black;
}
nav ul li {
list-style: none;
border : 1px solid lime;
padding : 5px;
}
nav ul li a{
color: lime;
list-style: none;
text-decoration: none;
font-family: "Arial";
font-style: italic;
}
nav ul li a:hover{
color : #ccffb3;
text-decoration: underline;
}
/*Leaves And Joint*/
#joint_figure #joint_img{
float: center;
border: 3px solid black;
margin-top: 0px;
width: 50%;
//min-width: 157px;
}
#leaf_img_left{
float: left;
max-width: 300px;
width: 25%;
height: 30%;
margin-left: -30px;
margin-top: 10px;
}
#leaf_img_right{
float: right;
max-width: 300px;
width: 25%;
height: 30%;
margin-right: -30px;
margin-top: 10px;
}
#description{
//width: 50%;
height: 10%;
//min-width: 300px;
font-size: 110%;
background-color: rgba(0,0,0,0.75);
}
#description_text{
color: rgba(255,255,255,0.5);
font-family: "Comic Sans MS";
padding-top: 2px;
text-align: center;
font-size: 83%;
}
<!DOCTYPE html>
<html>
<head>
<title> WeedMania - Weed's biggest community </title>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div><nav>
<ul>
<li>
Index
</li>
<li>
Good Trip
</li>
<li>
Buy Weed
</li>
</ul>
</nav></div>
<article><center><figure id="weedmania_shade"></figure></center></article>
<div><figure id="weedmania_logo"><center><img src="weedmania_logo.png" id="weedmania_logo_img" alt=""></center></figure></div>
<div><figure id="stop"></figure></div>
<div><article id="site_start">
<header id="site_panel">
<h1> Smoke Weed Everyday </h1>
<p> Posted by <strong>WeedMania</strong> </p>
</header>
<div><figure class="leaves">
<img id="leaf_img_left" src="leaf.png" alt="">
</figure></div>
<div><figure class="leaves">
<img id="leaf_img_right" src="leaf.png" alt="">
</figure></div>
</article></div>
<div><center><figure id="joint_figure">
<img id="joint_img" src="joint1.jpg" alt="">
</figure></center></div>
<center><article id="description">
<p id="description_text">This forum is designed to bring you the latest news about weed worldwide, informations about weed strains, smoking stories and , basically everything you need to know about weed. Feel free the create an account and join the community</p>
</article></center>
</body>
</html>
Related
i'm making a website and i have encountered several errors in the code. any help would be appreciated, thanks in advance.
the errors are:
i want the body of the website to be in the centre of the screen, not at the top
i want to add two columns in the main box, but the columns aren't showing. i did add code to fix this table problem but i don't think it's working
here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LAINWEB</title>
<meta name="keywords" content="Neocities, HTML, aesthetic, web 1.0, old web, 90's, 80's, early 2000's,personal website,">
<style>
#font-face {
font-family: hearts;
src: url('https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf') format('truetype');
}
#font-face {
src: url(https://dl.dropbox.com/s/7bidj4o8lc71b8u/Hantam.ttf);
font-family: hantam;
}
html {
font-size: 17px;
line-height: 14px;
font-family: "hearts";
padding: 5px;
cursor: url("/images/cursors/torocursor.png"), auto;
scrollbar-color: #f48ee6 #fad1e8;
}
body {
margin-left: auto;
margin-right: auto;
background-image: url("https://lifted.crd.co/assets/images/gallery01/a307cfec.png?v=a0ae4590");
}
a {
text-decoration: none;
color: #ef8a85;
}
a:hover {
cursor: url("/images/cursors/torocursorpoint.png"), auto;
color: #00b2c5;
}
hr {
border-top: solid 1px;
border-color: #b6a898;
}
p {
margin: 10px;
}
h1 {
font-family: hantam;
font-size: 30px;
color: #F9A1CC;
line-height: 18px;
margin: 0px;
font-weight: normal;
text-align: center;
}
.table1 {
margin-left: auto;
margin-right: auto;
display: block;
border-spacing: 0px;
border-collapse: collapse;
width: 812px;
}
.table1 td {
vertical-align: top;
border: none;
padding: 0px;
position: relative;
}
.table1 tr {
vertical-align: top;
border: none;
padding: 0px;
position: relative;
}
.headbox {
margin-left: auto;
margin-right: auto;
margin-top: 0px;
border-radius: 4px;
height: 80px;
width: 800px;
position: relative;
padding: 10px;
}
.footbox {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 900px;
padding: 0px;
height: 100px;
text-align: center;
}
.titleimg {
margin-left: auto;
margin-right: auto;
display: block;
position: absolute;
bottom: -20px;
left: -15px;
z-index: 10;
}
.bar1 {
background-color: #FFFFFF;
border: 3px double #B1B1B1;
border-radius: 4px;
padding: 5px;
padding-bottom:50px;
width: 170px;
min-height: 100px;
margin-top: 7px;
position: relative;
}
.mainbox {
background-color: #FFFFFF;
border: 3px double #B1B1B1;
border-radius: 4px;
padding: 20px;
width: 570px;
height: 400px;
margin-left: 4px;
margin-top: 7px;
position: relative;
.column {
float: left;
width: 37%;
padding: 10px;
.row:after {
content: "";
display: table;
clear: both;
}
}
li {
list-style: none;
margin-bottom: 5px;
}
.hder {
margin-left: -5px;
border-top: 1px solid #b6a898;
padding: 2px;
list-style: none;
width: 176px;
font-family: "MS UI Gothic", Tahoma;
font-weight: bold;
margin-bottom: 5px;
color: white;
}
</style>
</head>
<body>
<table class="table1">
<tr>
<td>
<div class="bar1">
<li>about
</li>
<li>reading diary
</li>
<li>music
</li>
</li>
</ul>
</div>
</td>
<td>
<div class="mainbox">
<div class="row">
<div class="column">
</div>
<img src="https://barbara.crd.co/assets/images/gallery34/c3f48eed_original.gif?v=078d66a6">
<div class="column">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
</div>
</td>
</tr>
</table>
<div class="footbox">
</div>
</body>
</html>
Try this for 1:
Add this to your body style:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Remove margin (optional)
I have been trying to solve this issue but for some reason my code is wrong and I am a beginner, I am trying to get those in place, but it isn't responsive, and they get distorted. I am seeking some help to solve this.
please do look at the link(https://i.stack.imgur.com/ZO5F2.jpg) above.
Thank you!!
#import url('https://fonts.googleapis.com/css2?family=Alice&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Alice&family=NTR&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #F4F4F4;
}
navup{
justify-content: space-around;
align-items: center;
display: flex;
min-height: 62px;
background-color: #000000;
color: white;
}
navup h1{
/*padding-left: 40rem;*/
font-family: 'alice', serif;
font-size: 36px;
font-weight: normal;
font-style: italic;
}
navup li{
list-style: none;
}
navup ul li{
display: flex;
}
navup li a{
/*padding-right: -10rem;*/
display: flex;
color: white;
text-decoration: none;
font-family: 'NTR', sans-serif;
font-size: 20px;
}
navup img{
/*margin-right: 200px;*/
}
navlo{
width: 100%;
justify-content: space-evenly;
align-items: center;
display: flex;
max-height: 60px;
margin: auto;
background-image: linear-gradient(#FFFFFF,#898989);
border-radius: 0px 0px 0px 9px;
}
navlo img{
width: 61px;
height: 61px;
margin-top: 2.95px;
}
navlo ul{
display: flex;
}
navlo ul li{
list-style: none;
display: flex;
padding: 0rem 1.5rem;
}
navlo li a{
color: #000000;
text-decoration: none;
font-family: 'NTR', sans-serif;
font-size: 20px;
font-weight: bold;
}
.barone img{
position: absolute;
width: 89px;
height: 10px;
left: 906px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.bartwo img{
position: absolute;
width: 102px;
height: 10px;
left: 1025px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barthree img{
position: absolute;
width: 109px;
height: 10px;
left: 1157px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barfour img{
/* Services bar */
position: absolute;
width: 89px;
height: 10px;
left: 1296px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barfive img{
/* Partners Bar */
position: absolute;
width: 101px;
height: 10px;
left: 1415px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barsix img{
position: absolute;
width: 111px;
height: 11px;
left: 1546px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.bars img{
display: inline;
/*width: 50%;*/
margin-top: 70px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="">
<link rel="stylesheet" href="style.css">
<title>Art</title>
<style>
/* width */
::-webkit-scrollbar {
background-color: grey;
width: 13px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: black;
}
</style>
</head>
<body>
<SECTION>
<navup>
<div class="logo">
<h1>Art</h1>
</div>
<!-- <ul>
<li>
Login/Signup
</li>
<li>
<img src="../images/account.png">
</li>
</ul> -->
</navup>
</SECTION>
<section>
<navlo>
<ul>
<li>
HOME
</li>
<li>
ABOUT ME
</li>
<li>
BUY ART
</li>
<li>
BLOG
</li>
<li>
PARTNERED
</li>
<li>
CONTACT ME
</li>
</ul>
</navlo>
<section class="bars">
<div class="barone"><img src="../images/homebar.svg" alt="a lower bar for home"></div>
<div class="bartwo"><img src="../images/aboutmebar.svg" alt="a lower bar for home"></div>
<div class="barthree"><img src="../images/buyartbar.svg" alt="a lower bar for home"></div>
<div class="barfour"><img src="../images/blogbar.svg" alt="a lower bar for home"></div>
<div class="barfive"><img src="../images/partnersbar.svg" alt="a lower bar for home"></div>
<div class="barsix"><img src="../images/contactmebar.svg" alt="a lower bar for home"></div>
</section>
</section>
</body>
</html>
Rajayogi Nandina
I want the site to have three different formats depending on the width of the browser window. Two of my media queries display correctly. The third one however, does not. For some reason, the images inside the divs increase in height a lot and push all of the text out of the div. The only thing that should change about the images is the width. It's weird because the width and margins of the divs display fine so I know the media query is doing something. It's just that the content inside the divs isn't displaying correctly. This all happens when the browser is above 1000px in width.
<!DOCTYPE>
<html>
<link rel="stylesheet" href="index.css">
<head>
<title>Resi</title>
</head>
<body>
<div id="nav">
<ul>
<strong><li style="font-size:26">RESI</li></strong>
<li>Rent</li>
<li>List Apartment</li>
<li>Contact</li>
<li>Help</li>
<li>Account</li>
<div id="logindiv">
<li id="signup">Sign In</li>
</div>
</ul>
</div>
<img src="http://www.ojc.edu/futurestudents/housingandfood/images/D13_Wunsch01.jpg" alt="college dorm" width = 960px height=470px>
<div id="search">
<h6 style="color:white" id="searchheader">Resi. Your alternative to dorming.</h6>
<input class="search-bar" type="text" name="search" placeholder="Search For Your School, Neighborhood, or City..."> <input type="button" value="Search">
</div>
<div class="reasons_1">
<img class="pics" src="http://scottsdalefurnishedapartment.com/wp-content/uploads/2013/10/specialedition.jpg">
<h3>Get more out of your dorm</h3>
<p>fdsg zfdga gzszv bzsgfA fdzsbgf zgszza gazff</p>
<p class="learn">Learn more ▶</p>
</div>
<div class="reasons_1">
<img class="pics" src="https://g.foolcdn.com/editorial/images/130138/college_large.jpg" >
<h3>Save money</h3>
<p>szhg sfzv hsgfhazf ghfghx fghx dxhfd fgsz gxsg zsfgsz</p>
<p class="learn">Learn more ▶</p>
</div>
<div class= "reasons_1">
<img class="pics" src="http://hgtvhome.sndimg.com/content/dam/images/hgtv/fullset/2012/7/16/1/CI-Dormify_dorm-room-teens-talking-on-sofa_s4x3.jpg.rend.hgtvcom.231.174.jpeg">
<h3>Freedom without the worry</h3>
<p>szfgzgzdf fg sdfgd gfgfgz g fzsg gfg zgfg zz df hj hj </p>
<p class="learn">Learn more ▶</p>
</div>
<div id="footer">
<h2>Terms and conditions</h2>
</div>
</body>
So that's the html and here's the css
body {
width:100%;
margin: 0 auto;
background-color:#f7f7f7;
min-width: 636px;
}
div{
margin: 5px auto;
}
h1{
margin: 0px;
line-height: 70px;
}
#nav{
background-color: #00AAA0;
margin: 0 auto;
width: 100%;
height: 40;
}
li{
float: left;
font-family: sans-serif;
font-size: 16px;
padding: 0px 15px;
display: inline;
line-height: 40px;
height: 40px;
color: white;
}
ul{
margin: 0px;
margin-left: -50px
}
#signup{
float:right;
color: black;
height: 30px;
line-height: 30px;
}
#logindiv,#logindiv:hover{
float:right;
background-color:white;
margin: 5px 15px;
height: 30px;
width: 80px;
cursor: pointer;
}
img{
margin: 0px;
width: 100%;
height:
}
#search{
margin: 0 auto;
width: 600px;
height: 80px;
position: relative;
left: 0px;
bottom: 130px;
margin-bottom: -85px;
}
#search input[type=text]{
border:1px solid #d0d0d0;
background-color:#fcfcfc;
margin-left: 5px;
}
input[type=button], input[type=button]:hover {
position:relative;
left:-6px;
bottom: 1px;
background-color:#FF7A5A;
color:white;
cursor: pointer;
height: 30px;
border: hidden;
width: 90px;
font-size: 16px;
margin-top: 5px;
}
.search-bar{
margin: 5px auto;
width: 500px;
height: 30px;
font-size: 16px;
}
#searchheader{
font-size: 30px;
}
h2,h6{
margin: 5px auto;
width:500px;
text-align: center;
font-family: sans-serif;
}
.reasons_1{
float: left;
background-color:white;
margin: 15px;
width: 31%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
#media only screen and (max-width: 1500px) and (min-width: 1000px) {
.reasons_1 {
float: left;
background-color:white;
margin-top: 15px;
margin-left: 2%;
width: 29%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
}
#media only screen and (max-width: 1000px) {
.reasons_1 {
float: left;
background-color:white;
margin-left: 5%;
width: 40%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
#media only screen and (max-width: 700px) {
.reasons_1 {
float: left;
background-color:white;
margin-top: 15px;
margin-left: 14%;
margin-right: 14%;
width: 70%;
min-width: 286px;
height: 350px;
font-size: 19px;
text-align: center;
border: 1px solid #f7f7f7;
box-shadow: 0px 0px 3px 0px;
position: relative;
}
}
.pics{
height:190px;
width:100%;
}
h3{
font-family: sans-serif;
font-size: 21px;
font-weight: 400;
line-height: 1.2;
}
p{
font-size: 16px;
line-height: 1.5;
font-family: Circular, Helvetica, Arial, sans-serif;
font-weight: 300;
margin-left: 10px;
margin-right: 10px;
}
#footer{
height: 250px;
background-color: #00AAA0;
color: white;
clear: both;
width: 100%
}
.learn{
position: absolute;
left: 165px;
top: 300px;
}
a{
color: #FF7A5A;
}
Also, this is my first site so any advice on how to make it look better would be appreciated.
This might be because of width you are giving to class reasons_1
Your doctype at the top can't just say doctype
Use
under
you need to close the html
Look here for the DOCTYPE and ending HTML code
use these sites these sites to validate you code
edit: I can't post html code. :(
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
In order to practise CSS I've decided to create Google-like page. My problem is no matter what I do, there's always that little extra space on top and on bottom of body even though body has margins and padding of 0. HTML tag for some reason works well with the same styles.
HTML code:
<!doctype html>
<html>
<head>
<title>Google</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta charset="utf-8" />
</head>
<body>
<div id="pageWrapper">
<div id="topBar">
<ul>
<li>+Tomasz</li>
<li>Gmail</li>
<li>Grafika</li>
</ul>
</div> <!-- end of topBar -->
<div id="middleBar">
<div id="centerBox">
<img id="logoImage" alt="Google Logo" src="logo.png" width="269" height="95" />
<input type="text" size="80" />
<span id="countryName">Polska</span>
<div id="centerBoxButtons">
<div class="button">Szukaj w Google</div>
<div class="button">Szczęśliwy traf</div>
</div>
</div> <!-- end of centerBox -->
</div> <!-- end of middleBar -->
<div id="bottomBar">
</div> <!-- end of bottomBar -->
</div> <!-- end of pageWrapper -->
</body>
</html>
CSS code:
html {
background-color: #fff;
padding: 0px;
margin: 0px;
height: 100%;
}
body {
padding: 0px;
margin: 0px;
}
#pageWrapper {
font-family: Tahoma, Arial, sans-serif;
color: rgb(64,64,64);
font-size: 0.85em;
margin: 0px;
padding: 0px;
}
a:link, a:visited {
text-decoration: none;
color: rgb(64,64,64);
}
a:active, a:hover {
text-decoration: underline;
color: rgb(64,64,64);
}
#topBar {
width: 100%;
height: 60px;
background-color: yellow;
line-height: 60px;
text-align: right;
margin: 0px;
padding: 0px;
}
#topBar ul {
list-style-type: none;
}
#topBar ul li {
display: inline;
margin: 0px 10px 0px 0px;
}
#middleBar {
width: 100%;
/*border: solid 2px black; /*----------delete this later*/
}
#centerBox {
margin-top: 125px;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 200px;
/*border: solid 2px red; /*--------------delete later*/
}
#centerBox img {
width: 269px;
height: 95px;
margin: 0px 166px 0px 166px;
}
#centerBox input[type="text"] {
margin: 20px 0 0 0;
padding: 0;
height: 25px;
}
#countryName {
font-size: 1.2em;
font-weight: bold;
color: grey;
position: relative;
bottom: 75px;
left: 380px;
}
#centerBoxButtons {
width: 250px;
/*border: solid 2px blue; /*--------------delete later*/
margin-left: 175px;
}
.button {
font-weight: bold;
background-color: rgb(240,240,240);
border: solid 1px rgb(150,150,150);
padding: 6px;
font-size: 0.78em;
display: inline;
margin-left: 15px;
border-radius: 4px;
}
.button:active {
position: relative;
top: 1px;
left: 1px;
}
The anwser is simple. add margin:0px; to your #topBar ul. Here you have a working fiddle
This is a simple way you just put margin padding on top see the code.
*{
padding: 0px;
margin: 0px;
}
html {
background-color: #fff;
padding: 0px;
margin: 0px;
height: 100%;
}
body {
padding: 0px;
margin: 0px;
}
#pageWrapper {
font-family: Tahoma, Arial, sans-serif;
color: rgb(64,64,64);
font-size: 0.85em;
margin: 0px;
padding: 0px;
}
a:link, a:visited {
text-decoration: none;
color: rgb(64,64,64);
}
a:active, a:hover {
text-decoration: underline;
color: rgb(64,64,64);
}
#topBar {
width: 100%;
height: 60px;
background-color: yellow;
line-height: 60px;
text-align: right;
margin: 0px;
padding: 0px;
}
#topBar ul {
list-style-type: none;
}
#topBar ul li {
display: inline;
margin: 0px 10px 0px 0px;
}
#middleBar {
width: 100%;
/*border: solid 2px black; /*----------delete this later*/
}
#centerBox {
margin-top: 125px;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 200px;
/*border: solid 2px red; /*--------------delete later*/
}
#centerBox img {
width: 269px;
height: 95px;
margin: 0px 166px 0px 166px;
}
#centerBox input[type="text"] {
margin: 20px 0 0 0;
padding: 0;
height: 25px;
}
#countryName {
font-size: 1.2em;
font-weight: bold;
color: grey;
position: relative;
bottom: 75px;
left: 380px;
}
#centerBoxButtons {
width: 250px;
/*border: solid 2px blue; /*--------------delete later*/
margin-left: 175px;
}
.button {
font-weight: bold;
background-color: rgb(240,240,240);
border: solid 1px rgb(150,150,150);
padding: 6px;
font-size: 0.78em;
display: inline;
margin-left: 15px;
border-radius: 4px;
}
.button:active {
position: relative;
top: 1px;
left: 1px;
}
<!doctype html>
<html>
<head>
<title>Google</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta charset="utf-8" />
</head>
<body>
<div id="pageWrapper">
<div id="topBar">
<ul>
<li>+Tomasz</li>
<li>Gmail</li>
<li>Grafika</li>
</ul>
</div> <!-- end of topBar -->
<div id="middleBar">
<div id="centerBox">
<img id="logoImage" alt="Google Logo" src="logo.png" width="269" height="95" />
<input type="text" size="80" />
<span id="countryName">Polska</span>
<div id="centerBoxButtons">
<div class="button">Szukaj w Google</div>
<div class="button">Szczęśliwy traf</div>
</div>
</div> <!-- end of centerBox -->
</div> <!-- end of middleBar -->
<div id="bottomBar">
</div> <!-- end of bottomBar -->
</div> <!-- end of pageWrapper -->
</body>
</html>
What you see is the padding of the <ul> in the topbar. This happens because many HTML elements have their own default style. Also, these defaults are browser specific, which doesn't really help you if you want to create a layout that is pixel-precise against multiple browsers.
What I mostly to is simply reset all paddings and margins of all elements:
* {
margin: 0;
padding: 0;
}
Some will say that the above technique leads to heavier load of the rendering engine but I never had any issue by doing this. Anyway, you can find a lot of 'CSS reset' scripts that are more selective and are faster. Search other questions on SO tagged css-reset and also check this Q/A
Some popular CSS-reset sources:
http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
http://meyerweb.com/eric/tools/css/reset/
https://github.com/necolas/normalize.css/
http://html5doctor.com/html-5-reset-stylesheet/