one page of my website is locking like that:
http://www.pflanzspass.bplaced.net/
Yesterdy I tried to integrate a slideshow:
http://www.pflanzspass.bplaced.net/indextest.php
The slideshow is working, but now there are some new layout problems:
now:
before:
I don't know why.
This is my new css-Code for the slideshow:
* {box-sizing: border-box}
/*body {
font-family: Verdana, sans-serif;
margin:0
}*/
.mySlides {display: none}
img {vertical-align: middle;}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #ffffff;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #999999;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #111111;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
This is the css-code, already online before added the slide-show css-code:
*{
margin: 0px;
padding: 0px;
}
body {
font-family:Verdana;
font-size:10px;
}
#wrapper{
width:1000px;overflow:hidden;
margin:0 auto 10px auto;background-image: url(./grafics/bg.gif);background-repeat:repeat-y;
}
/*-------------------------------------------------------------------*/
/* font-size */
/*-------------------------------------------------------------------*/
h1 {
font-size: 25px;
}
h2 {
font-size: 19px;
}
h3{
font-size:18px;
color:#660033;
}
h4, h5, h6 {
font-size: 16px;
}
p{
font-size: 14px;
margin-right:20px;
}
h2, h3, h4, h5, p{
margin-bottom:10px;
}
h5{
}
/*-------------------------------------------------------------------*/
/* links */
/*-------------------------------------------------------------------*/
a:link, a:visited, a:active, a:hover{
text-decoration:none;
color:#634142;
font-size:12px;
font-weight:bold;
}
a:active, a:hover{
text-decoration:underline;
}
/*-------------------------------------------------------------------*/
/* header */
/*-------------------------------------------------------------------*/
#header {
width:968px;
height:161px;
margin:0 13px 0 13px;
border:3px solid #000;
background-color: #000;
}
#header2{
width:974px;
height:65px;
padding:5px 0 0 0;
margin:0 13px 0 13px;
background:#fff;
clear:both;
}
#logo {
width:222px;
margin: 0 0 0 0;
padding: 0 5px 0 0;
float: left;
overflow: hidden;
}
#header-title {
height: 160px;
background: transparent url(banner_2.jpg) no-repeat 0 0;
float:left;
}
#ueberschrift {
padding:60px 0 0 20px;
color:#fff;
}
#ueberschrift p{
font-size:16px;
}
#content-header{
width:990px;height:60px;
padding:0 0 20px 10px;
}
#like{
width:77px;
margin:5px 30px 0 10px;
float:left;
}
#kaktus-banner{
width:468px;
margin:5px 0 0 129px;
float:left;
}
#wobinich{
width:964px;height:16px;
margin:0 13px 0 13px;
font-size:12px;
border-bottom:1px solid #000;
background:#fff;
float:left;padding:0 0 0 10px;
}
h2.title{
text-align:center;
height:40px;
font-size:30px;
background: transparent url(./grafics/bg-title1.gif) no-repeat 0px 35px;
}
h2.title2{
height:40px;
font-size:30px;
background: transparent url(./grafics/bg-title3.gif) no-repeat 0px 35px;
}
h2.gb{
height:30px;
background: transparent url(./grafics/bg-title3.gif) no-repeat 0px 25px;
}
/*-------------------------------------------------------------------*/
/* content */
/*-------------------------------------------------------------------*/
#content {
width:974px;
margin:0 13px 0 13px;
background:#fff;
float:left;
}
#content p{
line-height:24px;
}
#links{
width:185px;
margin:0 0 0 0;
float:left;
}
#mitte{
width:609px; /*609px*/
padding:10px 10px 0 10px;
float:left;
}
#mitte_a-z{
width:873px;
padding:10px 0 0 20px;
}
#mitte1{
width:767px;
padding:10px 10px 0 10px;
float:left;
}
#rechts{
width:160px;
margin:0 0px 10px 0;
float:right;
}
#film{
margin:10px 0 10px 182px;
}
#footer{
width:974px;height:30px;
font-size:12px;
line-height: 27px;
text-align:center;
color:#000;
border-top:1px solid #000;background:#fff;border-bottom:1px solid #000;background:#fff;
float:left;
}
#footer a{
font-weight:normal;
color:#000;
}
/*-------------------------------------------------------------------*/
/* navigation */
/*-------------------------------------------------------------------*/
.navtitle{
margin:0px;
background:#7fb37f;
text-align:center;
}
#navigationsleiste{
margin:0 16px 20px 0;padding:0 0 10px 0;
width:185px;background:#a5e8a5;
}
#navigationsleiste a{
display: block;
height: 20px;
padding:8px 0 0 19px;
color: #000;
text-decoration: none;
}
#navigationsleiste a:hover{
background: transparent url(./grafics/liste.gif) no-repeat 5px 12px;
}
#navigationsleiste a.aktiv{
background: transparent url(./grafics/liste.gif) no-repeat 5px 12px;
}
.link{
/*margin:0 16px -2000px 0;padding-bottom:2000px;*/
width: 185px;background:#a5e8a5;
}
.link a{
display: block;
height: 20px;
margin:2px;
padding:10px 0 10px 9px;
font-size:12px;
}
.link-re{
/*margin:0 0px -2500px 0;padding:0 0 2500px 0;*/
width: 160px;background:#a5e8a5;
}
.link-re a{
display: block;
height: 20px;
margin:0px;
padding:2px 0 0 20px;
font-size:12px;
font-weight:bold;
}
#zapp{
width:964px;height:20px;
margin:0 13px 0 13px;
font-size:12px;
background:#fff;
border-bottom:1px solid #000;
padding:10px 0 0 10px;
float:left;
}
.up{
margin:10px 0 10px 0px;
text-align:right;
}
.up a{
font-weight:bold;
}
.back{
margin:0 60px 0 0;
float:left
}
.zurueck{
float:left;
}
.ist{
float:left;
color:#a5a5a5;
margin-left:30px;
}
.vor{
margin:0 0 0 30px;
float:left;
}
/*-------------------------------------------------------------------*/
/* listenelemente */
/*-------------------------------------------------------------------*/
ul{
list-style-type:none;
}
li{
}
#mitte ul{
list-style-type:disc;
margin-left:15px;
}
#mitte li a{
}
ol{
font-size:14px;
margin:0 0 0 20px;
line-height:24px;
}
.cb{
clear:both;
}
img{
}
#table{
}
p.hn {
color: #870B0B;
}
p.se {
color:#057C11;
}
p.nanl {
color:#64057C;
}
p.bild {
float:left;
}
Remove height:20px form this style
.link a{
display: block;
height: 20px;
margin:2px;
padding:10px 0 10px 9px;
font-size:12px;
}
* {
box-sizing: border-box;
}
.link a {
display: block;
height: auto;
margin: 2px;
padding: 10px 0 10px 9px;
font-size: 12px;
}
I'm trying to use media queries in order to adapt image plus text to cellphone cases.
This is what I've tried and it was working properly, but not anymore:
HTML:
<section class="section">
<p id="title">Missão</p>
<div class="flex-container">
<div id="missao" class="col-3"><img src="js/missao.jpg"></div>
<div class="col-9" id="textoMissao">
<h3>Simplificar a vida nas organizações, aumentado
a criação de valor, é a nossa grande missão.</h3>
<p>Desafiar o desconhecido. Explorar possibilidades. Transpor barreiras.
Inovar. São estas as motivações que desde 1993 nos conduzem na busca
de soluções de gestão inovadoras que simplificam a vida nas organizações.</p>
<p>A paixão pela inovação na gestão empresarial está no ADN da PRIMAVERA. Um
entusiasmo contagiante que colocamos ao serviço das organizações,
disponibilizando-lhes um leque crescente de soluções de gestão que agilizam as
operações e aumenta a rentabilidade do negócio.
</p>
<p>Acreditamos na força das ideias. Auxiliamos a sua concretização. Impulsionamos
os resultados. Defendemos que com a tecnologia certa, crescer é o caminho. Do
mais pequeno micronegócio a uma grande multinacional, disponibilizamos soluções
ajustadas, ágeis e funcionais que dão mais força ao negócio.
</p>
» Conheça a nossa brochura institucional
</div>
</div>
<br><br><p class="separador"></p>
</section>
CSS:
#media only screen and (max-width: 768px){
#missao{
display:block;
align-items: center;
margin-right: auto;
margin-left: auto;
}
.flex-container{
flex-direction: column;
padding-left: 0px;
padding-right: 0px;
}
#textoMissao{
padding-left: 0px;
justify-content: space-around;
}
}
complete css:
body{
font-family: 'Roboto';
}
.topBar {
height: 80px;
background-color: #f5f5f5;
}
img{
padding-top: 20px;;
}
.logo{
float:left;
padding-left:45px;
}
.login{
position:relative;
float:right;
color:#1da2dc;
padding-top: 30px;
padding-right: 40px;
}
.lupa{
position:absolute;
top:18px;
right: 110px;
}
.lupa:hover{
position:absolute;
top:20px;
}
.login:hover{
color:#a4a3a3;
}
.pesquisa{
position: absolute;
top:30px;
right:150px;
background: transparent;
border:none;
width:0px;
height: 30px;
transition: all 0.5s;
}
.pesquisaClick{
width:300px;
background-color: white;
outline:none;
border:1px solid #aaa;
}
.banner{
position:relative;
height:500px;
background-image: url("/js/fundoBanner.jpg");
background-repeat: no-repeat;
background-position: center;
background-position-y: 0%;
background-size: 98% 88%;
}
.pc{
float: right;
position:absolute;
right: 40px;
bottom: 40px;
height: 380px;
}
.p1{
position:absolute;
left:60px;
top:40px;
margin-top: 0px;
font-size: 48px;
font-weight: bold;
color:white;
}
.p2{
position:absolute;
top:90px;
left:60px;
font-size: 30px;
color:#ccc;
}
.p3{
position: absolute;
top:150px;
left:60px;
font-size:20px;
font-style: italic;
color: white;
}
.saberMais{
position: absolute;
top: 250px;
left:60px;
padding: 8px 20px;
color:white;
text-decoration: none;
font-weight: bold;
background-color: #f16248;
border-radius: 20px;
}
.saberMais:hover{
background-color: #c8c8c8;
color: #252525;
}
.flex-container{
display:flex;
padding-left: 100px;
padding-right: 100px;
align-items: flex-start;
justify-content: space-around 10px;
}
.flex-container > div > p{
color:#7d7d7d;
}
h3{
color: #252525;
}
#title{
font-size: 250%;
color: #3c368c;
text-align: center;
}
section{
margin-left: 150px;
margin-right: 150px;
}
.separador{
border: 1px solid #7d7d7d;
}
#brochura{
font-size: 120%;
color: #0075be;
text-decoration: none;
font-weight: bold;
}
#textoMissao{
padding-left: 50px;
}
#brochura:hover{
text-decoration: underline;
}
.people{
margin:40px;
padding:40px;
}
.flex-container2{
display:flex;
justify-content: center;
}
.flex-container2 > div{
margin-right:15px;
margin-left: 15px;
}
.flex-container2 > div > img{
border-radius: 50%;
position: relative;
padding: 0px;
}
.flex-container2 > div > img:hover{
border-radius: 0%;
}
.titulo{
font-size: 42px;
font-weight: bold;
}
.subtitulo{
font-size: 35px;
font-weight: bold;
}
.texto{
font-size: 26px;
}
#t0{
color:#f27d29;
}
#t1{
color:#153c85;
}
#t2{
color:#ebc711;
}
#t3{
color:#153c85;
}
#t4{
color:#ff701e;
}
#s0, #txt0{
color:#153c85;
}
#media only screen and (max-width: 768px){
#missao{
display:block;
align-items: center;
margin-right: auto;
margin-left: auto;
}
.flex-container{
flex-direction: column;
padding-left: 0px;
padding-right: 0px;
}
#textoMissao{
padding-left: 0px;
justify-content: space-around;
}
}
.carousel-caption{
top:60%;
transform: translateY(-50%);
bottom:initial;
}
.carousel-fade .carousel-item {
opacity: 0;
transition-duration: .6s;
transition-property: opacity;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
opacity: 1;
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
opacity: 0;
}
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
footer{
margin-top: 50px;
padding-top: 30px;
background-color: #ebebeb;
}
.flex-container3{
display:flex;
text-align: center;
justify-content: space-around;
}
When I refresh the page, this configuration remains for 1/2 seconds (photo 1) but after that this configuration disappears (photo 2).
Photo1
Photo2
Any idea what it can be?
Move all the modification on #missao, .flex-container or #textoMissao which are outside of your current query inside another query for bigger screen sizes, this way they won't overwrite them.
#media only screen and (min-width: 769px){
#textoMissao{
padding-left: 50px;
}
.flex-container{
display:flex;
padding-left: 100px;
padding-right: 100px;
align-items: flex-start;
justify-content: space-around 10px;
}
}
Complete CSS:
body{
font-family: 'Roboto';
}
.topBar {
height: 80px;
background-color: #f5f5f5;
}
img{
padding-top: 20px;;
}
.logo{
float:left;
padding-left:45px;
}
.login{
position:relative;
float:right;
color:#1da2dc;
padding-top: 30px;
padding-right: 40px;
}
.lupa{
position:absolute;
top:18px;
right: 110px;
}
.lupa:hover{
position:absolute;
top:20px;
}
.login:hover{
color:#a4a3a3;
}
.pesquisa{
position: absolute;
top:30px;
right:150px;
background: transparent;
border:none;
width:0px;
height: 30px;
transition: all 0.5s;
}
.pesquisaClick{
width:300px;
background-color: white;
outline:none;
border:1px solid #aaa;
}
.banner{
position:relative;
height:500px;
background-image: url("/js/fundoBanner.jpg");
background-repeat: no-repeat;
background-position: center;
background-position-y: 0%;
background-size: 98% 88%;
}
.pc{
float: right;
position:absolute;
right: 40px;
bottom: 40px;
height: 380px;
}
.p1{
position:absolute;
left:60px;
top:40px;
margin-top: 0px;
font-size: 48px;
font-weight: bold;
color:white;
}
.p2{
position:absolute;
top:90px;
left:60px;
font-size: 30px;
color:#ccc;
}
.p3{
position: absolute;
top:150px;
left:60px;
font-size:20px;
font-style: italic;
color: white;
}
.saberMais{
position: absolute;
top: 250px;
left:60px;
padding: 8px 20px;
color:white;
text-decoration: none;
font-weight: bold;
background-color: #f16248;
border-radius: 20px;
}
.saberMais:hover{
background-color: #c8c8c8;
color: #252525;
}
.flex-container > div > p{
color:#7d7d7d;
}
h3{
color: #252525;
}
#title{
font-size: 250%;
color: #3c368c;
text-align: center;
}
section{
margin-left: 150px;
margin-right: 150px;
}
.separador{
border: 1px solid #7d7d7d;
}
#brochura{
font-size: 120%;
color: #0075be;
text-decoration: none;
font-weight: bold;
}
#brochura:hover{
text-decoration: underline;
}
.people{
margin:40px;
padding:40px;
}
.flex-container2{
display:flex;
justify-content: center;
}
.flex-container2 > div{
margin-right:15px;
margin-left: 15px;
}
.flex-container2 > div > img{
border-radius: 50%;
position: relative;
padding: 0px;
}
.flex-container2 > div > img:hover{
border-radius: 0%;
}
.titulo{
font-size: 42px;
font-weight: bold;
}
.subtitulo{
font-size: 35px;
font-weight: bold;
}
.texto{
font-size: 26px;
}
#t0{
color:#f27d29;
}
#t1{
color:#153c85;
}
#t2{
color:#ebc711;
}
#t3{
color:#153c85;
}
#t4{
color:#ff701e;
}
#s0, #txt0{
color:#153c85;
}
#media only screen and (min-width: 769px){
#textoMissao{
padding-left: 50px;
}
.flex-container{
display:flex;
padding-left: 100px;
padding-right: 100px;
align-items: flex-start;
justify-content: space-around 10px;
}
}
#media only screen and (max-width: 768px){
#missao{
display:block;
align-items: center;
margin-right: auto;
margin-left: auto;
}
.flex-container{
flex-direction: column;
padding-left: 0px;
padding-right: 0px;
}
#textoMissao{
padding-left: 0px;
justify-content: space-around;
}
}
.carousel-caption{
top:60%;
transform: translateY(-50%);
bottom:initial;
}
.carousel-fade .carousel-item {
opacity: 0;
transition-duration: .6s;
transition-property: opacity;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
opacity: 1;
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
opacity: 0;
}
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
footer{
margin-top: 50px;
padding-top: 30px;
background-color: #ebebeb;
}
.flex-container3{
display:flex;
text-align: center;
justify-content: space-around;
}
We are making a website in a team, and we struck at the famous white blank space in the right of page problem. We are looking for other possible causes.
In the homepage, there is a blank white part on the right for
iOS(Iphone5 and Ipad, browsers are Safari and Chrome)
Mac(Browsers are Safari and Chrome)
Ubuntu(Firefox)
but, the same problem is not seen in the Android with chrome or Ubuntu with chrome.
We have tried the following suggestions in the StackOverflow, but no luck.
Setting body and html margin and padding 0
Setting img width 100%
Checking font sizes(most of them is defined 1.2 rem)
Also, I have checked each layout in the dev tools, but none of them appears to exceed body width.
We have also tried to add an extra div after footer, or changing position:fixed to-the-page-top, but the result were the same.
Anyone have a sugguestion?
html, body, div, span, {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
input, button, textarea, select {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/*all-1.css*/
#charset "UTF-8";
html {
font-size: 62.5%;
}
body {
position: relative;
background-color: #fff;
color: #333;
font-size: 1.2rem;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
*, *::before, *::after {
box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
text-decoration: none;
}
font-family:'Helvetica Neue','Helvetica','Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
.tyousei{}
.clearfix::after{
content: '';
display:block;
clear: both;
}
.btn img{
height:40%;
margin-top: 10px;
margin-left: 10px;
}
.btn .right-icon{
position: absolute;
top: 7px;
right: 10px;
}
.btn::before{
content: "";
position: absolute;
left:0%;
bottom:0px;
display: block;
width: 0%;
height: 2px;
background: #2F4D55;
transition: all .4s ease;
}
.btn:hover::before{
width: 100%;
}
#up-btn a{
position: fixed;
right:1%;
bottom:40%;
z-index: 5;
opacity: 0.8;
text-align: center;
height:50px;
width:50px;
padding-top: 8px;
border-radius: 25px;
background-color:#666;
}
#up-btn img{
display: inline-block;
width:65%;
height:75%;
}
.header{
width: 100%;
font-size: 0;
}
.global-navi{
height: 50px;}
.logo{
max-width: 250px;
width:40%;
min-width:200px;
float: left;
padding:20px 10px 10px 20px;
background-color: rgba(255,255,255,0.4)
}
.logo img{
display: block;
width: 100%;
height: auto;
}
.form-top{display: none;}
.sbox > *{
font-size: 1.2rem;
}
.form .sbtn{
width:34px;
height: 28px;
position: absolute;
left:517px;
top: 12px;
border:none;
font-size:20px;
outline: 0;
}
.suggestion{
border-bottom: solid 1px #666;
border-right: solid 1px #666;
border-left: solid 1px #666;
z-index:10;
}
.suggestion:hover{
background-color: rgba(240,240,240,1);
}
.word-suggestion{
width: 236px;
height: 30px;
font-size: 16px;
text-align: left;
padding: 7px 5px;
background-color: rgba(255,255,255,1);
color:#333;
}
.article-suggestion{
width: 350px;
height: 75px;
font-size:16px;
padding: 5px;
background-color: rgba(255,255,255,1);
}
.article-suggestion-title{
position: relative;
height:18px;
overflow:hidden;
font-weight:normal;
letter-spacing: 1px;
line-height:18px;
margin-bottom:12px;
text-decoration: underline;
color:#333;
}
.article-suggestion-desc{
position: relative;
height:30px;
overflow:hidden;
font-size:14px;
line-height: 16px;
color: #666;
padding-left:6px;
}
.article-suggestion-desc::after{
content: "";
position: absolute;
top:0px;
left:0px;
width:3px;
height:100%;
background-color: #74c0d5;
}
.article-number{
width: 350px;
height:30px;
background-color: rgba(255,255,255,0.7);
z-index:20;
font-size:14px;
color:#666;
text-align: center;
padding-top: 7px;
}
.result{
position: absolute;
top:41px;
left:282px;
z-index: 20;
}
#no-result{
width: 350px;
height:210px;
background-color: rgba(255,255,255,1);
border-bottom: solid 1px #666;
border-right: solid 1px #666;
border-left: solid 1px #666;
font-size:16px;
line-height:20px;
padding:10px;
z-index: 10;
}
#no-result .kobetuba-mail-link{
display: block;
width:80%;
height:60px;
text-align: center;
margin:10px auto 5px;
border: solid 1px #666;
padding: 2px;
cursor: pointer;
border-radius: 3px;
position: relative;
}
#no-result .kobetuba-mail-link img{
height:32px;
}
#no-result .kobetuba-mail-link p{
font-size: 16px;
color:#666;
}
#no-result .right-icon{
position: absolute;
top:15px;
right:5px;
color:#666;
}
#no-result .kobetuba-mail-link:hover{
background-color: rgba(230,230,230,0.6)
}
#media (min-width: 800px){
.form-top{
display: block;
position:relative;
}
}
.navi-box{
float:right;
}
.navi{
display: inline-block;
vertical-align: middle;
padding: 5px 2px;
}
#media (max-width:365px){
.article-and-toiro{
display: none;
}
}
#media (min-width:768px){
.article-and-toiro p
{font-size:16px;}
}
.message-box :hover{
opacity: 0.3;
}
.account :hover{
opacity: 0.7;
}
.article-and-toiro:hover {
background:rgba(255,255,255,0.2);
}
.navi-icon a{
position:relative
}
.navi-icon span{
display: inline-block;
top: -45px;
left: 30px;
width:20px;
height: 20px;
border-radius: 50%;
background-color: rgba(255,255,255,0.8);
position:absolute;
color: #666;
text-align: center;
line-height: 20px;
vertical-align: middle;
font-size:16px;
}
.wrapper {
width: 96%;
min-width: 320px;
max-width: 1200px;
padding-bottom:50px;
margin: 10px auto 20px;
}
footer{
display: none;
}
#media (max-width:800px){
footer{
display: block;
}
footer{
box-shadow: 0px -3px 4px -2px rgba(0, 0, 0, 0.1);}
.footer-bottom {
width: 100%;
position: fixed;
bottom: 0;
height:44px;
border-top:double #2F4D55;
background-color: #fff;
padding-top: 5px;
/*background-color:#2F4D55;*/
}
.footer-bottom.close{
box-shadow: 0px -6px 8px -2px rgba(0, 0, 0, 0.3);}
.footer-bottom img{
height:70%;
display: block;
margin:0 auto;
}
.footer-open{
width:100%;
position: fixed;
bottom: 0;
background-color:#fff;
z-index: 10;
}
.footer-bottom.open{
border-top:solid 1px #696969
}
.category-list-bottom {
width:100%;
position: fixed;
top:0px;
bottom: 0px;
left:0px;
right:0px;
overflow-y: scroll;
height:100%;
text-align: center;
background-color:rgba(255,255,255,0.9);
box-shadow: 0px -6px 8px -2px rgba(0, 0, 0, 0.3);
}
}
.category-list-bottom{
}
.close-btn{
height:30px;
background-color: rgba(100,100,100,0.3)
}
.down-icon{
color: #666;
}
.category-list-bottom .form-bottom{
display: inline-block;
width: 100%;
padding-bottom:10px;
position: relative;
}
.category-list-bottom .form .sbtn{
position: absolute;
top:41px;
left:10px;
width:40px;
height:40px;
border-radius:20px;
background-color: transparent;
border:solid 2px #2F4D55;
color:#737575;
box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.3);
}
.category-list-bottom .form-bottom{
display: inline-block;
width: 100%;
}
.category-list-bottom .form .sbox{
position:absolute;
top:18px;
right:11%;
left:2%;
width:85%;
height:44px;
font-size: 16px;
border:solid 1px #535353;
}
.category-list-bottom .form .sbtn{
position: absolute;
top:20px;
right:2%;
left:88%;
border-radius: 50%;
}
.result-word-suggestion{
position: absolute;
top:64px;
right: 11%;
left: 3%;
width:85%;
z-index: 10;
}
.result-article-suggestion{
position: absolute;
top:64px;
right: 11%;
left: 2%;
width: 95%;
z-index: 10;
}
.form-bottom .word-suggestion{
width:100%;
height: 64px;
/* font-size: 16px; */
z-index: 100;
background-color: #f2fbfd;
}
.form-bottom .article-suggestion{
width: 100%;
z-index: 100;
text-align: left;
background-color: #f2fbfd;
border-left:solid 1px rgba(0,0,0,0.3);
border-right:solid 1px rgba(0,0,0,0.3);
}
.form-bottom .article-number{
width:100%;
z-index: 100;
text-align: center;
background-color: #f2fbfd;
border-left:solid 1px rgba(0,0,0,0.3);
border-right:solid 1px rgba(0,0,0,0.3);
}
.form-bottom .article-suggestion:hover,.form-bottom .article-number:hover{
background-color: rgba(255,255,255,1);
}
#form-bottom-no-result{
width:100%;
z-index: 100;
background-color: #f2fbfd;
border-left:solid 1px rgba(0,0,0,0.3);
border-right:solid 1px rgba(0,0,0,0.3);
border-bottom:solid 1px rgba(0,0,0,0.3);
font-size: 16px;
padding: 10px;
line-height: 20px;
color: #666;
text-align: left;
}
#form-bottom-no-result .kobetuba-mail-link{
display: block;
width:95%;
margin:10px auto 5px;
height:70px;
padding: 3px;
border: solid 1px #666;
border-radius: 3px;
font-size:16px;
text-align: center;
position: relative;
cursor: pointer;
}
#form-bottom-no-result .kobetuba-mail-link img{
max-height:60%;
max-width:95%;
}
#form-bottom-no-result .kobetuba-mail-link .right-icon{
position: absolute;
top:50%;
right:10px;
color:#666;
}
#form-bottom-no-result .kobetuba-mail-link:hover{
background-color: rgba(230,230,230,0.4)
}
.category-list-bottom .category-list-wrapper{
padding:55px 7px 7px;
text-align: left;
min-height:370px;
height:90%;
}
.category-list-bottom .category-list{
margin-top:5px;
margin-bottom:5px;
position: relative;
height:35%;
border:solid 1px #acabab;
border-bottom:solid 2px #2F4D55;
background-color:rgba(255,255,255,0.5)
}
.category-list-bottom .category-list-img{
position:absolute;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
padding-top:2px;
padding-bottom:2px;
}
.category-list-bottom .category-mini-list-wrapper li{
height:44px;
list-style: none;
margin:6px 10px 6px 10px;
padding:12px 7px;
background-color: rgba(200,200,200,0.5);
border-radius: 7px 22px 22px 7px;
zoom:0.8;
position: relative;
}
.category-list-bottom .article .category-mini-list-wrapper li{
display: inline-block;
width:47%;
margin-top:3px;
margin-bottom:3px;
margin-right: 0px;
}
.category-list-bottom .right-icon{
color:#666;
position: absolute;
top:50%;
right:5px;
transform:translateY(-50%);
}
.category-list-bottom .category-list.torio{
height:25%;
border-radius: 3px 22px 22px 3px;
text-align: center;
}
.category-list-bottom .category-list.torio img{
zoom:0.8;
}
.category-list-bottom .category-list.torio .new-icon{
margin-top:40px;
padding-left: 160px;
width:210px;
}
.category-list.all-close{
height:35%;
}
.category-list.close{
height:30%;
min-height:80px;
}
.category-list.close .category-mini-list-wrapper,.category-list.all-close .category-mini-list-wrapper{
display: none;
}
.category-list.open{
height:auto;
border:none;
}
.category-list.open .category-list-img{
display:block;
position:relative;
top:0;
left:0;
transform:none;
margin:5px auto;
}
.category-list.open .right-icon{
display:none;}
.category-list.open .category-mini-list-wrapper{
display:block}
#media (max-width:500px){
.category-list.close{height:44px}
}
#media (max-width:346px){
.category-list-bottom .article .category-mini-list-wrapper li{
display: inline-block;
width:45%;
}
.category-list-bottom .article .category-mini-list-wrapper img{
zoom:0.9;
}
}
#media(min-width:500px){
.category-list-bottom .kobetuba .category-mini-list-wrapper li{
display: inline-block;
width:46%;
margin-top:3px;
margin-bottom:3px;
}
.category-list-bottom .kobetuba .category-mini-list-wrapper img{
zoom:0.9;
}
}
/* hp_style-1.css */
#charset "UTF-8";
html {
font-size: 62.5%;
}
body {
background-color: #fff;
color: #333;
font-size: 1.2rem;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
*, *::before, *::after {
box-sizing: border-box;
}
a:link, a:visited, a:hover, a:active {
color: #7C5119;
text-decoration: none;
}
font-family: 'Helvetica Neue','Helvetica','Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
.header{
width: 100%;
}
.main-visual{
height: 250px;
background-image: url(../img/main-visual-mini.jpg);
background-position: center center;
background-size: cover;
position: relative;
}
#vision{
padding:10px;
position: absolute;
top:40%;
right:2%;
width:45%;
min-width:270px;
max-width:450px;
z-index: 0;
}
#media(max-width:568px){
#vision{background-color: rgba(237,231,221,0.8)}
}
#media (min-width:500px){
.main-visual{
background-image: url(../img/main-visual.jpg);}
}
#media (min-width: 800px){
.main-visual{
height:450px;
background-image: url(../img/main-visual.jpg);
position: relative;
background-position: center;
}
#vision{
background-color: transparent;
}
}
#media (min-width: 1020px){
#vision{
top:30%;
width:55%;
left:55%;
}
}
.sbox{
border:solid 1px #535353;
background-color: rgba(255,255,255,0.3)
}
.form .sbtn{
color:#999;
/*ここから臨時対応*/
border-leftsolid 1px #737575;
}
.sbtn:hover{
color#151e76;
}
.suggestion{
border:none;
border-bottom: solid 1px #666;
}
.suggestion:hover{
opacity: 1;
background-color: rgba(255,255,255,0.9);
}
.word-suggestion{
background-color: rgba(255,255,255,0.4);
}
.article-suggestion{
background-color: rgba(255,255,255,0.7);
}
#no-result{
background-color: rgba(255,255,255,0.8)
}
.message-box :hover{
opacity: 0.6;
}
.account :hover{
opacity: 0.6;
}
.category-navi{
display: none;
}
/*タブレット縦以降*/
#media (min-width: 801px){
.category-mini-list{
list-style-type:none;
}
.category-navi{
display: block;
width: 100%;
height: 50px;
background-color: rgba(255,255,255,0.7);
position: absolute;
bottom: 0px;
border-bottom:double #022567;
font-size: 0;
padding-left:5%;
padding-right:5%;
text-align: center;
}
.category-list {
display: inline-block;
position: relative;
width: 30%;
top:0px;
min-width: 130px;
height: 50px;
vertical-align: middle;
padding-left: 16%;
padding-right: 16%;
}
.category-list-button{
position:absolute;
width: auto;
max-width: 280px;
top:0;
bottom: 0;
left: 0;
right:0;
margin: auto;
cursor: pointer;
}
.category-list-img {
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%)translateY(-50%);
width: auto;
max-width: 100%;
height:auto;
margin: auto;
}
.category-list.toiro .category-list-img {
top: 50%;
}
.category-list:hover{
background:rgba(116,192,213,0.3);
}
.category-mini-list-wrapper{
display: none;
background-color: rgba(255,255,255,0.7);
position: absolute;
bottom:50px;
left:0;
width:100%;
height:192px;
opacity: 0.9;
text-align: center;
}
.category-mini-list{
width: 100%;
padding:10px 15px;
}
.category-list-mini-img {
width:auto;
max-width: 100%;
height:auto;
}
.category-mini-list:hover{
background: rgba(116,192,213,0.1);
}
.category-list.toiro .new-icon{
margin-top:15px;
padding-left: 55px;
width:100px;
height:40px;
}
}
.wrapper{
padding-top:20px;
}
section{
margin-top: 40px;
}
#media (min-width: 920px){
.wrapper{
width: 90%;
margin: 20px auto 40px;}
}
#media (max-width:800px){
.recomend,.new {
width:100%;
}
}
#media(min-width:800px){
.new{
width:
}
}
Maybe you didn't set the body/html width and height.
Try this:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
I added
overflow-x: hidden
You should remove this line, if you need to scroll left and right.
I'm trying to implement this portfolio in this link :
http://www.htmldrive.net/items/demo_show/1258
I download and implement it in my mvc5 project and it works fine,but I have some problem in css and media query used in this portfolio .I want to make some changes in size of images and number of columns when I shrink the browser . in this portfolio all images should be 144x144px in 4 columns but I don't want it . I want bigger images, also I want it worke like bootstrap grid system , but when I shrink the browser columns changed to 1 column.can anyone help me ?
I don't know anything about media query.
2 css files :
/* CSS reset */
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
height: 100%;
}
img {
border:0;
}
header{
display: block;
}
/* General Demo Style */
body{
font-family: Arial, Helvetica, sans-serif;
background:url(images/bg.png);
font-size: 14px;
color: #3a2127;
}
a{
color: #333;
text-decoration: none;
}
#container{
position: relative;
}
.clr{
clear: both;
}
#container > header{
padding: 20px 20px 20px 20px;
position: relative;
display: block;
text-align: center;
}
#container > header h1{
position: relative;
color: #275973;
font-weight: 700;
font-style: normal;
font-size: 25px;
padding: 0px 0px 5px 0px;
text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
#container > header h1 strong{
font-family: 'Open Sans Condensed','Arial Narrow', Arial, sans-serif;
padding:0px 5px 0px 5px;
line-height:35px;
color:#275973;
font-size:28px;
text-transform: uppercase;
}
#container > header h1 span{
font-family: 'Alegreya SC', Georgia, serif;
font-size: 20px;
line-height: 20px;
display: block;
font-weight: 400;
font-style: italic;
color:#5a99ba;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
/* Buttom Style */
.freshdesignweb-top{
text-align:center;
color:#275973;
line-height: 44px;
font-size: 11px;
background: rgba(0, 0, 0, 0.1);
text-transform: uppercase;
position: relative;
box-shadow: 3px 0px 5px rgba(0,0,0,0.2);
}
.freshdesignweb-top a{
color:#fcca00;
}
.freshdesignweb-top a:hover{
color:#0b2f42;
}
.freshdesignweb-top h1{
margin:0 auto;
width:490px;
background:url(images/logo.png) no-repeat;
font-weight:bold;
font-family: 'Open Sans Condensed','Arial Narrow', Arial, sans-serif;
text-transform: uppercase;
font-size:36px;
text-shadow: 2px 2px 0px #F2F2F2, 1px 2px 0px #B1B1B2;
}
/* Buttom Style */
.freshdesignweb-buttom{
font-family: 'Open Sans Condensed','Arial Narrow', Arial, sans-serif;
color:#009;
line-height: 24px;
font-size: 11px;
background: rgba(0, 0, 0, 0.1);
text-transform: uppercase;
position: relative;
box-shadow: 3px 0px 5px rgba(0,0,0,0.2);
}
.freshdesignweb-buttom a{
padding: 0px 10px;
letter-spacing: 1px;
text-shadow: 0px 1px 1px #fff;
display: block;
float: left;
}
.freshdesignweb-buttom a:hover{
background:#FFF;
}
.freshdesignweb-buttom span.right{
float: right;
font-weight:bold;
}
.freshdesignweb-buttom span.right a{
display: block;
}
.freshdesignweb{
margin:0 auto;
width:650px;
}
/* Portolio Hover */
.da-thumbs li ,
.da-thumbs li img {
display: block;
position: relative;
}
.da-thumbs li {
overflow: hidden;
}
.da-thumbs li article {
position: absolute;
background-image:url(images/image_hover.png);
background-repeat:repeat;
width: 100%;
height: 100%;
}
.da-thumbs li article.da-animate {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/* Initial state classes: */
.da-slideFromTop {
left: 0px;
top: -100%;
}
.da-slideFromBottom {
left: 0px;
top: 100%;
}
.da-slideFromLeft {
top: 0px;
left: -100%;
}
.da-slideFromRight {
top: 0px;
left: 100%;
}
/* Final state classes: */
.da-slideTop {
top: 0px;
}
.da-slideLeft {
left: 0px;
}
.da-thumbs li article a {
color:#fff;
padding:20px;
display:block;
}
.da-thumbs {
text-align:center;
}
.da-thumbs li article h3{
color:#fff;
padding-top:30px;
}
.da-thumbs li article em{
margin-bottom:10px;
color:#fff;
display:block;
}
.da-thumbs li article span{
display:inline-block;
}
span.link_post{
display:block;
width:35px;
height:35px;
background-color:#DF6232;
border-radius:50px;
cursor:pointer;
background-image:url(images/link_post_icon.png);
background-repeat:no-repeat;
background-position:center;
margin-right:10px;
}
span.zoom{
overflow:hidden;
display:block;
width:35px;
height:35px;
background-color:#DF6232;
border-radius:50px;
cursor:pointer;
background-image:url(images/zoom_icon.png);
background-repeat:no-repeat;
background-position:center;
margin-left:10px;
}
.portfolio_2col article h3{
padding-top:70px !important;
}
/* Image Grid */
.image_grid {
float:left;
overflow:hidden;
width:700px;
position:relative;
}
.image_grid li{
float: left;
line-height: 17px;
color: #686f74;
list-style:none;
overflow:hidden;
margin-bottom:23px;
margin-right:23px;
text-align:center;
}
/* Responsive image grid*/
/* Mobile landscape width 320 */
#media only screen and (max-width: 767px) {
.image_grid{
width:300px;
}
.image_grid li img{
width:220px;
}
.portfolio_4col .da-thumbs li article h3{
padding-top:70px;
}
.portfolio_3col .da-thumbs li article h3{
padding-top:50px;
}
.portfolio_2col .da-thumbs li article h3{
padding-top:53px !important;
}
}
#media only screen and (min-width: 480px) and (max-width: 767px) {
.image_grid{
width:450px;
}
.image_grid li{
width:178px !important;
}
.portfolio_4col .da-thumbs li article h3{
padding-top:58px;
}
.portfolio_3col .da-thumbs li article h3{
padding-top:34px;
}
.portfolio_2col .da-thumbs li article h3{
padding-top:23px !important;
}
}
You can use the same code and style in the example with larger image.
Delete or Change the width in the below style rules.
.freshdesignweb {
margin: 0 auto;
width: 650px;
}
.image_grid {
float: left;
overflow: hidden;
width: 700px;
position: relative;
}
I have a little problem at designing a website:
In this website a have a top navigation bar and is composed by : number of search results found, search bar, login methods.
All i am asking for is how i can set the "websitelocation" div and search input aligned to the left and "loginMethods" div aligned to the right (in topbar of course).
I want to mention that i tried on loginMethods div left:0; css property but it did nothing.
Here is a jsfiddle setup of layout : http://jsfiddle.net/UZSpz/ .
Code :
html
<body>
<nav>
<h1 class="logo">project</h1>
<ul>
<li id="events_list">
<a href="#events">
<img src="img/menu/services2.png" width="35px" height="35px" style="margin-top:0px;margin-bottom:0xp;padding:0px;" />
<p class="eName">Events</p>
</a>
</li>
<li id="users_list">
<a href="#following">
<img src="img/menu/crowdsourcing.png" width="35px" height="35px" style="margin-top:0px;margin-bottom:0xp;padding:0px;" />
<p class="eName">Users</p>
</a>
</li>
<li>
<a href="#messages">
<img src="img/menu/comment25.png" width="35px" height="35px" style="margin-top:0px;margin-bottom:0xp;padding:0px;" />
<p class="eName">Messages</p>
</a>
</li>
</ul>
</nav>
<div class="topbar">
<div class="websiteLocation">
<img src="img/dark.png" width="25px" height="15px" style="margin-top:10px;margin-right:7px;" />3 events found..
</div>
<input type="text" class="inputSearch" value="Search events.." />
<div class="loginMethods">asdasds</div>
</div>
<div class="content">
content
</div>
</body>
css
html, body {
background: #343434;
height: 100%;
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
/* NAVIGATION RULES (left bar) */
nav {
background: #565656;
color: #b4b4b4;
margin:0px;
top: 0;
bottom: 0;
left: 0;
position: absolute;
border-right:7px solid #2b2b2b;
width: 86px;
}
nav .logo {
opacity: 0.5;
background-color: rgb(44, 44, 44);
background-image:url('../img/logo2.png');
height:60px;
border-bottom:1px solid #353535;
margin:0px;
padding:0px;
}
nav a {
text-decoration: none;
cursor:pointer;
margin: 0px;
padding: 0px;
}
nav .logo:hover {
opacity: 1;
background-position-x: 0%;
background-position-y: 100%;
background-size: initial;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgb(44, 44, 44);
-moz-transition: opacity .7s;
-webkit-transition: opacity .7s;
-o-transition: opacity .7s;
}
nav ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
nav li {
opacity: 1;
color:#b4b4b4;
cursor: pointer;
background: #676767;
border-bottom: 1px solid #494949;
padding: 10px 0 16px;
height:59px;
text-align: center;
margin: 0px;
}
nav li:hover {
background: #414242;
-moz-transition: background-color .5s;
-webkit-transition: background-color .5s;
-o-transition: background-color .5s;
}
nav li a {
text-decoration: none;
color:#b4b4b4;
font-size: 1.18em;
}
.eName {
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 14px;
text-decoration: bold;
}
/* MENU CLASSES AND ELEMENTS */
.categories {
display: none;
position: absolute;
width:200px;
background:#383838;
top:0;
left:93px;
bottom:0;
z-index:11;
border-right: 7px solid #0a0a0a;
}
.categoryCapHolder{
width:100%;
height:40px;
padding-top:20px;
background: #2a2a2a;
border-bottom: 1px solid #3d3d3d;
}
.categoryCapHolder .categoryName {
overflow: hidden;
color:#a2a2a2;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 20px;
text-decoration: bold;
text-transform: uppercase;
margin-left:25px;
}
.categoryCapHolder .categoryName:hover {
color:#62c6ff;
}
.categories .subcategory {
width:170px;
height:32px;
padding-top: 10px;
padding-left:30px;
border-bottom: 1px solid #5f5f5f;
background: transparent;
overflow: hidden;
}
.categories .subcategory:hover {
background: #282828;
}
.categories .subcategory .subcategory_link {
margin-left:15px;
color:#62c6ff;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 16px;
text-decoration: bold;
text-transform: uppercase;
}
/* Top navigation bar rules */
.topbar {
z-index: 0;
background: #1d1d1d;
border-left: 7px solid #2b2b2b;
border-bottom: 1px solid #5b5b5b;
height: 60px;
left: 86px;
position: absolute;
right: 0;
top: 0;
}
/*######CUSTOMBTNS########*/
.topbar .websiteLocation {
color:#b4b4b4;
margin-left:50px;
margin-top:10px;
margin-right: 5px;
width: 150px;
overflow: hidden;
font-family: "Calligraffitti", sans-serif;
font-size:16px;
}
.topbar .inputSearch {
font-family: "Calligraffitti", sans-serif;
text-decoration: none;
background: url("../img/search.png") left no-repeat;
padding-left: 25px;
padding-top: 3px;
margin-top:5px;
margin-bottom:5px;
margin-left:5px;
right:0px;
width:150px;
height:23px;
border: 0px;
color:#b6b6b6;
}
.topbar .inputSearch:focus {
outline-color: transparent;
outline-style: none;
}
.loginMethods {
width:150px;
left:0;
}
/* Content rules */
.content {
bottom: 0;
left: 120px;
overflow: auto;
position: absolute;
right: 0;
top: 62px;
padding: 50px 25px 25px 20px;
}
.content .card {
background: #0e0e0e;
color:#a4a4a4;
width:250px;
height:320px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-right:20px;
margin-bottom: 15px;
overflow: hidden;
float: left;
z-index: 1;
}
.content .card .cover {
max-width:250px;
max-height:140px;
background: transparent;
float:left;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.content .card .description {
width:100%;
height:50%;
display: block;
margin-top:150px;
}
.content .card .coverDetail {
position:absolute;
display: none;
color:#565656;
width:220px;
height:22px;
margin: 115px 0px 0px 0px;
padding-left:15px;
padding-right:15px;
background: #e8ff28;
border-top: 1px solid #ecf97e;
overflow:hidden;
z-index:10;
}
.content .card .coverDetail .save {
width:50px;
height:16px;
background:#565656;
color:#c4c4c4;
padding:1px 2px 4px 2px;
cursor:pointer;
border:0px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
margin:1px 4px 0px 1px;
text-align: center;
}
.content .card .coverDetail .card-views {
width:50px;
height:16px;
background-size: 16px 16px;
padding:1px 2px 4px 2px;
border:0px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
margin:1px 4px 0px 1px;
text-align: center;
}
.content .card .description .title {
color:#b4b4b4;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 20px;
text-decoration: none;
text-transform: capitalize;
margin-top:5px;
margin-left:10px;
overflow: hidden;
}
.content .card .description .title:hover {
color:#62c6ff;
border-bottom: 1px dotted #d9f1ff;
}
.content .card .description .text {
font-family: sans-serif;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
height: 80px;
margin-top: 5px;
margin-left: 10px;
width:90%;
overflow-y:hidden;
overflow-x:hidden;
}
.content .card .description .text .expand-card {
background:#565656;
color:#c4c4c4;
padding:2px 2px 2px 2px;
cursor:pointer;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
width:75px;
height:16px;
margin:2px 1px 0px 1px;
text-align: center;
}
.content .card .description .author {
background:url('../img/user91.png');
background-size:10px 10px;
background-repeat:no-repeat;
color:#62c6ff;
bottom: 0;
font-family: sans-serif;
text-decoration: none;
text-transform: lowercase;
font-size: 9px;
padding-left:10px;
margin-left: 10px;
margin-top: 5px;
}
.authorlink {
text-decoration: none;
color:#62c6ff;
}
.content .card .description .category {
background:url('../img/category.png');
background-size:13px 13px;
background-repeat:no-repeat;
color:#62c6ff;
font-family: sans-serif;
text-decoration: none;
text-transform: lowercase;
font-size: 9px;
padding-left: 13px;
margin-left: 10px;
margin-top: 5px;
}
.categorylink {
text-decoration: none;
color: #62c6ff;
text-transform: capitalize;
}
Sorry if i've done something wrong in my code .
Thank you!
DEMO
Add this to your CSS:
.websiteLocation{
float:left;
}
.loginMethods{
float:right;
}
.loginMethods has black text on dark grey background, so is hard to see, but it's there.
left, right, top, bottom only works with position:absolute and position:fixed.
.topbar .inputSearch {
position: absolute;
font-family: "Calligraffitti", sans-serif;
text-decoration: none;
background: url("../img/search.png") left no-repeat;
padding-left: 25px;
margin-bottom:5px;
margin-left:5px;
right:0px;
width:150px;
height:23px;
border: 0px;
color:#b6b6b6;
}
.loginMethods {
width:150px;
position: absolute;
left:0;
}
and you can use another method in Table
<input type="text" class="inputSearch" placeholder="Search events.." />