...

View Full Version : CSS Positioning help



mzpresto
08-06-2012, 07:26 PM
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



<!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




@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 :)

SB65
08-06-2012, 08:03 PM
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:


.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 (http://css.maxdesign.com.au/floatutorial/) for loads of info on floats.

mzpresto
08-06-2012, 09:21 PM
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!

:D

mzpresto
08-06-2012, 10:05 PM
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

mzpresto
08-06-2012, 10:26 PM
It's all in that link! Thanks I got it :D

SB65
08-07-2012, 07:31 AM
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!

:D

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

mzpresto
08-08-2012, 08:24 AM
Heh. Believe it or not I didn't spot that the site's for a cafe in Saltaire.....that I've been in.:rolleyes: 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:

http://rookery9.aviary.com.s3.amazonaws.com/15574500/15574949_15e5.png

http://rookery9.aviary.com.s3.amazonaws.com/15574500/15574948_8e2a.png

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! :thumbsup:

SB65
08-08-2012, 08:40 AM
Small world indeed...

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

mzpresto
08-08-2012, 05:19 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum