my problem is this code that does not work when I make it responsive.. I know to change height and width must transform in percentage but this code is damaged when I make it responsive ..
This code *Css ( which I want to transform it into responsive ) :
#import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
.entry{
width:430px;
position: RELATIVE;
top:600PX;
LEFT: 5PX;
margin:50px auto;
border-radius:50%;
float:left;
}
.container{
width:110px;
height:110px;
margin:0 0 30px 10px;
position:relative;
border-radius:60px;
background:rgba(255,255,255,.2);
box-shadow:3px 3px 5px rgba(0,0,0,.2);
transition:all .5s;
overflow:hidden;
}
.photo{
width:90px;
height:90px;
margin:8px;
border-radius:50%;
position:absolute;
left:0px;
overflow:hidden;
border:2px solid white;
}
.pic{ max-width:100%; }
.button{
width:60px;
height:60px;
position:absolute;
right:20px;
top:25px;
font-size:40px;
text-align:center;
line-height:60px;
border-radius:50%;
color:rgba(255,255,255,.8);
background:green;
background:linear-gradient(bottom,#5ca321,#8ab24f);
box-shadow:0 0 0 1px rgba(0,0,0,.2),
0 0 0 5px rgba(255,255,255,.1),
0 0 0 6px rgba(0,0,0,.2);
transition:all .5s;
cursor:pointer;
}
.button:hover{
background:#5ca321;
box-shadow:inset 0 1px 5px rgba(0,0,0,.3);
text-shadow:0px 0px 5px gray;
}
.name{
height:60%;
width:180px;
position:absolute;
right:80px;
padding:20px;
font:25px arial;
color:white;
opacity:0;
transition:all .5s .5s;
text-shadow:0 0 5px rgba(0,0,0,.5);
}
.small{ font-size:14px; display:block; margin-top:10px; }
.comment{
width:370px;
position:relative;
padding:15px;
font-size:16px;
color:rgba(0,0,0,.7);
border-radius:10px;
background:rgba(255,255,255,.4);
box-shadow:3px 3px 5px rgba(0,0,0,.2);
opacity:0;
transition:all 1s;
}
.comment:before{
content:'';
width:0;
height:0;
position:absolute;
bottom:100%;
left:2%;
border-bottom:15px solid rgba(255,255,255,.4);
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:15px solid transparent;
}
.container:hover{ width:400px; }
.container:hover .name,.container:hover + .comment{
opacity:1;
}
Maybe you need look demo
https://codepen.io/GARDFIELD3/pen/zNgmMP
I want to do this responsive that size and position Thank and ignore my mistakes of speech but i I do not speak English :)
It's not responsive because you don't have media queries in your CSS. As of right now, your code will run regardless of screen size, but let's say you wanted to look differently on a mobile phone, then you would do something like this:
#media screen and (max-width: 420px) {
/* put in different CSS code here */
}
You need to use media queries and target whichever element you want to change.
For example:
#media screen and (min-width: 767px) {
.entry {
margin-top: 100px;
}
}
This will add a margin-top of 100px to your .entry class for screens with a width equal to or bigger than 767px.
Read more/take a tutorial as an introduction.
Is this closer to what you want to achieve?
I've set the width of comment and entry to 100% because you probably want both div-tags to expand to the full width of the document.
Though it's true that the width will be relative to the document, this doesn't mean that any of this is responsive design. Responsive design keeps the viewport in regard. Try googling that. It's highly unlikely that there are no tutorials available in your language.
#import url(http://weloveiconfonts.com/api/?family=entypo);
#media screen and (max-width: 420px) {
/* entypo */}
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
.entry{
width:100%;
position: RELATIVE;
top:60PX;
LEFT: 5PX;
margin:50px auto;
border-radius:50%;
float:left;
}
.container{
position:relative;
width:110px;
height:110px;
margin:0 0 30px 10px;
border-radius:60px;
background:rgba(255,255,255,.2);
box-shadow:3px 3px 5px rgba(0,0,0,.2);
transition:all .5s;
overflow:hidden;
}
.photo{
width:90px;
height:90px;
margin:8px;
border-radius:50%;
position:absolute;
left:0px;
overflow:hidden;
border:2px solid white;
}
.pic{ max-width:100%; }
.button{
width:60px;
height:60px;
position:absolute;
right:20px;
top:25px;
font-size:40px;
text-align:center;
line-height:60px;
border-radius:50%;
color:rgba(255,255,255,.8);
background:green;
background:linear-gradient(bottom,#5ca321,#8ab24f);
box-shadow:0 0 0 1px rgba(0,0,0,.2),
0 0 0 5px rgba(255,255,255,.1),
0 0 0 6px rgba(0,0,0,.2);
transition:all .5s;
cursor:pointer;
}
.button:hover{
background:#5ca321;
box-shadow:inset 0 1px 5px rgba(0,0,0,.3);
text-shadow:0px 0px 5px gray;
}
.name{
height:60%;
width:180px;
position:absolute;
right:80px;
padding:20px;
font:25px arial;
color:white;
opacity:0;
transition:all .5s .5s;
text-shadow:0 0 5px rgba(0,0,0,.5);
}
.small{ font-size:14px; display:block; margin-top:10px; }
.comment{
width:100%;
position:relative;
padding:15px;
font-size:16px;
color:rgba(0,0,0,.7);
border-radius:10px;
background:rgba(255,255,255,.4);
box-shadow:3px 3px 5px rgba(0,0,0,.2);
opacity:0;
transition:all 1s;
}
.comment:before{
content:'';
width:0;
height:0;
position:absolute;
bottom:100%;
left:2%;
border-bottom:15px solid rgba(255,255,255,.4);
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:15px solid transparent;
}
.container:hover{ width:100%; }
.container:hover .name,.container:hover + .comment{
opacity:1;
}
<div class="entry">
<div class="container">
<div class="button entypo-chat"></div>
<div class="name">CoStY
<span class="small">Fondator</span>
</div>
<div class="photo">
<img src="https://s12.postimg.org/pptidy8kd/14021445_1166695373388266_6290547632102759142_n.jpg" alt="" class="pic">
</div>
</div>
<p class="comment">Salut, numele meu este Enache Constantin si sunt creatorul acestei comunitati :) Puteti sa ajutati la intretinerea comunitatii printr-o donatie ,pm pentru detalii :) </p>
</div>
<div class="entry">
<div class="container">
<div class="button entypo-chat"></div>
<div class="name">Gardfield<3
<span class="small">Administrator</span>
</div>
<div class="photo">
<img src="http://farm1.staticflickr.com/133/378977890_40f31e1962_q.jpg" alt="" class="pic">
</div>
</div>
<p class="comment">Salut,numele meu este Alexandru Mihai iar misiunea mea este sa dezvolt aceasta comunitate din toate punctele de vedere. Sunt deschis la orice colaborare si ma puteti contacta pentru probleme tehnice printr-un pm :) </p>
</div>
I am making a fancy CSS theme for my tumblr. But my vertical scrollbar has vanished, and pressing "page down" has no effect. It is like the lower half of my page no longer exists, or the page is forced to be the size my browser window is. Indeed - if I resize my browser window, suddenly I see that amount of content and can't scroll down to see the stuff I could see a moment ago.
I have read some things on the internet already to solve this problem, such as adding "overflow:auto" or "overflow:scroll", but either I have have added them in the wrong place or they do not solve the problem I have. I have also tried manually adding a scrollbar in the html {} tag. If I do that, the scrollbar reappears - but it doesn't actually work. It appears all blocked in gray, as if you are already viewing the whole page, while displaying my content cut-off.
Very frustrated as the page is, apart from this, done. Any obvious ideas?
<!--CSS customization here. -->
<style type="text/css">
html {overflow-y: scroll;}
#text {
margin-bottom:50px;
margin-top:100px;
margin-top:5px;
text-transform:uppercase;
font-size:1em;
font-famiy:serif;
letter-spacing:2px;
text-align:center;}
/*main structure*/
blockquote {
padding:5px 0 5px 30px;
border-left:1px solid #eee;
margin:10px 30px;
overflow: auto;
}
body {
background-repeat:repeat-y;
background-size: cover;
font-family:serif;
font-weight:100;
font-size:1em;
text-align:left;
margin:0;
line-height:18px;
overflow:auto;
}
a {
color:black;
text-decoration:none;
-webkit-transition:all 0.2s;
-moz-transition:all 0.2s;
-ms-transition:all 0.2s;
-o-transition:all 0.2s;
transition:all 0.2s; }
a:hover {
color:#45b69d;
}
img{
border:1px solid #fff;
border-radius:6px;
}
p {
margin-top:5px;
margin-bottom:5px}
#divider{
top:25px;
left:305px;
position:fixed;
width:420px;
position:absolute;
}
#dividerr{
bottom:20px;
left:37px;
width:420px;
position:fixed;
}
/*container*/
#con {
width:80%;
margin:0 10%;
position:fixed;
overflow:auto;
}
/*posts*/
.posts {
width:45%;
height:300px;
padding:4px;
background:white;
float:left;
margin:20px 20px;
border:1px solid #ffcec7;
border-radius:6px;
z-index:3;
}
#image {
position:absolute;
padding-top:8px;
padding-left:5px;
margin-right:5px;
}
#image img {
width:190px;
border:1px solid #fff;
border-radius:6px;
margin-right:8px;
}
.info {
margin-left:205px;
width:65%;
text-transform:none;
}
.tit {
font-weight:bold;
text-align:right;
font-family:georgia;
color:#ffa79b;
font-size:1.5em;
letter-spacing:1px;
text-transform:uppercase;
}
.lank {
border-bottom:1px dashed #ffcec7;
margin-bottom:5px;
padding-bottom:5px;}
.about ul {margin-left:-10px}
.quest {
font-size:1.25em;
font-family:Helvetica;
font-variant:small-caps;
}
.answ {
margin-top:10px;
margin-left:40px;
font-family:Georgia;
}
.grave {
text-align:center;
font-weight:bold;
margin-top:10px;
font-family:georgia;
font-size:1.5em;
letter-spacing:1px;
font-style:italic;
color:#cdba96;
}
.credit {
width:45%;
height:auto;
padding:4px;
background:white;
float:left;
margin:20px 20px;
border:1px solid #ffcec7;
border-radius:6px;
z-index:3;
}
/*header*/
.headertext {
color:beige;
font-size:6em;
letter-spacing:1em;
text-align:center;
font-family:Helvetica,sans-serif;
line-height: 80%;
height: auto;
}
.l {
background:#fff;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding:2px;
text-align:center;
font-family:inconsolata;
text-transform:uppercase;
border:1px solid #ffcec7;
border-radius:6px;
}
#title {
width:50%
font-size:14px;
margin:auto 0;
text-align:center;
letter-spacing:1px;
text-transform:uppercase;
color:#ffcec7;
background:#f8f8f8;
padding:15px;
border-bottom:1px solid #eee;}
.links {
color:#ffa79b;
font-family:georgia;
padding-top:10px;
text-align:center;
padding-bottom:5px;
border-bottom:1px dashed #ffcec7;
}
.links a {
margin:10px 5px;
padding:2px 5px;
border:none;
}
.links a:hover {
background:#f8f8f8;
border-radius:6px;
}
.desc {
text-transform:none;
margin:10px 25px;
font-family:Georgia;
}
Alrighty, so I managed to fix the thing by taking one element at a time. The problem was in
container {position:fixed;}
but I'm not sure why. I was using the position:fixed to center my background. Leaving this in case it helps someone in future.
In my html i have somewhat like this
<div id="content">
<div id="wrapper">
<div id="steps">
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="step">
<legend>General Information </legend>
</fieldset>
<fieldset class="step">
<legend>Medical History</legend>
</fieldset>
</form>
</div>
<div id="navigation" style="display:none;">
<ul>
<li class="selected">
General Information
</li>
<li>
Medical History
</li>
</div>
</div>
my css file is this
#content{
margin:30px auto;
text-align:center;
width:900px;
position: relative;
height:100%;
}
#left{
position: absolute;
z-index: 1;
margin-top:10px;
margin-left:30px;
text-align:center;
width:170px;
color:#000000;
height:500px;
-moz-box-shadow:0px 0px 13px #aaa;
-webkit-box-shadow:0px 0px 13px #aaa;
box-shadow:0px 0px 23px #aaa;
background-color:rgba(300,250,250,0.5);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#wrapper{
-moz-box-shadow:0px 0px 13px #aaa;
-webkit-box-shadow:0px 0px 13px #aaa;
box-shadow:0px 0px 23px #aaa;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:2px solid #fff;
//background-color:#f9f9f9;
background-color:rgba(220,220,220,0.5);
width:1000px;
height:100%;
overflow:hidden;
}
#steps{
width:1000px;
height:520px;
overflow: auto;
/* overflow: scroll;
overflow: */
}
.step{
float:left;
width:1000px;
/* height:600px; */
overflow-y: auto;
/* overflow:-moz-scrollbars-vertical; */
/*height:320px;*/
}
#navigation{
height:40px;
background-color:#e9e9e9;
border-top:1px solid #fff;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#navigation ul{
list-style:none;
float:left;
margin-left:10px;
}
#navigation ul li{
float:left;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
position:relative;
margin:0px 2px;
}
#navigation ul li a{
font-size: 10px;
display:block;
height:40px;
background-color:#444;
color:#777;
outline:none;
font-weight:bold;
text-decoration:none;
line-height:40px;
width: auto;
padding:0px 5px;
border-right:1px solid #fff;
border-left:1px solid #fff;
background:#f0f0f0;
background:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(240,240,240)),
color-stop(0.55, rgb(227,227,227)),
color-stop(0.78, rgb(240,240,240))
);
background:
-moz-linear-gradient(
center bottom,
rgb(240,240,240) 9%,
rgb(227,227,227) 55%,
rgb(240,240,240) 78%
)
}
I want to adjust my height of every fieldset according to the length of fields present in it. how can i do this?
Fieldsets automatically adjust in height to contain the form elements contained within. No additional CSS is required.
The fieldsets must contain form fields obviously; not 100% sure why you've omitted them from your example code.
I am trying to make the posts within #post-area align center instead of left. I have tried to adjust the float:left; on the .type-post to margin:0 auto; without any response.
HTML:
<div id="post-area">
<div id="post-24" class="post-24 post type-post status-publish format-standard hentry category-portfolio">
<div class="gridly-image"><img width="310" height="221" src="#" class="attachment-summary-image wp-post-image" alt="#" title="#"/></div>
<div class="gridly-category"><p>Portfolio</p></div>
<div class="gridly-copy"><h2>#</h2>
<p class="gridly-date">February 23, 2012 </p>
<p class="gridly-link">View more →</p>
</div>
</div>
CSS:
/* post and page styles */
.type-post { width:770px; background:#FFF; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; margin-right:10px; margin-top:15px; display:inline;}
.type-page { width:770px; background:#FFF; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; margin-right:10px; margin-top:15px; display:inline; float:left; }
.type-attachment { width:770px; background:#FFF; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; margin-right:10px; margin-top:15px; display:inline; float:left; }
.gridly-image { z-index:5; }
.gridly-category { position:absolute; width:auto; background:#8f4988; margin-top:-35px; z-index:10; height:30px; overflow:hidden;}
.gridly-category p { margin:0; padding:0; line-height:30px; padding-left:20px; padding-right:40px; color:#fff;}
.gridly-category a { color:#fff; font-style:italic;}
.gridly-category a:hover { color:#555;}
.gridly-copy { width:710px; margin-left:auto; margin-right:auto; margin-top:20px; margin-bottom:20px; overflow:hidden; }
.gridly-date { width:150px; color:#8e8e8e; font-size:11px;}
.size-full { width:100%; height:inherit;}
/* post index styles */
#post-area {margin:0 0 0 15px;}
#post-area .post { width:310px; background:#FFF; border-bottom-right-radius:5px; border-bottom-left-radius:5px; margin:15px 15px 15px auto; position:relative; }
#post-area .post .gridly-copy { width:250px; margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:20px; overflow:hidden; clear:both;}
#post-area .post .gridly-copy h2 { font-size:14px;}
#post-area .post .gridly-date { width:150px; color:#8e8e8e; font-size:11px; border-bottom:1px dotted #cccccc; padding-bottom:0; padding-top:0; }
#post-area .post .gridly-link { width:150px; border-top:1px dotted #e8e8e8; color:#494e51;}
#post-area .post .gridly-image img { border-top-right-radius:5px; border-top-left-radius:5px;}
Change .type-post{display:inline} to .type-post{margin:0 auto} removing display:inline.
Replace display:block instead of display:inline then it should work
in file jquery.masonry.min.js set
isFitWidth:true
add in css
#post-area
{
margin: 0 auto;
width: 100%;
}
The image below describes the issue. I am creating our comment forms. And want to create the pointer arrow in ffffff background color, and a border of 1px aaaaaa and border bottom fff so it sits comfortably on our container div
The issue I have is I can make a solid color pointer, but not sure if I can make what I want, so thought I would ask here please.
The css for the pointer is:
div.comment-reply .arrow{
border-bottom: 8px solid #888;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
height: 0;
left: 30px;
line-height: 0;
position: absolute;
top: -8px;
width: 0;
}
#422; you can do with css like this rotate property.
css
#C{
height:200px;
width:200px;
background:red;
border:1px solid #000;
position:relative;
}
.arrow{
height: 20px;
width: 20px;
margin-left:30px;
margin-top:-11px;
background:red;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
border-right:1px solid #000;
border-bottom:1px solid #000;
position:absolute;
bottom:-10px;
left:20px;
}
html
<div id="C"><span class="arrow"></span></div>
you can use :after, :before instead of span.
for IE you can use ie filter
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
CHECK THIS http://jsfiddle.net/sandeep/Hec3t/7/
Using some :before and :after magic, I was able to create this with the following code:
<div class="comment">
<div>
<p>Here is a comment</p>
</div>
</div>
__
.comment div:before {
content:"";
border:10px solid transparent;
border-bottom-color:#ccc;
width:0px;
height:0px;
display:block;
position:absolute;
top:-10px;
left:21px;
}
.comment div:after {
content:"";
border:12px solid transparent;
border-bottom-color:#fff;
width:0px;
height:0px;
display:block;
position:absolute;
top:-10px;
left:19px;
}
.comment {
position:relative;
margin:10px;
padding:10px;
}
.comment div {
padding:1em;
border:1px solid #ccc;
}
It's not perfect, but it avoids the need for an empty tag to contain your arrow.
Demo: http://jsfiddle.net/yGsKd/2/