Simple css nav type scaling

I am creating a simple nav using "ul" and "li" tags all of
which have classes attached to them. I have put in place a
reset.css. the nav has inline elements attached to the <a>
tag. I give the link a type size yet they get bigger when previewed
in a browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body>
<ul class="nav">
<li class="home"><a href="bwd
live/css/pages/home.html">Home</a></li>
<li class="philosophy"><a href="bwd
live/css/philosophy.html">Philosophy</a></li>
<li class="windows_doors"><a href="#">Windows
& Doors</a></li>
<li class="pinkladies_carpentry"><a href="bwd
live/css/pinkladies.html">Pinkladies
Carpentry</a></li>
<li class="catalog"><a href="bwd
live/css/catalog.html">Catalog</a></li>
<li class="contact"><a href="bwd
live/css/contact.html">Contact</a></li>
</ul>
</body>
</html>

I don't see where you are setting the font-size. The browser
default would be used.
Also, I'd suggest floating the LI element instead of the A
element

Similar Messages

How to make a button stay down when I click on it in CSS nav bar.

So I have created a horizontal navigation bar, I use the CSS
Sprites/Pixy method to get the hover working with the same image as
the link/in active stage of the buttons.
Now how do I make the button stay down when someone click on
them?
These are the codes for the nav bar.
#nav{
width: 780px;
list-style: none;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0;
height: 40px;
#nav li{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
float: left;
padding: 0;
#nav a{
width: 125px;
display: block;
color: #000000;
text-decoration: none;
text-align: center;
background-image: url(ZITTO_IMAGES/button_set1a.jpg);
background-repeat: no-repeat;
background-position: center 2px;
padding-top: 14px;
padding-bottom: 10px;
background-color: #000000;
#link2,#link3,#link4,#link5,#link5,#link6 { margin-left:
6px;}
#nav a:hover{
background-image: url(ZITTO_IMAGES/button_set1a.jpg);
background-repeat: no-repeat;
background-position: center -36px;
color: #FFFFFF;
width: 125px;
padding-top: 14px;
padding-bottom: 10px;
background-color: #000000;
Everything works so far, the hover works when you roll the
mouse but when you click the button goes right back.
How can I make it stay down and then go back to normal when
you click on another link/button?
Thanks very much.
Patrick

Read my suggestion again. You are missing a critical point. I
show you
exactly where to put the stylesheet. And it doesn't matter
how many
stylesheets you have on a page.
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
==================
"Webethics" <[email protected]> wrote in
message
news:[email protected]...
>
quote:
Originally posted by:
Newsgroup User
> Change this -
>
> #nav a{
> width: 125px;
> display: block;
> color: #000000;
> text-decoration: none;
> text-align: center;
> background-image: url(ZITTO_IMAGES/button_set1a.jpg);
> background-repeat: no-repeat;
> background-position: center 2px;
> padding-top: 14px;
> padding-bottom: 10px;
> background-color: #000000;
> }
>
> #link2,#link3,#link4,#link5,#link5,#link6 { margin-left:
6px;}
>
>
> #nav a:hover{
> background-image: url(ZITTO_IMAGES/button_set1a.jpg);
> background-repeat: no-repeat;
> background-position: center -36px;
> color: #FFFFFF;
> width: 125px;
> padding-top: 14px;
> padding-bottom: 10px;
> background-color: #000000;
> }
>
> to this -
>
> #nav a{
> width: 125px;
> display: block;
> color: #000000;
> text-decoration: none;
> text-align: center;
> background-image: url(ZITTO_IMAGES/button_set1a.jpg);
> background-repeat: no-repeat;
> background-position: center 2px;
> padding-top: 14px;
> padding-bottom: 10px;
> background-color: #000000;
> }
>
> #link2,#link3,#link4,#link5,#link5,#link6 { margin-left:
6px;}
>
>
> #nav a:hover{
> background-position: center -36px;
> color: #FFFFFF;
> }
>
> Then on each individual page, change this -
>
> </head>
>
> to this -
>
> <style type="text/css">
> #nav a#link4 {
> background-position:center - 36px;
> }
> </style>
> </head>
>
> (for link4, for example)
>
>
> --
> 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
> ==================
>
>
> "Webethics" <[email protected]> wrote
in message
> news:[email protected]...
> >
quote:
Originally posted by:
Newsgroup User
> > When they click on a button, do they go to another
page? And is each
> > button
> > uniquely identified?
> >
> > If so, then put a little stylesheet on each such
page that sets the
> > particular button to the down sprite settings,
e.g.,
> >
> > a#link6 { downspritevalues }
> >
> > --
> > Murray --- ICQ 71997575
> > Adobe Community Expert
> >
> >
> > This is the link to the page.
> >
http://www.patrickjudson.com/zitto_web1d.html
> > What state do I use to get this effect? The active
or the visited?
> >
> > I want the buttons to remain down when click or
even better, how do I
> > get
> > the
> > welcome button to appear down when a person visits
the page to show them
> > they
> > are at the home page.
> >
> > Thanks so much. Patrick
> >
> >
> >
>
>
>
> Hey! Murray, thanks very much for the efforts. However
I'm still confused
> as
> to where to insert the individual styles on each page.
>
> The pages already have a style sheet, in fact they all
share the same
> style
> sheet. The following codes below is what you instructed
but I'm confused
> as to
> where to insert them since the page already has a head
opening and closing
> as
> well as a style opening and closing tags. Can you please
add the codes you
> instructed so I can see where they go and how to
implement them?
>
> Thanks - Patrick
>
>
> Then on each individual page, change this -
>
> </head>
>
> to this -
>
> <style type="text/css">
> #nav a#link4 {
> background-position:center - 36px;
> }
> </style>
> </head>
>
> (for link4, for example)
>
>
>
>

Css nav problum

Hi
Im trying to style a css nav but having problums getting the gaps between the links
I have a 600px and have some links with one word and some with two. The isue I have is I cant not seam to get the links to fit and have the same space between each link. I have 8 Links. Please see danielwaddon.com/design/
The css I have is
#nav {
float: right;
color: FFF;
width: 600px;
ul {
list-style-type:none;
margin:0;
padding:0;
li {
display:inline;
float:left;
a {
display:block;
width:75px;
color: #FFF;
text-decoration: none;
font-size: 12px;
text-align: center;
#nav ul li a:hover {
color: #ff6600;
Any help would be great

Try the following code in a new, blank document. Tweak values to "fit" your requirements.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Document</title>
<style>
    /**fixes the box model in HTML5**/
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
nav {
    margin: 0;
    padding: 0;
    float: right;
    background: #444;
    width: 600px;
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
nav li {
    margin: 0;
    padding: 0;
    display: inline;
    float: left;
/**Link Styles**/
nav li a {
    display: block;
    color: #FFF;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    width: 5.90em; /**adjust same width for all or use auto**/
    padding: 6px; /**space around links**/
    margin: 2px; /**space between links**/
    border: 1px solid #ff6600; /*optional border*/
nav li a:hover, nav li a:active, nav li a:focus {
    color: #ff6600;
    background: #000;
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2 with more text</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5 with more text</a></li>
<li><a href="#">Menu6</a></li>
<li><a href="#">Menu7</a></li>
<li><a href="#">Menu8</a></li>
</ul>
</nav>
</body>
</html>
Nancy O.

Simple java archive type deployment is invalid in Jdeveloper 9031

Hi All,
If I choose a Simple Java archive type of deployment of a jsp tag lib project in Jdeveloper the archive does not include the directory layout recursively. Ex. I get this.
c:\> jar tvf test.jar
64 Sat Jan 01 23:53:48 PST 2000 META-INF/MANIFEST.MF
1300 Sat Jan 01 23:53:48 PST 2000 META-INF/autodate.tld
5772 Sat Jan 01 23:53:48 PST 2000 test/autodate.class
Where if I do it the archiving from the comman line. i.e
c:\> jar cvf test.jar META-INF test
I get
0 Wed Feb 26 20:52:42 PST 2003 META-INF/
68 Wed Feb 26 20:52:42 PST 2003 META-INF/MANIFEST.MF
1300 Wed Feb 26 20:12:42 PST 2003 META-INF/autodate.tld
0 Wed Feb 26 20:12:42 PST 2003 test/
5772 Wed Feb 26 20:12:42 PST 2003 test/autodate.class
The latter is a valid archive that I can use for taglib deployment. The former, i.e the Jdev deployed archive does not work. The jsp does not find the tag library.
What is the archiving tool that jdeveloper uses??
Why is it different from doing a command line archive??
Is there anyway I can instruct the deployment tool to include the directory tree in the archive??
- Manish

Hi Lynn,
The Archive looks exactly the same and the jsp fails to find the tld from the classpath.
64 Fri Apr 04 13:53:48 PST 2000 META-INF/MANIFEST.MF
1300 Fri Apr 04 13:36:48 PST 2000 META-INF/autodate.tld
5772 Fri Apr 04 13:42:48 PST 2000 test/autodate.class
Note, this is a problem only when using the Tag lib autodiscovery mechanism of JSP 1.2 where the tld can exist anywhere in the classpath under META-INF and the path is not explicitly specified in the jsp.
- Manish
- Manish

Can anyone provide a simple css file for Apex Application

Hi,
Can anyone provide a simple css file for Apex Application please don't mention W3schools link to learn...
Regards,
Pavan

in each item have ..HTML Form Element CSS Classes .e.g style="color:red", you can change whatever you want!
or using CSS at page header level.
check the page: http://apex.oracle.com/pls/otn/f?p=25110:3:0:::::
more css and JS file in Google drive(If my application/js/css breaks your computer, your database, your car's transmission anything it's your fault not mine, I have nothing to do with it and will deny all responsibility.)

Dynamic Discover - Nav Types

I've created a new DLL for my custom navigation type and placed it into Dynamic Discovery.
During the page load, I can see in PT Spy that the DLL was loaded. However, when I go to the subportal manager, I can't choose my new nav type. Any ideas on what I might be missing?
Is there someplace where you can speciify how many nav types to load on the nav types manager page?

Did you add a new constant to com.plumtree.portalpages.common.uiparts.NavTypeConstants or otherwise give your navigation a unique ID and name? The INavTypes.GetID method and INavTypes.GetName method must return a unique ID and name, respectively.
Hope this helps,
Chris Bucchere | bdg | [email protected]| www.bucchere.com

Type scaling problems

I can't seem to get type scaling to work consistently in Indesign CS5. It wasn't a problem in CS4 and I'm not sure if this a setting problem or a bug. There is nothing I can do to get this copy to render properly when scaled:
http://dl.dropbox.com/u/7990437/IDCS5_FONTSCALING.mov
Any idea what the problem is?

I'm not able to repoduce the behavior. Have you tried trashing your prefs?

Simple CSS Layout Test - Gap in IE

Hey Gang,
I'm takig the first steps away from Table based layouts into
CSS Fluid
layouts.
I put together a quick and simple layout.
There is a 2-3 pixel gap between the Left Column and Main
Content Column in
IE 6 and 7 (It's fine in Firefox).
Would someone mind taking a peek and suggesting what I may be
missing or
could do better?
Thanks
-Dave
<style type="text/css">

</style>
<div id="Container">
<div id="header">Header</div>
<div id="Leftnav">Left</div>
<div id="content">content</div>
<div id="footer">Footer</div>
</div>

I've been following the other thread IE Float bug as well.
I think the challenge that comes up with using the -3 on the
floated div's
right margin, is you will then get overlap/underlap in
Firefox and other
non-IE browsers.
In my code example below, the word "Content" in that div tag
will now
over/underlap into the red sidebar div(with a -3 on the
sidbar div)
This would normally have been a great time to use the old IE
* hack, but IE7
defeats that now.
It's almost that we'd need to use a style for IE (with -3),
and a different
style for everything else.
Does the @Import trick still work with IE7?
If not, then it's down to javascript browser detection, and I
guess changing
the ID of the Div tag to call either a normal style or an IE
friendly style.
If this is all true, what a p.i.t.a :>
"BW" <[email protected]> wrote in message
news:[email protected]...
> I'm a newbie so don't take my word as Gospel, but I
believe it is due to
> the IE bug and floats. IE adds 3px to the right of a div
that is floated
> left.
>
> Do a search for 3px jog. One search results suggests
adding
> margin-right: -3px; to your left div.
>
> This seems to work, but I do not know what that does to
other browsers.
>
> One of the guru's on here will give you the correct
reasons and answers
>
> BW
>
> "Dave Bar" <[email protected]> wrote in message
> news:[email protected]...
>> Hey Gang,
>>
>> I'm takig the first steps away from Table based
layouts into CSS Fluid
>> layouts.
>>
>> I put together a quick and simple layout.
>> There is a 2-3 pixel gap between the Left Column and
Main Content Column
>> in IE 6 and 7 (It's fine in Firefox).
>>
>> Would someone mind taking a peek and suggesting what
I may be missing or
>> could do better?
>> Thanks
>> -Dave
>>
>> <style type="text/css">
>> 
>> </style>
>>
>> <div id="Container">
>> <div id="header">Header</div>
>> <div id="Leftnav">Left</div>
>> <div id="content">content</div>
>> <div id="footer">Footer</div>
>> </div>
>>
>
>

CSS nav ideas

Hi
Spent an hour or so trying to work out how to create this top
nav using DIVs, Spans, Lists, CSS but finally relented and stuck it
in a table instead. Can any tell me how I could have gone about it?
I could get the basic feel but couldn't get the images and wording
links to centre.
http://www.flawlesslandscapes.com/index2.php
by the way, this is just a test site at the minute. Hasn't
been officially launched.
Thanks in advance
Martin

Here's one way
A little messy but here ya go:
/* styles */
li {
float:left;
list-style-type: none;
.buttonOne a{
margin: 0 10px 0 0;
width:100px;
padding:50px 0 0 0;
text-align:center;
display:block;
background-image: url(Experiments/small_turquiose.gif);
background-repeat: no-repeat;
background-position: center top;
.buttonOne a:hover{
background-image: url(Experiments/small_yellow.gif);
.buttonTwo a{
margin: 0 10px 0 0;
width:100px;
padding:50px 0 0 0;
text-align:center;
display:block;
background-image: url(Experiments/small_yellow.gif);
background-repeat: no-repeat;
background-position: center top;
.buttonTwo a:hover{
background-image: url(Experiments/small_turquiose.gif);

<ul>
<li class="buttonOne"><a
href="#">Link</a></li>
<li class="buttonTwo"><a
href="#">Link</a></li>
</ul>
Shane

Simple CSS isn't so simple

This should be simple but is not working. I have created a
CSS style sheet and have saved it within the directory of the
website I am working on. I have created my index page and have
saved it. I attach the CSS style sheet and yet the font is not
consistent with the style sheet which is set up to use Arial, but
instead is remaining as times roman.

This is an entire page (code below) created from the
maintemplate. It's a mess because it is not accepting the ccs rules
applied to the template from which it was made. and Nope.... I
cannot change the document title in the box... it just flips back
to 'untitled document'. Regarding pages (created from the main
template) but that do not showing any of the formating based on the
ccs, if I link each and every page I make to the ccs then the ccs
formating is properly applied to the page. But I cannot make any
new page created from the template grab the ccs embedded in the
template itself. And, as the other form member stated in the past,
if I do link the ccs to each an every page (which seems to be
necessary), the new page displays (in the right panel) that css has
been applied twice.
(Note: Any off site links in the content below are place
holders only, as I am rebuilding the site currently on-line.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<link href="mainstyle.css" rel="stylesheet"
type="text/css" />



</head>
<body>
<p align="center"> </p>
<table width="85%" border="0" align="center"
cellpadding="0" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td> <p align="center"><a
href="HorsesForSaleMain.html">Horses For Sale</a> ~ <a
href="CowboyHumor.html">Cowboy Humor</a> ~ <a
href="HorseLinks.html">Horse Links</a> ~ <a
href="Articles.html">Horse Articles &
Information</a> ~<a href="/Stallions.html">
STALLIONS</a></p>
</td>
</tr>
</table>
<br />
<table width="85%" border="0" align="center"
cellpadding="0" cellspacing="1">
<tr>
<td bgcolor="#FFFFFF"><p> </p>
<table width="90%" height="24" border="0" align="center"
cellpadding="0" cellspacing="1">
<tr>
<td width="20%" valign="top"><p
align="center"><strong>Horses for Sale</strong>
<br />
</p>
<p><img src="images/Charger1.jpg" alt="charger"
width="144" height="96" /><br />
<strong>Charger</strong></p>
<p><img src="images/FoxyComanche.jpg"
alt="foxycomanche" width="144" height="119" /><br />
<strong>FoxyComanche</strong></p>
<p><img src="images/tony1.jpg" alt="tony"
width="144" height="126" /><br />
<strong>Tony</strong></p>
<p>Young stock, prospects and broodmares .... coming
soon</p>
<h2 align="center">Breeding Stock</h2>
<p><img src="images/RedFrost (2).jpg"
alt="redfrost" width="144" height="94" /><br />
<strong>Red Frost</strong></p>
<p> </p>
<p> </p>
<p> </p></td>
<td width="1%" bgcolor="#7C754E"> </td>
<td width="2%" valign="top"
bgcolor="#49452E"> </td>
<td width="2%" valign="top"
bgcolor="#F7F7F7"> </td>
<td width="78%" valign="top" bgcolor="#F7F7F7">
<p>Location:</p>
<p>Located near Prince Albert, Saskatchewan - at the
little town of Domremy - we focus on performance pedigree AQHA
lines and "Beduino" with speed, endurance, cow
sense and good looks built-in.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p align="center"> </p>
<p> </p>
</body>
</html>
Text
Text

Confused: Returning Simple User Defined Type (non-built-in)

Hi, hope you can straighten out a confused newbie! This is probably laughingly simple if you know how...
I just want my weblogic workshop web service to return an ordinary record-style object to my static client. I'm not sure what to do, I've already tried a few approaches...
If I use two services deployed on Weblogic Server everything works great. Weblogic server must handle the seriali/deseriali - zation for you.
So I tried to use the java proxy downloaded from the test page, but it doesn't contain all the classes needed.
I read the Weblogic help files which said to use autotype, which compiles but gives class cast exceptions running. I tried both automatic and manual with same error. Trying to import to Workshop gave me a "no handler defined error".
And I bought a book from Amazon about J2EE and Weblogic but it does not include a section on user defined types!
Am I supposed to use XMLBeans or something??? Please help!
Regards, Ry.

> but the requirement is not allowing me to do either with ref cursor or with
returning clause. Because, in .Net development area , we are restricted for
using Returning clause.
The following is a Bad Idea (tm) where PL/SQL is used to "return data" to the caller, be that via PL/SQL record types or collection types..Net   ---[calls]-------> PL/SQL
PL/SQL ---[calls]-------> SQL
PL/SQL <--[data]--------- SQL
PL/SQL [buffers] data
.Net   <--[buffer data]-- PL/SQLWhy?
Because PL/SQL is a poor choice for a buffer as the db cache buffer used by the SQL engine is a very advance and sophisticated cache and core to the Oracle RDBMS.
Ain't no way you can do that better in PL/SQL than SQL.
What is the typical client-server approach in Oracle?.Net   ---[calls]-------> PL/SQL
PL/SQL [constructs ref cursor]
.Net   <--[ref cursor]-- PL/SQL
.Net   --[fetches]----> SQL [using ref cursor]A ref cursor is a pointer the "compiled and executable SQL program" in Oracle that PL/SQL constructed for .Net in this case. Each FETCH call using the ref cursor pointer, executes the cursor "program" and returns the next row (or set of rows when using bulk processing) to the client.

Simple CSS code editing

.Preview_thumbnail_right {
margin-left: 3px;
border: thin solid #168580;
float: right;
.Layout_table {
width: 100%;
height: 100%;
vertical-align: text-top;
.PRimages {
border: 1px solid #168580;
margin: 2px;
padding: 0px;
float: right;
With the Layout Table in my CSS as shown above, I'd like to
add padding to cells - what would I need to type to do this? The
padding setting in the CSS properties box in design view doesn't
seem to change anything

Add the padding to the <td> cells:
.Layout_table td {
padding: 10px;
JamesFryer wrote:
> .Preview_thumbnail_right {
> margin-left: 3px;
> border: thin solid #168580;
> float: right;
> }
> .Layout_table {
> width: 100%;
> height: 100%;
> vertical-align: text-top;
> }
> .PRimages {
> border: 1px solid #168580;
> margin: 2px;
> padding: 0px;
> float: right;
> }
>
>
> With the Layout Table in my CSS as shown above, I'd like
to add padding to
> cells - what would I need to type to do this? The
padding setting in the CSS
> properties box in design view doesn't seem to change
anything
>
> .Preview_thumbnail_right {
> margin-left: 3px;
> border: thin solid #168580;
> float: right;
> }
> .Layout_table {
> width: 100%;
> height: 100%;
> vertical-align: text-top;
> }
> .PRimages {
> border: 1px solid #168580;
> margin: 2px;
> padding: 0px;
> float: right;
> }
>

Simple CSS - Jquery Dropdowwn Menu

Hi, I want to try to build myself a simple jquery dropdown menu instead of trying to customize an existing one.
I also am planning to use a background image with corners and drop shadow. Should I used CSS3 for this? Or stick with images for now?
Does anyone know of a good tutorial on this?
Thanks

I like jQuery SuperFish. It works in all browsers and it's easy to customize with CSS and built-in jQuery functions.
http://users.tpg.com.au/j_birch/plugins/superfish/#examples
I agree with bemdesign about progressive enhancements. CSS box-shadows and border-radius properties are supported in almost all modern browsers. These days, there are very few compelling reasons to use images when you don't have to. A menu's primary purpose is to function well in all browsers. How it looks in x-browser is secondary.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Dreamweaver hates my css media type

quote:
<style type="text/css" media="screen">
@import "/stylesheets/layout.css"; /* Hide from NN4 */
</style>
<link href="/stylesheets/print.css" rel="stylesheet"
type="text/css" media="print" />
Does not display in Dreamweaver (Rending Mode is set to
Screen), but works in every browser and validates.
Dreamweaver reacts better to invalid code:
quote:
<style type="text/css" media="screen,print">
@import "/stylesheets/layout.css"; /* Hide from NN4 */
</style>
My only idea is that it sees the invalid media type and
assumes a media="all". What does Dreamweaver want? I also tried not
using the @import method and using <link> tags for both
screen and print. Anyone have any experience w/ this?
Thanks
Brandon

So it does (or doesn't) -
W3C CSS Validator Results for
http://murraytestsite.com/css-test.html
To work as intended, your CSS style sheet needs a correct
document parse
tree. This means you should use valid HTML.
Errors
URI :
http://murraytestsite.com/css-test.html
a.. Line: -1
unrecognized media print,screen
Interesting that Eric Meyer says this (and only this) -
@import url(...) <media>;
where media is "A comma separated list of target media. This
portion of the
rule is optional."
and he further gives this as an example (of the @media
syntax) -
@media screen,print {
* { line-height: 1.25; }
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
==================
"BrandonMUS" <[email protected]> wrote in
message
news:e9m0or$jrt$[email protected]..
> While technically the CSS2 Spec doesn't say it exactly,
your CSS will not
> validate if you don't put a space after the commas. The
examples in the
> CSS2 Spec hint at this.

Simple CSS

I'm having a bit of a problem with what I know is some basic
CSS.
Basically, the "provided-by" <div> is ending up
*inside* the
"main-content" <div>. I want it to show up just outside
and below the
"main-content" <div>. Any idea why it's showing up
inside of it?
Thank you!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
body {
margin: 0px;
padding: 0px;
background-color: #ffffff;
div#main-content, div#provided-by {
margin: 0px auto;
width: 400px;
div#main-content {
position: relative;
top: 150px;
height: 250px;
background-color: #ffd60d;
border: 3px solid black;
div#main-content div#logo {
text-align: center;
border: 1px solid black;
div#main-content div#logo span.title {
font-family: Arial, Helvetica, sans-serif;
font-size: 2.5em;
font-style: italic;
font-weight: bold;
letter-spacing: 4px;
div#main-content div#logo span.byline {
font-weight: bold;
font-size: 1.5em;
letter-spacing: 3px;
div#main-content div#error {
position: relative;
top: 50px;
margin: 0px auto;
width: 325px;
border: 1px solid black;
text-align: center;
background-color: #FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
line-height: 1.5;
div#main-content form {
margin: 0px;
padding: 0px;
width: 300px;
margin: 0px auto;
position: relative;
top: 50px;
text-align: center;
div#provided-by {
position: relative;
top: 0px;
text-align: right;
font-size: .75em;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid black;
</style>
</head>
<body>
<div id="main-content">
<div id="logo">
<span class="title">Hello Title</span><br
/>
<span class="byline">This is the byline</span>
</div>
</div>
<div id="provided-by">
This jump-page provided by: Activa Travel, LLC
</div>
</body>
</html>

I figured it out. Apparently my grasp of how the "relative"
positioning
worked isn't as great as I thought. Seems weird that if I
move an
element down 250px, that the next element would be forced to
move down
with it. Apparently that's not the case. The second element
stays
where it was.
Gabe wrote:
> I'm having a bit of a problem with what I know is some
basic CSS.
> Basically, the "provided-by" <div> is ending up
*inside* the
> "main-content" <div>. I want it to show up just
outside and below the
> "main-content" <div>. Any idea why it's showing up
inside of it?
>
> Thank you!
>
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
> <title>Untitled Document</title>
>
> <style type="text/css" media="screen">
> body {
> margin: 0px;
> padding: 0px;
> background-color: #ffffff;
> }
> div#main-content, div#provided-by {
> margin: 0px auto;
> width: 400px;
> }
> div#main-content {
> position: relative;
> top: 150px;
> height: 250px;
> background-color: #ffd60d;
> border: 3px solid black;
> }
> div#main-content div#logo {
> text-align: center;
> border: 1px solid black;
> }
> div#main-content div#logo span.title {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 2.5em;
> font-style: italic;
> font-weight: bold;
> letter-spacing: 4px;
> }
> div#main-content div#logo span.byline {
> font-weight: bold;
> font-size: 1.5em;
> letter-spacing: 3px;
> }
> div#main-content div#error {
> position: relative;
> top: 50px;
> margin: 0px auto;
> width: 325px;
> border: 1px solid black;
> text-align: center;
> background-color: #FFFFFF;
> font-family:Verdana, Arial, Helvetica, sans-serif;
> font-weight: bold;
> line-height: 1.5;
> }
> div#main-content form {
> margin: 0px;
> padding: 0px;
> width: 300px;
> margin: 0px auto;
> position: relative;
> top: 50px;
> text-align: center;
> }
> div#provided-by {
> position: relative;
> top: 0px;
> text-align: right;
> font-size: .75em;
> font-family: Arial, Helvetica, sans-serif;
> border: 1px solid black;
> }
> </style>
> </head>
>
> <body>
>
> <div id="main-content">
> <div id="logo">
> <span class="title">Hello Title</span><br
/>
> <span class="byline">This is the
byline</span>
> </div>
> </div>
> <div id="provided-by">
> This jump-page provided by: Activa Travel, LLC
> </div>
>
> </body>
> </html>

Simple css nav type scaling

Similar Messages

Maybe you are looking for