Recent Topics

Post Header does not adjust, when two-lined

Started by on Mar 18, 2013 – Contents updated: Apr 01, 2013

Mar 18, 2013 13:41    

Hi guys!

I use the nonzero 3-column, free-floating skin as baseline for my blog http://freiundquer.de

The content adjusts based on the current window width. When decreasing the window size on the desktop, but also on the smartphone due to its smaller screen, post header sometimes get two-lined, because the header length is larger than the main column width.

In general, that's a good thing, but my problem is: The text below the heading, but above the heading line does not move, so there is an overlapping in case of a two-lined heading. Please see the pictures below, then it will be clear what I mean.

http://freiundquer.de/media/blogs/freiundquer/freiundquer_header1.png
http://freiundquer.de/media/blogs/freiundquer/freiundquer_header2.png

Any idea how to solve this?

Mar 19, 2013 22:19

Is the header container set to a fixed height? Without seeing what the code or CSS you used, that's the only thing I can think of.

Mar 20, 2013 14:56

Code

@charset "UTF-8";
/* -------------------------------- b2evolution Stylesheet Imports --------------------------------- */
@import url("../../../../rsc/css/basic.css");    /*  Import basic styles      */
@import url("../../../../rsc/css/blog_base.css");  /*   Import default blog navigation styles  */
@import url("item.css");        /*   Import blog content styles    */
/* -------------------------------- b2evolution Stylesheet Imports --------------------------------- */
 
/*
 
  Nonzero1.0 by nodethirtythree design
  http://www.nodethirtythree.com
  missing in a maze
 
*/
 
/*
  This is the main CSS
    without the color specific changes.
  This is to avoid duplication, make debugging easier,
    and minimize the bytes of the files.
*/
 
/* Basic Stuff */
 
*
{
margin: 0em;
padding: 0em;
}
 
html, body
{
min-width:1000px;
max-width:1900px;
overflow:auto;
}
 
body
{
background-color: #fff;
color: #585858;
font-size: 10pt;
font-family: "trebuchet ms", helvetica, sans-serif;
line-height: 140%;
 
}
 
h1,h2,h3,h4,h5,h6
{
font-weight: normal;
font-size: 9pt;
line-height: 100%;
letter-spacing: -1px;
/* text-transform: lowercase; */
}
 
span h1,
h1 span
{
font-weight: bold;
}
span h1 a,
h1 span a {
  text-decoration: none;
  color: #fff;
}
 
span h3,
h3 span
{
font-weight: bold;
}
 
span h4 a,
h4 span a {
  text-decoration: none;
}
span h4,
h4 span
{
font-weight: bold;
}
 
 
br.clear
{
clear: both;
}
 
img
{
/*padding: 3px;
border: solid 1px #e1e1e1;*/
}
 
.postinfo img {
  border: 0;
}
 
#main_inner ul {
  padding-left: 0em;
  line-height: 1.8em
}
#main_inner ol {
  padding-left: 1.5em;
  line-height: 1.8em
}
 
img.floatTL
{
float: left;
margin-right: 1.5em;
margin-bottom: 1.5em;
margin-top: 0.5em;
}
 
a
{
text-decoration: underline;
}
 
a:hover
{
text-decoration: none;
}
 
ul.links
{
list-style: none;
}
 
ul.links li
{
line-height: 2em;
}
 
ul.links li.first
{
}
 
p
{
line-height: 1.8em;
}
 
/* Header */
 
#header
{
width:100%;
height:122px;
}
 
#header_inner
{
position: relative;
width: 950px;
height:122px;
margin: 0 auto;
}
 
/* Logo */
 
#logo
{
position: absolute;
bottom: 0.6em;
}
 
#logo h1
{
display: inline;
color: #fff;
font-size: 2.6em;
}
 
#logo .widget_core_coll_tagline,
#logo h2
{
display: inline;
padding-left: 0.5em;
font-size: 1.0em;
}
 
/* Menu */
 
#menu
{
font-size: 9pt;
position: absolute;
right: 0em;
bottom: 0em;
}
 
#menu ul
{
list-style: none;
}
 
#menu li
{
float: left;
}
 
#menu li a
{
margin-left: 0.5em;
display: block;
padding: 1.1em 1.4em 1.0em 1.4em;
border: solid 1px #fff;
color: #616161;
font-weight: bold;
font-size: 1.0em;
/* text-transform: lowercase; */
text-decoration: none;
}
 
#menu li a.active
{
color: #fff;
}
 
/* Main */
 
#main_inner p
{
text-align: justify;
margin-bottom: 2.0em;
}
 
#main_inner ul
{
margin-bottom: 2.0em;
}
 
#main_inner
{
position: relative;
width: 950px;
margin: 0 auto;
padding-top: 3.5em;
}
 
#main_inner h3 a {
  text-decoration: none;
}
 
#main_inner h3,h4
{
border-bottom: dotted 1px #E1E1E1;
position: relative;
}
 
#main_inner h3
{
font-size: 2.1em;
padding-bottom: 0.1em;
margin-bottom: 0.8em;
}
 
#main_inner h4
{
font-size: 1.2em;
padding-bottom: 0.175em;
margin-bottom: 1.4em;
margin-top: 0.95em;
}
 
#main_inner .featurepost,
#main_inner .post
{
position: relative;
}
 
#main_inner .featurepost h3,
#main_inner .post h3
{
position: relative;
font-size: 1.7em;
padding-bottom: 1.2em;
}
 
#main_inner .featurepost ul.post_info,
#main_inner .post ul.post_info
{
list-style: none;
position: absolute;
top: 3em;
font-size: 0.8em;
}
 
#main_inner .featurepost ul.post_info li,
#main_inner .post ul.post_info li
{
background-position: 0em 0.2em;
background-repeat: no-repeat;
display: inline;
padding-left: 18px;
}
 
#main_inner .featurepost ul.post_info li.date,
#main_inner .post ul.post_info li.date
{
}
 
#main_inner .featurepost ul.post_info li.comments,
#main_inner .post ul.post_info li.comments
{
margin-left: 1.1em;
}
 
/* Footer */
 
#footer
{
width: 950px;
margin: 0 auto;
text-align: center;
clear: both;
border-top: dotted 1px #E1E1E1;
margin-top: 1.0em;
margin-bottom: 1.0em;
padding-top: 1.0em;
/* text-transform: lowercase; */
}
 
/* Search */
 
.widget_core_coll_search_form input.submit,
input.button
{
color: #fff;
font-weight: bold;
/* text-transform: lowercase; */
font-size: 0.8em;
height: 2.0em;
}
 
.widget_core_coll_search_form input.SearchField,
input.text
{
border: solid 1px #F1F1F1;
font-size: 1.0em;
padding: 0.25em 0.25em 0.25em 0.25em;
}
 
.search_options,
#search
{
position: relative;
width: 100%;
margin-bottom: 2.0em;
}
 
.widget_core_coll_search_form input.SearchField,
#search input.text
{
/* position: absolute; */
top: 0em;
left: 0em;
width: 9.5em;
}
 
.widget_core_coll_search_form input.submit,
#search input.button
{
/* position: absolute; */
top: 0em;
right: 0em;
min-width: 2.0em;
/* max-width: 2.5em; */
}
 
/* Restyling blockquote */
blockquote {
  margin-top: 1em;
 
  margin-bottom: 1em;
  margin-left: 2em;
  padding-left: 1em;
  border-left: 3px solid #184366;
}
blockquote p {
  margin-bottom: 0em;
}
/* Restyling blockquote */
 
/* Fixing bCommentSmallPrint */
div.bCommentSmallPrint {
  font-size: 0.88em;
}
div.bCommentSmallPrint img {
  border: none;
  vertical-align: bottom;
}
/* Fixing bCommentSmallPrint */
 
/* Fixing Pagetop Container */
#pagetop {
  text-align: right;
  float: right;
  margin: 5px 12px 0 0;
}
#pagetop ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#pagetop li {
  display: inline;
}
#pagetop li a {
  padding: 0 0 0 25px;
  color: #fff;
  text-decoration: none;
  /* text-transform: lowercase; */
}
#pagetop li a:hover {
  text-decoration: none;
}
/* Fixing Pagetop Container */
 
/* LAYOUT - 3 COLUMNS */
 
  /* Primary content */
  
  #primaryContent_3columns
  {
  position: relative;
  margin-right: 34em;
  }
  
  #columnA_3columns
  {
  position: relative;
  float: left;
  width: 100%;
  margin-right: -34em;
  padding-right: 2em;
  }
  
  /* Secondary Content */
  
  #secondaryContent_3columns
  {
  float: right;
  }
  
  #columnB_3columns
  {
  width: 13.0em;
  float: left;
  padding: 0em 2em 0.5em 2em;
  border-left: dotted 1px #E1E1E1;
  }
  
  #columnC_3columns
  {
  width: 13.0em;
  float: left;
  padding: 0em 0em 0.5em 2em;
  border-left: dotted 1px #E1E1E1;
  }
  
/* LAYOUT - 2 COLUMNS */
 
  /* Primary content */
  
  #primaryContent_2columns
  {
  position: relative;
  margin-right: 17em;
  }
  
  #columnA_2columns
  {
  position: relative;
  float: left;
  width: 100%;
  margin-right: -17em;
  padding-right: 2em;
  }
  
  /* Secondary Content */
  
  #secondaryContent_2columns
  {
  float: right;
  }
  
  #columnC_2columns
  {
  width: 13.0em;
  float: left;
  padding: 0em 0em 0.5em 2em;
  border-left: dotted 1px #E1E1E1;
  }
 
/* LAYOUT - 1 COLUMN */
 
  /* Primary content */
  
  #primaryContent_1column
  {
  position: relative;
  }
  
  #columnA_1column
  {
  position: relative;
  width: 100%;
  }
 
/*** PRINT STYLES ***/
 
@media print {
body{background:white;color:black;font-size:10pt}
div#evo_toolbar, .header-wrapper{display:none;}
.shadow-left.main-wrapper,.main-wrapper .shadow-right,#main,#main-inside{background:none;}
#main{background-color:#fff;}
.page-content{width:100% !important;max-width:none !important;min-width:0 !important;}
#footer-blocks .leftFade,#footer-blocks .rightFade{display:none;}
}

Mar 20, 2013 15:00

This is the itemblock code:


<h3><?php $Item->title(); ?></h3>
<ul class="post_info">
<?php
if( ! $Item->is_intro() )
{ // Display only if we're not displaying an intro post:
$Item->author( array(
'before' => T_('<li class="date">Von '),' ',
'after' => ' ',
) );
$Item->issue_time( array(
'before' => /* TRANS: date */ T_('on '),
'after' => ', '.$Item->get_views().'</small>' ,
'time_format' => 'd.m.Y'.'',
) );
// Link to comments, trackbacks, etc.:
$Item->feedback_link( array(
'type' => 'feedbacks',
'link_before' => '<li class="comments">',
'link_after' => '</li>',
'link_text_zero' => '#',
'link_text_one' => '#',
'link_text_more' => '#',
'link_title' => '#',
'use_popup' => false,
) );
}
?>
</ul>

Mar 21, 2013 01:21

The reason to this is because, the "post info" is absolute positioned. The skin author must've presumed the titles wouldnt go to the second line.

CSS

#main_inner .featurepost ul.post_info, #main_inner .post ul.post_info {
    font-size: 0.8em;
    list-style: none outside none;
    position: absolute;
    top: 3em;
/* style.css line 283 */
}

delete the lines position: absolute; top: 3em; , when you do this, you will have pretty much space between post titles and post infos, so you might want to adjust the margin & padding bottoms of the titles as such:

CSS

#main_inner .featurepost h3, #main_inner .post h3 {
    margin-bottom: 0.2em;
    padding-bottom: 0.4em;
}

Mar 21, 2013 13:12

Thanks alot! That does the trick.

Do you think there's any chance to get the dotted line back below the postinfo?

Mar 22, 2013 00:43

well you could simply add the dotted line to the postinfo element:

CSS

#main_inner .featurepost ul.post_info, #main_inner .post ul.post_info {
    border-bottom: 1px dotted #E1E1E1;
}

and remove it from title if you dont want the first one,

CSS

#main_inner h3, h4 {
    border-bottom: 1px dotted #E1E1E1;
/* style.css line 248 */
}


Form is loading...

powered by b2evolution free blog software – This forum is powered by b2evolution CMS, a complete engine for your website.