Well, I had a perfect menu with this code, just about right with this code in my css file
ul.Menu {
list-style-type: none;
margin: 10px;
overflow: hidden;
background-color: #ffffff;
border-style: solid;
border-color: #e9055c;
border-width: 2px;
font-weight: bold;
font-family: arial, sans-serif;
text-align: center;
margin: 0 auto;
}
ul.Menu li{
border-right: 1px solid #e9055c;
display: inline-block;
}
ul.Menu li a {
display:block;
color: #e9055c;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.Menu li a:hover {
background-color: #f6b0ce;
}
ul.Menu li:last-child {
border-right: none;
}
but then I added this to my CSS-code to create a responsive banner via divs at the top of my website:
.wrapper {
width: 100%;
overflow: hidden;
}
.container {
width: 100%;
margin: 0 auto;
}
.banner-img {
width: 100%;
}
and now my menu looks like this- totally crappy with too much space above the menu items...
I already found out, that it changes, when I'm changing the padding settings on the ul.Menu li a, but I can't get it right with just those...
Can you please help me? :)
You've written the margin property twice. Delete the margin : 0px style from ul.Menu, it is causing the problem.
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 am learning to create my first website and I've ran into the first problem that I can't solve. I have a navigation bar in which I want to sit nicely within a wrap but the navigation bar sits beneath it and I can't seem to get it right.
Advice would be great.
http://jsfiddle.net/z4pHZ/2/
HTML
<div class="links_container">
<div class="nav1">
<ul>
<li>Home</li>
<li>About</li>
<li>Challenges</li>
<li>Progress</li>
<li>Forum</li>
</ul>
</div>
CSS
.links_container {
width: 1000px;
height: 35px;
background-color: #33C4AB;
margin-right: auto;
margin-left: auto;
border-bottom-style: double;
border-bottom-width: 2px;
border-color: #000000;
/* [disabled]-webkit-box-sizing: inherit; */
/* [disabled]-moz-box-sizing: inherit; */
/* [disabled]box-sizing: inherit; */
position: absolute;
}
.nav1 {
float: left;
}
.nav1 ul li {
list-style-type: none;
float: left;
display: block;
}
.nav1 ul li a {
color: #FFFFFF;
text-decoration: none;
background-color: #333333;
display: inherit;
height: 35px;
width: 130px;
text-align: center;
line-height: 35px;
border-left: thin solid #CCCCCC;
}
.noBorder {
border-left-style: none !important;
}
.nav1 ul li a:hover {
background-color: #6B6B6B;
height: 35px;
}
.leftedge {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.rightedge {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
Try using
*{
margin:0;
}
and/or
.nav1 ul {
display: inline;
}
The first code will remove the default browser margin from the webpage, and the second code will display .nav1 ul as an inline element
Also, it's a good idea to think about removing .nav1{float:left;} since it doesn't affect anything, and change the .links_container width to 100% instead of 1000px.
Demo
You can use display: inline for your ul
.nav1 ul {
display: inline;
}
Updated Fiddle
I am facing some problem with this drop down menu thing. I read your article and it helped me. In the beginning, the drop down worked but when I added some more styling then it stopped working. Other divs and navigation bar is working fine but the drop down menu is not working. Can you please help me pointing out what should be corrected here?
The parent div is nav-bar-left and the style is
.nav-bar-left {
float; left;
overflow: hidden;
width: 980px;
height: 26px;
background-color: Lavender;
border: 1px solid MidnightBlue;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
The navigation div is #horizontalmenu which resides within the above parent div and the style is
#horizontalmenu {
width: 733px;
margin: 0;
position: relative;
float: left;
padding: 0;
}
Rest of the styling for navigation bar is
#navbar {
list-style-type: none;
margin: 0;
width: 100%;
padding: 0;
position: relative;
display: inline-table;
height: 26px;
z-index: 5;
}
#navbar li {
float: left;
position: relative;
}
#navbar a:link, #navbar a:visited {
display: block;
color: #333;
background-color: lavender;
text-align: center;
padding: 6px 10px;
border-style: solid;
border-color: MidnightBlue;
border-width: 0 1px 0 0;
text-decoration: none;
font-size: 14px;
line-height: 14px;
}
#navbar a:hover, #navbar a:active {
color: #fff;
background-color: #6b0c36;
text-decoration: underline;
}
#navbar ul {
left:-9999px;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
#navbar ul li {
float:none;
border-style: solid;
border-color: Lavender;
border-width: 0 1px 1px 1px;
}
#navbar ul a {
white-space: nowrap;
}
#navbar li:hover ul {
left: 0;
}
#navbar:hover a {
text-decoration: none;
}
#navbar li:hover ul a {
text-decoration: none;
background-color: Lavender;
color: #333;
}
#navbar li:hover ul li a:hover {
background-color: Lavender;
color: #333;
}
So, why is it not working and what can be done?
I found this menu CSS one of my best collection for dropdown menu:
Create a Multilevel Dropdown menu with CSS and improve it via jQuery
And you can find a backup of those codes here in my pastebin.
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