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
Related
<section class="services-section" id="services">
<video src="services.mp4" autoplay loop muted></video>
<div class="container section-padding services-d-content">
<h3 class="left-liner">Services</h3>
<p>List of my services</p>
<div class="row">
<div class="col-md-6">
<div class="service-content">
<h3 class="bottom-liner">Here is my services</h3>
<div class="row">
<div class="col-md-6">
<ul>
<li>sliders</li>
<li>max 10 section per page</li>
<li>carousels</li>
<li>image gallery</li>
<li>awesome background particles!</li>
<li>Countdown (Realtime server side)</li>
<li>contact form</li>
<li>Pixel Perfect Design</li>
<li>All code is hand coded</li>
<li>W3C Validated</li>
<li>Quickly Converted PSD to Html</li>
<li>Highly Professional code!</li>
<li>Cross-Browser Compatibility</li>
<li>jQuery effects</li>
<li>animated content in On scroll</li>
</ul>
</div>
<div class="col-md-6">
<ul>
<li>Highly Professional Design</li>
<li>100% Unlimited revisions</li>
<li>Mobile-Friendly websites</li>
<li>E-commerce with various payment methods</li>
<li>Websites for All professions</li>
<li>Secure Websites</li>
<li>Custom Designing(if you say)</li>
<li>User-friendly and attractive layout</li>
<li>Opt in form (MY SQL DATABSE)</li>
<li>Meta description</li>
<li>maps</li>
<li>Free 3Month support</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 ">
<img src="img/services.png" class="img-fluid Services-scale-up" alt="">
</div>
</div>
</div>
</section>
**css
#services:hover > .Services-scale-up{
transform: scale(1.1);
}**
Heading ##i want to scale up the image when #services hover i have
used ~ this sign Also! can anyone tell me how to scale up a image
when i hover the parent section i have tried both ~ and > sign i dont
know more sign to hover parent element
========================================================================
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;}
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;
}
i'm trying to get my wordpress site to do the animate scroll to id, by using the scroll to id by malihu
I can't get it to work. When i click the link it just jump down to the page.
it´s a one page site..
<div class="wrapper">
<nav>
<ul>
<li><a href="#et" rel='m_PageScroll2id'>Et</a></li>
<li><a href="#to" rel='m_PageScroll2id'>To</a></li>
<li><a href="#tre" rel='m_PageScroll2id'>Tre</a></li>
<li><a href="#fire" rel='m_PageScroll2id'>Fire</a></li>
</ul>
</nav>
<div class="side" id="et">
<h1 id="section-1">Et</h1>
</div>
<div class="side" id="to">
<h1 id="section-2">to</h1>
</div>
<div class="side" id="tre">
<h1 id="section-3">tre</h1>
</div>
<div class="side" id="fire">
<h1 id="section-4">fire</h1>
<h2 id="scrollto">Heading 2</h2>
</div>
If you are ok with an alternate method, take a look at this demo http://codepen.io/mattsince87/pen/exByn.
I've got a strange problem with chrome.
My code works like a charm in safari, chrome (5.x.x), explorer and firefox. But with a recent chrome update (7.x or 8.x) it doesn't.
Here is the code i wrote:
<div class="result">
<div class="favoris">
<a class="favorisClick"><img src="images/favoris.png"</a>
</div>
<div class="favorisContent resultDim">
<h1 class="favTitle">0 FAVORIS</h1>
<ul id="favResult">
<!-- js insert things here -->
</ul>
</div>
<div class="resultContent resultDim">
<h1 class="nbrResult">0 TITRES</h1>
<ul id="resultContent">
<!-- js insert things here -->
</ul>
<div id="nav">
<ul>
</ul>
</div>
</div>
<div class="infos">
<a class="infosClick"><img src='images/infoUp.png' alt='show info' /></a>
<div class="infosContent">
<ul id="infosContent">
<li>Sélectionez un morceau.</li>
</ul>
<ul>
<li id="dl"></li>
<li></li>
</ul>
</div>
</div>
</div>
With safari, ff, old chrome and ie, i see this code with the added content by the js.
With a new version of chrome here's what i get :
<div class="result">
<div class="favoris">
<a class="favorisClick">
<img src="images/favoris.png" <="" a=""/>
</a>
</div>
<a class="favorisClick">
<div class="favorisContent resultDim" style="display: none; ">
<h1 class="favTitle">0 FAVORIS</h1>
<ul id="favResult">
</ul>
</div>
<div class="resultContent resultDim">
<h1 class="nbrResult">16 TITRES</h1>
<ul id="resultContent">
***RESULT CONTENT***
</ul>
<div id="nav">
</div>
</a>
<div class="infos">
<a class="favorisClick"/>
<a class="infosClick">
<div class="infosContent" style="display: none; ">
<ul id="infosContent">
</ul>
</div>
</div>
</div>
I dunno why it add this $&#$X1& <a class="favorisClick"> and </a> and the <a class="favorisClick" /> it happens ONLY whith recent chrome version ... it make me turn completely mad !!
I don't even know how to search for this issue on google...
Please help me :)
<div class="favoris">
<a class="favorisClick"><img src="images/favoris.png"</a>
</div>
It looks like you're not closing your image tag...