Hiya,
I'm attempting an HTML page to try to match my shopping cart creator design (not finished product yet, but the base is there to start with that I'm trying to do. My problem is that I don't know how to make the graphic in the content container behave like I want it to. In the Shopping Cart it grows and shrinks depending on the amount of content in it and that includes the graphic which also grows and shrinks. I'm not sure how to do this in HTML or CSS so if anyone has any ideas I'd most appreciate it.
My Shopping Cart design which as I said is far from complete yet, can be seen here:
http://wotguild.com/shop (till the domain expires in about a week lol)
My main page for my site for my business can be seen here which is way far from complete, just messing with the design right now so no screaming at me that it sucks! LOL
http://accessoriesoftheworld.com
Am still trying to place some things so a few things may not be in the right places yet lol.
Jo Rice
Senior Advisor
10,951 posts
Jo Rice
Senior Advisor
10,951 posts
I'm having a ton of problems figuring this out, I think I'll just give it a rest for now and not bother with this as I'm really not that good with positioning and I think I'm getting the content area for the text and the content area with the graphic mixed up.
The editor is not displaying on my screen in the preview like it shows when I upload it so that's not helping either
The editor is not displaying on my screen in the preview like it shows when I upload it so that's not helping either
Fe Pixie
Registered User
2,900 posts
Hiya
i'm guessing you mean how to make the box with its nice gold bars at the sides get taller?
You do that by making a top div with the top bits - a middle div with a background image that repeats-y - and a bottom div with the bottom bit
In the image attached i've shown where the top (A), middle (B) and bottom (C) divs would start and end
You can use the same CSS class to style all the tops and middles and bottoms...
The repeating image in the middle div only needs to be a thin slice that repeats over again - used as a background that repeats down it will fill the whole div no matter what height it is
i'm guessing you mean how to make the box with its nice gold bars at the sides get taller?
You do that by making a top div with the top bits - a middle div with a background image that repeats-y - and a bottom div with the bottom bit
In the image attached i've shown where the top (A), middle (B) and bottom (C) divs would start and end
You can use the same CSS class to style all the tops and middles and bottoms...
The repeating image in the middle div only needs to be a thin slice that repeats over again - used as a background that repeats down it will fill the whole div no matter what height it is
.middle {
background-image: url('images/bg.jpg');
background-repeat: repeat-y;
}
background-image: url('images/bg.jpg');
background-repeat: repeat-y;
}
Have fun
~ Fe Pixie ~
~ Fe Pixie ~
Jo Rice
Senior Advisor
10,951 posts
Thanks Pixie, that helps a lot and I'll see what I can do with that setup.
One question though, this graphic is a full square graphic, I am sure I can most likely split it up without too much difficulty I'm hoping lol, but, my other question then is how does the shopping cart do it without it being spliced like that? It's the full graphic in the shopping cart too and it shrinks and grows with the length of the page even though it's one solid graphic.
One question though, this graphic is a full square graphic, I am sure I can most likely split it up without too much difficulty I'm hoping lol, but, my other question then is how does the shopping cart do it without it being spliced like that? It's the full graphic in the shopping cart too and it shrinks and grows with the length of the page even though it's one solid graphic.
Jo Rice
Senior Advisor
10,951 posts
Ok I'm ready to pull my hair out, I soooooo suck at this CSS stuff and I need help if anyone is willing to coddle an old fart that just can't seem to get it! lol
I have it basically... I think... but who knows if what I have is a mess or not. I can get the content area to line up in IE8 but not FF which is usually the other way around for me lol. Anyways if anyone can please please please help me with this CSS setup I would be most grateful. Here's a link to the page, all the graphics are accessible via right-click/copy and the page is basically an html page with the CSS on the same page so all should be easily accessible to see my mess lol.
Thanks in advance for any assistance and I'm getting off here for a while and taking a break for food before I smash my monitor or something!
http://accessoriesoftheworld.com/indexw … ityet.html
I have it basically... I think... but who knows if what I have is a mess or not. I can get the content area to line up in IE8 but not FF which is usually the other way around for me lol. Anyways if anyone can please please please help me with this CSS setup I would be most grateful. Here's a link to the page, all the graphics are accessible via right-click/copy and the page is basically an html page with the CSS on the same page so all should be easily accessible to see my mess lol.
Thanks in advance for any assistance and I'm getting off here for a while and taking a break for food before I smash my monitor or something!
http://accessoriesoftheworld.com/indexw … ityet.html
Cary
Ambassador
1,073 posts
This is what I came up with. You'll need the 3 new images I've attached as well.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AotW Extra Page Template</title>
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
}
body {
color: #2D0334;
background: url('images/mback10b.jpg') repeat;
font: 12px Helvetica, Arial, sans-serif;
line-height: 18px;
}
h2 {
color: #333;
}
a {
color: #337810;
}
p {
margin: 0 0 34px;
} /* adjusts the space between content and footer */
img {
border:none; /* so you don't need to use border="0" with images */
}
#wrapper {
width:960px;
text-align: left;
padding: 19px 0 0;
margin:0 auto;
}
#logoarea {
text-align:center;
}
/* Header */
#header {
height:82px;
width:930px;
padding:15px 15px 63px;
text-align: center;
/* background image settings for header */
background: url(images/bar_gold.png);
background-repeat: no-repeat;
} /* padding changes the gap between header and content area */
#header h1 {
color: #660066;
margin: 0 0 3px;
padding: 25px 18px 0;
} /* padding changes the gap between header and content area */
#header p {
color: #006666;
font-size: 11px;
font-weight: bold;
padding: 0 18px;
}
/* Content Style */
#content {
background:url(images/infogral_gold_top_new.png) no-repeat left top;
padding-top: 32px;
}
#content div {
background:url(images/infogral_gold_bottom_new.png) no-repeat left bottom;
padding-bottom: 33px;
}
#content div div {
background:url(images/infogral_gold_middle.png) repeat-y center;
padding:0 15px;
}
#content div div div {
background-image:none; /* so other divs within #content won't have background images unless applied later in the CSS */
}
#extra {
margin-left:20px; /* padding on the side you are floating toward causes the doubled-margin float bug in IE6 */
float: left;
width: 175px;
padding-top:20px;
} /* background image settings for extra can go here */
#extra small {
font-size: 11px;
line-height: 18px;
}
#main p, #extra p {
padding-right: 18px;
}
/* Content Positioning & Size */
#main {
float:left;
margin: 0px;
width: 650px;
margin-left:20px; /* padding on the side you are floating toward causes the doubled-margin float bug in IE6 */
padding-top:20px;
}
/* Footer */
#footer {
color: #316A79;
clear:both;
text-align:center;
}
#footer a {
color: #316A79;
}
#footer p {
color: #316A79;
font-weight: bold;
text-align: right;
margin: 0;
}
#footer ul {
border-bottom: 0px solid #316A79;
list-style: none;
text-align: center;
margin: 0px;
}
#footer li {
display: inline;
color: #316A79;
font-weight: bold;
}
</style>
<!--[if IE]>
<style type="text/css">
/* #navigation, #content, #extra { margin-top: 20px; } */
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="logoarea">
<img src="images/aotwfull3d4.png" width="50%" alt="Accessories of the World" />
</div><!-- Closes logoarea -->
<div id="header">
<h1>Welcome to Wolverana’s Lair</h1>
<p class="description">Usually some sort of tagline or description is placed here.</p>
</div><!-- Closes header -->
<div id="content"><!-- holds top background image -->
<div><!-- holds bottom background image -->
<div><!-- holds repeating background image, and controls left and right padding for content -->
<div id="main">
<h2>Content Goes Here</h2>
<p>Cue the obligatory <em>Lorem Ipsum</em> riff-raff type text, Followed by an example of a link. There are many uses for <em>Lorem Ipsum</em>, using it as filled text isn't recommended. Make sure to always use actual content when building your websites! It just makes more sense. Now for the lipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p></p>
</div><!-- Closes main -->
<div id="extra">
<h2>Extra Stuff Goes Here</h2>
<p>Sometimes this would be called a <em>sidebar</em>, but it doesn't always have to be on the side to be called a <em>sidebar</em>. Sidebars can be on tops of things, below things, but they are usually beside things – hence it being a called a sidebar.</p>
<p><small></small></p>
</div><!-- Closes extra -->
<div id="footer"> Website designed by Jo Ann Rice, Owner & Operator of Accessories of the World.<br />
Email me at webmaster067@gmail.com for site problems and broken links.<br />
Copyright © 2009 Accessories of the World
<ul>
<li><a href="">Shop Home</a></li>
<li><a href="">Categories</a></li>
<li><a href="">Navigation 3</a></li>
<li><a href="">Navigation 4</a></li>
<li><a href="">View Cart</a></li>
<li><a href="">Contact us</a></li>
</ul>
</div><!-- Closes footer -->
</div>
</div>
</div><!-- Closes content -->
</div><!-- Closes wrapper -->
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AotW Extra Page Template</title>
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
}
body {
color: #2D0334;
background: url('images/mback10b.jpg') repeat;
font: 12px Helvetica, Arial, sans-serif;
line-height: 18px;
}
h2 {
color: #333;
}
a {
color: #337810;
}
p {
margin: 0 0 34px;
} /* adjusts the space between content and footer */
img {
border:none; /* so you don't need to use border="0" with images */
}
#wrapper {
width:960px;
text-align: left;
padding: 19px 0 0;
margin:0 auto;
}
#logoarea {
text-align:center;
}
/* Header */
#header {
height:82px;
width:930px;
padding:15px 15px 63px;
text-align: center;
/* background image settings for header */
background: url(images/bar_gold.png);
background-repeat: no-repeat;
} /* padding changes the gap between header and content area */
#header h1 {
color: #660066;
margin: 0 0 3px;
padding: 25px 18px 0;
} /* padding changes the gap between header and content area */
#header p {
color: #006666;
font-size: 11px;
font-weight: bold;
padding: 0 18px;
}
/* Content Style */
#content {
background:url(images/infogral_gold_top_new.png) no-repeat left top;
padding-top: 32px;
}
#content div {
background:url(images/infogral_gold_bottom_new.png) no-repeat left bottom;
padding-bottom: 33px;
}
#content div div {
background:url(images/infogral_gold_middle.png) repeat-y center;
padding:0 15px;
}
#content div div div {
background-image:none; /* so other divs within #content won't have background images unless applied later in the CSS */
}
#extra {
margin-left:20px; /* padding on the side you are floating toward causes the doubled-margin float bug in IE6 */
float: left;
width: 175px;
padding-top:20px;
} /* background image settings for extra can go here */
#extra small {
font-size: 11px;
line-height: 18px;
}
#main p, #extra p {
padding-right: 18px;
}
/* Content Positioning & Size */
#main {
float:left;
margin: 0px;
width: 650px;
margin-left:20px; /* padding on the side you are floating toward causes the doubled-margin float bug in IE6 */
padding-top:20px;
}
/* Footer */
#footer {
color: #316A79;
clear:both;
text-align:center;
}
#footer a {
color: #316A79;
}
#footer p {
color: #316A79;
font-weight: bold;
text-align: right;
margin: 0;
}
#footer ul {
border-bottom: 0px solid #316A79;
list-style: none;
text-align: center;
margin: 0px;
}
#footer li {
display: inline;
color: #316A79;
font-weight: bold;
}
</style>
<!--[if IE]>
<style type="text/css">
/* #navigation, #content, #extra { margin-top: 20px; } */
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="logoarea">
<img src="images/aotwfull3d4.png" width="50%" alt="Accessories of the World" />
</div><!-- Closes logoarea -->
<div id="header">
<h1>Welcome to Wolverana’s Lair</h1>
<p class="description">Usually some sort of tagline or description is placed here.</p>
</div><!-- Closes header -->
<div id="content"><!-- holds top background image -->
<div><!-- holds bottom background image -->
<div><!-- holds repeating background image, and controls left and right padding for content -->
<div id="main">
<h2>Content Goes Here</h2>
<p>Cue the obligatory <em>Lorem Ipsum</em> riff-raff type text, Followed by an example of a link. There are many uses for <em>Lorem Ipsum</em>, using it as filled text isn't recommended. Make sure to always use actual content when building your websites! It just makes more sense. Now for the lipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p></p>
</div><!-- Closes main -->
<div id="extra">
<h2>Extra Stuff Goes Here</h2>
<p>Sometimes this would be called a <em>sidebar</em>, but it doesn't always have to be on the side to be called a <em>sidebar</em>. Sidebars can be on tops of things, below things, but they are usually beside things – hence it being a called a sidebar.</p>
<p><small></small></p>
</div><!-- Closes extra -->
<div id="footer"> Website designed by Jo Ann Rice, Owner & Operator of Accessories of the World.<br />
Email me at webmaster067@gmail.com for site problems and broken links.<br />
Copyright © 2009 Accessories of the World
<ul>
<li><a href="">Shop Home</a></li>
<li><a href="">Categories</a></li>
<li><a href="">Navigation 3</a></li>
<li><a href="">Navigation 4</a></li>
<li><a href="">View Cart</a></li>
<li><a href="">Contact us</a></li>
</ul>
</div><!-- Closes footer -->
</div>
</div>
</div><!-- Closes content -->
</div><!-- Closes wrapper -->
</body>
</html>
Jo Rice
Senior Advisor
10,951 posts
ohhhhhhhhhh ty ty ty ty ty I could just kiss you!! LOL OMG and it's sooo pretty! I will look this all over and hopefully I'll be able to see exactly what you did different so I can learn better from it. Thank you soooo very much once again Cary for saving the rest of the hair on my head
Cary
Ambassador
1,073 posts
No problem 
Cary
Ambassador
1,073 posts
Hi Jo Ann,
I finally got around to putting Virtual PC back on my Vista machine so I can check pages in IE 6 and 7, and I found a problem with the code I gave you.
Change this:
To this:
You should also provide alternate images for users of IE 6 since it doesn't support the alpha transparency of 32bit png images and looks ugly.
So, for the background image above, you could tell IE 6 to use an 8-bit image with some index transparency instead with the following CSS (coming after the line above) :
Other browsers will see this line and ignore it because "html" doesn't have a parent element. However, IE 6 doesn't care about that little detail, so it goes ahead and uses the background image pointed to.
Also, notice I used "background-image:" instead of "background:".
This way the only bit of background styling that can be affected is the background image itself, so you won't have to worry about default attributes being applied to such unspecified things as how the image repeats or doesn't repeat. These will simply be inherited from the previous rule.
I finally got around to putting Virtual PC back on my Vista machine so I can check pages in IE 6 and 7, and I found a problem with the code I gave you.
Change this:
#content div div {
background:url(images/infogral_gold_middle.png) repeat-y center;
padding:0 15px;
}
background:url(images/infogral_gold_middle.png) repeat-y center;
padding:0 15px;
}
To this:
#content div div {
background:url(images/infogral_gold_middle.png) repeat-y left top; /* fixes background positioning problem with IE6 */
padding:0 15px;
height:1%; /* fixes background rendering problem with IE 6 & 7 */
}
background:url(images/infogral_gold_middle.png) repeat-y left top; /* fixes background positioning problem with IE6 */
padding:0 15px;
height:1%; /* fixes background rendering problem with IE 6 & 7 */
}
You should also provide alternate images for users of IE 6 since it doesn't support the alpha transparency of 32bit png images and looks ugly.
So, for the background image above, you could tell IE 6 to use an 8-bit image with some index transparency instead with the following CSS (coming after the line above) :
* html #content div div {
background-image:url(images/infogral_gold_middle_ie6.gif);
}
background-image:url(images/infogral_gold_middle_ie6.gif);
}
Other browsers will see this line and ignore it because "html" doesn't have a parent element. However, IE 6 doesn't care about that little detail, so it goes ahead and uses the background image pointed to.
Also, notice I used "background-image:" instead of "background:".
This way the only bit of background styling that can be affected is the background image itself, so you won't have to worry about default attributes being applied to such unspecified things as how the image repeats or doesn't repeat. These will simply be inherited from the previous rule.
Jo Rice
Senior Advisor
10,951 posts
Thanks again Cary, I replaced the first part of the code you mentioned, no problem there.
I'm not sure what you mean on the image transparency. I am basically using a stock graphic from the SCC or SCD not sure which one it came from. The graphic hasn't really changed other than the border, so the graphic is the same one included with these programs. That means that Jupiter theme may be a mess if this is not right, and also the them setup isn't right either *points this out to Scott per our ticket convo earlier*. I guess I need to know more about what you're talking about as for the index transparency thing as I've no clue lol.
I'm not sure what you mean on the image transparency. I am basically using a stock graphic from the SCC or SCD not sure which one it came from. The graphic hasn't really changed other than the border, so the graphic is the same one included with these programs. That means that Jupiter theme may be a mess if this is not right, and also the them setup isn't right either *points this out to Scott per our ticket convo earlier*. I guess I need to know more about what you're talking about as for the index transparency thing as I've no clue lol.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
