In my Website i am mapping the Elements by ID. it is working fine for All the alphabet Letters Except A, But When i click on the alphabet A it is not going to respective Elements please Help me to come out of this. http://dotmappersdesign.com/mclarenpress/glossary/
It does work. For A, as well as the rest. It's just that there is more than one explanation for the other letters, so the effect is not as obvious. See B for example. The first word for B is "Binding", but the first explanation you see after clicking the letter is for "Binding Margin".
The reason for this is that the link brings the anchor to the top of the screen and does not account for your fixed header, so it gets hidden below that.
A possible CSS-only solution would be a combination of padding and negative margin, to move the elements top border, which will align to the top of the screen, to make up for the height of the header. Here's an example that works on your site, but you should make the selector more specific (#glossary p strong, or use the semantically correct description list).
p strong {
display: inline-block; /* Required for the margin/padding to have an effect */
margin-top: -60px;
padding: 60px 0 0;
}
Related
I'm using jekyll to generate my pages and as anyone knows that uses jekyll, the anchor tags on h-tags are automatically generated.
Solutions I am not looking for:
Add padding — my h-tags are using margins because I'm a normal person. Also, my sticky header is 50px tall which means that all my h-tags would need a miniumum of 55(ish)px padding. This causes there to be too much spacing.
Create your own anchor in a span tag — this defeats the point of the autogenerated tags and I'm trying to live a D.R.Y. lifestyle.
Summary: I need to offset the anchor's position without changing the location of the h-tag.
If this has already been answered, I apologize for creating a duplicate question. I could not find the answer to this that was not 'solved' with the previous mentioned 'solutions'.
You may want to use the :target pseudo selector, which matches when the hash in the URL and the id of an element are the same. Therefore, the style will only apply to the h-tag which has been navigated to rather than all of them.
For example, you can use :target::before to add a margin to the top of the selected tag:
:target::before {
content: "";
display: block;
margin-top: -75px;
height: 75px;
}
Here, this technique was used along with an animation which removes the margin after one second so that the margin no longer exists if/when the user scrolls up the page.
Adding this solved my problem.
html {
scroll-padding-top: 70px; /* height of sticky header */
}
Motive
Google receantly added a feature to display only mobile friendly pages in a mobile google search. Since I did already some CSS tricks to adopt mobile devices, I've confidently tried their test, but surprised by the results. Although I could quickly address 2 errors, there is one, that I have difficulty to quickly fix it: Links are too close together.
My site sports a menu like list, that altough I could quickly fix (and I may already have) and adopt to a mobile screen without any change in the desktop appearance, however sometimes links are inevitabely ends up above in each other in the body of each page. Also on one page there is a list that happens to have a list of links each other, but I'm not sure I would like to apply a CSS style to the list elements, to leave greater space in between list items (yet). I'm not seeking help on how to properly resolve that, (Like only leave gap between them, if they are actually end above each other) because it may fall under the "rethorical" question category. (Of course, I'm open to suggestions, if you have one.)
Question
I've decided, that I'll go with an ugly solution for now, that to leave a margin above&below each link regardless, what is surrounded with. Simply changing the margin did not worked. How can I do this? The page I'm currently testing is at http://adam.lehelj.com/ but the sub-domain is in currently only in hungarian.
Edit
The pages are generated from Markdown using PHP Extra library by Michel Fortin and I would prefer not to modify these files. It has a limited feature where to apply classes. (I believe it is for title, code and links.)
The answer as to why you cannot set a margin top or bottom to an achor can be found here, more specifically about the margin top and bottom:
These properties have no effect on non-replaced inline elements.
one solution that you could use would be to set a line-height on your anchors.
With the links on the top left of your example page you can add a class to the anchor tags.
<a class="links" href=""></a>
The css could be something like..
.links {
display: block; /* default is inline and top margin won't work on an inline element */
margin: 3px 0px 3px 0px;
}
With the social links on the page bottom top margins should work fine for you as well. Just adjust the numbers until google is happy with the spacing and sure that people with fat fingers like me aren't clicking on 5 links at a time ;)
li {
margin: 3px 0px 3px 0px;
}
If the rest of your site is more complex add a class to the ul or li or wrapper div around them to differentiate styles as needed.
html
li class="social-links-item"
css
social-links-item {
css here
}
html
<div class="social-links-wrapper">
<ul>
<li></li>
</ul>
</div>
css
.social-links-wrapper li {
css here
}
I am trying to code a page, and for some reason i have a random css spacing issue for my list that i created. On the bottom right i have a random space between the list and its div.
I am styling it fine i think but my code is here at jsFiddle
and it works fine there for some reason. Any ideas?
If needed i can supply the entire page link.
I want that whole entire css list to span accross the entire div but it has a huge gap between the left wall of the div and its list.
The list on the page you link to needs to have its padding (and potentially its margin ... some browsers have different default styles) cleared. Here are some rules you could use to fix this:
#navlist {
list-style-type: none; /* Removes default list style */
margin: 0;
padding: 0;
}
I highly recommend getting the Firebug extension for Firefox. It makes debugging layout issues like this very easy. It also helps you see whether the style rules you are writing are being overridden by a more specific rule elsewhere in your style sheet.
As an aside, you shouldn't be using the center element. That element has been deprecated, and should be handled via your style sheet like so: text-align: center;
I am using the following HTML:
<p>← Back</p>
To create the following:
← Back
Problem is, the left arrow is not vertically aligned in the middle. It appears to be at the lower 3rd.
Question: how do I get the left arrow to be aligned vertically in the middle (of the letter "B") using CSS?
UPDATE:
Is it possible for me to vertically adjust/align this:
Without modifying my HTML, and
Without using an image?
The arrow is a simple character, so it's aligned like the others (it is in the "middle", the creator of the font wants it to be where it is... maybe that's the middle of lower-case character). Maybe it looks different using another font, maybe not. If you have a fixed font and that one looks messy, you could try to use the :first-letter selector (or wrap the arrow in a span or something) to move it up 1 or 2 px (position:relative: top:-2px;).
Another solution would be to use an image for this, like most websites do (and there are many free icon sets out there — my favourite is famfamfam)
You can wrap your arrow in SPAN tag and then play with line-height and vertical-align CSS properties.
Generally you should not do this, you should let it as the font was conceived by its author.
But it you want to change it you can do it like this:
<p><a href="http://www.example.com/">
<span style="position:relative;top:-3px;">←</span>
Back
</a></p>
Note: Use what you need instead of -3px, I used that just to illustrate how the position can be changed.
I think you have to use a image for the left arrow than &larr.
It IS possible to have the &larr in a separate span, have some specific padding to bring the arrow to the right position, or use a specific font that has the arrow at the center, but this will have side effects.
I suggest you use an image.
There are two possible answers to this.
The way you're writing it, this is not a graphical element (arrow) followed by a label ("Back"), but a line of text (inside a paragraph) containing a single character followed by a letter string. So alignment is a purely typographical problem and determined by the font you're choosing. Choose a different font and see if it's more typographically pleasing.
What you want is really not a line of text but two independently placeable graphical elements. Put each inside its own span, give it display: inline-block and position: relative and play with vertical paddings, margins and line-heights until you're satisfied.
You have some options:
1. Put the arrow between span tags before the word Back, add an id to this span object and then assign the style in the css file playing with: padding-top or bottom and also vertical-align or position relative.
2. The second option is using the image as background and then you have to create the style for this link:
li a#link,#link_conten{
background-image: url(../../../img/arrow.gif);
background-position: left top;
background-repeat: no-repeat;
}
In addition, it is not common (from the semantic point of view) to put just the link (tag a) inside a paragraph (tag p). Then you have to deal with the default css rules for tag a and p but of course depends of your design
You could use CSS generated content. This will mean editing your HTML - to remove the arrow. Essentially you're creating a pseudo-element that sits in front of the link, and you can style it however you like, e.g.
a.back:before {
content: "\2190 "; /* Unicode equivalent of ← */
display: inline-block;
padding: 5px;
background-color: aqua;
}
On the downside this won't work in IE 6 or 7. You might be able to work around that with some targeted javascript.
If you don't want to edit your HTML, you could give :first-letter a try. It only works on block-level elements, so you'll need to work accordingly, e.g.
a.back {
display: inline-block;
}
a.back:first-letter {
background-color: aqua;
padding: 5px;
}
I've had trouble getting this to display consistently cross-browser though. IE8 and FF3.6 do rather different things with the code.
I have text within a paragraph tag that that fits snug on the bottom of a div, which you will see in this picture: http://i44.tinypic.com/e05s0z.png
I could put some padding at the bottom of the div to fix this, but there might be multiple divs, depending on how many items are on that page.
What I need to do, is put some spacing between the end of the very last div (class="article") and the text within the paragraph tag.
Here is the css for the article class
.article {
padding:10px;
overflow:auto;
}
Text w/i the paragraph tag
<p>Herkimer County Community College does not
discriminate on the basis of race, color, sex,
national origin, age, handicap, or marital status
in admission, employment, or in any aspect regarding
the conduct of College business.</p>
What should I do?
Give the final paragraph an id - #disclaimer, perhaps - then style that to have padding-top.
<p id="disclaimer">Herkimer County Community College does not
discriminate on the basis of race, color, sex,
national origin, age, handicap, or marital status
in admission, employment, or in any aspect regarding
the conduct of College business.</p>
and...
#disclaimer {
padding-top: 10px;
}
[EDIT]
An alternative to this, based on your comments, would be to surround the article(s) in a div, and give that div.class a bottom-margin/padding style.
If you have other paragraphs on your website and do not want to give it an id or class, then you can also use
.article + p {padding-top: 10px;}
Some old browsers will not be able to make out this selector, though
You could wrap your paragraph in a container that has padding at the top, so it doesn't matter what's above it.
For example, wrap it in a div with the following css
div.finaltext {
clear: both;
margin-top: 10px;
}
Here are your options as far as I see it:
Use the :last-child CSS3 pseudo
class to target the last div. This
isn't supported by IE at all, so
depends how important that browser
is to you whether this is an option,
but at least other browsers would
get the desired effect.
.article:last-child { padding-bottom: 20px; }
Add a class to the last div with the same style as above. This isn't ideal and may or may not be possible depending on how the divs are generated.
Add a class to the p tag with a padding-top value.
Use .article + p selector to target a p tag that is a direct sibling of .article. This is supported in IE7 (I think) but not IE6.
I would always give preference to #1 or #4 as it reduces clutter in the HTML, but as I mentioned IE could be a problem depending on your needs.
(thanks to Residuum for #4)
there is also the first-child and last-child css methods
note: check browser compatability for those you wish to support
It's the construction like this?:
<div class="article">jdhfksdjhfksdhk</div>
<div class="article">jdhfksdjhfksdhk</div>
<div class="article">jdhfksdjhfksdhk</div>
<p>kfdhsjkfdks</p>
You use padding: 10px so the div has 10px inside margin.
If it's a CMS, I'm sure that the text of the paragraph could be wrapped inside another tag (DIV) or maybe a class for the (P). If this isn't the case, may I ask if there's a surrounding wrapper around all of the article divs and the p tag?
If that's the case then you can get to the P tag using CSS, if not, there's no way you achieve this in every browser.
OR... I realized you could do a trick here. but you've got to be sure you have a selectable div on top of the article divs.
It should be something like this:
.article { margin-top: -5px; margin-bottom: 15px; }
so, every div.article will move 5px up, leaving 10px of real margin betwen article divs. but the last one won't have the -5px move up, so you'll end up with 15px bottom margin for the P tag.
You could play with the numbers to make it the most comfortable number. And in case you need more control, then use the padding values you set to 10px in every way and set them accordingly to compensate the margin offset.
Could you simply add a couple of <br/> tags after the last div?