SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Images in list not showing side by side

    The four images img1, img2, ig3 , img4 that are acting as tabs should be next to each other not in a vertical line. I put in list-style-none but that doesn;t work. How do I make them line up horizontally? Thank-you
    http://bit.ly/bPhoJi

    PS Any comments on css also greatly received

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Just float the <li>
    Code:
    ul.simpleTabsNavigation li{float:left;}
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank-you Ryan! That works great. I still have a problem though with the footer as it isn't going to the bottom of the page. How can I change this? Thanks

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Look into the sticky footer
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan I'll do that. Last question please-I can't seem to get rid of the grey boxes above each a href in the centre of the page. How do I get rid of these please? Thank you
    http://bit.ly/bPhoJi
    Last edited by Bayliss Trevor; Feb 17, 2010 at 15:36. Reason: added url

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The gray squares are just the anchors background
    Code:
    ul.simpleTabsNavigation li a {background:none;}
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  7. #7
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thanks Ryan that works great. I have been trying various implementations of the sticky footer link you sent but it doesn't seem to work because strcuturally my footer is inside the main div. If I take it out and put it on its own at the end then the main div collapses. What should I use? Min height on the main div? http://bit.ly/bPhoJi TIA

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Try this, I commented the CSS, and moved the footer outside
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
    
    strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
    <head>
    <base href="http://copywritecolombia.com/index3.html" />
    <title></title>
    <meta name="description" content="" />
    <link media="screen" href="css/test.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="js/simpletabs_1.3.js"></script>
    <style>
    html,body{height:100&#37;;}/*Allow for 100% height*/
    #footer
    {
    	margin:20px auto 0;/*Horz center*/
    }
    #wrapper
    {
    	min-height:100%;/*Min-height instead to allow for expansion*/
    	height:auto;/*just remove the height you set*/
    	margin-top:-72px;/*total footer height*/
    	overflow:hidden;/*contain floats*/
    	padding-bottom:0;
    }
    * html #wrapper{height:100%;}/*IE6 min-height*/
    #header
    {
    	border-top:72px solid transparent;/*total footer height*/
    	overflow:hidden;/*contain floats*/
    	width:100%;/*IE6 contain floats*/
    }
    body:before {/* thanks to Maleika (Kohoutec)*/
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;/* thank you Erik J - negate effect of float*/
    }
    </style>
    <!--[if (lte IE 6)|(gte IE 8)]>
    <style type="text/css">
    #outer {height:100%;display:table;}
    </style>
    <![endif]-->
    </head>
    
    
    <body>
    
    
    <div id="wrapper">
    <div id="header">
    <div class="block one">
    <a href="">
    <img src="logo.jpg" width="275" height="31" alt="" style="float:left;" />
    </a>
    <p class="tag" style="font-size:80%;">tagline tagline tagline tagline tagline<br/>tagline tagline 
    
    tagline tagline</p>
    </div>
    
    <div class="block two">
    <img src="freephone.gif" alt="" width="180" height="75" style="float:left;" />
    </div>
    
    
    <div class="block three">
    <span style="margin-bottom:5px;font-size:70%;float:right;">
    <strong style="padding-right:10px;">To see your account log in</strong> 
    <a href="" style="font-size:80%;">remember password</a>
    </span>
    <br/>
    <span style="padding-top:5px;float:right;">
    <label for="name"><span style="font-size:80%;">user:</span></label>
    <input id="name" class="forminput" type="text" />
    <label for="name"><span style="font-size:80%;">password:</span></label>
    <input id="pass" class="forminput" type="text" />
    <input value="enviar" class="formsub" type="submit" />
    </span>
    </div>
    
    </div>
    <div id="mainnavcontainer">
    <ul class="nav">
      <li><a href="" title="">link</a></li>
      <li><a href="" title="">link</a></li>
      <li><a href="" title="">link</a></li>
      <li><a href="" title="">link</a></li>
    </ul>
    </div>
    
    
    
    <!-- left navigation -->
    <div id="main">
    <div id="leftnav">
    <span class="">link link</span> <br />
    link link <br />
    link link <br />
    link link <br />
    link link <br />
    link link <br />
    link link <br />
    link link <br />
    </div>
    
    
    <!-- center content -->
    <div id="maincontent">
    <h1>header</h1>
    <div style="padding:0;margin:0;">text text text text text text text text text text text text 
    
    texttext text text text text texttext text text text text texttext text text text text texttext text 
    
    text text text texttext text text text text texttext text text text text texttext text text text 
    
    text texttext text text text text text</div>
    
    
    <!--
    <object style="visibility: visible;" id="mycontent" data="index2_files/front.swf" 
    
    type="application/x-shockwave-flash" width="476" height="380"><param value="true" 
    
    name="allowfullscreen" /></object>-->
    
    <div style="padding:0;margin:0;">
      <div class="simpleTabs" style="background: url('backform1.jpg') no-repeat;padding-top:19%;">
            <ul class="simpleTabsNavigation">
                <li><a href="#" rel="nofollow"><img src="img1.jpg" alt="" width="99" height="125" 
    
    /></a></li>
     <li><a href="#" rel="nofollow"><img src="img2.jpg" alt="" width="99" height="125" /></a></li>
      <li><a href="#" rel="nofollow"><img src="img3.jpg" alt="" width="99" height="125" /></a></li>
       <li><a href="#" rel="nofollow"><img src="img4.jpg" alt="" width="99" height="125" /></a></li>
            </ul>
       
    		<div class="simpleTabsContent">Content here to be called when "Tab 1" is 
    
    clicked.</div>
            <div class="simpleTabsContent">Content here to be called when "Tab 2" is clicked.</div>
            <div class="simpleTabsContent">Content here to be called when "Tab 3" is clicked.</div>
            <div class="simpleTabsContent">Content here to be called when "Tab 4" is clicked.</div>
        </div>
    
     </div>
    
     </div>
    <!-- right content -->
    <div id="bonusinfo">
    <h2>header</h2>
    <div id="navcontainer">
    <ul id="navlist">
    <li>right hand side text text text</li>
    <li>right hand side text text text</li>
    <li>right hand side text text text</li>
    <li>right hand side text text text</li>
    <li>right hand side text text text</li>
    <li>right hand side text text text</li>
    <li>right hand side text text text</li>
    <li>right hand side text text text</li>
    </ul>
    </div>
    </div>
    
    </div>
    
    
    
    </div>
    <!-- footer -->
    <div id="footer">
    <p class="footer"> 
    <a href="">link</a>&nbsp;&nbsp;|&nbsp; 
    <a href="">link</a>&nbsp;&nbsp;|&nbsp; 
    <a href="">link</a>
    <br />text text text text text text text text text</p>
    </div>
    
    </body></html>
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  9. #9
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://bit.ly/dhg6xI
    Awesome Ryan thanks, it is almost there-in latest versions of ie and ff (tested) the page seems to invoke the side scrollbar. I have added in backgorund color to the footer div and I think i will have to add in another div to fill in the remaining background in the centre with white.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The c ode I posted doesn't exhibit a scrollbar so you must have added something . Give me one second..

    On #wrapper you set a 1px border on all sides so no matter waht the 100&#37; higgh element will be
    100%+2px . THus the scrollbar will always appear
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  11. #11
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan that works great

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  13. #13
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The background is not showing between the last div and the footer as you can see http://bit.ly/dhg6xI, I have tried adding a new div to surround all the divs but that doesn't work. How can I do this-it seems like the background may not be compatible with this sticky structure? Also I tried to move the css fro the head to my css file but strangely it didn't work (even leaving the conditional css). How can I safely move it off? Thanks

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you mean the space between the footer and the content that's because you set a top margin on the footer. I assumed you wanted that.

    Remove the top margin on the footer and then lower the values on the #wrapper to -52px and put the value on #header to 52px
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  15. #15
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan thanks for the answer I did those changes but they don't work-they just put a scrollbar in and changed the position a bit.
    http://bit.ly/dhg6xI

    What I am aiming at is putting a white background where the squiggle is in this image:
    http://bit.ly/9uyYfc

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    If you mean the space between the footer and the content that's because you set a top margin on the footer. I assumed you wanted that.

    Remove the top margin on the footer and then lower the values on the #wrapper to -52px and put the value on #header to 52px
    Look at the bold .

    As for the horizontal space on the footer, just increase the width to match the wrapper
    Code:
    #footer {width:865px;}
    Yes the wrapper may be 845px but you add 10px left and right padding making that an extra 20px
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  17. #17
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ryan thanks for the reply, the width is sorted out on the footer div but there is still a socking great gap between the footer and the div wrapper. How do I get rid of it? Thanks
    http://bit.ly/bPhoJi

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That's just the sticky footer. THe goal of a sticky footer is to have the footer sit at the bottom of the screen if there isn't enough content, if there IS enough content the footer will be pushed down.

    Do you not want a sticky footer anymore?
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  19. #19
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan the min height sorted it out perfectly.

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!


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
  •