I've made some links within an <ul> <li>. I made images clickable, linking to a new HTML file. I've got four of those, and I wanted to put two beside each other so I used float:left;.
However, when I create a new <h2> after those images, this <h2> becomes clickable and linking to the HTML file used in the last picture.
I've already used clear:both; but that doesn't work. Any idea about what may be happening here?
Put float: left; on H2 aswell or overflow: hidden; on li elements.
Related
I have some pages on a Wordpress site that have name anchor tags that initially get covered by the fixed/sticky header when clicked. I'm using some CSS that fixes that, but it only seems to work when linking inside the specific page(s).
Here's the code I'm currently using:
a[name] {
padding-top: 178px;
margin-top: -178px;
display: block;
}
Any thoughts would be greatly appreciated!
We now have scroll-margin to handle kind of thing.
From CSS-Tricks:
scroll-margin is used to adjust an element's snap area (the box that defines where the element will be snapped to). Adding
scroll-margin is useful when you need to give an element space from
the edge of the container when snapped into place, but allowing for
situations where each element might need slightly different spacing.
I just started using jsFiddle to make this (https://jsfiddle.net/travism2006/tp2y5pvu/1/)
body .main .leftAd {
border: 4px red dashed;
width: 160px;
}
Skip Links
<div class="header">
<ul>
<li><a>Coding</a>
</li>
<li><a>Web Tech</a>
</li>
<li><a>Data Fun</a>
</li>
<li><a>Robotics</a>
</li>
</ul>
</div>
<div class="leftAd">sss</div>
Can someone explain why the 'sss' disappears + the border not showing?
I played around with the fiddle and found that my ad-blocker was adding 'display: none;' to the elements with the "Ad" substring in them.
Renaming the elements from 'leftAd' and 'rightAd' to 'left' and 'right' made them display as you'd expect.
HTML:
Skip Links
<header>
<ul>
...
</ul>
<\header>
<div class="left-ad"><p>sss</p></div>
OR
<aside class="left-ad">sss</aside>
I would suggest you go back through your code because there are a lot of semantic issues that need to be addressed if you're trying to understand it better. What Vincent said may work, but it is not the best solution. Also the new semantic elements that are added to HTML5 cut down some of the code and make your code more understandable. It beats having to make divs and text elements over and over. Instead of using div elements you should use the header and aside semantic elements which can be used for headers and advertisements respectively. You can float each with simple CSS like you have done. Lastly, you shouldn't name the class attributes left and right by themselves. That is very general and it makes your code harder for others to discern. I used .left-ad and .right-ad and it worked just fine. If you have any additional questions I'm here to help. It's essential that you understand these concepts to make your code easier to read, debug if need be later on, and makes you really understand the semantics behind what your writing.
when I opened your fiddle, the HTML lacked a lot of content. Specifically, the sss that appears here but not in your js fiddle. When a div has no content in your case it collapses in on itself and that's why you see a flat red line because the top and bottom borders are lying on top of each other. In order to make additional space for the added sss container just add custom padding values etc.
<div class="main"></div>
I'm using the code below to jump to different sections of this page
<span id="section1">
Basically when you click the link it jumps to that section but my floating navigation blocks the titles. How do make the page "jump" to "section1" but with a 50 margin?
EDIT: These are acceptable solutions but I forgot to mention that I am using a plug in called "Table of Contents Plus" to create these links. I'm not proficient with javascript and need to know what to modify in the plug in code to add these solutions.
I used your specific page and this answer to come up with a decent solution. The <span> that actually has the anchor id should have the style of position: relative; top: -100px and the inner <strong> that has the actual text should be position: relative; top: 100px. This causes the text to appear where it would normally, but causes the anchor link to send you a bit above the text. You can play with the exact numbers until it looks exactly how you like.
section1:target {margin-top: 50px}
the :target pseudo-class applies properties when you have the id in the URL.
Working with Bootstrap I wanted to make a replica of http://spring.io/projects; a grid of links that are each a bordered panel (might not be the right word...) with some words an a picture inside. I've come to a conclusion, that Bootstrap's Thumbnail component should be right for me.
Having tried to use it, however, I ran into a problem.
If I want the entire panel to be clickable, I have to apply the thumbnail class to an anchor tag (wrapping the anchor into a div with thumbnail doesn't seem to work). Then, inside the anchor tag I've got a div tag with the class caption in it to store some text whose styling I don't want to change upon hovering on the panel.
What this caused is this: the text regained normal colour (as compared to the link colour when used without the caption class, however hovering over the panel causes the text to get underlined, and I'd prefer if that was not the case: it doesn't look very good and the highlight of the border upon hover is already a good indicator of that it is indeed a link.
I was about to just get my css hat out and modify the caption class to not do this, but it doesn't seem like the right course of action; I can't imagine it being desirable behavior for captions to get highlighted like this, and I'd like to use as little custom code as possible (since sticking to standards means I won't have to maintain this code every time I update bootstrap).
So my question is: where am I going wrong? Is it actually bad practice to want the entire thumbnail panel to work as a link? Or should I go ahead and manually scrape the underlining off? Or am I maybe applying wrong classes to wrong tags? Or is the thumbnail component not a right component for me to use altogether in such a case?
EDIT:
Forgot to include the code.
The thing I'm currently using:
<a class="thumbnail text-center" href="#">
<div class="caption">
<h3>Potato</h3>
<p>Some short description of what this exact potato really is about.</p>
</div>
</a>
EDIT 2:
Adding an image of what is currently occurring:
This is with the mouse hovering over it; as you can see, the text is underlined, which is not ideal.
Really weird that you ask this question because I just read a thread on this not so long ago and still have my solution which I have turned into a FIDDLE for you.
If I understand your question correctly, you want the entire panel / div to be a link, which can be accomplished like this: (This is the OP's steps, cant remember them word for word)
Make your Div position: Relative;
create a link
put span tags into that link <span></span>
Style the empty span tag with
CSS:
{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
/* edit: added z-index */
z-index: 1;
/* edit: fixes overlap error in IE7/8,
make sure you have an empty gif */
background-image: url('empty.gif');
}
I think that's all there is to it. Like I said... There is a thread somewhere on this, but I cant remember what it was called.
Hope this can help.
EDIT: So after a long debate, we can forget about the above AND we came to the conclusion that this is possibly what you are after? :)
Add a tiny bit more CSS to your solution and you are sorted...
a.thumbnail:link {
text-decoration:none;
cursor:pointer;
}
Here is an updated fiddle
The solution is to add on the top of your style sheet:
a:hover {
text-decoration: none;
}
Stupid question maybe, but I cannot seem to get the text to wrap around my images. In the editor it looks fine, everything is wrapped around it, but when I save it, there is no wrapping.
example: http://www.beatinganger.com/three-reasons-for-angry-children
remove the float: left; from #left_container p
there's no need to float all the paragraphs you already have the image floating inside the content so it's the only one that needs to float for the p or any other element to wrap around it
It sounds like you may need to add styles to the images, either float left or float right - can't say for sure as the link is broken.
Edit: It is because you have width:100% and float:left set on #left_container p, and the images you are adding are wrapped in p tags. Remove width:100% and float:left and you should be back in business.
as clairesuzy says aswell...
Put a float on the <img> tag. But I suggest to avoid writing css in the tag though, it's not good practice unless you really have to. Do it externally. You can target the image by doing, p img{ float: left; } (basic code), depending on the class or id you've giving the tags.