I have a minor problem with my css in that I have a drop down menu which works fine, however the problem comes when scrolling on items in the drop down the text is not centered in the highlight, it is horizontally but not vertically. I have tried to achieve it by applying a small margin (which isn't a problem), however the margin is applied to the background also thus the background is moved down and the issue remains. See here: http://www.letsmine.info/Sundalah. The CSS is located here: http://www.letsmine.info/Sundalah/css/drop.css
The margin affects the whole box layout, so it will shift the background. Try padding instead.
If you want to vertically align the text, and you'll only ever have a single line for each menu entry, set the line-height of the (menu entry) box to the same value as the height of the box.
Related
Hi I have some troubles while creating a navbar with a dropdown menu, I need all my informations in just one line, but my menu name and the arrow are not on the same.
A CSS element is created : .dropdown-toggle::after{display: inline-block;}
And my navbar looks like this :
I tried the most examples of dropdown/navbars I found on Bootstrap website but every time I have a result displayed in two lines. How can I fix that to have my label and my arrow in the same line?
Important Points:
If you need all your content in a single line then use white-space: nowrap; or reduce the font size.
as you mentioned you need the arrow in same line but its not due to less space in there, so use position absolute for the arrow.
After making it single line by white-space property you will need to create the ellipsis there so that your content will not look odd.
to make ellipsis: use overflow:hidden; on its parent and text-overflow:ellipsis on your text
I'm developing a simple opacity slider for my site and I've encountered a weird rendering bug (?) that happens only in Firefox (Chrome and Opera handle it perfectly).
The problem is while slides change each other, there's horizontal line appearing over them:
Obviously it has something to do with arrows which switch images. If I set display: none to them, there's no line appearing.
Arrows are simple > < in spans, and they have text-shadow. If I remove text-shadow from them, the line gets thinner:
Spans with arrows are positioned absolutely inside divs which taking half of slide container each. These divs are inside other div, which is sibling to slides and has z-index:1 to be over them. If I set right/left position for spans so they will just a little superpose image, or if I make divs thinner (for example, 40% instead of 50%) for the same purpose, the line disappears:
It may seem like it's related to spans' width, but setting max-width and display: block doesn't help too.
How can I get rid of this weird line? Maybe there's CSS hacks for it? You can check slider yourself here. Thanks!
So I've removed spans and instead put arrows just inside divs. I've vertically centered them using :before CSS hack from this answer. No weird lines and works like charm, though I've had to add some nbsp's before and after arrows so they would not be just on the edges of slide container. Well, a bit dirty but it's fine for now. Works even in IE10 and I don't need more.
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.
the chat div is breaking the bottom of the border line when im not hovering over it. cant seem to find a solution so any help or advice? thank you.
CODE: http:/jsfiddle.net/7wf912Lt/
As extended comments should be avoided on Stackoverflow - in case the Fidddle already looks like the required layout, just the necessary steps in case it's not so clear how it's done:
The top link is just a <div> on top of the embedded swf. The swf is wrapped in a <div> with float:left; the left and right link are also wrapped in a <div> with float: left. Therefore all divs are positioned in one row. To clear the float, I've just added a <div> with clear:left;. In addition, the width and height of the container have to be increased a bit so everything fits. Last step will be to reduce the margin: left of the container, so the content will be displayed centered. There are different solutions to display content centered, but I guess you'll have no problem to fix the rest.
For the Fiddle I just increased the height of .chat to 550px, the extra 50px are needed to have the additional height for the top link. Otherwise the swf would be displayed breaking the bottom border / partly outside of the box.
Update: Question was changed from displaying links around an embedded swf (which is solved) into the follow-up issue that the swf breaks the bottom border when it's not hovered. Problem is that link provided in question doesn't display the swf chat, therefore the mentioned problem is not solvable. Already added the CodePen-CSS into an updated Fiddle and only changed the height of .chat from 500px into 550px to provide enough space for the added links, and swf doesn't display like described. Further information to be added to the question is from which browser the screenshot was taken as I've only tested with Firefox and there it displays as intended.
Update2: As updated Fiddle by OP displays the described problem, should be fixable by adjusting css. The problem is located in the left link with the position set to 200px; if set to 0 before hover, the chat is displayed in the border when the height is set to 550px instead of 500px.
Update 3: Adjusted Fiddle like follows: changed the left link to position: absolute;, so it's taken out of the flow and won't interfere with the chat window. Otherwise the chat would be pushed down on hover when the left link is displayed on hovering chat as both share the same position for some seconds. Also reduced the margin-left of the chat so it's displayed centered. Fiddle: Fiddle
I guess you won't have any problems to e.g. adjust the padding or margins if you want more or less distance between the links and the border.
In case this works as intended would be kind to follow this step - Stackoverflow , otherwise just add possible issues to your question.
I'm pretty sure I'm having a CSS issue, but I just can't figure out how to correct it. Currently, I have these accordions working perfectly, they collapse, expand, expand again when told to etc.
The problem I'm having is aligning the content within these accordion divs. Ideally, when everything is default (collapsed) all I want seen is the thumbnail image and the Headline. Then if the user wishes, they click on the headline and it expands and if they want to make a comment or view comments, they can click once again to expand that.
Here's the thing, I have to make the height 62px so everything will fit in and just not float all over the place. This creates a problem with the "View Comments" to "Text Here" area, as you can tell it has outrageous space between the two.
The other issue is, as I currently have it I'm forcefully indenting the article text so that it doesn't TEXT WRAP underneath the thumbnail image. Basically, I want it split into 2 columns so nothing ever goes beneath the image, but working with this accordion and divs inside the divs it's proving to be difficult for me.
You can define this in your CSS to set the height:
.acc2 { height: auto !important; }
Since your child accordions have an acc2 class on their header, this will override, restoring a default height to match the text.