Using this layout: http://jsfiddle.net/spadez/JBuE6/6/
On the top right I want the green button to site on the same line as the H1 tag on the right side, and so that every new list item sits to the side of the next time.
I think this might be something to do with:
display:block
I haven't been able to get this to work and I dont know if this is even the right approach.
Move the UL before the H1 and you should be in good shape, e.g.
<ul>
<li>Create New</li>
<li>Create New2</li>
<li>Create New3</li>
</ul>
<h1>Title</h1>
Example:
http://jsfiddle.net/52raq/3
If you want a right aligned item to be the same height as a left aligned item you need to put it BEFORE the left aligned item. That should take care of it.
Related
In a typical chat bot window, or messenger window, when you type in a new message it appears at the bottom of the chat history flow, and everything else in the list goes up - so user is always able to see the last message. And when the history of a chat becomes longer, the chat window itself doesn't grow endlessly - just the older items are pushed higher and visually disappear (although you can scroll back to them).
I tried to imitate this behaviour using flex wrapper and flex-direction: column-reverse for a 'chat history' div inside, but I can't figure it out.
Here is my attempt: https://codepen.io/chapkovski/full/gOOKGwJ
Now (a) the 'chat history' or whatever the content is there, is shown from the top, and when you type a new element there, the window just 'expands'
Any links or hints to the right direction would be appreciated
This is your structure
<section>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
All you need to do is add this css
ul {
display: flex;
flex-direction: column-reverse;
}
This will tell ul element to be flex and display your children in column (one above another) and in reversed order (bottom will go first).
I hope it helped :)
side menu bar works fine until I add class. please see example
before
JSFiddle
after
adding class="active" to My Account Home. Demographics <LI> completely pushed up and it is invisible. How can align like first pic like the order.
After JSFilddle
I have a UL that is centered properly in wide and narrow widths but breaks in the mid range. When it is wide everything fits nice, when the browser is narrow everything stacks nice, but when using a mid width, say 800px wide, the menu wraps to the next line, which works for now, but I would like to see if it was possible to center the second row of links. Here is a screenshot of how it looks on top (red circle), and what I want it to do on the bottom (green circle).
If you look at another thread, you will see kind of how my menu works right now in his example link. If you shrink the browser on his example you will notice the menu wraps and the second row is left aligned.
I would like to have the second row centered under the first row like in the picture above. Is this possible?
Here is the HTML:
<div id="navContainer"
<ul>
<li class="menu_home">Home</li>
<li class="menu_gallery squished">Gallery of Properties</li>
<li class="menu_service">Service Options</li>
<li class="menu_contact">Contact Us</li>
<li class="menu_test">Testing HotSpots</li>
</ul>
</div>
I don't think the CSS is needed since it isn't working like I want it to anyway (and it is spread out through about 38 different CSS files, everything is floating left, but I can add the css here if you think it might help, but I am willing to scrap everything anyway...)
Add
text-align:center;
to .nav ul in your Tinkerbin example.
or:
#navContainer ul {
text-align:center;
}
to your own css
I have some list items and I want the corresponding drop down menu to align to the left, for some elements, and some should remain. (See link.) When you hover over the "more", "opinion", and "lifestyle" link, it aligns to the right and out of the page causing lengthy stuff. I want just those 3 menu lists to align to the left when you hover, while the others not mentioned to remain. What can I do to achieve this?
After looking through your html I suggest you look for the classes leaf *first leaf* and last leaf and add another class in your CSS that mimics these except float:right. then apply this to the menus you want to float right.
If this makes the elements go to far to the right maybe try
position:inherit;
left:-Xpx;
And replace X with the amount of pixels you want it to go left.
On this site
Luck
I'm working on a navigation like the image below.
The whole nav is the width of the browser window, but the items are centered to the design.
I haven't worked with any code in quite some time now, and am having difficulty getting this together. Should I use a body image to repeat horizontally and then position my list where it needs to be? Or Should I use a div to span the whole width of the browser window and position the list elements where they need to be?
Thanks
I'd go with using a container with a simple background colour and positioning the menu inside of that.
I'll whip up a quick example for you.
UPDATE
Here's a quick example I've just put together: http://jsfiddle.net/aQTRF/
Alternatively, if you require the black menubar to extend past the container of the navigation, it may be easier to add the bar as part of a repeating body background (as you've stated) and then position your nav over the top. This would also allow you to have a slightly different shade of menubar within the main content area compared to outside of it.
I would advise using HTML and CSS over images where possible. It will make the page faster to load.
How about something nice and simple like this?
Use an unordered list
<ul id="nav">
<li>Nav Item</li>
<li>Nav Item</li>
<li>Nav Item</li>
</ul>
Add your styles to #nav for the background