Blocks display problem , CSS/Html issue

eldorado · Posted: Fri Oct 02, 2009 4:56 am

I went through the nuke mechanic and I added a new layer of blocks.
Which I called "above".
This is a copy of the mainfile.php. (not including stupid function in other part i've modified too)

Code:

      //End of GT-NExtGEn / ShortURLs
      if ($side == 'c') {
         themecenterbox($title, $content);
      } elseif ($side == 'd') {
         themecenterbox($title, $content);
//Adding an extra layer of blocks.
      } elseif ($side == 'e') {
         themeabovebox($title, $content);
      } else {
         themesidebox($title, $content);
      }

Then I went into the theme.php and wrote function themeabovebox()

Code:

function themeabovebox($title, $content) {
echo '<td>
<div class="block_above">
<div class="block_gradient">
<div class="block_top"><div><h3>'.$title.'</h3></div></div>
</div>
<div class="block_content">
'.$content.'
</div>
<div class="article_bot"><div> </div></div>
</div></td>
';
}

Added , one line in the CSS

Code:

.block_above {
background: #F4F6FB;
position : relative;
margin-bottom: 24px;
}

And got back to theme.php to make the block appear just under the NukeNav(tm).

Code:

echo '<div id="right"><table border="1"><tr>';
blocks('e');
echo '</tr></table></div>
<div id="content">
';

The border=1 was to see how tables were displayed.

Now my problem here is that i don't like CSS because i'm crap at it but still willing to understand it.And that I would like my blocks to display with a fixed height and be proportional.

(I have banned myself twice overnight , i know it's not reason , but i'm quite desperate xD)
The site can be viewed here.

Only registered users can see links on this board!
Get registered or login to the forums!

Thumb here.

horrorcode · Posted: Fri Oct 02, 2009 6:18 am

Just wanted to post as I haven't in a while, but this really interests me, looking great so far. Smile

To your problem, I'm not the most literate at coding etc, but the way I did it was use inline styles. But maybe theres a way to do it with css, as I never could figure it out.

What I meant by inline styles is for example:

Code:

style='background-image: url(/themes/theme/image.jpg); height: 100%; width: 240px; text-align:left; float:bottom'

I'm not sure if this will be of use but maybe it will inspire you. <3

wHiTeHaT · Posted: Fri Oct 02, 2009 6:20 am

Code:

.block_above {
background: #F4F6FB;
position : relative;
margin-bottom: 24px;
}

to

Code:

.block_above {
width:(your max width)px;
height: (your max height)px;
padding:10px;
border:1px solid gray;
margin:0px;
overflow:hidden;
}

with above example you can give it a try

wHiTeHaT · Posted: Fri Oct 02, 2009 6:39 am

i recommend also to change ( for testing purposes function :

Code:

function themeabovebox($title, $content) {
echo '<td>
<div class="block_above">
<div class="block_gradient">
<div class="block_top"><div><h3>'.$title.'</h3></div></div>
</div>
<div class="block_content">
'.$content.'
</div>
<div class="article_bot"><div> </div></div>
</div></td>
';
}

to

Code:

function themeabovebox($title, $content) {
echo '<div class="block_above">
<h3>'.$title.'</h3>
<p>'.$content.'<p>
</div>
';
}

eldorado · Posted: Fri Oct 02, 2009 6:50 am

I tried , and it didn't look too good , but i came up with something else.And it did this

I thing i needed to tell my blocks where to go first before positioning them. I only assumed the best place for them would have been starting in the center rather than the "left" of the previous div container.

wHiTeHaT · Posted: Fri Oct 02, 2009 6:53 am

that isnt a fixed height... did you checked my second recommendation

wHiTeHaT · Posted: Fri Oct 02, 2009 7:01 am

goto the css of the following div class:

Code:

<div class="block_content">
'.$content.'
</div>

duplicate the css code and change it's name to.. for example:
block_content_2
inside the new css code add

Code:

width:(your max width)px;
height: (your max height)px;
margin:0px;
overflow:hidden;

if it already contains one of these replace them.

put the rest of the code u used at first back and change:

Code:

function themeabovebox($title, $content) {
echo '<td>
<div class="block_above">
<div class="block_gradient">
<div class="block_top"><div><h3>'.$title.'</h3></div></div>
</div>
<div class="block_content">
'.$content.'
</div>
<div class="article_bot"><div> </div></div>
</div></td>
';
}

to

Code:

function themeabovebox($title, $content) {
echo '<td>
<div class="block_above">
<div class="block_gradient">
<div class="block_top"><div><h3>'.$title.'</h3></div></div>
</div>
<div class="block_content_2">
'.$content.'
</div>
<div class="article_bot"><div> </div></div>
</div></td>
';
}

wHiTeHaT · Posted: Fri Oct 02, 2009 7:14 am

i'm refreshing your site frequently and i see you have a scrollbar now.
you can get rid of it by using;

overflow:hidden;

in your css

eldorado · Posted: Fri Oct 02, 2009 7:17 am

no i want to keep them..Scrollbars are ok. They don't bother me. If you refreshed my site frequently you saw that there is a problem with a block appearing above them all.

edit : you type too fast for me Smile

let me read what you said

eldorado · Posted: Fri Oct 02, 2009 7:23 am

Ok i did what you said... (if you have the css developing tool on firefox , you should be able to follow it aswell.)

wHiTeHaT · Posted: Fri Oct 02, 2009 7:27 am

i'm currently not on my own pc ( not setted up yet).

eldorado · Posted: Fri Oct 02, 2009 7:32 am

What bother's me is the who's online block showing up at the top. At first I thought it was a feature lol , but it keeps sticking at the top.

Code:

body {
margin: 0;
padding: 0;
background: #C6D4E5;
font-size: 10px;
font-family: Verdana,Helvetica,sans-serif;
color: #000000;
}
form {
margin: 0;
padding: 0;
}

h1, h1 a, h2, h2 a, h3, h3 a {
margin: 0;
text-decoration: none;
font-weight: normal;
color: #516A88;
}

h1 {
letter-spacing: -3px;
font-size: 2.6em;
}

h2 {
font-size: 2em;
}

h3 {
margin-bottom: 2em;
font-size: 1em;
font-weight: bold;
}

blockquote {
margin: 0 0 0 14px;
padding-left: 1em;
border-left: 5px solid #DDE6EF;
padding-right: 1em;
}

a {
color: #32475F;
text-decoration: none;
}

a:hover {
text-decoration: underline;
color: #839FBC;
}

img {
border: none;
}

hr {
border: 1px solid #dee7ee;
}

#banner_pagetop {
padding: 8px 0px 8px 0px;
text-align: center;
width: 100%;
}

#header_wrap {
background: #C6D4E5 url(../images/background.jpg) repeat-x left top;
width: 100%;
}

#header {
height: 103px;
width: 100%;
}

#head_content {
float: left;
padding: 8px;
}

#head_content img {
margin: 10px 4px 10px 14px;
padding: 0;
}

#head_ad {
float: right;
margin: 10px 4px 10px 14px;
padding: 0;
}

#header h1 {
margin: 10px 4px 10px 14px;
padding: 0;
}

#menu {
height: 24px;
font-weight: bold;
color: #000000;
text-align: left;
margin-top: 0px;
}

#menu_welcome ul {
margin: 0;
margin-left: 24px;
padding: 0;
list-style: none;
}

#menu_welcome li {
display: inline;
}

#menu_welcome a {
width: auto;
height: 24px;
margin: 0 1px 0 0;
padding: 5px 15px 5px 15px;
border: none;
text-decoration: none;
font-weight: bold;
color: #000000;
}

#menu_welcome a:hover {
background: url(../images/mh.png) repeat-x;
}

#menu_welcome .current_page_item a {
color: #2215AF;
}

/*#menu_links {
float: left;
}*/

#menu_welcome {
float: right;
padding-right: 24px;
padding-top: 6px;
}

#content {
clear: both;
float: left;
width: 100%;
padding-top: 15px;
}

#middle {
margin: 0 188px 30px 188px;
}

#middle_alt {
margin: 0 14px 30px 188px;
}

#middle_full {
margin: 0 14px 30px 14px;
}

#left {
float: left;
width: 160px;
margin-left: -100%;
padding-left: 14px;
padding-top: 15px;
margin-bottom: 24px;
}

#right {
float: left;
width: 160px;
margin-left: -174px;
padding-top: 15px;
margin-bottom: 24px;
}
/* rounded tables for articles */
.article {
background: #F4F6FB;
margin-bottom: 14px;
}
.article_top div {
background: url(../images/article_tl.png) no-repeat top left;
}
.article_top {
background: url(../images/article_tr.png) no-repeat top right;
}
/* side blocks also use these next 2 for the bottom rounded corners */
.article_bot div {
background: url(../images/article_bl.png) no-repeat bottom left;
}
.article_bot {
background: url(../images/article_br.png) no-repeat bottom right;
}

.article_top div, .article_top, .article_bottom div, .article_bottom {
width: 100%;
height: 20px;
font-size: 1px;
}
.article_content { margin: 0 30px; }

.article .atitle {
}

.article .atitle h2 {
font-size: 1.5em;
color: #516A88;
}

.article .atitle p {
margin: 0;
line-height: normal;
color: #999999;
}

.article .atitle p a {
color: #3333FF;
}

.article .atitle p a:hover {
color: #6666FF;
}

.article .entry {
padding-top: 20px;
}

.article .links {
text-align: right;
height: 29px;
margin: 0;
padding: 16px 0 0 0;
}

.article .links a {
padding-left: 15px;
background: url(../images/arrow.gif) no-repeat left center;
text-decoration: none;
font-weight: bold;
color: #00029F;
}

.article .links a:hover {
text-decoration: underline;
color: #00029F;
}

/* nested tables trickery ;) */
.inv_article {
background: #C6D4E5;
margin-bottom: 14px;
}
.inv_article_top div {
background: url(../images/inv_article_tl.png) no-repeat top left;
}
.inv_article_top {
background: url(../images/inv_article_tr.png) no-repeat top right;
}
/* side blocks also use these next 2 for the bottom rounded corners */
.inv_article_bot div {
background: url(../images/inv_article_bl.png) no-repeat bottom left;
}
.inv_article_bot {
background: url(../images/inv_article_br.png) no-repeat bottom right;
}

.inv_article_top div, .inv_article_top, .inv_article_bottom div, .inv_article_bottom {
width: 100%;
height: 20px;
font-size: 1px;
}
.inv_article_content { margin: 0 30px; }

/* blocks */
.block {
background: #F4F6FB;
margin-bottom: 24px;
width: 160px;
}

.block_center {
background: #F4F6FB;
margin-bottom: 24px;
}

.block_above {
background: #F4F6FB;
height:200px;
width:100%;
margin-bottom: 30px;
margin-top:0px;
/*padding: 10px*/
}
.block_content_2 {
/*padding: 12px 8px 12px 8px;*/
height: 200px;
width: 200px;
margin:0px;
overflow:auto;
}
.content_above {
clear: both;
float: center;
width: 100%;
padding-top: 0px;
}

.block_gradient {
height: 32px;
background: url(../images/block.gif) repeat-x top left;
}

/* these make the top rounded corners */
.block_top div {
background: url(../images/block_tl.gif) no-repeat top left;
}
.block_top {
background: url(../images/block_tr.gif) no-repeat top right;
}

/* block titles */
.block_top h3 {
letter-spacing: 1px;
font-weight: bold;
text-align: center;
color: #516A88;
padding-top: 8px;
}

.block_content {
padding: 12px 8px 12px 8px;
}

#footer {
clear: both;
width: 90%;
margin: 0 auto;
padding: 20px 0;
border-top: 2px solid #ACABAB;
}

#footer p {
margin: 0 0 5px 0;
text-align: center;
line-height: normal;
font-size: .9em;
}

#footer a {
text-decoration: none;
}

/* Nuke stuff */
.storycat, .storycat a {
font-size: inherit;
color: #516A88;
}
.title {color: #000000; font-size: inherit; font-weight: bold;}
.content {color: #000000; font-size: inherit;}
.block-title {color: #516A88; font-size: inherit;}
.storytitle {color: #516A88; font-size: inherit; font-weight: bold;}
.boxtitle {color: #000000; font-size: inherit; font-weight: bold;}
.boxcontent {color: #000000; font-size: inherit;}
.option {color: #000000; font-size: inherit; font-weight: bold;}
.tiny {color: #000000; font-size: inherit;}
.small {color: #000000; font-size: inherit;}
.footmsg {
text-align: center;
font-size: inherit;
}

/* forums */

.bodyline
{
background-color: #EAEAEA;
}
.forumline
{
background-color: #EAEAEA;
}
td.row1
{
background-color: #F4F6FB;
border: 1px #E1E9F2 solid;
}
td.row2
{
background-color: #F4F6FB;
border: 1px #E1E9F2 solid;
}
td.row3
{
background-color: #F4F6FB;
border: 1px #E1E9F2 solid;
}
td.spacerow
{
background: #FFFFFF;
color: #000000;
}
td.rowpic
{
background-color: #000000;
background-image: url(../forums/images/cellpic6.gif);
background-repeat: repeat-x;
}
th
{
color: #516a88;
font-size: 14px;
letter-spacing: 0.1em;
font-weight: bold;
background-color: #000000;
height: 25px;
background-image: url(../forums/images/cellpic5.gif);
}
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom
{
background-image: url(../forums/images/cellpic6.gif);
background-color: #EAEAEA;
font-weight: bold;
}
td.cat,td.catHead,td.catBottom
{
padding-left: 10px;
height: 26px;
border: none;
}
td.row3Right,td.spaceRow
{
background-color: #D1D1D1;
border: #000000;
border-style: solid;
}
th.thHead,td.catHead
{
font-size: 12px;
border-width: 1px 1px 0px 1px;
}
th.thSides,td.catSides,td.spaceRow
{
border-width: 0px 1px 0px 1px;
}
th.thRight,td.catRight,td.row3Right
{
border-width: 0px 1px 0px 0px;
}
th.thLeft,td.catLeft
{
border-width: 0px 0px 0px 1px;
}
th.thBottom,td.catBottom
{
border-width: 0px 1px 1px 1px;
}
th.thTop
{
border-width: 1px 0px 0px 0px;
}
th.thCornerL
{
border-width: 1px 0px 0px 1px;
}
th.thCornerR
{
border-width: 1px 1px 0px 0px;
}
.maintitle,h1,h2
{
font-weight: bold;
font-size: 22px;
font-family: Verdana,Helvetica,sans-serif;
text-decoration: none;
line-height: 120%;
color: #000000;
}
.gen
{
font-size: 12px;
}
.genmed
{
font-size: 11px;
}
.gensmall
{
font-size: 10px;
}
.gen,.genmed,.gensmall
{
color: #000000;
}
a.gen,a.genmed,a.gensmall
{
color: #000000;
text-decoration: none;
}
a.gen:hover,a.genmed:hover,a.gensmall:hover
{
color: #6666FF;
text-decoration: underline;
}
.mainmenu
{
font-size: 12px;
color: #000000;
}
a.mainmenu
{
text-decoration: none;
color: #000000;
}
a.mainmenu:hover
{
text-decoration: underline;
color: #6666FF;
}
.cattitle
{
font-weight: bold;
font-size: 14px;
letter-spacing: 1px;
color: #000000;
}
a.cattitle
{
text-decoration: none;
color: #000000;
}
a.cattitle:hover
{
color: #6666FF;
text-decoration: none;
}
.forumlink
{
font-weight: bold;
font-size: 12px;
color: #000000;
}
a.forumlink
{
text-decoration: none;
color: #000000;
}
a.forumlink:hover
{
text-decoration: none;
color: #6666FF;
}
.nav
{
font-weight: bold;
font-size: 12px;
color: #000000;
}
a.nav
{
text-decoration: none;
color: #000000;
}
a.nav:hover
{
color: #6666FF;
text-decoration: none;
}
.navbkg2
{
font-size: 11px;
}

.topictitle
{
font-weight: bold;
font-size: 12px;
color: #000000;
}
a.topictitle:link
{
text-decoration: none;
color: #3333FF;
}
a.topictitle:visited
{
text-decoration: none;
color: #0000CC;
}
a.topictitle:hover
{
text-decoration: none;
color: #6666FF;
}
.name
{
font-size: 12px;
color: #000000;
}
.postdetails
{
font-size: 12px;
color: #000000;
}
.postbody
{
font-size: 12px;
}
a.postlink:link
{
text-decoration: none;
color: #3333FF;
}
a.postlink:visited
{
text-decoration: none;
color: #3333FF;
}
a.postlink:hover
{
text-decoration: underline;
color: #6666FF;
}
.code
{
font-family: Courier, 'Courier New', sans-serif;
font-size: 12px;
color: #003399;
padding: 8px 8px 8px 8px;
background-color: #EAEAEA;
border: 1px solid #7A756F;
}
.quote
{
font-size: 12px;
color: #6666FF;
padding: 8px 8px 8px 8px;
background-color: #EFEFEF;
border: 1px solid #7A756F;
}
.copyright
{
font-size: 8px;
font-family: Verdana,Helvetica,sans-serif;
color: #444444;
}
a.copyright
{
color: #444444;
text-decoration: none;
}
a.copyright:hover
{
color: #6666FF;
text-decoration: underline;
}
.errorline
{
background: #FFFFFF;
color: #000000;
border: 1px solid #434343;
}
input,textarea, select
{
color: #000000;
font: normal 12px Verdana,Helvetica,sans-serif;
background-color: #FFFFFF;
border: 1px solid #434343;
}
input[type=radio], input[type=checkbox]
{
border: none;
}
input.post, textarea.post, select
{
color: #000000;
}
input
{
text-indent: 2px;
}
input.button
{
}
input.mainoption
{
font-weight: bold;
}
input.liteoption
{
font-weight: normal;
}
.helpline
{
background-color: #F4F6FB;
border-style: none;
color: #000000;
}

/* GCalendar sample styles for fisubice theme */

.gcal-error {
font-weight: bold;
color: red;
}

form.gcal-event-form legend {
font-weight: bold;
color: black;
}

form.gcal-event-form .normal-label {
font-weight: bold;
color: black;
}

form.gcal-event-form .error-label {
font-weight: bold;
color: red;
}

table.gcal-block-cal {
width: 100%;
border-width: 1px;
border-style: solid;
border-color: black;
}

table.gcal-block-cal a {
}

table.gcal-block-cal a:link {
text-decoration: underline;
}
table.gcal-block-cal a:visited {
text-decoration: underline;
}
table.gcal-block-cal a:hover {
text-decoration: underline;
}
table.gcal-block-cal a:active {
text-decoration: underline;
}

table.gcal-block-cal a.today {
color: white;
}

table.gcal-block-cal th {
color: #516A88;
text-align: center;
background-image: url(../forums/images/cellpic5.gif);
border-width: 1px;
padding: 1px;
border-style: outset;
border-color: black;
font-size: 10px;
}

table.gcal-block-cal td {
border-width: 1px;
padding: 1px;
border-style: hidden;
text-align: center;
}

table.gcal-block-cal td.no-day {
}

table.gcal-block-cal td.day-no-event {
}

table.gcal-block-cal td.day-event {
border: solid 1px teal;
}

table.gcal-block-cal td.today-no-event {
background-image: url(../forums/images/cellpic5.gif);
color: #516A88;
border-style: outset;
border-color: black;
}

table.gcal-block-cal td.today-event {
background-image: url(../forums/images/cellpic5.gif);
font-weight: bold;
border-style: outset;
border-color: black;
}

table.gcal-block-events {
border: solid 1px black;
width: 100%;
}

table.gcal-block-events a:link {
text-decoration: underline;
}
table.gcal-block-events a:visited {
text-decoration: underline;
}
table.gcal-block-events a:hover {
text-decoration: underline;
}
table.gcal-block-events a:active {
text-decoration: underline;
}

table.gcal-month {
width: 100%;
border-width: 1px;
border-style: solid;
border-color: black;
padding: 1px;
}

table.gcal-month th {
color: #516A88;
text-align: center;
background-image: url(../forums/images/cellpic5.gif);
padding: 2px;
border: outset 1px black;
}

table.gcal-month td {
margin: 0px;
padding: 2px;
border: outset 1px black;
height: 75px;
}

table.gcal-month td.no-day {
background-color: #d2d5d8;
}

table.gcal-month td.day {
}

table.gcal-month td.weekend {
background-color: #c4d2e3;
}

table.gcal-month td.today {
background-color: #88b2e6;
}

table.gcal-month a {
}

table.gcal-month a:link {
text-decoration: underline;
}
table.gcal-month a:visited {
text-decoration: underline;
}
table.gcal-month a:hover {
text-decoration: underline;
}
table.gcal-month a:active {
text-decoration: underline;
}

table.gcal-month a.day-link {
font-size: 20px;
background: none;
color: black;
}

table.gcal-month a.day-link:link {
text-decoration: underline;
}
table.gcal-month a.day-link:visited {
text-decoration: underline;
}
table.gcal-month a.day-link:hover {
text-decoration: underline;
}
table.gcal-month a.day-link:active {
text-decoration: underline;
}

table.gcal-event {
width: 80%;
border-width: 1px;
border-style: solid;
border-color: black;
padding: 0px;
}

table.gcal-event caption {
padding-bottom: 5px;
font-weight: bold;
font-size: 11px;
margin: 2px;
}

table.gcal-event th {
background-color: #c9d6e6;
color: black;
text-align: right;
font-size: 11px;
padding: 4px;
border: solid 1px black;
}

table.gcal-event td {
padding: 4px;
border: solid 1px black;
}

table.gcal-cat-legend {
border-width: 1px;
border-style: solid;
border-color: black;
padding: 2px;
}

table.gcal-cat-legend td {
border: none;
}

table.gcal-cat-legend caption {
padding-bottom: 5px;
font-weight: bold;
font-size: 11px;
margin: 2px;
}

div.lgl_menu {
text-align: center;
margin: 10px;
}

/* For Forum Attachment Mod */
td.attachrow { font: normal 11px Verdana, Arial, Helvetica, sans-serif; }
td.attachheader { font: normal 11px Verdana, Arial, Helvetica, sans-serif; }
table.attachtable { font: normal 12px Verdana, Arial, Helvetica, sans-serif; border-collapse : collapse; }

edit: I added a fourth block...That puzzle's me even more lol , why are the blocks randomly spawning?
Edit2 : could it be the blocks fault ?
edit3: i have a train to catch ,...will bother after 8pm gmt

eldorado · Posted: Fri Oct 02, 2009 11:21 am

I've been inspecting the whole html/css code and I can't figure why the uploaded blocks are not showing up in between the div block_above container. They are showing above with a strange manner. I'm thinking of cache but I changed my browser and it's doing the same.
What did I miss in the block mechanic. I'm looking at the overall theme.php and there is no reason why they are not showing between the div unless there is a hidden code somewhere (i'm using notepad++)

blocks are supposed to show

I'm using RavenIce Theme , i really want to change the theme to test on them too but this pulls me back.

Code:

echo '<div id="content_above"><table><tr>';
blocks('e'); // Blocks are supposed to be shown here
echo '</tr></table></div>
<div id="content">
';

full function

Code:

Only registered users can see links on this board!
Get registered or login to the forums!

for the online example.

wHiTeHaT · Posted: Sat Oct 03, 2009 2:53 am

i think it isnt your css.
i think it is your code to show the blocks in the mainfile.
Ive done this already in an advanced way for osc2nuke current theme.
i maded 2 extra block positions to show on the top and bottom of the left/right blocks.keep in mind my left and right blocks ar both on the right positioned next to eachother.you can see it on my homepage.I also made it so you can change positions true admin blocks configuration.
If you have msn i am willing to share the code for it with you.

eldorado · Posted: Sat Oct 03, 2009 4:30 am

wHiTeHaT wrote:

i think it isnt your css.
i think it is your code to show the blocks in the mainfile.
.

Yes you were right it was in the mainfile.php.Now it works better Smile

. Though I did notice something redundant in the code.

Code:

and above in function blocks($side)

Code:

if ($side == 'c') {
blockfileinc($title, $blockfile, 1);
} elseif ($side == 'd') {
blockfileinc($title, $blockfile, 1);
} else {
themesidebox($blockfiletitle, $content);
}

shouldn't that code be

Code:

f ($side == 'c') {
blockfileinc($title, $blockfile, 1);
} elseif ($side == 'd') {
blockfileinc($title, $blockfile, 2);
} else {
themesidebox($blockfiletitle, $content);
}

I'm just curious. It's exactly the same thing , they just didn't optimize this bit or the previous developer assumed the Bottom and Top blocks weren't working the same way.
Now I guess the layout must be CSS now because the blocks are showing like I want: aligned in a old Table manner Smile