I'm having a little trouble figuring out why I have about 10px of whitespace at the top of my html file. In CSS, I made the margin and padding 0 in "body" but it still is there. Any help? Thanks!
Update: So I found out that removing the !doctype html at the top removes the white space with google chrome browser but not with firefox. But from my research, you need the !doctype html to tell the browser that its html5 so I don't know where to go from here.
<!doctype html>
<html>
<head>
<title>Personal WebSite</title>
<style>
html body{
margin:0;
padding:0;
}
#topbar {
background-color:#0876BB;
width:100%;
height:40px;
color:#343436;
}
#derek{
float:left;
font-size: 1.3em;
padding-left:100px;
padding-top:5px;
font-weight:bold;
}
#Menu{
padding-right: 30px;
}
#Menu li{
float:right;
font-size: 1.3em;
font-weight: bold;
display:inline;
margin:5px 10px 0px 0px;
cursor:pointer;
}
li:hover{
color:red;
}
.break{
clear:both;
}
#title{
position:absolute;
}
img{
position:relative;
opacity:0.6;
height:100%;
width:100%;
}
</style>
<body>
<div id="topbar">
<div id="derek">Derek</div>
<div id="Menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="break"></div>
<div id="title">
<h1>Web Development</h1>
<img src="http://www.wallpapersdb.org/wallpapers/nature/calm_water_2048x1152.jpg" target="_blank">
</div>
</body>
</head>
</html>
The ul from your head, you need to add margin-top: 0; he is the cause of your top margin
The margin on your ul is causing the grief.
I've updated the css to remove the margin
To trouble shoot this, I just removed elements until I found the block of html that was causing the issue.
html body{
margin:0;
padding:0;
}
#topbar {
background-color:#0876BB;
width:100%;
height:40px;
color:#343436;
}
#derek{
float:left;
font-size: 1.3em;
padding-left:100px;
padding-top:5px;
font-weight:bold;
}
#Menu{
padding-right: 30px;
}
#Menu ul {
margin : 0;
}
#Menu li{
float:right;
font-size: 1.3em;
font-weight: bold;
display:inline;
margin:5px 10px 0px 0px;
cursor:pointer;
}
li:hover{
color:red;
}
.break{
clear:both;
}
#title{
position:absolute;
}
img{
position:relative;
opacity:0.6;
height:100%;
width:100%;
}
<!doctype html>
<html>
<head>
<title>Personal WebSite</title>
<body>
<div id="topbar">
<div id="derek">Derek</div>
<div id="Menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="break"></div>
<div id="title">
<h1>Web Development</h1>
<img src="http://www.wallpapersdb.org/wallpapers/nature/calm_water_2048x1152.jpg" target="_blank">
</div>
</body>
</head>
</html>
Related
I'm exercising about flexbox and I would create a simple layout. But I have some difficulties as can be seen from the code. I want split the content (the two sections in the code) in two parts: 30% and 70% but the flexbox instruction doesn't accomplish this. Why? How can I fix it?
Code on JSFiddle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flex Layout</title>
<style type="text/css">
body,html{
margin:0px;
padding:0px;
box-sizing:border-box;
}
.container{
display: flex;
flex-wrap: wrap;
}
.mainheader{
flex:100%;
padding:35px 0;
color:white;
text-align: center;
background-color: rgb(50,180,200);
}
nav{
background-color: black;
flex:100%;
}
ul.navbar{
list-style:none;
overflow: hidden;
margin:0;
padding:0;
}
ul.navbar > li{
float:left;
text-align:center;
}
ul.navbar a:hover{
color:black;
background-color:white;
}
.navbar a{
display:block;
text-decoration:none;
color:white;
padding:15px;
font-size:large;
}
.side{
flex:30%;
padding:10px;
border:thin solid black;
}
.content{
flex:70%;
}
</style>
</head>
<body>
<div class="container">
<header class="mainheader">
<h1>My Website</h1>
<p>With a flexible layout</p>
</header>
<nav>
<ul class="navbar">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
<section class="side">
<header>
<h1>About me</h1>
</header>
<h4>
Photo of me
</h4>
</section>
<section class="content">
Lorem ipsum
</section>
</div>
</body>
</html>
It was a very very stupid mistake concerning the margins-paddings-borders. These when the dimension is in percentage are addicted to width, thus the second part of the layout wraps. To prevent this you have to use :
box-sizing:border-box;
but I'm a knob and I put this property inside html,body tags instead than the "*" selector:
This is the fix:
*{
box-sizing:border-box;
}
I'm trying to put the earn and learn box directly on top of the boxes with links.
<DOCTYPE!html>
<html>
<link href='https://fonts.googleapis.com/css?family=Josefin+Sans|Fredoka+One' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="bootstraps.css">
<head>
<title>Bootstrap your life</title>
</head>
<body>
<div class="header">
<div class="container">
<h3>Pick yourself up by your</h3>
<h1>bootstraps</h1>
</div>
</div>
<div class="body">
<div class="container">
<ul class="menu">
<li class="earn">
<div class="button">
<h2>Earn</h2>
</div>
<div class="links">
Drive for Uber
Drive for Lyft
Freelance on freelance.com
Start a Shopify Store
Deliver for Postmates
</div>
</li>
<li class="learn">
<div class="button">
<h2>Learn</h2>
</div>
<div class="links">
Take a Coursera Course
Study on Khan Academy
Learn a skill on Skillshare
Get creative on Creative Live
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
body {
margin:0;
padding:0;
}
.header {
background-color:#663300;
height:35%;
font-family: 'Fredoka One', cursive;
margin:0;
}
.header h3 {
color:#009933;
text-transform:uppercase;
font-size:40px;
text-align:center;
padding-top:3.5%;
margin:0;
}
.header h1 {
color:#009933;
text-transform:uppercase;
font-size:90px;
text-align:center;
margin:0;
}
.body {
background-color:grey;
height:100%;
}
.body .container {
text-align:center;
}
.body li {
list-style:none;
}
.menu {
margin:0;
}
.menu>li {
display:inline-block;
}
.earn {
margin-right:5%;
}
.learn {
margin-left:5%;
}
.button {
background-color:#009933;
font-size:80px;
font-family:'Josefin Sans', sans-serif;
color:#663300;
}
.links a {
display:block;
color:#009933;
font-size:40px;
font-family:'Josefin Sans', sans-serif;
text-decoration:none;
background-color:#663300;
}
I also tried making them a seperate list with display:block;, but that didn't work either. Really need some help guys. Thanks
Add this CSS
.button h2 {
margin-bottom: 0px;
}
If you view the h2 tag in the inspector you will find that the top and bottom margins are 99.6px
inspector view
OK, think I have what you are looking for add this to your links a class.
position: relative;
bottom: 100px;
It will look like this.
.links a {
position: relative;
bottom: 100px;
display:block;
color:#009933;
font-size:40px;
font-family:'Josefin Sans', sans-serif;
text-decoration:none;
background-color:#663300;
}
Please use the menu>li display property from inline-block to inline-table
.menu>li {
display:inline-table;
}
I am trying to learn HTML/CSS ,for that I am trying to convert a PSD TO HTML,here is what I am trying to do
Here what I have don't so far
,as you see there is space between my two divs ,and I don't seem to undestand why ,
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" >
</head>
<body>
<header>
<div class=Container>
<p> <span style="font-size:16px;color:#b4b4b4 ">phu concepts</span><br>
<span style="font-size:52px "><span style="color:#990202">TEST</span>
<span style="color:#f1a2a2">PROJECT</span></span>
</p>
<img src="Images/ChatImg_02.png" style="position: relative;float:right;top:-90px" >
<div id="headerDIV" >
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
SERVICES
</li>
<li>
GALLERY
</li>
<li>
CONTACT US
</li>
</ul>
</div><!--headerDIV-->
</div><!--headerDivContainer-->
<div id="topRedStrip"></div>
</header>
<section id="main">
<div class=mainContainer>
<div class="slider"> <!---THIS is the DIV that doesn't listen-->
<img src="Images/sliderImage_06.png" alt="Slider Image" style="position:relative; float:left">
</div>
</div><!--Container-->
</section>
<footer>
</footer>
</body>
</html>
and here is my css
#headerDIV
{
}
header p
{
font-family: "myriad Pro";
margin-bottom:0;
margin-top:0;
width:500px;;
}
#chatDiv
{
position:relative;
float:right;
}
#topRedStrip
{
position:relative;
top:12px;
background-repeat: repeat-x;background-image:url('../images/redStrip_03.jpg');
width: 100%;
z-index: -2;
height: 8px;
}
.slider
{
position:relative;
float:left;
}
#headerDIV
{
position:relative;
top:0;
right:-90px;
z-index:-1;
background-image:url('../images/headerBLACk_03.png');
background-repeat:no-repeat;
width:470px;
height: 200px;
float: right;
}
.Container
{
margin: 0 auto;
width:936px;
}
.mainContainer
{
margin: 0 auto;
width:936px;
height:auto;
}
header ul
{
padding: 0;
margin:0;
z-index: -1;
}
header li
{
list-style-type: none;
float:left;
padding-left: 30px;
font-family: "myriad Pro";
font-size:12px;
color: #504848;
padding-top:9px;
}
Can anyone tell me why I get empty space between the div,
Thanks
Every major browser has an inspect mode which allows you to examine the box model and to alter CSS definitions until they match. I suggest you dig into these tools, as they will open you the door to handle all of these questions.
Here's Chrome as example:
Once you have entered the inspection mode, you can browse through the elements and see what is causing the distance.
It seems to be because the height of your header div is 200px:
#headerDIV
{
position:relative;
top:0;
right:-90px;
z-index:-1;
background-image:url('../images/headerBLACk_03.png');
background-repeat:no-repeat;
width:470px;
**height: 200px;**
float: right;
}
It doesn't need to be 200px when the only thing in it is the black navigation bar.
I'm new to web design and I'm making a website as a project for my friend. I've got two divs with different content in each div, one for the main content and one for news and other things which I want at the side.
I've sorted the content div out and thats fine its where I want it. But when I go to float the news div right it goes from under the content div (Inside the wrapper div still) to out side the wrapper div but to where I want it. (I know this because for now I've got a blue border round so I can make sure everything is inside where I want it to be.)
Heres my code and css:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/style.css" type="text/css">
<title>Bake Away</title>
</head>
<body>
<img src="img/logo.png">
<img src="img/ad_bar.png">
<div id="wrapper">
<div id="navBar">
<ul>
<li>Home</li>
<li>About</li>
<li>Responsibility</li>
<li>Working With Us</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</div>
<div id="images">
<img src="img/scroll_1.png">
</div>
<div id="content">
<span>Welcome to the Bake Away Bakery, here you can find out about
all the wonderful things we bake. How you can place orders, who we
bake for, where we're based, apply for jobs and contact head office.</span>
</div>
<div id="news">
<h3>Latest news:</h3>
<span>We've just started our new line of cakes that should
hit the shelves by Monday.</span>
<span class="read">Read More</span>
</div>
</div>
</body>
</html>
body{
margin:0;
padding:0;
width:100%;
background-color:#E6E6E6;
font-family:consolas;
font-size:16px;
font-weight:normal;
text-align:center;
}
img{
margin-top:5px;
margin-right:15px;
}
#wrapper{
width:1000px;
border:1px solid blue;
margin:3px;
margin-left:13px;
text-align:left;
}
#navBar{
color:white;
margin:2px;
margin-right:43px;
height:50px;
font-size:25px;
font-weight:bold;
float:center;
text-align:center;
}
#navBar ul{
list-style-type:none;
}
#navBar li{
display:inline;
}
#navBar a{
text-decoration:none;
background-color:#BDBDBD;
color:black;
padding:2px;
}
#navBar a:hover{
text-decoration:underline;
background-color:#FE2E2E;
color:white;
}
#images img{
margin-left:50px;
}
#content{
width:450px;
margin-left:7px;
margin-bottom:3px;
font-size:16px;
}
#news{
width:300px;
}
Well, you can add display: inline-block;, Simple as hell ;)
Add display: inline-block to the following css:
#navBar {
color:white;
margin:2px;
margin-right:43px;
height:50px;
font-size:25px;
font-weight:bold;
float:center; // there is nothing like this. Wrong text-align:center;
display: inline-block;
}
#images img {
margin-left:50px;
display: inline-block;
}
#content {
width:450px;
margin-left:7px;
margin-bottom:3px;
font-size:16px;
display: inline-block;
}
#news {
width:300px;
display: inline-block;
}
Check this JSFiddle
display:flex is how you do it.
I am writing a website code but I am unable to display the border for the sidebar. Here it is. And below is the code,
<!DOCTYPE html >
<!--HTML WEBSITE
/*********************************************************************************************************************************************************NAME:FAHAD UDDIN*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The New Boston</title>
<style type="text/css">
#container
{
padding:0px;
margin:0px;
background:#BFBFBF;
}
#header
{
height:100px;
background-color:#333;
}
#header logo
{
}
#navigation
{
padding:0px;
margin:0px;
}
#navigation ul
{
background-color:#F00;
}
#navigation ul li
{
text-decoration:none;
display:inline;
color:white;
font-size:16px;
padding-right:40px;
padding-top: 0px;
}
#sidebar
{
display: inline;
margin-left: 20px;
width: 300px;
height:800px;
border-bottom-color:#666;
border:thin;
background-color: white;
background-repeat:repeat;
}
#content
{
float:left;
height: 800px;
width: 800px;
background-color:#FFF;
display:inline;
}
#footer
{
clear:both;
height:200px;
background-color:#333;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="navigation">
<ul>
<li><a href="#"><a/>Home</li>
<li><a href="#"><a/>Home</li>
<li><a href="#"><a/>Home</li>
<li><a href="#"><a/>Home</li>
<li><a href="#"><a/>Home</li>
</ul>
</div><!--Header Ends-->
<div id="content">
<p>This is the complain area. Fill complains here</p>
</div><!--Content ENDS-->
<div id="sidebar">
<p>This is a website.</p>
</div><!--SIDEBAR ENDS-->
<div id="footer">
</div><!--FOOTER ENDS-->
</div><!--CONTAINER ENds-->
</body>
</html>
1) Your html has a bug- you've given a/ instead of /a:
<li><a href="#"><a/>Home</li>
2) float to the rescue: give this property in:
<p style="float: left">This is a website.</p>
and add float: right to #sidbar
3) What is border: thin in #sidebar? Give border: 1px solid. Read this for allowed attributes and their values: http://www.w3schools.com/css/css_border.asp
UPDATE
Check here: http://jsfiddle.net/FPJTn/1/
The sidebar was breaking to the next line because of the value given for width for content. I have changed in #content css from width: 800px to width: auto.