The following is my code. My questions are below that:
<html>
<head>
<title>My BBC News Reader</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
font-family:arial, helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width:100%;
height:40px;
color:white;
}
.fixedwidth {
width:1050px;
margin:0 auto;
}
#logodiv {
padding-top:5px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
#signindiv {
font-weight:bold;
font-size:0.9em;
padding: 6px 80px 12px 20px;
float:left;
border-right:1px solid #990000;
}
#signindiv img {
position:relative;
top:3px;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
padding:0;
margin:0;
}
#topmenudiv li {
list-style:none;
font-weight:bold;
font-size:0.9em;
border-right:1px solid #990000;
height:100%;
padding:10px 20px 12px 20px;
float:left;
}
#searchdiv {
padding:5px 0 0 10px;
float:left;
}
#searchdiv input {
height:25px;
border:none;
padding-left:10px;
background-image:url("images/glass.png");
background-repeat:no-repeat;
background-position:right center;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png"/>
</div>
<div id="signindiv">
<p><img src="images/signin.png" width="18px" height="18px"/>Sign in</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search"/>
</div>
</div>
</body>
</html>
Just to show, I uploaded the code here - http://www.mazdoor.net/bbcnews.html . I will remove once I fix the issue.
1. The vertical border lines are sticking out. I can't figure out what the issue is.
2. The Sign in logo and text are not aligning with the BBC logo.
Kindly help me. I just started HTML and CSS 4 days ago.
Thank you
remove
#topmenudiv li{
height: 100%; <!--- remove
}
#signindiv p{
margin:0; <!--- remove default margin given by browser
}
This is because the padding is set on the list items.
Try this:
#topmenudiv li {
list-style: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 0px 20px;
float: left;
line-height: 35px;
}
This will remove the height on the padding and set the vertical height of the text with line-height.
this is the correct code
<html>
<head>
<title>My BBC News Reader</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
font-family:arial, helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width:100%;
height:auto;
color:white;
}
.fixedwidth {
width:1050px;
margin:0 auto;
}
#logodiv {
padding-top:15px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
min-height: 53px;
}
#signindiv {
font-weight:bold;
font-size:0.9em;
padding: 6px 80px 12px 20px;
float:left;
border-right:1px solid #990000;
}
#signindiv img {
position:relative;
top:3px;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
padding:0;
margin:0;
}
#topmenudiv li {
list-style:none;
font-weight:bold;
font-size:0.9em;
border-right:1px solid #990000;
/*height:100%;*/
padding:26px 20px;
float:left;
}
#searchdiv {
padding:5px 0 0 10px;
float:left;
}
#searchdiv input {
height:25px;
border:none;
padding-left:10px;
background-image:url("images/glass.png");
background-repeat:no-repeat;
background-position:right center;
}
.clear{float:none !important;clear:both;}
ul li:last-of-type{padding:0px !important;border:none;height:0px !important;}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png"/>
</div>
<div id="signindiv">
<p><img src="images/signin.png" width="18px" height="18px"/>Sign in</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
<li class='clear'></li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search"/>
</div>
<div class='clear'></div>
</div>
</div>
</body>
</html>
in here all the things what have i done is hard to explain i explained it briefly.study the code...and try to understand
1.<li class='clear'></li> add for clear floats in ul
<div class='clear'></div> add for clear floats fixedwidth div
change topbar div height to auto to get the topbar height according to its inside content.
#topmenudiv li padding changes padding: 26px 20px then its height will equal with signindiv height.
delete #topmenudiv li height then #topmenudiv li height will be height auto.( if #topmenudiv li{height:auto;} list items get full screen heigh)
2.
to align logos vertically simply add padding top value to logodiv.you have to use your eye sight to check whether is it align with signout logo or not.
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 have the following alignment problem: I want the "random" div to have a full width in the window, that's why I added the "width:100%" command. But for some reason, the maximum width it displays the random div on is the width of the "fixedwidth" div, but the two are not connected. Why does the browser keep matching the maximum width of the two divs? If i increase the width of the "fixedwitdth" div, then the width of the "random div" also increases. But that does not make any sense.
<html>
<head>
<title>Gliga's BBC</title>
<style type="text/css">
body {
margin:0px;
font-family: arial,helvetica;
}
#topbar {
background-color:#7A0000;
width:100%;
height:40px;
color:white;
}
.fixedwidth {
width:1200px;
background-color:green;
margin:0 auto;
}
#logodiv {
padding-top:7px;
padding-bottom:3px;
padding-left:50px;
float:left;
border-right: 2px solid #990000;
padding-right:30px;
}
#signindiv {
font-weight:bold;
padding:9px 80px 11px 20px;
font-size:0.9 em;
float:left;
border-right: 2px solid #990000;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
margin:0;
padding:0;
}
#topmenudiv li {
list-style:none;
font-weight:bold;
font-size:0.9 em;
border-right: 2px solid #990000;
height:100%;
padding:10px 20px 10px 20px;
float:left;
}
#searchdiv {
float:left;
padding:6px 10px 5px; 5px;
border-right: 2px solid #990000;
}
#searchdiv input{
height:20px;
}
.break {
clear: both;
}
.random {
background-color:blue;
margin-top:10px;
height:30px;
width:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png"/>
</div>
<div id="signindiv">
Sign in
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPLayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search..." />
<div>
</div>
</div>
<div class="break" />
<div class="random">
</div>
</div>
</body>
</html>
.random is a child of .fixedwidth, so it's a totally normal behaviour happening there.
If you sort your code properly then you will get to see it clearly:
I'm trying to design a website where everything is contained withing one main div that restricts everything to 85% of the screen width. I am trying to center the outer div, which seems to have worked, and make the inner div (menubar) float to the left. But no matter what I do I can't get it to go to the left of the outer div, it goes all the way to the left of the page. Thanks for any help.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accessorize With Style | Index</title>
<style type="text/css">
body {
overflow:hidden;
}
img.background {
position:absolute;
top:0;
left:0;
width: 100%;
z-index:-1;
}
.menu{
margin:0;
padding:0;
width:300px;
list-style:none;
background:rgb(255,255,255);
}
.menu li{
padding:0;
margin:0 0 1px 0;
height:40px;
display:block;
}
.menu li a{
text-align:left;
height:40px;
padding:0px 25px;
font:16px Verdana, Arial, Helvetica, sans-serif;
color:rgb(255,255,255);
display:block;
background:url('images/verMenuImages.png') 0px 0px no-repeat;
text-decoration:none;
}
.menu li a:hover{
background:url('images/verMenuImages.png') 0px -40px no-repeat;
color:rgb(0,0,0);
}
.menu li a.active, .menu li a.active:hover{
background:url('images/verMenuImages.png') 0px -80px no-repeat;
color:rgb(255,255,255);
}
.menu li a span{
line-height:40px;
}
#site {
width:85%;
}
</style>
</head>
<body>
<img src="images/background.jpg" class="background" />
<div id="site" align="center">
<div id="menubar" align="left">
<ul class="menu">
<li><span>Home</span></li>
<li><span>About</span></li>
<li><span>Necklaces</span></li>
<li><span>Bracelets</span></li>
<li><span>Earings</span></li>
<li><span>Rings</span></li>
<li><span>Scarves</span></li>
<li><span>Contact</span></li>
</ul>
</div>
<div id="gallery" align="center">
</div>
</div>
</body>
</html>
In your CSS, add
#menubar {
position: relative;
left: 0px;
}
and remove the inline CSS:
<div id="menubar">
You might want to use HTML5 notation.
Live Demo
HTML
<main>
<aside>Menu</aside>
<section>
<article>Content</article>
</section>
</main>
CSS
html {
background-color:black;
}
main {
background-color:red;
width:85%;
height:400px;
margin: 0 auto;
padding:4px;
}
aside {
width:20%;
height:90%;
margin-top:5%;
background-color:blue;
color:white;
clear:left;
display:inline-block;
}
section {
display:inline-block;
background-color:green;
padding:4px;
}
article {
background-color:#F60;
}
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 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.