SitePoint Sponsor

User Tag List

Page 13 of 66 FirstFirst ... 3910111213141516172363 ... LastLast
Results 301 to 325 of 1630
  1. #301
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well of course it will be white becaues you have over-ridden the black with a white background in content_view .

    Just change content_viewbackground to black for #games as well (if its used on aother pages where you want it white otherwise just change it directly).

    Code:
    #content_view {
      padding-right: 0px;
      padding-left: 0px;
      padding-bottom: 5px;
      margin:0;
      width: 700px;
      padding-top: 5px;
      text-align: center;
      background:#fff; 
    }
    body#games #content_view {background:#000}
    Paul

  2. #302
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello folks,

    I have one problem with navigation layer in my template. When I preview it in IE 6.0 all works perfect but in Firefox left column is not the same. Unfortunatelly, I can't find a solution without your help. Please help me with this.

    html file: http://www.damjanator.ch/projects/sr/index.html
    css files: http://www.damjanator.ch/projects/sr/layout.css, http://www.damjanator.ch/projects/sr/styles.css

    thanks in advance,
    Jazz

  3. #303
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Firefox left column is not the same
    Could you be a bit more precise as I could be looking all day and still not see it

    Where is the problem? It looks much the same apart from a couple of margins at the bottom.

    Paul

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

    I can see some float problems in mozilla and some 3 pixel jog and double margin bug problems in ie.

    You need to have your floats in order for mozilla as they won't float upwards. The easiest way is to spearate the columns and then you can float left and right in each column.

    The 3 pixel jog in ie just makes things 3 pixels further away and isn't usually an issue unless space is tight.

    Heres your code with those elements fixed.
    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>Svetlec'e reklame.com - Vaš pouzdan partner ka svetlijoj buduc'nosti</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    /* ========== BASIC LAYOUT START HERE =================== */
    #container {
     width: 660px;
     margin: 10px auto 0px;
     background-color: #fff;
     color: #333;
     padding: 0px;
    }
    #top {
     background-color: #618FBF;
     height: 98px;
     background-image: url(http://www.damjanator.ch/projects/sr/images/header.jpg);
     background-repeat: no-repeat;
     background-position: left top;
     margin: 0px;
     padding: 0px;
    }
    #leftnav {
     float: left;
     width: 170px;
     margin: -52px 0px 0px;
     padding: 0px 18px;
     clear: both;
     display:inline;/*ie hack*/
    }
    * html #leftnav {margin-right:-3px}/* 3 pixel jog */
    #content {
     padding: 0px;
     margin-top: 0px;
     margin-right: 15px;
     margin-bottom: 0px;
     margin-left: 225px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     color: #333333;
     text-decoration: none;
    }
    * html #content {height:1%;margin-left:222px}/*3 pixel jog again*/
    #footer {
     clear: both;
     margin: 0px;
     padding: 0px;
     color: #333;
     background-color: #618FBF;
     height: 91px;
     background-image: url(http://www.damjanator.ch/projects/sr/images/footer.jpg);
     background-repeat: no-repeat;
     background-position: left top;
    }
    div#main_navigation {
     background-color: #E7EBDD;
     background-image: url(http://www.damjanator.ch/projects/sr...n_menu_bgd.gif);
     background-repeat: no-repeat;
     background-position: center top;
     margin:0 0px 18px 5px;
     padding: 0px;
     height: 213px;
     width: 189px;
     float: left;
     display:inline;/* ie 3 pixel jog and double margin bug */
    }
    * html div#main_navigation {margin-right:-3px}/* ie 3 pixel jog */
    div#help_menu {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     color: #333333;
     text-decoration: none;
    }
    
    /**** LINK-tag style sheet styles.css ****/
    body {
     background-color: #E7E7DB;
     font-size: 85%;
     line-height: 100%;
    }
    .cleaner {
     clear: both;
    }
    div#help_menu a, div#help_menu a:visited {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     color: #BF0700;
     text-decoration: underline;
    }
    div#help_menu a:hover, div#help_menu a:active {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     color: #BF0700;
     text-decoration: none;
    }
    div#help_menu img {
     padding-right: .5em;
     padding-left: .5em;
    }
    h1 {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 16px;
     color: #274563;
     text-decoration: none;
     margin: 1.7em 0px 0px;
     padding: 0px;
    }
    div#main_navigation ul {
     padding: 0px 0px 0px 7px;
     margin-top: 74px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: 0px;
     list-style-type: none;
    }
    div#main_navigation ul li {
     padding: 0px;
     list-style-type: none;
     height: 20px;
     margin: 0px;
     text-indent: 1.7em;
     display: block;
     background-image: url(http://www.damjanator.ch/projects/sr/images/li_bgd.gif);
     background-repeat: repeat-x;
     background-position: left top;
     width: 174px;
     position: relative;
    }
    div#main_navigation ul li a, div#main_navigation ul li a:visited {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     color: #5391D0;
     text-decoration: none;
     background-image: url(http://www.damjanator.ch/projects/sr...row_button.gif);
     background-repeat: no-repeat;
     font-weight: bold;
     background-position: 1.2em .8em;
     width: 174px;
     height: 17px;
     margin: 0px;
     padding: 5px 0px 0px;
     display: block;
    }
    div#main_navigation ul li a:hover, div#main_navigation ul li a:active {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     color: #BF0700;
     text-decoration: none;
     background-image: url(http://www.damjanator.ch/projects/sr...row_button.gif);
     background-repeat: no-repeat;
     font-weight: bold;
     background-position: 1.2em .8em;
     width: 174px;
     height: 17px;
     margin: 0px;
     padding: 5px 0px 0px;
     display: block;
    }div#vesti p {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     color: #333333;
     text-decoration: none;
     text-align: justify;
     margin: 0px;
     padding: 0px 0px 20px;
    }
    .vestiDatum {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     font-weight: bold;
     color: #4CA542;
     text-decoration: none;
    }
    div#vesti a, div#vesti a:visited {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     color: #4CA542;
     text-decoration: underline;
    }
    div#vesti a:hover, div#vesti a:active {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     color: #4CA542;
     text-decoration: none;
    }
    div#vesti p {
    }
    div#login_section {
     margin: 0px;
     padding-top: 0px;
     padding-right: 0px;
     padding-bottom: 0px;
     padding-left: 0px;
     text-align: right;
    }
    div#login_section form {
     margin: 0px;
     padding: 2px 0px 0px;
    }
    .inputLogin {
     font-family: Arial, Helvetica, sans-serif;
     color: #333333;
     text-decoration: none;
     background-image: url(http://www.damjanator.ch/projects/sr.../input_bgd.gif);
     background-repeat: no-repeat;
     background-position: right top;
     height: 15px;
     width: 101px;
     border: 1px solid #5391D0;
     font-size: 11px;
     margin: 0px;
     padding: 0px 1px;
    }
    .loginBTN {
     background-color: #CBDEF1;
     border: 1px solid #38618C;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     font-weight: bold;
     color: #38618C;
     text-decoration: none;
     margin: 0px;
     padding: 0px 1px;
    }
    .spacer {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 5px;
     color: #333333;
     text-decoration: none;
     margin: 0px;
     padding: 0px;
     height: 3px;
    }
    .loginFont {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #38618C;
     text-decoration: none;
    }
    div#login_section a, div#login_section a:visited {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 10px;
     color: #274563;
     text-decoration: underline;
    }
    div#login_section a:hover, div#login_section a:active {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 10px;
     color: #274563;
     text-decoration: none;
    }
    div#content a, div#content a:visited {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     color: #BF0700;
     text-decoration: underline;
    }
    div#content a:hover, div#content a:active {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 11px;
     color: #BF0700;
     text-decoration: none;
    }
    .imgFloatRight {
     margin: 15px 0px 0px;
     padding: 0px;
     float: right;
     width:184px;
    }
     
    
    </style>
    </head>
    <body>
    <div id="container">
     <div id="top"></div>
     
      <div id="leftnav">
     <div id="main_navigation">
      <ul>
       <li><a href="#">Proizvodni program</a></li>
       <li><a href="#">Reklamni prostor</a></li>
       <li><a href="#">Online narudžbenica</a></li>
       <li><a href="#">O nama</a></li>
       <li><a href="#">Klijenti</a></li>
       <li><a href="#">Kontakt</a></li>
      </ul>
     </div>
      <div id="vesti"><img src="http://www.damjanator.ch/projects/sr...esti_title.gif" alt="Najnovije vesti" width="175" height="35" border="0" />
    	<p><span class="vestiDatum">18. Jul '04 -</span> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tincidunt. Sed pellentesque enim vitae urna...&nbsp;<a href="#">detaljnije</a></p>
      </div>
      <div id="login_section"><img src="http://www.damjanator.ch/projects/sr...ogin_title.gif" alt="Login sekcija" width="175" height="36" border="0" />
       <form name="login" action="" method="post">
    	<table width="175" border="0" cellspacing="0" cellpadding="0">
    	 <tr>
    	  <td width="72" align="right" class="loginFont">Username:&nbsp;</td>
    	 <td width="103"><input name="username" type="text" class="inputLogin" /></td>
    	 </tr>
    	 <tr>
    	   <td colspan="2" class="spacer"></td>
    	  </tr>
    	 <tr>
    	   <td align="right" class="loginFont">Password:&nbsp;</td>
    	  <td><input name="password" type="password" class="inputLogin" /></td>
    	  </tr>
    	 <tr>
    	   <td colspan="2" class="spacer"></td>
    	  </tr>
    	 <tr align="right">
    	   <td colspan="2"><input name="login" type="submit" class="loginBTN" value="login" /></td>
    	  </tr>
    	 <tr>
    	   <td colspan="2" class="spacer"></td>
    	  </tr>
    	 <tr align="left">
    	   <td colspan="2"><a href="#">Zaboravili ste password?</a></td>
    	  </tr>
    	</table>
       </form>
      </div>
     </div>
     <div id="content">
       <div id="help_menu"><a href="#">Home</a><img src="http://www.damjanator.ch/projects/sr...menu_arrow.gif" alt="" width="6" height="6" border="0" /><a href="#">Proizvodni program</a><img src="http://www.damjanator.ch/projects/sr...menu_arrow.gif" alt="" width="6" height="6" border="0" />
       Svetlec'a reklama SR7050s</div>
      <h1>Termo-oblikovana svetlec'a reklama SR7050</h1>
       <img src="http://www.damjanator.ch/projects/sr...ts/sr_7050.jpg" alt="Termo-oblikovana svetlec'a reklama SR7050" width="184" height="148" border="0" class="imgFloatRight" />
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tincidunt. Sed pellentesque enim vitae urna. Suspendisse pede velit, vestibulum in, porttitor quis, sagittis sit amet, neque.</p>
       <p>Donec interdum, magna quis luctus auctor, metus magna consectetuer massa, in volutpat dolor sapien a mauris.</p>
       <p>Ukoliko ste zainteresovani za ovaj model svetlec'e reklame, popunite <a href="#" title="Online narudzbenica">online narudžbenicu</a> i bic'ete kontaktirani u najkrac'em moguc'em roku.</p>
     </div>
     <div id="footer"></div>
    </div>
    </body>
    </html>
    paul

  5. #305
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul O'B again,

    First of all sorry for short description of my problem. I'm not native englishman so because of that sorry for my bad english Here is explanation of my Firefox problem with mentioned left column. PLease take a look of this 2 images below. The first image is a screenshot from IE 6.0 and the second one is from Firefox.



    As you can see this menu looks great in IE but the problem occur in Firefox. Please make attention of the bottom side of main menu. Do you see this needless space below "Kontakt" link? I want to remove that uneccessary space. How to do that?? I think the problem is in css margin interpretation for id="main_navigation"? But maybe I wrong This is the forst problem.

    The second problem is in vertical align of <li> elements. Do you see what I mean? So that's the second problem.

    I hope this my explanation help you to see the major problems with this left column

    thanks in advance Paul,
    Jazz

  6. #306
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Try changing the height in the list to 22px.

    Code:
    div#main_navigation ul li {
     padding: 0px;
     list-style-type: none;
     height: 22px;
    etc.....................
    That seems to even things up.

    You should also take a close look at the code above in my first post as it fixes a number of problems. Notice that your right image (in the content) doesn't float properly in firefox because of the way you have handled the floats. It is fixed in my code above.

    Hope that helps. anyway

    paul

  7. #307
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Philippines
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, i was using the 3 column content first layout, and then took out the right column to make it 2 columns. but i find that lower than 800x600 res, the left column drops down, is there a better solution to this?

  8. #308
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by kzap
    Hi Paul, i was using the 3 column content first layout, and then took out the right column to make it 2 columns. but i find that lower than 800x600 res, the left column drops down, is there a better solution to
    Hi,

    I'd need to see the code you were using to tell exactly whats happening. Usually when an image is to big for the float then the float will drop to find room and is difficult (and impossible) in some situations to counteract.

    Heres a 2 column example with a lrge image in the second float that doesn't cause float dropping.

    http://www.pmob.co.uk/temp/2colum_so...der_image3.htm

    Hope thats what you were looking for.

    Paul

  9. #309
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Philippines
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes actually that was , but im not sure what the problem was, i tried what you had and it was still dropping, then i took out the <div id="minHeight"> safari hack and it worked!
    I think the safari might cause dropping at lower resolutions/smaller window sizes

  10. #310
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I think the safari might cause dropping at lower resolutions/smaller window sizes
    Yes it does in ie but mozilla is ok so just add the child selector to it and you will keep safari happy as well

    Code:
    html > body  #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper/
    Paul

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

    For anyone thats still interested Heres a 3 column version that should work in ie5 mac and still have the impression of 100% height which has been hard to do simply.

    http://www.pmob.co.uk/temp/mac3column.htm

    The layout just uses one extra inner wrapper for mac so its not too bad semantically. The only problem is that mac must stay in quirks mode which is html4.1 without the uri. The code is still valid and works in modern browsers so theres no real problem.

    I would be grateful for any feedback (e.g. does it work in ie5+mac and does it break in any of the browsers listed).

    If its any use then just borrow the code

    Paul

  12. #312
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    East Hartford, CT
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First - Paul, you're a genius.

    I'm using your 3 column layout with equalizing columns and footer as I try to take a static 800x600 layout (762px wide, actually) and turn it into a CSS-based layout that will work at a variety of resolutions.

    Here's my problem, and I hope you can offer some advice. In the center column, I used to have a 375px table - the top row had a repeating jpg for a background, and was split into two columns so I could have a bolded text heading that was left-justified, and a few words of regular text in the same row that was right justified. The rows under the top one had a white background with black text, and the entire table has a 2 pixel border. You can see it by clicking the link in my sig - scroll down to the area under the photograph.

    In trying to duplicate it using CSS, I added the following to your brilliant stylesheet:

    #currentbox{
    border-width: 2px;
    border-style: solid;
    width: 100%;
    }
    #toprow{
    width: 100%;
    height: 20px;
    font-family: arial, verdana, sans-serif;
    font-weight: bold;
    font-size: 9px;
    color: #FFFFFF;
    }

    And in my HTML file, the following:

    <div id="centercontent">
    <div id="currentbox">
    <div id="toprow" style="background: url(grad2.jpg) repeat">
    Here is some test text.
    </div>
    And here's a bunch of text underneath it.
    </div>
    </div>

    I've looked at it in three browsers, and none of them get it right.

    IE 6 leaves a 2px margin between the top of the column and the top of the box, and a 3px margin at each side. I want it to butt up against the floats.

    Netscape 7 adds the 2px gap at the top, and allows the box (and the border) to overlap the right column.

    Opera displays the box perfectly, but it's down at the bottom of the page; it looks like it has placed the box below the content in the left column.

    If you want to see an example, I'm putting the new page together at http://www.imusicians.com/newindex.php

    Thanks for any help. I've been scratching my head over this one for an hour now.
    imusicians.com
    The new website for musicians.
    More features. Less money. And a lot less bull.

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

    The gaps in ie are the three pixel jog and are accounted for in my main demo width negative margins. The top gap is probably the clearheader element that just needs tweaking.

    This should get it working in ie and moz.
    Code:
    * html #left {margin-right:-3px}
    * html #right {margin-left:-3px}
    #clearheader{height:90px;}/*needed to make room for header*/
    #currentbox{
    border-width: 2px;
    border-style: solid;
    }
    #toprow{
    height: 20px;
    font-family: arial, verdana, sans-serif;
    font-weight: bold;
    font-size: 9px;
    color: #FFFFFF;
    }
    Don't use width and add borders (or padding) as you will run into box model problems. (especially not 100% plus 2px borders as the element will be 100% wide +4px.

    You really should also use a doctype for more consistent results and the ie6 uses the correct box model. (However yopu will still have to cater for ie5 and 5.5. which is why its best to avoid adding padding (and borders where critical) to the outer element but apply padding to nested inner elements instead.)

    I haven't looked at opera yet but I'll just go and have a look now

    Paul

  14. #314
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Opera seems to be ok with the changes I posted above. It was the 100% width plus the borders making the element too wide and Opera dropped it down to try and find space.

    Paul

  15. #315
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    East Hartford, CT
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did it, works like a charm in those three browsers.

    Did I mention you were a genius?

    Thanks,
    Neil
    imusicians.com
    The new website for musicians.
    More features. Less money. And a lot less bull.

  16. #316
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    East Hartford, CT
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will ask this question in this thread in case there are pecularities to how I would make it work in Paul's layout.

    Let's say I want to have a graphic that will resize to match the width of the center column, while maintaining its aspect ratio.

    Any suggestions on how I would go about this, without messing up the rest of the CSS?

    Thanks,
    Neil
    imusicians.com
    The new website for musicians.
    More features. Less money. And a lot less bull.

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

    You'd need some sort of script to do that.

    You could simply place your image using percentage height and widths but that would just resize but not maintain aspect ratio.

    You could put the image in the background as per normal and just let it show the part that is viewable as the screen resizes. Obviously this means parts of the image are hidden at small sizes and does not expand when the are is bigger than the image.

    Other than that you are left with finding a script that will dynamically preserve the aspect ration while resizing the image to fit the div.

    Might be a more suitable question for the javascript forum as scripting is not my area .

    Paul

  18. #318
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    East Hartford, CT
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I can specify a background image to have a height and width by percentage, and it won't mess things up?

    Excellent.

    Thanks again, Paul.
    imusicians.com
    The new website for musicians.
    More features. Less money. And a lot less bull.

  19. #319
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    No the image would need to be in the foreground to scale with the div.
    e.g.
    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>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    img#test {
     width:20%;
     height:10%;
    }
    </style>
    </head>
    <body>
    <img id="test" src="images/img.jpg"  alt="test" /> 
    </body>
    </html>
    If the image is in the background the div will resize but the image will just show whatever is viewable.

    Hope that makes sense. Just try it out and you'll see what I mean


    Paul

  20. #320
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello dudes

    I have one very complex layout to do and need your help guys. So for the beginning here is a mock-up of my layout . I need a css based layout for this mock-up. As you can see left, main content and right column should has the same height. I just need a basic thoughts about layout (the best solution) so you can use just a solid colours to fill columns or you can just use a border or whatever you what. The major point is to find the best css coding solution for layout.

    thanks guys,
    Jazz

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

    Is the layout to be a fixed size?

    If it is then the columns can be created with background gifs to give you the effect you want.

    If its a fluid layout then things become a lot more difficult so I'll wait to see exactly the design is before offering some code .

    Paul

  22. #322
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul,

    How are you today? I hope you are very well Here is some more info about this layout. Left, middle and right column should has a fixed width but expandible height and that height should be the same for all columns. The longest column height should be reference for height for other columns. You know what I mean. So left column width is 223px, middle column width is 546px and right column width is 200px. Space between columns and body margins should be 8px. Width of this orange rect below main navigation is 776px and it's fixed. But the height should be expandible too. Main navigation will be css based navigation. So the major point is to get columns with the same height and that height should be expandible like as is in mock-up. Right now I need just a basic layout structure which will be cross browser and SEO compatibile. After that we will diskuss about menu, background images, etc etc... If you need to know some more staff about layout please let me know.

    thanks for help man I appriciate that,
    Jazz

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

    Well this is what i came up with

    http://www.pmob.co.uk/temp/3colcentred1001.htm

    It has equalising columns because the columns are made by the background gif which looks like this:

    http://www.pmob.co.uk/temp/images/bgyellowcentred.gif

    You will have to be creative in adding embellishments as you need to preserve the background image etc. You should be able to absolutely place some corner gifs and borders where necessary.

    you can't baclground colours to the columns without rubbing out the background and there should be no need to do this anyway.

    The page has 100% height or document height if greater than 100% (however that doesn't work in ie mac but shouldn't be much of a problem).

    You will need to check the box model for ie5 and ie5.5. (where borders are added to widths etc).

    Hope its of some use.

    Paul

  24. #324
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks man Right now I'm working on it so we will talk soon

    best,
    Jazz

  25. #325
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello again,

    I have a problem with this custom corners for columns. Here is a mockup how mentioned corners should look like.

    I tried to use top and bottom DIV's for top and bottom columns corners but without any success Do you have any idea how to do that???

    Here is html file what I tried and here is a css files for basic layout and page styling.

    Please help me with this...


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
  •