Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Help needed with minor CSS layout problems

Reply
Thread Tools

Help needed with minor CSS layout problems

 
 
Jonathan N. Little
Guest
Posts: n/a
 
      03-18-2006
Martin Clark wrote:

> Jonathan N. Little wrote...
>
>>Martin Clark wrote:
>>
>>> Is there anyway at all to get the text to wrap, as in my original
>>> tables layout version?

>
>
>>Only what to simulate it is
>>

>
> [snip CSS suggestions]
>
> Thanks. I won't be able to try these out over the weekend, but I will
> have a go as soon as I can.
>
>>Make a GIF 50percent.gif that is a grid of alternating dark blue and
>>transparent pixels and then when 'Huddersfield Canal Society' overrides
>>the canal image it darkens it a bit with a dark screen.
>>

>
> I don't know how to do that but I will see whether any of the programs I
> have can do it.


Any decent image editor can do it, Paint Shop Pro still out there? If
not your can do it in MSPaint (free) make the transparent part one off
color then convert to GIF with transparent color with (freeware)
IrfanView. Honestly I think the texted as an image with blue border
would look best.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
 
Mark Parnell
Guest
Posts: n/a
 
      03-19-2006
Deciding to do something for the good of humanity, Spartanicus
<(E-Mail Removed)> declared in alt.html:

> <h2>News</h2>
> <p><b>The 74 Club</b></p>


<h3>The 74 Club</h3>, surely?

--
Mark Parnell

Now implementing http://blinkynet.net/comp/uip5.html
 
Reply With Quote
 
 
 
 
Spartanicus
Guest
Posts: n/a
 
      03-20-2006
Mark Parnell <(E-Mail Removed)> wrote:

>> <h2>News</h2>
>> <p><b>The 74 Club</b></p>

>
><h3>The 74 Club</h3>, surely?


The text only very briefly refers and links to the actual "The 74 club"
content which is located on another page. If marked up as a header then
for example generating a TOC for the home/index page would list "The 74
club" in the document outline, not helpful.

Sidebar content such as used by the OP can't be properly coded with
HTML4 which only really lends itself to marking up simple scientific
type documents (the W3C specs are an example of that type of document).

Since sidebar type content is part of many web pages, the rules need to
be bent in order to retain a useful document outline.

Sidebar content is best marked up using markup that has the same weight
as regular body text without using headers.

--
Spartanicus
 
Reply With Quote
 
Martin Clark
Guest
Posts: n/a
 
      03-20-2006
Spartanicus wrote...
>Mark Parnell <(E-Mail Removed)> wrote:
>
>>> <h2>News</h2>
>>> <p><b>The 74 Club</b></p>

>>
>><h3>The 74 Club</h3>, surely?

>
>The text only very briefly refers and links to the actual "The 74 club"
>content which is located on another page. If marked up as a header then
>for example generating a TOC for the home/index page would list "The 74
>club" in the document outline, not helpful.
>
>Sidebar content such as used by the OP can't be properly coded with
>HTML4 which only really lends itself to marking up simple scientific
>type documents (the W3C specs are an example of that type of document).
>
>Since sidebar type content is part of many web pages, the rules need to
>be bent in order to retain a useful document outline.
>
>Sidebar content is best marked up using markup that has the same weight
>as regular body text without using headers.
>

I thought the use of <b> was frowned upon?
Would it not be preferable to give the <p> a class?
--
Martin Clark
 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      03-20-2006
Martin Clark <(E-Mail Removed)> wrote:

>I thought the use of <b> was frowned upon?


It is when semantic markup should be used instead.

>Would it not be preferable to give the <p> a class?


CSS is an optional technology, a document should lose none of it's
functionality when it's rendered sans CSS. That said, <strong> markup is
probably slightly preferable in this case.

--
Spartanicus
 
Reply With Quote
 
Martin Clark
Guest
Posts: n/a
 
      03-20-2006
Martin Clark wrote...
>I have also tried to get the white writing to appear on two lines, as
> Huddersfield
> Canal Society
>whatever the width of the screen but I can't seem to manage it. "Canal
>Society" just disappears.


I got around the problem quoted above by creating a new .gif with both
the logo and the society name.

I have now had time to try out all the suggestions that were made. I
have incorporated many of them into my revised code. Even those I have
tried but not used have helped me in my learning process. I am pleased
with how much I have picked up over the last week - many thanks to those
who responded.

My latest version is here:
http://www.tamevalley.freeserve.co.uk/hcs/index.htm

The html and css validate.

The only problem I can now see with it is that, in Firefox only, there
is a small gap between the header container and the navigation
container. I can't work out what is causing this
--
Martin Clark
 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      03-20-2006
Martin Clark <(E-Mail Removed)> wrote:

>>I have also tried to get the white writing to appear on two lines, as
>> Huddersfield
>> Canal Society
>>whatever the width of the screen but I can't seem to manage it. "Canal
>>Society" just disappears.

>
>I got around the problem quoted above by creating a new .gif with both
>the logo and the society name.


Pity, you should have fixed the problem instead of badly working around
it.

>My latest version is here:
>http://www.tamevalley.freeserve.co.uk/hcs/index.htm
>
>The html and css validate.
>
>The only problem I can now see with it is that, in Firefox only, there
>is a small gap between the header container and the navigation
>container. I can't work out what is causing this


I don't see this:
FF: http://homepage.ntlworld.ie/spartanicus/temp1.png
IE: http://homepage.ntlworld.ie/spartanicus/temp2.png

--
Spartanicus
 
Reply With Quote
 
Mark Parnell
Guest
Posts: n/a
 
      03-20-2006
Deciding to do something for the good of humanity, Martin Clark
<(E-Mail Removed)> declared in alt.html:

> The only problem I can now see with it is that, in Firefox only, there
> is a small gap between the header container and the navigation
> container. I can't work out what is causing this


The DOM Inspector is very handy for things like this. In this case, it's
because .banner is taller than .header, so it is pushing everything
below it down.

Add height: 79px; to .banner to make it the same height.

--
Mark Parnell

Now implementing http://blinkynet.net/comp/uip5.html
 
Reply With Quote
 
Martin Clark
Guest
Posts: n/a
 
      03-21-2006
Mark Parnell wrote...
>The DOM Inspector is very handy for things like this. In this case, it's
>because .banner is taller than .header, so it is pushing everything
>below it down.
>
>Add height: 79px; to .banner to make it the same height.
>

Thanks! That's done it. The header was 1px taller than the right-hand
image because I wanted to have a thin dark blue line visible between the
picture and the white border-bottom. It didn't look right without it.
--
Martin Clark
 
Reply With Quote
 
Martin Clark
Guest
Posts: n/a
 
      03-21-2006
Spartanicus wrote...
>Martin Clark <(E-Mail Removed)> wrote:
>>
>>I got around the problem quoted above by creating a new .gif with both
>>the logo and the society name.

>
>Pity, you should have fixed the problem instead of badly working around
>it.
>

I agree - I would have liked to have fixed it but I was unable to after
many days of trying. There were several solutions offered here but many
had their own problems. The idea of using an image for the text was
suggested and I find it does the job. It seems unfair to call that badly
working around it.
--
Martin Clark
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Css-Layout vs Table-Layout Habib HTML 15 06-20-2006 05:11 AM
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
Table-based layout to CSS layout Guybrush Threepwood HTML 20 06-11-2006 11:12 AM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
Minor table layout vs. popup menu question. Applebrown Javascript 0 01-28-2004 09:59 PM



Advertisments