PDA

Click to See Complete Forum and Search --> : Is there any way to do this in CSS?

stargal98
06-12-2003, 02:13 PM
I've joined the CSS crowd with my first non-table layout. YAY! Well, I still have metatags and such to do right now, but I was wondering how I could get the text I have to go over the H4 graphic (which is a box). Is there any possible way I can do this without resorting to the dreaded table for my layout? Thanks!
DaveSW
06-12-2003, 02:33 PM
you can use style="position:absolute; left:10px; top:10px;" etc for the two items. Then add z-index:300; to the end of the one that goes on top.
stargal98
06-12-2003, 02:40 PM
Thank you for your reply. This works great! I appreciate the help. Once I learn CSS a little better I think I might just use it as much as possible.There is more control with it. Thanks!
DaveSW
06-12-2003, 02:43 PM
another way would be to make a container div.

<div style="background-image: url"(C:\WINDOWS\Desktop\content1.jpg"); background-repeat:no-repeat; background-position: center;>
<p> contents to go on top</p>
</div>

you can also add text-align:center; and size the div using width:100px; and height:100px; to match the image size.


(This is probably the better way because it will look better in ancient browsers LOL)

Glad you like CSS anyway

dave
stargal98
06-12-2003, 02:44 PM
Oh no! Too complicated ;-)
I am having a little problem breaking up the text the first way, using the <&nbsp> tag... hmmm...
DaveSW
06-12-2003, 02:46 PM
....

try a container <div> tag, which you apply the positioning to, then putting all the contents in that. Other than that you'll need to explain....
stargal98
06-12-2003, 02:47 PM
I think I replied before I got your second post. I will try this, thank you SO MUCH for your help. I'll try that and see what happens.. :-)
DaveSW
06-12-2003, 02:49 PM
*holds breath and waits

LOL
stargal98
06-12-2003, 02:52 PM
Too much pressure.. I can 't take it. Please don't hold your breath, if you pass out I won't have someone to help... aggh!
DaveSW
06-12-2003, 02:55 PM
*lets out breath pheww....

*laughs

make sure the image address is correct - it took me ages the first time I used this to realise my address was wrong because I was using an external css file in a folder. DOH!!
stargal98
06-12-2003, 02:56 PM
So I'll be putting the div tag in my externall CSS document??? Or my internal? Here is what my external looks like:

{background: white}
p
{color: black;
text-align: center;
text-indent: 1 cm;
font-family: times;
font-size: 12pt;
position: absolute;
left:450;
top:85;
z-index:300
}
H1
{position: absolute;
left:5;
top: 85
}
H2
{position: absolute;
left:0;
top:0
}
H3
{position: absolute;
left:85;
top:85
}
H4
{position: absolute;
left: 450;
top:85
}
DaveSW
06-12-2003, 03:01 PM
the <div> tag goes in your html code. the styles in the tag can be left in the tag or moved to your external sheet - you choose. I'll rearrange your code and post it back.
stargal98
06-12-2003, 03:04 PM
Thank you so much!
BTW, I just saw the subtitle to your screenname... Sheep and nerds... wow!
DaveSW
06-12-2003, 03:06 PM
must be bored if you're reading my location LOL
sheep and nerds don't mix LOL

Right - modified your code, as posted below, but I can't see if it's working without the images. You may wish to send me the images so I can use them to perfect it.

<HTML>
<HEAD>
<TITLE>BEAUTIFUL, AFFORDABLE...NATURALLY: The Homeland Basket Company</TITLE>
<LINK REL="stylesheet" TYPE="TEXT/CSS" HREF="ex1.css">
</HEAD>
<BODY>
<H1><IMG SRC="C:\Windows\Desktop\basketnav.jpg" USEMAP="#Map2" WIDTH=86 HEIGHT=535 BORDER="0"></H1>
</MAP>
<MAP NAME="Map2">
<MAP NAME="basketnav">
<AREA SHAPE="RECT" HREF="http://www.24brownstreet.com/vision.htm" ALT="Register" COORDS="10,464, 77,518">
<AREA SHAPE="RECT" HREF="http://www.24brownstreet.com/vision.htm" ALT="Shop" COORDS="10,390, 75,444">
<AREA SHAPE="RECT" HREF="http://www.homelandbaskets.com/policy.htm" ALT="Sales Policy" COORDS="9,313, 77,368">
<AREA SHAPE="RECT" HREF="http://www.24brownstreet.com/vision.htm" ALT="Products" COORDS="8,240, 74,294">
<AREA SHAPE="RECT" HREF="http://www.homelandbaskets.com/about.htm" ALT="About Us" COORDS="8,169, 74,221">
<AREA SHAPE="RECT" HREF="http://www.homelandbaskets.com/links.htm" ALT="Links" COORDS="7,90, 74,143">
<AREA SHAPE="RECT" HREF="http://www.homelandbaskets.com/contact.htm" ALT="Contact" COORDS="6,17, 73,71">
</MAP>
<H2><IMG SRC="C:\Windows\Desktop\top.jpg"></H2>
<H3><IMG SRC="C:\WINDOWS\Desktop\basket.jpg"></H3>
<DIV style="background-image: url"(C:\WINDOWS\Desktop\content1.jpg"); background-repeat:no-repeat; background-position: center;>
<P>The Homeland Basket Company was created after its parent company, Ohio Wholesale, Inc.,
recognized the great interest in home décor baskets. OWI also recognized the lack of
outlets to purchase baskets at reasonable prices. Utilizing its strong ties within the
giftware industry, Ohio Wholesale, Inc. was able to find an international source of
high-quality baskets for their customers to purchase for their stores. <BR>

OWI's buying power allows us to negotiate for the lowest possible pricing to pass onto you,
our valued customer. Ohio Wholesale, Inc. is proud to introduce its new division, the
Homeland Basket Company. You can feel comfortable that the baskets you buy are the same
high-quality, low price products when buying from the Homeland Basket Company you expect
when shopping at Ohio Wholesale, Inc. </P>
</DIV>
</BODY>
</HTML>


as you can see, the css is applied within the div tag. I can move this to your external sheet if you like.
stargal98
06-12-2003, 03:15 PM
Everything shows up fine with this code. The text will NOT format, though... It's crazy.
DaveSW
06-12-2003, 03:16 PM
great... but how exactly do you want it formatted?
DaveSW
06-12-2003, 03:19 PM
do you mean the text is in the wrong place? you may need to take the absolute positioning out of the p {..} in your external css.
stargal98
06-12-2003, 03:20 PM
I want the text to fit within the box for it. I figured I want to seperate the two paragraphs (with <br>), indent them and then seperate each line (with <&nbsp>).www.freewebs.com/stargal1998/layout.jpg
nkaisare
06-12-2003, 03:24 PM
If none of your images have alt text, you may as well use tables. Tables are more accessible than images without alt text.
DaveSW
06-12-2003, 03:28 PM
one thing at a time Niket!

stargal, you need to specify a width for your text. this will then cause your text to 'fit the box'

add in your external css under the
p{..
width:100px;...}

replace the 100 with the width of the image. the site looks seriously neat by the way.

Then we can deal with Nikets suggestion. LOL
stargal98
06-12-2003, 03:28 PM
Eventually they will have ALTs. I'm just trying to do all the other stuff first. I'm leaving alts, metatags and the like for last. This will be my site template and each page changes a little... Does this make sense?
stargal98
06-12-2003, 03:37 PM
Thank you so much for your compliment. And for the info--it is Finally where I want it to go. The new site will be up when my boss gets back (by June 30th) www.homelandbaskets.com.
I really appreciate the compliment, though. But I can't take credit for the overall design. The graphics goddess of our department came up with when she combined 2 of my seperate layouts. She's the real genius...
Thanks, again...
Now I'm blushing... Awwwww
DaveSW
06-12-2003, 03:38 PM
perfect sense. when you put it that way, comon sense in fact.

you also need to tweak your positioning to get it perfeclty in the box.

I'm sure your both geniuses though LOL
stargal98
06-12-2003, 03:46 PM
Now we just have to get the guys in our department to okay it... I really hope they do. I've spent the better part of the day with CSS (w3schools.com CSs tutorials and quiz, whew!)and this layout and I really hope everything works for the best. I couldn't have done this without you. Now I have to position the logo and also tab the second paragraph. I also made the text align to the left instead of the center...
Thanks, again!
DaveSW
06-12-2003, 03:49 PM
No problem. :D

If you have trouble tabbing that second paragraph move the positioning to the div and seperate the <p> into two <p>'s.

:cool:

nice to speak to you again anyway!