I'd like to have an image slideshow with a next button that forms the entire right border of the image. Would it be possible to have the words "NEXT" display in the center of the red area, instead of on the same line as the image?
<ul>
<li></li>
<span>NEXT</span>
</ul>
li {
display: block;
width:200px;
height:100px;
display: inline-block;
border:1px solid;
}
span {
background-color:red;
padding-top:100px;
}
Fiddle here:
http://jsfiddle.net/PUQNg/217/
You have a few things wrong with your HTML and CSS that you should correct:
span is not a valid child of ul, make this a li instead
There's no point having display: block; and display: inline-block; on li, only the last display property will be used
To centralise the text in this case I would use a line-height set to the height of the li.
li {
border: 1px solid #000000;
display: inline-block;
height: 100px;
vertical-align: middle;
width: 200px;
}
.next {
background-color: red;
border: 0;
line-height: 100px;
width: auto;
}
<ul>
<li></li>
<li class="next">NEXT</li>
</ul>
Related
I have a horizontal navigation menu using unordered lists. Under the menu there is a straight gray line which has to have 100% width of the parent container. When hovering the list elements, the part of the line has to be colored blue right under the list element. I can't find any suitable way of doing this. I got it working with position:relative and adding top:14px but it isn't really satisfying me since any changes to the font size or font face will destroy everything. I also thought about changing margins between elements to padding, increasing li's height and giving each one the same gray border and just changing it's color on hover, but I need the line to go all along the parent div's width.
How it has to look:
expected result
My current code:
#container {
width: 80%;
margin: auto;
background-color: white;
}
#container ul {
list-style-type: none;
display: inline-block;
margin: 0;
padding: 0;
margin-top: 5px;
margin-bottom: 10px;
}
#container ul li {
float: left;
margin-left: 20px;
}
#container ul li:first-child {
margin-left: 0;
}
#container ul li a {
text-decoration: none;
color: black;
}
#container ul li a:hover {
color: grey;
}
#container #slider {
display: inline-block;
height: 5px;
background-color: #f1f1f1;
width: 100%;
}
<div id="container">
<ul>
<li>INDEX</li>
<li>HELP</li>
<li>LONG LINK TEXT</li>
</ul>
<span id="slider"></span>
</div>
JSFiddle: https://jsfiddle.net/9fhvyk76/3/
You'll want to use a pseudo element so you have more control over the size/position without really needing to change much. Just add position: relative to the link itself so the pseudo's scale and positioning are associated with it. Let me know if this is what you were looking for!
https://jsfiddle.net/g00jrsqf/
#container ul li a{
position: relative;
}
#container ul li a:after{
content: '';
position: absolute;
display: block;
width: 100%;
height: 4px;
background: #01a2e8;
opacity: 0;
left: 0;
bottom: -29px;
}
#container ul li:hover a:after{
opacity: 1;
}
After checking similar questions to this, none of the recommended solutions worked for me. I am trying to align li elements to be vertically centered in their div:
HTML:
<div id="navi">
<ul id="navilist">
<li><a href="#home">
<img src="Images/homelnk.jpg" alt="Home"/></a></li>
<li>SGU</li>
<li>SGJR</li>
<li>REGISTRATION</li>
<!--<li>PHOTO GALLERY</li>-->
<li>SCHOLARSHIP</li>
<!--<li>CONTACT US</li>-->
<!--<li>SOCIAL MEDIA</li>-->
<li>MERCHANDISE</li>
<li>FORMS</li>
<li>PAY FOR SGU</li>
</ul>
</div>
CSS:
#navi {
position: relative;
height: 50px;
width:auto;
background: #ed7a4f;
vertical-align:middle;
}
#navi li{
display: inline;
list-style-type:none;
padding: 0px 2px 5px 2px;
}
How would I maintain a horizontal list, but center the text vertically?
There's some tricks to getting vertical alignment to work. Here's a good stackoverflow answer about it. There's a good comment to the answer which explains why you need the empty span...
Well, I figured I'd offer you an alternative. You use an empty <span>
because vertical-align aligns elements relative to their siblings. If
an element has no siblings, it will not be vertically aligned.
I also made an update to your fiddle
Here's a snippet of the css:
span {
vertical-align: middle;
display: inline-block; }
ul{
margin:0; padding:0;
display:inline-block;
list-style-type:none;
vertical-align:middle; }
#navi {
height: 100px;
background: #ed7a4f;
}
#navi li{
display: inline-block;
padding: 5px; }
You don't need vertical alignment, you just need to reset your CSS and use padding. You need to adjust accordingly to the size of your image.
#navi {
background: #ed7a4f;
}
#navi ul, navi li {
margin:0;
padding:0;
list-style:none;
}
#navi li {
display: inline-block;
}
#navi a {
display:block;
padding: 0px 5px 5px 5px;
}
I need a fixed-width table with columns which have a variable width, so depending on their content, but where the horizontal distance between these contents is the same.
This is what I get:
-----------------Table Width-----------------
|----Long Content----|---Content---|--More--|
This is what I want:
----------------Table Width------------------
|---Long Content---|---Content---|---More---|
Please note the count of the minus-sign in the content cells! When you measure the spaces between the content of the columns, by using a screenshot, you'll notice, that they aren't always exactly the same.
This is my markup:
<ul>
<li>Long Content</li>
<li>Content</li>
<li>More</li>
</ul>
This is my not working stylesheet:
ul {
display: table;
width: 600px;
}
li {
display: table-cell;
text-align: center;
border: solid 1px #000;
}
Here is my jsFiddle: http://jsfiddle.net/ATwqk/12/. How can I get the desired result?
If i understand this correctly you could try wrap a div fixed width around the ul. then width:100%; on the ul and width:50% on the li
http://jsfiddle.net/ATwqk/3/
#wrapper{
width:500px;
}
ul {
display: table;
width: 100%;
}
li {
display: table-cell;
text-align: center;
border: solid 1px #000;
width:50%
}
<div id="wrapper">
<ul>
<li>Long Contentdsdddddddddddd</li>
<li>Content</li>
</ul>
</div>
You need the left and right padding properties set to 2.5em. However, this will only work if either there are no breaks or every cell breaks its content.
ul {
display: table;
width: 300px;
}
li {
display: table-cell;
text-align: center;
border: solid 1px #000;
padding: 0 2.5em;
}
Try this on your ul tag. This should do exactly what you want.
ul
{
display: flex;
justify-content: space-between;
width: 600px;
}
Updated jsfiddle:
http://jsfiddle.net/ATwqk/19/
I have a horizontal parent list. Some of the list items display a nested vertical list when clicked. How do I force the items in the vertical sub list to be the same width as the parent list item?
See jsFiddle.
HTML:
<ul class="mainMenu horizontalMenu bulletless fullWidth bold">
<li class="showSubMenu">
<div>Resumes & Cover Letters ▾ </div>
<ul class="mainSubMenu bulletless">
<li><a>Resumes</a></li>
<li><a>Cover Letters</a></li>
<li><a>Interviews</a></li>
</ul>
</li><li><a>Other Link</a>
</li><li><a>Other Link</a></li>
</ul>
CSS:
.horizontalMenu li{
display: inline-block;
}
.mainMenu > li{
border: 1px solid black;
}
.mainMenu a, .mainMenu div{
display: block;
padding: 10px 20px;
}
.mainSubMenu{
position: absolute;
}
I did the change on your fiddle. http://jsfiddle.net/BXnxc/2/
The parent li needs to have position:relative; and the nested submenu has to have width:100%; and position:absolute;
You can do this by specifying the parent LI as relative and child UL with width: 100%
Demo: http://jsfiddle.net/BXnxc/3/
.horizontalMenu li {
position: relative;
}
.horizontalMenu li ul {
width: 100%;
}
You can also do this by inheriting the width of the containing structures. I set your mainMenu div to width of 200px and then width:inherit for the mainSubMenu.
http://jsfiddle.net/BXnxc/4/
.mainMenu a, .mainMenu div{
display: block;
padding: 10px 20px;
width:200px;
}
.mainSubMenu{
position: absolute;
width:inherit;
}
.mainSubMenu li
{
display: block;
border: 1px solid grey;
width:inherit;
}
I'm building a site for mobile devices and therefore has a fluid layout.
My navigation list looks like this:
<ul>
<li>home</li>
<li>about</li>
<li>work</li>
<li>contact</li>
</ul>
Problem is, the first list item needs to be 100px only (left aligned always), and the other 3 split evenly, therefore is it possible to have even width for all list items except for the first one (without using javascript).
This is the simplest way I could think of:
ul { overflow: hidden; padding-left: 100px; position: relative; }
li { width: 33.33%; float: left; }
li:first-child { position: absolute; top: 0; left: 0; width: 100px; }
The main idea is taking the first li out of the flow (position: absolute) and adding a padding-left to the ul (space for the first li). Now if we set the percentage width for the other lis, they will take up the remaining space.
And here is a jsFiddle Demo. I added a red border on the ul which shows that because of the percentages lis will not accurately fill it.
I am unsure what mobile browsers you want to support, but except :first-child (which can be worked around by adding a class on the first list item) I assume they must support everything I used.
hmm a bit cludgy - but this seems to work, it does require nesting the list (second 3 links in separate list) and a span for the "home" link, theory is that you need the first link to float, width: 100px, then you need the second group not to float and have their overflow hidden so the group take up the remaining space.. then you float the 3 links # 33% inside the non-floated container
Example : HERE
CSS:
div {
width: 90%;
margin: 0 auto;
}
ul {
margin: 0; padding: 0; list-style: none; /* reset */
float: left;
width: 100%;
}
li {
float: left;
width: 100%;
text-align: center;
}
li span {
float: left;
width: 99px;
background: #eee;
border-right: 1px solid #000;
}
ul ul {
float: none;
overflow: hidden;
width: auto;
}
li li {
width: 33%;
background: #ffe;
border-right: 1px solid #000;
}
HTML:
<div>
<ul>
<li><span>home</span>
<ul>
<li>about</li>
<li>work</li>
<li>contact</li>
</ul>
</li>
</ul>
</div>
For what it's worth, this was what I was thinking of when I made my comment on your question:
http://jsfiddle.net/4t9fV/
ul {
display: table;
width: 100%;
background: #ccc;
table-layout: fixed
}
li {
display: table-cell;
text-align: center;
outline: 1px dashed red
}
li:first-child {
width: 100px
}