While doing some work on my test website, I ran into a problem.
I've put in all of my code because I do not know where this problem is coming from. https://jsfiddle.net/gdz4k3wt/
As you can see from this jsfiddle, the top part of the text in the website cannot be selected, I do not know where this problem is coming from, so could someone explain the error?
HTML code:
.button {
text-decoration: none;
color: #ffffff;
background: rgba(143, 152, 191, 0.4);
color: #999;
line-height: 3em;
display: block;
float: left;
padding-left: 10px;
padding-right: 10px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
.button2 {
text-decoration: none;
color: #ffffff;
background: rgba(143, 152, 191, 0.4);
color: #999;
line-height: 3em;
display: block;
float: left;
padding-left: 10px;
padding-right: 10px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
.button3 {
text-decoration: none;
color: #ffffff;
background: rgba(143, 152, 191, 0.4);
color: #999;
line-height: 3em;
display: block;
float: left;
padding-left: 10px;
padding-right: 10px;
font-family: courier new;
-moz-transition: 1s linear;
-ms-transition: 1s linear;
-o-transition: 1s linear;
-webkit-transition: 1s linear;
transition: 1s linear;
}
.button:hover {
background: rgba(232, 107, 149, 0.4);
color: white;
}
.button2:hover {
background: rgba(232, 107, 149, 0.4);
color: white;
}
.button3:hover {
background: rgba(232, 107, 149, 0.4);
color: white;
}
.image {
width: 300px;
height: 200px;
}
.image:hover {
opacity: 0.9;
-moz-transition: 0.2s linear;
transition: 0.2s linear;
}
h1 {
text-align: justify;
}
.mainn {
width: 111em;
height: 25em;
}
p {
text-align: justify;
}
.menuu {
width: 100%;
background: rgba(143, 152, 191, 0.4);
height: 3em;
position: fixed;
}
body {
background-color: #333;
color: #999;
font: 12px/1.4em Arial, sans-serif;
}
#wrap {
margin: 10px auto;
background: rgba(143, 152, 191, 0.4);
padding: 10px;
width: 1000px;
}
<body background="pictures/spacexwall.jpg">
<div class="menuu">
<div class="mainn">
<a class="button" href="SpaceX.html"> Home </a>
<a class="button2" href="founder.html"> Founder </a>
<a class="button3" href="pictures.html"> Pictures </a>
</div>
</div>
<font face="helvetica">
<div> <br></div>
<div> <br></div>
<div> <br></div>
<div id="wrap">
<p> <h1> <div> SpaceX Falcon 9 </h1> </p>
<hr>
<p><div> Falcon 9 is a two-stage rocket designed and manufactured by SpaceX for the reliable and safe transport of satellites and the Dragon spacecraft into orbit. As the first rocket completely developed in the 21st century, Falcon 9 was designed from the ground up for maximum reliability. Falcon 9’s simple two-stage configuration minimizes the number of separation events -- and with nine first-stage engines, it can safely complete its mission even in the event of an engine shutdown.
Falcon 9 made history in 2012 when it delivered Dragon into the correct orbit for rendezvous with the International Space Station, making SpaceX the first commercial company ever to visit the station. Since then SpaceX has made a total of three flights to the space station, both delivering and returning cargo for NASA. Falcon 9, along with the Dragon spacecraft, was designed from the outset to deliver humans into space and under an agreement with NASA, SpaceX is actively working toward that goal.</div> </p>
<p> <h1> SpaceX Falcon Heavy </h1> </p>
<hr>
<p> When Falcon Heavy lifts off later this year, it will be the most powerful operational rocket in the world by a factor of two. With the ability to lift into orbit over 53 metric tons (117,000 lb)--a mass equivalent to a 737 jetliner loaded with passengers, crew, luggage and fuel--Falcon Heavy can lift more than twice the payload of the next closest operational vehicle, the Delta IV Heavy, at one-third the cost. Falcon Heavy draws upon the proven heritage and
reliability of Falcon 9. Its first stage is composed of three Falcon 9 nine-engine cores whose 27 Merlin engines together generate nearly 4 million pounds of thrust at liftoff, equal to approximately fifteen 747 aircraft operating simultaneously. Only the Saturn V moon rocket, last flown in 1973, delivered more payload to orbit. Falcon Heavy was designed from the outset to carry humans into space and restores the possibility of flying missions with crew to the Moon or Mars </p>
<p> <h1> SpaceX Dragon </h1> </p>
<hr>
<p> Dragon is a free-flying spacecraft designed to deliver both cargo and people to orbiting destinations. Dragon made history in 2012 when it became the first commercial spacecraft in history to deliver cargo to the International Space Station and safely return cargo to Earth, a feat previously achieved only by governments. It is the only spacecraft currently flying that is capable of returning significant amounts of cargo to Earth. Currently Dragon carries cargo to space, but it was designed from the beginning to carry humans. Under an agreement with NASA, SpaceX is now developing the refinements that will enable Dragon to fly crew. Dragon's first manned test flight is expected to take place in 2-3 years. </p>
</div>
<p> <h1> SpaceX Falcon 9 </h1> </p>
<hr>
<p><div> Falcon 9 is a two-stage rocket designed and manufactured by SpaceX for the reliable and safe transport of satellites and the Dragon spacecraft into orbit. As the first rocket completely developed in the 21st century, Falcon 9 was designed from the ground up for maximum reliability. Falcon 9’s simple two-stage configuration minimizes the number of separation events -- and with nine first-stage engines, it can safely complete its mission even in the event of an engine shutdown.
Falcon 9 made history in 2012 when it delivered Dragon into the correct orbit for rendezvous with the International Space Station, making SpaceX the first commercial company ever to visit the station. Since then SpaceX has made a total of three flights to the space station, both delivering and returning cargo for NASA. Falcon 9, along with the Dragon spacecraft, was designed from the outset to deliver humans into space and under an agreement with NASA, SpaceX is actively working toward that goal.</div> </p>
<p> <h1> SpaceX Falcon Heavy </h1> </p>
<hr>
<p> When Falcon Heavy lifts off later this year, it will be the most powerful operational rocket in the world by a factor of two. With the ability to lift into orbit over 53 metric tons (117,000 lb)--a mass equivalent to a 737 jetliner loaded with passengers, crew, luggage and fuel--Falcon Heavy can lift more than twice the payload of the next closest operational vehicle, the Delta IV Heavy, at one-third the cost. Falcon Heavy draws upon the proven heritage and
reliability of Falcon 9. Its first stage is composed of three Falcon 9 nine-engine cores whose 27 Merlin engines together generate nearly 4 million pounds of thrust at liftoff, equal to approximately fifteen 747 aircraft operating simultaneously. Only the Saturn V moon rocket, last flown in 1973, delivered more payload to orbit. Falcon Heavy was designed from the outset to carry humans into space and restores the possibility of flying missions with crew to the Moon or Mars </p>
<p> <h1> SpaceX Dragon </h1> </p>
<hr>
<p> Dragon is a free-flying spacecraft designed to deliver both cargo and people to orbiting destinations. Dragon made history in 2012 when it became the first commercial spacecraft in history to deliver cargo to the International Space Station and safely return cargo to Earth, a feat previously achieved only by governments. It is the only spacecraft currently flying that is capable of returning significant amounts of cargo to Earth. Currently Dragon carries cargo to space, but it was designed from the beginning to carry humans. Under an agreement with NASA, SpaceX is now developing the refinements that will enable Dragon to fly crew. Dragon's first manned test flight is expected to take place in 2-3 years. </p>
</div>
</font>
</body>
Your
<div class = 'mainn'>
element has too large of a height and is obscuring the top part of the text, thus blocking your selection.
.mainn {
height: 2em;
width: 111em;
}
will fix the problem.
Fixed jsfiddle here.
Related
I'm trying to achieve a fade on hover effect to the headings using CSS3 with no success. I'm not sure what I did wrong as I am pretty sure that I followed the W3 Schools tutorial.
Could you help me with fixing the code so I can get the fade on hover effect for my headings? The class that I'm trying to apply the hover effect is the .lesson-title, h1.
Meaning it would apply to those headings with names such as "Identify Your Business Opportunity" "Test Your Concept or Product", etc., etc.
They are also links so you could also apply the hover effect to them as another option.
Here is the code:
<html>
<head>
<style>
.cm-lessons {
background: #cecece;
padding: 2em;
max-width: 3000px;
margin: auto;
}
.cm-lessons h1{
font-size: 1.7em;
color: #00455e;
}
.cm-lessons ol, ul {
list-style: none;
}
.cm-lesson-marker span, ol, ul, li {
margin: 0;
padding-bottom: 30px;
border: 0;
font-size: 100%;
color: #00455e;
vertical-align: baseline;
border-bottom: 1px solid #00455e;
}
.last-lesson{
margin: 0;
padding-bottom: 30px;
font-size: 100%;
color: #00455e;
vertical-align: baseline;
border: none;
}
.cm-lesson-marker h1{
font-size: 3em;
}
#more-lessons{
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.lesson-title h1, h2, h3, u, ul{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
color: #00455e;
opacity: 1;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.lesson-title h1:hover{
opacity: 0.2;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
ol, ul {
list-style: none;
}
.collapsible {
text-align: center;
color: #00455e;
cursor: pointer;
padding: 30px;
width: 100%;
font-size: 15px;
opacity: 1;
background-color: transparent;
border: none;
}
.active, .collapsible:hover {
opacity: 0.3;
}
</style>
</head>
<div>
<ul class="cm-lessons">
<h1>
For First-Time Business Owners
</h1>
<h3>
Lesson plans: 8
</h3>
<h2 class="lesson-title">
One hour webinar over a duration of 8 weeks.
</h2>
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>01</h1>
</span>
<a href="http://www.yantern.com/webinar001-01">
<h1 class="lesson-title">Identify Your Business Opportunity</h1>
</a>
<p>Choosing what kind of business to start with can be a challenging task when confronted with many ideas and opportunities. It’s important to determine where your passions lie and to understand what it takes to start the business. You have to consider your skills and resources. The industry you are entering may be dying or a fast-growing and emerging business.</p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>02</h1>
</span>
<a href="http://www.yantern.com/webinar001-02">
<h1 class="lesson-title">Test Your Concept or Product</h1>
</a>
<p>Concept testing is the process of evaluating likely customer response to a product idea prior to its introduction into the market. Seen through a jobs-to-be-done lens, the goal of concept testing is to validate that a product concept is better than the competing solutions at helping customers to get a job done.</p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker"><h1>03</h1></span>
<a href="http://www.yantern.com/webinar001-03">
<h1 class="lesson-title">Name Your Business</h1>
</a>
<p>Naming your business is important. The right business name will help you distinguish you from a sea of bland competitors, hence provide your customers with a reason to remember and use your company. </p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>04</h1>
</span>
<a href="http://www.yantern.com/webinar001-04">
<h1 class="lesson-title">Build a Business Plan</h1>
</a>
<p>For any start-ups, a business plan is an important tool and it also allows you to gain a better understanding of your industry structure, competitive landscape and the capital requirements of starting the small business. The plan lays out a vision of growth and the steps needed to get there.
</p>
</li>
<button class="collapsible">More lessons</button>
<div id="more-lessons">
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>05</h1>
</span>
<a href="http://www.yantern.com/webinar001-05">
<h1 class="lesson-title">Find Start-Up Money</h1>
</a>
<p>To start a business, you must invest in the business. The journey of finding start-up funds will be different for each individual. Some businesses require small amount or large amount of money to start. Finding the money you need may come from a source you would have never thought of.
</p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker"><h1>06</h1></span>
<a href="http://www.yantern.com/webinar001-06">
<h1 class="lesson-title">Choose a Business Structure</h1>
</a>
<p>Deciding on the structure of your business is not a decision to be taken lightly. Whether you have the LLC, a sole proprietorship or form a corporation; your choice will have an impact on your business liability and taxes. </p>
</li>
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>07</h1>
</span>
<a href="http://www.yantern.com/webinar001-07">
<h1 class="lesson-title">Get Your Business Licenses and Permits</h1>
</a>
<p>Depending on your chosen business structure, may need to register your business with the state authorities. Setting up your small business may require an employer identification number (EIN) which is also used by state taxing authorities to identify businesses. Additional paperwork can entail sales tax licenses and zoning permits. </p>
</li>
<li class="cm-lesson last-lesson">
<span class="cm-lesson-marker">
<h1>08</h1>
</span>
<a href="http://www.yantern.com/webinar001-08">
<h1 class="lesson-title">Get Business Insurance</h1>
</a>
<p>As a new small business owner, you have the responsibility to manage the risks associated with your business. Don't put your new startup at risk without getting the proper small business insurance to protect your company in the event of a disaster or litigation.</p>
</li>
</ul>
</div>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</html>
It will need to stay in HTML format as I will be copying/pasting this into a drag-and-drop website editor. Sorry for the messy code.
Thanks! If you need any more details, reply to me.
I think you've gotten your tag wrong:
.lesson-title h1:hover{
opacity: 0.2;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
should be
h1.lesson-title:hover{
opacity: 0.2;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
The original selector means on hover for h1 which are a child of .lesson-title.
Whereas what you wanted to say was on hover for h1 which have the class .lesson-title.
Hope that helps!
Super simple: remove your class="lesson-title" from the <h1> tag (and .lesson-title h1:hover CSS) altogether. Then it works (see below).
h1:hover{
opacity: 0.2;
transition: 0.3s;
-webkit-transition: 170ms ease-in-out;
-moz-transition: 170ms ease-in-out;
-ms-transition: 170ms ease-in-out;
-o-transition: 170ms ease-in-out;
transition: 170ms ease-in-out;
transition-duration: 170ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
<li class="cm-lesson">
<span class="cm-lesson-marker">
<h1>02</h1>
</span>
<a href="http://www.yantern.com/webinar001-02">
<h1>Test Your Concept or Product</h1>
</a>
<p>Concept testing is the process of evaluating likely customer response to a product idea prior to its introduction into the market. Seen through a jobs-to-be-done lens, the goal of concept testing is to validate that a product concept is better than the competing solutions at helping customers to get a job done.</p>
</li>
OK, so I didn't want to use flexboxes to begin with because of the older browser support issues but the only way I could get it working without flexbox involved floats, -margins, z-indexs, and was just very ugly and unseenly.
That being said, with flexbox, the left hand date block contorts both its width and height in both IE and Chrome despite hard setting the height and width.
https://jsfiddle.net/yuum08d9/
<style>
body {
font: 13px / 23px Roboto, sans-serif;
}
#Experience {
}
#Experience h4 {
color: #262626;
font: normal normal 300 normal 23px / 29.12px Roboto, sans-serif;
margin: 0px 0px 30px;
}
#Experience .Experience {
box-sizing: border-box;
color: #404040;
display: flex;
margin: 0 0 30px 0;
padding: 20px 0 0 0;
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience:Hover {
transform: translateX(20px);
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
-o-transform: translateX(20px);
transform: translateY(-20px);
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-o-transform: translateY(-20px);
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience .Date {
height: 160px;
width: 172px;
position: relative;
display: block;
}
#Experience .Experience .Date div {
bottom: -1.5px;
transform: matrix(1, 0, 0, 1, 20, -20);
background: #f1f1f1;
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience:Hover .Date Div {
background: #4dbfd9;
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.05);
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience .Date h6 {
color: #262626;
letter-spacing: 0.8px;
font: normal normal bold normal 15px / 24.44px Roboto, sans-serif;
margin: 0px;
padding: 56.75px 0px;
text-align: center;
transition: all 600ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience:Hover .Date h6 {
color: #fff;
transition: all 400ms ease;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-o-transition: all 600ms ease;
}
#Experience .Experience .Date .Angle {
position: absolute;
right: 0;
top: 142px;
transform: matrix(1, 0, 0, 1, 20, 0);
border-top: 20px solid #DAD6D6;
border-right: 20px solid #fff;
border-bottom: 0px solid #fff;
border-left: 0px solid #fff;
}
#Experience .Experience .WorkExperience {
box-shadow: rgb(221, 221, 221) 0.5px 0.5px 5px 0px;
box-sizing: border-box;
color: #404040;
font: 13px / 23px Roboto, sans-serif;
padding: 20px 55px;
text-align: left;
}
#Experience .Experience .WorkExperience h6 span {
font-size: 14px;
padding: 2px 0 0 10px;
}
#Experience .Experience .WorkExperience h6 {
color: rgb(38, 38, 38);
font-weight: 900;
font: 17px / 26px Roboto, sans-serif;
margin: 9px 0 0 0;
}
#Experience .Experience .WorkExperience p {
font: 13px / 23px Roboto, sans-serif;
}
#Experience .Experience .WorkExperience ul {
list-style:disc;
}
</style>
<div id="Experience" class="Block">
<h4>
Work Experience
</h4>
<div class="Experience">
<div class="Date">
<div>
<h6 class="H6">January 2015 -<br />Present</h6>
</div>
<span class="Angle"></span>
</div>
<div class="WorkExperience">
<h6>Boundary Protection Engineering <span>U.S. Air Force</span></h6>
<p>System Administrator of $10 billion United States Air Force Intra-Network (AFIN) Boundary Protection Cyberspace Security and Control System Weapon System (CSCS/WS) responsible for 1,070 firewalls, proxies, and VPN’s across 121 geographically separated locations in order to evaluate, detect, prevent and implement countermeasures to protect clients, networks, and data & voice systems to include Secure Internet Protocol Routing (SIPR) network mission systems from unauthorized network activity.</p>
<ul>
<li>Directed 624th Operations Command (OC) U.S. Cyber Command (USCYBERCOM) mission mapping 83rd Network Operations Squadron (NOS) key weapon systems paving future for Defensive Cyber Operations (DCO) missions.</li>
<li>Bolstered data mining capabilities by 55% by meticulously developing new Electronically Stored Information (ESI) requests logging/search process.</li>
<li>Promptly identified and resolved critical Air Force Security Assistance Center (AFSAC) service outage identifying and resolving 8 firewall security tunnel circuits enabling $166B global peacekeeping operations.</li>
</ul>
</div>
</div>
<!-- divider -->
<div class="Experience">
<div class="Date">
<div>
<h6 class="H6">August 2013 -<br />January 2015</h6>
</div>
<span class="Angle"></span>
</div>
<div class="WorkExperience">
<h6>Information System Security Officer/Information System Security Engineer<span>U.S. Air Force</span></h6>
<p>System administrator/manager responsible for ensuring confidentiality, integrity, and availability of systems and networks and data through the utilization of risk analysis process. Responsibilities include obtaining/maintaining Information System accreditation (SSPS/ISSP), integrate disaster recovery/contingency planning, establish a security education, training, and awareness program, create configuration management (CM) process and conduct auditing & network monitoring.</p>
<ul>
<li>Collaborated with HQ to develop 15 new policies and update 28 procedures to include: contingency planning, user training, configuration management, and auditing, in accordance with JSIG/JAFAN PL-2 requirements; skilled at complex information systems, i.e. Multi-Program Interconnection, PL-2 systems, and above, development of IA Policies and Procedures, and preparation of C&A documents and procedures; lauded by PACAF inspectors as "most improved".</li>
<li>Coordinated massive network overhaul replacing/upgrading ~90% of network infrastructure in order to comply with PL-2 IS requirements achieving approximately 99.8% system uptime. (Up from 88%)</li>
<li>Developed and implemented custom scripts throughout entire IS enabling highly customized real-time auditing/reporting of all information systems (ISs) improving ISSM/ISSO awareness while meeting JSIG/JAFAN auditing requirements. </li>
</ul>
</div>
</div>
<!-- divider -->
<div class="Experience">
<div class="Date">
<div>
<h6 class="H6">June 2013 -<br />August 2013</h6>
</div>
<span class="Angle"></span>
</div>
<div class="WorkExperience">
<h6>Communications Focal Point Technician<span>U.S. Air Force</span></h6>
<p>System administrator/manager responsible for ensuring confidentiality, integrity, and availability of systems and networks and data through the utilization of risk analysis process. Responsibilities include obtaining/maintaining Information System accreditation (SSPS/ISSP), integrate disaster recovery/contingency planning, establish a security education, training, and awareness program, create configuration management (CM) process and conduct auditing & network monitoring.</p>
<ul>
<li>Accountable for maintaining physical accountability of AFIN equipment, planning, and scheduling production, ordering, and management of materials, and track/order preventive maintenance.</li>
<li>Conducted Tier I/II help desk support; directly involved in the resolution of 500+ tickets.</li>
<li>Effectively provided technical support, in person, on phone and through online communication cutting ticket creation by approximately 12% in less than 3 months.</li>
<li>Successfully developed and implemented new ticket monitoring and reporting system cutting reporting time by nearly 80%.</li>
<li>Improved network vulnerability awareness by approximately 30% by effectively developing and implementing vulnerability and patching monitoring system.</li>
</ul>
</div>
</div>
<!-- divider -->
<div class="Experience">
<div class="Date">
<div>
<h6 class="H6">June 2013 -<br />August 2013</h6>
</div>
<span class="Angle"></span>
</div>
<div class="WorkExperience">
<h6>Network Control Center Technician<span>U.S. Air Force</span></h6>
<p>System administrator of $318 million network for 35th Fighter Wing supporting 44 units throughout Japan. Responsibilities include managing core network services including Active Directory, Group Policy, DNS, and DHCP. Other responsibilities included system lifecycle management, vulnerability identification/remediation, and tier 3 support.</p>
<ul>
<li>Team leader for windows domain migration project, to incorporate local base network into Air Force Intra-Network (AFIN) -- lauded "Best to Date" migration by Higher Headquarters Communications and Information Director.</li>
<li>Developed the vulnerability management & mitigation rapid resolution program resulting in the identification and resolution of over 25,000 vulnerabilities in less than 2 weeks.</li>
<li>Developed Batch/PowerShell script suite used to identify/correct operating system errors, perform customized system maintenance, remediate patching shortfalls, and detect OS vulnerabilities resulting in 25% drop in tier 1 tickets and 22% improvement in patching, and improved system life cycle.</li>
</ul>
</div>
</div>
<!-- divider -->
</div>
For the Date item to keep its width and not shrink to fit (which is the default), you need to set flex-shrink: 0
#Experience .Experience .Date {
flex-shrink: 0; /* added */
height: 160px;
width: 172px;
position: relative;
display: block;
}
Updated fiddle
I had faced a similar problem with flex which also included an issue with absolutely positioned child divs inside flex containers in Firefox. Thus I would advice against using flex because of the reason you stated as well cross browser compatibility.
So I dropped flex and used the metrics vw, vh and vmin( vm for IE ) instead. These units are tied in with the viewport and allow for fluidic layouts with elegant code. You can even use these units with fonts for a more responsive design.
Here's a JSFiddle demonstrating this. It runs in all browsers and is responsive as well.
And here's the code
body {
font: 13px / 23px Roboto, sans-serif;
}
#Experience {
}
#Experience h4 {
color: #262626;
font: normal normal 300 normal 23px / 29.12px Roboto, sans-serif;
}
.H6{
text-align: center;
display: inline-block;
border: 2px solid #404040;
width: 20vw;
float: left;
background-color: #f1f1f1;
margin: 2vw;
}
.WorkExperience{
border: 2px solid #404040;
width: 50vw;
margin-left: 18vw;
padding: 2vw;
}
<div id="Experience" class="Block">
<h4>
Work Experience
</h4>
<div class="Experience">
<div class="Date">
<div>
<h6 class="H6">January 2015 -<br />Present</h6>
</div>
<span class="Angle"></span>
</div>
<div class="WorkExperience">
<h6>Boundary Protection Engineering <span>U.S. Air Force</span></h6>
<p>System Administrator of $10 billion United States Air Force Intra-Network (AFIN) Boundary Protection Cyberspace Security and Control System Weapon System (CSCS/WS) responsible for 1,070 firewalls, proxies, and VPN’s across 121 geographically separated locations in order to evaluate, detect, prevent and implement countermeasures to protect clients, networks, and data & voice systems to include Secure Internet Protocol Routing (SIPR) network mission systems from unauthorized network activity.</p>
<ul>
<li>Directed 624th Operations Command (OC) U.S. Cyber Command (USCYBERCOM) mission mapping 83rd Network Operations Squadron (NOS) key weapon systems paving future for Defensive Cyber Operations (DCO) missions.</li>
<li>Bolstered data mining capabilities by 55% by meticulously developing new Electronically Stored Information (ESI) requests logging/search process.</li>
<li>Promptly identified and resolved critical Air Force Security Assistance Center (AFSAC) service outage identifying and resolving 8 firewall security tunnel circuits enabling $166B global peacekeeping operations.</li>
</ul>
</div>
</div>
I have some pretty basic accordion tabs that open when clicked and close when you click another one. I want them to be able to close when you click on the tab that is open as well though. Does anyone know how to do this?
.ac-container {
// max-width: 400px;
}
.ac-container label {
// height: 30px !important;
line-height: 21px !important;
// font-size: 12px !important;
padding: 5px 20px;
text-transform: uppercase;
font-weight: 100;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: white;
line-height: 33px;
font-size: 19px;
background: $dark-blue;
border-bottom: 2px solid $light-blue;
height: auto;
line-height: 20px;
}
.ac-container span {
position:absolute;
bottom:5px;
right:8px;
}
.ac-container {
width: 100%;
// margin: 10px auto 30px auto;
text-align: left;
}
.ac-container label:hover {
background: $light-blue;
color:$dark-blue;
}
.ac-container input:checked + label,.ac-container input:checked + label:hover {
background: $dark-blue;
color: white;
text-transform: uppercase;
font-weight: 100;
height: auto;
line-height: 21px;
font-size: 19px;
}
.ac-container label:hover:after,.ac-container input:checked + label:hover:after {
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
// background: transparent url(../images/arrow_down.png) no-repeat center center;
}
.ac-container input:checked + label:hover:after {
// background-image: url(../images/arrow_up.png);
}
.ac-container input {
display: none;
}
.ac-container article {
background: rgba(255,255,255,0.5);
margin-top: -1px;
overflow: hidden;
height: 0;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
}
.ac-container article p {
font-style: normal;
color: #777;
line-height: 23px;
font-size: 100%;
padding: 20px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ article {
-webkit-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
box-shadow: 0 0 0 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ article.ac-small {
height: 140px;
}
.ac-container input:checked ~ article.ac-medium {
height: 180px;
}
.ac-container input:checked ~ article.ac-large {
height: 230px;
}
<section class="ac-container">
<h2>Breakfast</h2>
<div>
<input id="ac-1" name="accordion-1" type="radio" >
<label for="ac-1"><img src="img/breakfast/american.jpg" alt=""><span>American</span></label>
<article class="ac-small">
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.</p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="radio">
<label for="ac-2"><img src="img/breakfast/continental.jpg" alt=""></i><span>Continental</span></label>
<article class="ac-medium">
<p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="radio">
<label for="ac-3"><img src="img/breakfast/english.jpg" alt=""><span>English</span></label>
<article class="ac-large">
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="radio">
<label for="ac-4"><img src="img/breakfast/health.jpg" alt=""><span>The Healthy Stuff</span></label>
<article class="ac-large">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
</article>
</div>
<div>
<input id="ac-5" name="accordion-1" type="radio">
<label for="ac-5"><img src="img/breakfast/misc.jpg" alt=""><span>Miscellaneous</span></label>
<article class="ac-large">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
</article>
</div>
</section>
Your code doesn't work.
Your HTML doesn't have H4 tag.
Here's a working sample that works like you wanted.
$(document).ready(function() {
$('.accordion-title').click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active').next('.accordion-content').slideUp();
} else {
$('.accordion-title').removeClass('active');
$('.accordion-content').slideUp();
$(this).addClass('active').next('.accordion-content').slideDown();
}
});
});
.accordion-title {
font-size: 14px;
font-weight: bold;
border: 1px solid black;
}
.accordion-content {
border: 1px solid black;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-title">Title</div>
<div class="accordion-content">Content</div>
<div class="accordion-title">Title 2</div>
<div class="accordion-content">Content 2</div>
<div class="accordion-title">Title 3</div>
<div class="accordion-content">Content 3</div>
View on JSFiddle
Use input type checkbox instead of radio and write styles in css to make height zero when unchecked.
<section class="ac-container">
<h2>Breakfast</h2>
<div>
<input id="ac-1" name="accordion-1" type="checkbox" >
<label for="ac-1"><img src="img/breakfast/american.jpg" alt=""> <span>American</span></label>
<article class="ac-small">
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.</p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox">
<label for="ac-2"><img src="img/breakfast/continental.jpg" alt=""></i><span>Continental</span></label>
<article class="ac-medium">
<p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox">
<label for="ac-3"><img src="img/breakfast/english.jpg" alt=""><span>English</span></label>
<article class="ac-large">
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox">
<label for="ac-4"><img src="img/breakfast/health.jpg" alt=""><span>The Healthy Stuff</span></label>
<article class="ac-large">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
</article>
</div>
<div>
<input id="ac-5" name="accordion-1" type="checkbox">
<label for="ac-5"><img src="img/breakfast/misc.jpg" alt=""><span>Miscellaneous</span></label>
<article class="ac-large">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
</article>
</div>
</section>
So after working my behind off all day at my website, I find out that it's basically only compatible on my computer on 1920*1080.
I suppose that I'm to ''glue'' objects somehow to x areas of the website but I don't know how to.
I know this is not exactly a direct question but can you please tell me what is causing my website to go out of order when resized? Here is the whole website JSfiddle
http://jsfiddle.net/vuz2L/
Here is the HTML code:
<!DOCTYPE HTML>
<HTML>
<head>
<title>Heilsa</title>
<link type="text/css" href="stylesheet3.css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="container">
<img id="bordi" src="heilsa2.png"/>
<div id="bigtext">Heilsa</div>
<div class="menu">
<ul>
<li>Heim</li> <span id="menubord">
<li>Hollt Mataræði</li>
<li>Reynslusögur</li> </span>
</ul>
</div>
<div id="content">
<div id="block">
</div>
<div id="meginmal">
<h1>Fyrirsögn</h1>
<p>ch-slahing thust get a proper bitch-slapping to stop making walls of text, but if you are weird then thaA wall of text is something thust get a proper bitch-slapping to stop making walls of text, but if you are weird then that doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some othA wall of text is something thust get a proper bitch-slapping to stop making walls of text, but if you are weird then that doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some othA wall of text is something thust get a proper bitch-slapping to stop making walls of text, but if you are weird then that doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some otht doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some otht doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some othoesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some othsome other things that would work but will take hours to think of. People are considered a nuisance if they create walls of text. This might be the end. If you hope this is the end, I am not sure. But if I was not sure then I wouldn't be talking. I should know. Or should I? The best way to make a better and good wall of text is to copy and paste what you previously typed or write. Hey, that reminds me. Walls of text aren't always on the internet! They could be anywhere that is able to produce symbols. D'oh. A wall of text is something that is frowned upon in most, actually virtually all Internet societies, including forums, chat boards, and Uncyclopedia. You should not make walls of text because it can get you banned anywhere unless it is a place that encourages walls of text. I highly doubt any place does support something so irritating and annoying, but anything can exist, but not really because unless you are in heaven then that can happen. But no one actually knows that was just a hypothesis, a lame one that is. Actually not really lame. You can created a wall of text supporting site, but you would be hated if you do that, so do not. But you can if you like, but I discourage that. Now on to the actual information of walls of texts. The wall of text was invented when the Internet was invented, but actually it was slow at that time. So whenever it became fast. But there would need to be some free or not free community for people, and that community would be able to have walls of text. But that community probably wouldn't have actually invented the wall of text. So basically, no one except God and Al Gore knows when or where or how the wall of text existed/was invented. Noobs probably invented, but probably not. Who knows. Walls of texts are usually filled with a lot of useless information and junk. Information and junk can be the same, but only if the information is junk or the junk is information.A wall of text is something thust get a proper bitch-slapping to stop making walls of text, but if you are weird then that doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some other things that would work but will take hours to think of. People are considered a nuisance if they create walls of text. This might be the end. If you hope this is the end, I am not sure. But if I was not sure then I wouldn't be talking. I should know. Or should I? The best way to make a better and good wall of text is to copy and paste what you previously typed or write. Hey, that reminds me. Walls of text aren't always on the internet! They could be anywhere that is able to produce symbols. D'oh. A wall of text is something that is frowned upon in most, actually virtually all Internet societies, including forums, chat boards, and Uncyclopedia. You should not make walls of text because it can get you banned anywhere unless it is a place that encourages walls of text. I highly doubt any place does support something so irritating and annoying, but anything can exist, but not really because unless you are in heaven then that can happen. But no one actually knows that was just a hypothesis, a lame one that is. Actually not really lame. You can created a wall of text supporting site, but you would be hated if you do that, so do not. But you can if you like, but I discourage that. Now on to the actual information of walls of texts. The wall of text was invented when the Internet was invented, but actually it was slow at that time. So whenever it became fast. But there would need to be some free or not free community for people, and that community would be able to have walls of text. But that community probably wouldn't have actually invented the wall of text. So basically, no one except God and Al Gore knows when or where or how the wall of text existed/was invented. Noobs probably invented, but probably not. Who knows. Walls of texts are usually filled with a lot of useless information and junk. Information and junk can be the same, but only if the information is junk or the junk is information.
</p>
</div>
</div>
<div class="push">
</div>
<div id="wrapper">
<img id="undir" src="undir.png"/>
</div>
</div>
</body>
</HTML>
And CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height:100%;
height: auto !important;
position:relative;
height: 100%;
margin: 0 auto -232px;
}
.menu {
width:700px;
height:180px;
font-family:Trajan Pro;
font-size:18px;
text-align:center;
font-weight:bold;
text-shadow:3px 2px 3px #333333;
margin-left:1010px;
position:absolute;
top:135px;
}
#menubord {
}
.menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
list-style-type: none;
}
.menu li {
display: inline;
padding: 20px;
}
.menu a {
text-decoration: none;
color:red;
font-weight:600;
font-size: 22px;
letter-spacing: 1.2px;
}
.menu a:hover {
text-shadow: 8px 5px 8px #333333;
font-size:24px;
animation-name: opac;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: opac;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#keyframes opac
{
0% {opacity:1}
25% {opacity:0.5}
50% {opacity:0.1}
75% {opacity:0.5}
100% {opacity:1}
}
#-webkit-keyframes opac /* Safari and Chrome */
{
0% {opacity:1}
25% {opacity:0.5}
50% {opacity:0.1}
75% {opacity:0.5}
100% {opacity:1}
}
.menu a:active {
text-shadow: 12px 8px 12px #333333;
}
#content {
min-height:100%;
position: relative;
width: 800 px;
height: 800px;
margin-right:200px;
margin-left:200px;
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#block1 { /*IGNORE THIS. I AM SAVING IT FOR LATER*/
background: red;
filter:alpha(opacity=20); /* IE */
-moz-opacity:0.2; /* Mozilla */
opacity: 0.2; /* CSS3 */
position: absolute;
top: 0; left: 0;
height: 100%; width:100%;
border-radius: 20px;
margin:10px;
}
#meginmal {
padding: 20px 30px 20px 30px;
text-align: center;
font-size:20px;
border-right: solid;
border-left: solid;
font-family: Trajan Pro;
}
#bordi {
height:100%;
width: 100%;
margin: 0%;
}
#wrapper {
bottom:0;
width:100%;
height:232px; /* Height of the footer */
margin-top:200px;
}
.push {
height: 232px;
}
#bigtext {
z-index:1;
margin-top:-300px;
margin-left:700px;
position: absolute;
font-size:70px;
font-family: Trajan Pro;
}
#bigtext a {
text-decoration: none;
color:black;
border-bottom:solid;
border-color: rgba(0, 255, 255, 0);
}
#bigtext a:hover{
animation-name: big;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: big;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#keyframes big
{
0% { border-color: rgba(0, 0, 0, 1); }
50% { border-color: rgba(0, 0, 0, 0); }
100% { border-color: rgba(0, 0, 0, 1); }
}
#-webkit-keyframes big /* Safari and Chrome */
{
0% { border-color: rgba(0, 0, 0, 1); }
50% { border-color: rgba(0, 0, 0, 0); }
100% { border-color: rgba(0, 0, 0, 1); }
}
when you trying to design website try not to use fixed values like X px, when X is large number, like width: 800 px;.
for example if you change #content to this:
#content {
min-height:100%;
position: relative;
width: 800 px;
height: 800px;
margin-right:5%;
margin-left:5%;
padding:10px;
padding-bottom:60px;
/* Height of the footer */
}
where i changed
margin-right:5%;
margin-left:5%;
the main content is becoming more likely.
Try avoid big fixed values, changing them to percentable values, or align: left;, etc
You have a lot of margin-left + position:absolute values which breaks the layout. Instead of using absolute positioning, try to use margins and floats, or even browser natural flow of displaying elements in the page.
I have a div container with the ID of #homeSectionB, inside it there are articles all all of them have the class .testimonial.
What I am trying to do is that when you hover over one of the testimonial all of the other get an opacity of 0.60. I got it working view it live here: http://www.loaistudio.com/client-preview/Loai%20Design%20Studio
However, I am having a a problem, when you hover over the container all of the testimonials get that opacity class. How can I fix it? and make it only when you are actually hovering over one of the testimonials and not the container
And here is a fiddle: http://jsfiddle.net/svZ3C/
HTML:
<article class="testimonial">
<img alt="Neal Kilburne" src="assets/elements/neal-kilburne.jpg"/>
<section>
<h3>Neal Kilburne</h3>
<p>CEO, iTEQ Global www.iteqglobal.com</p>
<br>
<p>“Loai is a great asset to our company and provides us with great and quick responses, such a talented designer which we have the honour of working with.” 2011 - 2012</p>
</section>
</article>
<article class="testimonial">
<img alt="Vanessa Elharrar M.D" src="assets/elements/vanessa-elharrar.jpg"/>
<section>
<h3>Vanessa Elharrar M.D</h3>
<p>www.dreamcometruecoaching.com</p>
<br>
<p>"“It was wonderful to work with Loai on my website. He’s a really talented and gifted web designer, really creative and really has an eye for style and design. I loved the process of working with him, he’s a really nice guy and I do recommend him. I think you’ll love the outcome. I was very impressed and would use him again in a heartbeat.”" November 25, 2012</p>
</section>
</article>
<article class="testimonial">
<img alt="Glen Eric Huysamer" src="assets/elements/glen-eric-huysamer.jpg"/>
<section>
<h3>Glen Eric Huysamer</h3>
<p>Specialist Service Provider.</p>
<br>
<p>“I would like to take this opportunity to warn people who might consider using Loai Design Studio. You will have to buckle up & strap yourself in as this young designer & associates take you through the process of creating your design needs. I was pleasantly surprised from start to finish, & can say that even though Loai took control of the creative process the end result felt like it was mine. You can not go wrong with this young lad, go ahead surprise yourself”. December 30, 2011</p>
</section>
</article>
</div><div id="grid2"><!-----Gird 2----->
<article class="testimonial">
<img alt="Geeta Martinez" src="assets/elements/geeta-martinez.jpg"/>
<section>
<h3 >Geeta Martinez</h3>
<p>Lawyer & Business Consultant</p>
<br>
<p>"Leo did a great job! He designed & put together several websites for me in less than a week. He was incredibly patient & flexible throughout the whole process, & took a lot of the stress out of the whole situation for me. He is a really nice guy to work with - I really appreciated his approach! I would definitely recommend working with him". July 14, 2013</p>
</section>
</article>
<article class="testimonial">
<img alt="Phil Turtle" src="assets/elements/phil-turtle.jpg"/>
<section>
<h3>Phil Turtle</h3>
<p>www.turtleconsulting.com</p>
<br>
<p>“When we needed a new logo for our business operation (Data Center Industry PR). We needed somebody to help to try to encapsulate what a Data Center is, into a very simple logo. As many people don not even know what a Data Center is that was not an easy challenge. But Loai Design stepped up and within two days we had several ideas from which to choose, we worked on the chosen one of those and very quickly indeed we had a full working logo and our ecommerce site up and running. Thank You Loai Design.” July 11, 2013</p>
</section>
</article>
<article class="testimonial">
<section>
<h3>Richard Jackson</h3>
<p>Photographer www.rjpstudios.co.uk</p>
<br>
<p>“Loai designed my website last year though I could have done it myself loai added a proffesional touch to the design which is so important in creating the best first impeson.” 2013</p>
</section>
</article>
</div><div id="grid3"><!-----Gird 3----->
<article class="testimonial">
<img alt="Lulu Oliver" src="assets/elements/lulu-oliver.jpg"/>
<section>
<h3>Lulu Oliver</h3>
<p>www.lusialpacas.co.uk</p>
<br>
<p>"He is the most fantastic young man, he is talented, clever and extremely helpful. He Put my whole package together, he designed the website well. and now I have a website that I can mange my self and it just have everything I wanted to do. So I can't recommend him highly enough, he really is a really good guy, and if you want some help or you want him to do your website, that is the place to go!” Mar 26, 2013</p>
</section>
</article>
<article class="testimonial">
<img alt="Alina Kouneva Tremblay" src="assets/elements/alina-kouneva-tremblay.jpg"/>
<section>
<h3>Alina Kouneva Tremblay</h3>
<p>www.alinagardens.com</p>
<br>
<p>"I had the honor and the privilege to work with Loai on my website. I have been looking for a web designer, who can simply just do what I wanted and put it in a website so that my customers had access to my work. He was wonderful to work with, as much he's a professional, he's also just a great guy and very easy to work with. I remember laughing lot with him and it's always a nice thing to do, becouse websites can be a bit stressfull. I love my website, my friends love my website, my business associate love my website, and I simply want everybody to love their websites as much as I do. So I highly recommend Loai for your next website!” April 5, 2013</p>
</section>
</article>
</div>
</div>
</div>
CSS:
/*HOME PAGE -> Section E*/
.testimonial {
background-color: #F7F7F7;
border: 1px solid #149B78;
margin-bottom: 20px;
text-align: center;
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
-ms-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
.testimonial section {
padding: 20px;
}
.testimonial section h3 {
color: #1AC99C;
}
.testimonial section p {
font-size: 0.90em;
}
.testimonial section p:first-of-type {
color: #149B78;
}
.testimonial img {
border-bottom: 1px dashed #435D84;
padding: 1px;
}
/*The hover-over animation*/
#homeSectionB:hover .testimonial {
opacity: 0.60;
-moz-opacity: 0.60;
-khtml-opacity: 0.60;
filter:alpha(opacity=60);
}
#homeSectionB:hover .testimonial:hover {
opacity: 1;
-webkit-box-shadow: 0px 0px 20px 0px rgba(14,109,85,0.3);
-moz-box-shadow: 0px 0px 20px 0px rgba(14,109,85,0.3);
box-shadow: 0px 0px 20px 0px rgba(14,109,85,0.3);
}
We have this setup working (check out the nav bar on http://firststop.herokuapp.com), and I know the problem you want to fix is to have the opacity only work if you hover over one of the elements (not the container)
Although I don't have a direct solution, I have a way which works well enough for your users to not notice anything
CSS Child & Sibling Selectors
We spent a long time looking over the mechanics of CSS child & sibling selectors, trying to get them to work to achieve your desired result. The issue is that you cannot select siblings on hover; you can only select children:
.container:hover .children{
/* Works */
}
.child:hover .other_children {
/* Not Works */
}
Might be wrong, but that's the problem you have -- that you have to style from the container - down
Use Padding
So our fix was to replace margin with padding, meaning that if you went into the container with your mouse, you had to hover over one of the elements
We took our elements & created a mini-container for them. This was display:inline-block, and had padding: Xpx
I updated your jsFiddle to show these fixes:
article {
padding-bottom: 20px;
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
-ms-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
}
.testimonial {
background-color: #F7F7F7;
border: 1px solid #149B78;
text-align: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
/*The hover-over animation*/
#homeSectionB:hover article {
opacity: 0.10;
-moz-opacity: 0.10;
-khtml-opacity: 0.10;
filter:alpha(opacity=10);
}
#homeSectionB:hover article:hover {
opacity: 1;
-webkit-box-shadow: 0px 0px 20px 0px rgba(14,109,85,0.3);
-moz-box-shadow: 0px 0px 20px 0px rgba(14,109,85,0.3);
box-shadow: 0px 0px 20px 0px rgba(14,109,85,0.3);
}
<article >
<div class="testimonial">
<img alt="Neal Kilburne" src="assets/elements/neal-kilburne.jpg"/>
<section>
<h3>Neal Kilburne</h3>
<p>CEO, iTEQ Global www.iteqglobal.com</p>
<br>
<p>“Loai is a great asset to our company and provides us with great and quick responses, such a talented designer which we have the honour of working with.” 2011 - 2012</p>
</section>
</div>
</article>
Your problem styles are these:
#homeSectionB:hover .testimonial {
opacity: 0.60;
-moz-opacity: 0.60;
-khtml-opacity: 0.60;
filter: alpha(opacity=60);
}
You've clearly specified that all testimonials should get an opacity of 0.60 when someone hovers on the div#homeSectionB. Now, I understand that you have done this because you wanted to fade out other testimonials when someone hovered over one of them. This would have worked if you didn't have any gutter width.
There are multiple ways to resolve this issue now. Let me know if you are okay with a JS approach or want a CSS-only one.
UPDATE 1:
Here you go: http://jsfiddle.net/svZ3C/5/ . The principle involved here is that you need to use padding in place of margin. Here are the updated CSS rules:
article {
padding-bottom: 20px;
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
-ms-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
}
#grid1 article {
padding-right: 15px;
}
#grid2 article {
padding: 0 5px 20px 5px;
}
#grid3 article {
padding-left: 15px;
}
/*Don't modify articles. Modify testimonials within them.*/
#homeSectionB:hover .testimonial {
opacity: 0.10;
-moz-opacity: 0.10;
-khtml-opacity: 0.10;
filter:alpha(opacity=10);
}
#homeSectionB:hover .testimonial:hover {
opacity: 1;
-webkit-box-shadow: 0px 0px 20px 0px rgba(14, 109, 85, 0.3);
-moz-box-shadow: 0px 0px 20px 0px rgba(14, 109, 85, 0.3);
box-shadow: 0px 0px 20px 0px rgba(14, 109, 85, 0.3);
}
and slight change in the HTML is this:
<article>
<div class="testimonial" <img alt="Neal Kilburne" src="assets/elements/neal-kilburne.jpg" />
<section>
<h3>Neal Kilburne</h3>
<p>CEO, iTEQ Global www.iteqglobal.com</p>
<br>
<p>“Loai is a great asset to our company and provides us with great and quick responses, such a talented designer which we have the honour of working with.” 2011 - 2012</p>
</section>
</div>
</article>