The secure CMS.

Welcome to Geeklog, Anonymous Wednesday, May 01 2024 @ 10:15 pm EDT

Geeklog Forums

Page Re-sizing.**BIG SIGH**

 New Topic  Post Reply
 02/28/05 10:29am (Read 2,400 times)  

DWdrums

Anonymous
Hi all. I have exhausted every resource known to me. I use this forum as a last resort becasue I like to figure sh*t out for myself. Anyway.

http://www.souldistortion.com/

I can't get my header image to resize for various resolutions. I changed over to 1024x768 and I have to scroll left and right

I had other people do the same thing and NO RE-SIZE.

Can you-all take a look at my source and maybe see if I am missing something? Really appreciate it.

Warm Regards:

Mike
 Quote
 02/28/05 12:42pm  
Status: offline

vinny

Site Admin
Admin
Registered: 06/24/02
Posts: 352
Location:Colorado, USA
You'd need some pretty fancy javascript and mulitple images (at the different resolutions) to resize an image on the fly based on the client's resolution. I don't know of any site that takes quite that approach.

Most sites use a relatively thin image like:
http://www.geeklog.net/layout/professional/images/logo.gif
and then use a (repeating) background image like:
http://www.geeklog.net/layout/professional/images/header-bg.png
to give an impression of an logo image that stretches to fit any size browser widow.

-Vinny
 Quote
 02/28/05 01:55pm  
Status: offline

Dirk

Site Admin
Admin
Registered: 01/12/02
Posts: 13073
Location:Stuttgart, Germany
You could try experimenting with specifying the image width and height in % values, e.g.
Text Formatted Code
<img src="mypic.jpg" width="100%" height="100%" alt="">
 
But browsers aren't really good at resizing images, so it may come out odd.

bye, Dirk
 Quote
 02/28/05 02:45pm  
Status: offline

beewee

Forum User
Full Member
Registered: 08/05/03
Posts: 969
Location:The Netherlands, where else?
Forced browser resizing of jpg/gif images looks awful, don't even try it, you would destroy the quite nice photograph.

Option 1) Use a flash image instead. Residing a Flash movie with images looks softer.

Option 2) This requires some Photoshop knowledge. Separate the people from the fence on the back. Make a repeating background from the fence (without the poles).
Dutch Geeklog sites about camping/hiking:
www.kampeerzaken.nl | www.campersite.nl | www.caravans.nl | www.caravans.net
 Quote
 02/28/05 03:44pm  

DWdrums

Anonymous
confused
Thanks for the possible solutions.

Check out this guys page ( Fellow Geeklogg'r)

http://www.rockdiesel.com/


Change your resolution to 1024x768 it resizes. I am at 1600x1200 and it resizes. I mean, it's working. Not sure how but.

**SIGH-FRUSTRATION**
 Quote
 02/28/05 04:07pm  
Status: offline

warren

Forum User
Chatty
Registered: 01/31/05
Posts: 41
If you want the pic to resize with differant browser settings you need to do what Dirk suggested and change the size to % instead of a pixle size.
 Quote
 02/28/05 06:49pm  
Status: offline

rjrufo

Forum User
Regular Poster
Registered: 06/14/03
Posts: 95
Quote by DWdrums: Thanks for the possible solutions.

Check out this guys page ( Fellow Geeklogg'r)

http://www.rockdiesel.com/


Change your resolution to 1024x768 it resizes. I am at 1600x1200 and it resizes. I mean, it's working. Not sure how but.

**SIGH-FRUSTRATION**


I just looked at the site you mentioned, and he is doing what Dirk had suggested:
Text Formatted Code
<img src="http://www.rockdiesel.com/layout/rockdiesel/images/logo.gif" width="100%" alt="Rock Diesel" border="0">
 

The header image he has is way too large though, it took a while to download and I'm on a fairly fast connection. The file size is 5.2 MB...
 Quote
 12/02/06 06:45pm  
Status: offline

trampoline

Forum User
Full Member
Registered: 02/24/06
Posts: 392
Quote by: Dirk

You could try experimenting with specifying the image width and height in % values, e.g.

Text Formatted Code
<img src="mypic.jpg" width="100%" height="100%" alt="">
 
But browsers aren't really good at resizing images, so it may come out odd.<br /><br />bye, Dirk


Where do you insert this code n the current BETA ?
 Quote
 12/03/06 05:51am  
Status: offline

Dazzy

Forum User
Full Member
Registered: 07/19/03
Posts: 200
Location:N. Ireland
same place as always in your themes header.thtml
Dazzy
 Quote
 12/03/06 06:00am  
Status: offline

trampoline

Forum User
Full Member
Registered: 02/24/06
Posts: 392
Quote by: Dazzy

same place as always in your themes header.thtml


But I don not know where, this is the only line controling the header image and there is no src since the image is defined in another part of the code
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="header-logobg-container-inner">
 Quote
 12/03/06 06:41am  
Status: offline

Dazzy

Forum User
Full Member
Registered: 07/19/03
Posts: 200
Location:N. Ireland
Text Formatted Code

                        <td class="header-logobg" width="50%" height="78" style="text-align:left;vertical-align:middle;">
                            &nbsp;&nbsp;&nbsp;&nbsp;<a href="{site_url}/"><img src="{site_logo}" width="151" height="56" alt="{site_name}" border="0"></a>
 
Dazzy
 Quote
 12/03/06 06:47am  

Trmoline

Anonymous

I am so sorry, I am very slow but where in the file ?

Text Formatted Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>{page_title}</title>
<!-- link rel="SHORTCUT ICON" href="{site_url}/favicon.ico" -->

<meta http-equiv="Pragma" content="no-cache">

<link rel="stylesheet" type="text/css" href="{css_url}" title="{theme}">
{feed_url}
{plg_headercode}
{advanced_editor}
<!-- Load Common Javascript Libraries -->
<script type="text/javascript" src="{site_url}/javascript/common.js"></script>

</head>

<!--<body class="sitebody" dir="{direction}">
<table width="99%" border="0" cellspacing="0" cellpadding="0" class="header-envelope">
    <tr>
        <td>
            <div class="header-navigation-container">
                <div class="header-navigation-line">
                    {menu_elements}
                </div>
            </div>
        </td>
   <!-- </tr>
    <tr>
        <td width="100%">
            <div class="header-logobg-container-outer">
                <table width="100%" border="0" cellpadding="0" cellspacing="0" class="header-logobg-container-inner">
                    <tr>
                        <td class="header-logobg" width="50%" height="78" style="text-align:left;vertical-align:middle;">
                          <!-- &nbsp;&nbsp;&nbsp;&nbsp;<a href="{site_url}/"><img src="{site_logo}" width="151" height="56" alt="{site_name}" border="0"></a>
                      <!--  </td>
                        <td class="header-logobg" width="50%" height="78" style="text-align:right;vertical-align:middle;">
                            <span class="site-slogan">{site_slogan}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                        </td>
                    </tr>
                </table>
            </div>
            <body class="sitebody" dir="{direction}">
<table width="99%" border="0" cellspacing="0" cellpadding="0" class="header-envelope">
    <tr>
        <td>
            <div class="header-navigation-container">
                <div class="header-navigation-line">
                    {menu_elements}
                </div>
            </div>
        </td>
    </tr>
            <table border="0" cellspacing="0" cellpadding="0" width="100%">
                <tr>
                    {left_blocks}
                    <td class="story-container" width="100%" style="vertical-align:top;">
                        <div class="header-welcomeanddate-box">
                            <div class="header-welcomeanddate-text">
                                <a href="{site_url}">{welcome_msg}</a><br>{datetime}
                            </div>
                        </div>

                        <!-- START OF CONTENT AREA -->
 
 Quote
 12/03/06 02:36pm  
Status: offline

Dazzy

Forum User
Full Member
Registered: 07/19/03
Posts: 200
Location:N. Ireland
Look at the code snippet i posted above and find it in the code.
Dazzy
 Quote
 12/03/06 03:10pm  

Trampoline

Anonymous
The code you are pointing to deals with the site Logo + Logo back groud not the header background ??
 Quote
 12/03/06 03:13pm  
Status: offline

Dazzy

Forum User
Full Member
Registered: 07/19/03
Posts: 200
Location:N. Ireland
the header background is a repeated graphic file iirc
Dazzy
 Quote
 12/03/06 03:26pm  

trampoline

Anonymous
I know, but on my site it is a single large graphics file that I do not want repeating, I would like to set the width and hight so the width of the graphics file id in 100% and the hight is 200 points ?? there must be a way ?
 Quote
 New Topic  Post Reply
All times are EDT. The time is now 10:15 pm.
  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content