113 replies [Last post]
cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 15 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Changing resolution works

I changed the resolution to 800x600 and even though it causes everything to look fuzzy on my LCD, it works just fine. Now on to the sidebar images.

Then all the rest of the pages will not have the jewelry image in the header area and they need the shopping cart tables set up. This is coming along nicely.

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 15 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Moving on the the sidebar

Ok, in the sidebar area will be four images 120x120 of my jewelry. I currently have h3 designated there. I am wondering if I need to do h3, h4, h5, & h6 to hold all the images. Does this sound correct?

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 15 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

OMG I DID IT!!!!!

I decided to try the sidebar images myself and it worked!!!! I did use h3, h4, h5, & h6 to distinguish between the 4 different images. I used the position: relative and set the top, bottom, left, and right so that the images turned out the way they were set in my mock up. This is so cool!!! Now I need to move on to the shopping cart pages and get those done. Since I don't want the top jewelry image on all pages, I will have to make a new CSS page for the shopping cart pages.

TPH, THANK YOU, THANK YOU, THANK YOU!!!!!!!! I appreciate all the help you have been giving me.

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 15 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Here is my code for anyone interested.

Here is the HTML


Foxden Creations

Welcome to Foxden Creations

Here you will find unique, hand-crafted beaded jewelry that will set you apart from the crowd.

Please come in and look around, I am sure there is something that will catch your eye.

I also take special orders if you don't find what you are looking for! Just fill out the form on the "By Special Request" page.

Here is the CSS

/* CSS Document */
html {
background: #18222E;
}
body {
width: 767px;
margin: 2em auto;
overflow: auto;
position: relative;
}
#container {
overflow: auto;
width: 767px;
}

#header {
overflow:auto;
background: url(images/border/header.gif);
}
h1 {
position:relative;
top:5px;
left:1.5em;
background: transparent url(images/foxden_creations_logo.png) no-repeat;
height:147px;
width: 389px;
right: 325px;
text-indent: -9999px;
}

#middle {
background: url(images/border/middle.gif);
}
#sidebar {
float: right;
width: 300px;
}
#footer {
clear: both;
background: url(images/border/footer.gif);
margin: 0 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: xx-small;
font-weight: bold;
color: #FFFFFF;
text-align: center;
}
#footer p {
margin: 0;
}
#content {
margin: 0 300px 0 175px;
}
/* Let's get some images on the nav buttons! */
ul {
float: left;
width: 175px;
margin: 1.2em;
padding: 0;
list-style: none;
text-align: center;
}
ul li {
width: 85%; margin: 1em auto;
}
ul li a {
display: block; width: 151px; height: 39px; text-indent: -999em;
}
ul li#nav-home a {
background: url(images/buttons/home.png);
}
ul li#nav-about a {
background: url(images/buttons/aboutus.png);
}
ul li#nav-necklaces a {
background: url(images/buttons/necklaces.png);
}
ul li#nav-earrings a {
background: url(images/buttons/earrings.png);
}
ul li#nav-bracelets a {
background: url(images/buttons/bracelets.png);
}
ul li#nav-lanyards a {
background: url(images/buttons/lanyards.png);
}
ul li#nav-bookmarks a {
background: url(images/buttons/bookmarks.png);
}
ul li#nav-request a {
background: url(images/buttons/request.png);
}
#necklace {
position: absolute;
top: 30px;
right: 1em;
background: transparent url(images/jewelry.png) no-repeat;
height: 324px;
width: 158px;
left: 574px;
}
#border-top {
background: url(images/border/top.gif); height: 41px;
}
#border-bottom {
background: url(images/border/bottom.gif); height: 39px;
}
h3{
position:relative;
top: 30px;
right: 10em;
background: url(images/blk_slvr_necklace.png) no-repeat;
height: 128px;
width: 128px;
left: 2px;
text-indent: -9999px;
}
h4{
position:relative;
top: 20px;
right: .1em;
background: url(images/pnk_blk_lanyard.png) no-repeat;
height: 128px;
width: 128px;
left:120px;
text-indent: -9999px;
}
h5{
position:relative;
top: 10px;
right: 10em;
background: url(images/pnk_blk_bookmark.png) no-repeat;
height: 128px;
width: 128px;
left: 2px;
text-indent: -9999px;
}
h6{
position:relative;
top: 4px;
right: .1em;
background: url(images/slvr_wht_cross_necklace.png) no-repeat;
height: 128px;
width: 128px;
left:120px;
text-indent: -9999px;
}

If anyone sees a way to improve on the HTML or CSS code, please share with me as I am still learning.

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 15 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Not FAIR!!!

Just when I thought that I was done with the home page, I tested in Firefox and Netscape 8.1 and it is totally screwed up!!!! There are scroll bars for the header area and the main content area that look awful. What did I do incorrectly to get this to show up in these 2 browsers? Was it the position: relative that I set up? Please help!!!

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Your right images are

Your right images are content, you don't need to use heading tags and replace them, this is one time when it's actually ok to put the <img> tags in Wink

Verschwindende wrote:
  • CSS doesn't make pies

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 5 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

change overflow: auto; to

change overflow: auto; to overflow: hidden; in #header, #container, and body

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 15 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

IMG tags go in HTML or CSS?

If I do this, where do I place the IMG tags? If I follow how you did the images for the buttons, then I think I would add them to the CSS. Would I do them as P or UL LI? My mind is telling me p as I would if I were doing them in HTML alone but I think that I need to specify each individual image like #p necklace, 1 #p lanyard, etc. I will play with this to see what happens.

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 15 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I did as you suggested....

but am still seeing problems. The scroll bars are gone in Netscape and Firefox but there is a separation between the header and main content area and weird lines through the main content area. Could this be caused by how I did the images? I have attached pics of how the page looks in each browser.

AttachmentSize
firefox_pic.gif 82.01 KB
netscape_pic.gif 82.28 KB

Because I am the MOM, that's why!!!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 5 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

cgacfox, I don't want to

cgacfox, I don't want to step overstep tph, but I'll point out a few things here.

The h1 - why the relative positioning? You've given it a width (and height) and then positioned the left and right sides. Use margins instead of positioning.

#header contains no floating content, so the overflow is not needed (I overlooked that previously).

The space between the header and middle area is caused by collapsing margins on the h2. Either set the top margin of the h2 to zero, or set a top-padding of 1px on #middle (the latter probably being the better option.

The sidebar images should definitely NOT be in hx tags. They are a list of images. I would either put them in an unordered list, or just place them in the source as is (within the #sidebar).

Try removing the width from the li

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 15 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Fixed the h1, took out #header overflow...

and changed the top-padding of #middle to 1px. The attached image is how it looks in IE7 and the other 2 browsers. Of course, in those browsers I still get the weird lines running through the page.

AttachmentSize
IE7.gif 75.54 KB

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 15 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

I need help with the code for the sidebar images

I have been playing with the sidebar images trying to get them to work and I am screwing things up really bad. I have tried to copy the code used for the nav and setting it to where it would fit in the sidebar area but it is just not working and I am just not understanding this. I almost want to give up and go back to tables. At least I could get things where I wanted them in a table. It seems to me that learning CSS is a lot more difficult than I first imagined.

Because I am the MOM, that's why!!!

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 15 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Looking in "The CSS Anthology" from Sitepoint...

they give an example of a thumbnail gallery. They state to put the img src in the HTML and in the CSS. They do a ul id for albumlist and list the images in an unordered list on the HTML page. Then for the CSS page they have code that might work for my images. My images are to be placed absolute on the page because they are staggered and not one on top of the other. I wonder if this would work for what I am trying to achieve. I will give it a try but if anyone has suggestions of how I get this to work, please let me know.

Because I am the MOM, that's why!!!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 3 weeks 1 hour ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Why use AP? You're

Why use AP? You're overcomplicating it. You could float them left or right, or use margins Wink

Verschwindende wrote:
  • CSS doesn't make pies

cgacfox
cgacfox's picture
Offline
Enthusiast
Colorado
Last seen: 10 years 15 weeks ago
Colorado
Timezone: GMT-7
Joined: 2007-05-06
Posts: 120
Points: 2

Things are totally messed up now

Here is my code so far with trying to do the images in the sidebar area:


Foxden Creations

  • Black & Silver NecklaceBlack & Silver Necklace
  • Pink & Black LanyardPink & Black Lanyard
  • Pink & Black Beaded BookmarkPink & Black Beaded Bookmark
  • Silver & White Cross NecklaceSilver & White Cross Necklace
  • Welcome to Foxden Creations

    Here you will find unique, hand-crafted beaded jewelry that will set you apart from the crowd.

    Please come in and look around, I am sure there is something that will catch your eye.

    I also take special orders if you don't find what you are looking for! Just fill out the form on the "By Special Request" page.

    Here is the CSS:

    /* CSS Document */
    html {
    background: #18222E;
    }
    body {
    width: 767px;
    margin: 2em auto;
    overflow: hidden;
    position: relative;
    }
    #container {
    overflow: hidden;
    width: 767px;
    }

    #header {
    overflow:hidden;
    background: url(images/border/header.gif);
    }
    h1 {
    position:relative;
    background: transparent url(images/foxden_creations_logo.png) no-repeat;
    height:147px;
    width: 389px;
    right: 325px;
    text-indent: -9999px;
    margin-top: 5px;
    margin-right: 325px;
    margin-bottom: 8px;
    margin-left: 11.2em;
    }

    #middle {
    overflow:hidden;
    background: url(images/border/middle.gif);
    padding-top: 1px;
    }
    #sidebar {
    float: right;
    width: 300px;

    }
    #albumlist {
    list-style-type: none;
    }

    #albumlist li {
    float:right;
    margin-right:20px;
    margin-bottom: 10px;
    margin-left:300px;
    }
    #albumlist img {
    display:block;
    }

    #footer {
    clear: both;
    background: url(images/border/footer.gif);
    margin: 0 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-small;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    }
    #footer p {
    margin: 0;
    }
    #content {
    margin: 0 300px 0 175px;
    }
    /* Let's get some images on the nav buttons! */
    ul {
    float: left;
    width: 175px;
    margin: 1.2em;
    padding: 0;
    list-style: none;
    text-align: center;
    }
    ul li {
    width: 85%; margin: 1em auto;
    }
    ul li a {
    display: block; height: 39px; text-indent: -999em;
    }
    ul li#nav-home a {
    background: url(images/buttons/home.png);
    }
    ul li#nav-about a {
    background: url(images/buttons/aboutus.png);
    }
    ul li#nav-necklaces a {
    background: url(images/buttons/necklaces.png);
    }
    ul li#nav-earrings a {
    background: url(images/buttons/earrings.png);
    }
    ul li#nav-bracelets a {
    background: url(images/buttons/bracelets.png);
    }
    ul li#nav-lanyards a {
    background: url(images/buttons/lanyards.png);
    }
    ul li#nav-bookmarks a {
    background: url(images/buttons/bookmarks.png);
    }
    ul li#nav-request a {
    background: url(images/buttons/request.png);
    }
    #necklace {
    position: absolute;
    top: 30px;
    right: 1em;
    background: transparent url(images/jewelry.png) no-repeat;
    height: 324px;
    width: 158px;
    left: 574px;
    }
    #border-top {
    background: url(images/border/top.gif); height: 41px;
    }
    #border-bottom {
    background: url(images/border/bottom.gif); height: 39px;
    }

    I really need some help in cleaning up my code. I know this may be the lazy way out but if someone could re-write my code so that it all works for the home page in all 3 browsers that I test in (IE7, Mozilla Firefox, and Netscape 8.1), then I can look at it to see what I did incorrectly. If I see what the proper code should look like, I can hopefully go from there to do the rest of the pages on my own with minimal help getting the shopping cart pages done.

    Because I am the MOM, that's why!!!

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 3 weeks 1 hour ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    Could you .rar up the sliced

    Could you .rar up the sliced images you're currently using and email them to me? Then I can piece it all together Wink

    Verschwindende wrote:
    • CSS doesn't make pies

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Thank you TPH

    I will send those right away. Wink

    Because I am the MOM, that's why!!!

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Just a side note...

    Hmmm, when I take out the nav area from the CSS the funky lines in Firefox & Netscape go away. How interesting. I wonder what part of the code is causing the lines?

    Because I am the MOM, that's why!!!

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Seems to be the display:block...

    that is causing the problem. Of course, when I take it out, it screws up the nav buttons. I tried to do a search on Google to see if anyone else has this problem. Can't find anything yet. Any suggestions?

    Because I am the MOM, that's why!!!

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 3 weeks 1 hour ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    This is working for me, try

    This is working for me, try it and see what happens. yes, the colours are ugly and the padding is off, but go through the HTML and understand where to use padding and margins, and what elements should use them.

    Foxden Creations




    Welcome to Foxden Creations


    Here you will find unique, hand-crafted beaded jewelry that will set you apart from the crowd.


    Please come in and look around, I am sure there is something that will catch your eye.


    I also take special orders if you don't find what you are looking for! Just fill out the form on the "By Special Request" page.




    html { background: #18222E; }

    body {
    width: 767px;
    margin: 2em auto;
    position: relative;
    }

    #header {
    background: url(images/border/header.gif);
    }

    h1, h2 {margin-top: 0;}

    h1 {
    background: url(images/foxden_creations_logo.png) no-repeat 2em 0;
    height:147px;
    text-indent: -9999em;
    margin: 0;
    }

    #middle {
    background: url(images/border/middle.gif);
    overflow: auto;
    }

    #sidebar {
    float: right;
    width: 170px;
    margin-right: 30px;
    background: yellow;
    }

    #albumlist, #albumlist li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    #albumlist img {
    display:block;
    }

    #footer {
    clear: both;
    background: url(images/border/footer.gif);
    font: bold x-small Arial, Helvetica, sans-serif;
    color: #FFF;
    text-align: center;
    }

    #footer p {
    margin: 0;
    }

    #content {
    margin: 0 200px;
    }

    /* Let's get some images on the nav buttons! */

    ul#nav {
    background: yellow;
    float: left;
    width: 170px;
    margin: 0 0 0 30px;
    padding: 0;
    list-style: none;
    text-align: center;
    }
    ul#nav li {
    width: 85%;
    margin: 1em auto;
    }
    ul li a {display: block; height: 39px; text-indent: -999em;}
    ul li#nav-home a {background: url(images/buttons/home.png);}
    ul li#nav-about a {background: url(images/buttons/aboutus.png);}
    ul li#nav-necklaces a {background: url(images/buttons/necklaces.png);}
    ul li#nav-earrings a {background: url(images/buttons/earrings.png);}
    ul li#nav-bracelets a {background: url(images/buttons/bracelets.png);}
    ul li#nav-lanyards a {background: url(images/buttons/lanyards.png);}
    ul li#nav-bookmarks a {background: url(images/buttons/bookmarks.png);}
    ul li#nav-request a {background: url(images/buttons/request.png);}

    #necklace {
    position: absolute;
    top: 30px;
    right: 1em;
    background: transparent url(images/jewelry.png) no-repeat;
    height: 324px;
    width: 158px;
    left: 574px;
    }
    #border-top {
    background: url(images/border/top.gif); height: 41px;
    }
    #border-bottom {
    background: url(images/border/bottom.gif); height: 39px;
    }

    Verschwindende wrote:
    • CSS doesn't make pies

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Here is what I am getting using your code

    Firefox and Netscape don't look right. The lines are still there and I found that when I remove display:block from the code, it removes those lines. However, the nav images go away as well. Maybe I need a CSS hack to get it to work in those browsers or put a disclaimer to only use IE7 for browsing.

    AttachmentSize
    firefox_pic.gif 79.43 KB
    netscape_pic.gif 76.31 KB

    Because I am the MOM, that's why!!!

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Line problem solved...

    I changed the engine that Netscape uses, which was set to Mozilla Firefox, to IE and the lines are gone from Netscape.

    I also upgraded to the latest version of Firefox and the lines are gone from that browser as well. However, this does not solve the problem if someone is using an older version of the browsers as I was.

    Because I am the MOM, that's why!!!

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 3 weeks 1 hour ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    Did you use my code? I used

    Did you use my code? I used your original code, and then converted it to mine, and didn;t get blue lines anywhere.

    Verschwindende wrote:
    • CSS doesn't make pies

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Yes I did use your code

    As I stated above, I upgraded to the latest browser version for Firefox and that fixed the problem.

    How that I see how the list works for the images, how do I get them to stagger as I had them before? Originally I set it up for each image to be AP but since I am using a list, I am not sure how to get this effect back.

    Because I am the MOM, that's why!!!

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Also looks like I will need 3 or more separate CSS pages...

    Going through what I need to do to this site, it looks like I will need 3 or more separate CSS pages. This one for home has the jewelry in the header and the images in the sidebar. I don't want those on the about page, or the shopping cart pages. Am I thinking this through correctly?

    Because I am the MOM, that's why!!!

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    I think I might have figured this out

    cgacfox wrote:
    Now that I see how the list works for the images, how do I get them to stagger as I had them before? Originally I set it up for each image to be AP but since I am using a list, I am not sure how to get this effect back.

    I see how you did the images for the buttons and I think that I will have to do the same for the sidebar images. I will give this a try.

    Because I am the MOM, that's why!!!

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 3 weeks 1 hour ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    You don't need to, leave the

    You don't need to, leave the HTML as it is.

    Give the rightbar images classes - left and right, for example. Set the floats to match, and give them a clear. For example:


    #albumlist li {clear: both;} #albumlist li.left {float: left;} #albumlist li.right {float: right;}

    For your other pages, you could just call in a second CSS file that overwrites some sections; for example if your HTML doesn't have a rightbar, then just set the second CSS file to give the main content column a right margin of 0.

    Verschwindende wrote:
    • CSS doesn't make pies

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Didn't work

    I tried your example and it didn't work. The images are still stacked one on top of the other instead of staggering in the sidebar area.

    Because I am the MOM, that's why!!!

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 3 weeks 1 hour ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    That's probably because the

    That's probably because the column they're in (remember the one with the yellow background) isn't wide enough to make a difference.

    Put the yellow BG colour back in and you'll see what I mean Wink

    Verschwindende wrote:
    • CSS doesn't make pies

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Changed the column width

    Ok I changed the column width for the sidebar and put the yellow color back to to check it. Each image is 128px X 128px so this should work now but it doesn't. I attached what the page looks like in IE7.

    Here is the snippet of code in CSS:

    #sidebar {
    float: right;
    width: 258px;
    margin-right: 30px;
    background: yellow;
    }
    #albumlist, #albumlist li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-indent: -9999em;
    }
    #albumlist li {
    clear: both;
    }
    #albumlist li.left {
    float: left;
    }
    #albumlist li.right {
    float: right;
    }
    #albumlist img {
    display:block;
    }

    AttachmentSize
    IE7.gif 62.06 KB

    Because I am the MOM, that's why!!!

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 3 weeks 1 hour ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    You forgot about this bit:

    You forgot about this bit:


    Wink

    Verschwindende wrote:
    • CSS doesn't make pies

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Oops I forgot to post the HTML code

    I do have this code in the HTML page. I just forgot to post it. Sorry about that. So since I have all the code as you sent, then I cannot figure out why it is not working for me.

    Because I am the MOM, that's why!!!

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 3 weeks 1 hour ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    Odd, because it worked fine

    Odd, because it worked fine for me last night when I tested it.

    I'll have another look at it tonight when I get home Laughing out loud

    Verschwindende wrote:
    • CSS doesn't make pies

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Maybe it's my laptop

    I can transfer my code for the site from my laptop to my desktop and see what happens. Maybe it's just a weird glitch that I am experiencing on my laptop. It has been known to happen before with code.

    Because I am the MOM, that's why!!!

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    transferred files to desktop but encountered more problems

    Well I transferred my files to my desktop but now I am having more interesting problems. The middle area that holds the content is now at the bottom of the page and the images are still not showing properly. When I have DW in split view everything is where it should be but when I preview in browser it gets all screwed up.

    Foxden Creations









    Welcome to Foxden Creations


    Here you will find unique, hand-crafted beaded jewelry that will set you apart from the crowd.


    Please come in and look around, I am sure there is something that will catch your eye.


    I also take special orders if you don't find what you are looking for! Just fill out the form on the "By Special Request" page.








    CSS:

    html {
    background: #18222E;
    }
    body {
    width: 767px;
    margin: 2em auto;
    position: relative;
    }
    #header {
    background: url(images/border/header.gif);
    }
    h1, h2
    {
    margin-top: 0;
    }
    h1 {
    background: url(images/foxden_creations_logo.png) no-repeat 2em 0;
    height:147px;
    text-indent: -9999em;
    margin: 0;
    }
    #middle {
    background: url(images/border/middle.gif);
    overflow: auto;
    }
    #content {
    margin: 0 200px;
    }
    #sidebar {
    float: right;
    width: 170px;
    margin-right: 30px;
    background: yellow;
    }
    #albumlist li {
    clear: both;
    }
    #albumlist li.left {
    float: left;
    }
    #albumlist li.right {
    float: right;
    }
    #footer {
    clear: both;
    background: url(images/border/footer.gif);
    font: bold x-small Arial, Helvetica, sans-serif;
    color: #FFF;
    text-align: center;
    }
    #footer p {
    margin: 0;
    }

    /* Let's get some images on the nav buttons! */
    ul#nav {
    background: yellow;
    float: left;
    width: 170px;
    margin: 0 0 0 30px;
    padding: 0;
    list-style: none;
    text-align: center;
    }
    ul#nav li {
    width: 85%;
    margin: 1em auto;
    }
    ul li a {
    display: block;
    height: 39px;
    text-indent: -999em;
    }
    ul li#nav-home a {
    background: url(images/buttons/home.png);
    }
    ul li#nav-about a {
    background: url(images/buttons/aboutus.png);
    }ul li#nav-necklaces a {
    background: url(images/buttons/necklaces.png);
    }
    ul li#nav-earrings a {
    background: url(images/buttons/earrings.png);
    }
    ul li#nav-bracelets a {
    background: url(images/buttons/bracelets.png);
    }
    ul li#nav-lanyards a {
    background: url(images/buttons/lanyards.png);
    }
    ul li#nav-bookmarks a {
    background: url(images/buttons/bookmarks.png);
    }
    ul li#nav-request a {
    background: url(images/buttons/request.png);
    }
    #necklace {
    position: absolute;
    top: 30px;
    right: 1em;
    background: transparent url(images/jewelry.png) no-repeat;
    height: 324px;
    width: 158px;
    left: 574px;
    }
    #border-top {
    background: url(images/border/top.gif);
    height: 41px;
    }
    #border-bottom {
    background: url(images/border/bottom.gif);
    height: 39px;
    }

    I am getting very frustrated. If this isn't going to work for me to test, then how do I know it is correct? I am seriously thinking about going back to tables. They work for me. So I can't get as fancy with my images, but at least I can test and see results that work. Is it DW? Is it my computers? Is it my code? I host my sites and some of my clients sites from my own servers and it is a pain to keep transferring files over because I cannot FTP them to the server. My husband doesn't want that kind of access to the servers, so I put the files on a USB flash disk and put them on the server. This is not very efficient for testing purposes. That is why I rely on local view so much.

    AttachmentSize
    home_page.gif 34.23 KB

    Because I am the MOM, that's why!!!

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    TPH, please help!!

    Please check my code and make any corrections that need to be done to the code. Then post the corrected code here. I will then test on my laptop and on my desktop. If it doesn't work for me, I don't know what to do from here. Maybe there is a free hosting service that I can use to test remotely? I am at my wits end! Wink

    Because I am the MOM, that's why!!!

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 3 weeks 1 hour ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    Viewing locally on your PC

    Viewing locally on your PC isn't a problem at all, unless you're creating dynamic sites with ASP or PHP and need to style server output.

    NEVER preview in DW. Code in DW's code view by all means, but always test in a browser. Nobody is going to use DW to view your site, are they? Tongue

    I didn't get a look at it last night, I'll see what I can do tonight.

    Verschwindende wrote:
    • CSS doesn't make pies

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Testing in wwwroot but still same problems

    I did test yesterday in wwwroot where I set up a folder for the site and am still having the same problems. That is why I am wondering if it is my code or my computers. My laptop is a Dell 600M and my desktop is a machine put together by a tech friend that is my all around workhorse. It has a 19" monitor and 4 gigs of RAM plus numerous other bells and whistles. I test in IE7, Firefox 2.0.0.3, and Netscape 8.1. These are the latest browsers available. Not everyone is running the latest browsers but I have no way of testing on older browsers. The image that I posted yesterday is happening in all three browsers on both my machines. Maybe the way I did the slices was incorrect. I am just at a loss as to why (for me) it looks so bad.

    I went ahead and uploaded the site to my live server at http://www.foxdenwebsolutions.com/foxdencreations/index.html. I still run IE6 on that machine and the site for me looks even worse. There is no middle color that was sliced. The logo and jewelry images are not transparent, and the drop shadow for the individual images of my jewelry are also not transparent. The text is where it should be but wraps at the bottom of the images. This is just too weird and too frustrating. Maybe I need to go back to square 1 and try this all again. I am finding the learning curve of CSS very high if this is not a computer problem.

    Because I am the MOM, that's why!!!

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 13 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    This thread gets the award

    This thread gets the award for the longest running one on the forum!

    You just need to look carefully at your code preferably using html-tidy extension for Firefox, which would show you an Error in your markup specifically an extra closing div where one isn't opened, look at the code from the opening of your #middle and you will see that you have closed out #middle before #content gets a look in and also then you have closed middle again noted by the comments. fix that then you will need to address other problems which I can't believe have survived through 88 posts, you'll need to add display:inline top the floats to prevent IE6 from doubling the margin values.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 3 weeks 1 hour ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    Hugo wrote:This thread gets

    Hugo wrote:
    This thread gets the award for the longest running one on the forum!

    it is quite an awesome thread, isn't it? Laughing out loud

    Verschwindende wrote:
    • CSS doesn't make pies

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Corrected the things that were pointed out but...

    Hugo wrote:
    This thread gets the award for the longest running one on the forum!

    You just need to look carefully at your code preferably using html-tidy extension for Firefox, which would show you an Error in your markup specifically an extra closing div where one isn't opened, look at the code from the opening of your #middle and you will see that you have closed out #middle before #content gets a look in and also then you have closed middle again noted by the comments. fix that then you will need to address other problems which I can't believe have survived through 88 posts, you'll need to add display:inline top the floats to prevent IE6 from doubling the margin values.

    I have taken the HTML code and used HTML Tidy to correct the errors that you pointed out. I also fixed the CSS code as I unerstand from your comments.





    Foxden Creations









    Welcome to Foxden Creations


    Here you will find unique, hand-crafted beaded jewelry that will set you apart
    from the crowd.


    Please come in and look around, I am sure there is something that will catch
    your eye.


    I also take special orders if you don't find what you are looking for! Just fill
    out the form on the "By Special Request" page.










    CSS:

    html { background: #18222E; } body { width: 767px; margin: 2em auto; position: relative; } #header { background: url(images/border/header.gif); } h1, h2 { margin-top: 0; } h1 { background: url(images/foxden_creations_logo.png) no-repeat 2em 0; height:147px; text-indent: -9999em; margin: 0; } #middle { background: url(images/border/middle.gif); overflow: hidden; } #content { margin: 0 100px; } #sidebar { float: right; width: 300px; margin-right: 30px; background: yellow; display: inline; } #albumlist li { clear: both; } #albumlist li.left { float: left; display: inline; } #albumlist li.right { float: right; display: inline; } #footer { clear: both; background: url(images/border/footer.gif); font: bold x-small Arial, Helvetica, sans-serif; color: #FFF; text-align: center; } #footer p { margin: 0; }

    /* Let's get some images on the nav buttons! */
    ul#nav {
    background: yellow;
    float: left;
    width: 175px;
    margin: 0 0 0 15px;
    padding: 0;
    list-style: none;
    text-align: center;
    display: inline;
    }
    ul#nav li {
    width: 85%;
    margin: 1em auto;
    }
    ul li a {
    display: block;
    height: 39px;
    text-indent: -999em;
    }
    ul li#nav-home a {
    background: url(images/buttons/home.png);
    }
    ul li#nav-about a {
    background: url(images/buttons/aboutus.png);
    }ul li#nav-necklaces a {
    background: url(images/buttons/necklaces.png);
    }
    ul li#nav-earrings a {
    background: url(images/buttons/earrings.png);
    }
    ul li#nav-bracelets a {
    background: url(images/buttons/bracelets.png);
    }
    ul li#nav-lanyards a {
    background: url(images/buttons/lanyards.png);
    }
    ul li#nav-bookmarks a {
    background: url(images/buttons/bookmarks.png);
    }
    ul li#nav-request a {
    background: url(images/buttons/request.png);
    }
    #necklace {
    position: absolute;
    top: 30px;
    right: 1em;
    background: transparent url(images/jewelry.png) no-repeat;
    height: 324px;
    width: 158px;
    left: 574px;
    }
    #border-top {
    background: url(images/border/top.gif);
    height: 41px;
    }
    #border-bottom {
    background: url(images/border/bottom.gif);
    height: 39px;
    }

    It looks much better and I thank you for pointing out the errors. However, the images in the sidebar are still not doing what I want them to. They should stagger as in the image of the page created in Fireworks that I posted a while ago. These are side by side. Maybe using the unordered list is not the way to go and I should use AP on them. I moved the buttons over to the left as much as possible but did not remove the yellow background as I wanted to see exactly what was going on. I am not sure how to correct the right side to get it to work correctly.

    BTW, this thread will continue as long as I need help getting this first page done. Hopefully this thread will help others having the same or similar problems that I am having learning CSS. Wink

    AttachmentSize
    IE7.gif 63.44 KB

    Because I am the MOM, that's why!!!

    Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 5 years 13 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    Quote:BTW, this thread will

    Quote:
    BTW, this thread will continue as long as I need help getting this first page done.

    I'm sure it will Wink

    Quote:
    Hopefully this thread will help others having the same or similar problems that I am having learning CSS.

    I'm sure it shall Smile

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 3 weeks 1 hour ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    No no no, you're not going

    No no no, you're not going to use AP for the right bar, that's madness Laughing out loud

    I'm back home now (finally got on my PC after three days!) and I'll have a look in a minute Laughing out loud

    Verschwindende wrote:
    • CSS doesn't make pies

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 3 weeks 1 hour ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    I've just tried your latest

    I've just tried your latest code and the right hand images work fine for me?

    Verschwindende wrote:
    • CSS doesn't make pies

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Does it look like this?

    Do the images stagger like this attached image? That is what I want to happen but I am not seeing it.

    AttachmentSize
    foxdencreationsc.gif 188.81 KB

    Because I am the MOM, that's why!!!

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 3 weeks 1 hour ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    Yes, they have toe yellow

    Yes, they have toe yellow background too.

    Are you looking at the latest page? Try and clear your cache, press ctrl+f5 Wink

    Verschwindende wrote:
    • CSS doesn't make pies

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Cache cleared

    I cleared my cache and am going through localhost and am still not seeing the staggered images. This is what I see. Is there something wrong with my computers? Is there a free hosting service out there where I can maybe try to upload this and see if everything is okay?

    AttachmentSize
    home_latest.gif 66.41 KB

    Because I am the MOM, that's why!!!

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    Found free web hosting service...

    and uploaded all files and still see the sidebar images sitting side by side instead of staggering.

    http://www.freewebs.com/foxdencreations/index.html

    Here is the link. If anyone is seeing the same as me, please tell me. If you are seeing what should be happening, then I give up. It is obviously something wrong on my end which will prevent me from being able to properly test CSS pages.

    Because I am the MOM, that's why!!!

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 3 weeks 1 hour ago
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    Works fine here what

    Works fine here :?

    what screen size do you have? What resolution?

    Verschwindende wrote:
    • CSS doesn't make pies

    cgacfox
    cgacfox's picture
    Offline
    Enthusiast
    Colorado
    Last seen: 10 years 15 weeks ago
    Colorado
    Timezone: GMT-7
    Joined: 2007-05-06
    Posts: 120
    Points: 2

    I am using 1024x768 on my

    I am using 1024x768 on my laptop.

    Because I am the MOM, that's why!!!