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%;
}
Related
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.
I'm having an absolute nightmare with Volusion! Basically, I want to make my page wider so that I can fit more on it, and have a bit of an experiment with how the page is set out.
I've tried editing the CSS but it either doesn't change or everything seems to move out of place! This is the CSS i'm attempting to work with:
div.pages_available_text {
font-size: 17px !important;
font-weight: bold !important;
}
a{text-decoration:none;}
a,a:visited,a:active{outline-style:none;}
a:hover{text-decoration:underline;
color:#79CDCD;}
img{border:none!important;}
.begin{border:none !important;}
.end{border:none !important;}
.bold{font-weight:bold !important;}
.highlight{color:#06a0cf !important;}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.none{display:none !important;}
.block{display:block !important;}
.inline{display:inline !important;}
/* ############################### FIXES ############################### */
.qe_toolbar_ovr{z-index:9999 !important;} /*admin box*/
/* ############################### WINTER 09 STYLES ############################### */
.next_page_img{width:auto !important; height:auto !important;}
.previous_page_img{width:auto !important; height:auto !important;}
.soft_add_content_area span, .quantity{color:#000;}
.soft_add_wrapper {z-index:1100;}
/* ############################### PAGE WRAPPER ############################### */
body{
background-color:#ffcd05;
color:#505050;
font: normal 17px Arial, Helvetica, sans-serif;
margin:0;
padding:0;
text-align:center;
}
#page{
margin:0 auto;
text-align:left;
width:980px;
}
div{
font-size: 15px;
font:Arial, Helvetica, sans-serif;
}
#app {
color:#FFFF00;
font-size:20px;
text-align:center;
border-radius: 5px;
background-color:#000000;
clear:both;
border:none;
float:left;
width:160px;
padding:5px;
font-family:Coolsville, Cursive, sans-serif;
margin-bottom:10px;
}
#download {
height:70px;
width:71px;
}
#video {
align:middle;
}
/* ############################### HEADER ############################### */
#header{
background:url(../images/template/header_bg.jpg) no-repeat 22px 35px;
height:180px;
margin:0 auto;
padding:0;
position:relative;
width:980px;
}
#header div#display_homepage_title{
height:50px;
left:22px;
margin:0;
padding:0;
position:absolute;
top:77px;
width:400px;
}
#header div#display_homepage_title a{
display:block;
height:100%;
left:0;
margin:0;
padding:0;
position:absolute;
text-align:left;
text-indent:-9999px;
top:0;
width:100%;
}
#header div a#homepage_title{
background:none;
color:#2c2c2c;
font-size:20px;
text-indent:0;
}
#header .top{
background:url(../images/template/divider.gif) repeat-x 0 bottom;
color:#202020;
font-size:13px;
margin:0;
padding:1px 1px 2px;
text-align:right;
}
#header .top a{
border-right:1px solid #202020;
display:inline-block;
color:#202020;
font-size:13px;
height:13px;
padding:0 0px;
vertical-align:middle;
}
.app {
padding:10px;
}
.social {
padding:5px;
float:center;
}
/* ############################### SEARCH BOX */
#display_search{
background:url(../images/template/searchBg.gif) no-repeat 0 0;
float:right;
bottom:5px;
height:21px;
margin:12px 20px 0 0;
width:213px;
}
#display_search form{
height:100%;
margin:0;
padding:0;
width:100%;
}
#display_search #search_input{
background:none;
border:none;
color:#2c2c2c;
display:block;
float:left;
font:normal 12px Arial, Helvetica, sans-serif;
margin:0;
padding:4px 10px 2px 10px;
text-align:left;
width:168px;
}
#display_search #search_submit{
background:none;
border:none;
color:#fff;
cursor:pointer;
display:block;
float:right;
font-size:0;
height:21px;
margin:0;
padding:0;
text-align:right;
text-indent:-9999px;
width:24px;
}
/* ############################### SHOPPING CART DISPLAY */
#header .cart{
color:#202020;
font-size:13px;
float:right;
margin:8px 8px 0 0;
text-align:right;
}
#header .cart a{color:#202020;}
#display_cart_summary,
.cartsummary_full,
.cartsummary_empty{display:inline;}
#display_cart_summary a{display:none !important;}
/* ############################### TOP NAVIGATION ############################### */
#topnav{
background:url(../images/template/divider.gif) repeat-x 0 0;
min-height:52px;
margin:0 auto;
padding:2px 0px 0;
width:980px;
}
/* ############################### CONTENT ############################### */
#content{
background:url(../images/template/contentBg.gif) repeat-y 0 0;
margin:0 auto;
width:980px;
}
#content .inner{
padding:0px 10px 0;
margin-left:8px ;
}
/* ############################### LEFT_NAV ############################### */
#leftnav{
float:left;
width:190px;
}
#leftnav h3{
font-size:17px;
font-weight:normal;
padding:5px 5px 5px 15px;
text-transform:uppercase;
}
#leftnav .menu{padding-bottom:28px;}
/* ############################### PROMOTIONS */
#display_promotions_999{
margin:0;
padding:10px 0;
text-align:center;
vertical-align:middle;
width:1200px;
}
/* ############################### CONTENT AREA ############################### */
#content_area{
float:right;
padding:0 10px;
text-align:left;
width:700px;
}
#content #content_area table{text-align:left;}
/* ############################### FOOTER ############################### */
#footer{
background:url(../images/template/contentBot.gif) no-repeat 0 0;
margin:0 auto;
padding-top:10px;
width:980px;
}
#footer .top{
background:#2c2c2c url(../images/template/footerBg.gif) no-repeat 0 bottom;
color:#000000;
font-size:13px;
padding:20px 20px 15px;
width:940px;
}
/* ############################### MAILING LIST */
#eList{
float:right;
width:186px;
}
#eList div.title{
color:#ffcd05;
font-size:13px;
font-weight:bold;
margin:0 5px 6px 0;
text-align:right;
}
#eList form{
background:url(../images/template/elistBg.gif) no-repeat 0 0;
height:22px;
margin:0;
padding:0;
width:186px;
}
#elist_input{
background:none;
border:none;
color:#fff;
display:block;
float:left;
font:normal 11px Arial, Helvetica, sans-serif;
margin:0;
padding:5px 10px 3px 10px;
text-align:left;
width:145px;
}
#elist_submit {
background:none;
border:none;
color:#2c2c2c;
cursor:pointer;
display:block;
float:right;
font-size:0;
height:22px;
margin:0;
padding:0;
text-align:right;
text-indent:-9999px;
width:20px;
}
#footer .top ul{
float:left;
list-style:none;
margin:0;
padding:0;
width:188px;
}
#footer .top ul li.title{
color:#ffcd05;
font-weight:bold;
}
#footer .top ul li{
color:#fff;
font-size:13px;
padding-bottom:4px;
}
#footer .top ul li a{
color:#fff;
}
#footer .bottom{
color:#505050;
font-size:12px;
line-height:20px;
margin:20px auto;
text-align:center;
width:999px;
}
#footer .bottom a{
color:#505050;
}
I'm ok with HTML and CSS but pretty hopeless at anything else and i've read so many articles and forums but can't seem to get anywhere!
If you are referring to the mytoolkit.co.uk site, you are editing the wrong element. You need to make the page container div wider and then work your way down from there.
In your case, it looks like you need to edit the div with the ID "page". For example:
#page {width:1024px}
Then you would edit any additional child divs like the header, content, and footer divs.
I want to create a stylized border with CSS3 like the below image. But, I don't know how? Here is the image:
Like this: http://nicolasgallagher.com/pure-css-speech-bubbles/
.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c;
/* css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content:"";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
bottom:-15px;
left:50px;
width:0;
border-width:15px 15px 0;
border-style:solid;
border-color:#f3961c transparent;
}
<style type="text/css">
.comments .comment{
width:10%;
margin-bottom:20px;
}
.comments .comment p{
margin:0 0 10px 0;
}
.bubble{
position:relative;
background-color:#CCC;
padding:20px;
color:#009;
border-radius:3px;
margin-left:20px;
}
.bubble::after{
content:"";
display:block;
position:absolute;
left:-15px;
top:15px;
width:0px;
height:0px;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-right:15px solid #CCC;
}
</style>
<div class="comments">
<div class="comment bubble">
<p>This is comment</p>
</div>
</div>
you can use CSS3 box_round:
.box_round {
-webkit-border-radius: 5px;
border-radius: 5px;
}
try this site :)
I have the following CSS for some DIVs,
#wrapper {
width:960px;
border:1px solid red;
overflow:hidden;
}
#maintitle {
width:600px;
height:50px;
float:left;
border:1px solid #333;
}
#sidebar {
clear:both;
float:left;
width:100px;
height:200px;
border:1px solid #ccc;
}
#rightSidebar {
width:100px;
height:200px;
float:right;
border:1px solid #CCC;
}
I would think the #rightSidebar div would float to the very top right corner of the #wrapper div, however, it's staying below the #maintitle DIV.
The #maintitle DIV is floating to the left, would it then allow the #rightsidebar div to float to the very top right corner?
Here it is in action, http://jsfiddle.net/BdpU7/.
Is this what you had in mind? http://jsfiddle.net/BdpU7/1/
The #rightSidebar needs to go before #sidebar in the HTML, and then #sidebar has to have the clear:
#wrapper {
width:960px;
border:1px solid red;
overflow:hidden;
}
#maintitle {
width:600px;
height:50px;
float:left;
border:1px solid #333;
}
#sidebar {
clear:left;
float:left;
width:100px;
height:200px;
border:1px solid #ccc;
}
#rightSidebar {
width:100px;
height:200px;
float:right;
border:1px solid green;
}
<div id="wrapper">
<div id="maintitle"></div>
<div id="rightSidebar"></div>
<div id="sidebar"></div>
</div>
I have a footer on my page, where the content is placing correctly, under div#main (which includes div#left and div#right), but the background (the big blue thing) is placed way over div#main.
I have tried display:block and z-indexing the divs, to no avail.
Anyone have any idea what's going on?
Code:
body {
background:url(aaa-bg.jpg) repeat-x #e7e9e9;
margin:0;
padding:0;
color:#383838;
font:12pt verdana;
}
img {
border:0;
}
a:link {
color:#e29511;
text-decoration:none;
}
a:hover {
color:#e29511;
text-decoration:underline;
}
a:visited {
color:#808080;
}
/* header ------------------------------------------------------------------------------ */
#header {
margin:10px auto 10px;
width:800px;
height:97px;
}
/* nav ------------------------------------------------------------------------------ */
#nav {
width:800px;
margin:0px auto 3px;
height:30px;
}
#nav ul {
margin:0 0px 0px 0;
padding:0;
list-style:none;
}
#nav ul li {
width:140px;
height:20px;
padding:5px 0 5px 0;
float:left;
margin:0 10px 0 0;
background:#cdcdcd;
color:#000000;
position:relative;
z-index:99999;
text-align:center;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-top:3px solid transparent;
border-left:3px solid transparent;
border-right:3px solid transparent;
}
#nav ul li:hover {
cursor:pointer;
border-top:3px solid #e29511;
border-left:3px solid #e29511;
border-right:3px solid #e29511;
}
#nav ul li.home {
width:140px;
height:20px;
padding:5px 0 5px 0;
float:left;
margin:0 10px 0 0;
background:#cdcdcd;
color:#000000;
position:relative;
z-index:99999;
text-align:center;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-top:3px solid transparent;
border-left:3px solid transparent;
border-right:3px solid transparent;
}
#nav ul li.home:hover {
cursor:pointer;
-moz-box-shadow: 5px 5px 2px #656565;
-webkit-box-shadow: 5px 5px 2px #656565;
box-shadow: 5px 5px 2px #656565;
}
#nav ul li ul {
width:140px;
margin:5px 0 0 -3px;
float:left;
-moz-box-shadow: 5px 5px 2px #656565;
-webkit-box-shadow: 5px 5px 2px #656565;
box-shadow: 5px 5px 2px #656565;
background:url(aaa-navbg3.png) repeat-x #ffffff;
border-bottom:3px solid #e29511;
border-left:3px solid #e29511;
border-right:3px solid #e29511;
}
#nav ul li ul li {
width:140px;
font-weight:normal;
font-size:10pt;
background:none;
border-top:1px solid #808080;
border-left:none;
border-right:none;
border-top-left-radius:0px;
border-top-right-radius:0px;
}
#nav ul li ul li:hover {
background:url(aaa-libg2.png) repeat-x;
border-top:1px solid #808080;
border-left:none;
border-right:none;
}
/* toppane ------------------------------------------------------------------------------ */
#toppane {
width:100%;
height:210px;
background:url(aaa-toppane3.jpg) repeat-x;
padding:20px 0 20px;
margin:0px 0 20px 0;
position:relative;
z-index:-1;
border-top:1px solid #000000;
border-bottom:1px solid #000000;
}
#toppane-inner {
width:800px;
height:210px;
margin:0px auto;
}
/* slideshow ------------------------------------------------------------------------------ */
#window {
clear:both;
width:800px;
height:210px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
}
#slideshow {
width:1600px;
height:420px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
}
#slideshow li {
width:800px;
height:210px;
float:left;
display:inline;
margin:0;
padding:0;
}
/* main ------------------------------------------------------------------------------ */
#main {
width:800px;
margin:5px auto;
padding:0px;
}
#left {
width:390px;
margin:0 20px 0 0;
padding:0px;
float:left;
}
#right {
width:390px;
font-size:11pt;
margin:0;
padding:0px;
float:right;
}
#right img {
margin:0 0 5px 0;
}
#right a:link {
text-decoration:none;
color:#383838;
}
#right a:hover {
text-decoration:none;
color:#383838;
}
#right a:visited {
text-decoration:none;
color:#383838;
}
h2 {
width:390px;
font:14pt verdana;
border-bottom:1px solid #383838;
margin:0 0 5px 0;
text-align:right;
}
.segment {
margin:0 0 40px 0;
}
#footer {
background:blue;
width:800px;
margin:30px auto;
color:#ffffff;
}
#footer table {
width:800px;
}
#footer tr {
width:800px;
}
#footer td {
width:200px;
}
Adding clear:left; to your footer solves this problem.
The issue you're seeing is that #left and #right both extend outside of the #main div since they're floating and nothing inside the #main div is clearing those floats.
The footer is then stacking vertically against the #main div which is not the same height as #left and #right.
One thing you can do to pull the main div down over the floated items is add something at the end of it to clear the floats. You can do this with CSS as follows:
#main:after{
content:".";
display:block;
clear:both;
visibility:hidden;
}
What you need to use is what's called a "clear fix". Things are overlapping because the browser doesn't know when to stop "floating" things, so to speak.
You can either:
a) Add after your main divs the following
<div style="clear: both;"> </div>
b) Add the clear: both style to your footer itself.