I don`t understand why I have margin from the left:
CSS:
html, body {
font-family:Myriad Pro, sans-serif;
font-size:18px;
color:#000;
margin:0px;
padding:0px;
background: url('./images/background.png');
}
#container {
width:890px;
height:530px;
margin:36px auto;
}
#userList {
width:228px;
height:355px;
float:right;
border:1px solid #cccccc;
}
.users li {
list-style-type:none;
background-color: #f2f2f2;
width:100%;
height:50px;
border-bottom: 1px solid #cccccc;
}
HTML:
<div id="userList"><ul class="users"><li><img src="./pic/none.png">Piet van Meerdijk</li><li><img src="./pic/none.png">Henk v/d Wal</li></ul></div>
When I put margin-left:-40px; in the CSS code the li item will be on the left now, but then have I a margin on the right. Why?
JSfiddle: http://jsfiddle.net/8Cwcy/
The <ul> tag has an automatic padding of 40px so you will need to change that to 0px:
ul {
padding: 0px;
}
This should work across all browsers.
Fiddle: http://jsfiddle.net/8Cwcy/3/
By default a lot of HTML elements have their own CSS rules in many browsers, and <ul> tag has a padding by default. You need to set padding:0px to de <ul> tag:
ul{
padding:0px;
}
http://jsfiddle.net/8Cwcy/1/
If you want to know more about CSS reset rules follow this link.
Related
I have done this code for a bit of extra study but I can't seem to center the work and I'm not to sure if I need so much code feel like some should be removed, please help!
If some of the code needs to be taken away I understand just dont quite understand and I feel like everything I Read make me more lost and Just keep changing my code with no solution :(
#menubar{
background:#3399CC;
height:120px;
}
#menubarwrap {
margin:0 auto;
width:100%;
}
#navigationbar-main {
float:left;
padding:15px;
color:#000;
font-size:24px;
font-weight:bold;
list-style-type: none;
margin-bottom:10px;
text-align:center;
}
#navigationbar-main li {
margin-right:35px;
position:relative;
}
#navigationbar-main li a {
display:block;
color:#000;
}
#navigationbar-main li ul {
display:none;
z-index:80;
}
.nav-sec {
display:block;
font-size:12px;
font-family: lucida sans unicode;
font-weight:normal;
text-align:center;
}
HTML
<body>
<div id="menubar">
<div id="menubarwrap">
<ul id="navigationbar-main">
<li>Home<span class="nav-sec">Where We Start</span></li>
<li>Gallery<span class="nav-sec">Pure Beauty</span></li>
<li>Contact<span class="nav-sec">Come Book</span></li>
<li>Features<span class="nav-sec">Pure Luxury</span></li>
<li>Location<span class="nav-sec">Where Are We?</span></li>
<li>Rates<span class="nav-sec">Price Of Love</span></li>
</ul>
</div>
</div>
</body>
sorry I'm just fairly new to all this
I am providing with two solutions guessing its what you need:
Fiddle 1
Change
#navigationbar-main {
margin:0px auto;
/*removed float
Other styles remain same*/
}
Fiddle 2
Change
#navigationbar-main li {
display:inline-block;
/*Other styles remain same*/
}
change your ul css
#navigationbar-main {
color: #000000;
font-size: 24px;
font-weight: bold;
list-style-type: none;
margin: 0 auto 10px;
padding: 15px;
text-align: center;
width: 1000px;
}
and give flat:left to your li
If you are trying to center align the #navigationbar-main ul, do this
#navigationbar-main ul{
float:left /*remove this line*/
}
This will get you the ul to the center of the page horizontally.
And if you want to align the li items horizontally apply this:
#navigationbar-main li {
display:inline-block;
}
#navigationbar-main {
width: 100%;
}
Add this to your CSS,
I keep having this trouble whenever I code.
I set the height to 100%. I want the div to reach the bottom of the page no matter how much information is in it with the exception of a 300px margin at the bottom.
Currently I have not set the margin at the bottom yet.
As you can see, it does not reach the bottom of the page and I want it too. I realize your computer it may, since my screen is fairly big.
The DIV is called "wrapper".
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Design At Ease - Home</title>
</head>
<body>
<div id="header">
<div id="logo"><a class="logoclass">DesignAtEase.com</a></div>
<ul id="headerlinks">
<li>Home</li>
<li>Coding</li>
<li>Graphics</li>
<li>Database</li>
<li>Support</li>
<li>More</li>
</ul>
</div>
<ul id="quicklinks">
<li>Quick Start</li>
<li>Tag Helper</li>
<li>HTML</li>
<li>CSS</li>
<li>Photoshop</li>
</ul>
<div id="wrapper"></div>
</body>
</html>
CSS
body{
background:#fffffc;
margin: auto auto;
}
#header{
background:#e5e5e5;
height:35px;
width:100%;
border-bottom: 1px #c9c9c9 solid;
}
#headerlinks{
position:relative;
display:inline;
float:right;
margin-right:5%;
bottom:37px;
}
#headerlinks li{
display:inline;
padding-left:25px;
}
#headerlinks li a{
color:#777777;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}
#headerlinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}
#headerlinks li a:active{
color:#00B2EE;
display:inline;
font-size:18px;
font-family: sans-serif;
text-decoration:none;
}
#logo{
position:relative;
color:black;
margin-left:5%;
top:5px;
}
.logoclass{
color:#212121;
display:inline;
font-size:24px;
font-family: sans-serif;
text-decoration:none;
}
#quicklinks{
width:90%;
margin-left:auto;
margin-right:auto;;
height:25px;
background:#e5e5e5;
border-bottom: 1px #c9c9c9 solid;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
top:-46px;
position:relative;
clear: right;
}
#quicklinks li{
position:relative;
top:2px;
display:inline;
padding-right:20px;
}
#quicklinks li a{
color:#777777;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#quicklinks li a:hover{
color:#a3a3a3;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#quicklinks li a:active{
color:#00B2EE;
display:inline;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#wrapper{
position:relative;
top:-62px;
margin-left: auto;
margin-right: auto;
width:90%;
height:100%;
background:#fafafa;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
}
Here's the solution I always use.
http://www.cssstickyfooter.com/
You set:
html, body {height: 100%;}
Add your 300px bottom padding to main wrapper and then negative margin -300px to footer to overlay it above that padding.
Use a huge wrapper for everything except the footer:
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
Check out that link for more.
Cheers!
Using height 100% will take up 100% height of the container - so you'd need to set body and html to 100% height too.
I think that you wanna stick the #wrapper at bottom of the page (except some space from bottom)
I've changed your code in the fiddle: http://jsfiddle.net/FgGn5/
#wrapper{
position:absolute;
bottom:20px;
margin: 0 5%;
width:90%;
height:20px;
background:red;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
}
It needs an absolute position to stick to the bottom. Because of the absolute position, we are forced to specify margin-right and margin-left. Fortunately because of the percent base width, it's simple.
Hope it helps.
In my experience, you'll have the best success across the various common browsers by employing a JavaScript solution. I would strongly suggest using jQuery to make your life a little easier. Then you could essentially set the #wrapper DIV equal to the body height minus the #header and #quicklinks. It would look something like this:
var windowHeight = $(window).height();
var headerHeight = $('#header').outerHeight(false);
var linksHeight = $('#quicklinks').outerHeight(false);
var wrapperHeight = windowHeight - (headerHeight + linksHeight);
$('#wrapper').css('min-height', wrapperHeight);
Note: I'm making using of min-height, because the contents of the #wrapper DIV may actually already push it to the bottom of the screen.
See this fiddle for a quick and dirty example: http://jsfiddle.net/HLJJc/
I have some CSS and HTML for horizontal tabs that works perfectly in jsfiddle. However, in both Firefox 13 and IE6 (the browser I most need this to work in) the tabs are displayed as a vertical unordered list.
Here is the CSS:
.tablist
{
list-style:none;
height:2em;
padding:0;
margin:0;
border: none;
}
.tablist li
{
display:inline-block;
float: left;
}
.tablist li a
{
float: left;
margin-right:0.13em;
padding:0 1em;
text-decoration:none;
border:0.06em solid #000;
border-bottom:0;
font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
color:#000;
background-color:#ccc;
/* CSS 3 elements */
webkit-border-top-right-radius:0.50em;
-webkit-border-top-left-radius:0.50em;
-moz-border-radius-topright:0.50em;
-moz-border-radius-topleft:0.50em;
border-top-right-radius:0.50em;
border-top-left-radius:0.50em;
}
.tablist li a:hover
{
background:#3cf;
color:#fff;
text-decoration:none;
}
.tablist li#current a
{
background-color: #777;
color: #fff;
}
.tablist li#current a:hover
{
background: #39C;
}
And here is the HTML:
<div class="tablist">
<ul>
<li><strong>Tutorialsphere</strong></li>
<li><strong>Photoshop</strong></li>
<li><strong>Illustrator</strong></li>
<li><strong>Fireworks</strong></li>
<li><strong>Flash</strong></li>
<li><strong>CSS</strong></li>
<li><strong>PHP</strong></li>
</ul>
</div>
For a while this was working in Firefox and I don't remember changing anything -- but I must have.
Any advice is appreciated.
Regards.
IE6 doesn't support inline-block. As such, it's just ignoring your display property and leaving it at its default.
I don't have IE6 handy, but try display: block; float:left to this selector: .tablist li a
I'm making a vertical unordered block list (inside a div), in which I have a border under each li. But somehow the borders don't fit the whole width of the div. I guess the ul has to exactly fit in the div in order to do this, but I don't know how.
This is screen shot of the div and the ul in it:
And this is the CSS code I'm using:
.stats-list li{
zoom: 1;
border-bottom:1px solid #ececec;
border-spacing:30px;
display:block;
text-align:left;
margin-bottom:20px;
color:#ffffff;
height:40px;
}
.stats-list ul{
list-style-type:none;
}
I've never come across this problem before. Does anyone have any solution? Thanks.
UPDATE (HTML code):
<div class="checkin-stats-right">
<ul class="stats-list">
<li>bla blaaa</li>
<li>blaaaa</li>
<li>blaaaaaa</li>
</ul>
</div>
Another update (CSS code of the parent div):
.checkin-stats-right{
background-color: #cfcfcf;
width: 320px;
height: 180px;
margin-right: auto;
float:left;
margin-left:25px;
margin-top:25px;
}
By default, the UL element usually has a padding-left set to a certain amount of pixels. Try this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.stats-list li {
zoom: 1;
border-bottom:1px solid #ececec;
border-spacing:30px;
display:block;
text-align:left;
margin-bottom:20px;
color:#ffffff;
height:40px;
}
ul.stats-list {
list-style-type:none;
padding-left: 0;
}
.checkin-stats-right {
background-color: #cfcfcf;
width: 320px;
height: 180px;
margin-right: auto;
float:left;
margin-left:25px;
margin-top:25px;
}
</style>
</head>
<body>
<div class="checkin-stats-right">
<ul class="stats-list">
<li>bla blaaa</li>
<li>blaaaa</li>
<li>blaaaaaa</li>
</ul>
</div>
</body>
</html>
.stats-list ul {
padding-left: 0;
}
Also note that "ul.stats-list" in your HTML doesn't match ".stats-list ul"
I have the following menu. Seems to work in all browser but not IE6 or IE7. What is causing the problem and How can i fix that.
Check working example at http://jsfiddle.net/2ysCC/
#menu_wrap {
margin-top:20px auto 0 auto;
padding:0;
width:780px;
height:40px;
list-style-type:none;
}
.button a {
cursor:pointer;
text-align:center;
font:13px/100% Arial, Helvetica, sans-serif;
font-weight:bold;
position:relative;
min-width:50px;
height:20px;
float:left;
padding:10px;
padding-right:0;
text-decoration:none;
}
.Red, .Red .button a {
color:#faddde;
background: #ed1c24;
}
.button:last-child a {
float:left;
border:none;
}
<ul id="menu_wrap" class="Red">
<li class="button">Home</li>
<li class="button">portfolio</li>
<li class="button">Latest</li>
</ul>
This is how it looks in IE7
Add 'display: inline;' to your 'li'.
#menu_wrap .button {
display: inline;
}
Here is an article describing the bug in further detail: http://css-tricks.com/501-prevent-menu-stepdown/
Float the li tags instead of the a tags:
.button {
float: left;
}
JSFiddle
Try to remove position: relative and make it float: left
Use this CSS, float left element <LI>
li.button{
float: left;
}