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.
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 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!
I have a top drop down navigation menu which in which every menu item has child and these children are displaying on right side.
It is fine for all the menu items except the last one. Because when I hover the mouse over the last menu item the drop down menu appears then when I hover the mouse on a menu item with children that children displays on the right side and hidden because the browser window finishes there.
So what should I do to display the children menu items on the left side when ever the browser window finishes so that the menu items appears to the users.
Any help please?
EDIT
http://harleydragon.info
Please look at this site. Mouse over the Pigeon Forge menu and see its children. That children should be appear on left side because there is no space on the right side.
This question is really unclear but I think I understand what is going on...
Either give your last menu item an id (such as #last-item), then style the subsequent children to appear on the left (given the #last-item id), rather than the right (using your preferred method depending on your situation - ie. position:relative + left, or float, of margin)
#menu .children
{
/* position right */
}
/* "#menu" in the following style is NOT required,
I left it in for sake of clarity. */
#menu #last-item .children
{
/* position left */
}
Also consider using CSS pseudo-classes to style the children of your last element:
http://www.quirksmode.org/css/firstchild.html
I have my menu working the way I want with the exception that menu elements are displayed from the top down as supposed to bottom up. I tried changing the CSS properties, but still can't get it working. I need my DIV container to be align on the bottom of the parent container. I used 'bottom: 0' CSS property but that doesn't have any affect using both 'position: absolute' and 'position: relative'.
How can I align all the elements within the parent DIV be displayed at bottom: 0 (bottom up)?
Then click on the Projects bottom link (refresh if you need to reset the menu items). I need that same behaviour I already have, just the menu items should start from the bottom up and be aligned all the way to the bottom.
Any suggestions?
Thanks,
Partizan
The best way to accomplish this is to either put the divs inside the sought after parent element. Ergo the <li> you want to associate these links with. Give the parent <li> a style of position:relative. The on hover set the position of the child div or li to abosulte and left:0;top:0;. Then from there you can style it closer or farther with margin.
Try using padding-top to push them down with an id or class on each sub menu.
Then if that fails, try using min-height: auto; on each parent.