CSS Questions on New Site

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

CSS Questions on New Site

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> CSS Questions on New Site

Page: [1]


vision2000 Posts: 532 From: USA Status: offline	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. _____________________________ Affordable Web Site Design, Web Hosting and Promotion http://www.isitebuild.com


jaybee Posts: 14157 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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. < Message edited by jaybee -- 4/25/2005 5:53:49 > _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to vision2000)


vision2000 Posts: 532 From: USA Status: offline	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. (in reply to jaybee)

jaybee

Posts: 14157
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

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.

< Message edited by jaybee -- 4/25/2005 14:20:37 >

_____________________________

If it ain't broke..... fix it until it is.

GAWDS
Now where did I put that Doctype?

(in reply to vision2000)


vision2000 Posts: 532 From: USA Status: offline	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? (in reply to jaybee)


jaybee Posts: 14157 Joined: 10/7/2003 From: Berkshire, UK Status: offline	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. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to vision2000)

Page: [1]

All Forums >> Web Development >> Cascading Style Sheets >> CSS Questions on New Site

Page: [1]

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts