I'm have a question about my site specifically.
These dashes seem to be appearing in between each roll over image. I've looked over the whole code (its pretty simple), and I can't seem to figure out where it is in the code and/or how to get rid of it.
Here's my site:
http://andiamlisa.com/
any help would be great - thanks
Add this to your CSS
#navigation a {text-decoration: none;}
It looks like there is some hidden spacing between elements on Navigation Anchors.
Related
im brand new to coding and in a mad rush to get my website finished before i have to put it live in 4 days. im having serious issues with the menus on my site. i used a drag and drop editor to build it and am customizing small parts using the html element tool where i need to. The problem im having is that the editor as far as i can tell only uses one master css file for styling the menus... which means all my menus regardless on "in editor" settings have 15px padding around them. This is a huge issue for my footer which contains TONS of links. I need to find a way to apply css to only the menus in the footer. (there are a few coppies of the master page meaning theres actually a few footers, one for each master page)
sadly as im so new to code i dont really know what the hell it is im doing here.
but in short i just need to be able to make a little piece of css for my footer that i can apply that will only affect the menus in it and no where else
i dont want to paste the code in here as part of this question as i dont really kno what part to look for and what little i have looked into my code would be like 5 pages long or something. so please if you can help me just let me know what to look for or how to find it (im good at using the google chrome inspect tool) so i can paste only whats needed.
just in case it helps heres the current link to my website.
http://sites.simbla.com/fd066dd7-48f1-6002-53ae-f18c93075f27/careersart_art?misc=1475010324849
I suppose you don't have the options to add classes to your editor. Your footer does not use a footer tag, rather another instance of the div with class 'containerHolder'. What you could do (since the footer is the last instance of this class) is to use the css :last-child selector.
Your code would look like:
div.containerHolder:last-child li {
// css rules here
}
This will only target items inside of your footer. This is not the greatest method, but possibly the only one since you don't have control or knowledge of the markup itself. The above example would only target li's inside of your footer.
I'm not 100% on what you are wanting but you can select all the menu items by using #MP485 ul li as the selector or if you want the links #MP485 ul li a so if you want to edit the padding you can use something like this:
#MP485 ul li {
padding-bottom: 2px !important;
}
If you use !important at the end this should override any other styles.
I am in the process of developing a site for a uni project, and I have built an automatically changing slider while only using css (it is a requirement of this project that I don't use anything else). The problem I'm experiencing is that when the slides change, the left margin begins to add up, and I can't figure out why.
I have tried making a page with just the html and css necessary for the slider to work and it works properly there, but not when incorporated into my main css page.
Any pointers would be appreciated!
The site this can be seen on is http://www.darkmatter-designs.com/
As you can see you have some margin between the images, which makes their widths effectively bigger a little bit. I see you applied a reset in your css, so this is probably coming from the white space in your html. A quick fix would be to put all the li and img on a single line with no spaces or carriage returns between them, like so:
<ul id="css-slider"><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_108.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_62.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_59.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_66.jpg" alt="slider"></li></ul>
I know, it's weird.
I can't figure out what the problem is.. The css is really messy, there is a lot of useless or overwritten properties.. You have to optimize it..
But somehow I found a workaround : set the width of the #css-slider to 864px.. It's not really a proper solution but it works anyway..
i'm starting to learn, a bit on my own, to create a website. Now i have a problem i can't fix. I searched already on the internet but it doesn't work for me.
My navigation disappears when i hover. In some pages it only disappears when i hover my last link and other pages like this one: it disappears by the second link.
i'm starting to get a little hopeless to find a solution. That's why i ask for help!
Remove the html from your css/navigatie.css stylesheet
It is the last line and looks like the following.
/* we need to associate the JavaScript with our main ul*/
<ul id="nav">
You have random <tr> and <td> tags in your html that should be removed at lines 92, 93, 155 and 156 as there is no table declared.
Line 140 an <ol> looks like it was closed with </ul>
In the comments I mentioned that the spacing was your issue and you wanted clarification so here goes. Your navigation has nested lists, links, and images. For whatever reason they all have different heights. All I had to do to fix the problem was to make the nested li have a fixed height of 23px and the problem went away.
Honestly, I would redo the navigation. I can't see a good reason why you have a class called menu being applied to every ul and li in the navigation. It should be really easy to change the heights of the different elements but the way that the navigation is set up I think you're going to have a rough time.
I'm currently trying to follow a tutorial to make an image gallry a-la-Apple but for now, I got a little problem that I can't understand the reason.
Here's the JSFiddle: JSFiddle.
If you check correctly, you should see a white space on top of the second and third li item of the submenu in the slider. The first one doesn't have it.
There's the wanted result: Tutorialzine
If someone can find the reason, it would be appreciated!
Note: I'm using Twitter Bootstrap!
Rule #1 for list-based menus: Put all styling on the A-tag using display:block. Do not style the LI tag except for floats/positioning.
See my tutorial: http://preview.moveable.com/jm/ilovelists/
when I create a list of links and give those links an a:hover state, I want the entire link, including the bullet point, to highlight on hover. But what because my list has a defined width which is wider than the As, the LIs pick up the :hover and change color before the As do. This looks messy! Like this:
http://jsfiddle.net/NgWLR/
See what I mean? It's like the A & the LI are separate entities, triggering at different times.
If I try adding a display:block to the A styling, all I get is weird display issues in Firefox & a slight improvement in other browsers, but it certainly doesn't solve the problem.
I can change the list-style-type to none and put a :before bullet entity on my LIs, like so:
http://jsfiddle.net/tScnS/2/
And that seems to work fine, in Safari & Firefox at least, but as a solution it seems kind of rough/messy/unlikely to be supported in all browsers.
Anyone know a 'bullet-proof' (hah!) way to get this to work, or should I just go ahead and implement in the manner of the 2nd JSfiddle- list-style-none, bullet :before?
Thanks!
You can use li:hover a instead of a:hover to style the link, e.g: http://jsfiddle.net/NgWLR/2/
PS: Please remove remove unrelated code when showing examples.
As per i understand remove display:block from your <a> tag. LIke this:
Check this http://jsfiddle.net/NgWLR/1/