I am new to CSS so please don't be to harsh on me. I am trying to place the yellow background DIV right below the "Header" DIV, but for some reason, it seems to place a padding before and after and I don't really understand why. If I remove the list, than the problem disappears.
This is the HTML code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<link rel = "stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="headerDiv">
<p>Header</p>
</div>
<div id="listDiv">
<ul>
<li>Menu item 1</li>
<li>Menu item 1</li>
<li>Menu item 1</li>
<li>Menu item 1</li>
</ul>
</div>
<div id="mainviewDiv">
Main View
</div>
<div id="footerDiv">
Footer
</div>
</body>
And this is the CSS:
#charset "utf-8";
/* CSS Document */
div#headerDiv { background-color:#F00;
height:100px;
position:relative;
}
div#listDiv {background-color:#FF0;
}
div#listDiv ul {list-style-type:none;}
div#listDiv li { display:inline;}
div#mainviewDiv {background-color:#060;}
div#footerDiv {background-color:#999;}
I don't know if you have tried this, but adding this to the top of your CSS file might help you out:
*{
margin:0;
padding:0;
}
But when you publish your website use Eric Myers CSS reset
And like Maxime Morin said, you might want to check out http://nicolasgallagher.com/about-normalize-css/
set your #listDiv and #headerDiv to have a margin:0px;
Renders fine in Chrome telling me you're probably using IE. You can solve issues like this by using a CSS reset http://meyerweb.com/eric/tools/css/reset/ which sets all your CSS elements back to 0 so all browsers start at the same point, overriding some of their built in default CSS.
The thing to keep in mind about resets is you know have to style each element you use. For example lists will have no padding, no default list style etc. You can of course remove some items from the reset but that sort of defeats the purpose of them.
The problem is probably the top margin of the ul element, due to collapsing margins.
Also make sure the divs don't have a margin and padding (which they probably have not, because divs don't have margins by default.
People often use CSS reset like this to remove all those margins and paddings on all elements. After that, you can add specific styling where you need it. You should consider using that once you start the 'real' styling.
Some tags has default styles - even if you don't really declare them.
You can override this rules for example by adding simple:
margin:0;
padding:0;
into your CSS declarations.
Your Unordered list is creating left padding of 40. Replace your code with this:
div#listDiv ul {list-style-type:none;
padding:0;
}
You will come across a lot of default styles troubles if you're just starting out. Keep at it and you will learn. We all had to start somewhere!
Related
I have trouble with my html/css code. I'm making a portfolio website and I have a horizontal navigation bar at the top, with .png images as navigation buttons and a mouse-on/mouse-over effect (the letters are supposed to turn grey with the mouse on it).
I had quite some trouble aligning the buttons horizontally but now they're placed where they're supposed to be, the only thing is suddenly they don't work as links anymore and the mouse-on/mouse-over effect is gone.
This is my code:
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<html>
<head>
<title>Menu</title>
<style type="text/css">
body
{background-image:url('menubg.png');}
{background-color:#FFFFFF;}
#navlist{margin:0;position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:relative;top:0;}
#navlist li, #navlist a{height:64px;display:inline-block;}
#about{left:0px;width:145px;}
#about{background:url('about1.png')}
#about a:hover{background: url('about2.png')}
#amfi{left:0px;width:168px;}
#amfi{background:url('amfi1.png')}
#amfi a:hover{background: url('amfi2.png')}
#personal{left:0px;width:202px;}
#personal{background:url('personal1.png')}
#personal a:hover{background: url('personal2.png')}
#inspiration{left:0px;width:202px;}
#inspiration{background:url('inspiration1.png')}
#inspiration a:hover{background: url('inspiration2.png')}
#cv{left:0px;width:65px;}
#cv{background:url('cv1.png')}
#cv a:hover{background: url('cv2.png')}
#contact{left:0px;width:128px;}
#contact{background:url('contact1.png')}
#contact a:hover{background: url('contact2.png')}
</style>
</head>
<body>
<ul id="navlist">
<li id="about"></li>
<li id="amfi"></li>
<li id="personal"></li>
<li id="inspiration"></li>
<li id="cv"></li>
<li id="contact"></li>
</ul>
</body>
</html>
and this is my website is here, where you can see my problem.
I would be really thankful if you can help me out!
I think problem here is you just place an anchor tag but in browser it is not added on particular action I mean you have given background image on <a> but there is no content present inside tag, keep in mind whenever you place hyperlink it should on some text or img
So instead of using empty tags use an image or text inside it and use javascript or jquery to change img src i.e
<img src="background/image.png">
your <a>s have no widthandheight the moment you will declare those in some way everything is going to be ok
i suggest to give property of widthandheight to <a> element instead of <li>
for example #about a{width:145px;height:64px} instead #about{width:145px;height:64px}
Try like this
#about{left:0px;width:145px;}
#about{background:url('about1.png')}
#about:hover{background: url('about2.png')}
Or like this
#about a{left:0px;width:145px;}
#about a{background:url('about1.png')}
#about a:hover{background: url('about2.png')}
Add this to your stylesheet and your issue will be solved.
#navlist li a {
display: list-item;
}
Hope this helps.
I need to vertically align the Facebook and Twitter share buttons. This is how I render them:
<a name="fb_share" type="button" share_url="http://www.livkontrol.com/blog?id=1"></a>
Tweet
Even though they are almost the same size, one appears much on higher than the other. They also seem to ignore any kind of CSS rule I apply to the link element. Does anyone knows how to override the CSS of these elements and have them vertically aligned side-by-side?
I've had the same issue. Facebook uses an inline tag that sets the text on the bottom, causing it to render below twitter and facebook. My solution is to override it by placing CSS after the actual button call. Works nicely:
<style media="screen" type="text/css">
.fb_iframe_widget span
{
vertical-align: baseline !important;
}
</style>
The call modifies facebook's own CSS style.
the answer provided by Marie doesn't seem to work anymore.
For me this does the trick:
html:
<ul class="social">
<li> put button markup here </li>
<li> and next button </li>
...
</ul>
css:
.social li{
display:inline;
}
.fb-share-button{
position:relative;
top:-7px;
}
it might be neccesary to adjust the value for top, depending on the button style/size, future changes.
ps: I know this is an old question, but google likes it..
The correct answer is here
style="height:20px; vertical-align: top;"
I got it to align by styling the first Facebook span with !important to override its inline style:
.fb-like > span {
vertical-align: baseline !important;
}
Tho I'm not sure if this will work on all browsers.
This worked for me, added to my own css.
.fb_iframe_widget span{vertical-align:inherit !important;}
Story short I have widgets sidebar. I style it like this:
.widgets ul {padding: 10px}
Now one of the ULs inside widgets I want to avoid padding from it, but keeping all other ULs use default padding of 10px.
So i tried to give class to children UL which I want no padding on like this
.tabs {padding:0}
I tried ul.tabs, and .widgets ul.tabs nothing seems to take effect. It still receives padding 10px. And I can't afford to do custom padding for every UL inside the widgets.
Can you please tell me what I am missing ?
The html is pretty basic.
<ul class="widgets">
<li><h2>Widget title 1</h2>
<ul>
....my widget content
</ul>
</li>
<li><h2>Custom widget 1</h2>
<ul class="tabs">
...this one I want to have padding:0..
</ul>
</li>
</ul>
Thats the html basic framework. I set padding:10px to any ul in PARENT widgets ul but I want specific custom widget to have its own custom styles, I can't do it :( in this case ul class=tabs
The "C" in CSS stands for "cascading". Learn about the cascade and you will see that your second rule is less specific than the first, so the first wins.
In general, the rule with more class selectors wins, and #ids trump most stuff.
To answer your question, adding specificity will do it.
.widgets ul.tabs {padding:0}
(assuming the .tabs is indeed on the ul like you said.)
A more specific CSS selector should override a less specific one. So your experiment with using .widgets ul.tabs should work. Is it possible that when you tested that, your browser had cached an earlier version, or some such?
Here's my sample HTML page. First I tried it the way you had it; it didn't work (as it shouldn't). Then I changed it to what is here, and it worked (in Firefox).
<html>
<style>
.widgets ul {padding: 10px}
.widgets ul.tabs {padding:0}
</style>
<ul class="widgets">
<li><h2>Widget title 1</h2>
<ul>
....my widget content
</ul>
</li>
<li><h2>Custom widget 1</h2>
<ul class="tabs">
...this one I want to have padding:0..
</ul>
</li>
</ul>
</html>
example of what dman is talking about, with your code:
http://jsfiddle.net/SebastianPataneMasuelli/8WRam/
( i think you might have missed the 's' in .widgets )
Simple question - what part of my CSS do I tweak to adjust the gap between a bullet/number and the first text character in an HTML list?
Bonus question - I've seen it mentioned here that controlling table spacing by adjust padding on table tr td {} is bad practice, but I haven't seen someone explain how you're really supposed to do it...?
margin and padding should do it.
i see no reason why you can't have padding on a td. i do it and it works well. i think what people are moving towards now is a model of using divs and placing them like tables using css.
<html>
<style>
ul {}
li { padding:0 0 0 30px ;}
</style>
<body>
<ul>
<li>one</li>
<li>two</li>
</ul>
</body>
</html>
Greetings,
I'm trying to create a pagination panel for one of my lists and want to make it centered. Currently it looks like:
<div class="panel">
<div class="page">1</div>
<div class="page">2</div>
<div class="page">3</div>
</div>
So I'm basically trying to make all of the "page" div elements go to the center of "panel" container, like this:
_____________________________
| 1 2 3 |
------------------------------
Is there a way to implement that without knowing the width that "page" elements need (there could be 3 or 9 pages and both situations should be handled properly).
Thanks in advance.
Is there any reason you want the pages to be <div>s? If you make them a <span class='page'> (which is more semantically correct imho) and apply text-align: center; to the panel you get the effect you want. Otherwise you could do display: inline; on the pages, but for that you might as well go to <span>
do you have to use divs for the numbers?
i would replace those divs with spans instead and then apply a text-align:center to the outter div (.panel)
As this is a list of numbers, you shoud consider placing them in a list to be semantically correct. Shove them into a UL, style that with CSS and you're golden.
Like so perhaps:
<div class="panel">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
And style in CSS as this:
.panel{text-align:center; }
.panel ul{list-style-type:none; margin:0 auto; padding:0; overflow:hidden; }
.panel li{display:inline; }
.panel li a{padding:5px; margin:0;}
Play around with the padding and margins. Always a good idea to add some fatness to your links when they're used in pagination, tabs and menus.
Tested in Opera 9, FF3, IE6, Chrome