Help with CSS and Hyperlinks

Hey guys,
I'm a beginner in using Dreamweaver and had a go building a
basic website. I have some knowledge using HTML.
Basically i set up a basic CSS that puts a border on any page
i attach it to. But i've been using hyperlinks to connect the
pages. In design mode it all looks fine, but when i preview in
browser, the hyperlinks work but the CSS stops working and the
border disappears.
I do not know why it's doing this, does anyone have any
suggestions on fixing the problem?
Any suggestions are very grateful,
many thanks,
Katie x

Let's see the pages, please.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"hayz222" <[email protected]> wrote in
message
news:f8nmq7$l5a$[email protected]..
> Hey guys,
>
> I'm a beginner in using Dreamweaver and had a go
building a basic website.
> I
> have some knowledge using HTML.
>
> Basically i set up a basic CSS that puts a border on any
page i attach it
> to.
> But i've been using hyperlinks to connect the pages. In
design mode it all
> looks fine, but when i preview in browser, the
hyperlinks work but the CSS
> stops working and the border disappears.
>
> I do not know why it's doing this, does anyone have any
suggestions on
> fixing
> the problem?
>
> Any suggestions are very grateful,
>
> many thanks,
>
> Katie x
>

Similar Messages

I need help with CSS and floating

Okay, I know I need to get up on CSS and get rid of tables in
my sites.
However, I'm running up against a problem, and after banging
my head
against it for a while, I realize I need help. I've stripped
this down
so as to only show the area where I'm having difficulty.
What I want is a page that has everything down the center,
taking up no
more than 750 pixels and no more than 550 pixels of width. No
problem there.
After the header and the top content, I'd like to have two
"columns",
each in it's own separately-colored box. I would like the
right-side
column/box to be a static size, while the left-side
column/box sizes
dynamically.
Where I'm having problems is that when one column is boxed,
it's fine,
but whenever I wrap each column in its own box, the
fixed-size box
either jumps below or above the other box (depending on which
one has
been floated and which order the div's appear in the code).
Here are the links:
CSS:
http://www.afice.org/stylesheet/floatmestyles.css
ex 1:
http://www.afice.org/floatme1.html
ex 2:
http://www.afice.org/floatme2.html
Before sending, I took a look again, just to see if I was
missing
anything. I did notice that it doesn't seem to be that the
box is
jumping down so much as it is that it's getting written over.
Anyway, sorry for the long-winded explanation. I hope I've
managed to
explain what I'm trying to do well enough that someone can
tell me where
I'm going wrong.
Thanks,
--Kevin

Do you want something like this:
http://www.pmob.co.uk/temp/spointfooter.htm
You will need to look at the code to see how it was done.
Otherwise, there are different examples here on Pauls' site:
http://www.pmob.co.uk/temp/3colfixedtest_4.htm
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.perrelink.com.au
- Web Dev
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.adobe.com/devnet/dreamweaver/css.html
"Kevin D-R" <[email protected]> wrote in
message
news:[email protected]...
> Okay, I know I need to get up on CSS and get rid of
tables in my sites.
> However, I'm running up against a problem, and after
banging my head
> against it for a while, I realize I need help. I've
stripped this down so
> as to only show the area where I'm having difficulty.
>
> What I want is a page that has everything down the
center, taking up no
> more than 750 pixels and no more than 550 pixels of
width. No problem
> there.
>
> After the header and the top content, I'd like to have
two "columns", each
> in it's own separately-colored box. I would like the
right-side column/box
> to be a static size, while the left-side column/box
sizes dynamically.
>
> Where I'm having problems is that when one column is
boxed, it's fine, but
> whenever I wrap each column in its own box, the
fixed-size box either
> jumps below or above the other box (depending on which
one has been
> floated and which order the div's appear in the code).
>
> Here are the links:
>
> CSS:
http://www.afice.org/stylesheet/floatmestyles.css
>
> ex 1:
http://www.afice.org/floatme1.html
>
> ex 2:
http://www.afice.org/floatme2.html
>
> Before sending, I took a look again, just to see if I
was missing
> anything. I did notice that it doesn't seem to be that
the box is jumping
> down so much as it is that it's getting written over.
>
> Anyway, sorry for the long-winded explanation. I hope
I've managed to
> explain what I'm trying to do well enough that someone
can tell me where
> I'm going wrong.
>
> Thanks,
>
> --Kevin

Need a bit of help with css and fullscreen

I am currently doing a javaFX application for my university project, I have it everything nearly finished, but need to finish the css component to make the application "prettier" (I am not very good on graphic design to be honest). So if i could get a bit of help on this little issue I'd be very grateful.
is there any way to make fullscreen (and if possible resizing window) to instead rearranging everything to actually do a fullscreen (like the games) and everything "grows accordingly (even though in games what it usually does is to change the screen resolution, is that possible to reproduce with javaFX?) also how to remove the message and the effect on click the "esc" key to exit the fullscreen mode?
i know that removing the focus effect on an element is with the following (if a button)
.button:focused{
     -fx-background-insets: 0;
}but,is there any way to remove the effect on anything focused (TextField, Combo Box, ...)? (tried with a .textfield:focused but it did not work)
also i wanted to produce the focused effect by this way but it didn't work, how should i do it? (in fact even if i try to put this line on the button:focused, the focused effect gets removed from there, because of the insets line)
#highlight{
     -fx-background-insets: 2;
     -fx-background-color: yellow;
public class controller extends StackPane implements Initializable{
     public void highlight(){
          this.getStyleClass().add("highlight");
and last thing (for the moment) the .button seems to work for all the buttons, but trying another thing like .gridpane or .textfield or .scrollpane does not seem to work, is there any way to make it work or i should add "id" to all the elements and use the # instead?

i wrote all them in the same thread becsause there were a total of 4 (and could had been more) separated by ----
should i leave it how it is or open now 4 threads for each question?

Help with adding a hyperlink to a button?

We have a simple little site we built in Catalyst and everything works great. The only problem is that we cannot figure out how to add a hyperlink to one of the buttons in the animation. We simply want to be able to click on the button and go to another site (the client's Facebook page specifically). Can anyone provide some insight? Thanks!

The message you sent requires that you verify that you
are a real live human being and not a spam source.
To complete this verification, simply reply to this message and leave
the subject line intact.
The headers of the message sent from your address are shown below:
From [email protected] Tue Nov 03 19:08:07 2009
Received: from mail.sgaur.hosted.jivesoftware.com (209.46.39.252:45105)
by host.pdgcreative.com with esmtp (Exim 4.69)
(envelope-from <[email protected]>)
id 1N5TPy-0001Sp-J1
for [email protected]; Tue, 03 Nov 2009 19:08:07 -0500
Received: from sgaurwa43p (unknown 10.137.24.44)
     by mail.sgaur.hosted.jivesoftware.com (Postfix) with ESMTP id 946C5E3018D
     for <[email protected]>; Tue, 3 Nov 2009 17:08:03 -0700 (MST)
Date: Tue, 03 Nov 2009 17:07:49 -0700
From: Tvoliter <[email protected]>
Reply-To: [email protected]
To: Matthew Pendergraff <[email protected]>
Message-ID: <299830586.358941257293283616.JavaMail.jive@sgaurwa43p>
Subject: Help with adding a hyperlink to a button?
MIME-Version: 1.0
Content-Type: multipart/mixed;
     boundary="----=_Part_36702_1132901390.1257293269030"
Content-Disposition: inline
X-Spam-Status: No, score=-3.4
X-Spam-Score: -33
X-Spam-Bar: ---
X-Spam-Flag: NO

Help with writing and retrieving data from a table field with type "LCHR"

Hi Experts,
I need help with writing and reading data from a database table field which has a type of "LCHR". I have given an example of the original code but don't know what to change it to in order to fix it and still read in the original data that's stored in the LCHR field.
Basically we have two Function modules, one that saves list data to a database table and one that reads in this data. Both Function modules have an identicle table which has an array of fields from type INT4, CHAR, and type P. The INT4 field is the first one.
Incidentally this worked in the 4.7 non-unicode system but is now dumping in the new ECC6 Unicode system.
Thanks in advance,
C
SAVING THE LIST DATA TO DB
DATA: L_WA(800).
LOOP AT T_TAB into L_WA.
ZDBTAB-DATALEN = STRLEN( L_WA ).
MOVE: L_WA to ZDBTAB-RAWDATA.
ZDBTAB-LINENUM = SY-TABIX.
INSERT ZDBTAB.
READING THE DATA FROM DB
DATA: BEGIN OF T_DATA,
             SEQNR type ZDBTAB-LINENUM,
             DATA type ZDBTAB-RAWDATA,
           END OF T_TAB.
Select the data.
SELECT linenum rawdata from ZDBTAB into table T_DATA
     WHERE repid = w_repname
     AND rundate = w_rundate
     ORDER BY linenum.
Populate calling Internal Table.
LOOP AT T-DATA.
APPEND T_DATA to T_TAB.
ENDLOOP.

Hi Anuj,
The unicode flag is active.
When I run our report and then to try and save the list data a dump is happening at the following point
LOOP AT T_TAB into L_WA.
As I say, T_TAB consists of different fields and field types whereas L_WA is CHAR 800. The dump mentions UC_OBJECTS_NOT_CONVERTIBLE
When I try to load a saved list the dump is happening at the following point
APPEND T_DATA-RAWDATA to T_TAB.
T_DATA-RAWDATA is type LCHR and T_TAB consists of different fields and field types.
In both examples the dumps mention UC_OBJECTS_NOT_CONVERTIBLE
Regards
C

We created a pdf document with comments and hyperlinks. On iPad, comments/hyperlinks disappear.

Using Acrobat Pro 9, we created a pdf with comments and hyperlinks to be shared with a large community on the iPad, through a server. Once the document is opened on the iPad, all the comments and hyperlinks disappear. Are we missing a tool on the iPad or is there a different way to create this file? Thank you.

Is everyone on the iPad using the latest version of Adobe Reader mobile for iOS (10.6 at the moment)? You can see all the comments (including drawing markups) as well as view the notes attached to text markup with this version.

Help with count and sum query

Hi I am using oracle 10g. Trying to aggregate duplicate count records. I have so far:
SELECT 'ST' LEDGER,
CASE
WHEN c.Category = 'E' THEN 'Headcount Exempt'
ELSE 'Headcount Non-Exempt'
END
ACCOUNTS,
CASE WHEN a.COMPANY = 'ZEE' THEN 'OH' ELSE 'NA' END MARKET,
'MARCH_12' AS PERIOD,
COUNT (a.empl_id) head_count
FROM essbase.employee_pubinfo a
LEFT OUTER JOIN MMS_DIST_COPY b
ON a.cost_ctr = TRIM (b.bu)
INNER JOIN MMS_GL_PAY_GROUPS c
ON a.pay_group = c.group_code
WHERE a.employee_status IN ('A', 'L', 'P', 'S')
AND FISCAL_YEAR = '2012'
AND FISCAL_MONTH = 'MARCH'
GROUP BY a.company,
b.district,
a.cost_ctr,
c.category,
a.fiscal_month,
a.fiscal_year;
which gives me same rows with different head_counts. I am trying to combine the same rows as a total (one record). Do I use a subquery?

Hi,
Whenever you have a problem, please post a little sample data (CREATE TABLE and INSERT statements, relevant columns only) from all tables involved.
Also post the results you want from that data, and an explanation of how you get those results from that data, with specific examples.
user610131 wrote:
... which gives me same rows with different head_counts.If they have different head_counts, then the rows are not the same.
I am trying to combine the same rows as a total (one record). Do I use a subquery?Maybe. It's more likely that you need a different GROUP BY clause, since the GROUP BY clause determines how many rows of output there will be. I'll be able to say more after you post the sample data, results, and explanation.
You may want both a sub-query and a different GROUP BY clause. For example:
WITH    got_group_by_columns     AS
     SELECT a.empl_id
     ,     CASE
                    WHEN c.category = 'E'
              THEN 'Headcount Exempt'
                    ELSE 'Headcount Non-Exempt'
            END          AS accounts
     ,      CASE
                    WHEN a.company = 'ZEE'
                    THEN 'OH'
                    ELSE 'NA'
            END          AS market
     FROM              essbase.employee_pubinfo a
     LEFT OUTER JOIN mms_dist_copy             b ON   a.cost_ctr     = TRIM (b.bu)
     INNER JOIN       mms_gl_pay_groups        c ON   a.pay_group      = c.group_code
     WHERE     a.employee_status     IN ('A', 'L', 'P', 'S')
     AND        fiscal_year           = '2012'
     AND        fiscal_month          = 'MARCH'
SELECT    'ST'               AS ledger
,       accounts
,       market
,       'MARCH_12'          AS period
,       COUNT (empl_id)      AS head_count
FROM       got_group_by_columns
GROUP BY accounts
,            market
;But that's just a wild guess.
You said you wanted "Help with count and sum". I see the COUNT, but what do you want with SUM? No doubt this will be clearer after you post the sample data and results.
Edited by: Frank Kulash on Apr 4, 2012 5:31 PM

Help with CSS / Classes

Hi Guys,
Im not very good with CSS and classes, and wondered if any of
you guys could point me to some info on how to get to grips with
external style sheets, whats best and how to use them and set them
up.
Ive never realy looked into this much and at college way back
we did HTML and css was never mentioned so Ive always just used
DW's inline formatting to get what I want but see the appeal of 1
style sheet 1 change at times.
Also Id like to smarten my forms and form elements up a
little and give a neater look and wondered if there were any pre
made style sheets or CSS out there that i could use instead of
trying out combinations of styles...??
Any support in this area is greatly welcomed.
Thank you.
Tag

http://apptools.com/examples/pagelayout101.php
http://www.projectseven.com/tutorials/css/qdmacfly/index.htm
http://www.macromedia.com/devnet/mx/dreamweaver/css.html
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Tag2007" <[email protected]> wrote in
message
news:eq6e1e$dq8$[email protected]..
> Hi Guys,
>
> Im not very good with CSS and classes, and wondered if
any of you guys
> could
> point me to some info on how to get to grips with
external style sheets,
> whats
> best and how to use them and set them up.
>
> Ive never realy looked into this much and at college way
back we did HTML
> and
> css was never mentioned so Ive always just used DW's
inline formatting to
> get
> what I want but see the appeal of 1 style sheet 1 change
at times.
>
> Also Id like to smarten my forms and form elements up a
little and give a
> neater look and wondered if there were any pre made
style sheets or CSS
> out
> there that i could use instead of trying out
combinations of styles...??
>
> Any support in this area is greatly welcomed.
>
> Thank you.
> Tag
>

MOVED: [Athlon64] Need Help with X64 and Promise 20378

This topic has been moved to Operating Systems.
[Athlon64] Need Help with X64 and Promise 20378

I'm moving this the the Administration Forum. It seems more apporpiate there.

Need some help with Firefox and userChrome.css

As you can see there is some space underneath the tabs. I used the addon 'Classic theme restorer' to hide the adressbar, but unfortnanly it left some space underneath the tabs. I've been trying to fix it with userChrome.css myself, but I really dont know what am I'm doing.
Does anyone know how to remove it?

*For Safari (4.0.2)* I just clicked help>installed_plug-ins and get this:
http://www.easy-share.com/1908259228/Installed Plug-ins.html
*Firefox (3.5.3)* tools>add-ons>extensions: Ad Block plus
and tools>add-ons>Plug-ins: http://yfrog.com/6qnag2j
Message was edited by: Jonnymont
If I just delete these won't it make things worse? like not being able to go to any flash sites at all (majority of internet these days)
Message was edited by: Jonnymont

Packaging a PDF with Files and Hyperlinks

Hello,
Google keeps coming up empty when I search for the solution ad I can't seem to find anything in these forums either, but hopefully one of you will be able to help me out.
I want to provide a client with a zip archive containing the PDF I'm working on as well as certain files they will be needing. These cannot be on a server.
The client will be expecting to unpack the archive before reading the PDF.
I have been trying to create relative hyperlinks to the files in question (two of which are zip archives themselves) so that the client could click on the link and have their default software open the selected file. Unfortunately, it seems like the PDFs I'm creating route all URLs through the default browser, rather than the operating system itself. Thus, text files are opened and displayed in the browser, directories are displayed as directory indices in the browser and anything else that the browser can open seems to work (html documents, etc.). However, when the file being linked to is not one that the browser can open (such as a zip archive) nothing happens.
For example, I have created a link with the correct relative url to the file. In the PDF, hovering over it shows the correct file path. I click on it and get the Adobe Reader security pop-up, saying:
This document is trying to connect to:
file://correct_path_to_the_file/the_file.zip
If you trust this site, choose Allow. If you do not trust this site, choose Block.
Of course, I choose Allow. Then nothing happens, presumably because the request is being sent to the browser which doesn't know how to handle it. Is there any way to send the request to the operating system? Or at least to open up a file browser, rather than the web browser?
Thanks for any help!
Oh, and I'm using InDesign CC on an x64 Windows machine, if that's of any use.

When you combine PDFs into a Package (Acrobat 8) or a Portfolio (Acrobat 9 & X) links present between two PDFs that are combined into the Package / Portfolio are broken. The PDFs combined into a Package/Portfolio become attachments to the new PDF created (the Package/Portfolio).
The links between PDFs are between descrete stand alone PDF files not between files that are attachments in the new PDF.
Once PDFs are combined into the new Package/Portfolio PDF you can use the Link Tool to create links.
The PDF annotation that is a "link" does not have a "reveal codes" functionality.
Keep in mind that PDF is very much a different thing from word processing or layout file formats.
(Ref: ISO 32000-1)
Be well...

Beginner needs help with css layout

i'm new to using dw (cs3) and css, though i have some
background in html and coding. i'm creating a page using the "one
column elastic, centered, header and footer" layout and i have a
banner header with a horizontal spry menu bar at the bottom of the
header. the background color of the buttons on the menu bar is red,
and there's a yellow 5px border on the top and bottom of the red
menu bar, so it looks like there's red bar with yellow piping above
and below it, and this bar is between the header and body section
of the page. i've set these colors in the "ul.MenuBarHorizontal a"
rule.
now, the issue i have is that my menu bar does not extend
across the entire column, so there's empty space to the right of my
menu bar (between the end of the menu bar and the far right
column). i'd like the look of the red and yellow menu bar to extend
all the way across, but i can't figure out how to do this in css.
do i:
extend the menu bar all the way across the width of the page?
i can't figure out how to do this.
insert an image to make it appear as though the red and
yellow bar keeps extending to the right? if so, how will that image
remain elastic along with my page?
or is there a better solution?
i'm very new to css and i'm doing my best to figure out how
everything fits together. the last web site i built was in 1997 and
it was done in notepad. any help would be tremendous. i'm in
kinshasa, in the democratic republic of congo, and truth be told
there aren't a lot of dw gurus out here.
thanks in advance...

Can you post a link to your page, please?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"charliemooreiv" <[email protected]> wrote
in message
news:[email protected]...
> i'm new to using dw (cs3) and css, though i have some
background in html
> and
> coding. i'm creating a page using the "one column
elastic, centered,
> header
> and footer" layout and i have a banner header with a
horizontal spry menu
> bar
> at the bottom of the header. the background color of the
buttons on the
> menu
> bar is red, and there's a yellow 5px border on the top
and bottom of the
> red
> menu bar, so it looks like there's red bar with yellow
piping above and
> below
> it, and this bar is between the header and body section
of the page. i've
> set
> these colors in the "ul.MenuBarHorizontal a" rule.
>
> now, the issue i have is that my menu bar does not
extend across the
> entire
> column, so there's empty space to the right of my menu
bar (between the
> end of
> the menu bar and the far right column). i'd like the
look of the red and
> yellow menu bar to extend all the way across, but i
can't figure out how
> to do
> this in css.
>
> do i:
>
> extend the menu bar all the way across the width of the
page? i can't
> figure
> out how to do this.
>
> insert an image to make it appear as though the red and
yellow bar keeps
> extending to the right? if so, how will that image
remain elastic along
> with
> my page?
>
> or is there a better solution?
>
> i'm very new to css and i'm doing my best to figure out
how everything
> fits
> together. the last web site i built was in 1997 and it
was done in
> notepad.
> any help would be tremendous. i'm in kinshasa, in the
democratic republic
> of
> congo, and truth be told there aren't a lot of dw gurus
out here.
>
> thanks in advance...
>

Help with css 3 column layout with background

So I'm really not much of a web designer and usually deal in
print but a friend wanted help with her site so I'm taking a crash
course in css. so I was wondering if anyone a little more web savvy
than I can spot why my sites background Is sliding around.
this is the site as it
stands
this is the
main css i found a site to generate the codes to get around browser
specific glitches
what
I see in Safari
what
i see in firefox
what
background should look like
any help would be greatly appreciated thanks

Peter Llamas posted in macromedia.dreamweaver:
> So I'm really not much of a web designer and usually
deal in print
> but a friend wanted help with her site so I'm taking a
crash
> course in css. so I was wondering if anyone a little
more web
> savvy than I can spot why my sites background Is sliding
around.
>
http://whiskeylemonade.x10hosting.com
I have no idea what you mean by "sliding around", but could
it have
something to do with your missing old_break.css file?
http://whiskeylemonade.x10hosting.com/css/old_break.css
HTTP/1.x 404 Not Found
Mark A. Boyd
Keep-On-Learnin' :)

Help with XMLSEQUENCE and repeating elements

I need help with the following XML extraction (note this is on Oracle9i). I have the following XML structure. There are multiple <Reading> elements
<MeterReadings>
<MeterReading>
<Meter>
<id>0004128190</id>
<idType>METER_X_UNIVERSAL_ID</idType>
</Meter>
<Premise>
<id>PREM4128190</id>
<idType>X_CLIENT_PRMSE_ID</idType>
</Premise>
<Reading>
<value>11111</value>
<readingTypeId>CKWH</readingTypeId>
</Reading>
<Reading>
<value>22222</value>
<readingTypeId>KWHP</readingTypeId>
</Reading>
</MeterReading>
</MeterReadings>
I want to return one row for each <reading> element, including all its sub-elements - <value> and <readingTypeId>
So, for the above data set, I would like to get back something like this. The parent elements can be repeated.
<meter/id>,<Premise/id>,<Reading/value>,<Reading/readingTypeId>
0004128190,PREM4128190,11111,CKWH
0004128190,PREM4128190,22222,KWHP
I have tried to use the XMLSequence function like this:
select extractvalue(i.xml_message,'MeterReadings/MeterReading/Meter/id'),
extractvalue(value(p),'value'), extractvalue(value(p),'readingTypeId')
from myTable i,
table(XMLSequence(
extract(i._xml_message, '//Reading/*' ))) p
But then I get results like this, where each sub-element results in a new row:
0004128190     11111     null
0004128190     null     CKWH
0004128190     22222     null
0004128190     null     KWHP
What would be the proper XQuery?
Thanks!

This may help:
http://www.dreamweaverresources.com/tutorials/pagebackgrounds/examplevert.htm
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
http://www.csstemplates.com.au
http://www.perrelink.com.au
CSS Tutorials for Dreamweaver
http://www.adobe.com/devnet/dreamweaver/css.html
"teamkombat" <[email protected]> wrote in
message
news:ept196$d1g$[email protected]..
> Hi I am trying to create a very simple effect where my
page casts a
> shadow. If
> you take a look at
http://www.timberland.com/home/index.jsp
the left and
> right
> side of the page has a very light shadow. I would like
to use a similar
> effect. What I was thinking was to create 2 small .gifs
with the shadow
> effect
> (1 for the left side and 1 for the right side) maybe
10px long. Then
> create 1
> table with 3 columns: The middle collumn will be the
main column for the
> content and 2 thin/small columns on the left and right
to attach the
> shadow
> .gifs.
>
> I was wondering how do I repeat this shadow .gif image
for the length of
> the
> main column?
>
> Also if there is a better solution to the above problem
please let me
> know. I
> have read about faux columns and using CSS for repeating
images, but don't
> really grasp the ideas yet. Thanks everyone for their
time and help.
>
>

Help with CSS Page Layout

I guess I am "old school" in that I have always used tables
to lay out my web pages. I decided I must learn to do it with CSS,
but I'm having a terrible time (and it shouldn't be so hard!). I
understand how to define the styles, add divs, etc. Here's what I'm
having trouble with:
How do I specify the normal page width to be 800 pixels,
however I want it to be relative to the browser (i.e., 100% of 800
pixels).
I understand the "float" tag, but if I have a right-hand
sidebar, I can't seem to get the text to the left (in a div called
"maincontent") to stop at the sidebar and wrap to the next line. I
tried specifying "Hidden" as my textbook suggests, but that has no
effect.
I can easily do all of this with tables, so do I really need
to abandon them?
Thanks!

Hi Jane,
I'll try to answer all your questions, then a tip or two to
stop the main
content from dropping when the browser window size is
reduced.
- " I didn't realize that
margin-top: 0px;
margin-right: auto;
is not the same as margin: 0px auto;
That's right.
margin: 0px auto; is actaully saying make the top margin 0,
the right margin
auto, the bottom margin 0 and the left margin auto.
It's just CSS shorthand.
For example, you might have:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 5px;
margin-left:15px;
You could just use margin: {10px 20px 5px 15px;}
Think of a clock to remember the directions.
12:00 top, 3:00 right, 6:00 bottom, 9:00 left.
If any of the values are the same, you can shorten it more.
For example, if top is 10, right is 20, bottom is 5 and left
is 20, it's
margin: {10px 20px 5px;}
If the 4th location (left) is missing a value, it makes it
the same as what
you have for right.
If top and bottom are 10px, and left and right are 20px,
it's:
margin {10px 20px;}
If the last two positions ( bottom and left vlaues ) are
missing, then it
will use the top value for the bottom, and the right value
for the left.
What auto right and left is doing is subtracting your content
width (the
container width) from the browser window width, and then
dividing the
remainder in 2 and applying each value to each side of the
container.
-"I found that they all took on the font of the maincontent
and I had to fix
them
individually. "
The only text that should be Time is the text in your main
content, where
you have that font defined. Everything else should be Arial
if you define
the body as such. I'll post a link at the end of this.
- "I put my bold sentence (Friendship, Fun, etc.) in h1, but
I had to change
the
color & size, so that added another style element. "
You don't need to give the h1 a class. You can actually just
style the h1
tag:
h1 {
margin: 10px 10px 2px;
font-size: larger;
color: #941238;
You can only use h1 once on a page.
You can use h2, h3, h4, etc, as many times as you would like,
and you can
style these just like the h1 style above.
- "I don't quite understand the .rightsidebar p { and
container p{
I am assigning the spacing to the <p> tag? What exactly
is that doing?"
That is saying, give all the <p> tags inside the
rightsidebar container the
follwing style.
So, in this example:
.rightsidebar p {
font-size: 18px;
margin: 2px 10px;
it's saying give all the <p> tags in this container a
size of 18 and margin
of 2px top and bottom, and 10px left and right.
It's a lot easier than giving a class to every <p> tag
- "I also don't quite understand the .clear {
Why not just choose clear:both on the next section <div
class="footer">"
You could, if the footer was in the container. It just needs
to be the final
element before the close of a container that contains the
float(s).
-Do you use the <div class="container"> technique all
the time?
Yes, most of the time. I usually put everything in it, and
use the
margin:0px auto; to center it.
That way, I don't have to try to get a number of different
elements to align
with the right and left sides by applying values to all of
them, which can
get tricky quickly.
-"If you'll indulge me one more question, I wonder if it's
possible to put a
graphic (say, of a putting green) underneath my
rightsidebar? I would want
the sidebar to lay on top of the putting green for an
interesting artistic
touch.
Yes, you can give that div a background image. You just need
to make the div
the same size as the image so you see it all (or vice-versa).
Now, to make that maincontent not drop like it does you can
remove the width
in the CSS. Now it will expand over to the left edge of the
rightsidebar.
You can control how close it gets by giving the right sidebar
a bigger left
margin. The point is, with no width assigned, the maincontent
will shrink
down to the longest word in it before it drops.
Here's what it looks like:
http://tnsgraphics.com/test2.htm
Let me know if you have any questions.
Take care,
Tim
"janeinpa" <[email protected]> wrote in
message
news:[email protected]...
> Hi, Tim...
>
> You have been very kind to help me learn CSS! I very
much appreciate it
> and
> am really delighted to have gained a better
understanding of this. I
> studied
> all your suggestions and started the page from scratch.
Take a look here:
>
http://www.allisonwebcreations.com/ewga_site/good_page/indexgood.htm
I'm
> very
> pleased with it. I discovered a couple of things:
>
> I didn't realize that
> margin-top: 0px;
> margin-right: auto;
>
> is not the same as margin: 0px auto;
>
> are they two different codes? Anyway, it didn't center
until I fixed
> that.
>
> I understand what you're saying about the font codes
being redundant,
> however
> I found that they all took on the font of the
maincontent and I had to fix
> them
> individually. This must be an error in how I'm coding
it. Is the order
> in
> which I did them to blame? I put it in the order that
I'm reading it, but
> perhaps I should do it differently.
>
> I also couldn't get the footer to move left to the
margin. I'm not sure
> why,
> since I think I followed all your suggestions.
>
> I put my bold sentence (Friendship, Fun, etc.) in h1,
but I had to change
> the
> color & size, so that added another style element.
I'm afraid that
> probably
> isn't correct. I also couldn't have my normal content
text follow
> immediately
> on the same line. Maybe that isn't possible.
>
> I don't quite understand the .rightsidebar p { and
container p{
> I am assigning the spacing to the <p> tag? What
exactly is that doing?
>
> I also don't quite understand the .clear {
> Why not just choose clear:both on the next section
<div class="footer"> ?
>
> Do you use the <div class="container"> technique
all the time? How do you
> decide what goes in it -- just floating items or can I
think of it as a
> table
> that holds all my main blocks of info? Why not include
the footer in it?
>
> If you'll indulge me one more question, I wonder if it's
possible to put a
> graphic (say, of a putting green) underneath my
rightsidebar? I would
> want the
> sidebar to lay on top of the putting green for an
interesting artistic
> touch.
>
> Thank you, thank you, thank you again. Here are my css
codes (which I
> have in
> an external file. Is it better to import or link to the
file?)
>
> Have a wonderful New Year.
>
>
>
>
>
>
> .body {
> padding: 0px;
> margin-top: 0px;
> font-family: Arial, Helvetica, sans-serif;
> }
> .masthead {
> width: 780px;
> margin: 0px auto;
> padding-top: 10px;
> padding-right: 0px;
> }
> .maincontent {
> background-color: #FFFFFF;
> text-align: left;
> width: 60%;
> margin-top: 0px;
> padding-top: 10px;
> padding-right: 0px;
> font-family: "Times New Roman", Times, serif;
> font-size: medium;
> color: #000000;
> }
> .maincontent p{
> margin-top: 2px;
> margin-right: 10px;
>
> }
> .rightsidebar {
> font-size: small;
> background-color: #DEEBE4;
> text-align: center;
> float: right;
> width: 250px;
> margin-top: 10px;
> margin-left: 20px;
> border: thick solid #941238;
> font-family: Arial, Helvetica, sans-serif;
> padding: 10px;
>
> }
> .leftbox {
> font-size: small;
> font-style: italic;
> color: #336600;
> background-color: #DEEBE4;
> text-align: center;
> clear: both;
> width: 300px;
> margin-top: 50px;
> border: thin solid #941238;
> font-family: Arial, Helvetica, sans-serif;
> padding: 10px;
> }
> .footer {
> font-size: small;
> margin: 100px;
> font-family: Geneva, Arial, Helvetica, sans-serif;
> font-style: normal;
> }
> .container {
> width: 90%;
> margin: 0px auto;
> }
> .clear {
> font-size: 1px;
> line-height: 0px;
> clear: both;
> height: 0px;
> }
> .event {
> font-size: 24px;
> font-weight: bold;
> color: #00493E;
> }
> .upcomingdate {
> font-size: 20px;
> color: #990134;
> font-weight: bold;
> font-family: Arial, Helvetica, sans-serif;
> }
>
> .eventitem {
> font-size: 18px;
> color: #000000;
> font-weight: bold;
> margin: 0px;
> }
> .eventlink {
> font-size: 14px;
> font-style: italic;
> margin: 0px;
> }
> .smallboxhead {
> font-size: large;
> color: #00493E;
> font-style: normal;
> font-weight: bold;
> }
> .companyname {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: small;
> font-style: italic;
> color: 990134;
> }
>

Help with CSS and Hyperlinks

Similar Messages

Maybe you are looking for