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 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts

    CSS Positioning help

    Hi

    I have tried to get my code a bit more organised before posting this time, but I am out of my depth now. I did get something to work after trial and error in Chrome Firefox etc, I use IE6 at work and it looks baaaad.

    I have about a foot of white spacing under my image and text... Also sometimes the scrolling marquee is higher up than it's containing box on some browsers

    I used a minus number on the position relative, which kind of worked but I guess there must be a better way would anyone mind taking a look at this code and telling me if it even makes sense??? Thanks

    Here is the test page I am trying to get right, ignore the links for now thanks

    http://vicarscafebistro.co.uk/test.html

    The HTML

    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>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
    
    <title>Vicars Cafe Bistro - Food For Thought</title>
    
    
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    
    
    <!-- //// Styles// --> 
    <link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
    <link href="css/styles.css" type="text/css" media="all" rel="stylesheet" />  
     
    <!-- // Scripts// --> 
    <script src="js/jquery-1.5.2.min.js"></script> 
    <script src="js/jquery.skitter.min.js"></script> 
    <script src="js/jquery.easing.1.3.js"></script> 
    <script src="js/jquery.animate-colors-min.js"></script> 
     
    <script> 
    $(function(){
      $('.box_skitter_large').skitter({label: false, numbers: false, interval: 4500});
    
     
    });
    </script>
    
    
    
    
    </head>
    
    <body>
    
    <div class="container">
    
      <div class="header"><!-- end .header --></div>
      
      
      <div class="menubg"><!-- end .menubg -->
      
      <div class="menucont"><!-- end .menucont -->
      
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="index.html">Home</a>        </li>
          <li><a href="#" class="MenuBarItemSubmenu">Menus</a>
            <ul>
              <li><a href="breakfast.html">Breakfast</a></li>
              <li><a href="lunch.html">Lunch</a></li>
              <li><a href="bistro.html">Bistro</a></li>
            </ul>
          </li>
          <li><a href="gallery.html">Gallery</a>        </li>
          <li><a href="group.html">Groups</a></li>
          <li><a href="contacts.html">Contact us</a></li>
          <li><a href="support.html">Support us</a></li>
        </ul>
        <!-- end .header --></div>
      
     <!-- end .menubg --></div>
      
    <div class="content">
    
    <div class="content2">
    
     		<div class="border_box"> 
    			<div class="box_skitter box_skitter_large"> 
    				<ul> 
    					<li><img src="Images/Vicars.jpg" class="cubeRandom" /></li> 
    					<li><img src="Images/large02.jpg" class="block" /></li> 
    					<li><img src="Images/large03.jpg" class="cubeStop" /></li> 
    				</ul> 
    			</div> 
    		</div> 
            
            <div class="front_text">
            
        <h3>What we are</h3>
        <p class="textspace">Vicars Café Bistro: a busy eatery in the very heart of the famous Saltaire World Heritage site.  We are run with a Christian outlook and a vision to serve the community, aiming to encourage people to look at Christianity in a different light.</p>
    <p>&nbsp;</p>
    <h3>When we began</h3>
    <p class="textspace">We have been open since 2007 and have achieved Social Enterprise status, and continue to provide high-quality homemade food from locally sourced and fair-trade ingredients, serving to a wide cross-section of the local community, as well as visitors and tourists.</p>
    <p>&nbsp;</p>
    <h3>Evening Bistro</h3>
    <p class="textspace">Alongside our busy café we run an evening Bistro on Fridays and Saturdays.  A selection of seasoned dishes (including meat, fish, and vegetarian options) are available, with a menu which changes on a monthly basis.  From a table for one to a group of 24, we can cater to your needs- if you’re planning a celebratory meal out, why not choose Vicars?</p>
    <p>&nbsp;</p>
    <h3>Whats on  </h3>
    <p class="textspace">We host several  group events in our <a href="group.html#Redroom">Red Room Lounge</a>, such as our popular weekday <a href="group.html#mum">Mum and Baby  Groups</a>, <a href="group.html#knit">&lsquo;Knitterati&rsquo;</a> knitting sessions, and weekend Storytelling group   <a href="group.html#story">'Tell Me Another'</a>. The Red Room is also available for local  artists to exhibit their work, and the space is available to hire for  events. We proudly continue to support  the efforts of local events and groups such as the Arts Trail and Saltaire  Festival.</p>
    <p>&nbsp;</p>
    <h3>What are you waiting for?</h3>
    <p class="textspace">Why not come along to Vicars, and try some of our fair-trade coffee, Cosy-Teas, delicious homemade food, all in good company and warm surroundings?</p>
    <p>&nbsp;</p>
    
    
    </div>
    </div>
        
    <!-- end .content --></div>
      
    <div class="footer">
    
    <p class="footertext"><marquee BEHAVIOR=SCROLL DIRECTION=Left width=940 SCROLLAMOUNT=10 SCROLLDELAY=120>
    New lunch menu is now available
    </marquee></p>
    
    <div class="footertext2">
    
    <ul>
    
    <li>Tel: 01274 597818</li>
    <li>Email: enquiries@vicarscafebistro.co.uk</li>
    <li>Address: 79 Victoria Road, Saltaire, West Yorkshire, BD18 3JS</li>
    <li class="footertext"></li>
    
    </ul>
    
    </div>
    
    <div class="footerbutton">
    <img src="buttons.png" alt="Social Media" width="200" height="70" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <area shape="rect" coords="0,0,63,61" href="https://www.facebook.com/pages/Vicars-Cafe-Bistro/108831007523" target="_blank" alt="Facebook" />
      <area shape="rect" coords="68,4,129,58" href="http://twitter.com/#!/VicarsCafe" target="_blank" alt="Twitter" />
      <area shape="rect" coords="133,5,187,61" href="mailto:vicarscafebistro@googlemail.com" alt="Email" />
    </map>
    </div>
    
    
    <!-- end .footer --></div>
          
    </div>
       
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    
    </body>
    
    </html>
    The CSS

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body {
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	background: #42413C;
    	margin: 0;
    	padding: 0;
    	color: #000;
    	background-color: #000000;
    	background-image: url(../Images/Gallery/bg.jpg);
    	background-repeat: repeat-x;
    }
    
    ul, ol, dl {
    	padding: 0;
    	margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {
    	float: none;
    	right: 0px;
    	bottom: 0px;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    	margin-top: 0;
    	margin-right: 0px;
    	margin-bottom: 0;
    	margin-left: 0px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: lighter;
    }
    
    h3 {
    	color: #279f95;
    	font-style: italic;
    	border-bottom-style: dotted;
    	border-bottom-width: thin;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	font-weight: bolder;
    }
    
    a img {
    	border: none;
    }
    
    a:link {
    	color: #42413C;
    	text-decoration: underline;
    }
    a:visited {
    	color: #6E6C64;
    	text-decoration: underline;
    }
    a:hover, a:active, a:focus {
    	text-decoration: none;
    }
    
    
    .container {
    	width: 1047px;
    	background: #FFF;
    	margin: 0 auto;
    }
    
    .menubg {
    	background-image: url(../menu.jpg);
    	height: 60px;
    	width: 1047px;
    	margin: 0 auto;
    }
    
    .menucont {
    	position: relative;
    	left: 38px;
    	width: 968px;
    	top: 9px;
    }
    
    .content2 {
    	width: 968px;
    	right: 50px;
    	left: 40px;
    	height: 655px;
    	margin-left: 40px;
    	margin-top: 5px;
    }
    
    .fltrt {
    	float: right;
    	margin-left: 8px;
    }
    .fltlft {
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat {
    	clear:both;
    	height:0;
    	font-size: 1px;
    	line-height: 0px;
    }
    .header {
    	background-color: #000;
    	background-image: url(../top3.png);
    	height: 231px;
    	width: 1047px;
    }
    
    .content {
    	background-image: url(../content.jpg);
    	background-repeat: repeat-y;
    	width: 1047px;
    	height: auto;
    	background-color: #000;
    	padding-top: 10px;	
    }
    
    .footer{
    	background-color: #000;
    	background-image: url(../bottom.png);
    	height: 198px;
    	width: 1047px;
    	background-repeat: no-repeat;
    	position: relative;
    }
    
    .footertext{
    	color: #033;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: normal;
    	text-align: center;
    	position: absolute;
    	top: 30px;
    	right: 50px;
    }
    
    .footertext2{
    	color: #a6ff91;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 9px;
    	font-weight: normal;
    	text-align: left;
    	position: absolute;
    	top: 80px;
    	left: 48px;
    	align:left;
    	width: 497px;
    	height: 76px;
    	font-style: italic;
    	text-decoration: none;
    }
    
    .footerbutton{
    	position: absolute;
    	top: 85px;
    	right: 37px;
    	align:right;
    }
    
    ul
    {
    	list-style-type: none;
    	color: #c8faee;
    	font-size: 16px;
    }
    
    .textspace {
    	padding-top: 5px;
    }
    
    .border_box {
    	position: relative;
    	left: 8px;
    	top: 0px;
    }
    
    .front_text {
    	position: relative;
    	left: 480px;
    	top: -650px;
    	width: 475px;
    }

    Thanks

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You have rightly identified that the problem is coming from the large negative top margin on .front_text. This moves the element up from its normal position in the flow of the document, giving you the layout you want but leaving the space the element would normally occupy as a large gap.

    Much better to use float on the elements here. Have a try replacing your css for the two elements here with:

    Code:
    .border_box {
        float: left;
    width:460px
    margin-left:8px;
    display:inline /*for IE6*/
    margin-right:12px
     }
    
    .front_text {
        float: left;
        width: 475px;
    }
    Try that for starters.

    Have a look here for loads of info on floats.

  • Users who have thanked SB65 for this post:

    mzpresto (08-06-2012)

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Awesome! Thanks SB65, that did the trick nicely!

    I also notice on your info it says you are from West Yorkshire!!??

    Small world! Same here!


  • #4
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts
    So if say I had 3 elements to line up could I keep using float left, or is that when you do a float left and a right?

    and if you want to start again use a clearing div?

    Thanks I'll read that link

  • #5
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts
    It's all in that link! Thanks I got it

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Quote Originally Posted by mzpresto View Post
    Awesome! Thanks SB65, that did the trick nicely!

    I also notice on your info it says you are from West Yorkshire!!??

    Small world! Same here!

    Heh. Believe it or not I didn't spot that the site's for a cafe in Saltaire.....that I've been in. I'm in Ilkley.

  • #7
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Heh. Believe it or not I didn't spot that the site's for a cafe in Saltaire.....that I've been in. I'm in Ilkley.
    Whoa!!! That's a pretty crazy coincidence! I'm in Bradford, my friend is running the Bistro so I am doing the website for a favour. It's my first go at it, while I am familiar with HTML, CSS is new to me, so I have been using Dreamweaver but you are limited to a certain degree when it comes to tweaking and that's when I get stuck

    The site is looking good now thanks for your help, but last question...

    On my phone it has some spacing next to the text on both pages, where as it didn't before even when I incoporated the slider when you first gave me that code so I must have done something and I can't figure it out:





    Here's the link, looks fine in my browsers:

    http://vicarscafebistro.co.uk/

    If I can work this out then all is sorted.

    Thanks in advance!

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Small world indeed...

    Don't have a smartphone, but the site looks OK to me using Opera Mobile Emulator.

  • #9
    New Coder
    Join Date
    Aug 2012
    Posts
    45
    Thanks
    15
    Thanked 0 Times in 0 Posts
    OK thanks - It's OK across every other browser,just not my phone, but it did work on my phone before I moved my styles into an external CSS file! Oh well I'll have a go with it when got more time!

    Thanks again


  •  

    Posting Permissions

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