Long time!! :)
I would appreciate if someone can help me with this, it's a jquery menu that I've been using for my website, I would like to know if it's possible to:
Menu Bar at Jsfiddle
Put some vertical line separator on each option of the menu to separate them
without being affected by the hover effect like the text option.
add to the menu on the corner end on the right a small ''social media'' icons (img)
each one directing to a specific link
just like the text menu. The menu fits the website content (940px width)
and has extra space but in the fiddle example it doesn't show.
also important> is there a way to add a bigger text on the menu
and make each menu word option bigger by stretching it? Looks pretty small.Horizontally I mean, vertically it stays the same.
It's important that the underline hover and the rest appears the same just like it's shown in jsfiddle without being affected by these possible changes.
I would deeply appreciate it!!! :)
There are a few CSS and markup changes you can make to achieve what you'd like
#example-one { margin: 0 auto; list-style: none; position: relative; width: 940px; font-family:Arial; }
#example-one li a { color: #bbb; font-size: 14px; letter-spacing:2px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; border-right: 1px solid white; }
#example-one li:first-child a { border-left:1px solid white; }
On the first line, you can add your font-family to change the font used in your menu.
On the second line, I added a border-right, and set letter-spacing:2px.
I added the third line to give a border-left to only the first item (so that you get the full appearance of separators).
Also I added this item to your list that you could easily insert a social media icon into:
<li style="float:right;"><a style="border:none;" href="#">Social Icon</a></li>
You can push it to the right side of the menu using float:right.
Here is an updated fiddle.
Related
I'm new here, so please tell me if I formulated something wrongly, code or text-wise.
This is the code I'm currently using for my page. Yes, I know it's short and terrible, but I'm still learning HTML/CSS. If you run that on a page, you'll notice no hover events on the navbar buttons, and some fiddling with the logo will reveal that the actual navbar is a big bar. (width:100%?)
I was only wondering as to how I would go about creating an on hover that's only slightly there, something like this: (hovered on the left, not hovered on the right)
Hover showcase
I don't necessarily need it using my current setup or it being exact, but I'd like an explanation as to how this would be done. (the site I took it from has fancy fade on the text turning blue and a slide animation on the bar from the bottom, but I don't expect I'll be able to do that)
I was also wondering how I could have the logo be on the same bar as the other li elements, and then center it off how long logo + li elements (the whole bar) would be. (as opposing to having the li elements centered and a logo off to the left.) Also, a thick, colored bar above the navbar, but not below, like a margin, and having the navbar be a little thicker as well, as the picture above depicts fairly well.
Thank you for any assistance I can recieve!
Hyao
So for the hover color you can do something like:
li:hover {
color: blue;
border-bottom: 3px solid blue;
}
To add more of the animation you might want to do:
li {
display: inline-block;
vertical-align: middle;
}
li a:hover {
color: blue;
}
li a:after {
margin: 0 auto;
width: 0px;
height: 3px;
display: block;
content: "";
background-color: blue;
transition: width 0.5s linear;
}
li a:hover:after {
width: 100%;
}
li img {
padding: 14px 16px;
}
http://plnkr.co/edit/GrxqcRjoMa7aWjHvnBhA
basically you are creating a psuedo element :after which has an animation on its width. When you hover over an li element the psuedo element will grow to 100% of the width looking like an expanding underline.
To make the image inline with the other elements remove your position: absolute style for the #logo
I am making a site in Bootstrap and am unable to achieve making a simple menu.
I want to make something like this:
So far I have achieved this:
I tried but cant make my CSS to work properly.
Here is my CSS Code:
.navbar-nav li a {
height: 90px;
line-height: 60px;
margin: 0 10px;
background-color: #f1f1f1;
font-size: 1.1em;
border-radius: 10px;
}
Any help would be appreciated.
Check this fiddle https://jsfiddle.net/gward90/h8cnbL5w/1/
To adjust the look of your buttons play with the padding of .nav>li>a Thats a BS default css class. The default padding value is set to padding: 10px 15px
You also need to remove the height from your .navbar-nav li a class that is whats making your buttons so large you also don't need the line-height.
Look at my code here.
You need to resize Result panel so that you can view at least two block inline. If you click on "More details" link then it will show details but it will shift next rows block also.
Any suggestion why this it is showing like this though I have used clear:both.
.reviewimg_blk {
border: 1px solid #9B9B9B;
float: left;
margin-bottom: 15px;
margin-right: 15px;
margin-top: 15px;
padding: 5px 5px 5px 10px;
position: relative;
width: 395px;
}
That's a common problem with floats.
Use display: inline-block; vertical-align: top; instead of float:left; if you don't need IE7 support.
See https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ for a cross-browser solution.
This is happening because of position:relative. Position:relative keeps div's or blocks in a relation so the below block was moving down. Use instead position:absolute at the places related to that dropdown part.
That is because your 1st itemStyle div has more content so it is taking more height than other divs.
So add <div class="clear"> </div> after every two itemStyle divs or fix the min-height to the itemStyle div.
I have added clear class after every two itemStyle divs in demo.
DEMO
..Live demo
Hi now used to Even and odd rules in css
.itemStyle:nth-child(odd) {
clear:left;
float:left;
}
more info even or odd rules
Here is what my project looks like:
Each red box is a link. Right now I have them as tags with a line-height matching the height of the box, so that the text is vertically centered. The problem i am running into is when the text that needs to go on a tile is too long. How would i be able to make the text wrap if it is too long? Is there a way to find if the string will fit within a certain width?
Would changing the way i have the tiles set up make this easier? I thought about just making the Divs clickable, but then im still not sure how to make the text vertically aligned in the center. I just need a pointing in the right direction. Thanks
EDIT: some of the code
the html of a tile:
<div class="primary col_1 row_1">
<a href="javascript:expand(1, 1)">
<?php echo $tile_data[0][0]; ?>
</a>
</div>
The CSS applicable:
#selection_menu a {
color: #FFFFFF;
width: 162px;
text-decoration: none;
font-weight: bold;
display: block;
border: none;
float: left;
}
#selection_menu .primary_options .primary a { font-size: 23px; height: 108px; }
Consider the following (add proper colors and typography):
#selection_menu div a {
display: table-cell;
height: 108px;
text-align: center;
vertical-align: middle;
width: 162px
}
This will vertically center every a inside a div (inside #selection_menu), no matter how many lines it spans. Works in all modern Web browsers. You can set line-height to a proper value like 1.5 (it will define the way the link looks when it spans across multiple lines).
I'm a web designer and new in stackoverflow, I have this issue with positioning drop-down menu links (more specifically aligning them to the left of the menu) because there is a space between the menu left border and the beginning of the links (check the live demo link below). I've tried text-align, float, margin, padding, and position properties but none of them seem to solve this. I think that the menu css might be conflicting with other css code of the page, but I just can't seem to find it.
You can check the source code from a live demo of the page here.
Ok, based on how your code is structured, this is how I would modify your css to do what I think it is you're trying to do - I'll ** the css changes I've made:
.dropdown dd {
position: absolute;
overflow: hidden;
width: 200px;
display: none;
background: #f8f8f8;
z-index: 200;
opacity: 0;
**border-right: 1px solid #004e8e;**
}
.dropdown ul {
**overflow: hidden;**
width: 204px;
border: 1px solid #004e8e;
list-style: none;
}
.dropdown li {
**display: block;**
**position: relative;**
**left: -40px;**
}
This should get rid of the extra space on the left as well as put that blue border around the drop-down that I believe you were also trying to create.