Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: 'jumping' topbar  (Read 5759 times)

0 Members and 1 Guest are viewing this topic.

ff

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 108
'jumping' topbar
« on: September 09, 2008, 09:12:14 pm »
Hya,

At http://www.xarno.nl/fotoalbum/ I've created my own theme (adjusted some other files ;))

My problem is after selecting the picture details.

The screen looks ok at OS Fedora. Browsers :  Firefox 2, MSIE 6, Opera 9.23
The screen doesn't look ok at Win XP MCE with browser Firefox 3, Google Chrome

The menu + topbar + everything takes the width of the picture- + filmstrip frame.
In the other browsers these are set at screen width (which is the purpose)

Is this something with a new style of rendering by the new browsers?
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: 'jumping' topbar
« Reply #1 on: September 10, 2008, 07:19:57 am »
The content of your template.html is
Code: [Select]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
<title>{TITLE}</title>
{META}
<link rel="stylesheet" href="themes/xarno/style.css" type="text/css" />
<script type="text/javascript" src="scripts.js"></script>
<!-- $Id: template.html,v 1.2 2005/12/04 03:22:35 donnoman Exp $ -->
</head>
<body>
  {CUSTOM_HEADER}
<!-- begin uitlijntabel kop -->

<table style="width : 100%; border : 0px;">
<tr>
 <td style="width : 95px;">&nbsp;</td>
 <td>
<!-- einde uitlijntabel kop -->
  <table width="95%" border="0" cellpadding="5" cellspacing="5">
    <tr>
      <td valign="top" style="background-color : #EBF9B5;">

             <SPAN CLASS="menus"> {SYS_MENU} <br /> {SUB_MENU}</SPAN>

        <img src="images/spacer.gif" width="1" height="15" alt="" />
        <br />
        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td align="left" valign="top">
              {ADMIN_MENU}
              {GALLERY}
            </td>
          </tr>
        </table>

      </td>
    </tr>
  </table>
<!-- begin uitlijntabel voet -->
</td></tr></table>
<!-- einde uitlijntabel voet -->
  {CUSTOM_FOOTER}
</body>
</html>The content of your stylesheet is
Code: [Select]
body {
        font-family : tahoma, arial, sans-serif;
        font-size: 12px;
background-image : url(../../../pics/achtergrond.gif);
background-repeat : repeat-y;
        background-color : #EBF9B5;
padding-left : 30px;
        color : #000000;
}

.menu {
 position : absolute;
 left : 150px;
 top : 8px;
}

.menu img {
 border : none;
}

.menus a {
 color : #000000;
}

.tekst {
 position : absolute;
 top : 125px;
}

.tables_maintable
{
width: 90%; /* Width of the whole guestbook */
}

.tablerows_header
{
background-color: #00aaff; /* Background color of mainbar with links */
height: 20px; /* Height of mainbar with links */
padding-left: 5px; /* Text in mainbar with links starts 5 pixels after start */
padding-right: 5px; /* Text in mainbar with links ends 5 pixels before end */
font-weight: bold; /* Text decoration of text in mainbar with links */
border: solid 1px #FFF; /* Mainbar with links border */
color: #FFF; /* Text color in mainbar */
}
.tablerows_header a
{
color: #FFF;
text-decoration : none;
}
.tablerows_header a:hover
{
color: #000;
text-decoration : none;
}


table {
        font-size: 12px;
background-color : #EBF9B5;
}

h1{
        font-weight: bold;
        font-size: 22px;
        font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        text-decoration: none;
        line-height : 120%;
        color : #000000;
        margin: 2px;
}

h2 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        margin: 0px;
background-color : #00aaff;
}

h3 {
        font-weight: normal;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        margin: 2px;
}

p {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 100%;
        margin: 2px 0px;
}

ul {
        margin-left: 5px;
        padding: 0px;
}

li {
        margin-left: 10px;
        margin-top: 4px;
        margin-bottom: 4px;
        padding: 0px;
        list-style-position: outside;
        list-style-type: disc;
}

.textinput {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 100%;
        border: 1px solid #00aaff;
        padding-right: 3px;
        padding-left: 3px;
}

.listbox {
        font-family: Verdana, Arial, Arial, Helvetica, sans-serif;
        font-size: 100%;
        border: 1px solid #00aaff;
        vertical-align : middle;
}

.button {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 100%;
        border: 1px solid #00aaff;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
}

.comment_button {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 85%;
        border: 1px solid #00aaff;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
        padding-left: 3px;
        padding-right: 3px;
}

.radio {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 100%;
        vertical-align : middle;
}

.checkbox {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 100%;
        vertical-align : middle;
}

a {
        color: #00aaff;
        text-decoration: none;
}

a:hover {
        color: #0033CC;
        text-decoration: underline;
}

.bblink a {
        color: #0033CC;
        text-decoration: none;
}

.bblink a:hover {
        color: #0033CC;
        text-decoration: underline;
}

.maintable {
        border: 1px solid #00aaff;
        background-color: #EBF9B5;
        margin-top: 1px;
        margin-bottom: 1px;
}

.tableh1 {
        background : #00aaff;
        color : #FFFFFF;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.tableh1_compact {
        background : #00aaff;
        color : #FFFFFF;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
}

.tableh2, .catrow_noalb {
        color : #00aaff;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.tableh2_compact {
        background: #00aaff;
        color : #000000;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
}

.tableb, .display_media, .catrow {
        background: #EBF9B5;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.tableb_compact {
        background: #EBF9B5;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
}

.tablef {
        background: #EBF9B5;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
}

.catrow_noalb {
        background: #00aaff ;
        color : #000000;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.catrow {
        background: #EBF9B5;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.album_stat {
        font-size: 85%;
        margin: 5px 0px;
visibility : hidden;
}

.thumb_filename {
        font-size: 80%;
        display: block;
}

.thumb_title {
        font-weight : bold;
        font-size: 80%;
        padding: 2px;
        display : block;
}

.thumb_caption {
        font-size: 80%;
        padding: 1px;
        display : block;
}

.thumb_caption a {
        text-decoration: underline;
        color: #000000;
}

.thumb_num_comments {
        font-weight: normal;
        font-size: 80%;
        padding: 2px;
        font-style : italic;
        display : block;
}

.user_thumb_infobox {
        margin-top: 1px;
        margin-bottom: 1px;
}

.user_thumb_infobox th {
        font-weight : bold;
        font-size: 100%;
        margin-top: 1px;
        margin-bottom: 1px;
        text-align : center;
}

.user_thumb_infobox td {
        font-size: 80%;
        margin-top: 1px;
        margin-bottom: 1px;
        text-align : center;
}

.user_thumb_infobox a {
        text-decoration: none;
        color: #000000;
}

.user_thumb_infobox a:hover {
        color: #000000;
        text-decoration: underline;
}

.sortorder_cell {
        background : #00aaff ;
        color : #FFFFFF;
        padding: 0px;
        margin: 0px;
}

.sortorder_options {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        background : #00aaff;
        color : #000000;
        padding: 0px;
        margin: 0px;
        font-weight: normal;
        font-size: 80%;
        white-space: nowrap;
}

.navmenu {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #FFFFFF;
        font-size: 100%;
        font-weight: bold;
background : #00aaff;
        border-style: none;
}

.navmenu img {
        margin-top: 1px;
        margin-right: 5px;
        margin-bottom: 1px;
        margin-left: 5px;
}

.navmenu a {
        position: relative;
        display: block;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
        text-decoration: none;
        color: #FFFFFF;
}

.navmenu a:hover {
        background : #00aaff;
        text-decoration: none;
        color:         #000000;
}

.admin_menu_thumb {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 85%;
        border: 1px solid #00aaff;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
        color: #000000;
        font-weight: bold;
        margin-top: 0px;
        margin-bottom: 0px;
        width: 85px;
}

.admin_menu_thumb a {
        color: #000000;
        text-decoration: none;
        display: block;
        position: relative;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 10px;
        padding-right: 10px;
}


.admin_menu_thumb a:hover {
        color: #000000;
        text-decoration: underline;
}

.admin_menu {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 85%;
        border: 1px solid #00aaff;
        background-color:#EFEFEF;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
        color: #000000;
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top:2px;
        padding-bottom:2px;
        padding-left:1px;
        padding-right:1px;
        text-align: center;
}

.admin_menu a {
        color: #000000;
        text-decoration: none;
        display: block;
        position: relative;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 2px;
        padding-right: 2px;
}

.admin_menu a:hover {
        color: #000000;
        text-decoration: underline;
}

td #admin_menu_anim {
        background-image : url(images/button_bg_anim.gif);
}

td #admin_menu_anim {
        background-image : url(images/button_bg_anim.gif);
}

.comment_date{
        color : #5F5F5F;
        font-size : 90%;
        vertical-align : middle;
}

.image {
        border : 1px solid #00aaff;
        margin: 2px;
}

.imageborder {
        border: 1px solid #00aaff;
        background-color: #EBF9B5;
        margin-top: 30px;
        margin-bottom: 30px;
}

.display_media {
        background: #EBF9B5;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.thumbnails {
        background: #EBF9B5;
border : 0px solid #00aaff;
        padding: 5px;
}

.footer {
        font-size : 9px;
}

.footer a {
        text-decoration: none;
        color: #000000;
}

.footer a:hover {
        color: #000000;
        text-decoration: underline;
}

.statlink {
        color: #FFFFFF;
background-color : #00aaff;
}

.statlink a {
        text-decoration: none;
        color: #FFFFFF;
}

.statlink a:hover {
        color: #FFFFFF;
        text-decoration: underline;
}

.alblink a {
        text-decoration: underline;
        color: #00AAFF;
weight : bold;
font-size : larger;
}

.alblink a:hover {
        color: #5F740A;
        text-decoration: underline;
}

.catlink {
        display: block;
        margin-bottom: 2px;
font-size : x-large;
}

.catlink a {
        text-decoration: underline;
        color: #000000;
}

.catlink a:hover {
        color: #000000;
        text-decoration: underline;
}

.topmenu {
        line-height : 130%;
        font-size: 100%;
}

.topmenu a {
        color : #0033CC;
        text-decoration : none;
}

.topmenu a:hover  {
        color : #0033CC;
        text-decoration : underline;
}

.img_caption_table {
        border: none;
        background-color: #FFFFFF;
        width : 100%;
        margin : 0px;
}

.img_caption_table th {
        background: #00aaff ;
        font-size: 100%;
        color : #000000;
        padding-top: 4px;
        padding-right: 10px;
        padding-bottom: 4px;
        padding-left: 10px;
        border-top : 1px solid #FFFFFF;
}

.img_caption_table td {
        background: #F00 ;
        padding-top: 6px;
        padding-right: 10px;
        padding-bottom: 6px;
        padding-left: 10px;
        border-top : 1px solid #FFFFFF;
        white-space: normal;
}

.debug_text {
        border: #BDBEBD;
        background-color: #EFEFEF;
        width : 100%;
        margin : 0px;
}

.clickable_option {
        cursor : default;
}

.listbox_lang {
        color: #000000;
        background-color: #00aaff;
        border: 1px solid #00aaff;
        font-size: 80%;
        font-family: Arial, Helvetica, sans-serif;
        vertical-align : middle;

}

#vanity a {
        display:block;
        width:57px;
        height:20px;
        margin: 3px 20px;
}
#vanity img {border:0}
#v_php {float:left;background-image:url(../../images/powered-php.gif);}
#v_php:hover {background-image:url(../../images/h_powered-php.gif);}
#v_mysql {float:left;background-image:url(../../images/powered-mysql.gif);}
#v_mysql:hover  {background-image:url(../../images/h_powered-mysql.gif);}
#v_xhtml {float:right;background-image:url(../../images/valid-xhtml10.gif);}
#v_xhtml:hover {background-image:url(../../images/h_valid-xhtml10.gif);}
#v_css {float:right;background-image:url(../../images/valid-css.gif);}
#v_css:hover{background-image:url(../../images/h_valid-css.gif);}I looked at your gallery both in FF2 on Linux as well as FF3 on Win XP and can't see in which aspect the output differs not what you have done in your stylesheet to accomplish what you're up to. The only observation that I have made is that your overall menu ("Dagboek", "Foto's/films" etc.) takes too much space - even with a screen resolution of 1280 x 1024 it doesn't display as desired, let alone the "regular" resolutions of 1024 x 768 nor 800 x 600.

Please specify what you are actually trying to accomplish and how this is suppossed to be accomplished in your design.
Logged

ff

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 108
Re: 'jumping' topbar
« Reply #2 on: September 16, 2008, 11:20:21 am »
I've uploaded 2 screenshots.
OS: Fedora 7
Browsers :
Firefox 2.0.0.14 (http://www.xarno.nl/pics/firefox2.png)
Opera 9.52 (http://www.xarno.nl/pics/opera.png)

Inteded is what you see at the Firefox screenshot.
I'm on another computer than normally, I notice Opera gives the wrong lay-out also.
Can it be something in Firefox 2 which makes me think I created the right lay-out?

About the topmenu it looks ok on my screen, forgot to check on smaller ones. Thanks for the notice (sometimes you get blind for somethings ;))

ps. sorry for the late response, forgot to turn the notify on.
Logged

Nibbler

  • Guest
Re: 'jumping' topbar
« Reply #3 on: September 16, 2008, 08:25:56 pm »
You need to give your 'tekst' div a 100% width, ie.

Code: [Select]
.tekst {
    width: 100%;
}
Logged

ff

  • Coppermine frequent poster
  • ***
  • Offline Offline
  • Gender: Male
  • Posts: 108
Re: 'jumping' topbar
« Reply #4 on: September 17, 2008, 08:28:17 am »
Quote from: Nibbler on September 16, 2008, 08:25:56 pm
You need to give your 'tekst' div a 100% width, ie.

Code: [Select]
.tekst {
    width: 100%;
}
Dang!

I did supply width in the main css, but not in the CPG css.

I've got different CSS-files for the different parts (main, s9y, cpg), is it possible to point the cpg template to the main css which is in the root of the site or would this give problems with the scripts?
Logged

Joachim Müller

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 47843
  • aka "GauGau"
    • gaugau.de
Re: 'jumping' topbar
« Reply #5 on: September 17, 2008, 06:05:17 pm »
Quote from: ff on September 17, 2008, 08:28:17 am
I've got different CSS-files for the different parts (main, s9y, cpg), is it possible to point the cpg template to the main css which is in the root of the site
Sure, just edit template.html and add the reference to the other CSS files. In your case, edit http://www.xarno.nl/fotoalbum/themes/xarno/template.html, find
Code: [Select]
<link rel="stylesheet" href="themes/xarno/style.css" type="text/css" />and add before it (in a new line)
Code: [Select]
<link rel="stylesheet" href="path/to/your/other/stylesheet.css" type="text/css" />That's plain HTML. No specific Coppermine skills needed.
Logged
Pages: [1]   Go Up
« previous next »
 

Page created in 0.024 seconds with 19 queries.