I have a responsive top bar menu. On the left I have 2 buttons in a <ul> element with float:left. On the right I have another <ul> element with a float:right align.
In the middle of the two lists, I have one <p> element that receives dynamic text.
This works on large screens, but in the small devices the last <ul> goes to down.
JSfiddle: http://jsfiddle.net/49zjn/1/
Resize the Result panel to view my problem.
Any ideas of how to solve this?
Thanks
Instead of
#right { float:right; }
Try
#right { position:absolute; top:0; right:0 }
What is the behavior that you would like? Do you want the status to resize or be the first to drop down to the next line?
The following will make the status drop down first...it's all about the order of your elements.
#left { float:left; }
#left li { display:inline-block; }
#right { float:right; }
#status { overflow: hidden; float:left; }
li, p { padding:5px; border: 1px solid #000; }
<div id="bar">
<ul id="left">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul id="right">
<li>Item 3</li>
</ul>
<p id="status">Some long dynamic text here with system status</p>
</div>
Give more specifics on what you'd like (if this isn't it) and I'll take another crack at it.
Good luck!
Related
My question is related to CSS overflow-y:visible, overflow-x:scroll
but I am still not able to solve my problem. I want a scrollable sidebar on y-axis with a visible tag hanging on the x-axis.
My HTML setup:
<div>
<ul>
<li>
</li>
<li>
<div> ... //want it to be visible x
</div>
</li>
</ul>
</div>
CSS:
I tried to use this:
.div { overflow-y:scroll; overflow-x:visible; }
.li { position:relative; }
.div { position:absolute; top:0px; left:-100px; display:inline-block; }
Generally if you want the to view the scroll in the div you should use
overflow-x:scroll;
Please make sure to add a class otherwise the scroll will appear in the outer div too, Or use the hierarchy.
div ul li div{ overflow-x:scroll }
.my-div-scroll{ overflow-x:scroll }
How can I make the <li> item width fit the text length in Bootstrap 3? My menu item is shorter than the text which causes my class="active" to look ugly.
This is the navbar in which it occurs:
<div id="menu" class="col-md-1">
<ul class="nav nav-pills nav-stacked">
<li class="active">Startseite</li>
<li>Kontakt</li>
</ul>
</div>
make a .custom_li class and give
.custom_li{
display:inline-block;
}
EDIT
To force same size, i'll suggest using max-width and place it under some media-query
li{
display: inline-block;
max-width:50%; /* limit width */
word-break:break-all; /* wrap extended text*/
border:1px solid red /* demo */
}
demo here
some optional things
some optional things
When I tried display: inline-block; it removes the bullet.
Instead, I use float:left; to have them only as wide as text, while preserving the bullet. Optionally, add clear:both; to keep it as a vertical list with each item on a new line.
CSS
.my-list > li {
float: left;
clear: both; /* remove this if you want them flowing inline */
}
HTML
<ul class="my-list">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Fourth Item</li>
</ul>
If the display: inline-block; or display: block; is messing up the alignment.
Then just use width: fit-content;
Prevent it becoming a block by adding display: inline-block; to the proper element.
Post more code and preferably CSS if you want details.
I got it to work with the following css:
ul {
margin: 0 auto;
width: fit-content;
}
li{
display:flex;
margin: 0.5rem auto;
}
Basically what I did was make the container width to fit content. Used the CSS hack to make sure it would center using the margin. In the li tag I wanted the contents to be centered so I set it that way
How can I make this work as in the image below:
<ul style="width:16em;list-style:none;padding-left:0">
<li><label>name:</label><span>whatever</span></li>
<li><label>categories:</label>
<ul class="flat"><li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
</ul>
.flat {list-style:none}
.flat li {display:inline; padding-left:0}
label {float:left;width:7em;}
I mean, I want the second line of li items left aligned by the first line of li items. "item 1" is fine, the others should align by it. (revised upon comments)
Remove width:11em;, they just don't fit in.
This is a definition list, so use the proper <DL> element (definition list) instead of a <UL>. Then, you can accomplish everything you would like to in two short lines of CSS.
http://jsfiddle.net/smclark89/tkUjc/
<dl>
<dt>name:</dt>
<dd>
<ul>
<li>Whatever</li>
</ul>
</dd>
<dt>categories:</dt>
<dd>
<ul>
<li><span>item 1</span></li>
<li><span>item 2</span></li>
<li><span>item 3</span></li>
<li><span>item 4</span></li>
</ul>
</dd>
dt { float:left; }
dd li { list-style-type:none; }
Your markup seems totally fine, and I'm not quite sure why there seems to be issues achieving what you want. It's pretty straightforward stuff unless I am missing something:
http://jsfiddle.net/ryanwheale/UhQ9W/9/
My solution positions the label and whatever is next to it right next to each other. Since your outer element is 16em, we make the width equal 16 (note, you could also use percentages):
label:first-child {
float: left;
width: 7em; /* magic number: 9 + 7 = 16 (7 / 16 = 43.75%) */
}
label:first-child + * {
float: left;
width: 9em; /* magic number: 9 + 7 = 16 (9 / 16 = 56.25%) */
}
Then, for the "flat" items, we simply float them next to each other and give them a width of 50%:
.flat li {
float: left;
width: 50%;
}
Note: if you want to add padding to anything, I suggest adding box-sizing: border-box; to anything which is being floated.
Also, floats might give you issues when things start to expand and wrap... so there is another solution with inline-block which will solve this. Let me know how this works and I can provide a better solution if you have issues with things not lining up properly once real content is in there.
Add padding-left: 7em; to .flat: fiddle
Or add float: left; width: 9em; padding: 0; to .flat: fiddle
Remove the float, the display:inline (unless you want them to display next to eachother) and just use text-align and then use list-style-position:inside; to fix the bullets:
<ul style="width:13em; border:1px">
<li><label style="text-align:left; width:7em">test</label>
<ul style="text-align:right;list-style-position:inside;">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
</ul>
Also, you shouldn't use inline CSS (style attribute) that is bad practice.
Without display:inline jsFiddle
With display:inline jsFiddle
here is a way of doing it, in case you can restructure the html as well. See it on JSFiddle
<ul>
<li><label>name:</label>
<ul class="flat">
<li>whatever</li>
</ul></li>
<li><label>categories:</label>
<ul class="flat">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
</ul>
ul {
list-style: none;
padding: 0;
}
label {
display: inline-block;
width: 4.5em;
}
.flat {
display: inline-block;
vertical-align: top;
width: 6em;
margin-bottom: .5em;
}
.flat li {
display: inline-block;
}
Additional styles are need to make this work. Switching to floats and using percentages for the widths makes it possible to aligned the label and content on the right properly.
Here's the updated styles
.flat {
list-style:none;
float: left;
width: 64%;
padding: 0;
margin-left: -0.75em;
overflow: hidden;
}
.flat li {
float: left;
width: 38%;
padding-left: 0.75em;
}
label {
float:left;
width:35%;
}
http://jsfiddle.net/QhSC9/
If you are able to update the markup, I'd recommend you look into dl.
#smclark89: agree, I'd say a <dl> seems more appropriate here too. The cleanest I can come up with is this jsfiddle
Slight modifications to your CSS file:
notes:
-using a clear after every odd <li> sets the beginning of the next <li>to the far end of the next line.
-adding float:left; to .flat sets the first <li> inline with the label.
CSS
.flat {list-style:none;float:left;}
.flat li {display:inline; padding-left:0;}
label {float:left;width:7em;}
ul {padding:0px;}
li {float:left;}
ul .flat li:nth-child(odd) {clear:both;}
EXAMPLE
http://jsfiddle.net/UhQ9W/19/
I have set the list items floating and clearing the floated elements every third one in order to create the layout you have attached above.
Keep in mind that this demo is width agnostic. All the tricks lays in this line of code
.flat li:nth-of-type(3n) {
background:#ff0000;
clear:left;
}
http://jsfiddle.net/QhSC9/
Use overflow: hidden on the ul
http://jsfiddle.net/HerrSerker/UhQ9W/8/
.flat {
list-style:none;
overflow:hidden;
padding:0
}
The overflow: hidden changes the block formatting context of the .flat element as described here
Check this out. I know that this isn't the proper way to do it but based on the other answers you cannot change major elements/tags also styles.
Fiddle
CSS
label {
clear:left;
float:left;
width:7em;
height:22px;
}
I just added height:22px and clear:left to create your desired output.
Preface: Experienced coder, VERY new to CSS.
I've designed a website that uses a wrapper and has a horizontal banner that I want to fill with links on the top (Like retail sites that have their categories listed along the top).
I've placed all the links in a toplink class, and I have set position:relative;. My goal was to position them using top: and left:, and then space them out by setting all of their padding-left's to a certain degree. It seems when I do that, however, the last 2 links always jumps off the wrapper and moves to the left of the whole wrapper.
Any better ideas on how to implement this? I don't need solutions necessarily, just some ideas on how to move in a better path.
Assuming some simple markup like this:
<ul id="nav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
<li>link 5</li>
</ul>
1) To space out links use text-align:justify with a pseudo element after it with 100% width
FIDDLE
(Resize browser window and also see what happens when you add/remove a list item from the markup)
CSS
#nav {
text-align: justify;
min-width: 500px;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}
#nav li {
display: inline-block;
}
2) If you're looking for the links to expand/contract - you should use css tables for this
FIDDLE
(Resize browser window and also see what happens when you add/remove a list item from the markup)
CSS
#nav {
display:table;
table-layout: fixed;
width: 100%;
}
#nav li {
display: table-cell;
height: 25px;
background: beige;
border: 1px solid brown;
text-align: center;
}
Try getting rid of the position:relative and the top:0; left:0; stuff and use float:left on the anchors instead.
You don't position: relative or float: left to align them horizontally.
Anchors are inline elements so they'll align horizontally anyway. However, you could add some padding to visually separate them.
I am having issues to expand the div naturally like this:
I am not allowed to use percentages. I have tried to use them, but as soon as other items go between them, the second block goes down.
HTML code:
<div class="block1">
<ul>
<li>item long</li>
<li>item small</li>
<li>item sample</li>
</ul>
</div>
<div class="block2">
<a>This is a nice sample text</a>
</div>
CSS code:
.block2{
float:left;
border:1px solid blue;
}
.block1{
float:left;
border:1px solid red;
}
Here is my Fiddle
Replace float:left by overflow:hidden in .block2.
Fiddle
overflow:hidden is a little trick to trigger block formatting layout, so that the .block2 div sits at the side of the floated div. You can read more about block formatting contexts in this YUI article.