Positioning problems - probably simple, but???? (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

paul rayner -> Positioning problems - probably simple, but???? (5/10/2005 7:10:00)

I've started a site at http://www.maranoa.org.au/agent/index.htm, and I'm trying to get it right before I add content. Here are my probs:
1. I want the whole block in the centre of my screen.
2. There sometimes appears a white space down the left hand side - I'd like to ditch that.
3. If you mouse over the menu bar, the menu "moves", and the white space that was down the side, disappears
4. there's a little white space above the footer - I want the nav section to go down to the footer.
5. I'd like to centre the image in the content section.

Also, I'd to add 2 boxes as sections below the image - small areas for teaser type content. I was going to try rounded corners, but I'm not even sure how to get the boxes there in CSS.

Here's my CSS:

body
{

font-family: georgia, times, "times new roman", serif;
color: #000;
background-color: #CCCCBB;
width:760px;
text-align: center;
}

#container
{
margin: 1em 5%;
background-color: #FFF;
background-image: url(images/background.jpg);
background-repeat: repeat-y;
border: 1px solid #333;
text-align:left;
}

#banner
{
background-color: #999966;
border-bottom: 1px solid #333;
}

#banner h1
{
margin: 0;
padding: .5em;
}

#nav
{
float: left;
width: 260px;
margin-left: 0px;
background-color: #DDDDCC;
padding-top: 1em;
margin-bottom: 0px;
}

#nav p {
margin-top: 0;
margin-left: 10px;
}

#content
{
padding-top: 1em;
margin: 0 2em 0 200px;
}

#content h2 { margin-top: 0; }

#footer
{
clear: both;
background-color: #999966;
padding: 1em;
text-align: right;
border-top: 1px solid #333;
}

/*Menu is below*/

#menu{
font: 12px Verdana, Arial, Helvetica, sans-serif;
width: 190px;
margin: 0%;
padding: 0px 0px 0px 5px;
margin-top:0px;
margin-bottom:30px;
position: float;
margin-left: 30px;
top: 126px;


}
#menu a{
padding: 0px 0px 0px 5px;
display: block;
color: #000;
border: 1px solid #999900;
border-left: 20px solid #999966;
background-color:#Cdc7AD;
text-decoration: none;
line-height:18px;
border-top-color: #D5D500;

}
#menu a:hover{
border: 1px solid #999900;
border-left: 20px solid #f3f3f3;
background-color:#DDDDCC;
color:#000;
text-decoration: none;
}
#menu ul li a{
list-style-type:none;
}
/* images*/
.floatright { float: right; }
.floatleft { float: left; }
 
Thanks.
Paul

BTW I viewed these errors in IE 6.0 



jaybee -> RE: Positioning problems - probably simple, but???? (5/10/2005 7:14:06)

Before we go any further what are all the  ?



jaybee -> RE: Positioning problems - probably simple, but???? (5/10/2005 7:15:52)

OK, I've got it. Looking at your CSS on-line.





paul rayner -> RE: Positioning problems - probably simple, but???? (5/10/2005 7:17:54)

Fixed them I think. Characters from pasting from Programmers Notepad to the BB.



jaybee -> RE: Positioning problems - probably simple, but???? (5/10/2005 7:19:50)

Let's sort one problem at a time as it can affect the others.

To get your block in the middle of the screen you need to set your container div to

margin-left:auto;
margin-right:auto;



paul rayner -> RE: Positioning problems - probably simple, but???? (5/10/2005 7:26:53)

That didn't work. It did appear to fix the image.

I applied it to the div container - now everyting within the container appears to be centred.



jaybee -> RE: Positioning problems - probably simple, but???? (5/10/2005 7:53:33)

Hold on, I'll grab your code and have a play around with it. Be back asap.



jaybee -> RE: Positioning problems - probably simple, but???? (5/10/2005 8:08:48)

Take the width off the body tag and apply it to the container. It's the container that needs to be 760px wide.

You also have a position: float tag. The position tag has 3 attributes fixed, absolute and relative.



paul rayner -> RE: Positioning problems - probably simple, but???? (5/10/2005 8:16:58)

 

that fixed a couple of probs.

cheers



jaybee -> RE: Positioning problems - probably simple, but???? (5/10/2005 9:11:37)

quote:

Also, I'd to add 2 boxes as sections below the image - small areas for teaser type content. I was going to try rounded corners, but I'm not even sure how to get the boxes there in CSS. 


        #content
         {
             padding-top: 1em;
             margin: 0 2em 0 200px;
             text-align:center;
         }
         
         #content h2 { margin-top: 0; }
         #box1
         {
             border:1px solid #000000;
             width:49%;
         }
         #box2
         {
             border:1px solid #000000;
             width:49%;
         }
 
 


    <div id="content">
     <div>
     <img src="sellingteam3.jpg" alt =" selling team" 
  width="375" height="276" /></div>
         <div id="box1">box1</div>
         <div id="box2">box2</div>
     <h2>Page heading</h2>
         <p>
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
             nonummy nibh euismod.




jaybee -> RE: Positioning problems - probably simple, but???? (5/10/2005 18:28:22)

The css #content needs  text-align:center to get your picture and text to center. If you only want the image to center then stick it in its own div which has a width of 100% to fill the content box and give that a text-align: center

If you're going to line up the two small divs like that then you'll need to use a clear to get the link out of the middle.



paul rayner -> RE: Positioning problems - probably simple, but???? (5/11/2005 3:05:00)

Thanks
sort of got it fixed. Still messy - any advice, esp from a professional, would be welcome.

Used a div called top, to centre the image.

#top
{
width:80%;
text-align: center;
margin-top: 1011;
}
It doesn't appear to do much - I must have made an error.

Thanks for taking the time.

Cheers



jaybee -> RE: Positioning problems - probably simple, but???? (5/11/2005 5:33:22)

OK, the problem is now down to widths of divs and the way they're stacking up. I could spend a while fiddling around with your code but you wouldn't learn anything so here are some suggestions.

If you haven't already done so, download Firefox which is a css friendly browser. When it's installed go and get the Web Developer Toolbar extension and install that. There is a tab on there OUTLINE. You can ask it to show the outline of all the block level elements so you can see where everything is.

Another way of doing something similar and a method I use all the time whilst playing with layout is to give each of your divs a different coloured background.

Looking at your page in Ffirefox the picture is down the page underneath the nav div. This usually means, and in your case definitely means, that the div it's sitting in isn't wide enough to hold it so it's been pushed down under the previous block. If you colour the background of the divs you'll see what I mean.

Don't forget you have divs within divs so it's not necessarily the immediate div the picture is in that's causing the problem.

With css layout the best advice I can give is, design using Firefox then fix for IE if needs be and HANG ON IN THERE!

and well done with the rounded boxes. [:D]



paul rayner -> RE: Positioning problems - probably simple, but???? (5/11/2005 6:16:34)

Jaybee, you're awesome. Your right, I do want to learn. And the toolbar for Firefox is brilliant.
That''s why I keep coming back to Outfront - the most helpful group of people I've ever dealt with.

Thanks.

Now off to fix this mess



paul rayner -> RE: Positioning problems - probably simple, but???? (5/11/2005 8:16:58)

Wow - it all becomes a bit of a nightmare after a while. In Firefox, you should be able to see that it's kinda there. But everything in the div "content" is pushed way to the bottom. I can't see how I can fix that - I can't nest the div's differently - not that I can think of.
The div on the left - "nav", I thought the colour would run right to the bottom, without the gap. It had a bottom margin of "0".

Then in IE - the content is pushed way down the page. Do I need to search for an IE work around for divs? Or have I missed something really basic?



jaybee -> RE: Positioning problems - probably simple, but???? (5/11/2005 9:00:19)

Ah ha. OK so now another useful thing on the toolbar.

Get your page up and then select the css tab and pick edit css.

When all the code appears, scroll down to the #content p and take the clear:both out of the brackets or delete the entire line.

Don't worry, it's not changing anything, it's just giving you a preview of what the edit will do to the page. To get it back to where it was just hit the reload button at the top of the css list.

If you apply clear to an element, it will refuse to let anything line up alongside whatever location you've given. You used clear:both so it's shoving the whole thing down the page to make sure both sides are clear.



jaybee -> RE: Positioning problems - probably simple, but???? (5/11/2005 9:03:17)

quote:

it all becomes a bit of a nightmare after a while


Ha, just you wait till you come up with the perfect solution at 3am and then can't remember it in the morning. Keep a notepad by the bed. It helps. [:D]



dpf -> RE: Positioning problems - probably simple, but???? (5/11/2005 10:27:07)

quote:

Keep a notepad by the bed
...tried that....  but in my drowsiness, kept confusing notepad with kleenex tissues - indecipherable in the morning



jaybee -> RE: Positioning problems - probably simple, but???? (5/11/2005 10:31:56)

Eeeeeewwwwww [:'(]



paul rayner -> RE: Positioning problems - probably simple, but???? (5/11/2005 16:05:15)

Thanks again. I did think about the clear as I lay in bed. Should have gotten up. So, Firefox is just about sorted. What a mess for the rest of the world who are'nt yet enlightened.

It's all way down the page in IE6?



jaybee -> RE: Positioning problems - probably simple, but???? (5/11/2005 16:32:48)

Right, now you need............

http://www.positioniseverything.net/explorer.html

Fun here innit [:D]



jaybee -> RE: Positioning problems - probably simple, but???? (5/12/2005 5:07:58)

Paul you might also find this quite useful

http://www.maxdesign.com.au/presentation/process/



paul rayner -> RE: Positioning problems - probably simple, but???? (5/12/2005 5:18:56)

Thanks heaps. It's on hold till later tonight or tomorrow - I'm snowed under now.

Can't wait to beat it though - I won't let it win.



jaybee -> RE: Positioning problems - probably simple, but???? (5/12/2005 5:54:29)

That's the spirit! Bulldog Brigade. [:D]



paul rayner -> RE: Positioning problems - probably simple, but???? (5/14/2005 20:53:10)

Hi Jaybee, I think I finally cracked it for both IE and Firefox. Not sure how the purists might see it - I altered the div for where the picture sits to 95% rather than 100%.
It did validate for both CSS and XHTML - before I started adding some content - lot of tidying up etc - but no-one much knows it's there yet.

Thanks for all your help - some great tricks you showed me. I reloaded the web accessibility toolbar for IE - and it can do similar things as the Firefox one.

Again - your awesome.

Cheers

Paul



jaybee -> RE: Positioning problems - probably simple, but???? (5/15/2005 6:40:50)

Well done Paul, I haven't been able to take a look as I get a 404 not found at the moment. Not necessarily you, could be a routing server so don't panic.

Making the div 95% is no problem. If that's what you need for the layout, that's what you need. [:D]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
7.714844E-02