I Currently am designing a login page in mvc and I want to seperate certain elements so they can be styled correctly. However when I create div's inside other divs they do not stick to the outer div's height and therefore move all around the page. I will give you a sample with my code.
In my Layout.cshtml page I've got
<div class="login-box-outer">
<div class="container">
<div class="login-box">
<div class="login-logo">
<a href="example" </b> Example</a>
</div>
#RenderBody()
</div>
</div>
</div>
In my register page I have the following
.form-control{
height: 35px;
}
.login-logo{
display: none;
}
.login-box, .register-box {
width: 500px;
margin: 2% auto;
}
.text-danger {
color: #a94442;
}
.login-page, .register-page {
background: url('https://example.jpg');
background-position: center;
background-size: cover;
}
##media(max-width: 400px)
{
.login-box, .register-box {
width: 300px;
margin: 4% auto;
}
}
.intl-tel-input{
display: block !important;
}
.join-section__shadow {
left:10%;
bottom:35%;
position: absolute;
padding: 96px 0 48px;
}
.join-content-layout {
background-color: transparent;
padding: 0;
max-width: 1110px;
margin: 0 auto;
position: relative;
color:white;
}
.join-xlarge {
font-size: 38px;
line-height: 44px;
font-weight: 800;
text-shadow: 0 0 3px rgba(0,0,0,.3);
}
.join-medium {
font-size: 24px;
margin-top: 10px;
font-weight: 500;
text-shadow: 0 0 1px rgba(0,0,0,.5);
}
.content-frame.purple2-bg {
background: #fff;
}
.container-fluid.support-block {
padding-top: 30px;
padding-bottom: 30px;
}
.support-block a {
text-decoration: none;
}
</style>
still in the register page here is my html
<div class="container-fluid support-block">
<div class="join-section__shadow">
<div class="join-content-layout">
<div class="col-md-12 col-sm-12">
<h1 class="join-xlarge join-headline join-h1">
Example
</h1>
<h3 class="join-medium join-h3">
Example
</h3>
</div>
</div>
</div>
<div class="col-xs-10 col-xs-push-10 noPadding" style="bottom:100px;">
<form asp-controller="Account" asp-action="Register" asp-route-returnurl="#ViewBag.ReturnUrl" method="post" role="form">
#Html.AntiForgeryToken()
<div class="box box-primary col-xs-12 boxShadow" style="border:none;margin-bottom:10px;">
<div class="form-group has-feedback col-xs-12 noPadding">
<label>Name</label>
<input asp-for="#Model.FullName" value="#Model.FullName" class="form-control" />
<span asp-validation-for="#Model.FullName" class="text-danger"></span>
</div>
</form>
</div>
</div>
<div class="container-fluid">
<div class="content-frame purple2-bg">
<div class="container-fluid support-block">
<div class="row icon-row">
<div class="col-md-4">
<i class="fa fa-tag" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
<div class="col-md-4">
<i class="fa fa-thumbs-up" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
<div class="col-md-4">
<i class="fa fa-money" style="font-size:155px;" aria-hidden="true"></i>
<div class="text-holder">
<strong class="name">Example</strong><br />
Example
</div>
</div>
</div>
</div>
</div>
</div>
However, under the form I want a complete new section but the content from the form and everything else seems to just float about on the page! Anybody know why this is happening?
Here is how it looks in the browser
This container should be taking up the full width of the screen but it's just floating around. Any idea as to why this is happening?
I'm new to CSS and HTML, so I got stuck on a very stupid step. The thing is that fa-list-ul icon is wrong positioned. Without text-align:center it positions fine. Any way to fix it? Thanks for spending your time with my problem.
Here's the JSFiddle
And here is my code :
.player{padding:.75rem 1rem;margin-bottom:1rem;line-height:36px}
.player_play{font-size:36px;vertical-align:middle}
.radio_name{vertical-align:middle}
.radio_icon{padding-right:5px;vertical-align:middle}
.radio_select{font-size:20px;vertical-align:middle}
<nav class="player">
<div class="container">
<div class="float-left">
<i class="fa fa-play-circle player_play action"></i>
</div>
<div class="radio_volume">
<i class="fa fa-volume-down"></i>
<i class="fa fa-music radio_icon accent_color"></i><span class="radio_name"> Anison</span>
</div>
<div class="float-right">
<i class="fa fa-list-ul radio_select action"></i>
</div>
</div>
</nav>
Using display: flex will make every element inside that container have the same horizontal size so this should solve your problem:
.container {
display: flex;
}
.float-left {
flex: 1;
}
.radio_volume {
text-align: center;
flex: 1;
}
.float-right {
flex: 1;
}
.float-right i {
float: right;
margin-top: 10px;
}
also here's the jsfiddle: https://jsfiddle.net/fqkvv8es/3/
You can make use of Bootstrap's classes, which results in less code than what the chosen answer uses:
JSFiddle
HTML
<nav class="player">
<div class="container">
<div class="row justify-content-between align-items-center">
<i class="fa fa-play-circle player_play action"></i>
<div class="radio_volume">
<i class="fa fa-volume-down"></i>
<i class="fa fa-music radio_icon accent_color"></i><span class="radio_name"> Station</span>
</div>
<i class="fa fa-list-ul radio_select action"></i>
</div>
</div>
</nav>
CSS
.player {
padding: .75rem 1rem;
margin-bottom: 1rem;
line-height: 36px
}
.player_play {
font-size: 36px;
}
.radio_icon {
padding-right: 5px;
}
.radio_select {
font-size: 20px;
}
JSFiddle
Here is what my webpage looks like:
As I highlighted in the picture, I'm trying to move the balance element to the right side.
I am trying to use the display:inline-block tag to do this.
Here is my CSS and HTML... what am I doing wrong?
CSS:
/* Game box */
.gamebox{
height: auto;
margin: 20px;
padding: 20px;
width: 50%;
font-family: "smooth";
background-color: white;
color: black;
box-shadow: 4px 4px lightgray;
display:inline-block;
}
/* Balance box */
.balance{
height: auto;
margin: 20px;
padding: 20px;
width: 50%;
font-family: "smooth";
background-color: white;
color: black;
box-shadow: 4px 4px lightgray;
display:inline-block;
}
HTML:
<body>
<div class="noselection">
<ul class="topnav">
<li><a class="active" href="#home"><i class="fa fa-rocket" aria-hidden="true"></i> Play</a></li>
<li><i class="fa fa-btc" aria-hidden="true"></i> Deposit</li>
<li><i class="fa fa-btc" aria-hidden="true"></i> Withdraw</li>
<li><i class="fa fa-university" aria-hidden="true"></i>Faucet</li>
<li><i class="fa fa-life-ring" aria-hidden="true"></i>Help & Support</li>
<?php echo $accountButton; ?>
<li class='right' id="top-balance"><a href=''></a></li>
</ul>
<div class="gamebox">
<h1><i class="fa fa-btc" aria-hidden="true"></i>itcoin dice game</h1>
<div class="error" id="error">You don't have anymore bitcoins left. Why not deposit some more?</div>
<form id="index">
Bet
<br>
<span>
<input id="userbet" onkeyup="checkBet()" value="100" type="text" name="bet" autocomplete="off">
<span id="beterror" class="errortext">That bet is not a valid bet.</span>
<span id="x2" class="timestwo" onclick="doubleBet()">x2</span>
<span id="/2" class="dividetwo" onclick="divideBet()">/2</span>
</span>
<br>
<span>
Chance<br>
<input id ="userchance" onkeydown="checkChance()" value="50" type="text" name="chance" autocomplete="off">
<span id="chanceerror" class="errortext">That is not a valid chance.</span>
</span>
<br>
<h3 id="payout">Payout: Loading...</h3>
<script>var username = <?php echo json_encode($_SESSION['username']); ?>;</script>
<script>var hash = <?php echo json_encode($_SESSION['hash']); ?>;</script>
<button type="button" id="dicebutton" onclick="prepareRoll(username, hash);" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button>
</form>
<button type="button" id="autobet" onclick="setAutoBet(true)"><i class="fa fa-rocket" aria-hidden="true"></i> Autobet</button>
<div class="autobet-mode" id="autobet-mode">
<h3 id="auto-bet-start-text">Please set your auto bet settings, then click 'Start rolling'!".</h3>
<button type="button" id="start-autobet" onclick="startAutoBet()">Start rolling!</button>
</div>
</div>
<div class="balance">
<h3 id="balance">Balance: Loading...</h3>
</div>
</div>
<?php echo $script; ?>
</body>
UPDATE:
Reducing the .balance width to 40% fixed the issue, but how can I now force it up?
Try this code
add box-sizing: border-box; property to both the classes.
CSS
.gamebox, .balance{
box-sizing: border-box;
}
hope this helps..
you are looking for below structure,
what happens here is when you apply fixed width to div and them apply padding and margin so your element width gets increased
so better you create another child container and assign padding margin over there
.gamebox, .balance{
width: 50%;
float: left;
height: 100px;
}
.gamebox-inner, .balance-inner{
border: 1px solid red;
padding: 10px;
margin: 10px;
background-color: #ddd;
}
<div class="gamebox">
<div class="gamebox-inner">
a
</div>
</div>
<div class="balance">
<div class="balance-inner">
b
</div>
</div>
You can try flexbox as follows.
<div id="container">
<div class ="first">first</div>
<div class="second">second</div>
</div>
#container {
width: 200px;
height: 300px;enter code here
border: 1px solid black;
backgroud-color:red;
display:flex;
}
.first {
background-color:blue;
width:50px;
height:50px;
flex:1;
}
.second {
background-color:green;
width:50px;
height:50px;
flex:2;
}
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'm a begginer coder and i'm learning to use bootstrap grid. Although, i didn't quite understand how the container margins work.
I wrote this piece of coding for a website footer and tried using bootstrap grid, but i wanted the social icons to be about 20px to the right and i can't get it. Inspecting the element at google chrome i can see there is a margin right but i can't seem to customize it and make it smaller.
take a look - this is my footer's html code:
<footer>
<div class="row container">
<div class="logo-rodape col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class="r-content col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class="r-social col-md-5">
<i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i>
<i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i>
</div>
</div>
</footer>
Now, this is my CSS code:
footer{
background: url(../img/rodape-background.png);
clear: both;
padding: 50px 0;
}
footer .container{
position: relative;
margin-left: 80px;
box-sizing: border-box;
margin-top: 50px;
}
.logo-rodape {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
display: inline-block;
}
.r-content {
padding: 0;
box-sizing: border-box;
display: inline-block;
text-align: left;
margin-left: 30px;
margin-top: 20px;
}
.slogan-title {
font-family: "avenir next condensed";
font-size: 0.3em;
font-size: calc(0.3em + 1vw);
#include screen-above(800px) {
font-size: 0.4em;
}
font-weight: 600;
letter-spacing: 1.5px;
margin-bottom: -2px;
color: #fff;
}
.slogan-sub {
font-family: 'Lato', sans-serif;
font-size: 0.2em;
font-size: calc(0.2em + 1vw);
#include screen-above(800px) {
font-size: 0.3em;
}
font-weight: 300;
letter-spacing: 1px;
color: #fff;
}
.r-social {
text-align: right;
box-sizing: border-box;
display: inline-block;
margin-top: 40px;
margin-left: 60px;
}
.fa-facebook {
padding-right: 20px;
}
a i.fa:hover {
color: #57cdf7; !important;
}
I'll be really glad with any suggestions, I tried out everything I know so far and couldn't get it right.
Thanks!
I'm assuming that your question means you want the social icons to sit on the FAR right of the screen, not necessarily in the confines of the grid that Bootstrap sets.
You would be messing with the Bootstrap grid to re-define .container like you did, and there are issues that go along with that (as you saw).
The best bet is to create an entirely separate component that you can move to wherever you want, independent of the Bootstrap grid.
HTML
<div class="social-icons">
<ul>
<li>Social Icon</li>
<li>Another Icon</li>
</ul>
</div>
CSS
.social-icons {
position: fixed;
bottom: -10px;
right: -5px;
}
ul {
list-style: none;
}
.social-icons li {
display: inline;
padding-right: 30px;
padding-bottom: 20px;
width: 100px;
}
CodePen
This in particular glues the social icons to the bottom of the page regardless of scrolling. But it gives you an idea of what to do.
First, you are supposed to wrap the whole content inside the container. Container is pre set class in bootstrap to keep your content in the appropriate place with appropriate width on different size screens.
<div class="container">
<footer>
<div class="row">
<div class="logo-rodape col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class="r-content col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class="r-social col-md-6">
<i class="fa fa-facebook fa-2x" aria-hidden="true" style="color:#fff"></i>
<i class="fa fa-vimeo fa-2x" aria-hidden="true" style="color:#fff"></i>
</div>
</div>
</footer>
</div> <!--end container-->
Also, the cols should equal to 12. col-md-2 + col-md-4 + col-md-6 = col-md-12.
col-md-12 is the full width of the page.
Here is a good read for you: http://getbootstrap.com/css/
And, what you are seeing in the inspector "margin right by social icons" is padding or the width that is pre set on your container in the bootstrap css.
First, Use row and container Class Separately.
Second, Your cols should equal to 12 as described in bootstrap grid system.
Third, you can also use offsetting columns which increases the left margin. example is given below
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"></script>
</head>
<footer>
<div class="container ">
<div class="row ">
<div class="col-md-2">
<img src="img/logo-principal-white-gota.png" alt="Logo Picada Zero">
</div>
<div class=" col-md-4">
<p class="slogan-title">CLEAN AND PROTECTION</p>
<p class="slogan-sub">Proteção e limpeza para sua família</p>
</div>
<div class=" col-md-3 col-md-offset-3">
<i class="fa fa-home fa-2x" aria-hidden="true" ></i>
<i class="fa fa-vimeo fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
</footer>