Help with my css alignment

Hello, Can someone take a look at the css for the homepage of
a site I'm working on and give some advice on why myjboxes aren't
lining up properly. It looks fine in Firefox, but seems to break up
in Explorer.
Here's the site:
www.itfweb.com/kdhrc
I've been struggling with this for days and would appreciate
any help.
Thanks,
michelle

I have some ideas for you. Normally when divs stagger like
that its because they are overlapping by a pixel or so. Try adding
overflow: hidden; to your css for #content_home_quote. You might
also want to try making quote.gif a few less pixels wide.
PS I like your use of colors

Similar Messages

Background image seems to be applied twice Can someone help with this CSS issue....

Can someone help with this CSS issue....
http://66.162.81.144/cms400min/default.aspx
If you view the main page you will see that our background is
2 shades of
orange.. if you look at the line that divides those colors to
the right and
left you wil notice that the line is higher
if you notice that it seems that there is another background
on top of the
first one..its the only thing i can think of..
the only place where the image is being referenced is in this
CSS style
html, body
min-height:100%;
margin-bottom:1px;
text-align:center;
background-repeat:no-repeat;
background-image:url(images/Background-Color2.jpg);
background-color:#F74902;
background-position:center;
background-attachment:fixed;
Is there something wrong with the above CSS that could or
would cause this?
is it because im applying the image to both the HTML and
BODY?
ASP, SQL2005, DW8 VBScript, Visual Studio 2005, Visual Studio
2008

You've attached the background to both the html and the body.
I would do this:
html, body {
min-height:100%;
margin-bottom:1px;
body{
text-align:center;
background-repeat:no-repeat;
background-image:url(images/Background-Color2.jpg);
background-color:#F74902;
background-position:center;
background-attachment:fixed;
Having said that the image doesn't look any higher on the
right than the
left to me in Firefox. Is it just an optical illusion?
Daniel wrote:
> Can someone help with this CSS issue....
>
>
http://66.162.81.144/cms400min/default.aspx
>
> If you view the main page you will see that our
background is 2 shades of
> orange.. if you look at the line that divides those
colors to the right and
> left you wil notice that the line is higher
>
> if you notice that it seems that there is another
background on top of the
> first one..its the only thing i can think of..
>
> the only place where the image is being referenced is in
this CSS style
>
> html, body
>
> {
>
> min-height:100%;
>
> margin-bottom:1px;
>
> text-align:center;
>
> background-repeat:no-repeat;
>
> background-image:url(images/Background-Color2.jpg);
>
> background-color:#F74902;
>
> background-position:center;
>
> background-attachment:fixed;
>
>
> }
>
> Is there something wrong with the above CSS that could
or would cause this?
> is it because im applying the image to both the HTML and
BODY?
>

Help with my css

Right I making a site this one>
http://sheepskinshoestore.com/Library/Test/tesa.html
< And I'm using CSS to make it with. This is the home page. But
I need to have a content area its gonna sit where all the links in
the "top box" are, they have links to UGG EMU Koolaburra etc theres
lots of logos there. What I cant figure out is how to make a
template that will have everything on the outside stay in position
and push down the area under the "top box". When someone clicks on
a link. Because when they do they will be shown a lot more
information than can be contained in that small "top box". For
example This is another one of our site using the old method
"columns" >
https://sheepskinshoes.com/ecom/SearchResults.php?keywords=ugg+boots&Search.x=0&Search.y= 0
< as you can see the content is drop into the center of the page
and the template on the right has a repeating image that follows
down to the bottom. Kind of what I want. I just need the
information under the "top box" to be pushed all the way down and
have some sort of repeating image for the side of the box.
Can any one help? I'm new to CSS but I need to learn how this
is done because theres no point looking at the past.
Thanks for you time!

I have some ideas for you. Normally when divs stagger like
that its because they are overlapping by a pixel or so. Try adding
overflow: hidden; to your css for #content_home_quote. You might
also want to try making quote.gif a few less pixels wide.
PS I like your use of colors

Can you please help with Fancybox CSS?

Hello. Someone helped me a while back on creating fancybox boxes that generate pop out boxes with more content in them by clicking on them. Here is what they look like. I deleted a lot of the other content because it would just much everthing up. http://www.bestmarketingnames.com/default.php
Now that I've kind of figured it out I want to make changes to the CSS for these fancyboxes. For instance, I want to lower the margins on the top and bottom of these boxes. Anyway. When I try to edit the jquery.fancybox.css it says that they are "a remote files and can not be edited". So i downloaded the fancybox fancyapps program that gives me the coding but I have NO idea what to do now. I saved the default jquery.fancybox.css files into dreamweaver but im not sure if it's in the right place.
So what I am saying is that I need to change the sizing in the fancybox boxes in this link, but have no idea how to do it. Can someone please help?
http://www.bestmarketingnames.com/default.php

Hey Nancy so everything seems to be working out until I hit another problem. So the website is basically set up but now when you click on the "Read More" and the fancy box pops out, it shifts the entire website to the right about 200px or so. The only browser where it doesn't do this is google chrome. I have no idea why this is happening. Do you have any suggestions on how to solve it? Here is the link...http://www.bestmarketingnames.com/default.php
Thank you so much! I will out of your hair soon!

Help with rollover CSS

At
http://www.bbsjazzbluessoups.com,
the text links along the bottom and along the right side aren't the
color I wanted. I want the 'off' state to be #0099FF. Please help
me achieve this

On Wed, 5 Mar 2008 04:47:13 +0000 (UTC), "Bushido"
<[email protected]> wrote:
>Thanks Tim. I've looked at p7pm/p7pmv0.css, yet don't see
the code snippet you reference -
I think Tim is mistaken. He may have seen that snippet in a
<style>
block in the error page for the missing style sheet:
http://www.bbsjazzbluessoups.com/Templates/p7pm/p7pmv0.css
One guess about it is that you should *never* put any files
in the
Templates folder except for the actual .dwt templates.
However, I'm not sure what's causing your IE issue. The code
in the page
is a bit of a maze of nested tables littered liberally with
font tags
and I don't have the time to dig into all of it right now.
That said,
you have an incomplete doctype in the page, so IE will render
it in
quirks mode, meaning it will render all the old bugs of prior
versions.
You'll get much more reliable rendering if the page is
rendered in
standards compliance mode. To accomplish that, change this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
To this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
That *may* help.
Gary

Need help with a decimal align tab script for CS5

I have a list that consists of 6 tabbed headers in helvetica bold, followed by a list of numbers that should right align under the headers, and these need to be in helvetica regular. The list is currently in arial font. Is it possible to change both the fonts and set the tabs to align right by using a script? If so, is there one 'out there' somewhere? I am desperate, this is for my daughter's basketball team and they need it asap!
I am working in indesign cs5 and know how to load and run a script.
Please HELP!
Thank you
Heather

Hi,
For some reason I can not download any attached documents from the forums, a bug?
But anyway, send me an e-mail at "mail (curlya) nobrainer.dk" with the example doc, and i will have a look - no promisses :-)
Thomas B. Nielsen
http://www.nobrainer.dk

Help with basic CSS positioning

I am learning the rudiments of CSS positioning - I have gone
through the good Macromedia docs and even bought a book which is
useful (HTML Utopia). I am now applying some concepts to my first
site.
Oh how I thought I knew how to apply theory.
The sily thing is I am stuck on a very basic stage. And I
just cant figure out the solution. This is my problem.
I want to centre my site on the page so I created a #wrapper
<div> which works fine
Then, I wanted to position two <div> 'boxes', each
containing a logo within this wrapper, next to each other, left to
right, with a small margin imbetween them.
The first box on the left aligns fine, relatively positioned
to the wrapper. Great.
However, the next box 'jumps' down to the next line, even
though there is space within the wrapper element for it. I assumed
as <div> tag elements 'flow' after each other, it would
continue right. But no, it flows onto the next line, a bit like
this
image 1
image 2
I was after
image 1 image 2
What am I doing wrong. Im sure Im missing the obvious. Should
I be floating at this stage?
Forgive me - Im grasping the concepts here
Heres the code:
CSS
#master_wrapper {
width: 760px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
position: relative;
#logo_box {
width: 145px;
height: 120px;
position: relative;
#banner_box {
width: 580px;
height: 120px;
margin-top: 0;
margin-left: 25px;
position: relative;
HTML
<body>
<div id="master_wrapper">
<div id="logo_box"><img
src="website_graphics/index_page/logo.jpg" alt="Logo" width="145"
height="120" />
</div>
<div id="banner_box"><img
src="website_graphics/index_page/banner_cityscape.jpg" alt="Banner"
width="580" height="120"/>
</div>
</body>
If you are feeling especially kind, could you let me know the
correct code to position a further 2 boxes which sit under the logo
and the banner respectively
Yours, cap in hand
Chris

> The first box on the left aligns fine, relatively
positioned to the
> wrapper.
> Great.
Remove the relative positioning. You don't need it. Now,
float that box
left.
> However, the next box 'jumps' down to the next line,
even though there is
> space within the wrapper element for it. I assumed as
<div> tag elements
> 'flow'
> after each other, it would continue right. But no, it
flows onto the next
> line,
> a bit like this
Div tags are block tags - that means that unless told not to,
the occupy the
entire line within their container, thus forcing them to a
new line, and all
adjacent content above and below.
Remove the position:relative from all your divs, and just
make the first two
float left.
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
==================
"socks_" <[email protected]> wrote in
message
news:[email protected]...
>I am learning the rudiments of CSS positioning - I have
gone through the
>good
> Macromedia docs and even bought a book which is useful
(HTML Utopia). I am
> now
> applying some concepts to my first site.
>
> Oh how I thought I knew how to apply theory.
>
> The sily thing is I am stuck on a very basic stage. And
I just cant figure
> out
> the solution. This is my problem.
>
> I want to centre my site on the page so I created a
#wrapper <div> which
> works
> fine
>
> Then, I wanted to position two <div> 'boxes', each
containing a logo
> within
> this wrapper, next to each other, left to right, with a
small margin
> imbetween
> them.
>
> The first box on the left aligns fine, relatively
positioned to the
> wrapper.
> Great.
>
> However, the next box 'jumps' down to the next line,
even though there is
> space within the wrapper element for it. I assumed as
<div> tag elements
> 'flow'
> after each other, it would continue right. But no, it
flows onto the next
> line,
> a bit like this
>
> image 1
> image 2
>
> I was after
>
> image 1 image 2
>
> What am I doing wrong. Im sure Im missing the obvious.
Should I be
> floating at
> this stage?
>
> Forgive me - Im grasping the concepts here
>
> Heres the code:
>
> CSS
> #master_wrapper {
> width: 760px;
> margin-top: 0px;
> margin-bottom: 0px;
> margin-right: auto;
> margin-left: auto;
> position: relative;
> }
>
> #logo_box {
> width: 145px;
> height: 120px;
> position: relative;
> }
>
> #banner_box {
> width: 580px;
> height: 120px;
> margin-top: 0;
> margin-left: 25px;
> position: relative;
> }
>
>
> HTML
>
> <body>
> <div id="master_wrapper">
>
> <div id="logo_box"><img
src="website_graphics/index_page/logo.jpg"
> alt="Logo"
> width="145" height="120" />
> </div>
>
> <div id="banner_box"><img
> src="website_graphics/index_page/banner_cityscape.jpg"
alt="Banner"
> width="580"
> height="120"/>
> </div>
> </body>
>
> If you are feeling especially kind, could you let me
know the correct code
> to
> position a further 2 boxes which sit under the logo and
the banner
> respectively
>
> Yours, cap in hand
>
> Chris
>

Ack! need help with a CSS layout

I've been struggling to layout a Dreamweaver template that
does the following:
You can see the files here:
http://northfloridahealthcorps.org/Oct5/index.html
First, I know there's way to much CSS going on here. I'm
newer to CSS and there's a lot of code detritus that's probably
compounding my problems. My apologies. I don't know if you need to
anywise my code, I just want CSS that will solve the problem. Any
suggestions that will help me set up a page that will do the
following will be greatly appreciated.
The layout:
A centered 2 and 3 column layout with fixed width columns a
footer and a header.
I want to page to fill the browser in IE6 and 7, etc.
regardless of the quantity of content.
The footer needs to stay at the bottom; more content pushes
the footer below the viewport but the footer's at the bottom even
if the page has no text.
There's a background image in the wrapper/container that
helps delineate the columns. This needs to stretch vertically too.
I've read a lot on Divs that stretch but sill can't see to
figure out what I'm doing wrong. I have struggled and struggled
this and I'm going nuts! Some CSS settings work for IE7 allowing
the page to stretch but it doesn't work in IE6 or vice versa (and I
can't get the footer to work!). What am I doing wrong?
Thank's Thank's Thank's Thank's Thank's!
Greg

go here for a tutorial on keeping footers at the bottom of
the page
Text

I need Help with Some CSS

I am in the process of making a new template for my site.
I can't really provide any code and here's why, I need help finding the code that I need to change. The new template is actually being designed here.
If you scroll over the home link you will find a sub-menu pops up, if you scroll over the menu items they get bigger and come 'at" you, if you hover over sub-2 and then hover over sub-3 you will notice there is a wild transition effect, I need to know how to get rid of those, it is a different CSS code from another template link to my site. I can't find out how, if somebody could please help me out it would be wonderful. Thank you a whole bunch in advance.

Your menu moves for a couple of reasons first, you have a border in the hover, which is going to move all of the text. You can get rid of the border in the hover or add a border of the same size/style in the active.
The second reason it appears you have some paddng in the hover that moves the text.
Find those and you can solve the issue.
Gary

Help with 2 CSS/JAVA Questions

Hey guys,
I have recently started getting into Dreamweaver CS3 but i
have a couple of questions and was wondering if anyone could help
me out. I want to know how (or if some one could send me a
tutorial) on how to Create a form on a webpage using Dreamwaver in
which when the user fills it out and presses submit it will email
me with the information he has entered. I would also like to know
how to make it so when your mouse hovers over a picture it blows up
and has a bigger image on the screen.
Any help would be appreciated, Alex.

> email me with the information he has entered
There are only two ways to process form data -
1. Use mailto:[email protected] as the action of the form
2. Use a server-side scripting method to a) harvest the
form's data, b)
process it in some manner, e.g., enter it into a database, c)
formulate and
send an email to one or more email recipients, and d)
redirect the visitor
to some ending page
Method 1 is quite simple, and is also the least reliable. It
depends both
on your visitor having an email client already installed on
their computer -
this eliminates public computers, or home users without email
clients
installed (more and more it seems) - and on the installed
email client
responding to
the mailto call. It is not possible to use this method *and*
send the
visitor to a
thank you page as well.
Method 2a is the preferred method, since it eliminates the
problems of
method
1, but it means that you have to grapple with
server-scripting somehow (ASP,
CF, PHP, perl, etc.).
Method 2b would be to use some third-party form processing,
like
http://www.bebosoft.com/products/formstogo/.
You would have to decide which of these methods is best for
your needs,
but if it's Method 2a, then start by asking your host what
they provide for
form
processing. If it's 2b, then read their FAQ/instructions
carefully.
> I would also like to know how to
> make it so when your mouse hovers over a picture it
blows up and has a
> bigger
> image on the screen.
Google "JQuery" or do a disjoint rollover (Google that, too).
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
==================
"Cryraxz" <[email protected]> wrote in
message
news:[email protected]...
> Hey guys,
>
> I have recently started getting into Dreamweaver CS3 but
i have a couple
> of
> questions and was wondering if anyone could help me out.
I want to know
> how (or
> if some one could send me a tutorial) on how to Create a
form on a webpage
> using Dreamwaver in which when the user fills it out and
presses submit it
> will
> email me with the information he has entered. I would
also like to know
> how to
> make it so when your mouse hovers over a picture it
blows up and has a
> bigger
> image on the screen.
>
> Any help would be appreciated, Alex.
>

Dark theme in Linux screws up Firefox 4.0, help with userContent.css file

OS: Fedora 14 x86_64 / Gnome 2.3x
Problem with: Firefox 4.0
Using dark gtk themes changes the background color of common form controls (input boxes, text boxes, radio buttons, etc...) into the same dark color used in the theme, so you end up with dark controls with black text, which makes them unreadable.
While searching I found that there's a way to make Firefox override the system colors, and that is by creating a userContent.cs file.
Here's the userContent.css file:
===========================
body {
background-attachment: scroll !important;
input {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
textarea {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
select {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
input[type="radio"],
input[type="checkbox"] {
border: 2px inset white ! important;
background-color: white ! important;
color: ThreeDFace ! important;
-moz-appearance: none !important;
.*|*::-moz-radio {
background-color: white;
-moz-appearance: none !important;
button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
border: 2px outset white;
background-color: #eeeeee;
color: black;
-moz-appearance: none !important;
body {
background-color: white;
color: black;
display: block;
margin: 8px;
-moz-appearance: none !important;
===========================
This css code fixes text boxes, input boxes, etc... but I still have dark radio buttons, dark check boxes, and dark drop down menus, does anyone know what might be causing this problem?
Examples:
http://i901.photobucket.com/albums/ac211/0xGFX007/001.png
http://i901.photobucket.com/albums/ac211/0xGFX007/002.png

FWIW, an alternative to going back to a light theme for whatever reason: there is a theme with several variations called "Shiki-Colors", in which only half of the stuff is dark.

Help with some CSS layering

So it took me a wile and some playing around to make the page
centered. But I got what I needed. I put every thing inside a
#wrapper to get it centered but I needed some elements to stretch
out, so there width is 100%. And them being inside the #wrapper
stop that. So I took the div's out of the #wrapper and put them
back in after the </wrapper> line. That work great. In
preview. So I upload and to my shock it looks very wrong live. The
layer order is all out of whack. So I played with the z-index to
make sure they were underneath everything they needed to be. And
there was no change. Can some on have a look for me?>
http://winterslippers.com
there are 4 div's outside the #wrapper. You can see them way down
at the bottom of the code.
Thanks all!

>>work's fine in Firefox the problem lies in good old
IE7
Not here. It's a disaster in FF2 & IE6. I don't think
this site can be
fixed. I can't believe the approach taken. The homepage is
not huge it's
humongous. Browser has to be 1300+ pixels wide to see the
entire page and it
doesn't create a horizontal scroll bar. Maybe some of this is
due to the 168
code errors.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwinterslippers.com%2FLibrary%2Fin dex.html
As to size, the page is 1.5MB compared to a preferred target
size of 40KB.
IOW 40 times too big. You're selling consumer products.
Consumers are likely
to be using dial-up. On dial-up this page will take 5+
minutes to load.
Check out
http://www.sitepoint.com/books/.
I think their books are great.
Buy a few, take a few weeks to study & learn and then
start over.
Remember the 1st Rule of Holes: When you find yourself in
one, stop digging.
Sorry...
Walt
"satrop" <[email protected]> wrote in
message
news:f4v5sb$3mp$[email protected]..
>I should say it work's fine in Firefox the problem lies
in good old IE7

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 modifications...

Hi!
Finally got this up online for temporary testing. Here are
the items I'd like to modify...not sure how to tweak the code/css.
1) for starters, the links on the left hand continously move
down when I hit return in order to add more content on the page.
I'd like for everything in the left hand panel to be completely
static, and so the links fit into that transparency block within
the background image. (they are in a table now, before I had them
outside of a table, but I had a difficulty controlling them) When
we correct these to move up, the contact phone #, etc, will move up
where they should be positioned as well.
2) if you click on one of the links, the remainder of the
links all receive the 'visited' state visual; it's reading as one
cohesive element. That should not be, as they are independent.
3) I'm trying to control the "join our mailing list" to move
up into the sign up box, and in turn, this will bring up my main
paragraph closer to the top of this cell.
As you will see, I'm attempting to control this with CSS as
much as I can.
Thank you for your help; I really appreciate it!
www.fasttag.com/prestige-lane-testing-phase

> 1) for starters, the links on the left hand continously
move down when I
> hit
> return in order to add more content on the page. I'd
like for everything
> in the
> left hand panel to be completely static, and so the
links fit into that
> transparency block within the background image. (they
are in a table now,
> before I had them outside of a table, but I had a
difficulty controlling
> them)
> When we correct these to move up, the contact phone #,
etc, will move up
> where
> they should be positioned as well.
They are moving because a) they are in a table that is nested
in a table
cell, b) the table cell in which that table is nested has no
vertical
alignment specified, c) with no vertical alignment specified,
you get the
default, which is MIDDLE, and d) as the outer table grows in
height, the
middle point of the cell in which the navigation table is
nested also
migrates lower.
The solution is to assign the CSS style vertical-align:top to
td.navlinks.
> 2) if you click on one of the links, the remainder of
the links all
> receive
> the 'visited' state visual; it's reading as one cohesive
element. That
> should
> not be, as they are independent.
This is because they are all linking to the same target.
Visit one, and all
become visited.
<tr>
<td><a href="
http://www.fasttag.com">FastTag</a></td>
</tr>
<tr>
<td><a href="
http://www.fasttag.com">Greenlight
Keycard</a></td>
</tr>
<tr>
<td><a href="
http://www.fasttag.com">Pocket
Concierge</a></td>
</tr>
<tr>
<td><a href="
http://www.fasttag.com">Other
Hotel Products</a></td>
> 3) I'm trying to control the "join our mailing list" to
move up into the
> sign
> up box, and in turn, this will bring up my main
paragraph closer to the
> top of
> this cell.
The " " is not a layout tool. Don't use it as if it
were -
<h1
class="signup"> SIGN
UP!</h1>
If you want that content spaced over from the left, use a
padding-left style
on the .signup class.
Do not use background-attachment on that <h1> -
.signup {
height: 50px;
width: 99px;
border: 1px solid #C5C19D;
margin-top: 20px;
margin-left: 420px;
margin-right: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #591F00;
font-size: 13px;
background-image: url(images/signup-gradient.jpg);
background-repeat: repeat-y;
background-position: 10px;
background-attachment: fixed;
Replace your markup for that <h1> and <td> with
this -
<td width="546" height="261" valign="top"><h1
class="signup"
style="padding-left:10px;width:89px;">SIGN UP!<br>
<span class="joinmailinglist"
style="margin-left:0;">Join our
<br>mailing list</span></h1>
Finally, validate your page, and fix the errors. You have
table heights,
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
==================
"r_tist" <[email protected]> wrote in
message
news:[email protected]...
> Hi!
>
> Finally got this up online for temporary testing. Here
are the items I'd
> like
> to modify...not sure how to tweak the code/css.
>
> 1) for starters, the links on the left hand continously
move down when I
> hit
> return in order to add more content on the page. I'd
like for everything
> in the
> left hand panel to be completely static, and so the
links fit into that
> transparency block within the background image. (they
are in a table now,
> before I had them outside of a table, but I had a
difficulty controlling
> them)
> When we correct these to move up, the contact phone #,
etc, will move up
> where
> they should be positioned as well.
>
> 2) if you click on one of the links, the remainder of
the links all
> receive
> the 'visited' state visual; it's reading as one cohesive
element. That
> should
> not be, as they are independent.
>
> 3) I'm trying to control the "join our mailing list" to
move up into the
> sign
> up box, and in turn, this will bring up my main
paragraph closer to the
> top of
> this cell.
>
> As you will see, I'm attempting to control this with CSS
as much as I can.
>
> Thank you for your help; I really appreciate it!
> www.fasttag.com/prestige-lane-testing-phase
>
>
>

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 my css alignment

Similar Messages

Maybe you are looking for