CSS problems [Archive] - Vivvo CMS Support Forums

View Full Version : CSS problems

Mark_Hazeldine

01-25-2007, 08:07 PM

Hi,

i'm trying to edit my header template in dreamweaver. I want to do away with tables and use div tags, but when i try, they don't seem to display when viewing the site. Does vivvo support div tags or do i have to use tables?

Also, i want to use a .jpeg as my header image, but that doesn't display either, whether in a table or a div. If i use a .gif, it does display. Again, does vivvo support .jpegs? or can i only use .gifs?

Thanks, Mark

Micha

01-26-2007, 07:54 AM

Vivvo supports both div tags and .jpeg format and this is very strange problem that you are facing.
The code of your header template without tables would look like something like this:

<div class="header_bg">
<span class="header"><a href="{ROOT}"><img src="{ROOT}/img/logo.gif" border="0" alt="header" /></a></span>
<span class="topNav">
<a href="{ROOT}">{LNG_GO_HOME} <img src="{ROOT}/img/ico_home.gif" border="0" alt="" /></a> |
<a onclick="this.style.behavior='url(#default#homepage)';this. setHomePage('{ROOT}');" href="#">{LNG_SET_HOMEPAGE} <img src="{ROOT}/img/ico_set_homepage.gif" border="0" alt="" /></a> |
<a href="javascript:window.external.AddFavorite('{ROOT}','{ TITLE}'%20);">{LNG_ADD_FAVORITES} <img src="{ROOT}/img/ico_add_favorites.gif" border="0" alt="" /></a> | {BOX_SYNDICATION}
</span>
<div><div class="login">{LOGIN_INFO}</div>{BOX_SEARCH}</div>
<div class="dhtml_menu" colspan="2">{DHTML_MENU}</div>
</div>

Of course this is just an quick example with an existing CSS classes, I think that this would give your header a left alignment, but with a few CSS modifications you could make your header tables.

Mark_Hazeldine

02-05-2007, 11:56 PM

hey thanks. I've now done some experimentation. I've got it to work by re-uploading my header.jpg in binary mode and by putting all the css styles in the actual header.tpl as opposed to the style.css (doesn't work when i put them in there).

I'm now getting a perculiar problem tho. The header image has been shifted down a few pixels and just under the search box, there are those black patches, which aren't on any of my jpgs. Why would this be happening?

www.imnewsroom.com

Here's the html for the header.tpl:

<!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">
<head>
<title>{TITLE}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="Vivvo 3.4" />
<link href="style.css" rel="stylesheet" type="text/css" /><style type="text/css">

</style>
{META_NAMES}
<link href="{ROOT}templates/{CSS}" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="{ROOT}include/ac.js"></script>
<script language="javascript" type="text/javascript" src="{ROOT}include/functions.js"></script>
<script language="JavaScript" type="text/javascript" src="{ROOT}include/DropDownMenuX.js"></script>
<link rel="alternate" type="application/rss+xml" title="{RSS_TITLE}" href="{ROOT}rss/rss.php{RSS_OPTION}" />
{SCRIPTS}
</head>

<body onload="body_loaded('{ROOT}')">

<div id="header_search">{BOX_SEARCH}</div>
<div id="Header_links">
<div align="right"><a href="{ROOT}">{LNG_GO_HOME}|</a><a onclick="this.style.behavior='url(#default#homepage)';this. setHomePage('{ROOT}');" href="#">{LNG_SET_HOMEPAGE}</a></div>
</div>
<div class="header">
</div>
<div class="header_menu"></div>

Thanks, Mark

Micha

02-06-2007, 08:15 AM

Hmmm, well, you used absolute positioning for your search and that's why the header image went down under the search box.
As for those black patches, it seems that this is due to the image - http://www.imnewsroom.com/img/menubar.jpg

I've changed the order of your div's in header.tpl, and removed the absolute positioning for search box, hope it helps :)

CSS code:

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#header_search {
width:800px;
height:29px;
z-index:1;
}
#Header_links {
position:absolute;
left:530px;
top:86px;
width:268px;
height:19px;
z-index:2;
}
.header {
background-image: url(../img/header.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 100px;
width: 800px;
}
.header_menu {
background-image: url(../img/menubar.jpg);
background-repeat: repeat-x;
height: 30px;
width: 800px;
}

HTML code:

<div id="Header_links">
<div align="right"><a href="{ROOT}">{LNG_GO_HOME}|</a><a onclick="this.style.behavior='url(#default#homepag e)';this.setHomePage('{ROOT}');" href="#">{LNG_SET_HOMEPAGE}</a></div>
</div>
<div class="header"></div>
<div id="header_search">
<div class="boxSearch">{BOX_SEARCH}</div>
<div class="header_menu"></div>
</div>