I'm trying to get my jQuery tabs to go all the way across the top and line up on the left and right side with the edges, I tried doing fixed widths but it doesn't seem to want to cooperate that way. Does anyone know how to do this? Also it keeps jumping around when you click on a tab, I saw it's because they are hiding the border of the content by moving the tab down over the border... is there anyway to connect the tabs to the content without moving the tab itself and creating that jumping?
http://jsfiddle.net/fun6faos/2/
<style>
.tabs-all {
width: 830px;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.etabs {
margin: 0;
padding: 0;
width: 100%;
}
.tab-container .panel-container {
background: #fff;
border: solid #c2c2c2 1px;
padding: 10px;
}
.panel-container {
margin-bottom: 10px;
}
.tab1 {
width: 209px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
}
.tab2 {
width: 233px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
}
.tab3 {
width: 124px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
}
.tab4 {
width: 207px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.tab1.active, .tab2.active, .tab3.active, .tab4.active {
background: #fff;
padding-top: 6px;
position: relative;
top: 1px;
border-color: #c2c2c2;
border-top: 5px solid #70bf47;
border-right: solid 1px #c2c2c2;
border-left: solid 1px #c2c2c2;
}
.tab1 a, .tab2 a, .tab3 a, .tab4 a {
font-size: 15px;
line-height: 2em;
display: block;
padding: 0 10px;
outline: none;
text-decoration: none;
color: #464646;
font-weight: 600;
}
.tab1 a:hover, .tab2 a:hover, .tab3 a:hover, .tab4 a:hover {
text-decoration: none;
}
.tab1 a.active, .tab2 a.active, .tab3 a.active, .tab4 a.active {
text-decoration: none;
color: #464646;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs();
});
</script>
</head>
<body>
<div class="tabs-all">
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab1'>What is Community Solar?</li>
<li class='tab2'>Why Clean Energy Collective?</li>
<li class='tab3'>How it Works?</li>
<li class='tab4'>Community Solar Benefits</li>
</ul>
<div class='panel-container'>
<div id="tabs1">
<h2>TITLE</h2>
<p>Information</p>
</div>
<div id="tabs2">
<h2>TITLE</h2>
<p>Information</p>
</div>
<div id="tabs3">
<h2>TITLE</h2>
<p>Information</p>
</div>
<div id="tabs4">
<h2>TITLE</h2>
<p>Information</p>
</div>
</div>
</div>
</div>
You need to zero out the margins. Add this to your CSS:
body {
margin:0px;
}
Taking a cue from Bootstrap's tabs, we can apply table layout properties with CSS:
li.tab {display: table-cell; width: 1%;}
http://jsfiddle.net/isherwood/fun6faos/15
This example results in uniform tab widths. To have tabs sized somewhat proportionately to their text labels, remove the width property:
http://jsfiddle.net/isherwood/fun6faos/17
A note on your use of classes... A class, by definition, is a set of properties applied to multiple elements. When you're incrementing classes, you're using them wrongly. You should never have a list of elements in your CSS that have indexed numbers. I've stripped all such craziness out of your code.
Related
I am attempting to add a delay to this Jquery dropdown. I have tried to use the setTimeout function but this doesn't appear to be working.
I don't know why this isn't working as the delay doesn't happen when I hover over the menu and the submenu drops down immediately. How can I get this to work?
Edit: I'll have to clarify specifically what i want to do. I have a Menu with some submenus. When I hover over the Menu Item, for example 'About', I want a brief delay of 3 seconds before the submenu slides out. Currently, It slides out immediately and this creates an unwanted effect when I quickly move from one Menu item to another. For example, if I move from About to Fees, it shows both submenus at the same time. Basically this is what is happening when I scroll over the menu Items very quickly
https://i.imgur.com/Nv554m9.png
I'm new to Jquery and Javascript and web programming in general, so although I've gone through several similar questions on StackOverFlow, they don't seem to solve my problem. Any assistance will be appreciated.
<script type="text/javascript">
$(document).ready(setTimeout(function() {
$( '.dropdown' ).hover(
function(){
$(this).children('.dropdown-content').slideDown(200);
},
function(){
$(this).children('.dropdown-content').slideUp(0);
}
);
}), 3000);
</script>
EDIT:
This is the HTML of the Menu
<ul id="menu">
<li> Home </li>
<li class="dropdown" >
About
<div class = "dropdown-content">
Background And History
Vision And Mission
Message From the Principal
Message from the Director
Governance
</div>
</li>
<li class="dropdown">
Fees
<div class="dropdown-content">
Primary Fees
Secondary Fees
Admission forms
Fee Policy
</div>
</li>
<li class="dropdown">
Academics
<div class="dropdown-content">
Primary Curriculum
Lower Secondary Curriculum
Upper Secondary Curriculum
Library and ICT Labs
Staff
</div>
</li>
<li class="dropdown">
School Life
<div class="dropdown-content">
Boarding School
<div class="subdropdown">
Extra Curricular Activities
<div class="subsubmenu">
Sports
Clubs
Entertainment
</div>
</div>
<div class="subdropdown">
Students
<div class="subsubmenu">
Governance
Code of Conduct
Alumni
</div>
</div>
Field Trips
</div>
</li>
<li>
Events
</li>
<li class="dropdown">
News
<div class="dropdown-content">
Notices for Parents
Jobs
</div>
</li>
<li class="dropdown">
Gallery
<div class="dropdown-content">
Sports
Entertainment
Facilities
</div>
</li>
<li class="dropdown">
Contact
<div class="dropdown-content">
FAQ
</div>
</li>
<!--<li>☰</li> -->
</ul>
And the CSS
/*NAVIGATION SECTION*/
nav {
margin: 0px;
}
/*Sets the nav bar in a horizontal manner. Hides the pointers for the list and ensures there's no scroll bar*/
nav ul {
display: flex;
flex-direction:row;
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
border-top: 1px solid #670000;
}
/*Styles each of the individual items in the nav bar list. Adds color and changes their font. Adds a border at the end*/
nav ul li {
flex-grow: 1;
font-family: Constantia,"Lucida Bright",Lucidabright,"Lucida Serif",Lucida,"DejaVu Serif","Bitstream Vera Serif","Liberation Serif",Georgia,serif;
font-size: 15px;
font-weight: bolder;
padding: 0;
}
/*Determines how the links inside the navbar will be displayed.Gives them a background color*/
nav ul li a {
display: block;
background: #800000;
height: 40px;
text-align:center;
padding: 7px 10px;
text-transform: uppercase;
-webkit-transition: 0.45s;
transition: 0.45s;
}
/*Shows how unvisited links will look*/
nav ul li a:link{
text-decoration: none;
color: whitesmoke;
}
/*Changes the color inside visited links*/
nav ul li a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
/*Determines what happens when you hover a link*/
nav ul li a:hover{
color: black;
background-color: white;
}
/*Shows what happens a link is active (page you are currently on)*/
nav ul li a.active {
background-color: indianred;
color: white;
}
/*Styles what happens when you hover an active link on an active page*/
nav ul li a.active:hover {
background-color: #990000;
color: white;
}
/*Dropdown stuff*/
.dropdown-content {
display: none;
position: absolute;
color: black;
min-width: 160px;
border-bottom: 0.5px solid deepskyblue;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.subsubmenu {
display: none;
position: absolute;
left: 223px;
top: 25%;
color:black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
ul li .dropdown-content a:link{
text-decoration: none;
color: whitesmoke;
}
ul li .subsubmenu a:link{
text-decoration: none;
color: black;
}
/*Changes the color inside visited links*/
ul li .dropdown-content a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
ul li .subsubmenu a:visited {
color: black;
margin-left: 60px;
height: 40px;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: black;
}
.subsubmenu a{
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: #f9f9f9;
}
.dropdown-content a:hover {
background-color: #990000;
}
.subsubmenu a:hover {
background-color: #990000;
}
/*
.dropdown:hover .dropdown-content {
display: block;
color: whitesmoke;
} */
.subdropdown:hover .subsubmenu {
display: block;
color: whitesmoke;
}
$(document).ready(setTimeout(function(){}, 3000)) does not delay .slideDown() call at each event dispatched by .hover(); rather, delays call of function passed to setTimeout() at .ready() call for 3000.
You can use .delay(). Also call .clearQueue() chained to $(this).children('.dropdown-content') at function passed to second parameter of .hover() to clear the element queue of .slideDown() call at first parameter.
$(document).ready(function() {
$('.dropdown').hover(
function() {
$(this).children('.dropdown-content')
.delay(1000) // set duration of delay in milliseconds here
.slideDown(200);
},
function() {
$(this).children('.dropdown-content')
.clearQueue()
.slideUp(0);
})
});
/*NAVIGATION SECTION*/
nav {
margin: 0px;
}
/*Sets the nav bar in a horizontal manner. Hides the pointers for the list and ensures there's no scroll bar*/
nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
border-top: 1px solid #670000;
}
/*Styles each of the individual items in the nav bar list. Adds color and changes their font. Adds a border at the end*/
nav ul li {
flex-grow: 1;
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
font-size: 15px;
font-weight: bolder;
padding: 0;
}
/*Determines how the links inside the navbar will be displayed.Gives them a background color*/
nav ul li a {
display: block;
background: #800000;
height: 40px;
text-align: center;
padding: 7px 10px;
text-transform: uppercase;
-webkit-transition: 0.45s;
transition: 0.45s;
}
/*Shows how unvisited links will look*/
nav ul li a:link {
text-decoration: none;
color: whitesmoke;
}
/*Changes the color inside visited links*/
nav ul li a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
/*Determines what happens when you hover a link*/
nav ul li a:hover {
color: black;
background-color: white;
}
/*Shows what happens a link is active (page you are currently on)*/
nav ul li a.active {
background-color: indianred;
color: white;
}
/*Styles what happens when you hover an active link on an active page*/
nav ul li a.active:hover {
background-color: #990000;
color: white;
}
/*Dropdown stuff*/
.dropdown-content {
display: none;
position: absolute;
color: black;
min-width: 160px;
border-bottom: 0.5px solid deepskyblue;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.subsubmenu {
display: none;
position: absolute;
left: 223px;
top: 25%;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
ul li .dropdown-content a:link {
text-decoration: none;
color: whitesmoke;
}
ul li .subsubmenu a:link {
text-decoration: none;
color: black;
}
/*Changes the color inside visited links*/
ul li .dropdown-content a:visited {
color: whitesmoke;
margin-left: 60px;
height: 40px;
}
ul li .subsubmenu a:visited {
color: black;
margin-left: 60px;
height: 40px;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: black;
}
.subsubmenu a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 12px;
background-color: #f9f9f9;
}
.dropdown-content a:hover {
background-color: #990000;
}
.subsubmenu a:hover {
background-color: #990000;
}
/*
.dropdown:hover .dropdown-content {
display: block;
color: whitesmoke;
} */
.subdropdown:hover .subsubmenu {
display: block;
color: whitesmoke;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li> Home </li>
<li class="dropdown">
About
<div class="dropdown-content">
Background And History
Vision And Mission
Message From the Principal
Message from the Director
Governance
</div>
</li>
<li class="dropdown">
Fees
<div class="dropdown-content">
Primary Fees
Secondary Fees
Admission forms
Fee Policy
</div>
</li>
<li class="dropdown">
Academics
<div class="dropdown-content">
Primary Curriculum
Lower Secondary Curriculum
Upper Secondary Curriculum
Library and ICT Labs
Staff
</div>
</li>
<li class="dropdown">
School Life
<div class="dropdown-content">
Boarding School
<div class="subdropdown">
Extra Curricular Activities
<div class="subsubmenu">
Sports
Clubs
Entertainment
</div>
</div>
<div class="subdropdown">
Students
<div class="subsubmenu">
Governance
Code of Conduct
Alumni
</div>
</div>
Field Trips
</div>
</li>
<li>
Events
</li>
<li class="dropdown">
News
<div class="dropdown-content">
Notices for Parents
Jobs
</div>
</li>
<li class="dropdown">
Gallery
<div class="dropdown-content">
Sports
Entertainment
Facilities
</div>
</li>
<li class="dropdown">
Contact
<div class="dropdown-content">
FAQ
</div>
</li>
<!--<li>☰</li> -->
</ul>
if you are trying delay after simple page load and without any other event call then pull out your slidedown statement from settimeout
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){
$('dropdown').children('.dropdown-content').slideDown(200);
}, 3000)
});
</script>
However if you want on hover then settimeout should be called on hover.
$(function(){
function hoverMe(){
$('dropdown').children('.dropdown-content').slideDown(200);
}
$(".dropdown").on('hover', function(){
setTimeout(hoverMe, 100);
})
})
Also jquery.ready function takes a function definition but you are calling setimeout there instead you should wrap your setimeout in a anonymous function
A few hours back I asked a question on how my background disappeared when i added a collapsible list. The solution they gave me was:
body.ui-overlay-a {
background-color: #dc143c;
}
div.ui-page-theme-a {
background-color: transparent;
}
I asked the same person about the blue box and he gave me this:
div.ui-page-theme-a {
background-color: transparent;
}
But this didn't work does anyone have any answers?
Navigation bar code (CSS):
/* Navigation bar */
.nav {
font-family: 'Roboto', sans-serif;
margin-top: 20px;
height: 40px;
background: #000000;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav ul li {
list-style: none;
}
.nav ul li a {
text-decoration: none;
float: right;
display: block;
padding: 10px 50px;
color: white;
}
.nav ul li a:hover {
color: #D3D3D3;
}
.headerBreak {
width: 100%;
height: 0;
border-bottom: 2px solid #000000;
}
h4 {
font-family: 'Roboto', sans-serif;
font-size: 24px;
text-align: right;
text-decoration: none;
}
p {
font-family: 'Lato', sans-serif;
font-size: 30px;
}
And this is the content inside the navigation bar (inside )
<div class="nav">
<ul>
<li>Contacts</li>
<li>Map</li>
<li>Reservations</li>
<li>Online Order</li>
<li>Menu</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
<div class="headerBreak"></div>
Note that this does not only apply to the navigation bar but also applies to my and
Reference: http://i.imgur.com/acnJE5Y.png
Edit 1: I added this website to a free domain hoster, I have also added outline: none; to nav ul li a { but it still doesnt work when i open itbut when I duplicate the file and I open it the text does not have the blue outline, but in my original file it does
http://marcxu88.000webhostapp.com
If you could inspect the code and see if what is wrong it would be greatly appreciated.
Thanks in advance.
Try adding outline: none; to the selector .nav ul li a.
I'm trying to format an inline navigation, but the last link which has a class tied to a piece of javascript seems to be causing the entire link to become a block element rather than putting it inline with the rest of the links in the navigation.
I tried removing the class, changing the class to something else (not tied to any script) and it puts the link back in line, which is what leads me to believe it has something to do with the javascript it's tied to. I've also tried calling a.show in css to display it inline and inline-block to no avail. I feel like I'm missing a well know rule of thumb.
The <a href="#" class="show"> is on Line 20 and the <script> tag is on Line 25 of the HTML
CSS
#nameTag {
max-width: 800px;
min-width: 320px;
margin: 0 auto;
background-color: #FFFFFF;
-webkit-box-shadow: 2px 2px 2px 1px hsla(0,0%,0%,0.72);
box-shadow: 2px 2px 2px 1px hsla(0,0%,0%,0.72);
border-radius: 43px;
border: 2px solid #4B4949;
}
#tagTop{
width: 100%;
height: auto;
display:block;
color: #fff;
font-size:30px;
text-align: center;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom{
width: 100%;
height: 50px;
display: block;
color: #FFFFFF;
text-align: center;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom > a:link, a:visited{
color:#fff;
}
#container{
padding:20px
}
.miniNav{
text-align:center;
font-size:18px;
font-weight:600;
margin-bottom:10px;
}
.miniNav a:link,a:visited{
color:#0033AA;
text-decoration:none;
}
.miniNav a:hover,a:active{
color:#000;
}
HTML
<div id="nameTag">
<div id="tagTop">
<h3>HELLO</h3>
my name is
</div>
<div id="name">
<div class="show">
<img src="images/name.jpg" width="100%" alt="First slide image" class="center-block">
</div>
</div>
<div id="container">
<div class="miniNav">
Change Font
|
Download Graphic CV
|
Download Typed CV
|
<a class="show" href="#">Close CV</a>
</div>
</div>
<div id="tagBottom">
</div>
<script>
$("#container").hide();
$(".show").click(function() {
$("#container").slideToggle("slow");
});
</script>
</div>
UPDATE2
In order to prevent the jerking behavior when clicking the .hide and .show links, simply add event.preventDefault() to your jQuery function.
<script>
$("#container").hide();
$(".show, .hide").click(function(event) { // Pass the event object here
event.preventDefault(); // Then use the preventDefault() property
$("#container").slideToggle("slow");
});
</script>
UPDATE
I misunderstood what the question was, I believe that you wanted the toggle image inline with the other anchors. That would be more trouble than what it's worth. .show is in another div and nested. So just add an identical img inside .miniNav and make sure the other image disappears. Also, I used a background-image for the one inside .miniNav because it's easier to handle as a link. It's better if you look at the jQuery than for me to explain it. I also changed the "Close CV" link's class to .hide so it doesn't share styles and then added .hide to the jQuery in order to keep functionality.
The last link "Close CV" is ok as long as your #nameTag is # 550px wide, else the link will naturally wrap to the next line if less than 550px. If you make .miniNav and the anchors behave like table components, there will be no wrapping to the next line. Add display:table-row to .miniNav and display:table-cell to each anchor.
Changed padding so that links conform when #nameTag is compact. Removed | and added border-right: 1px solid blue;. To center the links, margin: 0 auto; display: table; was added to #container.
You could use percentages or ems instead of px for margins and padding so that your text will stay on one line consistently. That takes some experimenting so I'll leave you that to decide.
BTW, when designating selectors in CSS, if you have multiple selectors that apply to a ruleset, you need to be specific on each one.
Example
.miniNav a:hover,
a:active {
color: #000;
}
Anchors that are descendants of .mini-nav are black when hovered over / Any anchor that is active is black.
.miniNav a:hover,
.miniNav a:active {
color: #000;
}
Anchors that are descendants of .mini-nav are black when hovered over or is active.
Changes
#container {
padding: 10px 0px 15px 7px;
margin: 0 auto;
display: table;
}
.miniNav {
text-align: center;
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
display: table-row;
}
.miniNav a,
.miniNav a:link,
.miniNav a:visited {
color: #0033AA;
text-decoration: none;
display: table-cell;
border-right: 1px solid blue;
padding: 0 7px;
}
...
.miniNav a:last-of-type {
border-right: 0px none transparent;
}
SNIPPET
$("#container").hide();
$(".show, .hide").click(function() {
$('.show').toggle();
$("#container").slideToggle("slow");
});
#nameTag {
max-width: 800px;
min-width: 550px;
margin: 0 auto;
background-color: #FFFFFF;
-webkit-box-shadow: 2px 2px 2px 1px hsla(0, 0%, 0%, 0.72);
box-shadow: 2px 2px 2px 1px hsla(0, 0%, 0%, 0.72);
border-radius: 43px;
border: 2px solid #4B4949;
}
#tagTop {
width: 100%;
height: auto;
display: block;
color: #fff;
font-size: 30px;
text-align: center;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom {
width: 100%;
height: 50px;
display: block;
color: #FFFFFF;
text-align: center;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom > a:link,
a:visited {
color: #fff;
}
#container {
padding: 10px 0px 15px 7px;
margin: 0 auto;
display: table;
}
.miniNav {
text-align: center;
font-size: 18px;
font-weight: 600;
margin: 0px auto 10px;
display: table-row;
}
.miniNav a,
.miniNav a:link,
.miniNav a:visited {
color: #0033AA;
text-decoration: none;
display: table-cell;
border-right: 1px solid blue;
padding: 0 7px;
}
.miniNav a:hover,
.miniNav a:active {
color: #000;
}
.miniNav a:last-of-type {
border-right: 0px none transparent;
}
a.img {
background: url(http://placehold.it/80x50/eea/e00?text=First=slide+image)no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nameTag">
<div id="tagTop">
<h3>HELLO</h3>
my name is
</div>
<div id="name">
<div class="show">
<a href="#">
<img src="images/name.jpg" width="100%" alt="First slide image" class="center-block">
</a>
</div>
</div>
<div id="container">
<div class="miniNav">
<a href="#" class='img'>First slide image</a>
Change Font
Download Graphic CV
Download Typed CV
<a class="hide" href="#">Close CV</a>
</div>
</div>
<div id="tagBottom">
</div>
</div>
It appears jQuery's slideToggle() function defaults to display:block, so you can use a callback to set it to display: inline-block manually, as explained in this answer from user black.
Your code would then be:
$("#container").hide();
$(".show").click(function() {
$("#container").slideToggle("slow", function() {
if ($("#container").is(':visible'))
$("#container").css('display','inline-block');
});
});
You'll also need to style your container as display: inline-block, unless I'm misunderstanding your question.
I realize that this may not be possible, so I am also open to modifying the code for the sake of functionality.
Here is my css and html:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Raleway Webfont';
}
body {
margin: 0;
padding: 0;
height: 4000px;
font-size: 16px;
line-height: 1.5;
}
ul, li, h1, h2, p, a, .logo {
font-family: 'Raleway Webfont';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: black;
font-weight: 200;
margin: 0;
padding: 0;
}
header {
position: fixed;
width: 100%;
padding-top: 0px;
background: #e5e5e5;
transition:.25s;
z-index: 100;
border-bottom-style: solid;
border-width: 1px;
box-shadow: 0 0 15px 0 rgba(0,0,0,0.9);
}
.inner {
width: 800px;
position: relative;
margin: 0 auto;
}
nav {
overflow: hidden;
}
nav ul {
float: right;
}
nav li {
display: inline;
float: left;
list-style: none;
}
nav a {
display: inline-block;
color: #fff;
text-decoration: none;
padding: 25px 15px;
transition:.25s;
}
nav a:hover {
margin: -8px 0 0 0;
}
nav ul li:first-child a {
background:#b7b7b7 !important;
}
nav ul li:nth-child(2) a {
background:#a0a0a0 !important;
}
nav ul li:nth-child(3) a {
background:#898989 !important;
}
nav ul li:nth-child(4) a {
background:#727272 !important;
}
nav ul li:nth-child(5) a {
background:#5b5b5b !important;
}
nav ul li:first-child:hover header {
background: #b7b7b7;
}
nav ul li:nth-child(2):hover header {
background: #a0a0a0;
}
nav ul li:nth-child(3):hover header {
background: #898989;
}
nav ul li:nth-child(4):hover header {
background: #727272;
}
nav ul li:nth-child(5):hover header {
background: #5b5b5b;
}
.logo {
float: left;
color: #000;
font-size: 30px;
font-weight: 300;
text-decoration: none;
line-height: 70px;
}
section .inner {
padding-top: 125px;
}
p {
padding-top: 25px;
font-weight: 400;
}
h1 {
text-align: center;
}
<header>
<div class="inner">
<div>
<a class="logo" href="Home.html">W </a>
</div>
<nav role='navigation'>
<ul>
<li>ME</li>
<li>CV</li>
<li>RD</li>
<li>AV</li>
<li>RR</li>
</ul>
</nav>
</div>
</header>
<section>
<div class="inner">
<h1>about me</h1>
<p><span> A work in progress.</span>
</p>
</div>
</section>
I truly thought that I could get away with selecting a parent element by utilizing the :hover selector, but, obviously I was mistaken. I have already visited "Is there a CSS parent selector?", as well as most of the other queries referencing this issue. My specific need, however, still confuses me.
Essentially, is it possible to manipulate the background: of <header> utilizing the in-place -child arrangement, the :hover selector (what I want stylistically), and some method to extend that selector back up to the <header>? The :has() method seems to be a likely candidate, but I cannot figure out how to implement it here for the life of me. If any structure can/must be altered while maintaining the aesthetic, then I am certainly open to implementing it as well. Thank you in advance!
I don't know of a way using pure CSS, however if you want to change the <header> background based on which link in your navigation is hovered, you can use this in jQuery (be sure to run at load, or place at the end of your body just before </body>):
$('[role=navigation] a').hover(function(){
$(this).closest('header').css('background-color', $(this).css('background-color'));
},function(){
$(this).closest('header').css('background-color', '#e5e5e5');
});
https://jsfiddle.net/5d1tvnwh/
My central block keeps on moving to the left when I resize the browser window
normal:
http://imgur.com/b2AVkUx
after resizing browser window:
http://imgur.com/mJq6AuO
so i managed to figure out how to keep the navi and footer relatively undisruptive during resizing, but I just can't seem to figure out how to deal with the body, help please?
HTML:
<html>
<head>
<title>Line After Line</title>
<link type = "text/css" rel = "stylesheet" href = "stylesheet.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id = "top">
<div id = "opening">
<a href = "index.html">
<h1 id = "logo"> Line After Line </h1>
</a>
</div>
<div id = "navi">
<ul>
<li> Read </li>
<li> Write</li>
<li> Review </li>
<li> Donate </li>
</ul>
</div>
</div>
<div id = "updates">
<h4>Updates</h4>
<ul>
<li> number one blah blah blah blah blah hahahahaahah </li>
</br>
<li>number two blah blah blah </li>
</ul>
</div>
<div id = "story">
<a href = "blockOne.html">
<div class = "storyblocks" id = "blockOne" >
<p> Hello I this is a test block </p>
</div>
</a>
<div class = "storyblocks" id = "blockTwo"></div>
<div class = "storyblocks" id = "blockThree"></div>
<div class = "storyblocks" id = "blockFour"></div>
<div class = "storyblocks" id = "blockFive"></div>
<div class = "storyblocks" id = "blockSix"></div>
</div>
<div id = "footer">
<ul>
<li> Home </li>
<li> A Message From Chung</li>
<li> Contributors </li>
<li> About </li>
<li> Contact </li>
</ul>
</div>
</body>
CSS:
*{
margin: 0px;
padding: 0px;
}
ul{
list-style-type: none;
}
body{
background-color: white;
}
body a {
text-decoration: none;
}
#top{
background-color: black; /*use to see div area*/
height:75px;
margin-bottom: 1.5%;
padding: 5px;
}
/*div surrounding the Logo */
#opening{
margin-left: 100px;
width: 300px;
}
#logo{
color: white;
font-family: verdana;
float:left;
margin-top: 15px;
}
#navi{
/*background-color: red;*/
width: 1100px;
left: 200px;
margin-top: 20px;
margin-right: 100px;
position: relative;
}
#navi ul li {
font-weight: bold;
color: white;
display: inline;
text-decoration: none;
font-family: Calibri;
font-size: 26px;
margin: 0px 60px 0px 60px;
}
#updates{
/*background-color: blue; /* use to see div area */
color: #6D8582 ;
font-family: verdana;
margin-left: 5%; /*100px*/
margin-bottom: 10px;
height: 600px;
width: 300px;
border-right: thick solid #6D8582;
float: left;
position: relative;
}
#updates h4 {
text-align: center;
padding: 10px;
}
#updates ul {
margin-left: 20px;
list-style-type: none;
}
#story , #mainStory{
/*border: thin solid black;*/
/*background-color: red;*/
float: right;
margin-left: 27%;
margin-bottom: 10px;
position: absolute;/* relative*/
width: 1145px;
height: 600px;
overflow: auto;
border-radius: 5px;
}
#mainStory {
background-color: #F7F9FA;
width: 1050px;
margin-right: 4.5%;
}
#mainStory p {
color: black;
font-family: Calibri;
font-size: 18px;
padding-left: 50px;
padding-right: 50px;
text-indent:50px;
}
#mainStory h2{
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.storyblocks{
color:black;
display:inline-block;
line-height: 50px;
margin: 5px;
width: 200px;
height: 200px;
border-radius: 5px;
text-align: center;
vertical-align: top;
opacity: 0.6;
}
#blockOne{
/*border: thick solid blue; /*delete later*/
background-color: #2A9BB5;
}
#blockTwo{
/*border: thick solid green; /*delete later*/
background-color: #17EB0C;
}
#blockThree{
/*border: thick solid yellow; /*delete later*/
background-color: #F0F035;
}
#blockFour{
/*border: thick solid red; /*delete later*/
background-color: #F02E4E;
}
#blockFive{
/*border: thick solid purple; /*delete later*/
background-color: #DA41E8;
}
#blockSix{
/*border: thick solid green; /*delete later*/
background-color: #FC62B2;
}
#footer {
background-color: black;
text-align:center;
position: absolute;
clear: left;
height:34px;
bottom: 0;
width:100%
}
#footer ul li {
color: white;
text-decoration: none;
display: inline;
font-family: Calibri;
font-size: 16px;
margin-left:50px;
margin-right:50px;
}
It is because you have a fixed width and float right. Your div with the boxes is trying to stay aligned with the right hand side of the browser window, and because you won't let it resize it moves over. Either make the width a percentage, or don't float right and have a margin left 300px
Actually you have a problem with responsive design. If you do not have any of items ( sidebar or content) fixed you can use precentage on both of them, like :
#nav {
width:27%;
display:inline-block;
vertical-align:top;
padding-right:1%;
margin-right:1%;
border-right:1px solid #ccc;
}
#content {
width:70%;
display:inline-block;
vertical-align:top;
}
If you have something fixed ( let say sidebar ) you have to use css media queries and create some "patterns" for certain intervals of resolution ( width ).
You have an example which uses precentage sizes of both sides : http://jsfiddle.net/7Qpw6/