473,320 Members | 1,982 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

need different code for homepage

Hi. My markup is valid but the page sucks when the window is shrunk, the
text going behind the image.

Can anyone suggest a way to fix this while keeping the same general layout
it has now (nav buttons on left, image in center, h1 title text on right)?

The page in question is at www.TheBicyclingGuitarist.net/index.htm

The advice from this and the other ciwa newsgroups have helped me improve my
site a LOT over the years. Just today I replaced <pwith <divfor image
captions on several pages throughout the site as recommended by Jukka in the
stylesheets newsgroup (example at
http://www.TheBicyclingGuitarist.net...images2001.htm )

I'm asking about the specific problem of the <h1text sliding behind the
image when the window is shrunk in the current layout and code arrangement.
If somebody wants to suggest a "makeover" for my home page or any part of my
site, I'm all ears. Thanks.
Chris Watson a.k.a. "The Bicycling Guitarist"
May 30 '07 #1
4 2006
The Bicycling Guitarist wrote:
>
www.TheBicyclingGuitarist.net/index.htm

I'm asking about the specific problem of the <h1text sliding behind the
image when the window is shrunk
In your stylesheet:
..photo {
width: 43%;
}

In smaller windows the image may well be wider than 43% of the available
space and overflow its container. Since it comes later in the source
than <h1>, it is automatically on top, hiding part of <h1>. What to do
about it depends on what result you find the least objectionable.

..photo {overflow:hidden} will chop the image off on the right.
..photo img {max-width:100%;height:auto} will resize the image down when
needed, except in IE prior to IE7. JavaScript is required to get
max-width working in IE6-.

You could experiment with min-width on the whole page, but that would
cause horizontal scrolling instead, which is icky, and also requires JS
for IE6.

Another alternative is restructuring the page, putting the photo in the
'welcome' div.

--
Berg
May 30 '07 #2
"The Bicycling Guitarist" wrote...
: My markup is valid but ... when the window is shrunk, the
: text goes behind the image.

I haven't played with z-indexing things, but perhaps that's one
way to get things done. I hesitate to mention it, because of my
own lack of implementation, and I'll let others discuss that.

One way to get things done, involves placing everything in their
own <divcontainers. It's a bit more complicated than using a
table, though, so I'll just mention that using a fixed-width table
is the easiest way to do it.

....
<style type="text/css">
table, td { border:0px;padding:0px;margin:0px; }
</style>
</head>
<body>
<table style="width:800px;margin:0px auto;"><tbody><tr>
<td width="200"><!-- left_margin things go here --></td>
<td><!-- content goes here, set to a minimum width to the size of
the largest pic, then adjust the table width by adding up all three
columns, the goal is to consistently present all pages in the same
manner so the end-user doesn't see things jumping around --></td>
<td width="200"><!-- right_margin things go here --></td>
</tr></tbody></table>

: Can anyone suggest a way to fix this while keeping the same general
: layout it has now (nav buttons on left, image in center, h1 title text on
: right)?
:
: The page in question is at www.TheBicyclingGuitarist.net/index.htm

A fixed width table will present scroll bars inside the browser when
the page shrinks below a the table size. You'll need to adjust the
column widths for the right and left sides above as needed.

: The advice from this and the other ciwa newsgroups have helped me
: improve my site a LOT over the years. Just today I replaced <p>
: with <divfor image captions on several pages throughout the site
: as recommended by Jukka in the stylesheets newsgroup (example at
: http://www.TheBicyclingGuitarist.net...images2001.htm )

Something you may want to consider for the images page above,
involves employing a fixed width <divwith margins set to:
style="width:200px;margin:0px auto;" (change the 200px to the
appropriate image-width + 10 or 20 px.

: I'm asking about the specific problem of the <h1text sliding
: behind the image when the window is shrunk in the current layout
: and code arrangement. If somebody wants to suggest a "makeover"
: for my home page or any part of my site, I'm all ears. Thanks.

I took the easy way out on the <h1>text</h1sliding behind the
images.

Hope this helps.

--
Jim Carlock
May 30 '07 #3

"Bergamot" <be******@visi.comwrote in message
news:5c*************@mid.individual.net...
The Bicycling Guitarist wrote:
>>
www.TheBicyclingGuitarist.net/index.htm

I'm asking about the specific problem of the <h1text sliding behind the
image when the window is shrunk

.photo img {max-width:100%;height:auto} will resize the image down when
needed, except in IE prior to IE7. JavaScript is required to get
max-width working in IE6-.
Oh I like the shrinking image trick! I have added it to the index.css
stylesheet. I am confused by all the different IE6 JavaScript hacks that are
out there. Some are jscript, which I suppose is fine because only IE needs
to read them. Please, do you have a favorite JavaScript hack for this
problem with IE6, one that hopefully works for IE5 and even IE5 for Mac if
possible? If you do (or even if you don't), please, how do I implement it?
where do I put the code fragment(s)? Do I need to add anything to my index
page itself, make a separate stylesheet for IE (and if so, again I don't
know how yet), add to my index.css???
Sorry for all the questions.
Thanks again.
May 30 '07 #4
The Bicycling Guitarist wrote:
"Bergamot" <be******@visi.comwrote in message
news:5c*************@mid.individual.net...
>>
JavaScript is required to get
max-width working in IE6-.

please, how do I implement it?
google is your friend
http://www.google.com/search?q=max-width%20in%20ie

--
Berg
May 30 '07 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Mark Constant | last post by:
I was doing a test website where on one page somebody could select a Genre from a drop-down list and it would display every sub-listing under that specific Genre. If the user selected All it would...
24
by: Ben Sharvy | last post by:
I have two pages which use the same stylesheet, but only one produces the intended result. The inconsistency only happens in Explorer for Windows. All the Mac browsers I've tried, including...
8
by: Kayda | last post by:
Hello: I had some code that allowed me to expand a paragraph by clicking on a hyperlink and collapse it by clicking on the paragraph. I unfortunately the Javascript function. I still have the...
1
by: rolear01 | last post by:
A php newbie with a problem! I have a form with a text area <form name=edit_front_page_form action="/test.php?page=front_page_updated" method=get> <p>Edit front page<br> <textarea cols=30...
2
by: Hiten | last post by:
Is it possible to have more code behind file but that file will have same class in way of partial class, Default Structure I -------------- Homepage.aspx + Homepage.aspx.cs (this .cs file...
11
by: bb nicole | last post by:
Below is css for the link color for my homepage... My homepage have 5 different table which contain a link... If i wish to have different color for the link in different table in same page, what...
2
by: jbowers | last post by:
I have a very long text string of numbers and some javascript code that is supposed to be used to manipulate it. I am trying to "decode" this string (represented as the variable "v" in the code...
9
by: Ronny | last post by:
Ok, I did spend tons of time now (as a beginner in css stylecoding) (but making html pags for many years), to get this right. But I am overseeing something. At this link you find a drawing of...
7
by: shapper | last post by:
Hello, I am working on a web site with a two column layout, "Content" on the left and "Sidebar" on the right. Sidebar 1) Sidebar is divided into sections (div). Each section has header. ...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.