I have a document structure that is similar across multiple pages.
HTML:
<ul>
<li>
<div>
<img src=""/>
</div>
</li>
</ul>
Currently, there is a border around all img elements. The client would like me to remove the border from around the image, because not all images are the same size and they want a uniform look with the borders. I noticed that there was a div wrapping the images, but the div does not have an id or class. How can I select this div in my css?
Thanks
For instance using
ul>li>div {
border: 1px solid blue;
margin: 5px;
padding: 5px;
}
From my point of view, this is the best way to avoid HTML manipulation.
However, if the structure ul>li>div is repeated elsewhere, this can be ambiguous.
Give it a class or ID... Then make the CSS for it.
If there’s no context anywhere, your recourse is to select it by the structure (as least specific as possible, if you like); for example,
li > div > img
But there usually is some kind of context. If your <li> had a class, for example, you could do:
li.contains-image > div > img
Or just
li.contains-image img
if there’s no other image. Does it or one of its parents have a sibling that identifies it somehow? Use one of the sibling combinators!
li.before-the-one-that-contains-the-image + li img
In case you only have these set or cascade of element in the page you can use
<style>
ul li div {
border: 1px solid red;
}
</style>
Otherwise this will add a border on all element matching on the page.
Best is to use an Id or a class on the element.
Related
I'm trying to place a link in Wordpress quickly and we have a pretty complex style being applied to all a href links in the section. Here's a small sample of the selector and the styles within (there's about 40 lines of styles which I held back)
div.content-rotator li.featured-content a {
margin: 0px;
border: 1px solid rgb(34,56,19);
}
Is there anyway I can place a link in this li and override the parent style? It has to appear within the li with class featured-content.
I don't want to touch the existing CSS at this stage so I'd prefer to implement inline styles on the a element.
Thanks
EDIT: Just in case it wasn't clear, the CSS above is coming from the style sheet and I'd like to zero it out.
There's > 50 lines of styles in this though, I've only shown two for brevity so inline replacing them all isn't really an option.
Just use inline styles or/and add !important to overriden CSS definition, like:
<div class="content-rotator">
<ul>
<li class="featured-content">
...
</li>
</ul>
</div>
or
div.content-rotator li.featured-content a.other {
margin: 3px !important;
border: none !important;
}
Give the selected link an ID and just add !important to the styles. I don't think there is a better alternative unless you plan to go through the entire stylesheet.
I began to learn html'n'css, but I've encountered one thing that I cannot explain. I have a html file, that has a div which acts like a link (in the application I am setting the div size and want for the whole box to act like a link). I cannot remove the text underline decoration for the text in the div though (Link1 in the Example is always underlined). The selector should be "any div within a link element", and because the link is red, I think it is correct.
I managed to do this by introducing a special class for removing the underline explicitly (Link2 in the Example is ok), but I would like to have all the menu styles in one place.
The question is, whether can someone explain why the removing deco like this (Link1) does not work. Moreover, I would like to ask if the organization of the menu is a good style, or if I should reorganize the code, e.g: having this for example:
<div>Blabla</div>
and the style:
a.menuitem {...}
a.menuitem div {width:...;}
Here is the minimal (non-)working Example:
<html>
<head>
<style>
a div.menuitem {
text-decoration: none;
color: red;
}
.remove-under {
text-decoration: none;
}
</style>
</head>
<body>
<a href="./index.html">
<div class="menuitem">Link1</div>
</a>
<a href="./index.html" class="remove-under">
<div class="menuitem">Link2</div>
</a>
</body>
</html>
Thanks a lot!
Semantically speaking a <div> should not go inside an <a>. div tags are block elements where anchor tags are inline elements - and block elements should never go inside inline elements. Instead use <span> if you need to stylize something different inline but in your case, additionally, you can add a class to the <a> which would work better.
Here is your new code:
<a href="./index.html" class="menuitem">
Link1
</a>
<a href="./index.html" class="remove-under menuitem">
Link2
</a>
You can have multiple classes to an element by putting a space, so Link2 has the class "remove-under" and "menuitem"
Update your CSS to remove the underline:
.remove-under {
text-decoration:none;
}
In order to get your whole a tag to be a link (not just the text) add the follow css for your menuitem class:
.menuitem {
display:block;
width: 100px;
height: 50px; /* or whatever your desired width and height */
background: red; /* to show that the whole anchor will be link, not just text */
}
This is not the ideal solution. You really should not be putting block level elements inside inline elements.
However, if you absolutely must get it working, you can add display: inline-block; to the div.
a div.menuitem {
text-decoration: none;
color: red;
display: inline-block;
width:100%;
}
.remove-under {
text-decoration: none;
}
You have 2 problems here:
You can't do something like this
<div></div>
because a is an inline element. What you do here is an invalid HTML code. DO it like this:
<div></div>
You try to apply text-decoration:none on the div element and you should apply it to the a element.
a {text-decoration:none;}
I want to make my entire div a link like the a tag. Of course this may be possible with js, but I'm interested in seeing if this is possible to do with only css.
I have this:
#my_div {
width: 200px;
background-color: #090;
}
#my_div:hover {
background-color: #0f0;
}
Where the page structure is:
<div id="my_div">link</div>
You can make inline elements act as block level elements by setting their display property to block:
/* Make all a tags that are decedents of the
element with an id of `my_div` be displayed as block level elements */
#my_div a {
display: block;
width: 200px;
height: 100px;
text-align: center;
background-color: #090;
}
/* Handle the color change on hover */
#my_div a:hover { background-color: #0f0; }
You don't actually need the wrapping div - you can just target the particular a tag directly if you give it a class or id.
You can't make an element with CSS, but you can wrap your div with an a tag instead. It would look like this:
<div id="my_div"></div>
That makes the entire div a link to whatever your href is.
CSS3 does have the content property now, but I don't think you can put raw HTML into it. That would be pretty bad security wise if anyone had access to your .css files...
Anyways, I think the above solution is the simplest way to achieve what you asked.
Try this:
#my_div a {
display: block;
width: 100%;
}
You need to set your pseude class to the a tag not to the div:
#my_div a:hover {
background-color: #0f0;
}
That should do it's work :-)
I think you should check out this question that was posted to stack overflow.
Make a div into a link
It was the first result on Google for how to make a div a link.
Please:
HTML adds structure to content (e.g. chapters of a book, what is emphasized ...)
CSS adds what colors/fonts/placement for those items
Javascript adds makes it interactive.
You weren't clear whether you meant without "a href" or without using the "<a" tag.
If, on the offchance you meant the latter, the only other way I can think to make something clickable go someplace is to make it a form submit button.
The navigation I'm referring to looks something like this:
home | about | contact
So what's the best and most flexible HTML/CSS to use for this type of navigation? The best thing I can come up with is to wrap the delimiters in a span so that I can control the spacing around them. For example:
home<span>|</span>about
Is that the best approach?
This all comes down to your target browsers, and if validating as strict HTML4.01 is important to you (ie: a boss/committee thinks it's a "big deal") or not.
Personally, for purposes of nav-menus, I go the route of wrapping everything in an unordered list.
If 4.01-compliance is important, I'll wrap that in a div.nav
If html5 is cool (which it is, with an oldIE JS-shim, as long as there are no committees involved), I'll wrap everything in a <nav id="main-nav"> or similar.
<ul><li>home</li><li>about</li></ul>
Then in CSS:
#main-nav li { display : inline-block; list-style : none; }
From there, you can set your padding on each <li> element to whatever you want.
You can use the :after pseudo-selector to inject "|" or any custom image you want, after each one (and you can use the :last-child:after to make sure that there's no image after the last one, if that's what you want).
You can even play around with the a, turning it into a block-element, and playing with padding to make the entire li block clickable, and not just the text.
See the oldIE-compatibility hack here: how to make clickable links bigger, if necessary.
You could simply add a left border to every element, except the first one:
HTML:
<ul id="nav-list">
<li>Home</li>
<li>Blog</li>
<li>Link</li>
</ul>
With the CSS:
#nav-list li {
display: inline-block;
border-left: 1px solid black;
padding: 4px;
}
#nav-list li:first-child {
border-left: 0;
}
See the above code in action on jsfiddle!
This is rather cross-browser compatible (IE7+) but it can be easily polyfilled with something like Selectivizr for IE6. Thanks to Rob W for suggesting to use border-left and first-child to reach more browsers!
I'm in the process in coding a web design and i've spent the grandeur of my time thinking how will i be coding this navigation bar, where the <li> have dynamic widths where the background image adjusts to the width of the element.
My idea was to use <span> and slice the background image into three parts.
<li>
<span class="libefore"></span>
MOVIES
<span class="liafter"></span>
</li>
What's the best way of coding this?
Normally this is achieved with a technique called 'sliding doors' have a read over this:
http://www.alistapart.com/articles/slidingdoors/
If you are willing to go with CSS 2.1 :before and :after selectors (See here for supported browsers: http://www.quirksmode.org/css/contents.html), you could try something like this:
HTML:
<li>
Movies
</li>
CSS:
li:before {
background-color: #F00;
content: '\00A0\00A0';
}
li a {
background-color: #0F0;
text-transform: uppercase;
}
li:after {
background-color: #00F;
content: '\00A0\00A0';
}
This keeps your HTML clean without introducing any presentational elements. (ie. No span elements that have no content or hierarchical purpose) Also, it's not a bad practice to use text-transform to take care of any uppercase transformations, just in case you want to change the style one day without having to modify the content.
Here is a fiddle which should give a bit of a starting point to tweak from: http://jsfiddle.net/6Keaa/
Hope this sets you in the right direction...