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.
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 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 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 have all my divs centered with the left and right edges vertically aligned, but when I added the ul and li then my .nav started to have a background color that extends past the right hand edge. Any idea how to lock this down? max width doesn't prevent it from flowing outwards.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<title></title>
</head>
<body>
<div class="container">
<div class="header">
<img src="image/logo.png" width="155" height="110" alt="Big Box Property Preservation" />
</div>
<div class="navContainer">
<div class="miniNav">
<img src="image/link_banner.nav.png" width="189" height="44"/>
</div>
<div class="nav">
<ul class="nav">
<li>HOME</li>
<li>ABOUT US</li>
<li>OUR SERVICES</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
<div class="content">
<div class="contentBody">
</div>
<div class="sidebar1">
</div>
</div>
<div class="footer" >
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
body{
top:0;
left:0;
margin:0;
padding:0;
background-color:#666;
}
.container{
position:relative;
margin-top: 0%;
position:relative;
width:1000px;
margin:0px auto;
}
.header{
position:relative;
float:left;
width:900px;
height:120px;
background-color:#CFCA4C;
margin:0px 50px 0px 50px;
}
.navContainer{
position:relative;
float:left;
width:100%;
height:80px;
margin:0px 0px 0px 0px;
}
.miniNav{
height:100%;
position:absolute;
right:0px;
}
.nav{
float:left;
max-width:900px;
width:900px;
height:100%;
background-color:#FFFFFF;
overfow:hidden;
margin: 0 20px 0 50px;
}
ul.nav{
list-style:none;
padding: 0px;
}
ul.nav li{
display:inline;
padding:0px;
float:left;
}
.content{
float:left;
width:900px;
min-height:400px;
background-color:#FFFFFF;
margin:0px 50px 0px 50px;
}
.footer{
float:left;
width:900px;
height:80px;
background-color:#CFCA4C;
margin:0px 50px 0px 50px;
}
Both div and ul has class 'nav'. Ul with class nav should not have margins (they have already been added in div). So add:
ul.nav {margin: 0}
.nav {
width: 850px;
}
jsFiddle: http://jsfiddle.net/kongr45gpen/a5Auj/
What you really need to do is simply remove a lot of properties.
You should also set .container to 900px instead of 1000px, because that's how wide all the things inside it are.
You can remove almost all of the instances of float: left and margin.
Block-level elements (such as divs) will by default expand to fill the available width, so you don't need to specify width: 900px so many times. This isn't the behaviour if you float: left an element, but I've removed your instances of it.
So, bearing all that in mind, see: http://jsbin.com/ozemoy. Just one width is being set :)