Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Nov 2006
    Location
    Washington, DC
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts

    one of the span isn't working. can't figure it out

    For some odd reason, my first span is just not working like it should be. I can't set any style for it or any positioning. I'm wanting to use float or absolute positioning on the <span class="nav"> to take it out of the flow so the content can move up to beween the nav and side bar.

    The goal for this site is essientally a three column layout with the right column being the chronological list of the last 20 articles or updates posted and the nav bar being the main bar with links. there will be several sections within the content area as you can see in the attached image.

    this layout depends on being able to set the columns to the very right and very left of the site.

    it have been a long long time since i've seriously worked on my site so for once and for all, I want to get my site up and running before the semester start this fall at Gallaudet University since I'm taking a web design class this fall too. I want to get my site ready before then so I can really tweak and improve the site over the fall with the instructor.

    thanks

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Lost Ear Studio</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <img class="center" src="pic/testingbanner.png" alt="Lost Ear Studio />
    
    
    <span class="nav">
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    </span>
    
    <span class="content">
    
    <p>The content of the document......</p>
    <img src="pic/index.jpg" alt="Lost Ear Studio is coming!!!">
    </span>
    
    <span class="side">
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    <img src="pic/sideblock.png"><br />
    </span>
    
    </body>
    
    </html>
    Code:
    body {
    background-color:black;
    color:white;
    }
    span.nav {
    position:absolute;
    top:275px;
    border:3px solid white;
    border-left-style: hidden;
    margin:0px 0px 0px 100px;
    }
    span.content {
    margin-right:200px;
    margin-left:200px;
    }
    span.side {
    float:right;
    width:200px;
    border:3px solid white;
    border-right-style: hidden;
    padding:10px;
    }
    IMG.center {
    display: block;
    margin-left: auto;
    margin-right: auto; 
    }
    Attached Thumbnails Attached Thumbnails one of the span isn't working. can't figure it out-sitelayout.png  

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Lots of help here.

    This in particular may help you.

    Also layouts here.

    Use the search facility. Single words often work best.

    Frank
    Last edited by effpeetee; 07-03-2010 at 05:26 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Frank linking to your site could be considered spamming. If you are going to link to your site try providing something relevant to their problem.

    @OP Your code looks okay but I would use a div instead of a spam for the navigation or better yet an unordered list. Can you post a link to your page?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Frank linking to your site could be considered spamming. If you are going to link to your site try providing something relevant to their problem.

    @OP Your code looks okay but I would use a div instead of a spam for the navigation or better yet an unordered list. Can you post a link to your page?
    Aero.

    This is the only help that I can give. I would point out that I get no reward for it. There are no adverts or offers to take up. I have just collected together a number of useful sites and offer them as a source of help.

    Ought I to withdraw it?

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New Coder
    Join Date
    Nov 2006
    Location
    Washington, DC
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts
    i had the exact same result changing out span for div. the link to the page is in the sig but I haven't updated the html and css i'm working on for the site. I want to finish the code before putting it up. i'll put it up in a alternative page soon though. going out of the house for a bit.

    good to see you again,aerospace eng. you once helped me out a load for some of my old site. thanks.

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Given that Frank does not make any money from his website, and it as a result costs him to provide the link, I'll allow it, especially as he specifies the resources on the page he wished the poster to look at with a direct link. At current I do not consider it any different from you or I linking to our private sites in our signatures.

  • #7
    New Coder
    Join Date
    Nov 2006
    Location
    Washington, DC
    Posts
    30
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    Lots of help here.

    This in particular may help you.

    Also layouts here.

    Use the search facility. Single words often work best.

    Frank
    I must admit, the fliud 3 column that effpeetee linked to on his site is almost exactly the kind of layout I want. I can create what I need within each columns for the extra division of contents but otherwise, it's exactly like I needed. So I will be analyzing the link quite a bit, thanks!

    One difference though is that I want the footer to remain within the middle column. not as a space below all three column. the reason for this is that I have a design concept using white border all over the place to visualize containment and the like.

    I will upload an test page to my site soon.

    :EDIT:

    here's the link to the test page,
    http://lost-ear-studio.com/test/index.html

    will edit it to reflect the fluid three column layout that effpeetee linked to. thanks!

    :EDIT2:

    got a lot of it working thanks to copying and editing up the effpeetee's site version of the 3 column layout, just need to figure out how to center the header and keep the footer below the content. see link to understand why i need that fixed.

    :EDIT3:

    I removed the header and footer. I decided to include the header and footer into the main content area and it seemed to work rather well for me :-) esp since I can just add a margin-top:200px; for both side column to allow me to absolutely position the corner images up there.

    Again, thank you all for your helps! :-)
    Last edited by Radscientist; 07-03-2010 at 10:40 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •