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!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.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!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
daveOh no! Too complicated ;-)
I am having a little problem breaking up the text the first way, using the < > tag... hmmm.......
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....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..
*holds breath and waits
LOLToo 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!*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!!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
}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.Thank you so much!
BTW, I just saw the subtitle to your screenname... Sheep and nerds... wow!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=http://www.webdeveloper.com/forum/archive/index.php/"ex1.css">
</HEAD>
<BODY>
<H1><IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"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.webdeveloper.com/forum/archive/index.php/"http://www.24brownstreet.com/vision.htm" ALT="Register" COORDS="10,464, 77,518">
<AREA SHAPE="RECT" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.24brownstreet.com/vision.htm" ALT="Shop" COORDS="10,390, 75,444">
<AREA SHAPE="RECT" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.homelandbaskets.com/policy.htm" ALT="Sales Policy" COORDS="9,313, 77,368">
<AREA SHAPE="RECT" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.24brownstreet.com/vision.htm" ALT="Products" COORDS="8,240, 74,294">
<AREA SHAPE="RECT" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.homelandbaskets.com/about.htm" ALT="About Us" COORDS="8,169, 74,221">
<AREA SHAPE="RECT" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.homelandbaskets.com/links.htm" ALT="Links" COORDS="7,90, 74,143">
<AREA SHAPE="RECT" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.homelandbaskets.com/contact.htm" ALT="Contact" COORDS="6,17, 73,71">
</MAP>
<H2><IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"C:\Windows\Desktop\top.jpg"></H2>
<H3><IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"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é—ÂÂ弌r 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.Everything shows up fine with this code. The text will NOT format, though... It's crazy.great... but how exactly do you want it formatted?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.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 < >).www.freewebs.com/stargal1998/layout.jpgIf none of your images have alt text, you may as well use tables. Tables are more accessible than images without alt text.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. LOLEventually 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?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) <!-- w --><a class="postlink" href="http://www.homelandbaskets.com">www.homelandbaskets.com</a><!-- w -->.
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... Awwwwwperfect 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 LOLNow 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!No problem.
If you have trouble tabbing that second paragraph move the positioning to the div and seperate the <p> into two <p>'s.
nice to speak to you again anyway!
<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
daveOh no! Too complicated ;-)
I am having a little problem breaking up the text the first way, using the < > tag... hmmm.......
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....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..
*holds breath and waitsLOLToo 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!*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!!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
}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.Thank you so much!
BTW, I just saw the subtitle to your screenname... Sheep and nerds... wow!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=http://www.webdeveloper.com/forum/archive/index.php/"ex1.css">
</HEAD>
<BODY>
<H1><IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"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.webdeveloper.com/forum/archive/index.php/"http://www.24brownstreet.com/vision.htm" ALT="Register" COORDS="10,464, 77,518">
<AREA SHAPE="RECT" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.24brownstreet.com/vision.htm" ALT="Shop" COORDS="10,390, 75,444">
<AREA SHAPE="RECT" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.homelandbaskets.com/policy.htm" ALT="Sales Policy" COORDS="9,313, 77,368">
<AREA SHAPE="RECT" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.24brownstreet.com/vision.htm" ALT="Products" COORDS="8,240, 74,294">
<AREA SHAPE="RECT" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.homelandbaskets.com/about.htm" ALT="About Us" COORDS="8,169, 74,221">
<AREA SHAPE="RECT" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.homelandbaskets.com/links.htm" ALT="Links" COORDS="7,90, 74,143">
<AREA SHAPE="RECT" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.homelandbaskets.com/contact.htm" ALT="Contact" COORDS="6,17, 73,71">
</MAP>
<H2><IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"C:\Windows\Desktop\top.jpg"></H2>
<H3><IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"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é—ÂÂ弌r 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.Everything shows up fine with this code. The text will NOT format, though... It's crazy.great... but how exactly do you want it formatted?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.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 < >).www.freewebs.com/stargal1998/layout.jpgIf none of your images have alt text, you may as well use tables. Tables are more accessible than images without alt text.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. LOLEventually 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?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) <!-- w --><a class="postlink" href="http://www.homelandbaskets.com">www.homelandbaskets.com</a><!-- w -->.
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... Awwwwwperfect 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 LOLNow 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!No problem.
If you have trouble tabbing that second paragraph move the positioning to the div and seperate the <p> into two <p>'s.
nice to speak to you again anyway!