Jump to content

  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

John Hebert Trindade

Link href

By John Hebert Trindade, in CSS

Recommended Posts

John Hebert Trindade    0

John Hebert Trindade
Posted (edited)

Bom dia pessoal, em alguma parte do meu código css estou desabilitando meus href sem querer, isso acontece quando a tela fica inferior a 767px.

Por favor ajudem, já estou cansado de olhar e não consigo encontrar. 

/* Base */
* {
	outline:none;
	}
	
html, body {
	height: 100%;
	}
	
body {
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	line-height: 1.6em;
	color: #8c8c8c;
	background-color: #fff;
	}
	
h1, h2, h3, h4, h5, h6 {
	font-family: 'Open Sans', sans-serif;
	}
	
a {
	color: #404040;
	}
	
a:hover {
	color: #404040;
	transition-property: all;
	transition-duration: 0.3s;
	transition-timing-function: linear;
	}
	
a.none:hover {
	text-decoration: none;
	}

/* Header */
.logo{
	background-image: url(img/logotipo.png); 
	background-size: contain; 
	background-position:center center; 
	background-repeat: no-repeat;
	font-size:0; 
	width:350px; 
	height: 150px;
	}
	
.top {
	background: linear-gradient(to right, #efefef, #4169E1);
	padding: 5px 0;
	color: #fff;
	}
	
.top p {
	margin: 0;
	}
	
.top ul {
	margin: 0;
	padding: 0;
	}
	
.top li i {
	color: #fff;
	}
	
.top li a {
	color: #fff;
	}
	
.top li a:hover {
	text-decoration: none;
	}
	
.top li a:hover,.top li a:hover i {
	color: #005FA6;
	transition-property: all;
	transition-duration: 0.3s;
	transition-timing-function: linear;
	}

/* Menu */
.navbar {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	margin-bottom: 0;
	}
	
.navbar .container {
	position: relative;
	}
	
.navbar-default {
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	width: 100%;
	border: none;
	border-bottom: 1px solid #e7e7e7;
	background-color: #fff;
	}
	
.navbar-default .navbar-nav > li > a {
	color: #404040;
	font-weight: normal;
	font-size: 13px;
	}
	
.navbar-default .navbar-nav > li > a:hover {
	background-color: transparent;
	color: #005FA6;
	}
	
.navbar-default .navbar-nav > .open > a,.navbar-default .navbar-nav > .open > a:hover,.navbar-default .navbar-nav > .open > a:focus {
	background-color: transparent;
	color: #005FA6;
	}
	
.navbar-default .navbar-nav .active > a,.navbar-default .navbar-nav .active > a:hover,.navbar-default .navbar-nav .active > a:focus {
	color: #005FA6;
	background-color: transparent;
	}
	
.navbar-default .navbar-toggle {
	margin: 10px 0 0 15px;
	}
	
.navbar-default .navbar-toggle,.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus {
	border: none;
	background: #f3f3f3;
	}
	
.navbar-default .navbar-toggle i {
	font-size: 31px;
	}
	
.navbar-default .navbar-collapse {
	float: right;
	border-top: none;
	padding-left: 0;
	padding-right: 0;
	}
	
.navbar-brand>img {
	padding: 5px;
	}

@media screen and (max-width: 768px) {
	.navbar-default .navbar-collapse {
		padding-left: inherit;
		padding-right: inherit;
		}
		}
		
@media screen and (max-width: 992px) {
	.navbar-default .navbar-collapse {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		max-height: none;
		}
	}
		
@media (min-width:768px) {
	.navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand {
		margin-left: 0;
		}
	}

.main-navbar-nav {
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
	transition: all 0.3s linear;
	}
	
.main-navbar-nav > li > a {
	padding-top: 30px;
	padding-bottom: 30px;
	line-height: 1;
	}
	
.main-navbar-nav li > .dropdown-menu {
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	min-width: 225px;
	border: none;
	border-top: 2px solid #005FA6;
	}
	
.main-navbar-nav li > .dropdown-menu > li > a {
	padding: 10px;
	position: relative;
	color: #404040;
	line-height: 1.12857143;
	font-size: 12px;
	}
	
.main-navbar-nav li > .dropdown-menu > li > a:hover,.main-navbar-nav li > .dropdown-menu > li > a:focus {
	color: #005FA6;
	background-color: transparent;
	}
	
.main-navbar-nav li > .dropdown-menu > li > a i {
	position: absolute;
	right: 20px;
	top: 50%;
	margin-top: -8px;
	font-size: 16px;
	}

@media screen and (min-width: 993px) {
	.main-navbar-nav .dropdown:hover > .dropdown-menu {
		display: block;
		}
		
		.main-navbar-nav .dropdown:hover > .dropdown-menu .dropdown:hover .dropdown-menu {
			left: 225px;top: 0;
			margin-top: -2px;
			}
		}
		
@media screen and (max-width: 992px) {
	.main-navbar-nav > li {
		border-bottom: 1px solid #f3f3f3;
		}
		
		.main-navbar-nav > li:last-child {
			border-bottom: none;
			}
			
			.main-navbar-nav > li > a {
				padding-top: 12px;
				padding-bottom: 12px;
				}
			}

.navbar-brand {
	height: auto;
	padding: 0;
	}

@media screen and (max-width: 992px) {
	.navbar-toggle {
		display: block;
		}
		
		.navbar-collapse.collapse {
			display: none !important;
			}
			
			.main-navbar-nav.navbar-nav,.main-navbar-nav.navbar-nav > li {
				float: none !important;
				}
				
				.navbar-collapse.collapse.in {
					display: block !important;
					overflow-y: auto !important;
					}
				}

/* Hero */
.hero_area {
	background-image: url(img/hero.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 475px;
	padding: 0;
	}
	
.hero_content {
	padding: 80px 0;
	}
	
.hero_content h1 {
	text-shadow: 1px 1px 2px rgba(0,0,0,0.75);
	color: #005FA6;
	font-weight: 700;
	font-size: 42px;
	}
	
.hero_content h2 {
	text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
	color: #000;
	font-weight: 700;
	font-size: 32px;
	margin-top: 0;
	width: 55%;
	line-height: 38px;
	text-align:center;
	}

/* Boxes */
.boxes_area {
	padding-top: 40px;
	padding-bottom: 10px;
	padding-left: 0;
	padding-right: 0;
	background-color: #f8f8f8;
	}
	
.box {
	position: relative;
	}
	
.box h3 {
	position: relative;
	margin-bottom: 20px;
	padding-bottom: 20px;
	}

@media (min-width:769px) {
    .boxes_area div[class*="col-"]:after {
		content: " ";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 1px;
		height: 100%;
		background-color: #ebebeb;
		}
		
    .boxes_area div[class*="col-"]:last-child:after {
		display: none;
		}    
}

/* Home */
.home_content h2:after,.box h3:after {
	content: '';
	position: absolute;
	width: 30px;
	background-color: #005FA6;
	height: 2px;
	left: 0;
	bottom: 0;
	}
	
.box i {
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	color: #005FA6;
	font-size: 45px;
	}
	
.boxes_area h3 {
	font-size: 16px;
	font-weight: 500;
	margin-top: 0;
	margin-bottom: 18px;
	}
	
.boxes_area .box p{
	text-align: justify;
	padding-top:5%;
	}
	
.services {
	padding-top: 50px;
	padding-bottom: 50px;
	}
	
h2.section-title {
	text-align: center;
	color: #404040;
	}
	
.services p.desc {
	text-align: center;
	font-size: 13px;
	margin-bottom: 20px;
	}
	
.services .media {
	margin-top: 30px;
	}
	
.services .media i {
	font-size: 45px;
	color: #005FA6;
	}
	
.services .media h4 {
	font-size: 15px;
	font-weight: 600;
	color: #404040;
	}
	
.services .media p {
	text-align: justify;
	}

/* Veja Também */
.home-area {
	padding-bottom: 50px;
	}
	
.home_content h2 {
	position: relative;
	font-size: 17px;
	font-weight: 600;
	padding-bottom: 20px;
	color: #404040;
	margin-bottom: 30px;
	}
	
.home_list ul {
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
	}
	
.home_list ul li {
	list-style: none;
	}
	
.home_list .thumbnail {
	border: none;
	padding: 0;
	}
	
.thumbnail .caption {
	padding: 9px;
	color: #404040;
	padding-left: 0;
	padding-right: 0;
	}
	
.home_list h3 {
	font-size: 16px;
	font-weight: 600;
	margin-top: 10px;
	margin-bottom: 10px;
	color: #404040;
	}
	
.home_list p {
	color:#8c8c8c;
	}
	
.home_list a.btn {
	font-size: 13px;
	padding: 0;
	color: #005FA6;
	}
	
.home_bottom .row {
	margin-left: -5px;
	margin-right: -5px;
	}
	
.home_bottom div[class*="col-"] {
	padding-right: 5px;
	padding-left: 5px;
	position: relative;
	}
	
/* Referencias */
.carousel-control{ 
	width:  4%; 
	}
	
.carousel-control.left,.carousel-control.right {
	margin-left:0;
	background-image:none;
	}

@media (max-width: 767px) {
	.carousel-inner .active.left {
		left: -100%;
		}
		
		.carousel-inner .next {
			left: 100%;
			}
			
			.carousel-inner .prev {
				left: -100%;
				}
				
				.active > div {
					display:none;
					}
					
					.active > div:first-child {
						display:block;
						}
					}
					
@media (min-width: 767px) and (max-width: 992px ) {
	.carousel-inner .active.left {
		left: -50%;
		}
		
		.carousel-inner .next {
			left:  50%;
			}
			
			.carousel-inner .prev {
				left: -50%;
				}
				
				.active > div {
					display:none;
					}
					
					.active > div:first-child {
						display:block;
						}
						
						.active > div:first-child + div {
							display:block;
							}
						}
						
@media (min-width: 992px ) {
	.carousel-inner .active.left {
		left: -25%;
		}
		
		.carousel-inner .next {
			left: 25%;
			}
			
			.carousel-inner .prev {
				left: -25%;
				}
			}

/* Rodape */
footer.site-footer {
	background: #e6e6e6;
	padding: 20px 0 0;
	float: left;
	width: 100%;
	}
	
footer.site-footer h4 {
	font-size: 17px;
	font-weight: 500;
	}
	
footer.site-footer ul {
	padding-left: 0;
	margin-bottom: 20px;
	list-style: none;
	}
	
footer.site-footer ul a {
	color: #666;
	font-size: 13px;
	}
	
footer.site-footer p {
	font-size: 13px;
	}
	
footer.site-footer p a {
	color: #666;
	}
	
p.text {
	color: #666;
	}
	
#copyright {
	background: #404040;
	color: #ccc;
	padding: 15px 0;
	font-size: 12px;
	margin-top: 20px;
	}
	
#copyright p{
	margin: 0;
	float: left;
	font-size: 12px; 
	text-align: center;
	}
	
.site-footer li a:hover {
	color:#005FA6;
	}
	
ul.big li {
	float: left;
	width: 49%;
	}
	
ul.big li:nth-child(2n) {
	margin-left: 2%;
	}

@media (max-width:462px) {
	.fbox:last-child {
		margin-top: 20px;
		float: left;
		width: 100%;}
	}

/* Maillist */
.login-form-1 {
	max-width: 300px;
	border-radius: 5px;
	display: inline-block;
	}
	
.main-login-form {
	position: relative;
	}
	
.login-form-1 .form-control {
	border: 0;
	box-shadow: 0 0 0;
	border-radius: 0;
	background: transparent;
	color: #555555;
	padding: 7px 0;
	font-weight: bold;
	height:auto;
	}
	
.login-form-1 .form-control::-webkit-input-placeholder {
	color: #999999;
	}
	
.login-form-1 .form-control:-moz-placeholder,.login-form-1 .form-control::-moz-placeholder,.login-form-1 .form-control:-ms-input-placeholder {
	color: #999999;
	}
	
.login-form-1 .form-group {
	margin-bottom: 0;
	border-bottom: 2px solid #fff;
	padding-right: 20px;
	position: relative;
	}
	
.login-form-1 .form-group:last-child {
	border-bottom: 0;
	}
	
.login-group {
	background: #efefef;
	color: #999999;
	border-radius: 8px;
	padding: 10px 20px;
	}
	
.login-group-checkbox {
	padding: 5px 0;
	}
	
.login-form-1 .login-button {
	position: absolute;
	right: -25px;
	top: 50%;
	background: #ffffff;
	color: #999999;
	padding: 11px 0;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	border: 5px solid #efefef;
	border-radius: 50%;
	transition: all ease-in-out 500ms;
	}
	
.login-form-1 .login-button:hover {
	color: #555555;
	transform: rotate(450deg);
	}
	
.login-form-1 .login-button.clicked {
	color: #555555;
	}
	
.login-form-1 .login-button.clicked:hover {
	transform: none;
	}
	
.login-form-1 .login-button.clicked.success {
	color: #2ecc71;
	}
	
.login-form-1 .login-button.clicked.error {
	color: #e74c3c;
	}

/* Breadcrumb */
.bread_area {
	border-bottom: 1px solid #e7e7e7;
	padding: 10px 0;
	margin-bottom: 40px;
	}
	
.breadcrumb {
	margin: 0;
	background: #fff;
	padding: 0;
	}

/* Page */
.page-main {
	float: left;
	width: 100%;
	background-color: #fff;
	margin-bottom: 30px; 
	line-height: 3.0em; 
	text-align: justify;
	}
	
.contact{
	line-height: 2.0em;
	}

/* Entry (Contacto) */
.entry{
	padding: 5%;
}

/* Category - Florista - frota */
.category-main {
	float: left;
	width: 100%;
	background-color: #fff;
	margin-bottom: 30px;
	}
	
.category-content h3 {
	font-size: 19px;
	margin-bottom: 20px;
	}
	
.category-main .media {
	margin-top: 30px;
	}
	
.category-main .media:first-child{
	margin-top: 0;
	}
	
.category-main ul li {
	list-style: none;
	position: relative;
	}
	
.category-main .media-left {
	padding-right: 20px;
	}
	
.category-main .meta {
	position: absolute;
	bottom: 0;
	border-bottom: 2px solid #e7e7e7;
	width: 71%;
	min-height: 30px;
	line-height: 24px;
	padding-bottom: 3px;
	}
	
.category-main .category-meta {
	width: 67%;
	}
	
.category-main .meta .arc-comment {
	float: left; 
	margin-right: 5px; 
	border-right: 2px solid #e7e7e7;
	padding-right: 7px;
	}
	
.category-main .meta .arc-comment a, .archive ul.arc-share li a {
	color: #333;
	font-size: 15px;
	}
	
.category-main .meta .arc-comment a:hover, .archive ul.arc-share li a:hover {
	text-decoration: none;
	color: #ff1515;
	}
	
.category-main .meta .arc-date {
	float: right;
	font-size: 15px;
	color: #333;
	}
	
.category-main ul.arc-share {
	float: left;
	margin: 0;
	padding: 0;
	margin-right: 5px;
	}
	
.category-main ul.arc-share li{ 
	float: left;
	list-style: none;
	margin-left: 10px;
}

.category-main .archive-cat a {
	color: #ff1515;
	}
	
.category-main .archive-cat a:hover {
	color: #333; 
	text-decoration: none;
	}

/* Form Contact */

.page-main .tipo_contacto{
	text-align:center;
	}
	
.page-main form p{
	line-height:2.0em;
	}
	
.page-main form input[type="text"], form input[type="email"], form input[type="url"]{
	padding: 0; 
	width:100%; 
	height: 30px;
	}
	
.page-main form textarea{
	width:100%; 
	height: 200px;
	}

/* showroom */
.category-main ul ul{
	display: none;
	}

/* Sidebar */
.widget h4,h2.page-title, h2.category-title {
	position: relative;
	margin-top: 0;
	padding-bottom: 20px;
	margin-bottom: 20px;
	font-size: 17px;
	font-weight: 700;
	color: #404040;
	width: 100%;
	}
	
.widget h4 {
	font-size: 15px;
	margin-left: 15px;
	}
	
.widget h4:after,h2.page-title:after, h2.category-title:after {
	content: '';
	position: absolute;
	width: 30px;
	background-color: #005FA6;
	height: 2px;
	left: 0;
	bottom: 0;
	}
	
.widget {
	margin-bottom: 30px;
	}
	
.sidebar ul {
	padding-left: 15px;
	padding-right: 15px;
	margin: 0;
	}
	
.sidebar ul li {
	list-style: none;
	}
	
.sidebar ul li a {
	padding: 3px 15px;
	display: block;
	margin-left: -15px;
	margin-right: -15px;
	color: #404040;
	}
	
.sidebar li.current a {
	background-color: #005FA6;
	margin-left: -15px;
	margin-right: -15px;
	color: #FFFFFF;
	}
	
.sidebar ul li a:hover {
	background-color: #005FA6;
	color: #FFFFFF;
	text-decoration: none;
	transition-property: all;
	transition-duration: 0.2s;
	transition-timing-function: linear;
	}

/* Responsive */
@media screen and (max-width:462px) {
	.logo{
		background-image: url(img/logotipo.png); 
		background-size: contain; 
		background-position:center center; 
		background-repeat: no-repeat;
		font-size:0; 
		width:250px; 
		height: 100px;
		}
		
    .top {
		text-align: center;
		}
		
		.top ul.list-inline{
			float: none !important;
			text-align: center;
			}
			
    .hero_content {
		padding: 80px 0;
		}
		
    .hero_content h1 {
		font-size: 32px;
		}
		
    .hero_content h2 {
		width: 90%;
		font-size: 21px;
		}
	
    /*.boxes_area .row {margin-left: -20px;margin-right: -20px;}*/
    .boxes_area .box p {
		margin-bottom: 30px;
		}
		
    .services .media .media-left {
		padding-right: 15px;
		}
    
    .category-content .media-body {
		float: left;
		position: relative;
		width: 100%;
		}
		
	.category-content .media-body h3 {
		margin-top: 20px;
		}
		
    .category-main .meta {
		position: relative;
		width: 100%;
		}
		
    .category-main .meta .pull-left {
		margin-left: 40px;
		}
		
    .category-main .meta .pull-right {
		display: none;
		}
    
    .sidebar {
		margin-top: 40px;
		}
}

@media (min-width:463px) and (max-width:768px) {
	.hero_content {
		padding: 60px 0;
		}
		
    .hero_content h1 {
		font-size: 25px;
		}
		
    .hero_content h2 {
		padding-top: 2%; 
		width: 55%;
		font-size: 20px;
		}
	
	.logo{
		background-image: url(img/logotipo.png); 
		background-size: contain; 
		background-position:center center; 
		background-repeat: no-repeat;
		font-size:0; 
		width:250px; 
		height: 100px;
		}
		
    .fbox {
		float: left;
		}
		
    .fbox:nth-child(3) {
		float: right !important;
		}
}

 

Edited by John Hebert Trindade

Share this post

Link to post
Share on other sites

John Hebert Trindade    0

John Hebert Trindade
Posted

no arquivo html tenho da seguinte forma: 

<section class="home-area">
            <div class="home_content">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12"><h2 class="sub_title">VEJA TAMBÉM</h2></div>
                        <div class="home_list">
                            <ul>
                                <li class="col-md-3 col-sm-6 col-xs-12">
                                    <div class="thumbnail">
                                        <img src="img/catalogo.jpg" alt="Post">
                                        <div class="caption">
                                            <h3><a href="florista.php">Lounge Flowers</a></h3>
                                            <p>Conheça o nosso serviço de florista que temos a sua disposição</p>
                                            <a href="florista.php" class="btn btn-link" role="button">Mais</a>
                                        </div>
                                    </div>                                        
                                </li>
							</ul>
						</div>
					</div>
				</div>
			</div>
</section>

 

Share this post

Link to post
Share on other sites

John Hebert Trindade    0

John Hebert Trindade
Posted

Acabei de fazer um teste, não usando o arquivo css, ou seja deixando sem formatação nenhuma e mesmo assim não funciona, isso quer dizer que deve estar no arquivo javascript. e se for eu não manjo nada. 😐

Share this post

Link to post
Share on other sites

John Hebert Trindade    0

John Hebert Trindade
Posted

O que estava ocorrendo é que uma camada no CSS estava sobrepondo a outra. Quem conseguiu ver foi um utilizador de outro site. Para corrigir basta no CSS add:

  

.home_list{
  	position: relative;
  	z-index: 1;
}

 

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Go To Topic Listing CSS
×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept