I have added relevant HTML and CSS
I set margin of header to 0 auto but there is still a white space between header and section. How come?
And what is the exact difference between setting margin like 0 5 and 15px?
This is the CSS code:
header{
text-align:center;
background:blue;
margin: 0 auto;
}
h1,h2{
color:black;
}
nav a{
color:#fff;
}
section{
background:orange;
}
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jack Yuan | Web Developer</title>
<link rel="stylesheet" href="TreeHouse/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="TreeHouse/main.css">
</head>
<body>
<header>
<a href="First.html" id="logo">
<h1>Jack Yuan</h1>
<h2>Web Developer</h2>
</a>
<nav>
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section>
<ul id="gallery">
<li>
<a href="TreeHouse/Jack.jpg">
<p> This is me </p>
<img src="TreeHouse/Jack.jpg" width="500" height="400" alt="">
</a>
</li>
<li>
<a href="TreeHouse/Life.jpg">
<p> This concludes my life, lol </p>
<img src="TreeHouse/Life.jpg"width="500" height="400" alt="">
</a>
</li>
<li>
<a href="TreeHouse/Study.jpg">
<p> This shows what I study </p>
<img src="TreeHouse/Study.jpg"width="500" height="400" alt="">
</a>
</li>
<li>
<a href="TreeHouse/2.jpg">
<p> This is what I believe</p>
<img src="TreeHouse/2.jpg"width="500" height="400" alt="">
</a>
</li>
</ul>
</section>
<footer>
<a href="https://www.facebook.com/jackyuan.jack">
<img src="TreeHouse/facebook.gif" alt="FaceBook Logo">
</a>
<a href="https://twitter.com/Jack19909100">
<img src="TreeHouse/twitter.png" alt="Twitter Logo">
</a>
<p>Jack Yuan</p>
<p>All Rights Reserved.</p>
</footer>
</body>
</html>
You need to add this CSS :
ul,p {
margin:0;
}
FIDDLE
I would also suggest you use som kind of CSS reset styleshhet like this one or this one.
It is because of margin collapse.
Related
This is my layout with no body
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Shop | E-Shopper</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/font-awesome.min.css" rel="stylesheet">
<link href="~/Content/prettyPhoto.css" rel="stylesheet">
<link href="~/Content/price-range.css" rel="stylesheet">
<link href="~/Content/animate.css" rel="stylesheet">
<link href="~/Content/main.css" rel="stylesheet">
<link href="~/Content/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="~/Content/images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="~/Content/images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="~/Content/images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="~/Content/images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="~/Content/images/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<header id="header">
<!--header-->
<div class="header-middle">
<!--header-middle-->
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="logo pull-left">
<a href="#Url.Action("Index", "Home")">
<img src="~/Content/images/home/logo.png" alt="" />
</a>
</div>
</div>
<div class="col-sm-8">
<div class="shop-menu pull-right">
<ul class="nav navbar-nav">
#if (Session["Name"] != null)
{
<li style="margin-top:10px">
<p>
Welcome
#Session["UserName"].ToString()
</p>
</li>
<li><i class="fa fa-user"></i> Account</li>
<li>
<a href="#Url.Action("Logout", "Account")">
Logout
</a>
</li>
}
else
{
<li>
<a href="#Url.Action("Login", "Account")">
Login
</a>
</li>
}
</ul>
</div>
</div>
</div>
</div>
</div><!--/header-middle-->
<div class="header-bottom">
<!--header-bottom-->
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="mainmenu pull-left">
<ul class="nav navbar-nav collapse navbar-collapse">
<li>
<a href="#Url.Action("ListOfProductCategory", "ProductCategory")" class="elements">
<span>Manage Product categories</span>
</a>
</li>
<li>
<a href="#Url.Action("ListOfProducts", "Product")" class="elements">
<span>Manage Products</span>
</a>
</li>
<li>
<a href="#Url.Action("ShowUsers", "Home")" class="elements">
<span>Manage Customers</span>
</a>
</li>
<li>
<a href="#Url.Action("ViewOrders", "Home")" class="elements">
<span>View Orders</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
#RenderBody()
</div>
</div>
<footer id="footer">
<!--Footer-->
<div class="footer-bottom">
<div class="container">
<div class="row">
<p class="pull-left">Copyright © 2016 Shopping cart. All rights reserved.</p>
<p class="pull-right">Designed by <span><a target="_blank" href="http://www.atdrive.com">AtDrive</a></span></p>
</div>
</div>
</div>
</footer><!--/Footer-->
#RenderSection("scripts", required: false)
</section>
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/price-range.js"></script>
<script src="~/Scripts/jquery.scrollUp.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.prettyPhoto.js"></script>
<script src="~/Scripts/main.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
</body>
</html>
This is my main.css having id footer which is used for the footer.
#footer {
background: #F0F0E9;
}
I dont know how to keep this footer at the bottom. it is getting at the middle when no body content is there.
Try this:
#footer {
position: absolute;
height: 50px;
width: 100%;
bottom: 0px;
border-top: solid 1px black;
}
use this Logic :
*{
box-sizing: border-box;
}
body, html{
height: 100%;
width: 100%;
margin: 0;
}
body{
display:flex;
flex-direction: column;
}
#container
{
margin: 0 auto;
width:80%;
background-color: white;
border: 0.2em solid black;
flex-shrink:0;
flex-grow:1;
display:flex;
}
#footer
{
margin: 0 auto;
width:100%;
text-align: center;
height:1.5em;
background-color: white;
border: 0.2em solid black;
flex-shrink:0;
}
.col {
height:90%;
flex-shrink:0;
flex-grow:1;
margin:0 2% 0 2%;
}
<div id="container">
<div class="col">
test column 1
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
</div>
<div class="col">
test column 2
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
</div>
</div>
<div id="footer">
test content
</div>
Im working on this html5 , using css, and my website works fine on chrome and firefox, but not in IE 10. Nothing written on css file applies on IE.
My website still remains locally and unfinished,but its driving me crazy as i tried so many answers to fix IE like html5shiv, and so on...
I checked on the validator also, and i only get errors of not recognized bootstrap attributes.
i would love if someone can get a look on my code
body {
background-color: #D1E0B2;
}
header,
section,
footer,
aside,
nav,
main,
article,
figure {
display: block;
}
.fotos {
max-width: 100%;
height: auto;
}
.carousel-inner > .item > img {
max-width: 100%;
height: 360px;
margin: 0 auto;
}
.tres-colunas {
display: block;
width: 360px;
height: 170px;
vertical-align: middle;
border-bottom: 1px dashed #929493;
border-top: 1px dashed #929493;
margin: 10px;
padding-top: 8px;
float: left;
}
h3 {
font-size: 1.6em;
margin-top: 0;
}
.button-home {
float: right;
background-color: #A2BF4D;
border-radius: 6px;
color: #fff;
font-family: 'Arial';
font-size: 18px;
text-decoration: none;
cursor: pointer;
border: 1px solid #C2E066;
}
.button-home:hover {
float: right;
background-color: #9BB352;
border-radius: 6px;
color: #fff;
font-family: 'Arial';
font-size: 18px;
text-decoration: none;
cursor: pointer;
border: 1px solid #C2E066;
}
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="pt" />
<meta name="description" content=' - ' />
<meta name="keywords" content=', ' />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<title>Yeshiva Or Israel College</title>
<script>
document.createElement("myHero")
</script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="shortcut icon" href="logo.png" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<a>
<img src="tres_rgb.jpg" alt="Logo Da Yeshiva" width="1130" height="145" />
</a>
<ul class="nav nav-tabs">
<li class="active">Home
</li>
<li>Nossa filosofia
</li>
<li>Os Rabinos
</li>
<li>Campus
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Arquivos
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Videos
</li>
<li>Fotos
</li>
<li>Textos
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Links Associados
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Camp Hashivenu
</li>
<li>Site Rav Karaguilla
</li>
<li>Canal do Rav Passy
</li>
</ul>
</li>
<li>Faça Parte
</li>
<li>Contato
</li>
</ul>
<p> <b> Yeshivá Or Israel College. </b><i> Educando com amor.</i>
</p>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="carrosel_danca.jpg" alt="Dança dos Bachurim" />
<div class="carousel-caption">
<h3>União</h3>
<p>Alunos da Yeshivá dançando no páteo.</p>
</div>
</div>
<div class="item">
<img src="carrosel_shabat.jpg" alt="Um Shabat Especial" />
<div class="carousel-caption">
<h3>Um Shabat Especial</h3>
<p>A experiencia de Shabatot na Yeshivá eh algo especial.</p>
</div>
</div>
<div class="item">
<img src="carrosel_havdala_rs.jpg" alt="Havdala" />
<div class="carousel-caption">
<h3>Alegria no Judaismo</h3>
<p>Momentos especiais e inesqueciveis</p>
</div>
</div>
<div class="item">
<img src="carrosel_estudo_fora.JPG" alt="Estudo ao ar livre" />
<div class="carousel-caption">
<h3>Estudo da Torá</h3>
<p>Estudo da Torá em alto nivel.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="tres-colunas">
<div class="col-sm-3 col-md-6 col-lg-4">
<img src="revista.png" alt="Revista Chai Or Israel" width="100" height="150" />
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<h3> Revista Chai </h3>
<p>A cada ano são lançadas novas revistas da Yeshivá ricas em conteudo e qualidade. Clique aqui para assinar a sua:</p>
</div>
<button class="button-home">Assinar</button>
</div>
<div class="tres-colunas">
<div class="col-sm-3 col-md-6 col-lg-4">
<img src="calendario.png" alt="calendario" width="100" height="150" />
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<h3> Novidades por aqui </h3>
<p>Fique por dentro dos novos eventos e acontecimentos.</p>
<span style="padding:25px"> </span>
</div>
<button class="button-home">Confira</button>
</div>
<div class="tres-colunas">
<div class="col-sm-3 col-md-6 col-lg-4">
<img src="livro-dessler.jpg" alt="Livros da Yeshivá" width="100" height="150" />
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<h3> Livros da Yeshivá </h3>
<p>A Yeshivá já publicou dezenas de livros. Venha conhecer quais!</p>
<span style="padding:25px"> </span>
</div>
<button class="button-home">De uma olhada</button>
</div>
</div>
</body>
</html>
, im not loading the images, if its necessary tell me...
check if other browser are showing it correctly or not like(chrome ,firefox etc) also check if this happens only in your laptop/pc or every laptop/pc.
if it is happening only in your pc/laptop then there might be a chance that your IE has not enabled the style sheet option. I also had the same problem.
To fix this issue use the following steps:--
1.Start regedit.exe.
2.Go to HKEY_CURRENT_USER\SOFTWARE\Microsoft\Internet Explorer\Main.
3.Double-click Use StyleSheets (or create this value of type String if it doesn't exist).
4.To allow style sheets, set StyleSheets to yes; to disallow, set it to no.
Click OK.
5.Close regedit.
6.Restart Internet Explorer (IE).
do reply if this help you or not..
I'm on Windows 8.1 using IE11 with the same issue. This is how I fixed it:
On your computer search for "regedit.exe" (go to the start menu and click on the search button on the top-right corner of the screen).
Once regedit opens up, on the left column click on "HKEY_CLASSES_ROOT" and then on ".css"On the right column double-click on "Content Type". This will open up a dialog box.
In the dialog box change "value data" to "text/css".
Click "Ok" and that's it.
I hope this helps other people out there.
Can you check the same thing on server cause respond.js works only on server.
Can you try loading the style sheet first by typing the below link in the address bar
http://localhost:paortnumber/path of your css folder/myStyle.css
Please let me know what you find?
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;
}
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