SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict elemental70's Avatar
    Join Date
    Mar 2002
    Location
    Canada
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Link positioning problem

    I've got a problem here. I'm using CSS2 and have everything positioned as I like it. I've got a shaded background on my main text and it stretches with the text. But I can 't get my links to not bump up against the text. so what I want is no matter how much text I put in that space, the links will always stay below. I'm sure its something simple but I need the help!
    Thanks guys
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    We'd really need to see some code to see what you are using and what you are doing before we can offer a proper solution .

    It sounds as though you need a bottom margin on the paragraph with text in it but that's only a wild guess as I'm not sure what your links code look like, what type of positioning is used (if any) etc....

    Paul

  3. #3
    SitePoint Addict elemental70's Avatar
    Join Date
    Mar 2002
    Location
    Canada
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    .wrapper {
     position: absolute;
     top: 200px;
    }
    
    #breakfast {
     bottom: 680px;
     left: 110px;
     position: relative;
    }
    
    #engbar {
     bottom: 171px;
     position: relative;
    }
    
    #engphoto {
     left: 700px;
     position: relative;
     top: -355px;
     z-index: 3;
    }
    
    #line {
     bottom: 353px;
     left: 440px;
     position: relative;
    }
    
    #links {
     bottom: 700px;
     color: #d5d4d4;
     left: 50px;
     position: relative;
     text-align: center;
     text-decoration: none;
    }
    
    #logo {
     bottom: 124px;
     left: 82px;
     position: relative;
     z-index: 2;
    }
    
    #maintext {
     background-color: #f4f3f3;
     color: #6a6a6a;
     left: 450px;
     line-height: 140%;
     padding-bottom: 50px;
     padding-left: 25px;
     padding-right: 18px;
     padding-top: 200px;
     position: absolute;
     text-align: left;
     top: 8px;
    }
    It validates perfectly (thank you TopStyle and W3C) So I'm missing something small.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    My mind reading powers are a little bit dim today so can I be a pain and ask for the relevant html as well

    It's impossible for me to tell where you have placed those elements and in what order. If I put the links style on my page then you have placed it 700px from the bottom of itself (wherever that is). This will probably place it on the ceiling in my office lol.

    I notice you have positioned your text abolutely therefore it is removed from the flow of the document and other content will be oblivious to it. You will need to alter the way you are positioning things if you want them to be more fluid.

    You have also used a lot of relative positioning! Relative positioning is very rarely necessary except for small movements of elements. If you move an element a long way with relative positioning then you will leave a big hole where the element was.

    Relative positioning moves an element in relation to itself but prexerves the space that it previously occupied.

    As you can see from the rule above I do need to see the html in order to offer anything constructive. (Better still if you have a link to the site).

    Paul

  5. #5
    SitePoint Addict elemental70's Avatar
    Join Date
    Mar 2002
    Location
    Canada
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!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">
    <head>
    <title>ENG Canada</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /*<![CDATA[*/
    @import url(eng.css);
    /*]]>*/
    </style>
    </head><body>
    <div class="wrapper">
    
    
    <div id="logo"><img src="englogo.gif" width="765" height="129" /></div>
    <div id="engbar"><img src="engbar.gif" width="1492" height="52" /></div>
    <div id="engphoto"><img src="engphoto.gif" width="422" height="275" /></div>
    <div id="line"><img src="line.gif" width="8" height="293" /></div>
    <div id="breakfast"><img src="engpicture.gif" width="344" height="421" /></div>
    <div id="maintext">The ENG Newsletter is distributed monthly. If you would like your name added to the mailing list, please forward your information to: <a href="mailto:info@engcanada.ca">info@engcanada.ca</a> or <a href="mailto:admin@engcanada.ca">admin@engcanada.ca</a>. You can also mail us at: <br />
    <center>ENG Canada<br />
    18 Wellington St. East Suite 4<br />
    Aurora, Ontario<br />
    L4G 1H5</center><br />
    If you would like to submit an article about your business or place an ad, please foward your business information or inquiry to <a href="mailto:admin@engcanada.ca">admin@engcanada.ca</a> or call us.
    
    
    </div>
    <center>
    <a href="memberapp.html">membership application</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="schedule.html">monthly agenda</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="letter.html">newsletter subscription</a><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="contact.html">contact us</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href = "mailto:eheyl@webconxeon.com">webmaster</a></center>
    </div></body>
    </html>
    There it is. I also attached a pic of the front page in my first post

  6. #6
    SitePoint Addict elemental70's Avatar
    Join Date
    Mar 2002
    Location
    Canada
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a link to the site so far
    www.engcanada.ca

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm afraid that is one broken page

    You have made a number of fundamental errors in your use of positioning as mentioned in my previous posts.

    Also I am not sure why you are designing a screen that is so wide that virtually no one can see it. Your images are about 1600px wide. Are you viewing this at the wide screen cinema lol

    You should try and keep your page so that it doesn't need scrollbars to read at normal resolutions. The majority of users use 800x600 and 1024x768. It's best to try and keep a fluid display but if you can't then try and keep it readable in the above two resolutions at least.

    Regarding your positioning you have incorrectly used relative positioning which is why your layout behaves strangely. Some of the time you will need absolute positioning to place things exactly but the document usually needs some flow to keep elements away from each other. Otherwiuse every single thing will have to be positioned and you will not be able to make anything fluid. (as in the case of your links)

    Basically you do this by not positioning elements at all but using margins to move them around a bit and letting them take space up on the page.

    I've re-jigged your code into something reasonable (and valid) but I really didn't have a clue what you were trying to achieve with the images so you may have to change those around.

    The links at the bottom of the screen will now move if content is added and if the screen is resized smaller they will be pushed down as required. They will not be overwritten as in your example. The page will also display in mozilla browsers as well as Ie. There are no scrollbars at full screen but the scrollbars appear quickly because of your large images and where you want them placed. You could put all the images into background elements if you wanted but this would not allow the use of the alt tag to display information. (I have put a couple of images in the background to show you the technique)

    Try and look at the code and understand the positioning as it will help you to make the changes you need.

    Code:
    <!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">
    <head>
    <title>ENG Canada</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #breakfast {
     position: absolute;
     left: 110px;
     width:344px;
     height:421px;
    }
    #engbar {
     margin-top:60px;
     background: #fff url(http://www.engcanada.ca/engbar.gif) no-repeat 0 82px;
     width:100%;
     height:129px;
    }
    #engbar img {margin-left:80px;display:block;}
    #engphoto {
     position:absolute;
     width:100%;
     height:310px;
     top:0;left:0;
     background: transparent url(http://www.engcanada.ca/engphoto.gif) no-repeat 700px 30px;
    }
    #links {
     color: #d5d4d4;
     text-align: center;
     margin-top:25px;
    }
    #links a {margin-left:50px; text-decoration: none;}
    #links a:hover {color:red} 
    #maintext {
     background-color: #f4f3f3;
     color: #676767;
     margin-left: 450px;
     line-height: 140%;
     padding-bottom: 50px;
     padding-left: 25px;
     padding-right: 18px;
     padding-top: 200px;
     text-align: left;
     border-left: 1px solid black;
    }
    </style>
    </head>
    <body>
    <div id="engbar">
     <img src="http://www.engcanada.ca/englogo.gif" width="765" height="129" alt="" /> 
    </div>
    <div id="engphoto"></div>
    <div id="breakfast">
     <img src="http://www.engcanada.ca/engpicture.gif" width="344" height="421" alt="" />
    </div>
    <div id="maintext"> 
      <p>Entrepreneur's Networking Group is a Breakfast Club for entrepreneur/business 
    	owners. We meet 10 months of the year in the Old Town Hall - Botsford Street 
    	in Newmarket. ENG meetings are the second Tuesday of each month except July 
    	and August. <br />
    	8:30 a.m to 11:30 a.m. for breakfast, speakers and networking. </p>
      <p>ENGICON, the investment club, starts 11:00 a.m. to noon. R.S.V.P.</p>
    </div>
    <div id="links">
     <p><a href="memberapp.html">membership application</a><a href="schedule.html">monthly 
    	agenda</a><a href="letter.html">newsletter subscription</a></p>
     <p><a href="contact.html">contact us</a><a href =" mailto:eheyl@webconxeon.com">webmaster</a>
     </p>
    </div>
     
    </body>
    </html>
    I have used the full address of your images so that I could see them locally but you need to change them all back to relative addresses.

    Hope this helps.

    Paul

  8. #8
    SitePoint Addict elemental70's Avatar
    Join Date
    Mar 2002
    Location
    Canada
    Posts
    240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much Paul! I'm slowly understanding CSS yet I have trouble wrapping my head around positioning. Still I'm learning.


Bookmarks

Posting Permissions

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