How can you align the text of an anchor vertically?
I may or may not know the number of lines, so line-height trick can't be relied upon.
Hierarchy is as so: nav ul li a in
<nav>
<ul>
<li>Hello</li>
</ul>
</nav>
Hello must be centered but cannot be wrapped.
The a elements have display: inline-block
Following the solution explained in this thread: How to get display:table-cell support in IE? any pure javascript or jQuery workaround?
You can add some additional code to the list, and adjust the height of the block with the height of the td:
<nav>
<ul>
<li>
<table>
<tr>
<td>
Hello
</td>
</tr>
</table>
</li>
</ul>
</nav>
You can see it working here: http://jsfiddle.net/G4kCz/4/
Related
How can this be achived ? I tried using inline-block , but the siblings move to the new line , i want the divs to move to the sides , any hints ?
http://fiddle.jshell.net/prollygeek/CdE2y/
hover the middle div.
All the divs are inline-block, so to prevent them from going to the next line, try setting the white-space to nowrap for the container:
#container {
...
white-space:nowrap;
}
Here is the working fiddle
What about keeping everything full and centered?
this uses a little trick that comes from the justified list items rule from http://getbootstrap.com/ and using li instead of div
<ul id="container">
<li id="div1">
<p>Col 1</p>
</li>
<li id="div2">
<p>Col 2</p>
</li>
<li id="div3">
<p>COl 3</p>
</li>
</ul>
http://fiddle.jshell.net/CdE2y/5/
Try this: http://jsfiddle.net/prollygeek/CdE2y/
I changed inline-block to table-cell and apply :hover on #container.
I have a ul with a background image next to it. I have a text in a span tag which is not working and I can't figure out why.
This is The HTML code :
<div>
<ul id="first" class="img_yellow_arrow" style="margin-left:120px">
<span class="brightOrange"style="margin-left:5px">3 </span>
<span class="gris">nouveaux e-mails,</span>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
and this my class :
.img_yellow_arrow{
content:url(images/yellow_arrow_2.png);
vertical-align:middle;
}
As I khow we can put an <span> inside an <ul> and I verified with the following code HTML :
<html>
<body>
<h4>An Unordered List:</h4>
<ul><span>x</span>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
I would greatly appreciate if you can help me solve this problem. Thanks in advance
Change your HTML to:
<div><span class="brightOrange" style="margin-left:5px">3 </span><span class="gris">nouveaux e-mails,</span>
<ul id="first" class="img_yellow_arrow" style="margin-left:120px">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
It's currently invalid - <span> tags are not valid child elements of lists so should appear either outside the <ul> element, or within one of its child <li> elements.
See here for further information from w3c
Change your css. Here is the code, http://jsfiddle.net/pTccG/
If you want to use background then, use background- image.
I think here in your code content overlay on the text.
instead of "content" use "background-image"..
.img_yellow_arrow{
background-image:url(images/yellow_arrow_2.png);
vertical-align:middle;
}
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}
Here is the html:
<header>
<img src="cp_logo2.png" alt="Cycle Pathology" />
<nav class="vertical">
<ul>
<li>Events Page</
<li class="newgroup">Rose Hill Rally</li>
There are <li> under this as well as four <li class-="newgroup">
Here is the assignment for the CSS Style Sheet:
"If the list item belongs to the newgroup class, add atop padding space of 25 px to add a bigger gab between that list item and the previous list item."
Ideas?
Sounds pretty obvious:
.newgroup {
padding-top: 25px;
}
I'm designing my first website (for a start-up IT support company) and I have run into some issues in my learning. Problems are:
When I try to put a border around my nav element, it moves the nav box down the side to where it's still on the left, but below the the main (article?) section of the webpage. It also makes the border around my main header part thicker (only the side where the nav box is).
I cannot get the footer to align with the article section (even though both are supposed to be aligned to the center. I suspect the footer is not aligning because the nav box is changing the "center" alignment of the article).
P.S. I don't understand why this post is being downvoted into oblivion... I haven't found the answer to this question anywhere else, nor do I think it is a senseless one.
Here is the jsfiddle for my site: http://jsfiddle.net/EchoedTruth/a4CLL/
`$` <nav style="background-color: red">
<table>
<ul>
<tr>
<td><li><b>Home</b> </li></td>
</tr>
<tr>
<td> <li><b>Services We Offer</b></li>
</td>
</tr>
<tr>
<td>
<li><b>About Our Company</b></li>
</td>
</tr>
<tr>
<td>
<li><b>Testing Page</b></li>
</td>
</tr>
<tr><td><li><b>Testing Page 2</b></li></td></tr>
</ul>
</table>
</nav>
`$`
The code within your NAV element is invalid HTML.
You have this which is just all sorts of wrong:
<table>
<ul>
<tr>
<td><li><b>Home</b> </li></td>
</tr>
<tr>
<td> <li><b>Services We Offer</b></li>
</td>
</tr>
<tr>
<td>
<li><b>About Our Company</b></li>
</td>
</tr>
<tr>
<td>
<li><b>Testing Page</b></li>
</td>
</tr>
<tr><td><li><b>Testing Page 2</b></li></td></tr>
</ul>
</table>
Try changing it to this:
<nav>
<ul>
<li>Home</li>
<li>Services We Offer</li>
<li>About Our Company</li>
<li>Testing Page</li>
<li>Testing Page 2</li>
</ul>
</nav>
The reason your NAV element is moving out of place when you add a border will probably be because adding the border gives the NAV element a larger width.
e.g if your NAV element is 300px wide and you give it a border of 1px that will make the NAv element 302px.
Read up on the HTML Box Model to understand this better.
Your HTML structure is not correct, you have <li> within a <table>? <li> elements are only allowed withing a <ul> or <ol> elements. So I would fix your nav first before trying to style:
CSS:
ul {
border:1px solid #000; // border around all li elements
}
ul li {
border:1px solid #666; // border around each li element
}
HTML:
<nav style="background-color:red;">
<ul>
<li><b>Home</b></li>
<li><b>Services We Offer</b></li>
<li><b>About Our Company</b></li>
<li><b>Testing Page</b></li>
<li><b>Testing Page 2</b></li>
</ul>
</nav>