CSS Questions on New Site

CSS Questions on New Site (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

vision2000 -> CSS Questions on New Site (4/24/2005 21:31:38)
Hi, I am trying to convert this site to css styling but running into a few problems that I need help with: http://www.luxury-homes-virginia.com/index2.shtml http://www.luxury-homes-virginia.com/style.shtml (css) Questions: 1. How do I style the menu bar? (top and bottom are the same but I used the ids: #topnav and #bottomnav). 2. How do I place/style the people and bookmark images in the footer as I did with tables in: http://www.luxury-homes-virginia.com/index.html 3. So far in IE6 it looks fine but not in FireFox - I can't figure out why. Thanks a lot.

jaybee -> RE: CSS Questions on New Site (4/25/2005 5:26:49)
Tip - Design for Firefox, fix for IE afterwards. Get the FF extension for the Web developer toolbar. There's an outline tab so you can see where all your divs, p etc are on the page. The top and bottom navs look different to me in Firefox and IE. Can't see the problem. Quickest way to style the footer is have a footer div then within that a div for the pic of the woman, float:left; clear:right; a div for the pic of the man. float:right; clear:left; then stick the text in and it should sit in the middle you'll probably need to text-align:center;. For the logos at the bottom, another div within the footer and then float the images left and they will stack up next to each other. You'll then need to play around with margins or padding for each to space them out properly.

vision2000 -> RE: CSS Questions on New Site (4/25/2005 12:36:09)
Thanks. The nav bars are now coded the same but the hover does not work. I can place Jim's photo in the row of images but not move it to the right of the text. How do I move lady image to the left of the text. I tried a .imageright class but had no effect.

jaybee -> RE: CSS Questions on New Site (4/25/2005 14:12:31)

The hovers on the bottom menu aren't working because most of them have no hyperlink associated with them they are just text.

<div id="bottomnav">
    <p>[<a href="http://www.luxury-homes-virginia.com/index.html">MAIN PAGE</a>]
    [<a href="http://www.luxury-homes-virginia.com/framesearch.html">SEARCH
    LISTINGS</a>] [<a href="http://www.luxury-homes-virginia.com/map.html">AREA
    MAPS</a>] [ALEXANDRIA HOMES] [ARLINGTON HOMES] [FAIRFAX HOMES] <br />

    [LOUDOUN HOMES] [PRINCE WILLIAM HOMES] [WHO WE ARE] [HOMESTYLES] [NEW HOMES]
    [SITE MAP] [CONTACT US] </p></div>

Your css was missing some closing ;
watch out for that it makes everything following it redundant.

This is the code you need for the bottom. If you're going to float images they need to go before the text you want to float round them. I've also removed the align center tags in the div statement.

         <div id="footer">
                 <div class="floatleft"><img src="images/JIMWIC%7E1.jpg" alt="other photo" width="79" height="110" /><br />
                   Other photo<br/></div>
                 <div class="floatright"><img src="images/JIMWIC%7E1.jpg" alt="jim wicker" width="79" height="110" /><br />
                   Jim Wicker<br/></div>
     <div>Serving luxury home buyers in Arlington, Alexandria, <br />
       Fairfax, Loudoun, Prince William Counties in Northern Virginia 
         <p>Broker: Lenn Harley, Homefinders.com<br />
           James Wicker, Potomac Realty, Inc.</p>
       <p>Phone: 800-711-7988<br />
         E-Mail: <a href="mailto:Info@luxury-homes-virginia.com">
       [email=Info@LuxuryHomesVirginia.com]Info@LuxuryHomesVirginia.com[/email]</a></p>
 
         <p>Copyright 1999 Lenn Harley<br /></p></div>
                 <div class="footerimages"><img src="http://www.homes-mont-county-md.com/images/E_PRO_%7E1.jpg" width="109" height="60" alt="epro"><br/></div>
         <div class="footerimages"><img src="http://www.homes-mont-county-md.com/images/fheo400.gif" width="56" height="60" alt="equal opportunity housing"><br/></div>
         <div class="footerimages"><a href="http://www.luxury-homes-virginia.com/framesearch.html" target="_blank"><img src="http://www.homes-mont-county-md.com/images/MLSLogo.jpg" width="136" height="60" border="0" alt="MLS"></a><br/></div>
   </div>
 </div>

and this is the css that goes with it. Compare it to what you had

#footer { 
        position: relative;
         width: 500px;
         margin-left:250px;
         margin-top:0px;
         margin-bottom:15px;
         border: 1px solid #000000;
         font-size:12px;
         text-align: center;
         padding-top:10px;
         padding-bottom:10px;
         padding-left:10px;
         padding-right:10px;        
        } 
 .footerimages{
 text-align:center;
 border: 0;
 margin: 5px;
 } 
 .floatright
 {
 float: right;
 clear:left;
 text-align:center;
 width: 79px;
 height:110px;
 margin-left:10px;
 margin-right:0px;
 margin-top:0px;
 margin-bottom:10px;
 background-color: #fff;
 padding:0;
 }
 .floatleft
 {
 float: left;
 clear:right;
 text-align:center;
 width: 79px;
 height: 110px;
 margin-left:0px;
 margin-right:0px;
 margin-top:0px;
 margin-bottom:10px;
 background-color: #fff;
 padding: 0px;
 }

Tried highlighting the changes with colour but it puts the formatting tags in the code. [:'(]

vision2000 -> RE: CSS Questions on New Site (4/25/2005 16:21:08)
Thanks a lot..it worked well and all xhtml and css now validates. Why in FF does the footer still looks off and why do I need to scroll horizontally in IE6 horizontally?

jaybee -> RE: CSS Questions on New Site (4/25/2005 17:29:57)
Suggest you have a read of this. All your problems will be answered in there. The scroll problem is down to the way IE handles the box model (differently to all the other browsers and not the way it says it does in its own documentation) The other problem with the picture dropping will be down to a width, padding or margin setting. Take a copy of the page and play around with it.

Page: [1]

0.0625