I would like a border around my drop down menu on hover. I want the right and left borders on the top menu to align with the border on the drop down. And I don't want to see the border underneath the text on the top menu. I'm not sure that I'm explaining things clearly so I'm including a picture of what I want.
Here is my attempt
That's a cool style. To implement it, the CSS will need to do the following:
The tabs (#nav ul li a) will need a white background and a black border on the top, left, and right.
The dropdown will need a white background and a black border on all sides.
The trick is to use z-index to place the tab above the dropdown, and to make the tab slightly taller on hover. The bottom of the tab should extend below the bottom of the tab row, in order to cover up part of the dropdown's top border. Does that make sense?
If you'd like help with writing the CSS, I recommend adding code to your question.
Hope this helps!
Related
I would like to place a background image i made behind my nav bar that is responsive to the viewport (gets smaller when the window gets smaller). The image looks like this:
Nav Bar Background Image
I would like the black band to be behind the nav bar and for the arm to then go into the next section. I would like the text of the next p to not over lap the arm and to align around it.
Is it possible to do this using CSS? Using HTML5.
Many thanks
Since the black bar behind the navigation is just a rectangle, you can use CSS to set a background-color of #000 on a div for your navigation bar, have it be 100% width, and set a height on it. Then, simply put your navigation text/buttons inside of that div.
From there, you can have just the arm be a background image for the next element in your HTML, and use background-position: top right to align it to the right side of the page and top so that it touches the black navigation bar.
Hope that helps! Let me know if you need more help and I can do something in a codepen real quick :D
Preparing a website navbar, I thought of creating hover effects over tab like Android does it, i.e. a top border displays over a tab when you hover over the tab.
The problem is, these navbar tabs are nested in a container div, and for some reason, the navbar tabs have a slight margin, even though I haven't specified one explicitly. So, the top border which I want, is not perfectly aligned to the top of the window.
I tried the ususal workarounds: setting font-size:0 in the parent, using vertical-align:top and margin-top:-4px, but non of those seem to work perfect.
Here's the jsfiddle: http://jsfiddle.net/A3nEq/
Notice a thin black line between the absolute top and the white top border. I have to get rid of that!
You have to remove border: 2px solid transparent; from your #headContainer div.
Demo: http://jsfiddle.net/A3nEq/1/
Remove the border from #headContainer.
I have to hover effect for a menu. Please see the image for reference. All menu items are of different size. The hover has shades it it. More black on left, less black on right while center is repeatable. So now my question is can we have a hover with 3 different images together so that I dont need to have separate for hover state for each menu item.
Thanks in advance.
I'm creating a navigation bar (in a div) that has a vertical list. When you click on an element in the navigation, it pops up a div that touches the nagigation list. This div has a border (getting rid of that border looks weird, so i'm not doing that). How do I remove a part of that border (the part that touches the selected navigation div)?
A little more explanation: The pop-up div touches the nav on the left side. I want to hide the border for only the section of the border touching the selected element in the nav bar
FOUND A SOLUTION:
I needed to put a right-border: -1px on the navigation in order to cover the border on the pop-up div.
if it touches the nav with its top ... use border-top: none
You can use Outline:0px; or Border:none; on that part. but cant say unless i see the code.
My CSS knowledge is very limited, so I'm putting my problem here hoping for the best.
I'm using this box: http://www.456bereastreet.com/lab/flexible_custom_corners_borders/ in my website, and I need to display content in two columns format.
I've attempted with the simple table, and using divs with float set (needed clearfix so the parent got its height). My problem is a visual bug that appears of the left side.
Only happens with table and div floated. p, h1, etc works fine.
Here is a picture of the bug: http://img18.imageshack.us/img18/8783/imagem2hdp.png
Thanks
edit:
Here's the code: http://dl.getdropbox.com/u/178438/css_test.zip
You should set a background color for .content this will hide that part of the border image.
--edit below--
The extra whitespace between the gradient and the border looks like an element is being pushed sideways, when it's really all part of the left border background image which is the second main div.
div // Right border
div // Top border with corner sub divs
div // Left border
div // Content
div // Bottom border with corner sub divs
Since the content part of the box is inside the left border div and the border background image is done sprite style with multiple images put together in a larger image the only CSS only solution to this is to apply a background color to the content area to cover the left background image (like the Left background div is doing to the right background div)
There are other ways to fix this such as separating the images out into separate files or moving the Content div outside of the Left border div, but at that point you aren't really using that same box anymore.