I have no idea where from I get this horizontal bar in the bottom. I tried overflow: hidden; but that didn't work. I looked on the internet but most people recommend the same line that I wrote above.
I am not an expert in css, html or bootstrap. I know a little from each one. Somehow I made a mistake in my code.
Please someone tell me what I did wrong in CSS, HTML or Bootstrap.
CSS:
body {
background-color: #EEEEEE;
}
ul, ul li {
margin: 0;
padding: 0;
list-style: none;
}
.top-red-hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border: 4px solid #8C1113;
}
.top-first-menu {
width: 100%;
display: table;
}
.top-first-menu .menu-right {
float: right;
padding: 20px 0 10px 0;
}
.top-second-menu {
background: #000000;
}
.top-second-menu .logo {
display: inline-block;
padding-left: 20px;
}
.top-second-menu .logo h1 {
color: #961915;
margin-bottom: 5px;
line-height: 0.8;
}
.top-second-menu .logo h1 span {
color: #FFFFFF;
}
.top-second-menu .logo p {
color: #FFFFFF;
}
.top-second-menu .top-red-buttons {
display: inline-block;
}
.top-second-menu .top-red-buttons button{
float: right;
margin-right: 10px;
}
.top-second-menu .language-menu {
display: inline-block;
}
.top-second-menu .top-red-buttons,
.top-second-menu .language-menu {
padding-top: 28px;
}
.consulter-form form,
.consulter-form h2{
background-color: #DFE3E4;
}
.consulter-form h2 {
width: 70%;
margin-bottom: 0px;
border: none;
}
.consulter-form form {
margin-top: 0px;
border-top: 1px solid #DFE3E4;
}
.vous-voulez-button {
background-color: #DFE3E4;
}
.trouver-hr {
width:100%;
height:5px;
display:block;
margin-top:50px;
background:#efefef;
border-top:1px solid #CCC;
border-bottom:1px solid #FFF;
}
.text-p, .vous-voulez {
margin-top: 40px;
}
.rubrique-promo {
}
.rubrique {
}
.boxes-details {
background-color: #FFFFFF;
}
.boxes-images {
margin-bottom: 40px;
}
.boxes-images img {
width: 100%;
}
.boxes-images h4 {
text-align: center;
background-color: #8C1211;
color: #FFFFFF;
padding: 10px 0px 10px 0px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
}
.boxes-images .details {
background-color: #D6D6D6;
border-bottom-right-radius:4px;
border-bottom-left-radius:4px;
}
.boxes-images .details-text {
color: #8C1211;
padding-top: 10px !important;
}
.boxes-images .details p {
padding: 0px 10px;
}
.boxes-images .details p:last-child {
padding-bottom: 10px;
}
.boxes-images .details p:nth-child(2) {
border-top: 2px solid #AAAAAA;
border-bottom: 2px solid #E5E0E0;
padding: 7px 10px;
}
.boxes-images .details p span{
float: right;
}
.bottom-hr-black {
margin-top: 100px;
margin-bottom: 0px;
}
footer {
margin-bottom: 50px;
}
.discount {
text-align: center;
background: #D6D6D6;
}
.discount p {
line-height: 1.5;
}
.first-p-bottom {
margin-top: 10px;
}
.bottom-black-hr {
display: block;
width: 100%;
margin-top: 100px;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
border-style: inset;
border: 4px solid #444444;
}
.footer-lists {
background-color: #444444;
color: #FFFFFF;
}
.list-links h4 {
border-bottom: 2px solid #FFFFFF;
text-align: left;
}
.list-links ul li {
border-bottom: 1px solid #FAFBF9;
color: #FAFBF9;
}
.list-links ul li a {
color: #FAFBF9;
text-decoration: none;
}
.copyright {
text-align: center;
margin: 30px 0px 10px 0px;
}
HTML:
<!DOCTYPE>
<html>
<head>
<title>CLICK COOL</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container-fluid">
<div class="top-first-menu">
<div class="btn-group menu-right">
<button type="button" class="btn btn-default active btn-lg">Espace clients</button>
<button type="button" class="btn btn-default active btn-lg">Promotions - Fin de series</button>
<button type="button" class="btn btn-default active btn-lg">Devenir partenaire</button>
</div>
</div><!-- end top-first-menu -->
<div class="top-second-menu container-fluid">
<div class="row">
<div class="logo col-md-5">
<h1>CLICK<span>COOL</span></h1>
<p>Le site ideal pour promouvoir vos activites</p>
</div><!-- end logo -->
<div class="top-red-buttons col-md-6">
<button type="button" class="btn btn-danger">TARIF - SERVICES</button>
<button type="button" class="btn btn-danger">CLICK CORPORATE</button>
<button type="button" class="btn btn-danger">STANDARD SVI</button>
</div><!-- end top-red-buttons -->
<div class="language-menu col-md-1">
<div class="form-group">
<!-- <label for="sel1">Select list:</label> -->
<select class="form-control" id="sel1">
<option>En</option>
<option>Fr</option>
<option>Ch</option>
</select>
</div>
</div><!-- end language-menu -->
</div>
</div><!-- end top-second-menu -->
<hr class="top-red-hr">
</div><!-- end container-fluid -->
</header>
<main class="container-fluid">
<div class="home-top-selects">
<div class="row">
<div class="consulter-form col-sm-6">
<h2>Consulter les petites annonces</h2>
<form>
<div class="row">
<div class="col-sm-8">
<h4>Par mot-cle les petites annonces</h4>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" id="usr" />
</div>
<div class="col-sm-4">
<select class="form-control" id="sel1">
<option>Toutes categories</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<h4>Ou?</h4>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<select class="form-control" id="select-flags">
<option>En</option>
<option>Fr</option>
<option>Ch</option>
</select>
</div>
<div class="col-sm-5">
<select class="form-control" id="another-select">
<option>toutes les villes select</option>
</select>
</div>
<div class="col-sm-4 text-right">
<button class="btn btn-primary btn-block" type="submit">
Lancez Votre Recherche
</button>
</div>
</div>
<h5 class="text-info text-center">
Faite une recherche dans votre perimetre grace a votre geolocalisation.
</h4>
</form>
</div>
<div class="consulter-form col-sm-6">
<h2>Trouver Une Enterprise</h2>
<form>
<div class="row">
<div class="col-sm-6">
<h4>Par mot-cle ou nom d'enterprise</h4>
</div>
<div class="col-sm-3">
<h4>Ou?</h4>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<input type="text" class="form-control" id="usr-2" />
</div>
<div class="col-sm-3">
<select class="form-control" id="another-select-2">
<option>Toutes les villes select</option>
</select>
</div>
<div class="col-sm-3">
<select class="form-control" id="select-flags-2">
<option>En</option>
<option>Fr</option>
<option>Ch</option>
</select>
</div>
</div>
<!-- Place this to fill the blank space -->
<div class="row">
<div class="col-sm-12">
<h4> </h4>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<select class="form-control" id="different-select">
<option>Autres options de recherche</option>
</select>
</div>
<div class="col-sm-offset-3 col-sm-3">
<button class="btn btn-primary btn-block" type="submit">
Chercher
</button>
</div>
</div>
<div class="trouver-hr"></div>
<div class="text-center">
<h3 class="text-info">
Votre enterprise n'est pas referencee?
</h3>
<button class="btn btn-large btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> AJOUTER MON ENTERPRISE
</button>
</div>
</form>
</div>
</div>
</div>
<div class="vous-voulez ">
<div class="row">
<div class="consulter-form col-sm-6">
<h4>Vous voulez vendre votre bien rapidement?</h4>
<button type="button" class="btn btn-success btn-block">Cliquez ici pour une annonce gratuitement!</button>
</div>
<div class="consulter-form col-sm-6">
<h4>Recherche par numero de telephone</h4>
<form>
<div class="row">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" />
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default active">CHERCHER</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="text-p">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-9">
<p>Cliquez sur l'une des icones suivantes pour masquer la recherche</p>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-down" aria-hidden="false"></span></button>
<button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-9">
<p>Aimeriez-vous promouvoir votre actiuvite ou produit? Consultez nos tarifs
</div>
</div>
</div>
</div>
</div>
<div class="text-p">
<div class="row">
<div class="col-sm-1">
<img src="#"><p>PUB</p>
</div>
<div class="col-sm-11">
<div class="row">
<img src="images/Calque-6e.png">
</div>
</div>
</div>
</div>
<div class="text-p">
<div class="row">
<div class="col-sm-5 text-center">
<button type="button" class="btn btn-default active">Toutes les petites announces</button>
</div>
<div class="col-sm-7 text-right">
<p>Petites announces gratuites aujourd'hui avec plus de 10'000 announces</p>
</div>
</div>
</div>
<div class="text-p text-center">
<div class="row">
<div class="col-sm-3">
<button type="button" class="btn btn-default active">Automobilies & Accesories</button>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default active">Immobiliers & Prestige</button>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default active">Emploi & Carrieres</button>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default active">Hotel & Restaurant</button>
</div>
</div>
</div>
<div class="text-p rubrique-promo">
<div class="row">
<div class="col-sm-4 rubrique">
<h3>Rubrique</h3>
<ul>
<li>ANIMAUX & ACCESSOIRES </li>
<li>ART & ANTIQUITES</li>
<li>AUTOMOBILES</li>
<li>BIJOUTERIE</li>
<li>BRICOLAGES & JARDINAGE</li>
<li>COLLECTIONS</li>
<li>EMPLOI</li>
<li>ENFANTS</li>
<li>ENFANTS & BEBE</li>
<li>IMMOBILIER</li>
</ul>
</div>
<div class="col-sm-7">
<img src="images/promo.jpg">
</div>
</div>
</div>
<div class="text-p boxes-details">
<div class="row">
<div class="col-sm-3 boxes-images">
<img src="images/automobile.jpg">
<h4>IMMOBILIER</h4>
<div class="details">
<p class="details-text">Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span>suchy</span><p>
<p>Prix<span>CHF 2'250</span></p>
</div>
</div>
<div class="col-sm-3 boxes-images">
<img src="images/automobile.jpg">
<h4>IMMOBILIER</h4>
<div class="details">
<p class="details-text">Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span>suchy</span><p>
<p>Prix<span>CHF 2'250</span></p>
</div>
</div>
<div class="col-sm-3 boxes-images">
<img src="images/automobile.jpg">
<h4>IMMOBILIER</h4>
<div class="details">
<p class="details-text">Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span>suchy</span><p>
<p>Prix<span>CHF 2'250</span></p>
</div>
</div>
<div class="col-sm-3 boxes-images">
<img src="images/automobile.jpg">
<h4>IMMOBILIER</h4>
<div class="details">
<p class="details-text">Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span>suchy</span><p>
<p>Prix<span>CHF 2'250</span></p>
</div>
</div>
<div class="col-sm-3 boxes-images">
<img src="images/automobile.jpg">
<h4>IMMOBILIER</h4>
<div class="details">
<p class="details-text">Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span>suchy</span><p>
<p>Prix<span>CHF 2'250</span></p>
</div>
</div>
<div class="col-sm-3 boxes-images">
<img src="images/automobile.jpg">
<h4>IMMOBILIER</h4>
<div class="details">
<p class="details-text">Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span>suchy</span><p>
<p>Prix<span>CHF 2'250</span></p>
</div>
</div>
<div class="col-sm-3 boxes-images">
<img src="images/automobile.jpg">
<h4>IMMOBILIER</h4>
<div class="details">
<p class="details-text">Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span>suchy</span><p>
<p>Prix<span>CHF 2'250</span></p>
</div>
</div>
<div class="col-sm-3 boxes-images">
<img src="images/automobile.jpg">
<h4>IMMOBILIER</h4>
<div class="details">
<p class="details-text">Magnifique et spacieux 4,5 pieces: 1mios de loyer</p>
<p>Lieu<span>suchy</span><p>
<p>Prix<span>CHF 2'250</span></p>
</div>
</div>
</div>
</div>
<div class="row">
<div col-sm-12>
<div class="bottom-black-hr">
</div>
</div>
<div class="discount">
<div class="row">
<div class="col-sm-12 footer-p">
<p class="first-p-bottom">Le depot d'annonces, inclus 10 photos et 5 videos.</p>
<p>4 devises proposees: CHF, EURO, USD, GBP / Pour vendre, acheter, fournir vos presentations</p>
</div>
</div>
</div>
</main>
<footer class="footer-lists container-fluid">
<div class="row">
<div class="col-sm-3 list-links">
<h4>A propos</h4>
<ul>
<li>Qui somme nous</li>
<li>Relations investisseurs</li>
<li>Clickcool pour particuliers</li>
<li>Clickcool pour professionnels</li>
</ul>
</div>
<div class="col-sm-3 list-links">
<h4>Utilitaries</h4>
<ul>
<li>FAQ</li>
<li>Partners links</li>
<li>Regles de diffusion</li>
<li>Infos legales et CGU</li>
</ul>
</div>
<div class="col-sm-3 list-links">
<h4>Liens utile</h4>
<ul>
<li>Tarifs</li>
<li>Concept</li>
<li>Publicite</li>
<li>Formulaire de contact</li>
</ul>
</div>
<div class="col-sm-3 list-links">
<img src="images/Calque-52-text.png">
</div>
</div>
<div class="row">
<div class="col-sm-12 copyright">
<p>Copyright © 2015-106. Tous droits reserves</p>
</div>
</div>
</footer>
</body>
</html>
add overflow:hidden to body, it works
body {
overflow-x: hidden;
}
.row classes will have margin-left, margin-right has -15px, so it will cause the scroll bar. You better to wrap .row elements in .container class or you need to wrap .row elememts with another parent element which should have padding of 15px
At first there are some markup errors. See line 100 - opening h5 tag, closing h4 tag. Perhaps there are much more errors. So we don't know is html rendered correctly.
Let's run the snippet and look at its code in console.
We can see that block discount and block without class (with attr col-sm-12) are placed in block row. So adding class col-* to discount seems to be good solution to solve problem with horizontal scrolling.
According bootstrap greed docs, row item must contain col items.
But let's open raw code:
Block discount isn't place in row. It can mean only one - there are errors in documents markup. Look at line 363 - there isn't closing </div> tag. Fix it and run code - it seems all works fine. But lets add class col-sm-12 to the div at 362 line instead attribute. Brilliant! We fix all errors!
Summary.
Line 100: fix closing tag of h5.
Line 362: replace attribute col-sm-12 by class col-sm-12.
Line 363: add closing tag for div.
You can do the following trick:
body {
overflow-x: hidden;
}
But it's a hack.
To go further add col-sm-12 class to <div class="discount">.
If you just change container-fluid to container it will work as well. But it will not span the whole width..
Related
The onhover for the labels in the accordion work in Firefox and IE but not in Chrome. No curser and no color change when using Chrome. Been looking online for hours and can't find any solution. In chrome you can not tell there is a link for the tabs because there is no pointer or color change when you hover over them. Mu first thoughts are positioning, a needed web-kit, or maybe it has something to do with the depreciated tags. This is old code written by someone else that I'm updating. Any help is appreciated. FYI- I took out alot of the unnecessary code because they will only let me put so much in here. The checked input + label works fine and the hover uses basically the same css so I don't understand why it doesn't work in Chrome.
#accordion {margin-top:30px;}
#mainSpec {
margin: 20px 20px 0 0;
}
sectionSpec {
display: none;
margin-right: 20px;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 10px;
border: 1px solid transparent;
}
label:before {
margin-right: 10px;
font-size:18px;
}
input:hover + label {
color: #2f4977;
border-top: 2px solid #2f4977;
cursor: pointer;
}
input:checked + label {
color: #df7c29;
border-top: 2px solid #df7c29;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
display: block;
}
label:before {
margin: 0;
font-size: 18px;
}
}
}
#accordion h4 {color:#df7c29;}
</asp:content>
<div class="container content" id="spectators" style="margin-top:40px;">
<section class="row">
<div class="col-sm-8" style="padding-bottom:80px;">
<h3 class="tickets grounds">Information</h3>
<div id="accordion">
<div id="mainSpec">
<input id="tab1" type="radio" name="tabs" checked />
<label for="tab1" class="fa-bullhorn">Policies</label>
<input id="tab2" type="radio" name="tabs" />
<label for="tab2" class="fa-calendar">Schedule</label>
<input id="tab3" type="radio" name="tabs" />
<label for="tab3" class="fa-bus">Transportation</label>
<input id="tab4" type="radio" name="tabs" />
<label for="tab4" class="golf">
<img src="img/golf.png" alt="" class="golf">Course</label>
<input id="tab5" type="radio" name="tabs" />
<label for="tab5" class="fa-question">FAQs</label>
<sectionspec id="content1">
<div accordian-container>
<h4>Policies</h4>
<div class="col-md-7">
<img src="img/Policies_Image.jpg" alt="" class="policy-images">
</div>
<div class="col-md-5">
<p>
Review policies on prohibited items.
</p>
<div class="btn-group">
<a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="policies.aspx">More ></a>
</div>
</div>
</div>
</sectionspec>
<sectionspec id="content2">
<div accordian-container>
<h4>Schedule</h4>
<div class="col-md-7">
<img src="img/schedule_image.jpg" alt="" class="schedule-images">
</div>
<div class="col-md-5">
<p>Check out the schedule of events </p>
<div class="btn-group">
<a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="schedule.aspx">More ></a>
</div>
</div>
</div>
</sectionspec>
<sectionspec id="content3">
<div accordian-container>
<h4>Transportation</h4>
<div class="col-md-7">
<img src="img/transportation_image.jpg" alt="" class="transportation">
</div>
<div class="col-md-5">
<p><strong>PLEASE NOTE:</strong> Parking locations are still TBD. </p>
<div class="btn-group">
</div>
</div>
</div>
</sectionspec>
<sectionspec id="content4">
<div accordian-container>
<h4>Course</h4>
<div class="col-md-7">
<img src="img/course_image.jpg" alt="" class="golf course" />
</div>
<div class="col-md-5">
<p style="font-weight: bold; color: red">
coming soon!
</p>
<p><span style="font-weight: bold">PAR/YARDAGE:</span>Par: 36--36-72; Yards: 7,259<br />(subject to change)</p>
<p style="font-weight: bold; color: red">View aerial</p>
</div>
</div>
</sectionspec>
<sectionspec id="content5">
<div accordian-container>
<h4>FAQs</h4>
<div class="col-md-7">
<img src="img/faqs_image.jpg" alt="" class="faq">
</div>
<div class="col-md-5">
<p>Frequently Asked Questions. </p>
<div class="btn-group">
<a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="faq.aspx">More ></a>
</div>
</div>
</div>
</sectionspec>
</div>
</div><!--close accordion-->
</div><!--close col-sm-8-->
</section>
</div>
</asp:content>
I think you should change your hover declaration:
Use: input + label:hover
Intead of: input:hover + label
Why? Because (If I'm not misunderstanding) what you want is apply the effect on the label, not in the input.
#accordion {margin-top:30px;}
#mainSpec {
margin: 20px 20px 0 0;
}
sectionSpec {
display: none;
margin-right: 20px;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 10px;
border: 1px solid transparent;
}
label:before {
margin-right: 10px;
font-size:18px;
}
input + label:hover {
color: #2f4977;
border-top: 2px solid #2f4977;
cursor: pointer;
}
input:checked + label {
color: #df7c29;
border-top: 2px solid #df7c29;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
display: block;
}
label:before {
margin: 0;
font-size: 18px;
}
}
}
#accordion h4 {color:#df7c29;}
</style>
</asp:content>
<div class="container content" id="spectators" style="margin-top:40px;">
<section class="row">
<div class="col-sm-8" style="padding-bottom:80px;">
<h3 class="tickets grounds">Information</h3>
<div id="accordion">
<div id="mainSpec">
<input id="tab1" type="radio" name="tabs" checked />
<label for="tab1" class="fa-bullhorn">Policies</label>
<input id="tab2" type="radio" name="tabs" />
<label for="tab2" class="fa-calendar">Schedule</label>
<input id="tab3" type="radio" name="tabs" />
<label for="tab3" class="fa-bus">Transportation</label>
<input id="tab4" type="radio" name="tabs" />
<label for="tab4" class="golf">
<img src="img/golf.png" alt="" class="golf">Course</label>
<input id="tab5" type="radio" name="tabs" />
<label for="tab5" class="fa-question">FAQs</label>
<sectionspec id="content1">
<div accordian-container>
<h4>Policies</h4>
<div class="col-md-7">
<img src="img/Policies_Image.jpg" alt="" class="policy-images">
</div>
<div class="col-md-5">
<p>
Review policies on prohibited items.
</p>
<div class="btn-group">
<a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="policies.aspx">More ></a>
</div>
</div>
</div>
</sectionspec>
<sectionspec id="content2">
<div accordian-container>
<h4>Schedule</h4>
<div class="col-md-7">
<img src="img/schedule_image.jpg" alt="" class="schedule-images">
</div>
<div class="col-md-5">
<p>Check out the schedule of events </p>
<div class="btn-group">
<a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="schedule.aspx">More ></a>
</div>
</div>
</div>
</sectionspec>
<sectionspec id="content3">
<div accordian-container>
<h4>Transportation</h4>
<div class="col-md-7">
<img src="img/transportation_image.jpg" alt="" class="transportation">
</div>
<div class="col-md-5">
<p><strong>PLEASE NOTE:</strong> Parking locations are still TBD. </p>
<div class="btn-group">
</div>
</div>
</div>
</sectionspec>
<sectionspec id="content4">
<div accordian-container>
<h4>Course</h4>
<div class="col-md-7">
<img src="img/course_image.jpg" alt="" class="golf course" />
</div>
<div class="col-md-5">
<p style="font-weight: bold; color: red">
coming soon!
</p>
<p><span style="font-weight: bold">PAR/YARDAGE:</span>Par: 36--36-72; Yards: 7,259<br />(subject to change)</p>
<p style="font-weight: bold; color: red">View aerial</p>
</div>
</div>
</sectionspec>
<sectionspec id="content5">
<div accordian-container>
<h4>FAQs</h4>
<div class="col-md-7">
<img src="img/faqs_image.jpg" alt="" class="faq">
</div>
<div class="col-md-5">
<p>Frequently Asked Questions. </p>
<div class="btn-group">
<a class="btn btn-default btn-md" style="color: #fff; background: #df7c29;" role="button" href="faq.aspx">More ></a>
</div>
</div>
</div>
</sectionspec>
</div>
</div><!--close accordion-->
</div><!--close col-sm-8-->
</section>
</div>
</asp:content>
Let me know if it works.
Thanks
I have a div that is a panel, and I want to apply to the body a black background color, when I do that it left around 100 px white space
I think that happens because in my css I defined
.Stock{
min-height:600px;
height:600px;
}
but I want the div to be that big it matches the perfect size, if I cut this css the size changes, I want to maintain the size and have that white space filled, how can I do that ?
here is the html of the specific div
<div class="panel panel-default Stock">
<div class="panel-heading panel-heading-custom clearfix">
<div>
Controlo de stock
<div class="pull-right">
<img alt="" class="warningImg" height="20" src="../warning.png" width="20">
</div>
<div class="pull-right">
<h4 id="numberWarnings"></h4>
</div>
</div>
</div>
<div class="panel-body ProdutosTodos">
<div class="col-md-6 SeccaoProduto">
<p class="productName"></p>
<p>Quantidade Atual: <span class="quantidadeProduto"></span></p><a class="editar" href="#">editar</a> eliminar
</div>
<div class="col-md-6 SeccaoProduto">
<p class="productName"></p>
<p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
<p id="quantidadeIceTea"></p><a class="editar" href="#">editar</a> eliminar
</div>
<div class="col-md-6 SeccaoProduto">
<p class="productName"></p>
<p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
<p id="quantidadeCroissant"></p><a class="editar" href="#">editar</a> eliminar
</div>
<div class="col-md-6 SeccaoProduto">
<p class="productName"></p>
<p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
<p id="quantidadeKitKat"></p><a class="editar" href="#">editar</a> eliminar
</div>
<div class="col-md-6 SeccaoProduto">
<p class="productName"></p>
<p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
<p id="quantidadeKinderBueno"></p><a class="editar" href="#">editar</a> eliminar
</div>
<div class="col-md-6 SeccaoProduto">
<p class="productName"></p>
<p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
<p id="quantidadeWatter"></p><a class="editar" href="#">editar</a> eliminar
</div>
<div class="col-md-6 SeccaoProduto">
<p class="productName"></p>
<p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
<p id="quantidadeBubbleGums"></p><a class="editar" href="#">editar</a> eliminar
</div>
<div class="col-md-6 SeccaoProduto">
<p class="productName"></p>
<p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
<p id="quantidadeCheaps"></p><a class="editar" href="#">editar</a> eliminar
</div>
</div>
<form action="" class="form-horizontal" id="formularioEdicao" name="formularioEdicao">
<div class="col-md-offset-1">
<span class="glyphicon glyphicon-arrow-left"></span>
</div>
<div class="form-group">
<label class="control-label col-md-offset-1 col-md-2" for="">Produto</label>
<div class="col-md-8">
<input class="form-control" id="EditarNomeProduto" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-offset-1 col-md-2" for="">Quantidade</label>
<div class="col-md-offset-1 col-md-6">
<input class="sliderProducts" type="range">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<button class="btn btn-default" id="GuardarEdicao">Guardar</button>
</div>
</div>
</form>
</div>
The issue you are running into is coming from .panel in panels.less:
.panel {
margin-bottom: 20px; // <-- Your background-color will not fill 100%
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
The image you have shown does not look like 100px. Try setting margin-bottom: 0;.
Use this CSS. It will fix your problem:
.panel {
background: black;
margin-bottom: 0px;
min-height: 600px;
height: 700px;
}
You don't have to make the min-height and the height the same. Try this:
.Stock {
min-height: 600px;
height: 100%;
}
or maybe:
.Stock {
min-height: 600px;
height: 700px;
}
I have this list that have two products as an example. There could be multiple products but just two right now for this question.
.horizontal {
display: inline;
float:left;
}
.product{
display: block;
height: 320px;
border: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
text-align: center;
padding: 10px 5px;
}
.image{
display: block;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
max-height: 180px;
height: 200px;
margin-left: auto;
margin-right: auto;
padding-left:.45cm;
}
<ul class="horizontalul">
<li class="horizontal" style="display: inline;">
<div class="product">
<div class="image">
<img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
</div>
<div class="description">
<h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
</div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details" />
</div>
</div>
</li>
<li class="horizontal" style="display: inline;">
<div class="product">
<div class="image">
<img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
</div>
<div class="description">
<h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
</div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details" />
</div>
</div>
</li>
</ul>
I have set the horizontal class to display as inline but it doesn't seem to work like I would like it to work. I the items to align horizontally. How can I make them align horizontally?
Just Add float:left in your class also use float:right but don't forgot to give next block elements clear:both , try it once
.horizontal {
display: inline;
float:left;
padding:10px 5px;
border:1px solid #dddddd;
margin-right:5px;
}
<ul>
<li class="horizontal" style="display: inline;">
<div class="product">
<div class="image">
<img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
</div>
<div class="description">
<h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
</div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details" />
</div>
</div>
</li>
<li class="horizontal" style="display: inline;">
<div class="product">
<div class="image">
<img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
</div>
<div class="description">
<h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
</div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details" />
</div>
</div>
</li>
</ul>
Here it comes:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
<ul>
<li class="horizontal" style="display: inline;">
<div class="product">
<div class="image">
<img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
</div>
<div class="description">
<h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
</div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details" />
</div>
</div>
</li>
<li class="horizontal" style="display: inline;">
<div class="product">
<div class="image">
<img class="img-responsive" src="http://www.shingpoint.com.pk/Images/Thumbnails/pc-a1-470-59100-080316082835.jpg" />
</div>
<div class="description">
<h4 class="productname">ASUS VivoMini PC - UN65H-M030M</h4>
</div>
<div class="price">
<span>Rs. 37,900</span>
<input type="button" class="btn btn-primary btn-sm" value="Details" />
</div>
</div>
</li>
</ul>
Just add li {float: left;} to your style Or if you want to display RTL use li {float: right;}
I'm using bootstrap classes to arrange my page, and it was going fine until my latest row:
#* row 7: Copy, Excel, CSV, and PDF buttons *#
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-8">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-1">
<label style="text-align: right;">Search:</label>
</div>
<div class="col-md-1">
<input type="text" style="margin-right: 2cm;" name="searchinput">
</div>
<div class="col-md-1">
</div>
</div>
That row is preceded and followed by rows like this:
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
I need the input text to shift to the left, away from the right border, and closer to the "Search" label.
How can I accomplish this?
I also don't know why the row is so tall, making the buttons overly tall - or why the buttons are so tall, making the row tall...
The css used is:
.squishedbutton {
border: none;
margin-left: 0cm;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
UPDATE
This is how it looks now:
...with this html:
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-7">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-1">
<label style="text-align: right; display: inline-block;">Search:</label>
</div>
<div class="col-md-1">
<input type="text" style="margin-right: 2cm;" name="searchinput">
</div>
</div>
...and this css:
.squishedbutton {
margin-left: 0cm;
margin-right: -0.1cm;
padding: 4px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
IOW, it looks more-or-less "okay" but I would like the input text shifted to the left and/or the label shifted to the right so that they appear a little more "cozy"
.squishedbutton {
border: none;
margin-left: 0cm;
padding:0 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
hr{ margin:0;}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-7">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-3 ">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Search</label>
<input type="text" class="" id="exampleInputName2" placeholder="">
</div>
</form>
</div>
<div class="col-md-1">
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
</div>
and if you want label and text to come next to buttons then place them just after buttons.
UPD. There are three rows in the code below:
Original CSS from the answer.
Shift <label> to right.
Place <label> and <input> in the same column.
Does something look as you need?
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#media (min-width: 992px) {
h2 {
margin: 0;
padding: 10px 0 0 0;
}
/* 1. */
.shift-to-right {
padding-right: 0;
text-align: right;
}
/* 2. */
.make-them-closer {
padding-top: 13px;
}
.make-them-closer label {
float: left;
padding-right: 4px;
padding-top: 3px;
}
.make-them-closer div {
overflow: hidden;
}
.make-them-closer input {
width: 100%;
}
}
.squishedbutton {
border: none;
margin-left: 0cm;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12"><hr /></div>
<div class="col-md-1">
<h2>0.</h2>
</div>
<div class="col-md-7">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-1">
<label style="text-align: right; display: inline-block;">Search:</label>
</div>
<div class="col-md-1">
<input type="text" style="margin-right: 2cm;" name="searchinput">
</div>
<div class="col-md-12"><hr /></div>
<div class="col-md-1">
<h2>1.</h2>
</div>
<div class="col-md-7">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-1 shift-to-right">
<label>Search:</label>
</div>
<div class="col-md-1">
<input type="text" name="searchinput">
</div>
<div class="col-md-12"><hr /></div>
<div class="col-md-1">
<h2>2.</h2>
</div>
<div class="col-md-7">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-2 make-them-closer">
<label>Search:</label>
<div><input type="text" name="searchinput"></div>
</div>
<div class="col-md-12"><hr /></div>
</div>
</div>
I tried so hard to make the code like in but with success.
I don't know how to do that green button to have white + gary border in the same time. The have to have a distance between the two backgrounds and I don't have it.
Plus I'm not sure if how I put the code is correct. Someone please give me a hand.
HTML:
.vous-voulez {
background-color: #DFE3E4;
}
.vous-voulez-button {
background-color: #DFE3E4;
margin: 10px;
}
.recherche {
background-color: #DFE3E4;
margin: 10px;
}
.text-p,
.vous-voulez {
margin-top: 40px;
}
<div class="vous-voulez ">
<div class="row">
<div class="vous-voulez-button col-sm-6">
<h4>Vous voulez vendre votre bien rapidement?</h4>
<button type="button" class="btn btn-success btn-block">Cliquez ici pour une annonce gratuitement!</button>
</div>
<div class="recherche col-sm-6">
<h4>Recherche par numero de telephone</h4>
<form>
<div class="row">
<div class="col-sm-9">
<input type="text" class="form-control" id="usr" />
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default active">CHERCHER</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="text-p">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-9">
<p>Cliquez sur l'une des icones suivantes pour masquer la recherche</p>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-down" aria-hidden="false"></span>
</button>
<button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-9">
<p>Aimeriez-vous promouvoir votre actiuvite ou produit? Consultez nos tarifs
</div>
</div>
</div>
</div>
</div>
Please do try this code and this will help you
.btn-success {
color: #fff;
background-color: #023014;
border-color: #fff;
border-width: 3px;
border-radius: 0;
box-shadow: 0px 0px 0 3px #5f5f5f;
}