plainblack.com
Username Password
search
Bookmark and Share

    
Goto page «Previous Page   1 2    Next Page»

Need assistance with Right Column Layout

User aewhale
Date 9/21/2009 8:28 pm
Views 690
Rating 0    Rate [
|
]
Previous · Next
User Message
aewhale

I was running my WebGUI with 7.6.35-stable using the RightColumn(table) format.  I just upgraded to 7.7.-20-stable, and the formating on the website is not what it should be.

The test page I created had created the Right Column layout vertically, instead of horizontally.  Here is an image of the issue

the page is here, in case that helps.

--
Albert E. Whale, CHS CISA CISSP
Sr. Security, Network, Risk Assessment and Systems Consultant


ABS Computer Technology, Inc. - Email, Internet and Security Consultants

--- (Edited on 9/21/2009 9:28 pm [GMT-0400] by aewhale) ---

--- (Edited on 9/22/2009 1:41 pm [GMT-0700] by aewhale) ---



Back to Top
Rate [
|
]
 
 
martien

 

The test page I created had created the Right Column layout vertically, instead of horizontally. 

Looking at your site, I didn't find a style-sheet which defines the the properties for your columns-<div>'s,

--- (Edited on 22.09.2009 11:47 [GMT+0200] by martien) ---



Back to Top
Rate [
|
]
 
 
aewhale

Thank you for your reply, I was unaware that I needed an additional stylesheet for the Layout.  WebGui already has the layout.css included for the Layout.  What do I need to insure that these are Horizontal, not vertical?

--
Albert E. Whale, CHS CISA CISSP
Sr. Security, Network, Risk Assessment and Systems Consultant


ABS Computer Technology, Inc. - Email, Internet and Security Consultants

--- (Edited on 9/22/2009 11:05 am [GMT-0400] by aewhale) ---



Back to Top
Rate [
|
]
 
 
rogier

Thank you for your reply, I was unaware that I needed an additional stylesheet for the Layout.  WebGui already has the layout.css included for the Layout.  What do I need to insure that these are Horizontal, not vertical?

--
Albert E. Whale, CHS CISA CISSP
Sr. Security, Network, Risk Assessment and Systems Consultant


ABS Computer Technology, Inc. - Email, Internet and Security Consultants

--- (Edited on 9/22/2009 11:05 am [GMT-0400] by aewhale) ---

 

The table-layouts are not included in the core anymore (see gotchas for 7.7.15). The alternative is the regular right column template (positioned with css). This template links to the layout.css by default. Isn't it in the head tags, when you edit the template?

If it isn't, it's either a bug or you've accidentally removed it. If the former, let me know please.

To include the layout styles, just add this to the head block of the layout template:

<link href="/\/(layout.css);" rel="stylesheet" type="text/css" />

(Where /\ is a caret.) All should be well then.

 

Rogier | United Knowledge
www.unitedknowledge.nl · www.webgui-help.nl

--- (Edited on 22-09-2009 17:48 [GMT+0200] by rogier) ---

--- (Edited on 22-09-2009 17:49 [GMT+0200] by rogier) ---



Back to Top
Rate [
|
]
 
 
aewhale

I did not remove the layout.css, infact, it is in the source of the page I am having problems with.  Here is the first few lines of the page www.abs-comptech.com/free-offers/test:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><a href="/free-offers/test">Test</a> - ABS Computer Technology&#44; Inc.</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.ABS-CompTech.com/favicon.ico" />
<script language="JavaScript" src="/mm_Image.js" type="text/JavaScript" ></script>
<link href="/global.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="generator" content="WebGUI 7.7.20" /><meta http-equiv="Content-Script-Type" content="text/javascript" /><meta http-equiv="Content-Style-Type" content="text/css" /><script type="text/javascript">function getWebguiProperty (propName) {var props = new Array();props["extrasURL"] = "/extras/";props["pageURL"] = "/free-offers/test";props["firstDayOfWeek"] = "'0'";return props[propName];}</script>
<link href="/layout.css" rel="stylesheet" type="text/css" /><!--page layout--><style type="text/css">
ul.bulletList li, ul.bulletList ul {
margin-left:7px;
padding-left:0px;
font-size:9px;
}

What's next?

--
Albert E. Whale, CHS CISA CISSP
Sr. Security, Network, Risk Assessment and Systems Consultant


ABS Computer Technology, Inc. - Email, Internet and Security Consultants

--- (Edited on 9/22/2009 2:11 pm [GMT-0400] by aewhale) ---



Back to Top
Rate [
|
]
 
 
perlDreamer

First, you should probably confirm that the layout.css snippet actually does exist on your site.

In the Asset Manager, go to Root -> Import Node -> Layouts and see if the snippet is in there, then verify that it has CSS inside it.

Another good tool for working with CSS is FireBug.  It's an addon for Firefox and will help with debugging CSS issues.

--- (Edited on 9/22/2009 3:32 pm [GMT-0700] by perlDreamer) ---



Back to Top
Rate [
|
]
 
 
aewhale

THanks to everyone for their respnses, but I am still not getting closer to the problem at hand.

I understand that the table layouts are scrapped.  I am trying to use the Right Column layout, with the layout.css (which does exist), and unfortunately the two columns which are suposed to be side by side, are one on top of each other.

This is depicted by the image here, the two panels beneath the word Tes are supposed to be the Left (wg-first-column wg-left) and Right (wg-second-column wg-right) column

The actual code looks like this:

<div id="mainBodyContentContainer">

<div id="layout2Ju2_Ov-f1q-UMS-hnXZwg" class="layout rightcolumn"> <a id="id2Ju2_Ov-f1q-UMS-hnXZwg" name="id2Ju2_Ov-f1q-UMS-hnXZwg"/> <div class="yui-skin-sam wg-toolbar"> </div> <h2> Test </h2>

<div class="wg-content-position wg-first-column wg-left"> <table id="position1" class="content" border="0"> <tbody> <tr id="tdB0s61k1ndiDwmFnM7_ZKDw"> <td> <div id="tdB0s61k1ndiDwmFnM7_ZKDw_div" class="dragable" style=""> <div id="tdB0s61k1ndiDwmFnM7_ZKDw_handle" class="dragable"> </div> <div id="articleB0s61k1ndiDwmFnM7_ZKDw" class="article default"> </div> </div> </td> </tr> <tr id="tdIyuBYiUoBRvKq_mGRTXJ4g"> </tr> </tbody> </table> </div>

<div class="wg-content-position wg-second-column wg-right"> <table id="position2" class="content" border="0"> </table> </div> <div class="wg-clear"/> <table> <tbody> <tr id="blank" class="hidden"> <td> <div class="empty"> </div> </td> </tr> </tbody> </table> <iframe id="dragSubmitter" src="/free-offers/test?func=setContentPositions;map=B0s61k1ndiDwmFnM7_ZKDw,IyuBYiUoBRvKq_mGRTXJ4g." style="display: none;">
The actual css has the following for the defined divisions:
.rightcolumn .wg-first-column { 
width: 65%; 

.rightcolumn .wg-second-column { 
width: 33%; 
} .wg-left { 
float: left; 

.wg-right { 
float: right; 
}
Could it be that the problem is the float: left and float: right?  Should this instead be align: left and align: right?

TIA

--
Albert E. Whale, CHS CISA CISSP
Sr. Security, Network, Risk Assessment and Systems Consultant


ABS Computer Technology, Inc. - Email, Internet and Security Consultants

--- (Edited on 9/22/2009 8:57 pm [GMT-0400] by aewhale) ---



Back to Top
Rate [
|
]
 
 
perlDreamer

Have you tried going into Admin mode, and using the click and drag interface to move the content that you want into the other column?

--- (Edited on 9/22/2009 7:57 pm [GMT-0700] by perlDreamer) ---



Back to Top
Rate [
|
]
 
 
rogier

Have you tried going into Admin mode, and using the click and drag interface to move the content that you want into the other column?

--- (Edited on 9/22/2009 7:57 pm [GMT-0700] by perlDreamer) ---

Yes, good suggestion. Pput some content into both columns and turn admin off. Does it work then? It might just be that the tables in the code (which are only added for the drag and drop function, with admin on) are positioned below eachother because some style in the css targets them.

When you turn adminmode off, the tables are a not included, so it might look fine for a visitor. But without content it's hard to tell if it works or no.

 

Rogier | United Knowledge
www.unitedknowledge.nl · www.webgui-help.nl

--- (Edited on 23-09-2009 11:55 [GMT+0200] by rogier) ---



Back to Top
Rate [
|
]
 
 
aewhale

Have you tried going into Admin mode, and using the click and drag interface to move the content that you want into the other column?

--- (Edited on 9/22/2009 7:57 pm [GMT-0700] by perlDreamer) ---

Yes, good suggestion. Pput some content into both columns and turn admin off. Does it work then? It might just be that the tables in the code (which are only added for the drag and drop function, with admin on) are positioned below eachother because some style in the css targets them.

When you turn adminmode off, the tables are a not included, so it might look fine for a visitor. But without content it's hard to tell if it works or no.

 

Rogier | United Knowledge
www.unitedknowledge.nl · www.webgui-help.nl

--- (Edited on 23-09-2009 11:55 [GMT+0200] by rogier) ---

 

Thanks Rogier, yes I have tried this.  A good example of this is the main page of the website http://www.ABS-CompTech.com

This is why I started this request for assistance.  The Headlines section (now at the bottom of the page) used to be on the right hand panel of the website.  Now it is is pushed down, just as I have depicted in the images I have shown on this posting.

Thank you.

(still don't know how, but I feel that there is something in the site template that forces the right column down below the other column, instead of keeping it on the same level.)

--
Albert E. Whale, CHS CISA CISSP
Sr. Security, Network, Risk Assessment and Systems Consultant


ABS Computer Technology, Inc. - Email, Internet and Security Consultants

--- (Edited on 9/23/2009 8:51 am [GMT-0400] by aewhale) ---



Back to Top
Rate [
|
]
 
 
     Goto page «Previous Page   1 2    Next Page»



© 2010 Plain Black Corporation | All Rights Reserved