So if you go to diartefloral.tech and use cellphone dimension in the "Sobre Nosotros" part of the menu the footer is overlapping an image, i dont know how to fix this. Thats like the most relevant code, I'm using bootstrap, i got the in the morning with the navbar overlapping the footer but i fixed it by adding the body{ padding-top:60px;}
.principal{
background-color: rgb(230,219,241);
}
.container >a{
font-family: Charmonman, serif;font-size: 35px;padding-bottom: -5px;padding-top: 9px;
}
.site-footer
{
background: linear-gradient(120deg, #7f70f5, #0ea0ff);
padding:45px 0 20px;
font-size:15px;
line-height:24px;
color: white;
width: 100%;
position: fixed;
bottom: 0;
}
.site-footer hr
{
border-top-color:#bbb;
opacity:0.5
}
.site-footer hr.small
{
margin:20px 0
}
.site-footer h6
{
color:#fff;
font-size:16px;
text-transform:uppercase;
margin-top:5px;
letter-spacing:2px
}
.site-footer a
{
color:white;
}
.site-footer a:hover
{
color:#3366cc;
text-decoration:none;
}
.footer-links
{
padding-left:0;
list-style:none
}
.footer-links li
{
display:block
}
.footer-links a
{
color:white;
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
color:#3366cc;
text-decoration:none;
}
.footer-links.inline li
{
display:inline-block
}
.site-footer .social-icons
{
text-align:right
}
.site-footer .social-icons a
{
width:40px;
height:40px;
line-height:40px;
margin-left:6px;
margin-right:0;
border-radius:100%;
background-color:white
}
.copyright-text
{
margin:0
}
#media (max-width:991px)
{
.site-footer [class^=col-]
{
margin-bottom:0;
}
}
#media (max-width:767px)
{
.site-footer
{
padding-bottom:0
}
.site-footer .copyright-text,.site-footer .social-icons
{
text-align:center
}
}
.social-icons
{
padding-left:0;
margin-bottom:0;
list-style:none
}
.social-icons li
{
display:inline-block;
margin-bottom:4px
}
.social-icons li.title
{
margin-right:15px;
text-transform:uppercase;
color:#96a2b2;
font-weight:700;
font-size:13px
}
.social-icons a{
background-color:#eceeef;
color:#818a91;
font-size:16px;
display:inline-block;
line-height:44px;
width:44px;
height:44px;
text-align:center;
margin-right:8px;
border-radius:100%;
-webkit-transition:all .2s linear;
-o-transition:all .2s linear;
transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
color:#fff;
background-color:#29aafe
}
.social-icons.size-sm a
{
line-height:34px;
height:34px;
width:34px;
font-size:14px
}
.social-icons a.facebook:hover
{
background-color:#3b5998
}
.social-icons a.instagram:hover
{
background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}
#media (max-width:767px)
{
.social-icons li.title
{
display:block;
margin-right:0;
font-weight:600
}
}
#media (max-width: 700px){
#logo{
font-size: 20px;
}
.container >button >span{
width: 18px;
height: 18px;
}
}
#media (max-width: 500px){
#logo{
font-size: 30px;
}
.container >button >span{
width: 18px;
height: 18px;
}
}
#media (max-width: 400px){
#logo{
font-size: 25px;
}
.container >button >span{
width: 18px;
height: 18px;
}
}
#media (max-width: 350px){
#logo{
font-size: 22px;
}
.container >button >span{
width: 15px;
height: 15px;
}
}
#media (max-width: 300px){
#logo{
font-size: 18px;
}
.container >button >span{
width: 15px;
height: 15px;
}
}
#media (max-width: 250px){
#logo{
font-size: 14px;
}
.container >button >span{
width: 15px;
height: 15px;
}
}
.imagen{
padding: 30px;
display: flex;
justify-content: center;
}
.imagen >img{
margin: auto;
border-radius: 50%;
height: 120px;
padding: 20px;
}
body {
padding-top: 60px;
padding-bottom: 60px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../estilos/estilos.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Charmonman&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../estilos/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<title>DiArteFloral</title>
</head>
<body class="principal">
<nav class="navbar navbar-dark navbar-expand-lg fixed-top bg-white portfolio-navbar gradient navbar-static-top" style="height: 86px;" id="banner">
<div class="container"><a id='logo' class="navbar-brand logo" href="#" ><i class="fa fa-pagelines"></i>DiArteFloral y Regalos</a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navbarNav" id="boton"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto" id="menu">
<li class="nav-item"><a class="nav-link active" href="../index.html">Inicio</a></li>
<li class="nav-item"><a class="nav-link" href="./productos.html">Productos</a></li>
<li class="nav-item"><a class="nav-link" href="./contacto.html">Contacto</a></li>
<li class="nav-item"><a class="nav-link" href="./sobreN.html">Sobre Nosotros</a></li>
</ul>
</div>
</div>
</nav>
</br>
<div class="imagen">
<div class="imagen">
<img src="../img/LOGO.jpg" alt="LOGO">
</div>
</div>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<h6>Informacion</h6>
<p class="text-justify">DiArteFloral y Regalos es una empresa enfocada en complacer a las personas brindandoles el mejor servicio y los productos mas bonitos que se puedan crear al gusto exclusivo de cada cliente.</p>
</div>
<div class="col-xs-6 col-md-3">
<h6>Categorias</h6>
<ul class="footer-links">
<li>Arreglos</li>
<li>Eventos</li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<h6>Atajos</h6>
<ul class="footer-links">
<li>Inicio</li>
<li>Productos</li>
<li>Contacto</li>
<li>PSobre Nosotros</li>
</ul>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<p class="copyright-text">Copyright © 2021 All Rights Reserved by
Sergio Calderon.
</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<ul class="social-icons">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="instagram" href="#"><i class="fa fa-instagram fa-lg"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="https://kit.fontawesome.com/6a4338d571.js" crossorigin="anonymous"></script>
<script src="../estilos/bootstrap.min.js"></script>
<script src="../estilos/theme.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
let boton = document.querySelector('#boton');
let menu = document.querySelector('#banner');
let logo = document.querySelector('#logo');
boton.addEventListener('click', ()=> {
if(menu.style.height==='86px'){
menu.style.height='240px'
}else{
menu.style.height='86px'
}
});
</script>
</body>
</html>
User agents will always display items in the DOM order.
You mean customize css properties. I see you are doing great in your live site, try to use images that sizes less than 1.5Mb, it slows rendering visuals.
Related
I need to adjust footer like the image shown below in four columns as it is. Trying to do but the last two columns are not meeting like the first as shown in the image. Tried to make them in a single row with four columns but unable to adjust it like the sample image shown below. Please help with this.
HTML CODE:
<!-- Site footer -->
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<h6>Categories</h6>
<ul class="footer-links">
<li>C</li>
<li>UI Design</li>
<li>PHP</li>
<li>Java</li>
<li>Android</li>
<li>Templates</li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<h6>Quick Links</h6>
<ul class="footer-links">
<li>About Us</li>
<li>Contact Us</li>
<li>Contribute</li>
<li>Privacy Policy</li>
<li>Sitemap</li>
</ul>
</div>
</div>
<hr>
</div>
<h2>Join our newsletter</h2>
<h6>Join our newsletter and Stay informed to latest news and events</h6>
<div id=footer>
<input type="text" id="fname" name="firstname" placeholder="Enter your Email:">
<input type="submit" value="Submit">
</div>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="col-md-8 col-sm-6 col-xs-12">
<img src="http://cache1.artprintimages.com/images/jump_pages/rebrand/footer/fb.png" href="#">
<p class="copyright-text">Excoboard extended community 2014 | Privacy Policy
</p>
</div>
<ul class="social-icons">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="dribbble" href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
CSS CODE:
input[type=text] {
width: 15%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 15%;
background-color: #0000FF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
#footerabout {
border-radius: 5px;
padding: 20px;
}
.site-footer
{
background-color:#26272b;
padding:45px 0 20px;
font-size:15px;
line-height:24px;
color:#737373;
}
.site-footer hr
{
border-top-color:#bbb;
opacity:0.5
}
.site-footer hr.small
{
margin:20px 0
}
.site-footer h6
{
color:#fff;
font-size:16px;
text-transform:uppercase;
margin-top:5px;
letter-spacing:2px
}
.site-footer a
{
color:#737373;
}
.site-footer a:hover
{
color:#3366cc;
text-decoration:none;
}
.footer-links
{
padding-left:0;
list-style:none
}
.footer-links li
{
display:block
}
.footer-links a
{
color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
color:#3366cc;
text-decoration:none;
}
.footer-links.inline li
{
display:inline-block
}
.site-footer .social-icons
{
text-align:right
}
.site-footer .social-icons a
{
width:40px;
height:40px;
line-height:40px;
margin-left:6px;
margin-right:0;
border-radius:100%;
background-color:#33353d
}
.copyright-text
{
margin:0
}
#media (max-width:991px)
{
.site-footer [class^=col-]
{
margin-bottom:30px
}
}
#media (max-width:767px)
{
.site-footer
{
padding-bottom:0
}
.site-footer .copyright-text,.site-footer .social-icons
{
text-align:center
}
}
.social-icons
{
padding-left:0;
margin-bottom:0;
list-style:none
}
.social-icons li
{
display:inline-block;
margin-bottom:4px
}
.social-icons li.title
{
margin-right:15px;
text-transform:uppercase;
color:#96a2b2;
font-weight:700;
font-size:13px
}
.social-icons a{
background-color:#eceeef;
color:#818a91;
font-size:16px;
display:inline-block;
line-height:44px;
width:44px;
height:44px;
text-align:center;
margin-right:8px;
border-radius:100%;
-webkit-transition:all .2s linear;
-o-transition:all .2s linear;
transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
color:#fff;
background-color:#29aafe
}
.social-icons.size-sm a
{
line-height:34px;
height:34px;
width:34px;
font-size:14px
}
.social-icons a.facebook:hover
{
background-color:#3b5998
}
.social-icons a.twitter:hover
{
background-color:#00aced
}
.social-icons a.linkedin:hover
{
background-color:#007bb6
}
.social-icons a.dribbble:hover
{
background-color:#ea4c89
}
#media (max-width:767px)
{
.social-icons li.title
{
display:block;
margin-right:0;
font-weight:600
}
}
I was wondering how I could add an underline colour under to the text of the of the navigation bar webpage the user highlights over exactly like the example the way how it expands out both sides equally. Here is an example
Here is my code below.
body{
margin: 0;
padding: 0;
}
header{
height: 10vh;
background-color: #4D5061;
}
nav ul{
list-style-type: none;
overflow: hidden;
text-align: center;
}
nav ul li{
display: inline-block;
padding-left: 15px;
padding-top: 3.5vh;
}
nav ul li a{
color: white;
text-decoration: none;
font-size: 14pt;
font-family:'Roboto', sans-serif;
}
#logo{
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section{
position:relative;
}
.section1{
height:93vh;
background-color: #FFFFFF;
text-align: center;
}
.section2{
height:50vh;
background-color: #A59E8C;
text-align:center;
color:white;
padding-top:23vh;
}
.contact_section{
height:93vh;
background-color: grey;
}
.hero{
height:750px;
}
h1{
font-family:'Roboto', sans-serif;
color: white;
}
.container-fluid{
padding: 60px 50px;
}
.bg-grey{
background-color: #f6f6f6;
}
.logo-small{
color: #000000;
font-size: 50px;
}
.logo{
color: #000000;
font-size: 200px;
}
#media screen and (max-width: 768px){
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.fa-angle-down{
color: #4D5061;
}
footer{
height:10vh;
}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Liam Docherty's Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header>
<div id="logo">
<img src="http://placehold.it/60x60" alt=""></div>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Units</li>
<li>Clients</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<section class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section2">
<div class="banner">
<h1>What I can offer you</h1>
<p> Feel free to contact me regarding any </p>
<div class="container-fluid text-center">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>Availability</h4>
<p>You can expect a response with 24 hours of the sent message. </p>
</div>
</div>
</div>
</div>
</section>
<section id="contact-me" class="contact_section">
</section>
</body>
<footer>
</footer>
</html>
The answer is as simple as using the :hover suffix with your selectors to target the hover state of the links. I'd also recommend putting the padding on the link itself rather than the <li> so the clickable area is a bit nicer.
body{
margin: 0;
padding: 0;
}
header{
height: 10vh;
background-color: #4D5061;
}
nav ul{
list-style-type: none;
overflow: hidden;
text-align: center;
}
nav ul li{
display: inline-block;
}
nav ul li a{
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family:'Roboto', sans-serif;
}
nav ul li:hover a{
text-decoration: none;
color: red;
border-bottom: 1px solid red;
}
#logo{
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section{
position:relative;
}
.section1{
height:93vh;
background-color: #FFFFFF;
text-align: center;
}
.section2{
height:50vh;
background-color: #A59E8C;
text-align:center;
color:white;
padding-top:23vh;
}
.contact_section{
height:93vh;
background-color: grey;
}
.hero{
height:750px;
}
h1{
font-family:'Roboto', sans-serif;
color: white;
}
.container-fluid{
padding: 60px 50px;
}
.bg-grey{
background-color: #f6f6f6;
}
.logo-small{
color: #000000;
font-size: 50px;
}
.logo{
color: #000000;
font-size: 200px;
}
#media screen and (max-width: 768px){
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.fa-angle-down{
color: #4D5061;
}
footer{
height:10vh;
}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Liam Docherty's Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header>
<div id="logo">
<img src="http://placehold.it/60x60" alt=""></div>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Units</li>
<li>Clients</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<section class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section2">
<div class="banner">
<h1>What I can offer you</h1>
<p> Feel free to contact me regarding any </p>
<div class="container-fluid text-center">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>Availability</h4>
<p>You can expect a response with 24 hours of the sent message. </p>
</div>
</div>
</div>
</div>
</section>
<section id="contact-me" class="contact_section">
</section>
</body>
<footer>
</footer>
</html>
At this moment I am busy with making a nav exactly like this:
Right now I have made this:
How can I fix that logo and dividers like the first image?
I make the website with Bootstrap and I have add some elements you see below in
html, body{
}
nav{
background:#fff;
width:100%;
padding:0px 30px;
}
.navbar-header{
display:block;
text-align:center;
height:80px;
}
.navbar-header img{
margin:0px auto;
height:45px;
}
a.navbar-brand{
padding:20px 30px;
position: absolute;
width:auto;
left:0;
top:0;
text-align:center;
margin:auto;
background-color: red;
}
.navbar-collapse.collapse{
padding:0px;
white-space: nowrap;
}
.navbar{
background:#fff;
width:100%;
margin:0px;
padding-left: 0px;
padding-right: 15px;
z-index:10;
border: 0px solid transparent;
border-radius:0px
}
.navbar > div{
margin-left: 0px;
margin-right: 0px;
}
.collapse, .nabar-right{
margin-right: 0px!important;
}
.navbar ul li a{
background:none;
text-transform:uppercase;
font-family: 'Open Sans', sans-serif;
font-weight:300;
font-size:14px;
color:#000;
letter-spacing: 0.035em;
text-decoration: none;
}
ul.nav li.open ul.dropdown-menu li{
padding:0px 0px;
}
.navbar ul li a:hover{
background:#ffffff;
color:#22257a!important;
}
.navbar ul li a:active{
background:none;
}
.nav-selected{color:#22257a!important; font-weight:700;}
.navbar a.nav-selected{color:#22257a!important; font-weight:700;}
.navbar ul li.nav-path-selected .dropdown-toggle{color:#22257a; font-weight:700;}
/*-------------------------------------------------*/
.caret {
color: #000000;
-webkit-transition: color 0.2s; /* Safari */
transition: color 0.2s;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
background-color: transparent;
color: #000000 !important;
}
.dropdown-menu {
border:1px solid #f1f1f1;
border-radius: 0;
box-shadow: none;
margin-top: -15px;
padding:0px 0px;
}
.dropdown-menu li {
padding: 2px 16px 2px 16px;
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
background-color: transparent;
}
.dropdown-menu a {
color: #777777 !important;
}
.dropdown-menu > li > a {
padding: 8px 14px;
}
div#ccm-highlighter{z-index:1000; min-height:30px;}
hr {
width: 120px;
border-top: 4px solid black !important;
}
i {
color: white;
}
.intro-top {
width: 100%;
height: 50px;
background-color: red;
float: left;
}
header {
width: 100%;
height: 50px;
background-color: #4d4d4d;
}
header p{
color:white;
}
header i {
float:left;
padding-right: 10px;
}
a{
text-decoration: none !important;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1, user-scalable=0" name="viewport">
<title>Title</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobiel.css">
<link rel="stylesheet" href="css/tablet.css">
<link rel="stylesheet" href="css/desktop.css">
<link rel="stylesheet" href="typography.css">
<link href='######' rel='stylesheet' type='text/css'>
<!--[if gte IE 9]><style type="text/css">.gradient {filter: none;}</style><![endif]-->
<!--[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]-->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<a class="navbar-brand" href="#">
<img src="http://itavisen.no/wp-content/uploads/imported/5064692.jpg">
</a>
</div>
<div class="col-sm-2">
<i class="fa fa-phone" aria-hidden="true"></i><p>06 12345678</p>
</div>
<div class="col-sm-2">
<i class="fa fa-envelope" aria-hidden="true"></i><p>#mail.nl</p>
</div>
</div>
</div>
</header>
<div class="container">
<nav class="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
<span>Menu</span>
<span class="glyphicon glyphicon-menu-hamburger">
</button>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="dropdown">
page2 <span class="caret"></span>
<ul class="dropdown-menu arrow_box">
<li>page1drop</li>
<li>page2drop</li>
</ul>
</li>
<li>page3</li>
<li>Page4</li>
<li role="separator" class="divider">Contact</li>
</ul>
</div>
</nav>
</div>
<div class="intro-top">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Doe,
For the logo you may try z-index to put it in the front of the webpage.
And for the "li" you should use padding and border to get the same result.
If you want to practice by watching code you should find some bootstrap menu template.
e.g. : http://blog.themearmada.com/20-inspiring-bootstrap-menu-examples/
I want my image in carousel to become responsive especially the height of the image. The width is okay but the height it makes the image only half. Can someone help me? Give me some ideas please. I just want only 500px of height and I achieved that but i want my image height to become 100%.
Here is the picture
Here is the full image
Here is the html code.
<!DOCTYPE html>
<html>
<head>
<title>Student Portal</title>
<link rel="stylesheet" href ="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link href="style.css" rel ="stylesheet">
<link rel="shortcut icon" type="img/png" href="img/asd.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class ="top-bar-dark">
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-7">
<div class="top-bar-socials">
<a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts">
<i class="fa fa-facebook"></i>
</a>
<a href="https://twitter.com/official_gapc">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
<div class="col-sm-8 col-xs-5 text-right">
<ul class="list-inline top-dark-right">
<li class="hidden-sm hidden-xs"><i class="fa fa-envelope"></i> gapc_school#yahoo.com.ph</li>
<li class="hidden-sm hidden-xs"><i class="fa fa-phone"></i> (02) 282-9036</li>
<li><i class="fa fa-lock"></i> Login</li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="40">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
<span class="icon-bar" ></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="img/logo.png" alt="GAPC" class="img-responsive">
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
About us
<ul class="dropdown-menu">
<li>History</li>
<li>Mission and Vision</li>
</ul>
<li>Admissions</li>
<li>Contact us</li>
<li>Faculty Portal</li>
</ul>
</div>
</div>
</nav>
<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="img/tae.jpg" alt="Chania">
</div>
<div class="item">
<img src="img/tubol.jpg" alt="Chania ">
</div>
<div class="item">
<img src="img/tulok.jpg" alt="Flower">
</div>
<div class="item">
<img src="img/ebak.jpg" alt="Flower">
</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>
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
this is my css code.
.navbar-header{
height: 74px;
}
.navbar-toggle{
position: relative;
top: 15px;
}
.navbar-default .navbar-nav > li > a {
font-weight: 560;
color: #949494;
display: block;
padding: 5px 35px 2px 45px;
border-bottom: 3px solid transparent;
line-height: 70px;
text-decoration: none;
transition: border-bottom-color 0.5s ease-in-out;
-webkit-transition: border-bottom-color 0.5s ease-in-out;
}
.nav.navbar-nav > li > a:hover, .nav.navbar-nav > li.active a{
color:#a92419;
border-bottom-color: #a92419;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
color: #a92419;
background-color: transparent;
}
.navbar-default{
background-color:#fff;
margin: 0;
}
.nav>li>a {
position: relative;
}
.navbar-default .navbar-right > li > a {
padding: 0 20px;
margin-right:6px;
}
.nav.navbar-nav > li{
display: :inline-block;
}
.nav.navbar-nav{
list-style-type:none;
}
.nav.navbar-nav > li > a:hover{
color:#a92419;
border-bottom-color: #a92419;
}
.navbar-default .navbar-toggle .icon-bar {
background-color:#a92419;
margin:0 0 4px;
width: 25px;
height: 5px;
margin-right: 13px;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
background: none;
}
button.navbar-toggle{
background:none;
border:none;
color:#000;
margin: 0px;
}
.navbar.affix {
width: 100%;
qposition: fixed;
top:0;
background-color: rgba(255,255,255,0.7);
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu>li>a:hover {
color:#a92419;
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 3em;
color: #333;
white-space: nowrap;
}
.dropdown:hover a.dropdown-toggle {
border-bottom-color: #a92419;
color:#a92419;
}
.top-bar-dark {
background-color: #a92419;
}
.top-bar-light {
background-color: #f3f3f3;
}
.top-bar-light .top-dark-right li {
border-color: #ddd;
}
.top-bar-light .top-dark-right li a:hover {
color: #32c5d2;
}
.top-bar-socials {
line-height: 30px;
padding-top: 5px;
}
.top-bar-socials:after {
display: table;
clear: both;
content: "";
}
.top-bar-socials a {
margin: 0px 8px;
text-decoration: none;
font-size:18px;
color: #fff;
}
.top-dark-right {
margin: 0px;
padding: 0px;
}
.top-dark-right li {
line-height: 40px;
border-left: 1px solid #932015;
padding: 0px 10px;
}
.top-dark-right li, .top-dark-right li a {
color: #d7d7d7;
font-size: 12px;
}
.top-dark-right li i {
margin-right: 5px;
}
.top-dark-right li a:hover {
color: #fff;
}
a.login{
text-decoration: none;
}
.fa-facebook:hover{
color:#3b5998;
}
.fa-twitter:hover{
color:#1dcaff;
}
.fa-linkedin:hover{
color:#007bb5;
}
.carousel-control.left, .carousel-control.right {
background: none !important;
filter: progid: none !important;
outline: 0;
}
.carousel-inner{
height: 500px;
}
.carousel-inner img{
height: auto;
width: 100%;
}
#media (max-width: 240px){
.img-responsive{
padding-top: 5px;
width: 190px;
height: 60px;
}
.navbar-default .navbar-toggle {
padding-right: 0px;
}
}
#media(min-width: 241px) and (max-width: 320px){
.img-responsive{
width: 240px;
height: 60px;
margin-left: 5px;
}
.navbar-default .navbar-toggle {
padding-right: 0px;
}
}
#media(min-width: 321px) and (max-width: 480px){
.img-responsive{
width: 250px;
height: 65px;
margin-left:15px;
}
.navbar-toggle{
padding-top: 10px;
}
}
#media(min-width: 481px) and (max-width: 767px){
.img-responsive{
width: 280px;
height: 70px;
margin-left:15px;
}
.navbar-toggle{
padding-top: 10px;
}
}
#media(min-width: 768px) and (max-width: 1024px){
.img-responsive{
width: 260px;
height:70px;
}
.navbar-default .navbar-right > li > a {
padding: 0 10px;
margin-right:6px;
}
}
Try this
.item.active img {
display: block;
width: 100vw;
height: 100vh;
object-fit: contain;
}
Try 100vh, CSS3 gives us viewport-relative units. 100vw means 100% of the viewport width. 100vh; 100% of the height. Very handy when doing full screen slides.
try this :
.carousel-inner img{
height: 100vh;
width: 100%;
}
Note : for internet explorer it's supported only by ie11, for other browsers there is no problem.
UPDATE :
add this class to your style :
.item{
height: 500px;
}
.item img {
width: 100%;
height: 100%;
}
Here is a Demo : https://jsfiddle.net/qd4xhzvm/
I solved it myself by adding a max-height to .carousel-inner img. Thanks for ur effort guys. hehe.
.carousel-inner img{
width: 100%;
max-height: 500px;
}
.carousel-inner{
height: 500px;
}
There's a gray box on the middle of my website. I've double checked all of the code, and I can't figure out what's creating this. I'm sorry for asking such a stupid question, I'm quite new to this. Here's the code -
.nav a {
color: black;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 20px;
color: #fff;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.neighborhoood-guides {
border-bottom: 1px solid #dbdbdb
}
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#fff;
}
.menu {
width:1000px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
}
.menu a {
transition:all linear 0.15s;
color:black;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:dodgerblue;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:11px;
}
.menu > ul > li > a {
padding:10px 10px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
text-transform:uppercase;
font-weight:bold;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#fff;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#fff;
}
.sub-menu li {
display:block;
font-size:11px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
text-transform: uppercase;
font-weight:bold
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#fff;
}
.neighborhood-guides h2 {
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.neighborhood-guides p {
font-size: 24px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.socialmedia {
background: #498FCC;
}
.neighborhood-guides {
padding: 20px 20px;
}
.allrights li p {
color: white;
font-family: 'Shift', sans-serif;
}
.whole {
background-image:url('http://i.imgur.com/3ay8hjS.jpg');
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<div class="whole">
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>About Us</li>
<li> Contact Us</li>
<li>
Destinations <span class="arrow">▼</span>
<ul class="sub-menu">
<li>Airlines</li>
<li>Hotels</li>
</ul>
</li>
<li>Cruiselines</li>
<li>Weddings & Honeymoons</li>
<li>
Useful Information <span class="arrow">▼</span>
<ul class="sub-menu">
<li>Travel Insurance</li>
</ul>
</li>
<li>Careers</li>
</ul>
</nav>
</div>
<div class="jumbotron">
<div class="container">
</div>
</div>
<center>
<h2></h2>
<p></p>
<h1></h1>
<div class="row">
<div class="col-md-4">
<div class="Thumbnail">
<img src="">
</div>
</div>
<div class="col-md-4">
<div class="Thumbnail">
<img src="">
</div>
</div>
<div class="col-md-4">
<div class="Thumbnail">
<image src="">
</div>
</div>
</div>
</center>
<center>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3></h3>
<p></p>
<p></p>
</div>
<div class ="col-md-4">
<h3></h3>
<p>.</p>
<p></p>
</div>
<div class ="col-md-4">
<h3></h3>
<p></p>
<p></p>
</div>
</div>
</div>
</center>
</div>
<div class="socialmedia">
<nav class="menu">
<ul class="clearfix">
</ul>
</nav>
</div>
<center>
<h2></h2>
<h2></h2>
<h2></h2>
</center>
<h2></h2>
<h2></h2>
<div class="socialmedia">
<nav class="menu">
<ul class="clearfix">
<div class="allrights">
<center><li><p>Travel Away Corporation All Rights Reserved 2015</p></li></center>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
Remove the following attribute: background-color: #eee; */, otherwise, I've put your same code on the fiddle and didn't see any issue.
Replace your .jumbotron class with this
.jumbotron {
padding: 30px;
margin-bottom: 30px;
color: inherit;
}
Whenever you have such a problem, right click on your mouse and select Inspect element and then click on the html element (which has css applied on it) and see which properties are checked and which are not. You should easily fix your problem then.
This is a broad question because you don't say what you want to appear there instead of this large grey square, but to answer your specific question: remove the jumbotron markup from the HTML and it will disappear:
.nav a {
color: black;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 20px;
color: #fff;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.neighborhoood-guides {
border-bottom: 1px solid #dbdbdb
}
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#fff;
}
.menu {
width:1000px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
}
.menu a {
transition:all linear 0.15s;
color:black;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:dodgerblue;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:11px;
}
.menu > ul > li > a {
padding:10px 10px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
text-transform:uppercase;
font-weight:bold;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#fff;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#fff;
}
.sub-menu li {
display:block;
font-size:11px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
text-transform: uppercase;
font-weight:bold
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#fff;
}
.neighborhood-guides h2 {
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.neighborhood-guides p {
font-size: 24px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.socialmedia {
background: #498FCC;
}
.neighborhood-guides {
padding: 20px 20px;
}
.allrights li p {
color: white;
font-family: 'Shift', sans-serif;
}
.whole {
background-image:url('http://i.imgur.com/3ay8hjS.jpg');
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<div class="whole">
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>About Us</li>
<li> Contact Us</li>
<li>
Destinations <span class="arrow">▼</span>
<ul class="sub-menu">
<li>Airlines</li>
<li>Hotels</li>
</ul>
</li>
<li>Cruiselines</li>
<li>Weddings & Honeymoons</li>
<li>
Useful Information <span class="arrow">▼</span>
<ul class="sub-menu">
<li>Travel Insurance</li>
</ul>
</li>
<li>Careers</li>
</ul>
</nav>
</div>
<center>
<h2></h2>
<p></p>
<h1></h1>
<div class="row">
<div class="col-md-4">
<div class="Thumbnail">
<img src="">
</div>
</div>
<div class="col-md-4">
<div class="Thumbnail">
<img src="">
</div>
</div>
<div class="col-md-4">
<div class="Thumbnail">
<image src="">
</div>
</div>
</div>
</center>
<center>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3></h3>
<p></p>
<p></p>
</div>
<div class ="col-md-4">
<h3></h3>
<p>.</p>
<p></p>
</div>
<div class ="col-md-4">
<h3></h3>
<p></p>
<p></p>
</div>
</div>
</div>
</center>
</div>
<div class="socialmedia">
<nav class="menu">
<ul class="clearfix">
</ul>
</nav>
</div>
<center>
<h2></h2>
<h2></h2>
<h2></h2>
</center>
<h2></h2>
<h2></h2>
<div class="socialmedia">
<nav class="menu">
<ul class="clearfix">
<div class="allrights">
<center><li><p>Travel Away Corporation All Rights Reserved 2015</p></li></center>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>