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
Related
I am learning some React from a course Maximilian Schwarzmuller created. It seems like some of the styles are not working. Tried to figure out why but I still don't have an idea.
Here is the code https://codesandbox.io/s/elastic-montalcini-3urgmm
Basically Max uses position fixed to stick the header to the top of the website, then he uses flexbox to align items and justify content - space-between to have the button on the right side of the site. He also sets up a padding to move button and h1 header closer to the centre.
If I remove padding it looks ok but then I need to find a way to make those items closer to centre. This becomes an issue.
I know that I can use some workaround but I would like to make it work as Max did. (Maybe he cheated :D )
My button is described like this
Link 1
Now I have another 4 similar buttons to place beside in a horizontal row besides.
Link 2
Link 3
Link 4
Link 5
I want position: fixed;, as I need those buttons to be on the navigation bar and always present relative to the browser window.
Because of the fixed attribute I can not have display:inline-block or display:inline;.
I did not want to copy the the button 5 times and each time just change the property of position. I thought I could have a general class which would specify what would be the height from the top of the page for the buttons, and then write in the horizontal shift using
<div style="right:10px;">
Link 2
</div>
This is does not work, any containers or attributes added to div can not affect the button position even though in it the right distance is not stated.
I know I can do it it by having multiple distinct classes in my CSS for buttons, but they would be exactly the same except for horizontal alignment and this seems like a wasteful way to go about doing so.
fix the navbar as a whole (and not the single nav items). In that fixed nav container you can use inline-blocks
I am struggling with getting the elements on this page to reflow correctly: http://www.cmattayers.com/moushegianlaw/
I want the semi-transparent box to be flush with the left side of the slider image (the photo of the gavel), and for them to be "fused together." The problem now is that when the window becomes narrower, the semi-transparent callout box drops below the portrait photo, but the slider photo stays where it is. I have tried different combinations of inline and block elements to achieve the desired effect, but nothing seems to change.
I also have a bizarre sliver of space to the left side of the semi-transparent box that I can't seem to get rid of. Adding negative left margins does fix it, but when it drops below, it's off-center and outside of view.
I also need to find a way to add padding to the bottom of the box. When the window is resized to show mobile view, the bottom of the box rests directly on the header text below (I would like there to be padding, but adding padding seems to add it to the text inside the box and not the outside of the box).
In that design, you've done a couple of HTML and CSS things I'd recommend against.
Firstly, your <div id="header"> should be a <header> element. That's more semantic and accessible. If you use multiple headers on the page (which is allowed), you can distinguish this one using role='banner'.
You shouldn't put all those blocks into the header. Rather keep the logo in the header, put the menu in a <nav>, and put the portrait + gavel image + dark paragraph into a <section>.
Next, and to answer your question, perhaps don't use inline and float to position the paragraph. inline and inline-block are great for flowing content, but not great for content you want to always be in one row. Rather give the parts display: table-cell (or use the new 'flexbox' CSS styles).
To get this right, you may need to restructure your HTML a bit.
I have a small question about a certain css navigation technique where an end list item is shoved all the way to the left or right. Look at the light blue navigation above to see an example of what I am talking about. The light blue navigation has 1 list item which is shoved all the way to the right. How do I achieve this effect?
There are two navigation menus wrapped in their own div. One is floated left the other "Ask Question" is floated to the right. Both are within a div with an ID hmenus that has a width set. You can view the elements and styles using Chrome developer tool, firebug or just view the source and follow the CSS styles.
JSFiddle
I'm creating an image gallery that, ideally, should have a column of thumbnails on the left with a larger image on the right with both sections aligned along the top vertical axis.
To do this, I've floated the thumbnails and larger image left and right, respectively, and tried every combination of clear:both and overflow:hidden I could think of to achieve the top alignment to no avail. Any ideas?
I've included a JSFiddle at the top and an image below to give an idea of what I'm going for.
Put div.large-image before div.thumbnail in your HTML.
I'm not exactly sure why this happens. This article briefly discusses it. The answer/reason is probably buried somewhere in the CSS float spec.
I wrote a cool simple JSFiddle to show how the gallery should be displayed, and how you can align the images.
You have to be careful with using this JSFiddle in your code because some of the elements you used in your question's JSFiddle have pre-specified properties like display:inline-block or other things that might need to be overridden in CSS for the gallery elements. This is also for browser-compatibility.