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:
Related
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.
How can I get the bottom box of the lefthand side to fill out the rest of the height of the div so the border goes down to the bottom of the box?
Right now the line stops where the content of the left box stops
HTML
<div id="container">
<div id="leftcolumn">
<div id="fixedbox">
Fixed size
</div>
<div id="restbox"><p>Fill out box</P></div>
</div>
<div id="rightcolumn">
<p>Dynamic content</p>
</div>
<br style="clear:both;" />
</div>
CSS
body {
background-color:#ccc;
}
#container {
margin:0 auto;
width:80%;
background-color: #fff;
}
#leftcolumn {
width:29%;
float:left;
border-right:1px solid #000;
}
#rightcolumn {
width:68%;
float:left;
margin-left: 2%
}
#fixedbox {
width:100%;
height:200px;
border-bottom: 1px solid #000;
}
#restbox {
width:100%;
}
http://jsfiddle.net/P6YQc/2/
Is there any reason why you don't have a left border on #rightcolumn instead of a right border on #leftcolumn ?
http://jsfiddle.net/P6YQc/7/
eg:
#leftcolumn {
width:29%;
float:left;
}
#rightcolumn {
width:68%;
float:left;
border-left:1px solid #000;
padding-left:10px;
box-sizing: border-box;
}
I am trying to make a portfolio kind of thing with HTML and CSS and my layout looks really good on my resolution of 1920 * 1080 but when i change the resolution everything moves around and everything looks really bad.
Can anybody point out to me where I am going wrong with my code and provide me with a solution to my problem?
--- Edited new code
How it looks on 1920 * 1080:
http://screencast.com/t/mq8H3baBxIi
So i have changed the advised things but i'm still getting that, for example, when i change from my screen resolution of 1920 * 1080 to 1280 * 1024 to test how it looks the comment areas pull on top of the grey 'contact me' box so that it ends up like me picture on this link:
http://screencast.com/t/xZEwSgwdqP
<html>
<head>
<link rel="stylesheet" type="text/css" href="portfolioStyles.css" />
</head>
<body>
<div id="pageTitleContact"> CONTACT ME</div>
<div id="sideBar"> </div>
<div id="commentSideBar"> </div>
<div id="logos">
<ul>
<div id="home"><li><img src="home.png" alt="list item 1" /></li></div>
<div id="aboutMe"><li><img src="aboutMe.png" alt="list item 2" /></li></div>
<div id="achievements"><li><img src="achievement.png" alt="list item 3" /></li></div>
<div id="hobbies"><li><img src="Hobbies.png" alt="list item 4" /></li></div>
<div id="contactMe"><li><img src="contactMeHighlighted.png" alt="list item 4" /></li></div>
</ul>
</div>
<textarea id="contactMeTextarea">
</textarea>
<div id="Commentsection">
<form action="postcommentandreturn.php" method="post">
<div id="nameAreaTitle">
Name:</div><input type="text" id="nameArea" name="name" />
<br>
<textarea placeholder="Insert Comment Here..." type="text" id="commentArea" name="comment"></textarea>
<div id="submitLocation"><input type="submit" id="submitComment" value="Submit"/></div>
</form>
</div>
<!--comment section-->
<div id="postedComments">
<tr>
<td><div id="postersName"> </div>
</td>
</tr>
<tr>
<td><div id="commentDate"></div></td>
</tr>
<tr>
<td>
<textarea id="postersComment"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
css:
html,body
{
height: 100%;
padding: 0px;
margin: 0px;
}
#sideBar {
background-color: #111111;
width:100px;
height:100%;
position:fixed;
z-index:-1;
}
#commentSideBar {
background-color: #111111;
width:300px;
height:100%;
position:fixed;
z-index:-1;
right:0;
}
#logos {
position:absolute;
margin-left:-20px;
}
#home {
margin-top:50px;
}
#homeInfo {
resize: none;
position:fixed;
display: block;
height:400px;
width:800px;
overflow:hidden;
outline:none;
background-color:#3f3f3f;
color:white;
font-family:Arial;
font-size:30px;
border-radius:10px;
font-weight:700;
text-align:left;
padding-right:20px;
padding-left:40px;
top: 50%;
left: 50%;
max-width:800px;
margin-left:-350px;
margin-top:-200px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
#pageTitleContact {
position:fixed;
top: 50%;
left: 50%;
margin-top:-400px;
margin-left:-400px;
color:limegreen;
font-size:100px;
font-family:Arial;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
padding-left:20px;
padding-right:20px;
}
#aboutMe {
margin-top:100px;
}
#achievements {
margin-top:100px;
margin-left:-7px;
}
#hobbies {
margin-top:100px;
}
#contactMe {
margin-top:100px;
margin-bottom:50px;
}
#contactMeTextarea {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
resize: none;
position:fixed;
display: block;
height:600px;
width:1000px;
max-width:1000px;
outline:none;
background-color:#3f3f3f;
color:whitesmoke;
font-family:Arial;
font-size:30px;
border-radius:10px;
text-align:left;
padding-right:20px;
padding-left:40px;
top: 50%;
left: 50%;
margin-left:-500px;
margin-top:-300px;
padding-top: 50px;
}
#Commentsection {
position:fixed;
top:50%;
margin-left:140px;
margin-top:-300px;
}
#nameAreaTitle {
font-family:Arial;
color:black;
font-weight:bold;
}
#nameArea {
font-family:Arial;
color:black;
width:300px;
height:40px;
font-size:30px;
}
#commentArea {
font-family:Arial;
color:black;
width:300px;
height:300px;
resize: none;
margin-top:10px;
font-size:20px;
}
#submitComment {
width:100px;
font-size:20px;
}
#postedComments{
position:absolute;
right:0px;
margin-top:10px;
margin-right:10px;
width:280px;
background-color:grey;
}
#postersName {
width:260px;
height:25px;
font-size:20px;
font-family:Arial;
background-color:white;
color:black;
border-color:black;
border-width:1px;
border-style:solid;
padding-left:10px;
font-weight:bold;
margin-top:10px;
}
#commentDate {
width:260px;
height:25px;
font-size:20px;
font-family:Arial;
background-color:white;
color:black;
border-color:black;
border-width:1px;
border-style:solid;
padding-left:10px;
}
#postersComment {
width:275px;
height:200px;
font-size:20px;
font-family:Arial;
background-color:white;
color:black;
border-color:black;
border-width:1px;
border-style:solid;
padding-left:10px;
resize:none;
}
li {
list-style-type:none;
}
Without looking at it too closely, you can probably add a container div or something that wraps all your code up, and then assign a min-width attribute to ensure that it never goes smaller than the given size.
Your layout seems to be relying on the width of your body and as your window size changes so will the width of your body. Having a wrapper with a min-width or declared width will make it so a horizontal scroll bar will appear when users have a window smaller than the width of your container.
And like others have stated, you have some nesting issues. General page layout will look like this:
<html>
<head>
<!-- Head Content -->
</head>
<body>
<!-- Page Content -->
<ul>
<li><!-- List Item --></li>
<li><!-- List Item --></li>
</ul>
</body>
</html>
I have searched google, but I didn't find anything. I searched this site and found this topic Unwanted space between divs which seems similar, and i have tried to apply
margin:0px;
several places, but there i still, space between the two divs.
Heres my html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title/title>
<link rel="stylesheet" type="text/css" href="e.css">
</head>
<body>
<div id="page">
<div id="content">
<div id="up">
<div id="tab">
<ul id="tabmenu">
<li id="anm" class="tbs blue"><span>Anm</span></li>
<li id="kom" class="tbs blue"><span>Kom</span></li>
<li id="omt" class="tbs blue"><span>Omt</span></li>
<li id="sts" class="tbs blue"><span>Sts</span></li>
</ul>
</div>
<div id="usrp">
<div id="usr">
</div>
</div>
</div>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
And my Css
html {
height: 98%;
}
body {
height:99%;
}
#page {
height:99%;
}
#content {
/*border:2px solid blue;*/
}
#bottom {
border:2px solid green;
height:15%;
vertical-align: bottom;
}
#up {
/*border:dotted green 2px;*/
width:59%;
}
.usrcom {
border-bottom: 2px dotted blue;
margin-left:15px;
margin-right:15px;
}
#usrp {
width:100%;
clear:both;
border-right: 2px solid blue;
border-left: 2px solid blue;
border-bottom:2px solid blue;
border:dotted yellow 2px;
}
/***Tabs menu*****/
#tabmenu {
float:left;
width:685px;
/*background:#BBD9EE;*/
/*background:#FF6633;*/
font-size:93%;
line-height:normal;
margin-top: 0px;
margin-left: 0px;
/*border:dotted red 2px;*/
border-bottom:2px solid blue;
/*border:dotted red 2px;*/
}
#tabmenu ul {
/*background:#BBD9EE;*/
padding:0px 0px 0 0px;
margin:0px;
list-style:none;
border:dotted green 2px;
}
#tabmenu li {
display:inline;
padding:0;
margin:0px;
}
#tabmenu a {
float:left;
/*background:url("img/tableft2.png") no-repeat left top;*/
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabmenu a:hover span {
background-color:#3399FF;
margin:0px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#tabmenu a span {
float:left;
display:block;
/*background:url("img/tabright2.png") no-repeat right top;*/
padding:5px 15px 4px 5.5px;
margin:0px;
color:#FFFFFF;
background-color:#0000FF;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
I can find out why the space happens, how can I solve this unwanted space.
Edit:
Ups, yearh, forgot to tell which divs,
It is between 'Tabmenu' and 'usrp'
Edit:
Tried to apply in my css
#tab {
margin: 0px;
padding:0px;
}
For it is in really between 'tab' and 'usrp' but that does no help.
In CSS:
#tabmenu {
margin:0;
}
should do the trick
Learn how to use an inspector and "inspect this element". Then you can hover over all the elements on your page and literally see their margins/paddings, and what CSS is causing them. You can even edit CSS on-the-fly to test out a fix before applying it. My preference is the Firebug add-on for Firefox, but Chrome, Safari, and even Internet Explorer all have them built in now.
The problem I am running into is related to a footer I have absolutely positioned at the bottom of the page. Everything is fine until the copy on the page begins to extend further down the page which then causes my content wells to extend down, behind, the footer. Is there anyway I can force my content wells to 'push' the footer down the page?
Here is the relevant html:
<div id="page">
<div id="page_container">
<div id="header"></div>
<div id="nav"></div>
<div id="main_content">
<div id="left_column"></div>
<div id="right_column"></div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_container">
</div>
</div>
And the relevant CSS
#page {width:100%;margin:0 0 10px 0; text-align:center;}
#page_container {width:743px;height:auto !important;height:100%;margin:0 auto;min-height:100%;text-align:center;overflow:hidden;border:2px solid #000;}
#header {width:100%;background:url('../images/header.jpg');height:87px;clear:both; margin-top: -2px;}
#nav {width:100%;height:29px;float:left; text-align:left; border-bottom: solid 2px #000; border-top: solid 2px #000;}
#main_content {width:100%;float:left; text-align:left; background-color:#fff; border-bottom: solid 2px #000; border-left: solid 2px #000; border-right: solid 2px #000;}
#footer {width:100%; position:absolute;margin-top:10px; bottom: 0; background:url('../images/footer_bg.jpg');height:133px;text-align:center;}
#footer_container{width:746px;height:133px; text-align:left; display:inline-block;}
#left_column {width:230px; float:left; text-align:left; background-color:#fff; margin-top:5px;}
#right_column {width:490px; float:right; text-align:left; background-color:#fff;margin-top:5px; padding:10px;}
Thanks for any help you might be able to give!
Use position: fixed; for the footer, you also might want to have some padding-bottom for your body so that the content won't go under it.
Take out the height: 100% on pageContainer - that fixes the div to the window height and not the content height.
Try this:
<style type="text/css">
html, body { margin:0; padding:0; height:100%; }
#page_container { width:743px; margin:0 auto; }
#header { height:87px; border:1px solid #000; }
#footer { height:133px; position:absolute; bottom:0; width:100%; border:1px solid #000;}
#nav { height:29px; border:1px solid #000;}
#left_column { width:230px; float:left; border:1px solid #000;}
#right_column { width:490px; float:left; border:1px solid #000;}
#page { min-height:100%; position:relative; }
#main_content { padding-bottom:133px; }
.clear { clear:both; }
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
HTML (note - you must put #footer inside #page for this method to work):
<div id="page">
<div id="page_container">
<div id="header">hhhh</div>
<div id="nav">nav</div>
<div id="main_content">
<div id="left_column">lll</div>
<div id="right_column">rrr</div>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<div id="footer_container">fffff</div>
</div>
</div>
You can preview working example here: http://www.front-end-developer.net/examples/bottomfooter/footer.htm
Tested on Chrome, Firefox, IE6, IE7, IE8 and Opera.