I tried for so long to get rid of the spacing , can someone tell what I need to do.
I am new to web development.
Thanks in advanceyou can see the white line spacing about my menus
This is most likely because the <body> tag of your page has a margin. You can remove this with the following CSS:
html, body {margin: 0; padding: 0;}
The easiest way to figure this out is to use a tool like Chrome Developer Tools or Firebug to check your elements of your page. It will quickly show you where your CSS issue is.
Basically.. Just use this CSS
#nav {
margin-bottom:0;
padding-bottom:0;
}
#menu {
margin-top:0;
padding-top:0;
}
Replace nav and menu with you tag, ID, or Class name you used. Since I don't have your code, I can only go so far with customization.
I also just wrote it to close THAT gap.
Related
I have removed small dots in ul > li by css style:
li{list-style:none;}
But there are some small dot in <li>tag now. How can I remove them. I have searched a lot and used li,ul{display:block; list-style:none; list-style-type:none; .....} too. But nothing worked. Inspecting elements was not helpful. Would you please help me remove these blue small dots?
You are using correct css but you have applied it on li tag, It should be on ul tag.
Use following css:
ul{list-style:none;}
You can remove bullets by setting the list-style-type to none on the CSS for the element, for example
ul
{
list-style-type: none;
}
You might also want to add padding:0; margin:0; to that, if you want to remove indentation as well.
See Listutorial for a great walkthrough of list formatting techniques.
Remove it by making it a link(a tag) and then disable the link if don't want it.Maybe an indirect way would help
I'm trying to create a top menu bar like in stackoverflow (but with fixed position).
JSFIDDLE Demo
There is a space on the left and at the top of the menu bar. How can I remove that space?
Thank you in advance...
By reseting margin & padding : http://jsfiddle.net/yw4e69qo/1/
Simply
html * {
margin: 0;
padding: 0;
}
But more comprehensively - dive deeper into this topic: http://meyerweb.com/eric/tools/css/reset/
It's very useful :)
body{
margin:0;
padding:0;
}
#nav{
margin:0
}
This will solve you problem without changing the menu postiton of menu items
#nav {
padding:0;
margin:0;
}
ul elements always have a default padding on the left side because of the list-style property. If you inspect the element in the console you can see exactly what is creating the margins you see. So simply putting the following will fix the problem for you:
#nav {
margin: 0;
padding: 0;
}
Also you should look into using a reset.css file so you don't have to do the resetting like this yourself on every list on your page. Using global selectors in your css like so:
ul {
margin: 0;
padding: 0;
}
to reset all elements is considered bad practice since it will slow down the execution of the code since it always have to check if the selector is part of the global selector. Hope this answer helps.
I am using a combination of ul and li tags for a menu and I use display box and a background color to display it as buttons the problems is as soon as I enclose the a tags using li the buttons seem to be shifting to the right a bit like a indentation or something .
I tried
list-style: none;
but that doesnt work could anyone suggest a workaround this problem..
Thanks any help would be appreciated
Thanks everyone for the effort +1 to all answers
Set padding-left and margin-left on the ul to 0.
Have you reset the default margin and padding styles?
ul,li {
margin:0;
padding:0;
}
You should check the margin and padding of the UL and LI elements, and set them to a specific value. Such as:
margin: 0;
padding: 5px;
A UL is typically styled to display with an indentation from the left, although it might also be the LI in some browsers (I believe).
In Firefox (w/Firebug), Chrome and IE9, you can inspect the applied styles using the developer tools available. This really helps to understand where issues are cropping up like this in your displayed elements.
http://getfirebug.com/html
Also, just in case you haven't seen it before, look at the box model:
http://www.w3.org/TR/CSS2/box.html
A ul and/or li element will be given a default margin and/or padding by the browser. Try adding margin: 0; padding: 0 to your ul, li {}.
Better still, use a CSS Reset to save you the hassle with this, and many other, elements. I recommend this one: http://meyerweb.com/eric/tools/css/reset/
There's a ton of blank space at the bottom of my page - http://shop.promaholics.com/? (It loads slow on the dev server, sorry).
I've been through the CSS lots looking for min-height type attributes but can't find any that would be causing this. Perhaps I've gone blind.
Any ideas what I can do to reduce that blank space at the bottom?
Thanks!
its the UL with class level0
right... you have a dropdown menu in "favours" in the menu that is causing the problem... its got too many elements (see if you mouseover "favours" it will be the length of your page).
Its because the script isn't hiding the element - its just moving it 10000 px to the right... :/ can you change this by using display:none;?
Change to this...
/* 2nd Level */
#nav ul { position:absolute; width:15em; display:none; border:1px solid #452915; }
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { display:block; top:39px; z-index:999; }
I tried it with disabling javascript and it removes the blank space at the bottom. I'm not sure in which script it's affecting it yet.
If you remove the class from the main-container col1-layout div then the blank space is greatly reduced - try looking for stray CSS in that class.
Edit: Wait, that's just because the images are no longer displaying inline. Whoops.
My link is here:
Example Page
I'm using list-style-image: to give my horizontal lists ( very top and bottom ) seperators. I have a class of .first to remove the image from the first li in each list.
Lo and behold in IE6, it doesn't work. What happens is that the bullet images are not being displayed, and also the bottom few pixels of the text appears to be cropped.
Screenshot
I've fixed a few 'haslayout' bugs with this page, but I have a feeling its something to do with my rule hierarchy, although no amount of hacking about seems to work for me.
Can someone shed some light on this perhaps? Thanks.
Also, my colour change works on hover, but not the underline, in the same selector?
EDIT OK, I have used the background image technique that yoavf suggests, which seems to do the trick, but the cropping issue still remains. Looks like a separate issue then...
heres my revised CSS
#site-navigation li {
background-image:url(../img/site-nav-seperator.gif);
background-position:0 4px;
background-repeat:no-repeat;
float:left;
padding-left:15px;
}
#site-navigation li.first {
background-image:none;
}
further edit:
Managed to fix the cropping too, by giving the a tag some line-height.
#site-navigation a {
color:#666666;
display: block;
text-decoration:none;
margin-right: 1em;
line-height: 1.1em;
}
this bit feels like a bodge though :)
I know this isn't really a solution, but I would recommend using background-image instead of list-style image.
You'll achive the same effect, and it will work in all browsers.
Looks like a problem with margins and paddings of your objects inside site-navigation.
If you showed your CSS for those elements, we could check it faster :)