I'm trying to follow this answer to left align numbers and text in an ordered list for a navigation menu:
Left align both list numbers and text
Except I have a border around the ordered list and I'd like the list to fit within the border but still be aligned properly. My problem is if the li content is long, it will overflow/overlap into the li item below it. For instance, this is my fiddler version of it:
http://jsfiddle.net/jimmyzaas/36ftkLLq/5/
code:
.fixedwidth{
width: 200px;
background-color: #eee;
}
.dinosaurs {
list-style-position: inside;
margin: 0;
padding: 0;
border: 1px solid #ccc;
width: auto;
}
.dinosaurs li{
position: relative;
border-bottom: 1px solid #ccc;
padding: 3px;
}
.dinosaurs li a {
position: absolute;
left: 30px;
}
How can I have the li auto adjust height to a, without overlapping each other while using absolute positioning? Any suggestions? I can set a fixed height for the li but that would make all other li content unnecessarily high.
.dinosaurs li {
position: relative;
border-bottom: 1px solid #ccc;
padding: 3px;
overflow-x: hidden;
//overflow-x: auto;
}
You can use overflow-x: hidden; or overflow-x: auto;
auto will cause scroll bars to appear while hidden just hides the overflow.
Related
I can't find a similar problem to this one.
I want to have two CSS :hover buttons horizontally aligned in a centered parent div (orange div), but it isn't working.
Centering:
The cursor-activated area (purple border) expands far beyond the buttons, covering much of the page. How can I format the cursor-activated area to match the size of the buttons' source content:url() without destroying the centering of the parent div? Using something like position:absolute doesn't seem to be the right solution.
Horizontal alignment:
display: inline-block; works only if I change the div id #alpha a{ to #alpha{ and #beta a{ to #beta {.
This way the buttons horizontally align but then I lose their functionality.
See/edit the example here:
http://dabblet.com/gist/0ec177e3a1191051cc3555ca958a6d20
A possible solution:
Certain styling is probably needed for :hover or something like a:hover so that the unexpectedly large cursor-activated area can be reduced to the same size as the button without effecting the centering from the parent div. I've had no luck with position:absolute.
Any insights?
body {
background-color: rgb(0,0,0);
margin: 0px;
border: 0px black;
padding: 0px;
}
#parent {
background-color: rgb(200,80,0) !important;
width: 50vw;
font-size: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
a{
border: 1px solid red !important;
}
:hover{
border: 1px solid purple !important;
}
#alpha a{
border: 1px solid black !important;
max-width:7%;
content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-A_130_130.jpg");
display: inline-block;
}
#alpha:hover a{
border: 1px solid yellow !important;
max-width:7%;
content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-D_130_130.jpg");
display: inline-block;
}
#beta a{
border: 1px solid black;
max-width:7%;
content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-B_130_130.jpg");
display: inline-block;
}
#beta:hover a{
border: 1px solid yellow !important;
max-width:7%;
content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-D_130_130.jpg");
display: inline-block;
}
<div id=parent>
<div id="alpha">
</div>
<div id="beta">
</div>
</div>
Add this to #parent
display: flex;
align-items:center;
justify-content: center;
I am having a page which contains set of buttons at the footer(bottom). When I open the page for the first time I get the buttons as below:
Now, sometimes the first three buttons gets hidden and I get the page as :
I am not getting what could go wrong? Interestingly, when I inspect the button and change any property, the buttons get aligned immediately. Strange but true.
Code for li elements:
li
{
position: relative;
top: 7px;
left: 10px;
display: block;
float: left;
margin-right: 10px;
}
Now when I remove the position relative then it does not gets hidden but ya, it reaches the top of the page.
Something Like this
Update : I assume it is because of position:relative, can I change my code without position relative? Or with position:absolute?
Fiddle
Try this css:
.details .action-bottom {
height: 29px;
background: #739DDD;
border: 2px solid #01296E;
border-top: 1px solid #666;
margin: 0px 0 0 0;
}
.details .action-bottom ul {
list-style: none;
margin:0;
padding:0;
}
.details .action-bottom li {
display: inline-block !important;
float: left !important;
padding: 6px !important;
position: inherit;
}
Update Live
For a website project, we have a simple navigation bar where each link is outlined in gray, and hovering outlines it in black.
I got it working and my code is here: http://jsfiddle.net/BpjK8/ -- although I admit it's a little dirty and 'hacky' in a way. (You can see when hovering link A, the border of link B beside it is visible, making it somewhat distracting.)
My question is: can this be done in a better way without using display: table and display: table-cell? It would be nice if the answer involved display: inline or float: left but I can't get the border effect working properly.
Demo Fiddle
Of course! Add:
body{
text-align:center; /* centre the content */
}
Then set your ul to display:inline-block to allow it to be subject to the centering, and give your li:
float:left;
display:block;
So they display one after another correctly.
You may not want to centre your entire document however, so instead you may want to wrap the ul in a div with text-align:center; set.
Try this css:
ul {
margin: 50px auto;
list-style:none;
}
li {
display:block;
float:left;
border: 1px solid #CECECE;
border-right: 1px solid #fff;
padding: 2px;
}
li:last-child {
display:block;
float:left;
border: 1px solid #CECECE;
border-right: 1px solid #CECECE;
padding: 2px;
}
li:hover {
border: 2px solid #000;
position: relative;
z-index: 9999;
padding: 1px;
}
a {
position: relative;
text-decoration: none;
line-height: 40px;
padding: 20px;
color: #000;
}
I just need a little help with my CSS:
I As you can see in here http://jsfiddle.net/5crwu/ I have some space between span and ul elements, and I can't find how to lift ul up, closer to the span. I thought margin: 0; will do this, but looks like I'm missing something.
.app-technologies {
width: 200px;
padding-left: 10px;
border: 1px solid black;
}
.app-technologies span {
position: relative;
display: block;
left: 0;
font-size: 17px;
margin: 0;
border: 1px solid black;
}
.app-technologies ul{
list-style: circle;
padding-left: 18px;
margin-top: 0;
border: 1px solid black;
}
If you don't want to remove the <br>, you can give your and NEGATIVE margin. It would be margin:0px 0px -20px 0px;
The negative bottom margin on the span will pull it up.
I just removed the BR after the SPAN, and the "position: relative" from the span styledef. No more space-between.
I have a TD which contains a UL and LIs. I'm trying to get the list to flow outside of the TD. If I use position:absolute all the LIs stack on top of each other. Is there a way to get the LIs to maintain their positioning relative to each other and still flow outside the containing TD?
EDIT Added code (it is written in rails but I've included the generated HTML):
CSS
#calendar li {
width: 265px;
position: absolute;
background: palegreen;
}
Generated HTML
<td class="weekend">
24
<ul>
<li>
Deleware (2)
</li>
</ul>
</td>
Have you tried adding
position:relative;
to the td element.
(like this http://jsfiddle.net/ZGyDW/)
Afaik this is required for the parent element in order to position a child element absolute inside it.
I reread your explanation and updated my fiddle. I don't know if you're able to add elements, but you could try wrapping all the uls in a div and absolutely positioning the div. Here's my CSS:
table {
color: #666;
font: 16px normal Arial, Helvetica, sans-serif;
margin: 30px;
}
td {
border: 1px solid #f00;
height: 200px;
padding: 5px;
position: relative;
vertical-align: top;
width: 200px;
}
div {
position: absolute;
}
ul {
border: 1px solid #00f;
margin: 5px 0;
width: 300px;
z-index: 2;
}
li {
border: 1px solid #0f0;
padding: 5px;
}