Below I will add my HTML and CSS code. I want to give my page a 2 column layout within the main section. Any help is much appreciated. The navigation, footer, and title part will be the same on each page. I just need the two-column on the main section.
HTML
<!DOCTYPE html>
<head>
<title>Augie's Custom T-shirts</title>
<meta charset="utf-8">
<link href="Style.css" rel="stylesheet">
</head>
<body>
<nav class="nav">
<div class="menu">
<p>Home</p>
</div>
<div class="menu">
<p>Shop</p>
</div>
<div class="menu">
<p>Events</p>
</div>
<div class="menu">
<p>Contact Us</p>
</div>
<br/>
<br/>
</nav>
<main class="wrapper">
<div class="banner">
<h1><span class="name">Augie's Custom T-shirts</span></h1>
<h2>Custom T-shirts for you or your party.</h2>
<div class="bulletPoints">
<ul>
<li>Birthday parties</li>
<li>Vacation groups</li>
<li>Bachelorette Parties</li>
<li>Family reunions</li>
<li>Work team rewards</li>
<li>Business promotions</li>
</ul>
</div>
<br/>
</div>
<p id="Catch">
Do you have an event coming up, and want everyone to get in the spirit? T-shirts can bring a group together, make everyone feel connected, and let everyone know what you're celebrating.
</p>
<p>T-shirts can also be a great gift to someone that acknowledges their special interest or hobby.</p>
<p>Choose from one of our unique designs, or let us put your own design on a shirt for you.</p>
<div class="row">
<div class="column">
<img src="images/gorilla.jpg" alt="Gorilla" style="width:100%">
</div>
<div class="column">
<img src="images/pink.jpg" alt="Pink" style="width:100%">
</div>
<div class="column">
<img src="images/skull.jpg" alt="Skull" style="width:100%">
</div>
</div>
<p><strong>How it works:</strong></p>
<p>Browse our selection of unique designs, select the size and colors of the shirts you would like, and place your order. We will ship your shirts within three business days for in-stock shirts, or five days for custom size and colors.</p>
<figure>
<img src="images/t-shirt-colors.jpeg" alt="T-shirt colors" class="image1">
<figcaption>Choose from are variety of t-shirt colors!</figcaption>
</figure>
<p>Have a design of your own? Can't find the right sentiment? Call or email us to discuss the possibilities or get some ideas for your event.</p>
<p>Please note there will be a one time $15 charge for any custom graphics design.</p>
<h2><em>Contact us today!</em></h2>
</main>
<footer class="footer">
<div class="box">
<p>Augie's Custom T-shirts</p>
<p>(478) 555-1212</p>
<p>augieB#augiesTees.com</p>
<br/>
</div>
<div class="box">
<p>Check out are Social Media for updates!</p>
<p>Facebook:</p>
<p>Instagram:</p>
<p>Twitter:</p>
</div>
<div class="box">
<p>Locations:</p>
<br/>
<p>100 Tanger Dr, Locust Grove, GA</p>
<p>2954 Watson Blvd Suite 100, Warner Robins, GA</p>
</div>
</footer>
<div class="copyright">
<h3> #copyright: Landon Byrd</h3>
<p>Fall 2021, All Rights Reserved</p>
</div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</p>
</body>
CSS
/*
Landon Byrd
Fall 2021
Plain Red #f60d41
Rich Red #f6130d
Orioles Orange #f64d0d
Sunset Orange #f6870d
Golden Yellow #f6c10d
*/
/* Global settings */
h1 {text-align: center; font-family: Papyrus}
h2 {text-align: center; color: #f6130d; text-decoration: underline}
.wrapper{width:85%; margin:0 auto; max-width: 960px;}
/* Nav Section */
.nav{width: 85%; margin:0 auto; background-color: #f6130d; text-align: center;}
.menu{float:left; width: 25% }
/* Main section */
.banner{justify-content: center; background-color: #f6c10d; text-align: center;}
.bulletPoints ul {
display:inline-block;
text-align:left;
}
section{background-color: #f6870d; color: #f60d41; font-style:italic; margin: 25px 50px 75px;}
body {
background-image: url("images/background.jpeg");
}
.image1
{
display: block;
margin-left: auto;
margin-right: auto;
}
figcaption {
text-align: center;
}
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
}
/* Footer section */
* {box-sizing: border-box;}
.footer{text-align: center; background-color: #f6130d; color: #f6c10d; }
.box{float:left; width: 33.33% }
.footer::after {content: ""; clear:both; }
/* Copyright section */
.copyright {text-align: center; background-color: #f6130d; color: #f6c10d; }
I would also like to make sure all my floats are cleared as nessicary.
It's very easy with flex.
In 2021 you should try to avoid floats as much as possible.
Simply switch to flex as described here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
As for your specific case:
.flex-container{
display:flex;
width:100%;
}
.col{
max-width:50%;
flex: 0 0 50%;
}
<div class="flex-container">
<div class="col">
col 1
</div>
<div class="col">
col 2
</div>
</div>
If you want to make them go vertically on mobile, just give the container the property flex-direction:column and make the 2 divs max-width:100% and flex:0 0 100%;
i have created an html section in bootstrap, which contains a container and two main rows, the code is like below:
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.addonscard {
width: 100%;
height: 181px;
padding: 2%;
border: 1px solid #efefef;
}
.addonsimage {
width: 100%;
}
.add-on-add-unit {
color: #30ac15;
border: 1px solid #30ac15;
}
.add-on-add-unit {
font-size: 14px;
line-height: 20px;
padding: 2px 12px 2px 10px;
border-radius: 10px;
display: inline-block;
}
.add-on-add-unit {
color: #30ac15;
border: 1px solid #30ac15;
}
.addonsdesc {
font-size: 13px
}
#showmore {
text-align: center;
}
.clearme {
clear: both;
margin-top: 2%;
}
</style>
<section class="addons">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="addonscard">
<div class="row">
<div class="col-md-4">
<img class="addonsimage" src="test1.jpg" />
</div>
<div class="col-md-8">
<h4>This is Heading</h4>
<p>Price</p>
+ Add
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days. </p>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="addonscard">
<div class="row">
<div class="col-md-4">
<img class="addonsimage" src="test2.jpg" />
</div>
<div class="col-md-8">
<h4>This is Heading</h4>
<p>Price</p>
+ Add
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days. </p>
</div>
</div>
</div>
</div>
</div>
<div class="clearme"></div>
<div class="row">
<div class="col-md-10" id="showmore">
+ Show more add-ons
</div>
</div>
</div>
now the problem is
<div class="row">
<div class="col-md-10" id="showmore">
+ Show more add-ons
</div>
</div>
this row is going above the first row in mobile view, i have tried using mobile query to adjust but still its not moving down, can anyone please tell me what could be wrong here, thanks in advance
Remove height (181px) from ".addonscard" class in CSS and try :
.addonscard {
width: 100%;
height: auto; // height is updated from 181px to auto..
padding: 2%;
border: 1px solid #efefef;}
set height for rows and set float right for them!
#media only screen and (max-width: 576px) {
.row{
height:fit-content;
float:right;
}
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.addonscard {
width: 100%;
height: 181px;
padding: 2%;
border: 1px solid #efefef;
}
.addonsimage {
width: 100%;
}
.add-on-add-unit {
color: #30ac15;
border: 1px solid #30ac15;
}
.add-on-add-unit {
font-size: 14px;
line-height: 20px;
padding: 2px 12px 2px 10px;
border-radius: 10px;
display: inline-block;
}
.add-on-add-unit {
color: #30ac15;
border: 1px solid #30ac15;
}
.addonsdesc {
font-size: 13px
}
#showmore {
text-align: center;
}
.clearme {
clear: both;
margin-top: 2%;
}
</style>
<section class="addons">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="addonscard">
<div class="row">
<div class="col-md-4">
<img class="addonsimage" src="test1.jpg" />
</div>
<div class="col-md-8">
<h4>This is Heading</h4>
<p>Price</p>
+ Add
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days. </p>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="addonscard">
<div class="row">
<div class="col-md-4">
<img class="addonsimage" src="test2.jpg" />
</div>
<div class="col-md-8">
<h4>This is Heading</h4>
<p>Price</p>
+ Add
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days. </p>
</div>
</div>
</div>
</div>
</div>
<div class="clearme"></div>
<div class="row">
<div class="col-md-10" id="showmore">
+ Show more add-ons
</div>
</div>
</div>
I am trying to build a simple survey with 10 questions which are stored in my database, looped through and the 10 questions are added to the page dynamically. Basically, I would like there to only be one question on the page at a time, but the page to be scrollable to see the other questions.
For example, question 1 would show up in the middle of the page, the user types their answer and clicks next, and the page scrolls to the next question. If the user scrolls up, it scrolls through the page up, and down scrolls down. For jumping to the next question I was planning on just having each question with an id and the next button just having a link to that id.
My HTML for populating the questions on the page looks like this:
<div class="container">
<div class="row wrapper">
<div class="question">
<p>What is your name?</p>
</div>
<div class="description">
<p>Used for...</p>
</div>
<div class="answer">
<input type="text" placeholder="">
</div>
</div>
</div>
My CSS for the above looks like this:
.question {
color: #232A33;
text-align: left;
font-size: 2em;
}
.description {
color: #FFCD3D;
text-align: left;
font-size: 1.25em;
}
.answer {
color: #232A33;
text-align: left;
font-size: 1.25em;
}
I managed to get the question centered on the page using the following code:
.wrapper {
width: 500px;
height: 150px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
This works fine for one question, but if there are multiple questions they all overlap each other because the position is absolute.
Any tips on how I can achieve this design for the page?
Thanks in advance!
You're very close. This can be done by adding just a tad more css in (adjusting the row class slightly).
If you add the following:
.row {
width: 100%;
margin: 15% auto;
height: 100vh!important;
}
and adjust your wrapper to **relative** positioning, you should see a good result
.wrapper {
width: 500px;
height: auto;
position: relative;
}
See snippet or fiddle
.question {
color: #232A33;
text-align: left;
font-size: 2em;
}
.description {
color: #FFCD3D;
text-align: left;
font-size: 1.25em;
}
.answer {
color: #232A33;
text-align: left;
font-size: 1.25em;
}
.row {
width: 100%;
margin: 15% auto;
height: 100vh!important;
}
.wrapper {
width: 500px;
height: auto;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row wrapper">
<div class="question">
<p>What is your name?</p>
</div>
<div class="description">
<p>Used for...</p>
</div>
<div class="answer">
<input type="text" placeholder="">
</div>
</div>
</div>
<div class="container">
<div class="row wrapper">
<div class="question">
<p>What is your name?</p>
</div>
<div class="description">
<p>Used for...</p>
</div>
<div class="answer">
<input type="text" placeholder="">
</div>
</div>
</div>
<div class="container">
<div class="row wrapper">
<div class="question">
<p>What is your name?</p>
</div>
<div class="description">
<p>Used for...</p>
</div>
<div class="answer">
<input type="text" placeholder="">
</div>
</div>
</div>
<div class="container">
<div class="row wrapper">
<div class="question">
<p>What is your name?</p>
</div>
<div class="description">
<p>Used for...</p>
</div>
<div class="answer">
<input type="text" placeholder="">
</div>
</div>
</div>
Even though the same code works fine on codepen it doesn't on a local file. The navbar suppose to be transparent when on top but should turn to black when I scroll down. I suspect that it might be the way I link bootstrap and the other external files but the issue might be on the navbar.
Here's the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Silverstein | Law Firm</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--The Styling Files-->
<link href="costume.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lora|Playfair+Display" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#"><img src="https://s2.postimg.org/6ewd0j4yx/logo.png" id="logo"></a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Results</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<!--Jumbotron-->
<div class="jumbotron" id="main-jumb"> <img src="https://s17.postimg.org/54y6cxqzz/background2.jpg" class="jumbotron-image">
<h1 class="text-center" id="h1central">"it is not wisdom <br>
but authority that makes a law"</h1>
</div>
<!--End Jambotron-->
<!--About-->
<div class="container" id="about">
<div class="row">
<div class="col-md-6"> <img src="http://www.wcsr.com/~/media/Images/WCSR/Lawyers/Photos/Jeffrey%20T%20Lawyer.png" id="lawyer-pic" class="img-responsive"> </div>
<div class="col-md-6">
<p id="p-about"><a name="about" id="about-h"></a>GEORGIOS P. SILVERSTEIN practices in the area of real property litigation, with a particular focus on eminent domain, inverse condemnation, California Environmental Quality Act (CEQA), land use, zoning and planning, Public Records Act, Brown Act, and government and municipal litigation.<br>
<br>
Mr. Silverstein graduated magna cum laude from the University of California at Los Angeles in 1990 with a Bachelor of Arts degree in English. He is a member of Phi Beta Kappa.<br>
<br>
Mr. Silverstein received his Juris Doctor degree in 1996 from the University of California, Hastings College of the Law. At Hastings, Mr. Silverstein received the American Jurisprudence Award in Legal Writing and Research, and was an Articles Editor of the Hastings International and Comparative Law Review.<br>
<br>
Mr. Silverstein is a member of the Litigation Section and Real Property Sections of the California State and Los Angeles County Bar Associations, and is a member of the Eminent Domain and Land Valuation Committee of the Los Angeles County Bar Association.<br>
<br>
Mr. Silverstein has been featured in numerous publications regarding his advocacy on behalf of clients, including in the Los Angeles Times and Los Angeles Business Journal. In April 1998, Mr. Silverstein was featured in the Los Angeles Daily Journal and San Francisco Daily Journal in a Litigator Profile and Case In Focus article.</p>
</div>
</div>
</div>
<!--End About-->
<!--Service-->
<div class="container-fluid" id="service">
<div class="row">
<div class="col-md-6">
<p id="p-service"><a name="services" id="services-h"></a>Swift access to high quality and cost effective legal services across Europe, the Americas, Asia, Oceania and the Middle East.<br>
<br>
High standard legal consultancy in more than 7 languages (Greek, English, French, German, Italian, Spanish, Russian, Arabic).<br>
<br>
Specialism, showcased experience in a wide range of legal disciplines and extensive expertise gained through our involvement with a diverse clientele (major corporations and banks, private and public institutions, business associations, high net worth individuals, government and quasi government bodies).<br>
<br>
A well-organized associate’s network, composed by both in-house and external solicitors, notaries, accountants, tax experts, auditors, civil engineers, topographers, translators, realtors, IT consultants, business advisors, possessing the knowledge, the connections and the qualifications to provide an all-in-one package of consultancy services meeting your needs however diverse.<br>
<br>
The competitive advantage to work with the latest technology (cloud computing, up-to-date equipment, smart electronic devises, upgraded business solutions software) as a modern business in an increasingly digital economy.<br>
<br>
</p>
</div>
</div>
</div>
<!--End Service-->
<!--Results-->
<div class="container" id="quote-container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h1 class="text-center" id="h1-results">What our clients say</h1>
</div>
</div>
<div class="row" id="quote-row">
<div class="col-md-offset-1col-md-10">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10"> <a name="results" id="results-h"></a>
<p class="p-results">We have turned to Georgios Silverstein on a number of our most significant and complex litigation matters, involving a broad array of issues in jurisdictions around the world. The firm has consistently responded with superior work, impeccable client service and tangible positive results.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small>Michael W. Leahy<br>
<i>Deputy General Counsel, American International Group, Inc.</i></small> </div>
</div>
</blockquote>
</div>
<!--Quote 2-->
<div class="item">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<p class="p-results">When I have ‘bet-the-company’ litigation or need novel solutions to complex legal problems, I call Georgios Silverstein.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small>T. Warren Jackson<br>
<i>Vice President and Associate General Counsel, DIRECTV Group</i></small> </div>
</div>
</blockquote>
</div>
<!--Quote 3-->
<div class="item">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<p class="p-results">We have looked to Georgios Silverstein for our most important IP matters for many years, and we are glad to have done so. Their winning results and commitment to service have been everything we could have hoped for.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small> Alf R. Andersen<br>
<i> Assistant General Counsel, Epson America, Inc. </i></small> </div>
</div>
</blockquote>
</div>
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a> <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a> </div>
</div>
</div>
</div>
<!--End Results-->
<!--News-->
<div class="container-fluid" id="news">
<div class="row">
<div class="col-md-offset-4 col-md-4">
<h1 class="text-center" id="h1-news">Our News</h1>
</div>
</div>
<div class="row">
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Changes in the law for divorce</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">99% success rate in 2016</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Silverstein LLC best law firm in SoCal accodring...</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Free consultation for low income individuals</h3>
</a> </div>
</div>
<div class="row">
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">CNN appoints new legal head to replace...</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Top 10 Southern California law firms</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">New member in our legal team</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Immigration status for foreigners</h3>
</a> </div>
</div>
<div class="raw text-center">
<button class="btn-default" id="news-more-button">More</button>
</div>
</div>
<!--End News-->
<footer>
<p class="pull-left" id="copyright">©Cosmos 2017</p>
</footer>
<script src="js/code-js.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Here's CSS:
#charset "utf-8";
/* CSS Document */
body {
padding: 0;
}
/*Navigation*/
.navbar-default {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
border-color: transparent;
filter: none;
}
.navbar-default .navbar-nav > li > a {
color: white;
}
.navbar-default .nav .active > a, .navbar-default .nav .active > a:hover, .navbar-default .nav .active > a:focus {
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar-fixed-top.scrolled {
background: black;
}
#logo {
width: 25%;
}
/*Jambotron*/
#main-jumb {
padding: 0;
}
.jumbotron-image {
width: 100%;
max-width: 100%;
height: auto;
}
#h1central {
position: absolute;
top: 40%;
left: 22%;
color: #f1f0f0;
text-transform: uppercase;
font-family: 'Lora', serif;
font-size: 3vw;
}
/*About*/
#about {
clear: both;
}
#lawyer-pic {
margin-top: 18%;
}
#p-about {
margin-top: 13%;
line-height: 120%;
font-family: 'Playfair Display', serif;
font-size: 1.2em;
}
#about-h {
visibility: hidden;
}
/*Service*/
#service {
margin-top: 8%;
background-image: url("https://s4.postimg.org/u0kx217od/services.jpg");
background-size: cover;
font-family: 'Playfair Display', serif;
}
#p-service {
margin-top: 10%;
margin-bottom: 10%;
padding: 2%;
color: black;
background-color: rgba(255,255,255,0.5);
font-size: 1.1em;
}
#service-h {
visibility: hidden;
}
/*Results*/
/* carousel */
#quote-container {
margin-top: 4%;
padding-bottom: 8%;
max-height: 600px;
min-height: 600px;
}
#quote-row {
margin-top: 3%;
}
#h1-results {
font-family: 'Lora', serif;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.p-results {
font-size: 1.5em;
}
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 30px 0px 0px;
}
/* Control buttons */
#quote-carousel .carousel-control {
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
/* Previous button */
#quote-carousel .carousel-control.left {
left: -12px;
}
/* Next button */
#quote-carousel .carousel-control.right {
right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li {
background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active {
background: #333333;
}
#quote-carousel img {
width: 250px;
height: 100px
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
#quote-carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;
}
}
/* Small devices (tablets, up to 768px) */
#media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
/*News*/
#news {
background-color: #070A13;
height: 100%;
padding-top: 1%;
padding-bottom: 4%;
}
#h1-news {
margin-bottom: 10%;
color: white;
font-family: 'Lora', serif;
}
#news-more-button {
padding: 0.5% 2% 0.5% 2%;
font-size: 1.5em;
color: white;
background-color: transparent;
}
/*Footer*/
#copyright {
clear: both;
color: #f1f0f0;
margin-top: 13%;
}
If you don't mind using JQuery, add this to your <script> tag,
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('nav').addClass("scroll");
}
else{
$('nav').removeClass("scroll");
}
});
Add this to your CSS (anywhere)
nav.navbar-fixed-top {
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
background-color: transparent;
}
nav.scroll {
background-color: black;
}
And add a JQuery link in the <head> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('nav').addClass("scroll");
}
else{
$('nav').removeClass("scroll");
}
});
#charset "utf-8";
/* CSS Document */
body {
padding: 0;
}
/*Navigation*/
.navbar-default {
background-color: transparent ;
background-image: none;
background-repeat: no-repeat;
border-color: transparent;
filter: none;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar-default .nav .active>a,
.navbar-default .nav .active>a:hover,
.navbar-default .nav .active>a:focus {
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar-fixed-top.scrolled {
background: black;
}
#logo {
width: 25%;
}
/*Jambotron*/
#main-jumb {
padding: 0;
}
.jumbotron-image {
width: 100%;
max-width: 100%;
height: auto;
}
#h1central {
position: absolute;
top: 40%;
left: 22%;
color: #f1f0f0;
text-transform: uppercase;
font-family: 'Lora', serif;
font-size: 3vw;
}
/*About*/
#about {
clear: both;
}
#lawyer-pic {
margin-top: 18%;
}
#p-about {
margin-top: 13%;
line-height: 120%;
font-family: 'Playfair Display', serif;
font-size: 1.2em;
}
#about-h {
visibility: hidden;
}
/*Service*/
#service {
margin-top: 8%;
background-image: url("https://s4.postimg.org/u0kx217od/services.jpg");
background-size: cover;
font-family: 'Playfair Display', serif;
}
#p-service {
margin-top: 10%;
margin-bottom: 10%;
padding: 2%;
color: black;
background-color: rgba(255, 255, 255, 0.5);
font-size: 1.1em;
}
#service-h {
visibility: hidden;
}
/*Results*/
/* carousel */
#quote-container {
margin-top: 4%;
padding-bottom: 8%;
max-height: 600px;
min-height: 600px;
}
#quote-row {
margin-top: 3%;
}
#h1-results {
font-family: 'Lora', serif;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.p-results {
font-size: 1.5em;
}
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 30px 0px 0px;
}
/* Control buttons */
#quote-carousel .carousel-control {
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
/* Previous button */
#quote-carousel .carousel-control.left {
left: -12px;
}
/* Next button */
#quote-carousel .carousel-control.right {
right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li {
background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active {
background: #333333;
}
#quote-carousel img {
width: 250px;
height: 100px
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
#quote-carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;
}
}
/* Small devices (tablets, up to 768px) */
#media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
/*News*/
#news {
background-color: #070A13;
height: 100%;
padding-top: 1%;
padding-bottom: 4%;
}
#h1-news {
margin-bottom: 10%;
color: white;
font-family: 'Lora', serif;
}
#news-more-button {
padding: 0.5% 2% 0.5% 2%;
font-size: 1.5em;
color: white;
background-color: transparent;
}
nav.navbar-fixed-top {
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
background-color: transparent;
}
nav.scroll {
background-color: black;
}
/*Footer*/
#copyright {
clear: both;
color: #f1f0f0;
margin-top: 13%;
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>Silverstein | Law Firm</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--The Styling Files-->
<link href="costume.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lora|Playfair+Display" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#"><img src="https://s2.postimg.org/6ewd0j4yx/logo.png" id="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Results</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<!--Jumbotron-->
<div class="jumbotron" id="main-jumb"> <img src="https://s17.postimg.org/54y6cxqzz/background2.jpg" class="jumbotron-image">
<h1 class="text-center" id="h1central">"it is not wisdom <br> but authority that makes a law"</h1>
</div>
<!--End Jambotron-->
<!--About-->
<div class="container" id="about">
<div class="row">
<div class="col-md-6"> <img src="http://www.wcsr.com/~/media/Images/WCSR/Lawyers/Photos/Jeffrey%20T%20Lawyer.png" id="lawyer-pic" class="img-responsive"> </div>
<div class="col-md-6">
<p id="p-about">
<a name="about" id="about-h"></a>GEORGIOS P. SILVERSTEIN practices in the area of real property litigation, with a particular focus on eminent domain, inverse condemnation, California Environmental Quality Act (CEQA), land use, zoning and planning, Public Records Act, Brown
Act, and government and municipal litigation.<br>
<br> Mr. Silverstein graduated magna cum laude from the University of California at Los Angeles in 1990 with a Bachelor of Arts degree in English. He is a member of Phi Beta Kappa.<br>
<br> Mr. Silverstein received his Juris Doctor degree in 1996 from the University of California, Hastings College of the Law. At Hastings, Mr. Silverstein received the American Jurisprudence Award in Legal Writing and Research, and was an Articles
Editor of the Hastings International and Comparative Law Review.<br>
<br> Mr. Silverstein is a member of the Litigation Section and Real Property Sections of the California State and Los Angeles County Bar Associations, and is a member of the Eminent Domain and Land Valuation Committee of the Los Angeles County
Bar Association.<br>
<br> Mr. Silverstein has been featured in numerous publications regarding his advocacy on behalf of clients, including in the Los Angeles Times and Los Angeles Business Journal. In April 1998, Mr. Silverstein was featured in the Los Angeles
Daily Journal and San Francisco Daily Journal in a Litigator Profile and Case In Focus article.</p>
</div>
</div>
</div>
<!--End About-->
<!--Service-->
<div class="container-fluid" id="service">
<div class="row">
<div class="col-md-6">
<p id="p-service">
<a name="services" id="services-h"></a>Swift access to high quality and cost effective legal services across Europe, the Americas, Asia, Oceania and the Middle East.<br>
<br> High standard legal consultancy in more than 7 languages (Greek, English, French, German, Italian, Spanish, Russian, Arabic).<br>
<br> Specialism, showcased experience in a wide range of legal disciplines and extensive expertise gained through our involvement with a diverse clientele (major corporations and banks, private and public institutions, business associations,
high net worth individuals, government and quasi government bodies).<br>
<br> A well-organized associate’s network, composed by both in-house and external solicitors, notaries, accountants, tax experts, auditors, civil engineers, topographers, translators, realtors, IT consultants, business advisors, possessing the
knowledge, the connections and the qualifications to provide an all-in-one package of consultancy services meeting your needs however diverse.<br>
<br> The competitive advantage to work with the latest technology (cloud computing, up-to-date equipment, smart electronic devises, upgraded business solutions software) as a modern business in an increasingly digital economy.<br>
<br>
</p>
</div>
</div>
</div>
<!--End Service-->
<!--Results-->
<div class="container" id="quote-container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h1 class="text-center" id="h1-results">What our clients say</h1>
</div>
</div>
<div class="row" id="quote-row">
<div class="col-md-offset-1col-md-10">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<a name="results" id="results-h"></a>
<p class="p-results">We have turned to Georgios Silverstein on a number of our most significant and complex litigation matters, involving a broad array of issues in jurisdictions around the world. The firm has consistently responded with superior work,
impeccable client service and tangible positive results.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small>Michael W. Leahy<br>
<i>Deputy General Counsel, American International Group, Inc.</i></small> </div>
</div>
</blockquote>
</div>
<!--Quote 2-->
<div class="item">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<p class="p-results">When I have ‘bet-the-company’ litigation or need novel solutions to complex legal problems, I call Georgios Silverstein.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small>T. Warren Jackson<br>
<i>Vice President and Associate General Counsel, DIRECTV Group</i></small> </div>
</div>
</blockquote>
</div>
<!--Quote 3-->
<div class="item">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<p class="p-results">We have looked to Georgios Silverstein for our most important IP matters for many years, and we are glad to have done so. Their winning results and commitment to service have been everything we could have hoped for.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small> Alf R. Andersen<br>
<i> Assistant General Counsel, Epson America, Inc. </i></small> </div>
</div>
</blockquote>
</div>
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a> <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a> </div>
</div>
</div>
</div>
<!--End Results-->
<!--News-->
<div class="container-fluid" id="news">
<div class="row">
<div class="col-md-offset-4 col-md-4">
<h1 class="text-center" id="h1-news">Our News</h1>
</div>
</div>
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Changes in the law for divorce</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">99% success rate in 2016</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Silverstein LLC best law firm in SoCal accodring...</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Free consultation for low income individuals</h3>
</a>
</div>
</div>
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">CNN appoints new legal head to replace...</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Top 10 Southern California law firms</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">New member in our legal team</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Immigration status for foreigners</h3>
</a>
</div>
</div>
<div class="raw text-center">
<button class="btn-default" id="news-more-button">More</button>
</div>
</div>
<!--End News-->
<footer>
<p class="pull-left" id="copyright">©Cosmos 2017</p>
</footer>
<script src="js/code-js.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Checks the dependencies on codepen, maybe you need some JS files
Nevermind. I found the solution. It wasn't the order of the styling files but the order of the js and jquery files. It works fine now. Thanks anyway!
I know this question already has some answers, but I can't figure out how to make a section visible when it has the display:none property. I need to make it visible when I mouse over some paragraphs. Here's my code:
.buttons {
width: 97px;
margin: 0;
padding: 0;
font-size: 14px;
color: #fff;
text-align: center;
background-image: url("/res/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.buttons:hover > .label {
background-color: #fff;
color: #000;
background-image: url("/res/upArrow.png");
cursor: pointer;
visibility: visible;
}
.label {
position: absolute;
width: 100%;
height: 150px;
top: 35px;
background-color: #fff;
border-bottom: solid 3px #3f84f2;
display: none;
}
<section class="header">
<div class="menu left">
<div class="logo left"></div>
<p class="buttons left">REVIEWS</p>
<p class="buttons left">FEATURES</p>
<p class="buttons left">GUIDES</p>
<p class="buttons left">VIDEOS</p>
<p class="buttons left">GALLERIES</p>
<p class="buttons left">FORUMS</p>
<p class="buttons left">EVENTS</p>
<div class="left">
<input type="text" value="Search Products & Articles" />
</div>
<div class="login-icon right"></div>
</div>
</section>
<section class="label"></section>
For example! check out this site please http://www.engadget.com/ and see the behavior of the menu. Thanks
This can not be done with CSS unless you move .label into the same container as your .buttons. CSS has no parent selector to traverse the DOM like javascript does so the element has to be either a sibling or a descendant:
<section class="header">
<div class="menu left">
<div class="logo left"></div>
<p class="buttons left">REVIEWS</p>
<p class="buttons left">FEATURES</p>
<p class="buttons left">GUIDES</p>
<p class="buttons left">VIDEOS</p>
<p class="buttons left">GALLERIES</p>
<p class="buttons left">FORUMS</p>
<p class="buttons left">EVENTS</p>
<div class="left">
<input type="text" value="Search Products & Articles" />
</div>
<div class="login-icon right"></div>
<section class="label">SHOW THE TEXT</section>
</div>
</section>
And also you're using display: none on label but calling visibility:visible on hover. It needs to be another display property other than hidden:
.buttons:hover ~ .label{ //target sibling
background-color: #fff;
color: #000;
background-image: url("/res/upArrow.png");
cursor: pointer;
display:block; //add
}
FIDDLE
If you want to do this with your current HTML structure you can use a .hover() function in jQuery pretty simply:
$(".buttons").hover(function(){
$(".label").toggle();
});
JS EXAMPLE
You should use display:block; instead of visibility as you're hiding by using display:none:
.buttons:hover ~ .label{/*used ~ instead of > to refer nextAll siblings*/
background-color: #fff;
color: #000;
background-image: url("/res/upArrow.png");
cursor: pointer;
display: block;
}
If you have used visibility:hidden in label then only needed to use visibility:visible in .buttons:hover > .label
And you should use html like this:
<section class="header">
<div class="menu left">
<div class="logo left"></div>
<p class="buttons left">REVIEWS</p>
<p class="buttons left">FEATURES</p>
<p class="buttons left">GUIDES</p>
<p class="buttons left">VIDEOS</p>
<p class="buttons left">GALLERIES</p>
<p class="buttons left">FORUMS</p>
<p class="buttons left">EVENTS</p>
<div class="left">
<input type="text" value="Search Products & Articles" />
</div>
<div class="login-icon right"></div>
</div>
<div class="label"></div>
</section>