I have a navigation layer, and I cannot seem to get the links to center within.
This is the stylesheet I am using
.Layer1 {
position:absolute;
width: 10%;
height: 95%;
list-style-position: outside;
list-style-type: disc;
background-color: #D2FFFF;
}
.Layer1 a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 600;
color: #0066FF;
text-decoration: none;
text-align: center;
}
Using standard a href links makes no difference, nor does specifying the style to be a href. I am wondering what I am missing.
Have you tried adding:
text-align: center;
to .Layer1 {}?
I am assuming by your style properties that you are applying them to a <ul> element. They have pretty wacky default padding/margin properties (a good reason to always use a reset). If you set the text-align: center; as suggested by Stuart AND then set padding: 0; it will be centered as you might expect. Just tested it on IE and FF.
Links are inline elements, so setting text-align center on them won't achieve anything. Try making the link a block with an assigned width and then applying text-align center.
Is layer 1 a div or a ul? if it is a div, text-align: center should work, as long as you haven't set display: block on your a tags.
to center a block element, you need to use margin: auto. to center an inline element, it is text-align: center. if that doesn't work, it has to do with your markup, or some other way that styles are getting overridden. I would highly suggest using firebug to see what is going on, I used to have these "wtf is going on" moments all the time with html, but since getting good with firebug they rarely last more then a few minutes.
The other thing is text-indent is for indenting the first line of a paragraph. use padding-left to add whitespace inside a block element, or margin-left to add it outside.
Related
I'm working on my portfolio site, and I have no idea how to get rid of the white space.
Based on the inspect element there is styling to ul.AMSI but it is not used in my styles.css
image is hosted at
https://i.imgur.com/jWRzy86.png
I tried to inspect element, but it doesn't help.
Any hints on this will be much appreciated.
URL : https://portfolio-thomas-2019.herokuapp.com/
update
Thanks again for the support
what I have tried
removing all AMSI Li padding and margin
.AMSI li {
list-style: none;
display: inline-block;
text-align: center;
color: #EC7108;
}
commented out margins and paddings in different areas around my issue in hopes of finding the issue but I cannot find it.
I went to the extremes of changing the body background to the hex #EC7108.
Given my experience I don't know of any other angles to approach my issue but ask all the great developers out there.
The <ul> element is part of the problem. You should add this style to it
.AMSI {
margin-bottom: 0;
padding-bottom: 0;
}
this by itself does not fix it. However, there is a stray <p></p> on the page, just after this <ul> element.
You should remove this <p> tag (assuming it's empty because you are not using it.)
This <p> tag has a margin-bottom of 1rem which is causing the white space
I just looked at the page and it would appear the problem is related to the style associated with the un-ordered list your social media icons are in.
.AMSI li {
list-style: none;
display: inline-block;
text-align: center;
color: #EC7108;
padding: 4px;
margin-bottom: 10px;
}
The margin bottom is most likely the problem.
There is margin-bottom in your ul class="AMSI" you need to set margin-bottom: 0
And you got a p tag below ul class="AMSI" got empty content inside and it got margin-bottom also. Then just remove it too.
So, I've looked around SO, and I've found the inverse of this question mostly everywhere. That makes me feel this is either a rarer occurrence, or something trivial that I just can't figure out.
https://jsfiddle.net/je5dpqrL/
The above jsFiddle shows that I have an <h2> element within which I've put an anchor tag with the pull-right class of Bootstrap. Since I want the anchor to display in a smaller font, I'm using font-weight and font-size. Now, since it's floating, the text is centered.
Is there any way to align the text so that the baseline of the Title and the <a> element is the same?
You can adjust the vertical position of the <a> with line-height (and use for example em to make it relative size):
.cl {
font-weight: normal;
font-size: 40%;
display: inline-block;
line-height:4em
}
This is what you need https://jsfiddle.net/p05bu4c2. Create a span inside the link
.cl {
font-weight: normal;
font-size: 40%;
display: inline-block;
}
.cl span {
line-height: 1;
vertical-align: bottom;
}
h2 {
border:1px solid #ff0000;
}
<h2>Title <a class='pull-right cl'><span>Stuff</span></a></h2>
So, The following code seems to work:
<h2>Text<a class="pull-right"><span class="text-right" style="display:inline-block">Test</span></a></h2>
Turns out that adding an .inside-block to an element inside the .pull-right class seems to fix it. No need to play around with line-heights
JSFiddle: https://jsfiddle.net/je5dpqrL/10/
EDIT: Thanks to Diamond for this suggestion of adding an element inside the <a> tag, although the CSS is completely different from the one suggested by him.
I have HTML as shown in http://jsfiddle.net/Lijo/LLq3v/1/
I need to put the following two div contents in one line.
Tax Report 1
: Frequency - Weekly
Though I have put a inline display, it is coming in two lines. What is the missing point here?
Making the container div inline will not create the effect you want. That will cause the container itself to act as an inline element see http://www.tizag.com/cssT/inline.php.
The best way to create the effect you want would be to float the inner divs to the left. Provided that they are narrower than the container then they will sit next to each other.
Making divs inline is usually frowned upon in web development however as commented below there are exceptions. This is from a post on a similar topic
<!-- An inline div is a freak of the web & should be beaten until it becomes a span
(at least 9 times out of 10)... -->
<span>foo</span>
<span>bar</span>
<span>baz</span>
<!-- ...answers the original question... -->
found here. Spans exist for a reason.
To float the div's left modify your CSS to be:
.reportTitle
{
font:bold 10pt Arial;
float: left;
}
.reportFrequency
{
font:normal 10pt Arial;
float:left;
}
But I would recommend replacing the divs with spans.
Try this fiddle update
.reportTitle
{
font:bold 10pt Arial;
float:left;
}
.reportFrequency
{
font:normal 10pt Arial;
float:left;
}
You have made the container an inline element, but the inner elements are still block elements, so they are displayed one below the other. Make the inner elements inline instead.
Demo: http://jsfiddle.net/LLq3v/5/
You can also use display: inline-block if you need to preserve the ability to set width or height. Oh, and I got a nice underline.
http://jsfiddle.net/4yqJ8/
.reportTitle {
display:inline-block;
}
.reportFrequency {
display: inline-block;
}
Use spans instead of divs for .reportTitle and .reportFrequency . http://jsfiddle.net/LLq3v/7/
If you want something to behave like an in-line element then you shouldn't code it as a div, you should instead use an inline element. Inline Elements on MDN . It's true that you can use css to do all the work, but there are reasons not to go that way
You're making life unnecessarily difficult for yourself
You're making the html less semantic, ie: a complete pain to interpret on it's own.
Also, if you want to make sure they always stay on one line, even when the parent container is too narrow, you can give it the value, white-space: nowrap
You have to set display:inline to elements which you want to be displayed inline, not the container element.
In your case, that would be .reportTitle and .reportFrequency, but not .repeaterIdentifier, which is the container element.
.reportTitle
{
font:bold 10pt Arial;
display: inline; /* HERE */
}
.reportFrequency
{
font:normal 10pt Arial;
display: inline; /* HERE */
}
.repeaterIdentifier
{
border-bottom:1px solid #A7A7A6;
margin: 0 0 5px 0;
display: inline /* This can be removed */
}
Live demo: jsFiddle
Any ideas why?
http://jsfiddle.net/FHUb2/
.dashboard-edit,
.dashboard-delete {
height: 30px;
width: 50px;
background: url("https://i.stack.imgur.com/kRZeB.png") no-repeat top left;
text-indent: -9999px;
}
Edit
Delete
Apart from the reason that text-indent doesn't works on inline elements. another reason is if your element or one of its parent has been set with text-align:right
So make sure your element has been set with text-align:left to fix this.
text-indent does not work on inline elements and <a> is an inline element so you can define display:block or display:inline-block to your <a> tag.
.dashboard-edit,
.dashboard-delete {
height: 30px;
width: 50px;
background: url("https://i.stack.imgur.com/kRZeB.png") no-repeat top left;
text-indent: -9999px;
display: inline-block;
}
Edit
Delete
<a/> tags are not 'blocks'
add the following:
display: inline-block;
In my case text indent was not working on H1 because of :before pseudo tag I used to correct a fixed header positioning problem
.textpane h1:before, .textpane h2:before, .textpane h3:before {
display:block;
content:"";
height:90px;
margin:-90px 0 0;
}
This applied to H1 elements with negative indent hack showed text on top of the images in FF & Opera
Keep in mind that (if you care) with inline-block the text-indent image replacement technique will fail in IE7. I recently had a heck of a time figuring that one out. I used this technique for IE7 and it works:
.ir {
font: 0/0 a;
text-shadow: none;
color: transparent;
}
I had same issue, I checked display and text-align. finally I find out.
I was working on rtl design and in the theme the direction changed to rtl.
You can change the container or each element to ltr to fix the issue.
dashboard-edit, .dashboard-delete {
direction: ltr;
}
I am having an issue with a particular aspect of a web dev that I am doing at the moment with regards the css styling.
What I have is the following HTML:
<div id = "spaninsidea">
<ul id="spantest">
<li><a id="nav-button-one" href="javascript:return false;"><span>Link 1</span></a></li>
<li><a id="nav-button-two" href="javascript:return false;"><span>Link 2</span></a></li>
</div>
Styled with the following CSS:
#spaninsidea { background: #494949; padding: 5px 5px 5px 37px; overflow: hidden; margin: 0 0 10px 0; }
#spaninsidea li { display: inline;}
#spaninsidea li a { text-transform:uppercase; text-align:center; border-radius:5px;
display: block; margin-right:50px; width: 100px; height: 100px; background-color: green;
float: left; }
#spaninsidea li a span {background-color:orange; margin-top:50px}
What I am trying to get is the spaned text inside the link to sit in the middle of the a tag. When I try to apply the margin setting on the span it simply sits still, however if I change the font color etc it plays cricket. I cant figure why it styles but wont budge.
I will confess the front end stuff is new to me so if there are any glaring issues that you can see in general please do point them out.
Cheers
Usually you shouldn't have a span within an a. That would be the first part... I would suggest try to apply a text-align:center; to the span as well.
Update: See a working version here: http://jsfiddle.net/2eLer/ You just have to set the line-height of the span equal to or greater than the height of the a.
It's important to remember that spans are inline elements not block elements and as such, do not respond to margin and padding like you would think they do.
There is a css display property called "inline-block" that allows elements to float like spans and other inline elements do, but also makes them behave like divs with regards to margin and padding.
You shouldn't use <span> at all, but change the padding property of the link itself.