Would there be any way of making the bars under the words automatically size out to the width of the word it's under with out me having to upload specific sized bars for ever menu item I make? Thanks
Looks like it could just be a border-bottom of a link. Here's a JSFiddle.
Portfolio
Blog
And
#footer a {
border-bottom: 1px solid white;
}
You should use borders:
.menu a {
/* additional styling... */
border-bottom: 1px solid #FFF;
}
Also you could use background images positioned at the bottom of each menu item.
.menu a{
background:url(path/to/image.jpg) repeat-x bottom;
}
Related
I am having trouble making a CSS styled navigation bar that has a white arrow (triangle) pointing upwards at the selected nav item. The white arrow (triangle) blends with the body below, and is centered on the text box. Something like this screenshot:
Anyone have any suggestions on how to specify a "selected" CSS styling for the nav item as shown in the above screenshot?
I'm trying to create a CSS style called "activate", so <li class="activate">Overview</li> makes the arrow. Here is a jsfiddle of what I have so far https://jsfiddle.net/v680tfvr/
which kind of works, but the highlighting is too big when the user hovers over the menu item, and a second little arrow appears near the top. Seem simple, I just can't figure it out!
I have made the following changes:
Fixed the Border
Fixed the heading
That mysterious thing doesn't appear on hover
Code
.submenu {
height: 40px;
overflow: hidden;
}
.submenu .activate:after {
content: '';
position: relative;
width: 0;
height: 75px;
left: 40%;
top: -39px;
border-left: 10px outset transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #ffffff;
}
Fiddle: https://jsfiddle.net/v680tfvr/5/
Question: What's the best way to create a horizontal menu with drop down capabilities that can be dynamically resized? (Or preferably, how can I edit my current menu to behave like that?)
Explanation: I'm using a thin, horizontal drop-down menu as the main navigation on my site. When the browser window is at full width, there are no problems, but when it is resized, the right-most link pushes down to the next line, as it is floated.
Horizontal menus are such a common thing, I know there have to be some common tricks and ways to create them so that they can be dynamically resized. So if trying to fix my current menu is too burdensome, I would be fine just to hear some tips or read some stuff on how to create better horizontal menus.
Here is what I think would be the main problem:
.menu2 li {
position: relative;
float: left;
width: 150px;
z-index: 1000
}
I've tried different combinations of making this inline and making other tweeks, such as making the 150px width into a percentage, but that would create all sorts of alignment issues with the text.
Here is a demo with all of the code now: http://jsfiddle.net/HSVdg/1/
Some notes on the above link:
I am using Tiny Drop Down 2 (http://sandbox.scriptiny.com/tinydropdown2/) for drop-down functionality (in the form of JS and CSS, which are noted in comments), though the drop down is not actually working in the jsfiddle. I'm pretty sure all of the JS is irrelevant to my main question.
Tiny Drop Down uses a lot of CSS, so it's been quite difficult for me to try and make little tweeks.
The buttons are not vertically lined up with the actual bar, but again this is not the main issue since this is not happening on my actual site.
The window size in the jsfiddle doesn't actually accomodate the entire length of buttons, so you immediately see the problem of the buttons moving to the next line.
Try my version, with display table/table-cell:
http://jsfiddle.net/HSVdg/10/
I've basically just replaced floats with display: table on .menu2 and display: table-cell on its children (li's)
This is how i see it
<nav>
<ul>
<li id="youarehere">Home
<li><a>Products</a>
<li><a>Services</a>
<li><a>Contact Us</a>
</ul>
</nav>
ul#navigation {
float: left;
margin: 0;
padding: 0;
width: 100%;
background-color: #039;
}
ul#navigation li { display: inline; }
ul#navigation li a {
text-decoration: none;
padding: .25em 1em;
border-bottom: solid 1px #39f;
border-top: solid 1px #39f;
border-right: solid 1px #39f;
}
a:link, a:visited { color: #fff; }
ul#navigation li a:hover {
background-color: #fff;
color: #000;
}
ul#navigation li#youarehere a { background-color: #09f; }
The following code is setup in the template to show each time a new sidebar widget is inserted. (It shows around each new widget)
<div class="sidebox-top"></div>
<div class="sidebox">
<div class="widgets">
<div class="textwidget">
[WIDGET CONTENT]
</div>
</div>
</div>
The above displays the following CSS:
.sidebox-top {
background-image: url("/images/top-border-side.gif");
background-position: center top;
background-repeat: no-repeat;
height: 4px;
}
.sidebox {
border-bottom: 1px solid #D9D9D9;
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
margin-bottom: 14px;
padding: 10px 18px 5px;
}
The result is this:
This works great for most all widgets used. However, I want the above images to show in the sidebar without the sidebox-top blue line or border. I know there is a way to use certain CSS symbols to identify before or after by using the > symbol, I'm just not sure how to use that here or if it will even work.
Any help is always appreciated. Thank you!
Replicating the issue
Okay, I've attempted to replicate your image in this JSFiddle demo. In case JSFiddle is down, here is what this looks like:
For this instead of using a background-image and 4px height on .sidebox-top, I've simply used a 4px border-top. Whilst not an identical replication, this achieves the same basic effect.
Hiding the .sidebox-top element
Step 1
To begin with, we need to target the very first child contained within the .textwidget divider, only if it's an img. We do not want to apply this styling to any other img elements after that, nor do we want to apply the styling if the img isn't the first element within the container. To do this, we can use:
.textwidget img:first-child { ... }
Step 2
The next step is to give our image top padding and negative top margin equal to the sum of the top padding of .sidebox and the height of .sidebox-top. We then want to give our image a background which is the same colour as the background of your widget:*
.textwidget img:first-child {
background: #fff;
padding-top:14px;
margin-top: -14px;
}
* Note: This assumes that your widget's background is the same as your widget's container's background and that the background is a solid colour. If it isn't, you'll need to play around with background-position to align your patterned background with the widget's background.
From this, we end up with our image overlapping the top border whilst remaining in the same position that it started in:
Step 3
The third step is to cover the entire .sidebox-top. To do this we're going to need to give our selected img left and right padding and negative left and right margin equal to the sum of the left and right padding of the .sidebox and its border-width:
.textwidget img:first-child {
... /* Styling from Step 2 */
padding-left: 18px;
padding-right: 18px;
margin-left: -19px;
margin-right: -19px;
}
Step 4
Step 3 has certainly covered the entire .sidebox-top, but it's also covered the borders of .sidebox. For this we need to add identical borders to our selected img and reduce the left and right padding on our img to allow for this:
.textwidget img:first-child {
... /* Styling from Step 2 */
padding-left: 17px;
padding-right: 17px;
... /* Margins from Step 3 */
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
}
Final Step
The final step is to add a top border to our img to complete the border of the widget. As with Step 4, for this we'll need to reduce the size of the top padding to allow for this border:
.textwidget img:first-child {
... /* Styling from previous steps */
padding-top: 13px;
border-top: 1px solid #D9D9D9;
}
Final JSFiddle demo.
I have added a border to a button on mouse hover but this disturbs the HTML layout. How can I do this without disturbing the HTML layout?
Why not have a border there all the time, but initially have it the same colour as the background so it's effectively transparent?
Then simply change the colour on mouseover.
You can use css box-sizing property write like this:
.child:hover{
border:1px solid green;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Check this http://jsfiddle.net/zFJHV/1/
or
you can use
div{
border-bottom:1px solid red;
margin-bottom:-1px;
}
EDIT:
may be you can use outline instead of border check this:
http://jsfiddle.net/zFJHV/2/
On the hover, reduce the width of the button by the pixel width of the border x2.
For instance, if the button is 100px wide and you're adding a 1px border all the way around, then on hover the CSS should be:
width: 98px;
border: 1px solid #000;
There are several possible solutions, some of which were posted in other answers.
If you want a border all the way round the element, the simplest and easiest is to add an outline. Outlines do not affect the flow of an element, but they do not work on individual sides. (Their intention is to be used for debugging rather than design.)
button:hover { outline: 1px solid black; }
The solution by Stephanie to reduce the element's width won't move other elements on the page, but since you are shrinking the element's size, the content inside will get moved. (Edit: actually in theory this could wrap some text onto an extra line and thus push some other elements down.)
You can set a negative margin on hover as sandeep said (in his original answer), which effectively cancels out the additional space used by the element. As far as I can tell this doesn't affect the flow but there could be edge cases.
button:hover { border: 1px solid black; margin: -1px; } /* all sides*/
button:hover { border-bottom: 1px solid black; margin-bottom: -1px; } /* bottom only */
Another solution is to set the border to be the same as the background colour (as Sir Crispalot suggests), or you can make it transparent. Then change the colour on hover. Making it transparent will work on any colour background, but the background colour of the element (the button in your case) will show through.
/* for a patterned page background: */
button { border-bottom: 1px solid transparent; }
button:hover { border-bottom: 1px solid black; }
/* or, if the button has a background colour: */
button { border-bottom: 1px solid #fff; }
button:hover { border-bottom: 1px solid black; }
On hover button, add border and reduce width and height 2 px each. This will not change the layout.
I'm maintaining the Perl Beginners' Site and used a modified template from Open Source Web Designs. Now, the problem is that I still have an undesired artifact: a gray line on the left side of the main frame, to the left of the navigation menu. Here's an image highlighting the undesired effect.
How can I fix the CSS to remedy this problem?
It's the background-image on the body showing through. Quick fix (edit style.css or add elsewhere):
#page-container
{
background-color: white;
}
That is an image. (see it here: http://perl-begin.org/images/background.gif) It's set in the BODY class of your stylesheet.
The grey line is supposed to be there. The reason why it looks odd is because the very top is hidden by the buffer element. Remove the background-color rule from this ruleset:
.buffer {
float: left; width: 160px; height: 20px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);
}
I think it's this:
#page-container {
border-left: solid 1px rgb(150,150,150); border-right: solid 1px rgb(150,150,150);
}
However, I'm not seeing why the right border isn't showing up....
I found the problem.
The problem is that you need to set a white background on #page-container. As things stand, it has a transparent background, so the 5pt left margin on navbar-sidebanner is revealing the bg of the page_container ... so change that bg and you're cool.
I would do a quick fix on this to add the style:
border-left:2px solid #BDBDBD;
to the .buffer class
.buffer {style.css (line 328)
background-color:#FFFFFF;
border-left:2px solid #BDBDBD; /* Grey border */
float:left;
height:20px;
margin:0px;
padding:0px;
width:160px;
}
Thanks to all the people who answered. The problem was indeed the transparency of the #page-container and the background image of the body. I fixed them both in the stylesheet.