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.
Related
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>
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've been facing trouble with aligning some content to center of a page... the point is, i was able to achieve it .. but when the browser is resized, the content on the left side is not visible.. i am not sure where i am going wrong.. the code is as follows...
HTML Code ....
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Home</title>
<link href="home.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<img class="logo" src="logo.jpg" width="160px" height="83px">
<div id="menualign">
<ul>
<li class="topli">Home</li>
<li class="topli">site 1</li>
<li class="topli">Site 2</li>
<li class="topli">Logout</li>
</ul>
</div>
<img src="bgn.jpg" width="900" height="7" id="bar">
</div>
</body>
</html>
CSS Code is as follows
#container
{
width:920px;
height:600px;
position:absolute;
left: 50%;
top: 50%;
margin-left: -460px;
margin-top: -300px;
}
#menualign
{
position:relative;
left:24%;
}
#menualign ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#menualign ul li { display: inline; }
#menualign ul li a
{
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
padding: .2em 1.41em;
color: #0056A2;
background-color: #fed352;
}
img.logo
{
position:relative;
top:20px;
}
#menualign ul li a:hover
{
color:black;
font-size:17px;
}
You need to position your container with margin:0 auto; and then give float:left to the image and float:right to the menu. Last give menu line-height of the image height to align it verticaly.
#container
{
width:920px;
margin:0 auto;
}
#menualign ul li {
margin-top:10px;
line-height:83px;
float:left;
}
img.logo
{
float:left;
margin-top:10px;
}
Ok i made a little jsFiddle and I hope it will help.jsFiddle
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.
I have created an unordered list inside a div which is absolutely positioned. When I add an href inside of the li items, it's not working.
For example: <li>Home</li> is still not clickable.
Here is the CSS (the nav is the wrapping div):
#nav
{
background:#666666;
position:absolute;
top: 270px;
left:150px;
height:40px;
}
#nav ul li
{
position:relative;
top:-8px;
left: -15px;
display:inline;
padding: 0 33px;
font-size:14px;
border-right: 2px solid #333333;
margin:auto;
color: #efefef;
}
Here's the full code. I also figured out that some other element is overlapping, but don't know what to do.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Good Brothers Film Entertainment</title>
<link rel="stylesheet" href="css/default.css" type="text/css"/>
</head>
<body>
<div id="container">
<div id="header">
<img src="images/logo2.png" id="logo2"/>
<img src="images/logo.png"/>
</div>
<div id="nav">
<ul>
<li><span>H</span>OME</li>
<li><span>S</span>ERVICES</li>
<li><span>R</span>EELS</li>
<li><span>G</span>ALLERY</li>
<li><span>A</span>BOUT US</li>
<li><span>C</span>ONTACTS</li>
<li><span>A</span>FFILIATES</li>
</ul>
</div>
</div>
<img src="images/inner-background.png" id="inner-background" />
<p id="welcome">~<span>W</span>ELCOME~</p>
<img src="images/good-brother.png" id="good-brother"/>
<img src="images/working-together.png" class="work-together" />
<img src="images/and.png" class="work-together" />
<img src="images/exceeding-limits.png" class="work-together" />
<img src="images/men.png" class="men" />
<img src="images/men-shadow.png" class="men" />
<img src="images/footer.png" id="footer" />
<div id="video">
<!-- <iframe width="560" height="315" src="http://www.youtube.com/embed/V0LQnQSrC-g" frameborder="0" allowfullscreen></iframe> -->
</div>
</body>
</html>
The CSS
body,html{margin:0;border:0;padding:0;}
#container
{
width:1360px;
height:1024px;
background:url(../images/background.png);
}
#logo2
{
position:absolute;
}
#nav
{
background:#666666;
position:absolute;
top: 270px;
left:150px;
height:40px;
}
#nav ul li
{
position:relative;
top:-8px;
left: -15px;
display:inline;
padding: 0 33px;
font-size:14px;
border-right: 2px solid #333333;
margin:auto;
color: #efefef;
}
#nav li span
{
font-size: 21px;
}
#nav li:last-child
{
border:none;
}
#inner-background
{
position:absolute;
top: 0px;
}
#welcome
{
color:#ffffff;
top:300px;
left:300px;
font-weight:bold;
font-size:24px;
position:absolute;
}
#welcome span
{
font-size: 28px;
}
#good-brother
{
top:1px;
position:absolute;
}
.work-together
{
top: -5px;
position:absolute;
}
#video
{
top: 400px;
left:600px;
height:315px;
width:560px;
background: #eeeeee;
position: absolute;
}
.men,#footer
{
top:1px;
position: absolute;
}
Depending on your layout, you can use z-index set to a high enough value allowing the anchor tags to overcome the overlapping element.
Still work with the complete code, but with no images.
I suspect that your problem is the #footer image
(I can confirm it is if the image is over 300 pixel high!)
Here's why :
.men,#footer
{
top:1px;
position: absolute;
}
Since this image is defined after, it's put on top. It's either that image or another one big enough to cover your header.
This css declaration could help find if an image is the culprit :
img {border:3px solid red !important;}
If you have firebug or other similar developpement tool, right click on your link and do inspect element : if you have an element over it, it should be selected.
Note : if you dont have firebug or something similar... Get one asap.