SitePoint Sponsor

User Tag List

Page 12 of 66 FirstFirst ... 289101112131415162262 ... LastLast
Results 276 to 300 of 1630
  1. #276
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't find words to thank you Paul O'B! I was spent almost 4 days to find a solution but all my efforts was ineffective. I knew that I need to put one more cleaner but I didn't know where. I tryed that but without any result. Also can you tell me why I can't use selector for div#cleaner instead of class? I suppose that this is a newbie questions but I'm a really newbie in this css layout design.

    Once again thanks a lot Paul O'B! You are the best mentor I had ever seen before!

  2. #277
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    [quote]
    why I can't use selector for div#cleaner instead of class? I suppose that this is a newbie questions but I'm a really newbie in this css layout design.
    [/code]

    Well you could use id but the rules are that you can only use an id once uniquely per page. Therefore you would not be able to use it again for other places.

    A class is re-usable and can be used as many times as you like. An id can only be used once and should refer to unique elements. Although most browsers will let you use multiple id's the code will not validate and is bad practice. (It will of cousre upset any dom scripting that is looking for unique element etc.)

    Hope that helps and glad that things are working now

    Paul

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

    I have one more problem with this 3 columns layout Now all elements on the page looks great but I want to add one more element. I tryed to implement that element but without any result How to place this blue rect in the lower right corner like it is on this image below. This image should be always at the bottom of the right column independently of right column content. Unfortunately, I don't have any idea how to do that with div or without it.



    html file: http://www.damjanator.ch/css/layout.html
    css file: http://www.damjanator.ch/css/layout.css

    thanks in advance,
    Jazz

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

    You will need somewhere consistent in order to place it. Its probably best if you place it from the footer and draw it upwards in to place.

    Code:
    #footer {
     clear: both;
     background-image: url(http://www.damjanator.ch/css/images/footer_bgd.gif);
     background-repeat: repeat-x;
     background-position: left top;
     height: 41px;
     margin: 0px;
     padding: 0px;
     background-color: #FFFFFF;
     position:relative;
    }
    div#right_bottom {
     margin: 0px;
     padding: 0px;
     background-image: url(http://www.damjanator.ch/css/images/top_blue.gif);
     background-repeat: no-repeat;
     background-position: left top;
     height: 17px;
     width: 210px;
     background-color: #0075B8;
     position: absolute;
     top: -17px;
     right: 0px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #FFFFFF;
     text-decoration: none;
     text-indent: 6em;
     text-align: left;
    }
    .padder {
     padding: 0px  0 17px 0;
     margin: 0px;
    }

    Code:
    <div id="footer">
     <div id="right_bottom"></div>
     <ul id="footer_list">
    I've added some padding to your padder element to keep it clear but its probably not needed.

    Paul

  5. #280
    SitePoint Enthusiast jasmanac's Avatar
    Join Date
    Jan 2004
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Paul! I'm going to implement this part of code and back to you with the final layout

    best,
    Jazz

  6. #281
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there

    I have just been reading this thread and hope that you can offer some assistance with what I am trying to achieve.

    Best bet is to look at attached screenshot

    http://www.themediakitchen.co.uk/layout.jpg

    I basically want to have a two column layout with a header, navbav, breadcrumb and footer. I would also like both columns to stretch the whole length of browser so footer is always at the bottom.

    I need it to work in IE, Opera and Firefox. Firefox seems to be the one causing me the most problems.

    Would be very grateful if you could show me the code necessary to achieve this.

    Many thanks

    Paul
    Attached Images Attached Images

  7. #282
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there

    I would like my two columns to stretch to fill browser window with footer at bottom. If the content is longer than browser window then footer will not be visible but always remain at bottom of content. However if content isnt as long then footer will always be at bottom of page and content will stretch to fill browser window.

    I am trying to use a background gif inside the content div which I want to stretch the length of page.

    Would really appreciate any help. The code I am using I have taken from another example but I cannot get it to work.

    Many thanks

    Paul

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <HTML>
    
    <HEAD>
    
    <TITLE>Site Layout</TITLE>
    
    
    <BODY>
    
    <style>
    
    
    html, body {height:100%}
    
    body {
    		margin: 0;
    		padding: 0;
    		font: x-small arial, hevetica, sans-serif;
    		text-align: center;
    		color: #000;
    		background-color: #fff;
    }
    		
    html>body #container {height:auto;}
    
    #container {
    		margin: 0 auto;
    		width: 740px; 
    		height:99.8%;
    		min-height:100%;
    		text-align: center;
    		background: transparent url(bg_mid.gif) repeat-y;		
            	position:relative;
    		}
    
    html>#container {height:auto}
    
    #contents {
    
    }
    
    
    	
    #header {
    		position:absolute;
    		left:20px;top:0;
    		height: 60px;
    		width:700px;
    		text-align: center;
    		background-color: blue;		
    		
    }
    
    #mainnav {
    		position:absolute;
    		left:20px;top:60px;
    		height: 30px;
    		width:700px;
    		text-align: center;
    		background-color: red;		
    		
    }
    
    #breadcrumb {
    		position:absolute;
    		left:20px;top:90px;
    		height: 20px;
    		width:700px;
    		text-align: center;
    		background: pink;	
    		
    }
    
    #main {
    		position:absolute;
    		left:20px;top:110px;		
    		width:700px;
    		text-align: center;
    		background: transparent url(content_bg.gif) repeat-y;		
    		
    }
    
    #sidebar {
    		float: right;
    		width: 250px;
    		padding:5px 0 ;
    		background-color: yellow;		
    		}
    
    
    #content {
    		width: 440px;
    		padding:5px 0 ;
    		}	
    
    
    
    
    	
    #footer	{
    		position:absolute;
    		left: 20px;
    		bottom:0;
    		width:700px;
    		height: 24px;
    		background-color: #EDEDF8;
    		text-align: center;
    		
    		}
    
    
    
    #clearfooter {height:27px;width:100%;clear:both}
    
    
    </style>
    
    <DIV id=container>
    
    	<div id = "contents">
    
    		<DIV id=header>
    			Header
    		</DIV>
    
    		<DIV id="mainnav">
    			navbar
    		</DIV>
    
    		<div id = "breadcrumb">
    			breadcrumb
    		</div>
    
    
    		<DIV id="main">
    			
    
    			<DIV id="sidebar">
    				<P>Sidebar content goes here 
    			</DIV>
    
    			<DIV id="content">
    				<P>Main left hand side content goes here</p>
    			</DIV>
    
    		</DIV>
    
    
    		<DIV id=clearfooter></DIV><!-- to clear footer -->
    
    
    		<DIV id=footer>
    			<P>Footer Content</P>
    		</DIV>
    
    	</div>
    
    </DIV>
    
    </BODY>
    
    </HTML>

  8. #283
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I've just seen your message but I'm just going out for the day but I will reply later with the answer when I get back

  9. #284
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wicked! I look forward to your reply because I cannot work this out

    I have uploaded what I have so far

    http://www.themediakitchen.co.uk/2column_layout2.htm

    Many thanks

    Paul

    btw ideally I would like to have a 10 pixel white space between the header, nav, and breadcrumb. So if you could also let me know the best way to do this

    You can see what I mean here

    http://www.themediakitchen.co.uk/layout.jpg

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

    You have made a few errors in that you have absolutely placed some elements which means that they will just overwrite following elements. Elements need to be in the flow if the are to exert pressure on content below such as a footer etc.

    The shadowed background needs to go on the body element because you can only use two 100% elements (when nesting) for browsers apart from ie.

    The column backgrounds can then go on the main container and will be 100% high.

    Note that ie has a rounding bug on the background image and on odd pixels it will be 1 pixel out so don't try and push anything right to the edge or it will notice.

    The margins between elements will need to be solid white borders because if you use margins then the background image will show through.

    Heres your code tidied up which should do what you want. You will of course need tyo go through and sort any box model problems for ie5 and 5.5. where padding and borders need to be accounted for in the elements dimensions.

    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">
    /* commented backslash mac hack \*/ 
    html, body{height:100%;} 
    /* end hack */ 
     
    body {
    margin: 0;
    padding: 0;
    font: x-small arial, hevetica, sans-serif;
    text-align: center;
    color: #000;
    background: #fff url(http://www.themediakitchen.co.uk/bg_mid.gif) repeat-y center top; 
    }
    #container {
    margin: 0 auto;
    width: 740px; 
    min-height:100%;
    text-align: center;
    background: transparent url(http://www.themediakitchen.co.uk/content_bg.gif) repeat-y center top; 
    		position:relative;
    margin-bottom:-44px;/*make room for footer*/
    }
    * html #container{height:100%}
    #header {
    margin-left:auto;
    margin-right:auto;
    border-top:10px solid #fff;
    border-bottom:10px solid #fff;
    height: 60px;
    width:700px;
    text-align: center;
    background-color: blue; 
    }
    #mainnav {
    margin-left:auto;
    margin-right:auto;
    height: 30px;
    width:700px;
    text-align: center;
    background-color: red; 
     
    }
    #breadcrumb {
    margin-left:auto;
    margin-right:auto;
    border-top:10px solid #fff;
    border-bottom:10px solid #fff;
    height: 20px;
    width:700px;
    text-align: center;
    background: pink; 
    }
    #main {
    margin-left:auto;
    margin-right:auto;
    width:700px;
    text-align: center;
    background: transparent url(content_bg.gif) repeat-y; 
    }
    #sidebar {
    float: right;
    width: 250px;
    padding:5px 0 ;
    background:yellow;
    }
    #content {
    width: 440px;
    padding:5px 0 ;
    text-align:left;
    } 
    #footer {
    margin-left:auto;
    margin-right:auto;
    width:700px;
    height: 24px;
    background-color: #EDEDF8;
    text-align: center;
    border-top:10px solid #fff;
    border-bottom:10px solid #fff;
    position:relative;
    }
    #footer p {margin:0}
    #clearfooter {height:40px;width:100%;clear:both}
     
    </style>
    </head>
    <body>
    <div id="container"> 
    	<div id="header"> Header </div>
    	<div id="mainnav"> navbar </div>
    	<div id ="breadcrumb"> breadcrumb </div>
    	<div id="main"> 
    	 <div id="sidebar"> 
    		<p>Sidebar content goes here</p>
    	 </div>
    	 <div id="content"> 
    		<p>Main left hand side content goes here</p>
    </div>
    	</div>
    	<div id="clearfooter"></div>
    	<!-- to clear footer -->
    </div>
    <div id="footer"> 
    <p>Footer Content</p>
    </div>
    </body>
    </html>
    Hope that's what you wanted.

    Paul

  11. #286
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow - thank you ever so much that is perfect!

    Popping out now but will have a good look at the code later

    Many thanks

    Paul

  12. #287
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry but I am having problems again.

    I cannot get the content to line up on the left hand side - there appears to be a gap i.e the text with the 1 pixel black borders.

    http://www.themediakitchen.co.uk/layout.htm

    Any help much appreciated

    Cheers

    Paul

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

    Its ok in firefox if you mean the element named content.

    The problem is with ie in that text-align:center is centering your block level elements.

    Change these two elements to text-align:left as below.
    Code:
    #container {
     min-height: 100%;
     background: url(http://www.themediakitchen.co.uk/content_bg.gif) repeat-y center top;
     margin: 0px auto -44px;
     width: 740px;
     position: relative;
     text-align: left
    }
    #main {
     background: url(http://www.themediakitchen.co.uk/content_bg.gif) repeat-y;
     margin-left: auto;
     width: 700px;
     margin-right: auto;
     text-align: left;
    }
    If that's the problem you were talking about then the above should solve it.

    Paul

  14. #289
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow - you are good!

    http://www.themediakitchen.co.uk/layout.htm

    Just how I wanted it.

    Thanks ever so much

    Paul

  15. #290
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah pants I have noticed a problem

    If you resize firefox, footer moves above content

    http://www.themediakitchen.co.uk/layout.htm

    Any ideas?

    P

  16. #291
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You've missed the asterisk out :
    Code:
    HTML #container {
     height: 100%
    }
    It should be:
    Code:
    * html #container {
     height: 100%
    }
    Paul

  17. #292
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Totally awesome! Thanks

    One other small thing (eep sorry!)

    When you reduce the width of browser the footer moves to left. Is this preventable?

    Thanks again

    P

  18. #293
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  19. #294
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,347
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You'd need to wrap the footer in another element to even things out.

    Code:
    #footer {
     width: 740px;
     position: relative;
     margin-left:auto;
     margin-right:auto;
    }
    #footerinner {
     border-top: #fff 10px solid;
     border-bottom: #fff 10px solid;
     background-color: #ededf8;
     text-align: right;
     margin:0 20px;
     height: 24px;
    }
    Code:
    <div id="footer"> 
    <div id="footerinner">
      <p><a href="mailto:info@mediakitchen.co.uk" title="Click here to email mediakitchen">info@mediakitchen.co.uk</a></p>
    </div>
    </div>
    Paul

  20. #295
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul

    You deserve a knighthood for your outstanding help on my site. You certainly know your stuff - how long did it take you to get to grasps with all this css malarkey - did you read a book? You should certainly consider writing one

    Thank you again for such swift assistance.

    Cheers

    Paul

  21. #296
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eep I am back again

    Just one more thing then hopefully the site is sorted.

    The pages that display the games needs to have a black background and not two columns

    See http://www.themediakitchen.co.uk/por...s_spacefox.htm

    This page still uses my old code so it is more a case of amending one of the other pages like http://www.themediakitchen.co.uk/home.htm to be able to display the games.

    Any idea how I can make the area black on these pages and not show the two column "content_bg.gif"

    Hopefully I will leave you in peace after this one

    Cheers

    Paul

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

    Give the games pages an id in the body.
    Code:
    <body id="games">
    Then you can directly address those pages in the stylesheet only.
    Code:
    #container {
     min-height: 100%;
     background: url(http://www.themediakitchen.co.uk/content_bg.gif) repeat-y center top;
     margin: 0px auto -44px;
     width: 740px;
     position: relative;
     text-align: left
    }
    body#games #container {background:none}
    #main {
     background: url(http://www.themediakitchen.co.uk/content_bg.gif) repeat-y;
     margin-left: auto;
     width: 700px;
     margin-right: auto;
     text-align: left;
    }
    body#games #main {background:#000}
    Paul

  23. #298
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thankyou thankyou thankyou!

    Now the only thing not quite right is that the black is not filling the entire background

    http://www.themediakitchen.co.uk/por..._spacefox2.htm

    I would quite like it to stretch down to just above the header. Is this possible?

    Otherwise I can just leave it white

    http://www.themediakitchen.co.uk/por...s_spacefox.htm

    Thanks

    Paul

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

    Not sure if this is what you mean but you can set the container to black as well.
    Code:
    body#games #container {background:#000}
    Paul
    Edit:


    If that's not what you meant then you can always change your 10px white borders on your header and breadcrumb to black as well.

  25. #300
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul

    Thank you for yet another reply to my endless problems and sorry for the delay in getting back to you on this one.

    Basically what I meant was to have the background behind the screenshots and games black as in

    http://www.themediakitchen.co.uk/black_background.jpg

    Currently it is white.

    http://www.themediakitchen.co.uk/por...cdroms_art.htm

    I did try body#games #container {background:#000}
    but it didnt seem to do the job.

    Thanks

    Paul


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
  •