I currently have this on a webpage I'm making:
HTML
<div id="pageHeader">
<nav id="siteNav">
<ul>
<li id="currentNavTab"><span>Home</span></li>
<li><span>Services</span></li>
<li><span>Gallery</span></li>
<li class="LastNavTab"><span>Contact</span></li>
</ul>
</nav>
</div>
CSS
nav#siteNav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
nav#siteNav ul {
padding: 0;
background-image: url('NavTabsBG.jpg');
box-shadow: inset 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
border-radius: 8px;
}
nav#siteNav li {
display: inline;
width: 240px;
padding-left: 50px;
padding-right: 50px;
}
nav#siteNav a {
display: inline-block;
padding: 10px;
color: rgb(255, 235, 200);
font-size: 36px;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.6);
}
The code results in something like this:
I would like to have it so that the currently selected tab takes on a highlight, which can either be a bitmap or generated with background-gradient; something like this mockup:
I'm having issues with the layout. I tried to put the background behind the li's, but that didn't display correctly:
Being a relative amateur at web development I don't know how to fix this and get the result I want. An additional issue is that I would like the highlight to be masked within the rounded border. Any help would be appreciated!
Here's a fiddle. http://jsfiddle.net/57VC8/1/
What i did:
Set display inline-block on the li's. Why? Putting inline-blocks or block (that's elements with one of those displays) inside inline elements just might give you some hard to understand problems.
Set all the width's and paddings on the a element and not on the li.
Added a class "current" to the currently selected link, through which you'd apply whichever styles you want.
Related
Something is happening with the search button on my site. I have one in the top header and one in the bottom footer. The one at the bottom works fine. But the one in the header, when the button is clicked, it moves down and then you have to click it again to initiate the search.
Both are inside widgets (I'm using Wordpress with the Brunch Pro theme). I have no idea what I could have done to cause this. All I've done is change the color of the button in the customizer. What could cause the button to move like that?
The button has additional styles that apply to it on the :focus pseudo-class:
.widget_search input[type="submit"]:focus
It looks like there's a bunch of competing/unnecessary styles that are being overwritten/added when it's focused. Resetting them all would fix it:
.widget_search input[type="submit"]:focus {
width: 38.2%;
padding: 14px 20px;
box-shadow: none;
font-weight: 400;
font-size: 11px;
}
Or just remove the widget_search input[type="submit"]:focus selector from your style.css file (on line 1074):
Your problem in style.css file it moves down because it go larger than div width
.widget_search input[type="submit"]:focus {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
display: block;
font-size: 1em;
font-weight: bold;
height: auto;
padding: 15px 20px 14px;
text-decoration: none;
width: auto;
z-index: 100000;
}
I am using bootstrap framework for a project and having a tiny problem with dropdown menu. Here is the link;
http://erkano.com/neu
You will see when you hover over "YÖNETİM" button that the dropdown appears. I, however, want this dropdown has the same width value, that is col-md-5, with the whole menu bar. The reason I could not deal with it is that the dropdown should stay in the first button, that is col-md-2 in the col-md-5.
Do you have any idea?
Thanks in advance
Okay now that I understand the question.
You can make the dropdown menu full width by... give that drop down menu the class container.
<ul class="dropdown-menu main-menu-dropdown container" id="menu1">
I quickly did this from inspecting and it made it almost full width.. this in practice kinda of works. You get the idea of making the drop down a set width and using javascript to make it responsive...
But I also did this and it kinda of work as well. Your layout is weird and breaks responsively anyways but here I changed the class:
.dropdown:hover .dropdown-menu {
display: block;
width: 95%; <-- I added this
}
and
dropdown-menu {
position: fixed; <-- changed to fixed instead of absolute
top: 13%; <-- changed to 13% instead of 100%
left: 0px;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0px;
margin: 2px 0px 0px;
list-style: outside none none;
font-size: 14px;
background-color: #FFF;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
background-clip: padding-box;
}
you can fiddle with the css to get the exact size you want but that in a nutshell will work.
<div class="dropdown main-menu-dropdown-container">
<li class="col-md-2">
YÖNETİM
</li>
<ul class="dropdown-menu main-menu-dropdown col-md-12" aria-labelledby="main-menu-dropdown-1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
I have edited the html part like this and the css part like this;
.main-menu-dropdown-container:hover .dropdown-menu {
display: block;
}
.main-menu-dropdown {
height: 260px;
border-radius: 0 !important;
margin-top: 0px !important;
top: 60px !important;
border:0 !important;
border-top:1px solid #F3F3F3 !important;
-webkit-box-shadow: 5px 5px 14px -9px rgba(0,0,0,0.59) !important;
-moz-box-shadow: 5px 5px 14px -9px rgba(0,0,0,0.59) !important;
box-shadow: 5px 5px 14px -9px rgba(0,0,0,0.59) !important;
}
This works perfectly for me. I did not even change anything on the original grid system and the dropdown system on bootstrap.
I am simply trying to achieve the same effect as in the image below*. I want the Header to have two borders, one is lighter than the other to give it an embossed feel.
Before I asked this question on here, I have already done some research and tried ideas inspired from websites like: CSS-Tricks, Daverupert ect... But they are adding Outlines - and after trying that it didn't really work on modern browsers so how about the old ones!
*Since I am now allowed to post an image at this time, please refer to this link for an image: http://postimg.org/image/4b6ne0qod/
Please take a look at my website here: leo.meeped.co.uk Look at the header - you will also notice that it has a shadow after the think border that makes it look like it's edge has been folded.
Update: I very like this folding effect, however it makes the header fade out a bit / not stand-out when you scroll down to a white or gray page - as it seem like the shadow blend with the page since they are a very relative colours. So the idea was to add anther border just under the current border to make to emphasise it's edge.
Hope my question is clear, I am looking for your opinions and help.
In case you want the HTML and CSS of my site then here it is:
<!--Header--><header>
<div id="headerWrapper">
<div id="headerContent">
<div id="headerLogo">
<img alt="loai design studio logo" src="assets/elements/logo.png"/>
</div>
<nav><ul id="mainMenu" class="snapjs-expand-left">
<li>Home</li>
<li>Portfolio
<li>About Me</li>
<li><a class="active" href="contact.html">Contact Me</a></li>
<li>Blog</li>
</ul></nav>
</div>
</div>
</header>
/*HEADER////////////////////////////////////////////*/
/*Header Wrapper*/#headerWrapper {
background-color: #FFFFFF;
border-bottom: 5px solid #E8E8E8;
width: 100%;
position: fixed;
top: 0; left: 0;
z-index: 1000;
-webkit-box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.20);
-moz-box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.20);
box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.20);
}
/*Header Content Container*/#headerContent {
padding: 0 20px;
}
/*Header Logo*/
#headerLogo {
width: 130px;
margin: 19px 0;
float: left;
}
/*Main Menu*/
#mainMenu {
float: right;
margin: 17px 0;
}
#mainMenu li {
float: left;
}
#mainMenu a {
padding: 10px 15px;
margin-left: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#mainMenu a:hover {
color: #FFFFFF;
background-color: #4E6C98;
}
#mainMenu a.active {
color: #4E6C98;
cursor: default;
}
#mainMenu a.active:hover {
background-color: rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0);
background: transparent;
}
If you simply want two borders without using CSS's outline property, why don't you simply create a border bottom for div#headerWrapper and one for div#headerContent making that of headerWrapper darker:
div#headerWrapper
{
border-bottom: solid 1px #3D9ED5;
}
div#headerContent
{
border-bottom: solid 1px #81CEFA;
background-color: #54BEFB;
}
If you want the exact appearance of your picture, you can do so by adding the following code (assuming that the part below the border should be empty):
header
{
height: 50px;
background-color: #FBFBFB;
}
If text should be inserted into the lower half of the picture, add it after the outer div (in header) and remove the height from the CSS.
Try using CSS box shadows to create "shadows". For example:
#headerWrapper {
box-shadow: 0 1px 0 rgba(255,0,0,0.8), 0 2px 0 rgba(0,255,0,0.8);
}
Each new shadow should be separated by a comma.
Does this do what you were wanting?
The browser support is pretty good for box shadows now but you might want to keep it in mind. Pretty much everything except IE8 supports it if you use all the vendor prefixes, for more info see: http://caniuse.com/css-boxshadow
I have these drop down menus HERE created using CSS on the Products, Support and Community nav links. The drop down menus have rounded corners on the bottom. The hover effect on the last link overrides the rounded corner and squares it off which I do not want. I would like the rounded corners to remain even on the hover on the last bottom link of the drop down. I think I need a property of overflow:hidden (?) on one of the styles but I've tried everything and I can't get it to work properly. What am I missing?
The CSS is HERE.
Thanks!
The issue is that the border-radius property doesn't change the boundaries of the <ul> element, rendering overflow: hidden; useless when the <li> elements get a background color.
My solution would be to apply border-radius: 0px 0px 8px 8px; to each of the bottom <li> elements in your drop-down menus.
Try setting overflow: hidden; on .menu ul
CSS Border Radius is not inherited from its parent as you can see in this fiddle:
http://jsfiddle.net/sZtHk/
HTML
<div class="outer">
<div class="inner"></div>
</div>
CSS
.outer {
background: #ff0000;
width: 100px;
height: 100px;
border-radius: 24px;
}
.inner {
background: rgba(0, 0, 0, .25);
width: 100px;
height: 100px;
}
You need to apply the borderadius that you have on your <ul> to the last link item. If your hover state is controled by the <a> tag then you need to apply it there also.
.menu ul li:last-child { border-radius: 0px 0px 8px 8px; }
You may also, or alternatively need this:
.menu ul li:last-child a { border-radius: 0px 0px 8px 8px; }
I'm trying to create a bordered, folder-styled div in css but cannot seem to get rid of the border which separates the two parts.
Here's how far I've got so far: http://jsfiddle.net/Argoron/GUtDy/12/
I'm at a loss as to how to avoid the border that separates the header div from the content div.
Thanks in advance for your help !
The correct approach would be to place one 1px (or npx, where n is the border width) over the other, then place the tab over the tabbed area with z-index.
Code
I didn't use your code, but instead constructed from mine.
HTML
<div id="wrapper">
<h1>HEADER</h1>
<div id="content-container">
Content
</div>
</div>
CSS
/* Tabbed view without separation border */
* {
padding: 0;
margin: 0;
}
#wrapper {
width: 600px;
padding: 10px;
margin: 10px;
}
body {
font-family: arial, serif;
}
h1, #content-container {
border: 1px solid rgb(0, 0, 0);
}
h1 {
/* This is the important part! */
border-radius: 6px 6px 0 0;
display: inline-block;
position: relative;
top: 1px; /* Offset one pixel to the bottom */
border-bottom-color: white; /* white border overrides black. white should be the same as the background color */
}
#content-container {
border-radius: 0 6px 6px 6px;
}