I want to put the logo in-between the navigation menus but I can't figure out how to do it in the theme that I have because I'm having trouble finding it in the backend. I'm sure it's just a matter of reordering something or adding a margin and a space for the photo... Under the header section of the CSS this is the code:
#header { padding:0 20px;margin-bottom:8px;}
#logo { float:left; }
#logo { text-transform:capitalize; padding:35px 0; }
#logo img { max-width:100%; }
#navigation { float:right; margin-right:20px; }
#navigation ul { list-style:none; position:relative; }
#navigation ul li { float:left; padding-left:30px; font-size:12px; display:block; position:relative; font-weight:bold; }
#navigation ul li a { color:#888; padding-bottom:10px; padding-top:35px; display:block; }
#navigation ul li ul { position:absolute; border:1px solid #e9e9e9; display:none; left:15px; padding-bottom:15px; z-index:9999; }
#navigation ul li ul li { min-width:150px; margin-left:15px; margin-right:15px; padding:15px 0 10px 0; border-bottom:1px solid #f6f6f6; font-weight:normal; font-size:10px; }
#navigation ul li ul li:last-child { border:0; padding-bottom:0; }
#navigation ul li ul li a { border:0; display:block; padding:0; }
#navigation li:hover ul { display:block; }
#navigation select { display:none; -webkit-appearance: none; border-radius: 0; }
#navigation ul li#magic-line { position: absolute; left: 0; width: 100px; height: 4px; padding-left:0; display:none; }
I suppose u are using wordpress theme ? If so, each li has its own classes. So you should create one "empty" menu, and add it as background of that link, you can make link to be home page. Text you can hide with text-indent:-9999px;
If u have exact link, i can be more helpful, check how i pulled it out here: http://itsgoran.com/cider
Update:
code should be like this:
li#menu-item-15 {
background-image: url(http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/SHEISBIDDYmainlogoandslogan1.png);
width: 470px;
height: 130px;
background-repeat: no-repeat;
text-indent: -9999px;
}
but i suggest firstly to create smaller logo image, then use that image for this, and ofcourse add smaller width and height which would be width/height of that smaller image.
Related
hoping someone could help me solve this issue...im not using js, just css and html. I have built a menu which works good but my issue is when i try to add in a sub menu. I would like for it be hidden until someone goes over the main menu, then i would like for it to drop down. The effect that im getting now is my sub menu loads right away with the main menu above it and then it disappears when i go over that main menu item. i have tried some different things such as adding z-index here and there, but no luck so far...
HTML:
<div id="container">
<div id="menu">
<ul id="nav">
<ul>
<li id="menu1"><h2>Home</h2></li>
<li id="menu2"><h2>Sign-Up</h2></li>
<li id="menu3"><h2>Packages</h2>
<ul>
<li>Gold</li>
<li>Platinum</li>
</ul>
</li>
<li id="menu4"><h2>About Us</h2></li>
<li id="menu5"><h2>Contact</h2></li>
</ul>
</ul>
</div>
CSS:
* {
margin:0px;
padding:0px;
}
.form-textbox{
height:100px;
font-size:100px;
}
#fieldset{
width:300px;
}
#fieldst p{
clear:both;
padding:5px;
}
#legend{
font-size:16px;
}
label[for="username"] {
color:#FFFFFF;
font-weight:bold;
clear:both;
text-align:left;
}
label[for="password"] {
color:#FFFFFF;
font-weight:bold;
clear: both;
text-align:left;
margin-top:40px;
}
body {
padding-top:0px;
background-color:#01111d;
color:#FFF;
font-family:verdana, arial, sans-serif;
text-align: left;
letter-spacing: 1px;
}
a {
color: #FFF;
font-size: 14px;
}
a:hover {
color:#efae00;
} //01a9c0
.more {
float:left;
}
.clear {
clear:both;
}
p {
margin: 20px 0px 20px 0px;
line-height: 16px;
font-size: 14px;
}
#container {
margin: 0px auto;
width: 873px;
}
#menu {
background-image:url(images/menu.gif);
width:862px;
height:90px;
position:relative;
z-index:99999;
}
#menu li{
position:absolute;
top:40px;
list-style-type:none;
}
#menu1 {
left:110px;
}
#menu2 {
left:255px;
}
#menu3 {
left:400px;
}
#menu4 {
left:540px;
}
#menu5 {
left:680px;
}
#menu a {
font-family: verdana, arial, sans-serif;
font-size:12px;
font-weight:bolder;
color:#FFFFFF;
text-decoration:none;
text-transform:uppercase;
}
#menu a:hover {
color:#efae00;
}
#menu li > #nav li ul
#nav li ul {
position:absolute;
display:none;
}
#nav li:hover ul {
display: none;
}
#nav li ul li {
float: none;
display: block;
}
#nav li ul li a {
width: 118px;
position: absolute;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: #333;
color: #fff;
}
#nav li ul li a:hover {
background: #066;
color: #000;
}
Jsfiddle here: http://jsfiddle.net/bC7f2/
So it appears there are a few things that we can change in your code. The first thing is when you should and should not display things. To keep it short, I have made a few adjustments to the CSS code, just be sure you are getting the exact area you are trying to use. Here are the new selector names:
#nav ul li:hover ul #ITEM NAME HERE
#nav li ul # ITEM NAME HERE
Next, you started off by displaying your drop down menu as "display: block;" , this means that anything in the drop down menu will automatically begin on the page, this should actually be set to "display:none;", so that it is not visible until you hover. Here is your end product:
#nav ul li:hover ul #item1 {
display: none;
position: absolute;
z-index: 100;
display: inline-block;
top: 20px;
}
#nav ul li:hover ul #item2 {
/* display: none; */
position: relative;
z-index:1;
display: block;
top: 13px;
}
#nav ul li:hover ul #item3 {
/* display: none; */
position: relative;
z-index:0;
display: block;
top: 27px;
}
#nav li ul #item1 {
z-index:100;
display:none;
}
#nav li ul #item2 {
z-index:1;
display:none;
}
#nav li ul #item3 {
z-index:0;
display:none;
}
I also added a margin here to connect the sub menu to the normal menu or else it will act really weird. Your end product can be found here.
I would suggest looking into some specific tutorials on how to create drop down menus with CSS or look into using jQuery with your drop down menu (it will make it more clean and easy to use).
Edit: Here is an update with the sub menus showing, I have also added another sub menu to show you exactly how the items will work and the corresponding CSS to go with it here.
To break down my additions, I will split it up into sections really fast:
Z-Index: This is pretty much the order of what the items will appear in, where the higher the number, the higher on the list it will appear. Here is a resource for more information.
Positioning: I have used a combination of absolute and relative positioning. This is extremely dirty and I don't know if many would recommend the use of this in the applicable web programming world. It would be better to use solely absolute positioning, but this will still get your job done. More information can be found here.
Top: This is pretty self explanatory but it is really the distance from the utmost top object. More information on this can be found here.
I have recently been working on a small CSS menu that I can’t get working properly. Ive been fiddling around with existing menu’s and trying to get the positioning and fonts etc to be working.
Basically first I had my main menu, which is working fine the way it should. Now when I try add a dropdown to one of the options, it really messes up and I am completely clueless to fixing this mess :S
What I need help in: Positioning the dropdown menu’s below the correct menu-item (now they always float on the left). Also I want the submenu items, to be the exact same style/size/font/etc as the main menu items, which for some reason I can’t get working either.
Any help is appreciated, I submitted the CSS / HTML Code of the menu into a pastebin file:
CSS: http://pastebin.com/rJEgvnK1
HTML: http://pastebin.com/e52RuH4r
Its not perfect but still you can figure out the positioning correctly but not the fonts. Check this jsfiddle
CSS used:
#mainMenu ul{
width:954px;
padding:0;
margin:5px 0 10px 0;
list-style-type:none;
border:solid 2px #ddd;
font-size: 18px;
text-transform: uppercase;
}
#mainMenu ul li a{
text-decoration:none;
color:#000000;
background-color:#eee;
padding:0.2em 0.6em;
border-right:0px solid white;
display:block;
}
#mainMenu a:hover{
color:#FFFFFF;
background-color:#2E9AFE;
}
#mainMenu ul li{
display:inline-block;
position: relative;
}
#mainMenu ul ul {
background-color: #eee;
display: none;
width: 133px;
height: auto;
position: absolute;
border: solid 1px #ddd;
top: 23px;
}
#mainMenu ul li:hover > ul{
display:block;
padding:0;
margin:5px 0 10px 0;
list-style-type:none;
border:solid 2px #ddd;
font-size:18px;
text-transform:uppercase;
}
#mainMenu ul ul li:hover a{
color:#FFFFFF;
background-color:#2E9AFE;
}
#mainMenu ul ul li:hover {
cursor:pointer;
}
#mainMenu ul ul li {
float:none;
padding:10px;
}
#mainMenu ul ul li{
font-size:16px;
padding:0 10px;
}
Not perfect but this should get you furter:
jsfiddle
To get the blocks below each link (IN YOUR CSS), simply remove the a-Tag from #mainMenu ul li a{
This one is a little nicer !!!
I am making a dropdown on hover, but I have a problem with CSS. I have class inside class inside a div etc. The problem is that the dropdown list doesn't show. I think that I am doing something wrong with CSS selectors.
This is html code:
<div id="header">
<div class="row-2">
<ul class="hover">
<li>Home</li>
<li><a>Pershkrimi</a>
<div class="button">
<ul class="file_menu">
<li>klzxd</li>
</ul>
</div>
</li>
<li>
Trailera
</li>
<li>
Kategorite
</li>
<li class="last">
Sitemap
</li>
</ul>
</div>
</div>
CSS:
#header .row-2 {
height:51px;
}
#header .row-2 ul {
width:100%;
overflow:hidden;
}
#header .row-2 ul li {
float:left;
font-size:20px;
line-height:2.4em;
margin-right:5px;
background-color:#000;
}
#header .row-2 ul li.last {
margin-right:0;
}
#header .row-2 ul li a {
text-decoration:none;
color:#f0f0f0;width:184px;
height:56px;float:left;
background-image:url(images/nav-bg.gif);b
ackground-repeat:no-repeat;
background-position:0 0;
text-align:center;
}
#header .row-2 ul li a:hover, #header .row-2 ul li a.active {
color:#d72a18;
background-image:url(images/nav-act.gif);
}
/*Dropdown*/
#header .row-2 ul li div.button {
height: 32px;
width: 184px;
margin: auto;
}
#header .row-2 ul li div.button ul, li {
margin: 0;
padding: 0;
list-style: none;
}
#header .row-2 ul li div.button ul .file_menu {
display: none;
width: 300px;
border: 1px solid #1c1c1c;
}
#header .row-2 ul li div.button ul.file_menu li {
background-color: #302f2f;
}
#header .row-2 ul li div.button ul .file_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
}
#header .row-2 ul li div.button ul .file_menu li a:hover {
padding:10px;
font-weight:bold;
color: #F00880;
}
/SLIDESHOW/
#slogan
{
width:100%;
height:auto;
position:relative;
background:url(images/banner-bg.gif) no-repeat left top;
color:#1d1d1d
}
#slogan .image
{
position:absolute;
right:-30px;
top:-11px;
z-index:100;
width:100%;
height:auto;
overflow: hidden;
background:url(images/banner-img.png) no-repeat left top
}
#slogan p
{
margin-bottom:23px
}
#slogan .inside
{
padding: 0 0 25px;
width:939px
}
#page1 #content .box
{
margin:0
}
#page1 #header .row-2 ul li a
{
height:56px
}
#page1 #header .row-2 ul li.last a:hover
{
position:relative;z-index:2
}
.slideshow
{
position:relative;
width:500px;
height:332px;
}
.slideshow img
{
position:absolute;
left:4px;
top:10px;
}
NOTE: I just added slideshow CSS, that i think is overwriting dropdown
Thank You,
There are a lot of things I would do differently with how you've got your CSS laid out, but if you're looking for a simple answer, use the > child selector instead of just a space in order to select only those lists that are in your row-2 class. For example,
#header .row-2>ul
will get only <ul> elements whose parent is a .row-2 element, which seems to be what you're looking for.
I have a drop down menu bar. But it is always behind my content no matter how high I set the z-index of the bar or if I set the z-index of my content to -1. Can anybody help?
I did set the z-index to 500 where I do the hover of my navigation top menu but no change. Could it be because of the reset code I use in the beginning of my CSS code?
Here is my CSS Code:
/*navigation.xhtml; author: Mica */
#navigation {
float:left;
width:100%;
height:18px;
margin:15px 0 25px;
}
#navigation ul {
list-style-type:none;
list-style-image:none;
padding:0px;
float:left;
width: 100%;
}
#navigation li.topmenu {
float:left;
width:170px;
}
.topmenu a {
float:left;
width:100%;
text-align:center;
}
.topmenu ul {
float:left;
display:none;
width:100%;
}
.topmenu a, .submenu a, .topmenu:hover .submenu a {
padding:3px 0;
border:1px solid #C27000;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
background-color:#FF8C00;
margin:0;
font-weight:bold;
}
.submenu a{
width:100%;
clear:both;
postition:absolute;
}
#navigation a:hover, .topmenu.on a, .topmenu:hover a {
background-color:#FFA500;
}
.topmenu:hover ul {
display:block;
z-index:500;
}
#logo a:hover {
opacity:0.8;
}
/*content in basicTemplate.xhtml; author: Mica */
#content {
float:left;
min-height:200px;
margin:0 7px;
}
HAHAAA found it!
z-index only works when a position is declared first: so I need to set in this block a position:
.topmenu:hover ul {
display:block;
z-index:500;
}
Like here:
.topmenu:hover ul {
display:block;
position:relative;
z-index:500;
}
Here is the page I am working on: http://www.sackling.com/new_arrivals.php
It seems to look good in all browsers except ie7.
I can't seem to figure out a way to make it work properly in all browsers it must be something with the way I am trying to stack my divs..
This is the important css:
#menuwrap {
width:940px;
height:84px;
position:relative;
z-index:99999;
}
.top_menu_container {height:60px;}
.menu_holder {width:980px; z-index:9999;}
.menu_right_bottom {width:220px; }
/*Menu Start */
.navtest{list-style:none;}
.navtest ul li {
display: block;
position: relative;
float: left;
cursor:pointer;
z-index:9999;
position:static;
}
.navtest ul li a {
text-transform:uppercase;
font-size: 11px;
display: block;
text-decoration: none;
color: #3F3F41;
padding: 5px 21px 5px 20px;
margin-left: 1px;
white-space: nowrap;
z-index:9999;
font-weight:normal;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.navtest ul li ul { opacity:0.80; width:141px; display:none; }
.navtest ul li:hover ul{ display: block; position: absolute; z-index:9999; }
.navtest ul li:hover li { float: none; z-index:9999;}
.navtest ul li:hover a { background: #fff; z-index:9999; color: #999; } /* main menu rollover color change */
.navtest ul li a:active {text-shadow: 0px 0px 0px rgba(0,0,0,0);} /*main menu click */
.navtest ul li:hover li a:hover { background: #c0c1c0; z-index:9999;} /*hover over background of dropdown */
.navtest ul li:hover ul li a {color:#000;} /* color of drop down on main rollover */
.top_buttons .navtest ul li a { font-size: 10px; } /* top menu row font */
*{margin:0; padding:0;}
body { margin: 0 auto; font-size: 13px; color: #333333; }
html, body { color: #000000; margin:0; padding:0; height:100%; font-family:"Lucida Grande","Lucida Sans Unicode","Lucida Sans","DejaVu Sans","Bitstream Vera Sans","Liberation Sans",Verdana,"Verdana Ref",sans-serif; }
.header_space { height: 15px;; clear: both; width:940px; margin:0 auto;}
.wrapper {width:940px; margin-left:20px; margin-right:20px; background:#fff; overflow:hidden; margin:0 auto; }
.container {min-height:100%; height: auto !important; height:100%; margin: 0 auto -25px; width:980px; background:URL(images/bg_sides.jpg) repeat-y #f4f4f4; }
.contentContainer {width:980px;}
.banner_listings {margin:0; padding:0; height:293px; width:940px;}
.category_product_style {padding:10px 0px 0px 13px;}
#account_content {background: url(/images/account_nav_bg.png) repeat-x left top; margin-top:35px;}
/* =Account nav */
#account_nav {margin-bottom:55px; margin-top:35px; background: url(/images/account_nav_bg.png) repeat-x left top; float: left; width: 180px;}
#account_nav h2, .table_legend h2, #account_credits h2 { font-size:125%;}
/***********header stuff ************************/
.styled-select {padding-top:6px;}
#searchwrapper {
width:246px; /*follow your image's size*/
height:26px;/*follow your image's size*/
background:#ccc;
background-repeat:no-repeat; /*important*/
padding:0px;
margin:0px;
position:relative; /*important*/
}
#searchwrapper form { display:inline ; }
.searchbox {
border:none; /*important*/
background-color:transparent; /*important*/
background-image:url(images/blank_search.gif);
position:absolute; /*important*/
top:7px;
left:9px;
width:225px;
height:14px;
color:#fff;
font-size:14px;
margin:0px;
}
.searchbox_submit {
border:none; /*important*/ /*important*/
background: url(images/searcharrow.jpg) no-repeat;
position:absolute; /*important*/
top:3px;
left:225px;
width:15px;
height:20px;
margin:0px;
}
Try removing all whitespaces within the ul's in the menu - IE7 renders 2 spaces just above the first menu.
EDIT: i think it's the redundant ul/li - try changing ul class"navtest" to div class="navtest", and remove the li in the left & right menu...
I believe your issue is with the ul#nav-test element. For some reason you have a ul nested within an li within a ul. Was this a mistake or have you done this for a reason?
See line 92 :
<ul class="navtest" >
<li>
<ul>
<li>Fall Catalog</li>
<li>Contact us</li>
</ul>
</li>
</ul>
Remove the additional ul and this will probably resolve your issue as IE7 is assigning a 16px offset from the top of the second ul.
So your HTML becomes:
<ul class="navtest" >
<li>Fall Catalog</li>
<li>Contact us</li>
</ul>