Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

A Question about blog CSS

I think you should find setting max-width and min-width (with a default width too) css will work, I'm not sure. That's essentially a "best fit" option.
 
well I found the max width, but, what do I do

.post-title {
background:#F0F0F0;
border-top: 1px solid #FFFFFF;
font-size: 10px;
font-weight: normal;
margin: 0;
padding: 10px;
text-transform: uppercase;
text-align: center;
max-width:270px;
}


edit: actually I get the feeling thats it. Here's the entire css of my page:
Code:
<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

  <head>

<link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'/>

<link href='http://fonts.googleapis.com/css?family=Astloch' rel='stylesheet' type='text/css'/>

    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'/>

    <b:include data='blog' name='all-head-content'/>

    <title><data:blog.pageTitle/></title>

 

<!--[if lt IE 8]>

<style>

 .list-label-widget-content li{

white-space:normal !important;

}

#comments-block .comment_content {

    margin-top:-25px !important;

}

.PopularPosts .item-title{

    margin-top: -25px !important;

}

</style>

<![endif]-->

 

    <b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name:     WhiteMagic

Designer: Bloggerzbible

URL:      www.bloggerzbible.com

Date:     11 Jan 2011

-----------------------------------------------

*/ Page elements Settings

---------------------------------------------*/

body#layout #sidebar-wrapper{

margin:0px;

}

body#layout #crosscol-wrapper {

    width: 100%;

}

body#layout #footer-wrapper {

margin:0;

}

body#layout .footer-inner {

padding:0px;

outline:0;

}

/*-----------------------------------------------------------------------------------*/

/*  0.  CSS Reset & Clearfix - [url=http://meyerweb.com/eric/tools/css/reset/]http://meyerweb.com/eric/tools/css/reset/[/url]

/*-----------------------------------------------------------------------------------*/

 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }

 

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } /* Hide from IE Mac \*/ .clearfix { display: block; } /* End hide from IE Mac */ .none { display: none; } /* End Clearfix */

 

#navbar-iframe {

height:0px;

visibility:hidden;

display:none;

}

::selection {

    color:#fff;

    background: #F26535;   /* Changes color in Safari */

    }

::-moz-selection {

    color:#fff;

    background: #F26535;   /*Changes color in  Firefox */

}

body { 

    border-top: 10px solid #f5f5f5; 

    font: 12px/20px "Droid Sans", Helvetica, Arial, sans-serif;

    background: #fff;

    color: #444;

}

input,

textarea {

    font: 12px/20px "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

    background: #fff;

    color: #999;

    border: 1px solid #fff;

}

 

a{

text-decoration:none;

    color: #88BBC8;

}

a:hover{

color:#F26535;

}

a img {

  border-width: 0;

}

.clear {

    clear: both;

    display: block;

    font-size: 0;

    height: 0;

    line-height: 0;

    width:100%;

}

p,

pre,

ul,

ol,

dl,

dd,

blockquote,

address,

table,

fieldset,

form,

{ margin-bottom: 20px; }

 

.hentry,

.navigation-links,

.hfeed,

.pinglist { margin-bottom: 20px; }

 

.widget

.entry-content ol ol,

.entry-content ol ul,

.entry-content ul ul,

.comment-body ol ol,

.comment-body ol ul,

.comment-body ul ul,

.widget ul ul { margin-bottom: 0; }

 

h1,

h2,

h3,

h4,

h5,

h6 {

    font-weight: normal;

    padding: 0;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

 

h1 {

    font-size: 24px;

    line-height: 28px;

}

 

h2 {

    font-size: 20px;

    line-height: 22px;

}

 

h3 {

    font-size: 16px;

    line-height: 20px;

}

 

h4 {

    font-size: 14px;

    line-height: 18px;

    margin-bottom: 15px;

    font-family: "Droid Serif", Georgia, Times, serif;

    font-style: italic;

}

 

h5 {

    font-size: 12px;

    line-height: 18px;

}

 

h6 {

    font-size: 10px;

    line-height: 16px;

}

 

.entry-content h2,

.entry-content h3,

.entry-content h4,

.entry-content h5,

.entry-content h6 {

    font-weight: bold;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    margin-bottom: 15px;

    padding-top: 15px;

    font-style: normal;

}

.jump-link {

    font-family: "Droid Serif", Georgia, Times, serif;

    font-style: italic;

}   

 

/* Header

----------------------------------------------- */

#header-wrapper {

    border-bottom: 1px solid #EFEFEF;

    margin: 30px auto;

    padding: 0;

    width: 940px;

}

#header {

  margin: 0 auto;

  padding: 0;

float:left;

}

h1.title {

font-family:"Astloch";

font-size:40px;

  margin: 0 14px .1em;

  line-height: 1.2em;

color:#6E15AF;

}

h1.title a, h1.title a:visited {

color:#6E15AF;

  text-decoration: none;

}

#header .description {

    display: block;

    font-family: "Droid sans";

    letter-spacing: 3px;

    line-height: 1.4em;

    padding: 0 0 20px;

    text-align: center;

}

/* NAVIGATION MENU

-----------------------------------------------*/

#crosscol-wrapper{

float:right;

}

#crosscol-wrapper h2{

display:none;

}

#primary-nav {

    float: right;

    margin-top: 20px;

}

#primary-nav ul {

    margin: 0;

    padding: 0;

    list-style: none;

    line-height: 35px;

}

 

#primary-nav ul a {

        display:inline;

    position: relative;

}

 

#primary-nav ul li {

    float: left;

    position: relative;

    z-index: 40;

}

 

#primary-nav ul li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }

 

#primary-nav ul ul {

    position: absolute;

    top: -9999em;

    width: 150px; /* left offset of submenus need to match (see below) */

}

 

#primary-nav ul ul li { width: 100%; }

 

/*  Make sub menus appear */

#primary-nav ul li:hover ul,

#primary-nav ul li.sfHover ul {

    left: -1px;

    top: 36px; /* match top ul list item height */

    z-index: 99;

}

 

/* Hide all subs subs (4 levels deep) */

#primary-nav ul li:hover li ul,

#primary-nav ul li.sfHover li ul,

#primary-nav ul li li:hover li ul,

#primary-nav ul li li.sfHover li ul,

#primary-nav ul li li li:hover li ul,

#primary-nav ul li li li.sfHover li ul { top: -9999em; }

 

/* Displays all subs subs (4 levels deep) */

#primary-nav ul li li:hover ul,

#primary-nav ul li li.sfHover ul,

#primary-nav ul li li li:hover ul,

#primary-nav ul li li li.sfHover ul,

#primary-nav ul li li li li:hover ul,

#primary-nav ul li li li li.sfHover ul {

    left: 180px; /* match .nav ul width */

    top: -1px;

}

    

/* top level skin */

#primary-nav ul a {

    padding: 0 15px;

    color: #999;

    height: 35px;

    line-height: 35px;

}

 

#primary-nav ul li a:hover,

#primary-nav ul li:hover,

#primary-nav ul li.sfHover a,

#primary-nav ul li.current-cat a,

#primary-nav ul li.current_page_item a,

#primary-nav ul li.current-menu-item a {

    text-decoration: none;

    color: #444!important;

}

 

/* 2nd level skin */

#primary-nav ul ul {

    padding: 10px 15px 10px 15px;

    margin:0;

    background: #fff;

    border: 1px solid #e0e0e0;

    -webkit-border-radius: 3px;

       -moz-border-radius: 3px;

            border-radius: 3px;

    -webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.1);

       -moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.1);

            box-shadow:0 0 4px rgba(0, 0, 0, 0.1);

}

 

#primary-nav ul ul li {

    height: 35px;

    line-height: 35px;

    float: none;

    background: none;

    border-bottom: 1px solid #f0f0f0;

}

 

#primary-nav ul ul li:last-child {border-bottom: none; }

 

#primary-nav ul ul li a {

    line-height: 35px;

    height: 35px;

    font-size: 12px;

    padding:0;

    font-weight: normal;

}

 

#primary-nav ul li.sfHover ul a { color: #999!important; }

 

#primary-nav ul li.sfHover ul a:hover { color: #444!important; }

 

/* Content

----------------------------------------------- */

.clear { 

  clear: both;

}

#content-wrapper {

  width: 940px;

  margin: 0 auto;

  padding: 0 0 15px;

}

#main-wrapper {

  width: 640px;

  float:left;

  display: inline;       /* fix for doubling margin in IE */

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

}

#sidebar-wrapper {

margin:20px 0 0 19px;

  width: 280px;

  float:left;

  display: inline;       /* fix for doubling margin in IE */

  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */

}

 

/* Headings

----------------------------------------------- */

h2, h3 {

  margin: 0;

}

/* Posts

----------------------------------------------- */

.date-header {

  margin: 1.5em 0 0;

  font-weight: normal;

  display:none;

  font-size: 100%;

}

.post-header {

    border: 1px solid #EEEEEE;

    font-family: "Droid Serif",Georgia,Times,serif;

    font-size: 10px;

    font-style: italic;

    margin: 10px 0 22px !important;

    border-left-width: 0;

    border-right-width: 0;

    margin-top: 2px;

    padding-left: 15px;

}

.post-header span{

margin:0;

}

.post {

float:left;

  margin-right:20px;

    -moz-box-shadow: 0 0 8px 0 #EEEEEE;

    -moz-border-radius: 3px 3px 3px 3px;

    border: 1px solid #CCCCCC;

    display: inline;

    padding: 0;

width: 290px;

}

.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6 {

font-weight:bold;

    margin: 7px 0;

}

.post-title {

    background:#F0F0F0;

    border-top: 1px solid #FFFFFF;

    font-size: 10px;

    font-weight: normal;

    margin: 0;

    padding: 10px;

    text-transform: uppercase;

    text-align: center;

max-width:270px;

}

.post-title a, .post-title a:visited, .post-title strong {

  text-decoration: none;

  color:#777;

display:block;

}

.separator{

    line-height: 0 !important;

    text-align: left !important;

clear:none !important;

}

.separator a{

margin:1em 1em 1em 0 !important;

}

.post-footer .span {

  margin-right: .3em;

}

.post img, table.tr-caption-container {

display:block;

}

.tr-caption-container img {

  border: none;

  padding: 0;

}

.post ul,.post ol{

    list-style: square inside none;

    margin: 10px 0;

    padding-left: 20px;

}

.post blockquote {

  margin: 1em 20px 1em 0;

    background: url("http://3.bp.blogspot.com/_sAefHxrmPGg/TW1dfOsSw4I/AAAAAAAABtI/U2gYZz88g-Q/s000/edit-quotation.png") no-repeat;

    padding-left: 20px;

}

.post blockquote p {

  margin: .75em 0;

}

.entry-content-1{

    height:260px;

    width:280px;

    font-size:0px;

    line-height:0px;

    padding:5px;

    border-bottom: 1px solid #CCCCCC;

    overflow:hidden;

}

/* Comments

----------------------------------------------- */

#comments h4 {

  margin: 1em 0;

}

#comments h4 strong {

  font-size: 110%;

}

#comments-block dt {

  margin: .5em 0;

}

#comments-block dd {

  margin: .25em 0 0;

}

#comments-block dd.comment-footer {

  margin: -.25em 0 2em;

  line-height: 1.4em;

  font-size: 78%;

    display: none;

}

#comments-block dd p {

  margin: 0 0 .75em;

}

#comments-block .avatar-image-container {

margin-right:15px;

    float: left;

    height: 70px;

    position: relative;

left:0;

    width: 70px;

}

#comments-block .avatar-image-container img {

    height: 70px;

    width: 70px;

    z-index: 100;

}

#comments-block.avatar-comment-indent {

    margin-left: 4px;

    position: relative;

}

ol #comments-block li {

    border-bottom: 1px solid #EEEEEE;

    list-style:none;

    margin: 20px 0;

    z-index: -100;

min-height:90px;

}

#comments-block .comment_content {

    width: 500px;

}

.deleted-comment {

  font-style:italic;

  color:gray;

}

.feed-links {

  clear: both;

  line-height: 2.5em;

}

.blog-feeds{

display:none;

}

#blog-pager {   

  text-align: center; 

 }

/* Sidebar Content

----------------------------------------------- */

.sidebar h2 {

    color: #999999;

    font-family: "Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

    font-size: 9px;

    letter-spacing: 1px;

    margin: 0 0 10px;

    padding-left: 6px;

    text-transform: uppercase;

}

.sidebar ul {

  margin: 0;

  padding: 0;

  list-style: none;

}

.sidebar li {

  margin: 0;

  padding: 0;

  line-height:24px;

}

.sidebar {

  line-height:1.3em; 

}

.sidebar .widget{

    margin: 0 5px 40px 5px;

}

.sidebar .widget .widget-content img{

    -moz-border-radius: 2px 2px 2px 2px;

    -moz-box-shadow: 0 0 8px 0 #EEEEEE;

    border: 1px solid #CCCCCC;

    padding: 4px;

}

/* Labels

----------------------------------------------*/

 .list-label-widget-content li {

    display: inline;

    line-height: 28px;

    margin-right: 4px;

    padding: 0;

white-space:nowrap;

}

 .list-label-widget-content li a {

    -moz-border-radius: 8px;

    -moz-box-shadow: 0 0 3px 0 #E9E9E9;

    border: 1px solid #88BBC8;

    font-size: 10px;

    letter-spacing: 1px;

    padding: 4px;

    text-transform: uppercase;

}

.list-label-widget-content li span{

display:none;

}

 

/* Global widget settings

-----------------------------------------*/

.widget .widget-item-control a img {

    -moz-box-shadow: none !important;

    background: none !important;

    border: none !important;

}

.blog-list-container .blog-icon img{

    -moz-box-shadow: none !important;

    background: none !important;

    border: none !important;

padding:0px !important;

}

.Text .widget-content {

    line-height: 22px;

    text-align: justify;

}

/* Popular Posts

-----------------------------------------------*/

.PopularPosts .item-thumbnail {

    float: left;

    margin: 0 15px 0 0;

}

/*NewsBar

---------------------------------------------- */

.gs-result .gs-title, .gs-result .gs-title * {

color:#88BBC8 !important;

}

.gs-result a.gs-clusterUrl, .gs-result .gs-clusterUrl {

color:#88BBC8 !important;

}

/* Archives

------------------------------------------------*/

select#BlogArchive1_ArchiveMenu{

    border: 1px solid #BBBBBB;

    cursor: pointer;

    text-align: center;

    width: 260px;

}

/* Profile 

----------------------------------------------- */

.profile-img { 

  margin-top: 0;

  margin-bottom: 5px;

  padding: 4px;

}

.profile-data {

  margin:0;

  text-transform:uppercase;

  letter-spacing:.1em;

  font-weight: bold;

  line-height: 1.6em;

  font-size: 78%;

}

.profile-datablock {

  margin:.5em 0 .5em;

}

.profile-textblock {

  margin: 0.5em 0;

  line-height: 1.6em;

}

/* Footer

----------------------------------------------- */

#footer-wrapper{

    border: 3px solid #F7F7F7;

    margin: 30px auto;

    width: 940px;

}

.footer-inner{

    border: 1px solid #E7E7E7;

    outline: 1px solid #FFFFFF;

    padding: 50px 30px 30px;

}

#footer {

  clear: both;

  text-align: center;

}

#footer .widget {

  margin:.5em;

  padding-top: 20px;

  font-size: 85%;

  line-height: 1.5em;

}

.footer_columns{

width: 30%;

float: right; 

margin:0 14px; 

text-align: left;

}

.footer_columns h2 {

    color: #999999;

    font-family: "Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

    font-size: 9px;

    letter-spacing: 1px;

    line-height: 20px;

    margin: 0 0 17px;

    text-transform: uppercase;

}

.footer_columns .widget-content img {

    -moz-border-radius: 2px 2px 2px 2px;

    -moz-box-shadow: 0 0 8px 0 #EEEEEE;

    border: 1px solid #CCCCCC;

    padding: 4px;

}

.footer_columns li {

  margin: 0;

  padding: 0;

  line-height:24px;

}

.copyright {

    border-top: 1px solid #EEEEEE;

    font-size: 9px;

    margin: 41px 0 0;

    padding-top: 6px;

}

/* Pagination

---------------------------------------*/

.showpage a {

    background: none !important;

    border:none !important;

    margin: 0 !important;

    text-decoration: none;

}

.showpage a:hover {

    background: none !important;

}

.showpageNum a {

    -moz-border-radius:3px;

    -moz-box-shadow: 0 0 8px 0 #EEE !important;

    border: 1px solid #CCCCCC !important;

    margin: 0 3px !important;

    padding: 2px 7px !important;

    text-decoration: none;

}

.showpageOf {

color:#777 !important;

    margin: 3px;

    padding: 4px 8px;

}

.showpageNum a:hover {

    background: none !important;

}

.showpagePoint {

    -moz-border-radius: 3px !important;

    -moz-box-shadow:0 0 8px 0 #EEE !important;

    background:none !important;

    border: 1px solid #ccc !important;

    color: #777 !important;

    margin: 0 3px !important;

    padding: 2px 7px !important;

    text-decoration: none !important;

}

/* Sponsors

-------------------------------------- */

.sponsors li{

    float: left;

    margin: 0 2px;

}

.sponsors li img{

    border:0 !important;

    padding: 0 !important;

}

/* Flickr widget

-------------------------------------- */

.flickr_badge_image {

    float: left;

    margin: 0 8px 8px 0;

}

.flickr_badge_image img {

    background: none repeat scroll 0 0 #FFFFFF;

    border: 1px solid #E5E5E5;

    height: 41px;

    padding: 3px;

    width: 41px;

}

#searchBox { 

    margin: 0 10px 30px;

    width: 250px;

height: 20px;

    padding: 5px;

    background: none repeat scroll 0 0 #F5F5F5;

    border: 1px solid #FFFFFF;

 }

 

#searchBox:focus{

    background: #fff;

    border: 1px solid #ccc;

    -webkit-box-shadow: 0 0 8px 0 #EEEEEE;

    -moz-box-shadow: 0 0 8px 0 #EEEEEE;

    box-shadow: 0 0 8px 0 #EEEEEE;

}

#searchBox:focus

 { color: #444; }

 

 

]]></b:skin>

 

 

 

  </head>

 

  <body>

  <div id='outer-wrapper'><div id='wrap2'>

 

    <!-- skip links for text browsers -->

    <span id='skiplinks' style='display:none;'>

      <a href='#main'>skip to main </a> |

      <a href='#sidebar'>skip to sidebar</a>

    

 

    <div class='clearfix' id='header-wrapper'>

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='extreme of consciousness (Header)' type='Header'/>

</b:section>

 

      <div id='crosscol-wrapper'>

        <b:section class='crosscol' id='crosscol' maxwidgets='1' showaddelement='no'>

<b:widget id='HTML1' locked='true' title='MENU' type='HTML'/>

</b:section>

      </div>

    </div>

 

    <div id='content-wrapper'>

      <div class='clearfix' id='main-wrapper'>

        <b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

<b:widget id='HTML2' locked='false' title='' type='HTML'/>

</b:section>

      </div>

 

      <div id='sidebar-wrapper'>

 

        <b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML3' locked='false' title='Disqus for Extreme of Consciousness' type='HTML'/>

<b:widget id='Text1' locked='false' title='who am I?' type='Text'/>

<b:widget id='Stats1' locked='false' title='People who love me' type='Stats'/>

<b:widget id='LinkList1' locked='false' title='great art sites' type='LinkList'/>

<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>

</b:section>

      </div>

 

      <!-- spacer for skins that want sidebar and main to be the same height-->

      <div class='clear'>&#160;</div>

 

    </div> <!-- end content-wrapper -->

 

    <div id='footer-wrapper'>

 

<div class='footer-inner'>

        <div class='footer_columns'>

            <b:section class='footer-column' id='col1' preferred='yes'/>

        </div>

 

        <div class='footer_columns'>

            <b:section class='footer-column' id='col2' preferred='yes'/>

        </div>

 

        <div class='footer_columns'>

            <b:section class='footer-column' id='col3' preferred='yes'/>

        </div>

 

      <div class='clear'/>

<p class='copyright'>

            &#169; Copyright 2011. Powered by <a href='http://www.blogger.com'>Blogger</a>.  Theme by <a href='http://www.bloggerzbible.com'>Bloggerzbible</a> 

</p>

</div>

 

    </div>

 

  </div></div> <!-- end outer-wrapper -->

</body>

</html>

               
 

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top