Here is my HTML code for footer section:
<footer>
<div class="footer">
<nav>
<ul class="nav-list1">
<li><img src="img/article-logo.png" alt="img"/></li>
</ul>
<ul class="nav-list2">
<li>ABOUT</li>
<li>AUTHOURS</li>
</ul>
</nav>
<hr class="hr-style" />
<section class="footer-column">
<div class="footer-column1">
<img src="img/dot-net-ad.jpg" class="footer-image" alt="dot"/>
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<a class="footer-link" href="#">ask here. ></a>
</div>
<div class="footer-column2">
<img src="img/shopify-expert-ad.jpg" class="footer-image" alt="expert"/>
<p class="footer-title">Shopify Expert</p>
</div>
</section>
<hr class="hr-style" />
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
and, this is my styles for footer:
nav {
text-align : center;
}
.footer {
background-image : url('../img/footer-bg.jpg');
bottom : 0;
height : auto;
}
What is my mistake, and what attribute need to use?
Use padding-top according to your picture height:
.footer {
background:url(img/footer-bg.jpg) top center no-repeat;
padding-top:100px;
}
Related
I am attempting a mobile first approach for this website, however, when the side menu pops out after clicking the button only a portion of the menu is underneath the page content while the rest is on top as it should be.
what other options are there to take when trying to troubleshoot a problem like this?
I've tried moving the side menu from the section and placed it underneath, didn't work
I tried using the z-index on the .side-nav class - didn't work
function toggleNav() {
document.getElementById("side-menu").style.width = "50%";
document.getElementById("side-menu").style.display = "block";
document.getElementById("side-hidden").style.width = "50%";
document.getElementById("noScroll").style.overflow = "hidden";
}
function closeSideMenu() {
document.getElementById("side-menu").style.width = "0";
document.getElementById("side-hidden").style.width = "0";
document.getElementById("noScroll").style.overflow = "scroll";
}
.container {
padding: 0 1em;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
/*-- ---------------------------------------------------------------- -->
<!-- NAVIGATION -->
<!-- --------------------------------------------------------------- --*/
.navbar {
background-color: #FFFFFF;
width: 100%;
height: 78px;
border-bottom: 8px solid #CE2026;
}
.navbar-links {
display: none;
}
#logo {
display: none;
}
.open-slide {
float: right;
margin-top: 25px;
margin-right: 20px;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,500,700,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body id="noScroll">
<!-- ----------------------------------------------------------------------------------- -->
<!-- NAVIGATION -->
<!-- ----------------------------------------------------------------------------------- -->
<nav class="navbar grid animated fadeIn">
<div class="open-slide">
<div>
<a href="#" onclick="toggleNav()">
<svg width="30" height="30">
<path d="M0,5 35,5" stroke="#000" stroke-width="2"/>
<path d="M0,14 35,14" stroke="#000" stroke-width="2"/>
<path d="M0,23 35,23" stroke="#000" stroke-width="2"/>
</svg>
</a>
</div>
</div>
<ul class="navbar-links">
<li><a class="active" href="#">HOME</a></li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>GALLERY</li>
<li>CONTACT US</li>
<li id="number">(360) 679-4444</li>
</ul>
<div id="side-hidden-parent">
<div id="side-hidden"></div>
</div>
<div id="side-menu" class="side-nav">
<ul class="on-top">
<li>×</li>
<li class="nav-item"><a class="side-active" href="#">Home</a></li>
<li class="nav-item">About</li>
<li class="nav-item">Services</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</nav>
<header id="hero" class="grid">
<div class="container">
<img id="logo" class="animated fadeInRight" src="images/brushworks_logo.png" alt="brush roller">
<div class="heroText">
<h1 id="home-h" class="animated fadeInUp">The Best Painters For Your Home or Business</h1>
<h2 id="home-p" class="animated fadeInUp">See why we're trusted for over 30 years to service Whidbey Island. Our results speak for themselves</h2>
<a class="animated fadeInRight href=">Learn More</a>
</div>
</div>
</header>
<main>
<!-- ----------------------------------------------------------------------------------- -->
<!-- RED STRIP -->
<!-- ----------------------------------------------------------------------------------- -->
<section id="red-strip grid" class="grid">
<div class="container">
<div id="strip-1" class="strip-1-center animated slideInUp">
<div class="flex-1">
<h3>Residential</h3>
<p>Our qualified staff are trained to use the techniques and materials that are best suited for each individual home.</p>
</div>
<div class="line"></div>
<div class="flex-1">
<h3>Commercial</h3>
<p>No matter what business you're in or how big you facility is, we have the staff and equipment to get it done</p>
</div>
<div class="line"></div>
<div class="flex-1">
<h3>Interior/Exterior</h3>
<p>Whether it's inside or out, we have you covered. Our staff can manage any texture and any material</p>
</div>
</div>
</div>
</section>
<!-- ----------------------------------------------------------------------------------- -->
<!-- GIVE CALL -->
<!-- ----------------------------------------------------------------------------------- -->
<section id="give-call" class="grid">
<div class="container">
<div class="st-2-center">
<h3 class="st-2-call">Give us a call!</h3>
<h3 class="st-2-number">(360)679-444</h3>
<p class="st-2-p">We love working on Whidbey Island and the surrounding area. The diverse, eclectic and highly creative customer base keeps our staff and crew challenged and motivated to exceed our customers expectations.</p>
Contact Us
</div>
<div class="st-2-emailus">
<h4 class="email-us">OR EMAIL US</h4>
<img src="images/email.jpg" alt="email screen on a phone" width="312" height="140">
</div>
</div>
</section>
<!-- ----------------------------------------------------------------------------------- -->
<!-- ICON -->
<!-- ----------------------------------------------------------------------------------- -->
<section id="icons" class="grid">
<div class="container">
<div class="center-3-top">
<div>
<h4 class="">OFFERING YOU THE BEST SOLUTION FOR YOUR PROJECT</h4>
</div>
<div>
<p class="">We provide many painting services to our customers. All of our work is performed by our highly qualified staff and backed by our 100% customer satisfaction guarantee.
</p>
</div>
</div>
<div class="center-3">
<div class="local">
<i class="fas fa-map-pin fa-2x"></i>
<h2>LOCALLY OWNED</h2>
<p>With over 30 years experience as professional painters, we are one of the largest residential and commercial painting companies on Whidbey Island.</p>
</div>
<div class="value">
<i class="fas fa-dollar-sign fa-2x"></i>
<h2>BEST VALUE</h2>
<p>We are confident that we provide the highest quality work for the price. We take great pride in the work we do and refuse to let you pay for work that does not meet expectations.</p>
</div>
<div class="qualified">
<i class="fas fa-medal fa-2x"></i>
<h2>PROFESSIONALLY QUALIFIED</h2>
<p>We provide many painting services to our customers. All of our work is performed by our highly qualified staff and backed by our 100% customer satisfaction guarantee.</p>
</div>
</div>
</div>
</section>
<!-- ----------------------------------------------------------------------------------- -->
<!-- PARALAX -->
<!-- ----------------------------------------------------------------------------------- -->
<section id="paralax" class="grid">
<div class="paralax-left">
</div>
<div class="paralax-right">
<h3>Any Project,</h3>
<h3>Any Size</h3>
<div class="strip-4-p">
<p class="p-width">Our shop can handle projects from
<br>small to large. Over that last 30 years we have seen it all and done it all. </p>
<a class="read" href="#">READ MORE</a>
</div>
</div>
</section>
<!-- ----------------------------------------------------------------------------------- -->
<!-- CONTACT INFO -->
<!-- ----------------------------------------------------------------------------------- -->
<section id="contact-info" class="grid">
<div class="container">
<div id="adress">
<p class="red">Address</p>
<p class="regular">Brushworks NW <br> 691 Oak St. Unit I <br> Oak Harbor, WA 98277
</p><br>
<p class="red">Telephone</p>
<p class="regular">Tel: (360) 679-4444 <br> Fax: (360) 679-5026
</p><br>
<p class="red">Email</p>
<p class="regular">bwnwinc#gmail.com</p><br>
<p class="red">Opening Hours</p>
<p class="regular">Mon - Fri: 7am - 5pm</p>
</div>
<div class="form">
<div>
<h6>Call Or Email Us Today!</h6>
</div>
<form class="container">
<input class="form" type="text" name="name" placeholder="Full name" style="width: 95%; height: 30px"><br>
<input class="form" type="text" name="email" placeholder="Email" style="width: 95%; height: 30px"><br>
<textarea class="form" name="message" placeholder="Message" style="width: 95%; height: 126px"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>
</main>
<!-- ----------------------------------------------------------------------------------- -->
<!-- FOOTER -->
<!-- ----------------------------------------------------------------------------------- -->
<footer class="grid">
<div class="footer container">
<div class="footer-item">
<h3>OVER 30 YEARS <br>EXPERIENCE</h3>
<p>We provide many painting services to our customers. All of our work is performed by our highly qualified staff and backed by our 100% customer satisfaction guarantee. </p>
</div>
<div class="footer-item">
<div class="list">
<h3 class="adjust">OUR SERVICES</h3>
<p>- Deck Work</p>
<p>- Pressure Washing</p>
<p>- Staining</p>
<p>- Doors and Cabinets</p>
<p>- Mill Work Specialists</p>
<p>- Interior/Exterior Painting</p>
</div>
</div>
<div class="footer-item">
<h3 class="adjust">ADDRESS</h3>
<p class="regular">Brushworks NW <br> 691 Oak St. Unit I <br> Oak Harbor, WA 98277
</p><br>
<p>Phone: (360) 679-4444 <br> Fax: (360) 679-5026 <br> Email: bwnwinc#gmail.com</p>
</div>
</div>
<div class="facebook container">
<i class="fab fa-facebook-square fa-2x"></i>
</div>
<div class="copyright">
<p class="center">© 2019 Brushworks Inc. NW <br> Designed by Oak Harbor Web Designs</p>
</div>
</footer>
</body>
</html>
The side menu is supposed to be on top of the content, but a portion of the div is not.
Would you help me please make appear pictures in one column? It needs to be full width with no space between those images.
Thanks in advance.
What I want it to look like
What I have
Code:
img,
.image {
display: block;
height: 350px;
margin: 0;
width: 50%;
}
<section class="main">
<div class="container">
<div class="full-width">
<div class="vibe_editor clearfix">
<div class="v_module v_column col-md-12 fullwidth v_first">
<style>
<div class="v_module v_text_block about_us">
<p>
<a href="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas.jpg?189db0">
<img class="alignnone size-big wp-image-3125" width="768" height="282" alt="o-nas1" src="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas-768x282.jpg?189db0">
</a>
<a href="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg?189db0">
</p>
</div>
</div>
<div class="v_module v_column col-md-12 fullwidth v_first">
</div>
</div>
</div>
</section>
href="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas.jpg?189db0"> <img class="alignnone size-big wp-image-3125" width="768" height="282" alt="o-nas1" src="http://www.kurzon.cz/wp-content/uploads/2015/10/homepage-o-nas-768x282.jpg?189db0"> </a> <a href="http://www.kurzon.cz/wp-content/uploads/2015/10/2048x1536-orange-red-solid-color-background.jpg?189db0"> </p> </div> </div> <div class="v_module v_column col-md-12 fullwidth v_first"> </div> </div> </div> </section>
The p tag has padding by default remove it?
Also remove unwanted <style> tag
I'm trying to develop a website with Materialize and there is a slider in site. Materialize is responsive and working well at various resolutions. However, When I decrease the screen size, the slider width is decreasing as well (as it should be). But the image in it just getting cropped instead of scaling it to the size of the slider. I added the responsive-img class to the img but nothing changed.
Slider code
<div class="slider">
<ul class="slides">
<li>
<img src="images/slider/slide_1.jpg">
<div class="caption center-align">
<h3>Eraltek Kurumsal</h3>
<h5 class="light grey-text text-lighten-3">Sitemize hoşgeldiniz</h5>
</div>
</li>
<li>
<a href="panoramic/panoramic.html">
<img src="images/slider/slide_2.jpg">
<div class="caption right-align">
<h3>Eraltek Mağaza</h3>
<h5 class="light yellow-text text-darken-1">360 derece mağaza turu için tıklayınız</h5>
</div>
</a>
</li>
<li>
<img src="images/slider/slide_3.jpg">
</li>
<li>
<img src="images/slider/slide_4.jpg">
</li>
<li>
<img src="images/slider/slide_5.jpg">
</li>
</ul>
</div>
Try to define in your css file
.slider .slides li img {
background-size:100% auto;
background-repeat: no-repeat;
}
You should try adding a css
max-width : 100%;
to the <img> tag. Hope this will resolve the issue. Also don't forget to add responsive-img class to <img>
Use img-responsive class with img tag.(you are using responsive-img, It is a bootstrap class. It is not working in materialize design)
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<div class="slider">
<ul class="slides">
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/1">
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/2">
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
Try
.slider li img{max-width:100%;height:auto;}
This is my code for footer section:
<footer>
<div class="footer">
<nav>
<ul class="nav-list1">
<li><img src="img/article-logo.png" alt="img"/></li>
<li>ARTICLES</li>
<li>BLOG</li>
<li><a href="#">COLUMN</li>
<li><a href="#">TOPICS</li>
</ul>
<ul class="nav-list2">
<li>ABOUT</li>
<li>AUTHOURS</li>
<li>MASTHEAD</li>
<li>CONTRIBUTE</li>
<li>STYLEGUIDE</li>
<li>CONTACT</li>
<li>SPONSORSHIPS</li>
</ul>
</nav>
<hr class="hr-style" />
<section class="clearfix footerWidth">
<div class="footer-column1">
<img src="img/footer1.png" class="footer-image" alt="dot"/>
<p class="footer-title-1">.NET Training</p>
<p class="footer-pgf">If you have a .NET question on a topic that 's not covered by other more specific forums.</p>
<p><a class="footer-link" href="#">ask here. ></a></p>
</div>
<div class="footer-column2">
<img src="img/footer2.png" class="footer-image" alt="expert"/>
<p class="footer-title-2">Shopify Expert</p>
<p class="footer-pgf">Unique custom made Shopify theme and tweaks.</p>
<p><a class="footer-link" href="#">click to view</a></p>
</div>
</section>
<hr class="hr-style" />
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
This is my JSfiddle what i tried:
http://jsfiddle.net/u89q6cyz/
Now my page look this:
http://s13.postimg.org/js23ca6nr/Untitled_1_copy.png
Now i need to display the footer-content as i marked in my image in the right side of the image.
I tried all possible ways.. I don't know how to fix..
Can anyone help me?
You have to do two modification in your CSS code.
Remove the margin-left on the following class.
.footer-column2
{
/*margin-left: 112px !important;*/
}
Add width:50% for your footer columns.
.footer-column1,.footer-column2
{
float:left;
width:50%;
}
DEMO
I'm trying to style the footer of a website made using Joomla 3.2.
Here's a picture of it:
(http://imageshack.com/a/img585/9589/1edo.png)
I renamed the classes so I can modify it with CSS but the problem is that I can't put the div(s) next to each other!
Here's the HTML:
<footer class="row-fluid">
<div class="footer1">
<jdoc:include type="modules" name="footer1" style="html5" />
<h3>Main Links:</h3>
<ul>
<li>Home Page</li>
<li>About Us</li>
<li>Company Mission</li>
<li>Company Vision</li>
<li>Products</li>
<li>Site Map</li>
</ul>
</div>
<div class="footer2">
<jdoc:include type="modules" name="footer2" style="html5" />
<h3>Contact Us:</h3>
<ul>
<li>Address: 28 ...</li>
<li>Phone: 0224</li>
<li>Email: ...#....com</li>
<li>Mobile: 0100</li>
<li>Fax: </li>
</ul>
</div>
<div class="footer3">
<jdoc:include type="modules" name="footer3" style="html5" />
<div class="span4"><img src="templates/greensand/images/footerlogo.png" alt="Greensand, Inc." class="pull-right" /></div>
</div>
<div class="footer4">
<jdoc:include type="modules" name="footer4" style="html5" />
<p>© 2014 Greensand, Inc. All rights reserved. </p>
</div>
</footer>
Here's the CSS:
footer .span9 {
padding: 4em 0 0 3em;
clear: both;
}
footer p {
padding-left: 0em; text-align: center;
}
footer .nav-pills a {
color: #fff;
}
footer .nav-pills a:hover {
color: #21AB49;
}
.footer1 {
padding-left: 3em;
}
Does anyone have any ideas to make them sit next to each other with a white line between them?
Main Links | Contact Us | the Logo and at the bottom the copyright