Small question on how to achieve some styling on a HTML / CSS UL menu.
I have a standard UL menu, but having some issues getting my head around how to achieve a certain look to the styling. The UL menu as it currently stands is shown here:
http://jsfiddle.net/WMQqt/
(HTML)
<ul id="nav">
<li>CONTACT US
</li>
<li>HOME
</li>
</ul>
(CSS)
#nav {
list-style: none;
margin-bottom: 10px;
*/ margin-top: -6px;
position: relative;
right: 286px;
z-index: 9;
height: 26px;
padding: 4px 4px 4px 4px;
font-weight: bold;
}
#nav li {
float: right;
margin-right: 10px;
}
#nav a {
display: block;
padding: 5px;
color: #444444;
background: #fff;
text-decoration: none;
border: 1px solid grey;
}
#nav a:hover {
color: #fff;
background: #04B431;
}
I'd like the menu buttons to have a small 1px border, but then some white space padding of around 3px before the background color starts.
Similar to how this looks:
http://jsfiddle.net/6PY7z/
Can this be done using the UL menu method?
Thanks for any advice, I'm no expert with HTML / CSS.
Add margin to a tag and move border to li
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey;
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #ccc;
text-decoration: none;
margin:3px;
}
DEMO
you can use the following styles to achieve what you want:
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey; /*put original border here*/
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #d8d8d8; /*new background-color*/
text-decoration: none;
border: 3px solid white; /*add white padding here*/
}
http://jsfiddle.net/WMQqt/4/
ok
in html go
<dl><div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
</dl>
in css
dl { display: flex;
flex-direction: column;}
some hints...
dt float left AND
dd float right
Related
New to html and css, I have checked other questions here and googled it but I am not finding an answer.
I am working on the nav bar and have this annoying space I can not figure out how to get rid of.
I made the background of the nav element blue so you can see what I am referring to and here is a screenshot:
http://imgur.com/v18HTjH
The HTML is:
<div class="topnavbar">
<ul class="nav">
<li class="nav-element">Home</li>
<li class="nav-element">Blog</li>
<li class="nav-element">About Me</li>
<li class="nav-element">Services</li>
<li class="nav-element">testimonials</li>
<li class="nav-element">Contact</li>
</ul>
</div>
The CSS:
.topnavbar{
background-color: blue;
border-top: 5px solid black;
border-bottom: 5px solid black;
position: relative;
margin-left: auto;
margin-right: auto;
width:90%;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-top-right-radius:30px;
border-bottom-right-radius:30px;
}
body {
top:1px;
background-color: black;
}
ul {
list-style-type: none;
padding: 0;
margin:0;
border-radius: 5px;
overflow: hidden;
}
li {
float: left;
border-radius: 5px;
}
a:link, a:visited {
display: inline-block;
width: 150px;
font-weight: bold;
color: #000000;
background-color: #ffffff;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #FA0000;
}
This solution doesnt necessarily take away the space, but it centers the links within the navbar.
http://jsfiddle.net/swm53ran/261/
ul {
list-style-type: none;
padding: 0;
margin:0;
border-radius: 5px;
overflow: hidden;
text-align: center; /* added */
}
li {
/* float: left; */ /* commented out */
display: inline-block; /* added */
border-radius: 5px;
}
hope this helps
remove width attribute .topnavBar in CSS file and check it.
Add width:150px; to the li class,
and change width of .topnavbar to 67%;
Actually you are giving width 90% to .topnavbar but your content of all li's is just 67%.
I want to do my hover like this: http://i.imgur.com/yi3Ehu2.png .
I have done something like this: http://jsfiddle.net/szsq2424/
If I use that hover using botom-border without display: block on anchor elements, ir looks like i want. But when I use display: block on a elements in white header class (to make all the button clickable, not just the text) , it takes that border down to the bottom of the button. Some ideas friends ?? Thanks ! I am new to html + css , appreciate the help !
Wrap the text inside the anchor with a span and apply the border to that.
.white-header {
width: 1400px;
background-color: white;
margin: 0;
padding: 0;
}
.white-header ul {
margin: 0 0 0 100px;
padding: 0;
}
.white-header ul li {
list-style: none;
float: left;
line-height: 60px;
}
.white-header ul li a {
display: block;
text-align: center;
}
.white-header ul li a:link,
.white-header ul li a:visited {
color: #3f3f3f;
text-decoration: none;
}
.white-header ul li a:hover {
color: #57C5A0;
}
.white-header ul li a:hover span {
color: #57C5A0;
border-bottom: 2px solid #57C5A0;
}
/********
FIRST BUTTON
********/
.white-first {
width: 120px;
max-height: 60px;
text-align: center;
border-left: 1px solid #383838;
border-right: 1px solid #383838;
}
/********
SECOND BUTTON
*********/
.white-second {
width: 150px;
text-align: center;
border-right: 1px solid #383838;
margin: 0;
}
.white-second a:link,
.white-second a:visited {
color: black;
text-decoration: none;
}
.white-second a:hover {
color: #57C5A0;
padding-bottom: -10px;
}
/******
VISA LIETUVA BUTTON
*******/
.white-third {
width: 270px;
border-right: 1px solid #383838;
}
<header class="white-header">
<ul>
<li class="white-first"><span>Pramogos</span></li>
<li class="white-second"><span>Pramogos</span></li>
<li class="white-third"><span>Pramogos</span></li>
</ul>
</header>
you can add text-decoration: underline to :hover to achieve result like on provided image
I'm am working on menus for a webpage. As it is now, my submenus are restricted to an 80px width which is defined in the css file under .dropdown > li {}. If I have a lengthy submenu li element like:
<li>Most Popular Artists</li> the submenu gets truncated to just "Most".
I need some guidance on how to allow the submenus to display everything they contain. Please advise.
HTML:
<nav id="top_menu">
<img src="media/images/logo_large.jpg">
<ul class="dropdown">
<li class="dropdown_trigger">
NEWS
<ul>
<li>Most Popular Artists</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
<li>
<li class="dropdown_trigger">
SOCIAL
<ul>
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</li>
</ul>
</nav>
CSS:
#top_menu{
position: relative;
top:35px;
left: 90px;
width:660px;
height:55px;
background-color: black;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
.dropdown {
background: black;
border: 1px solid black;
float: right;
padding: 1px 0 0 1px;
margin: 0 0 20px;
line-height: 55px;
list-style: none;
}
.dropdown a {
background: black repeat-x;
border: 1px solid black;
color: white;
display: block;
line-height: 25px;
overflow: hidden;
height: 25px;
text-decoration: none;
}
.dropdown a:hover {
color: #30B3FF;
background: #666;
}
.dropdown ul a {
background: black;
}
.dropdown > li {
list-style: none;
position: relative;
text-align: left;
font: bold 12px Tahoma;
*display: inline-block;
width: 80px;
/* IE7 hack to make inline-block work right */
*zoom: 1;
display: inline;
}
.dropdown li.dropdown_trigger {
display: inline;
float: left;
margin: 0 0 0 -1px;
}
.dropdown ul {
display: none;
list-style-type: none;
background: black;
border: 1px solid black;
position: absolute;
top: 26px;
left: -1px;
z-index: 9999;
}
.dropdown ul {
display: none;
}
.dropdown li.dropdown_trigger:hover ul {
display: block;
}
.dropdown a {
height: 25px;
overflow: hidden;
}
This is fixing the height of an item and cutting its contents. You can remove the height (the line-height will suffice), or change it to min-height to be sure. And remove the overflow.
.dropdown a {
min-height: 25px;
/* overflow: hidden; */
}
If you do that, then all the text will show, and the menu item will be multi-line.
You can then add
.dropdown a {
white-space: nowrap;
}
if you don't want the text to wrap. This will cause the menu to become wider.
I believe the truncation is caused by the overflow: hidden property your using on .dropdown a
.dropdown a {
background: black repeat-x;
border: 1px solid black;
color: white;
display: block;
line-height: 25px;
<!-- overflow: hidden; -->
height: 25px;
text-decoration: none;
}
Try removing that. Also, with that removed you may want to adjust the margins your using to pull the li tag further left. You can also use a negative margin if your li tag is already at zero.
Check out the JSfiddle showing what I am up to: http://jsfiddle.net/Amp3rsand/FPj3s/1/
HTML:
<ul id="navigation">
<li>BLAH</li>
<li>MORE <br /> BLAH</li>
<li>STILL <br /> MORE</li>
<li>YADDA <br /> YADDA</li>
<li>ETC ETC <br /> ETC ETC</li>
<li>FINISH</li>
</ul>
CSS:
body {
font-size: 12px;}
}
#navigation {
width: 600px;
height: 50px;
position: absolute;
left: 20px;
top: 25px;
}
#navigation li {
list-style-type:none;
width: 94px;
height: 40px;
display: block;
float: left;
margin: 0 5px 0 0;
text-align: center;
font-weight: bold;
background: lightgrey;
}
#navigation li:first-child {
border-top: 40px solid lightgrey;
border-left: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
#navigation li:first-child a {
position: relative;
top: -35px;
right: 0px
}
#navigation li:last-child {
border-top: 40px solid lightgrey;
border-right: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
#navigation li:last-child a {
position: relative;
top: -35px;
left: 5px;
}
#navigation li:last-child a:hover {
top: -35px;
left: 5px;
}
#navigation li a {
display: block;
height: 40px;
text-decoration: none;
color:#000;
}
#navigation li a:hover {
background: grey;
}
The lightgrey shapes are what I would like the hover to look like. Only the first and last children need to look different but I am unsure of how to go about messing with the borders on hover without ruining the layout. I have had to move the first and last 'a' elements because of the border shenanigans and now I'm stuck.
What would you suggest?
EDIT:
I just realised I could do this to change the shape of the hover bit but the link position is still causing trouble
#navigation li:last-child a:hover {
border-top: 40px solid grey;
border-right: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
See it live here on JS Fiddle
The properties you want to change are of the <li> elements so target the list items hover state and change the background and border color
#navigation li:hover {
background: grey;
}
#navigation li:first-child:hover,
#navigation li:last-child:hover{
background: none;
border-top-color: grey;
}
Updated fiddle
Essentially, you want to set the 'border-top' to grey for the first/ last child.
You could use in CSS:
#navigation li:first-child:hover {
border-top: 40px solid lightgrey;
}
But this didn't work in Google Chrome, for me, so perhaps just apply that as a hover effect using jQuery?
I need some advice and some help. I am not so much of a css guy, but I want to learn.
I am trying adjust some css for my drop down menu.
I have the following issues:
The dropdown button should be as big as the image, leaving only the area of the dropdown triangle.
The dropdown triangle should be aligned vertically in the middle and centered horizontally.
The dropdown options should be aligned with the right border and open inwards towards the left, instead of the opposite.
Can someone help me with adjusting this?
I want to learn the techniques, but trial on error is such a long way.
My code is as folowing:
<html>
<head>
<head>
<body>
<style>
body {
background-color: white;
font: normal 11px Tahoma,Verdana,Arial,Sans-Serif;
color: #222;
height: 380px;
}
.dropdown {
display: block;
display: inline-block;
margin: 0px 3px;
position: relative;
}
/* ===[ For demonstration ]=== */
.dropdown { margin-top: 25px }
/* ===[ End demonstration ]=== */
.dropdown .dropdown_button {
cursor: pointer;
width: auto;
display: inline-block;
padding: 0px 0px;
border: 1px solid silver;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 2px;
font-weight: bold;
color: #717780;
line-height: 16px;
text-decoration: none !important;
background: white;
}
.dropdown input[type="checkbox"]:checked + .dropdown_button {
border: 1px solid #3B5998;
color: white;
background: silver;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
border-bottom-color: silver;
}
.dropdown input[type="checkbox"] + .dropdown_button .arrow {
display: inline-block;
width: 1px;
height: 1px;
border-top: 5px solid silver;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.dropdown input[type="checkbox"]:checked + .dropdown_button .arrow { border-color: white transparent transparent transparent }
.dropdown .dropdown_content {
position: absolute;
border: 1px solid #777;
padding: 0px;
background: white;
margin: 0;
display: none;
}
.dropdown .dropdown_content li {
list-style: none;
margin-left: 0px;
line-height: 16px;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
margin-top: 2px;
margin-bottom: 2px;
}
.dropdown .dropdown_content li:hover {
background: silver;
}
.dropdown .dropdown_content li a {
display: block;
padding: 2px 7px;
padding-right: 15px;
color: black;
text-decoration: none !important;
white-space: nowrap;
}
.dropdown .dropdown_content li:hover a {
color: white;
text-decoration: none !important;
}
.dropdown input[type="checkbox"]:checked ~ .dropdown_content { display: block }
.dropdown input[type="checkbox"] { display: none }
</style>
Here there will be a lot of text and a lot of other menu buttons. So hope the angle of the dropdown will open to the left instead of the right.
<div class="dropdown" id="dropdown">
<input type="checkbox" id="drop1" />
<label for="drop1" class="dropdown_button"><img src="http://ichef.bbci.co.uk/wwfeatures/43_43/images/live/p0/17/tx/p017txf6.jpg" height="43" width="43" /><span class="arrow"></span></label>
<ul class="dropdown_content">
<li>Privacy settings</li>
<li>Account settings</li>
<li>Logout</li>
</ul>
</div>
</body>
</html>
Now I managed to fix the border around the image by correcting the padding padding: 0px 0px; but then I feel like working in blind...can someone help pointing me where to fix my adjustments?
Give your span an id of 'arrowSpan' and apply this style in your css:
#arrowSpan{
display:block;
margin-left:17px;
margin-top:2px;
margin-bottom:5px;
}
Also add position:absolute; and right:0 to your .dropdown .dropdown_content styles.
Here's a fiddle: http://jsfiddle.net/zsp7t/1/
As for collapsing the dropdown when clicking outside, it is possible. There's a bunch of examples online using jQuery, here's a couple that can help you get started:
Use jQuery to hide a DIV when the user clicks outside of it
Hiding a div by selecting anywhere outside of it
You also mentioned that you wanted to learn more, so check these sites out to help you increase your skills:
http://www.codecademy.com/
http://www.codeschool.com/courses