Im having trouble getting rid of the border at the bottom of my website, www.goodlord.co. It is a single page scroller.
The last image is the problem I need to extend it to the end of the whole website but each time i do that the website its self extends. I would really appreciate any help.
Tom
This is the Style Sheet for the section css.
section{ background: #fff; }
body{ -webkit-font-smoothing: antialiased; #fefefe; }
#main-container{ overflow: hidden; }
input{ -webkit-appearance: none; }
input:focus{ outline: none; }
.nopad{ padding: 0px; }
.offix{ overflow: hidden; }
.pad-normal{ padding-top: 66px; padding-bottom: 34px; }
.pad-large{ padding-top: 60px; padding-bottom: 60px; }
.pad-end{ padding-top: 60px; padding-bottom: 60px; }
.pad-large-top{ padding-top: 99px; }
.pad-large-bottom{ padding-bottom: 99px; }
.pad-top{ padding-top: 66px; }
.pad-bottom{ padding-bottom: 66px; }
.space-top{ margin-top: 22px; }
.space-top-large{ margin-top: 44px; }
::selection {color:#fff;background:#444444;}
::-moz-selection {color:#fff;background:#444444;}
This is the index for the section.
<a id="contact-scroll"></a>
<section id="contact" class="text-divider bg-cover pad-end">
<img alt="Slider Background" class="divider-bg" src="img/estate.jpg" />
<div class="divider-overlay"></div>
<div class="row divider-content">
</div>
<div class="row divider-content">
<div class="medium-8 medium-centered columns">
<form id="contact-form" class="text-center">
<h1 class="text-white">Get in touch</h1>
<input id="form-name" type="text" placeholder="Name" />
<input id="form-email" type="text" placeholder="Email" />
<input id="form-msg" type="text" placeholder="Message" />
<div class="text-right">
<span id="details-error" class="text-white">*Error: Please complete all fields correctly</span>
<span id="form-sent" class="text-white">Thankyou, your enquiry has been sent!</span>
<div class="btn white-btn clear-btn"><h6 class="alt-h text-white">Clear</h6></div>
<div id="form-btn" class="btn white-btn"><h6 class="alt-h text-white">Send</h6></div>
</div>
</form>
</div>
</div>
Having a look, that last white border is actually padding, not border.
the final section with ID '#work' has the '.pad-large' class on it. remove it and the final image should butt up right to the bottom of the page.
You might need to restore the top padding of the item, as .pad-large adds 60px padding to the top and bottom of the item.
Related
This is my HTML:
<div class="row trolibelanja">
<div class="col-md-3">
<img src="http://2.bp.blogspot.com/-WGiyrP7xGOk/VQlHwjgporI/AAAAAAAABHI/zLGXTH0-H2w/s1600/Mie%2BAyam%2B(4).jpg" class="detailfoto">
</div>
<div class="col-md-4">
<p class="detailnama">Mie Ayam Bakso</p>
<p class="detailtoko">Toko Bu Lastri</p>
</div>
<div class="col-md-2">
<p class="detailharga">Rp. 30.000</p>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-btn">
<button class="btnjumlah" type="button">-</button>
</span>
<input type="text" class="form-control jumlah" value="1">
<span class="input-group-btn">
<button class="btnjumlah" type="button">+</button>
</span>
</div>
</div>
<div class="col-md-1">
</div>
</div>
This is my css:
body{
background-color: #661f61 !important;
font-family: 'Saira Extra Condensed', sans-serif !important;
}
.container-fluid.keranjang {
background-color: #e9e9e9;
flex: 1;
}
.container.keranjang {
}
.row.trolibelanja {
background-color: #e1e1e1;
position: relative;
padding-top: 10px;
padding-bottom: 23px;
}
.row.trolibelanja:after{
background-image: -webkit-linear-gradient(135deg, #6e1c64 25%, #e27f31 25%) !important;
position: absolute;
content: " ";
width: 100%;
height: 15px;
bottom: 0;
}
.detailfoto {
width: 100%;
height: 110px;
border: 6px solid white;
}
.detailnama{
font-size: 20px;
font-weight: bold;
}
.detailtoko{
line-height: 20px;
margin: -17px 0px;
}
.detailharga{
font-size: 20px;
font-weight: bold;
text-align: center;
}
.input-group .jumlah {
width: 50%;
text-align: center;
}
.input-group .btnjumlah {
background-color: #e27f31;
color: white;
border: 0;
font-size: 20px;
font-weight: bold;
padding: 0px 10px;
height: 100%;
}
I am trying to put text and form next to photo using bootstrap, as in photo below:
enter image description here
My code result:
enter image description here
Please let me know what am I missing? I tried each combination of display that i know, but they wouldn't work. Thank you
Arrange your columns properly. And you will be good. put image in one column (col-md-3 in this case) and rest of the content in another (col-md-9), then put all rest of the content in a new row. I would suggest that you have a better understanding of the rows and columns from bootstrap website.
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
<div class="row trolibelanja">
<div class="col-md-3">
<img src="http://2.bp.blogspot.com/-WGiyrP7xGOk/VQlHwjgporI/AAAAAAAABHI/zLGXTH0-H2w/s1600/Mie%2BAyam%2B(4).jpg" class="detailfoto">
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<p class="detailnama">Mie Ayam Bakso</p>
<p class="detailtoko">Toko Bu Lastri</p>
</div>
<div class="col-md-2">
<p class="detailharga">Rp. 30.000</p>
</div>
<div class="col-md-2">
<div class="input-group">
<span class="input-group-btn">
<button class="btnjumlah" type="button">-</button>
</span>
<input type="text" class="form-control jumlah" value="1">
<span class="input-group-btn">
<button class="btnjumlah" type="button">+</button>
</span>
</div>
</div>
</div>
</div>
</div>
Add flex-wrap: nowrap; to your .row.trolibelanja like this:
.row.trolibelanja {
background-color: #e1e1e1;
position: relative;
padding-top: 10px;
padding-bottom: 23px;
flex-wrap: nowrap;
}
I made codepen example with your code: https://codepen.io/anon/pen/wPZoXX
i ran your code on bootsnipp and found everything is placed side by side to each other, except for the fact that you did not add img-responsive to the image class. and that the below code is distorting your design.
.row.trolibelanja:after{
background-image: -webkit-linear-gradient(135deg, #6e1c64 25%, #e27f31 25%) !important;
position: absolute;
content: " ";
width: 100%;
height: 15px;
bottom: 0;
}
dont you what you intent designing with that, but i think you need to run a check that css code .
when i added your css to it, it distort the whole code.
first review your CSS is well written , targeting the right class.
second add img-responsive to the img class and i think you are good
to go.
I'm trying to achieve the following:
Create 3 input elements in a row
Each should have a logo to the left of it, centered perfectly.
Each should have a border-bottom that spans the logo as well.
Like the following image:
However with my current code the images can't be centered and the border doesn't span them. Here's my code:
input {
border: none;
width: 250px;
background-color: #393d49;
border-bottom: 1px solid #767D93;
padding: 10px;
}
form img {
width: 24px;
height: 24px;
}
<form>
<img src="assets/images/envelope.png" alt="Envelope icon indicating user's E-Mail.">
<input type="email" placeholder="E-Mail"><br>
<img src="assets/images/locked.png" alt="Lock icon indicating user's Password.">
<input type="password" placeholder="Password"><br>
<img src="assets/images/avatar.png" alt="Avatar icon indicating user's Name.">
<input type="text" placeholder="Username"><br>
</form>
As it was suggested, I would also use the font-awesome library. But if your not comfortable with that idea, here is how you can do without.
form, .form-row, input {
background-color: #051024;
}
.input-icon, label, input {
display: inline-block;
}
form {
padding: 0.8em 1.2em;
}
.form-row {
padding: 0.8em 0;
padding-bottom: 0.2em;
}
.form-row:not(:last-child) {
border-bottom: solid #18273a 1px; /* Only the last row has a border */
}
.input-icon {
width: 15px;
height: 15px;
margin: 0 10px;
}
label {
max-width:4em; /* Or the maximum width you want your lebel to be */
min-width:4em; /* Same */
color:white;
font-weight: 100;
}
input {
border:none;
padding: 0.8em 0.5em;
color: #6691c9;
font-size: 15px;
outline: none; /* No glowing borders on chrome */
}
<form>
<div class="form-row">
<!-- Put your image here, like so -->
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-email">Email</label>
<input id="form-email" type="email">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-password">Password</label>
<input id="form-password"type="password" placeholder="(8 characters min)">
</div>
<div class="form-row">
<img class="input-icon" src="http://1.bp.blogspot.com/-QTgDeozeWws/VLztRSNkMEI/AAAAAAAAKkQ/mrxdCfxWfvU/s1600/1f499.png" alt="oops"/>
<label for="form-user">User</label>
<input id="form-user" type="text"><br>
</div>
</form>
If you're feeling adventurous
Try bootstrap, it has all you need to create cool web sites (it also includes the font-awesome library).
i'm editing an AngularJS project and i want to add a backdrop (like Bootstrap Modal) over the main DIV when users click on search input box.
Here is the HTML code:
<div class="main-box">
<div class="search-function" ng-click="showInputForm()">
<img src="../images/my_project/search.png">
</div>
<div class="search-form" ng-if="showForm">
<form ng-submit="textSearch()">
<input type="text" autofocus class="search-input" ng-model="text.value" />
</form>
</div>
</div>
As you can see the white box appears when users click on the search icon and now i want to add a backdrop over the main DIV, except on the white box.
Here is the LESS code:
.search-function {
margin-left: 30%;
}
.search-form {
padding-left: 15%;
padding-right: 15%;
position: relative;
z-index: 0;
.search-input {
color: #2b84a6 !important;
background-color: #fff !important;
font-weight: 300;
font-size: 16px;
}
}
How can i reach this?
Something like this
<div class="main-box">
<div class="backdrop" ng-if="showForm"></div>
<div class="search-function" ng-click="showInputForm()">
<img src="../images/my_project/search.png">
</div>
<div class="search-form" ng-if="showForm">
<form ng-submit="textSearch()">
<input type="text" autofocus class="search-input" ng-model="text.value" />
</form>
</div>
</div>
And add the CSS as
.backdrop {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: black;
opacity: 0.5;
}
Here's a very complete article about different methods of achieving what you need
CSS Overlay Techniques
I have been looking everywhere for help on this issue with Css layout width I have been running into.
Whenever I float a div to the right its width won't automatically adjust to the total width of its children. I have observed this effect on all common browsers (Firefox, Chrome and IE11/Edge). What happens is that the last child will just be displayed bellow all the others which is what I do not want.
Here is the css and html I have been using.
https://jsfiddle.net/xqpf9s95/2/
*
<div id="header-container">
<div id="header-top-container">
<div id="header-logo">
<a href="/GlobalImagens/pages/imagens.xhtml?categoria=ultima-hora">
<img src="../resources/images/logo_globalimagens.jpg" alt="Global Imagens"></a>
</div>
<div class="header-top-right-corner">
<form id="language" name="language" method="post" action="/GlobalImagens/pages/imagens.xhtml" enctype="application/x-www-form-urlencoded">
<input name="language" value="language" type="hidden">
<div id="newsletter" class="newsletter">
Subscrever Newsletter
</div>
<div style="float: right; padding-left: 6%;">
<script type="text/javascript" src="/GlobalImagens/javax.faces.resource/jsf.js.xhtml?ln=javax.faces&stage=Development"></script>
<a href="#" style="text-decoration:none; " onclick="mojarra.jsfcljs(document.getElementById('language'),{'language:j_idt31':'language:j_idt31','localeCode':'en'},'');return false">
<img src="../resources/images/flag_uk.jpg" border="0"></a>
</div>
<div style="float: right;">
<a href="#" style="text-decoration:none;" onclick="mojarra.jsfcljs(document.getElementById('language'),{'language:j_idt35':'language:j_idt35','localeCode':'pt'},'');return false">
<img src="../resources/images/flag_pt.jpg" border="0"></a>
</div>
<input name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="215900126811062761:3093351618596041247" autocomplete="off" type="hidden">
</form>
</div>
<div id="admin-container">
<div>
<span class="admin-menu1" style="padding-left: 1.5%;">Iniciar Sessão
</span>
<span class="dotted-separator"></span>
<span style="padding-left: 1.5%;">Registo
</span>
<span class="admin-menu3"><a href="/GlobalImagens/pages/entrar.xhtml">
<img src="../resources/images/bt_minhaconta.jpg" title="A Minha conta" alt="A Minha conta"></a>
</span>
<span class="dotted-separator"></span>
<span class="admin-menu4"><a href="/GlobalImagens/pages/entrar.xhtml">
<img src="../resources/images/bt_carrinho.jpg" title="Meu carrinho" alt="Meu carrinho"></a>
</span>
</div>
<div>
<div align="right">
<span style="color: #83266f; padding-right: 5px;">Não pode adquirir imagens</span>(detalhes)
</div>
</div>
</div>
</div>
/*tables header*/
.admin-menu1 {
padding-right: 1.5%;
}
.dotted-separator {
border: none;
border-left: 1px dotted #83256f;
color: #fff;
/* background-color:#dadada;
height:17px;
width:0%;
margin: 0%; */
}
.admin-menu2 {
padding-left: 10px;
background: url(../images/background_dot.jpg) no-repeat right;
}
.admin-menu-logged-in-3 {
padding-left: 1.5%;
}
.admin-menu3 {
/* width: 75px; */
}
.admin-menu4 {
/* width: 28px; */
}
/*******************************HEADER*******************************/
#header-container {
/* height: 180px; */
/* float: left; */
}
#header-top-container {
/* width: 983px; */
/* height: 100px; */
/* float: left; */
}
#header-logo {
padding-top: 1%;
float: left;
}
#header-logo img {
border: none;
border-style: none;
}
.newsletter {
float: left;
padding-top: 1%;
}
.header-top-right-corner {
float: right;
padding-top: 1%;
width: 11%;
}
#admin-container {
padding-top: 1%;
font-size: 10px;
clear: right;
float: right;
box-sizing: border-box;
}
#admin-container a {
text-decoration: none;
color: #493641;
}
#admin-container a:hover {
text-decoration: underline;
}
*
And my issue is with the div "#admin-container".
How do I fix this so as to make that div auto adjust to the correct width and display without breaking its children elements?
Cheers and thank you.
EDIT: I have editted the code as asked by #Dzijeus. As I have commented, the images don't matter for the issue. My issue is with why the width won't auto adjust on the '#admin-container' to fit all its children.
Thanks for updating the code, it was better, but still far from a minimum verifiable example. A minimum example is when you strip as much as you can from the code while still reproducing the problem.
In your case, if you had done the exercise, you would probably have come to something like this:
<div id="admin-container">
<span class="admin-menu1">Iniciar Sessão</span>
<span>Registo</span>
<span>A Minha conta</span>
<span>Meu carrinho</span>
</div>
.admin-menu1 {
padding-right: 1.5%;
}
#admin-container {
clear: right;
float: right;
}
And you would immediately have seen the interest of doing this, AND solved the problem. Because from here, it is easy to notice that the problem is coming from using a relative padding. Switch to for example padding-right: 2px, and the display is now as you expected it.
As a general rule, padding and margin does not apply to inline elements such as span. To apply padding or margin you should use display: block or display: inline-block
I recently edited the way a template was designed for MyBB. Fortunately, I made it exactly how I expected it to look, however, the navigation bar seemed broke. After trying to navigate, I realized that I could only click on the lower half of the navigation.
http://gyazo.com/99337bd5252b37e118ce119d5168bcf3
As you can see where I painted the red boxes is the only place where the link activation works. After about 2 hours I found out my problem was due to a "position: relative;". When I remove it, the navigation works fine but my panel div becomes moved all the way to the right and out of position.
<div class="main-bg">
<div class="main-width">
<a name="top" id="top"></a>
<div class="top-bar blue-texture"></div>
<div id="header">
<div id="panel">
{$welcomeblock}
</div>
<div class="logo" >
<img src="{$theme['logo']}" alt="{$mybb- >settings['bbname']}" title="{$mybb->settings['bbname']}" />
</div>
<hr class="hidden" />
</div>
</div>
</div>
<div id="container">
<div class="bg-img">
</div>
<hr class="hidden" />
<div class="menu blue-texture">
<span class="search">
<form action="search.php" method="post">
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="postthread" value="1" />
<input type="hidden" name="forums" value="all" />
<input type="hidden" name="showresults" value="threads" />
<input type="text" name="keywords" value="search..." onfocus="if(this.value == 'search...') { this.value = ''; }" onblur="if(this.value=='') { this.value='search...'; }" size="22" />
<input type="submit" value="Go" class="search-button" title="Search the forums" />
</form>
</span>
<ul>
<li>Home</li>
<li>Tournaments</li>
</ul>
</div>
There is the complete code on how I have developed this. However, the problem is mainly in the CSS.
#header {
padding: 60px 0 85px;
height: 56px;
text-align: left;
position: relative;
}
#panel {
background: rgba(0,0,0,0.4);
color: #fff;
border: 1px solid #07090b;
border-radius: 6px;
position: absolute;
top:0;
margin-top: 0px;
right: 0;
padding-top: 4px;
font-size: 12px;
padding-right: 12px;
padding-left: 12px;
height: 130px;
}
.menu {
border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px solid #174d7b!important;
height: 50px;
}
I can't find a way to fix the problem however, because there is no way to add position:relative; and make the navigation links still work as they are intended to.
Without actual link or a working snippet it would be hard to find the issue, but please try this css that may solve your problem:
.menu { width: 100%; }
.menu ul li a { display: inline-block; width: auto; float: left; }
Hope this helps