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.
Related
In my case I am having a nav bar(two tabs) with green border. Below this there is a container with green border. For active tab border-bottom should be white and another tab should be green. So I changed border-bottom:1px solid #fff for active tab alone. This case is working fine is large and medium device. But in small device green line is still displaying under active tab which is the border of the container present under the nav.
HTML Code:
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:3px;
float:left;
list-style:none;
}
.tab-links a {
background:none repeat scroll 0 0 #dfdfdf;
border:1px solid #c3c3c3;
color:#484e2a;
display:inline-block;
font-family:open_sansbold;
font-size:11px;
min-width:166px;
padding:8px 4px;
text-decoration:none;
transition:all .15s linear 0s;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
li.active a, li.active a:hover {
background: #fff;
border:1px solid #dddfb0;
border-bottom:1px solid #fff;
color:#484e2a;
}
.tab-content {
padding:15px;
background:#fff;
border:1px solid #dddfb0;
margin-top:-20px;
}
.tab {
display:none;
}
.tab.active {
display:block;
}
<div class="tabs">
<ul class="tab-links">
<li class="active">Tab #1</li>
<li>Tab #2</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>Test Content 1</p>
</div>
<div id="tab2" class="tab">
<p>Test Content 2</p>
</div>
</div>
JS Fiddler link:
https://jsfiddle.net/ktncf454/
#padamapriya :
I did few modifications for you..:
.tab-links li {
margin: 3px;
float: left;
list-style: none;
position: relative;
z-index: 1;
margin-bottom: 2px;
}
.tab-content {
padding: 15px;
background: #fff;
border: 1px solid #dddfb0;
margin-top: -20px;
position: relative;
z-index: 0;
}
Hope this helps!!!!
You will have to write the media query for the this scenario.Generally what happens on different devices the navbar adjust himself automatically.so writing the media query you can change the border for the container and for the tab.
It will good if you share your source code or create a jsfiddle so that we can test and give you the proper solution.
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 know its the noobest question you had every seen but but really guys I am not able to find whats wrong in my css. I am trying to float two divs inside a footer div. But the problem is that the first div (#copyrights) is just stuck in the middle. It looks like there's something wrong with the main container (#footer). Because when I place the last container outside it then everything works great
Have a look at my code on jsfiddle.
Heres my HTML (The footer div is at the bottom):
<div id="footer">
<!-- Upper footer -->
<div id="upper-footer">
<!--Footer Navigation Links -->
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
The Mall
</li>
<li>
Media Center
</li>
<li>
Contact Us
</li>
</ul>
<!-- End od Footer nav links -->
<!--Start of newsletter div -->
<div id="newsletter">
<span>SignUp To Get The Latest News & Updates</span>
<form>
<input class="rounded" type="text" value="Your Email Here..." >
<input class="rounded-button" value="SUBSCRIBE" type="button" >
</form>
</div>
<!--End of Newsletter div-->
</div>
<!-- End of upper footer -->
<!-- Start of lower footer -->
<div id="lower-footer">
<div id="copyrights">
2013 Boulevar Mall. All rights reserved.
</div>
<div id="social">Follow us </div>
</div>
<!--End of lower footer -->
And here's my css:
#import url(http://fonts.googleapis.com/css?family=Droid+Sans);
#footer
{
height:100px;
font-family: 'Droid Sans', sans-serif;
text-transform:capitalize;
font-size:14px;
}
/*css for upper footer */
#upper-footer
{
height:70%;
background-color:#efe7e1;
}
#upper-footer #newsletter
{
float:right;
height: 100%;
display: table;
}
#upper-footer ul
{
list-style:none;
margin-top: 0px;
float:left;
width:480px;
}
#upper-footer ul li
{
display:inline-block;
height: 100%;
border-left: 1px solid d7cfca;
}
#upper-footer ul li:nth-child(1)
{
border-left:none;
}
#upper-footer ul li a
{
line-height:200%;
text-decoration:none;
color:#9b907c;
display:block;
line-height:70px;
padding-left:15px;
padding-right:15px;
width: 100%;
}
#upper-footer #newsletter span
{
color:#726753;
width:150px;
display: table-cell;
vertical-align: middle;
}
#upper-footer #newsletter form
{
display: table-cell;
vertical-align: middle;
padding-left: 15px;
}
/*for rounded text box */
input.rounded
{
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 9.42px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
height:26px;
width:163px;
text-align:center;
}
/*for rounded button */
input.rounded-button
{
border: 1px solid #ccc;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-size: 9.42px;
padding: 4px 7px;
outline: 0;
-webkit-appearance: none;
height:29px;
width:80px;
background-color:#726753;
color: white;
font-weight: bold;
}
input.rounded-button:hover
{
background-color:white;
border:#726753 solid 1px;
color:#726753
}
/*css for lower footer */
#lower-footer
{
background-color:#726753;
height:30%;
color:white;
}
#lower-footer #copyrights
{
float:left;
}
#lower-footer #social
{
float:right;
}
Your're free to point out my mistakes as I am very new to this stuff :)
Thanks in advance!
It is the margin on #upper-footer ul that's not letting your #copyrights float to the extreme left. Try replacing #upper-footer ul rule with following
#upper-footer ul
{
list-style:none;
margin: 0;
float:left;
width:480px;
}
it sets all margins for #upper-footer ul to zero instead of only margin-top.
Update
As the margin of the #upper-footer ul element is overflowing out of its parent, #upper-footer, setting overflow: hidden for #upper-footer will also do the trick.
I've spent hours on this, but even though I was able to manipulate the links the first time I used them in my code it would seem that the links on my footer won't change no matter what I do...
any advice/hint/solution would be appreciated...
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>usaelectricalsystemshome</title>
<style type="text/css" media="screen, print, projection">
body{
background: black;
}
#wrap {
width:1000px;
margin:0 auto;
background: blue;
}
#alldivs{
}
#header{
background: blue;
}
#nav{
background: yellow;
padding: 0px;
margin: 0px;
background:blue repeat-x;
width:100%;
float:left;
border: 1px solid #42432d;
border-width:1px 0;
}
#nav li{
display: inline;
padding: 0px;
margin: 0px;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#FFFFF0;
float:center;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
#nav a:hover,
#nav a:focus {
color:#fff;
background:blue;
}
#main{
background: white;
float: left;
width: 800px
}
#sidebar{
background: gray;
float: right;
width: 200px;
}
#footer{
background: blue;
clear: both;
}
#footernav a:link{
color:gray;
text-decoration: none;
}
#footernav li{
display: inline;
color: gray;
text-decoration: none;
}
</style>
</head>
<body>
<br>
<div id="alldivs">
<div id ="wrap">
<div id="header"><p>This is the header, put something here!!</br>safsdf</p></div>
<ul id="nav">
<li id="home">HOME</li>
<li id="services">SERVICES</li>
<li id="contact">CONTACT</li>
</ul>
<div id="main"><p>
MAIN CONTENT
</p></div>
<div id="sidebar">sidebar space</div>
<div id="footer">
<p>
this is the footer
</p>
<ul id="footernav">
<li id="footerhome">HOME</li>
<li id="footerservices">SERVICES</li>
<li id="footercontact">CONTACT</li>
</ul>
</div>
</div>
</div>
</body>
</html>
You need:
#footernav a:link, #footernav a:visited {
Remember, links are either :link, or :visited, never both.
Your syntax is off:
a { color:gray } /* Foo */
This will change the link color (affects visited links as well):
a:hover { color:green } /* Foo */
This will change it when hovered.
try #footernav li a:link not #footernav a:link Your traverse through the DOM seems off.
Try adding a:visited { color:#000;} between the style tag.
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.