Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

Centering via CSS

  • 28-06-2007 9:02pm
    #1
    Registered Users, Registered Users 2 Posts: 7,041 ✭✭✭


    How do I center everything on the page via CSS. Every method I try does nothing. Basically I want equal borders on each side of the page that expand and contract when the windows resized. Any help would be appreciated.

    Thanks,
    S.


Comments

  • Registered Users, Registered Users 2 Posts: 5,356 ✭✭✭NeVeR




  • Registered Users, Registered Users 2 Posts: 3,594 ✭✭✭forbairt


    didn't check the link ...

    usually what happens is ... within your body you put another div ... give it an id ...

    lets calls the id wrapper ...

    the css for this then becomes
    #wrapper { margin: 0 auto 0 auto; }
    

    And hey presto ... anything within your wrapper div gets centered...

    edit: I forgot to add ... give the wrapper a width as well ... 740px or similar .. so thats ... width: 740px; or a % depending on your requirements


  • Registered Users, Registered Users 2 Posts: 7,041 ✭✭✭Seachmall


    Just found my problem (the templates worked, thanks). Apparently my entire wrap is clossing too early. To clarify what I mean.
    <div id="wrap">
    
    	<div id="logo"></div>
    
    	<div id="topnav">
    		<a href="#" class="nav">Home</a>
    		<a href="#" class="nav">About</a>
    		<a href="#" class="nav">Contact</a>
    	</div>
    
    	<div id="innerwraptop"></div>
    
    	<div id="innerwrap">
    		<div id="innerwrapbottom"></div>
    	</div>
    
    </div>
    

    The wrap div is closing at the first </div>, why? Should it go all the way down to the last? Any help...?


  • Registered Users, Registered Users 2 Posts: 3,594 ✭✭✭forbairt


    without seeing your CSS .. I'd have to guess ... you've got elements absolutely positioned ? and as such the wrap doesn't know how big it is ?


  • Registered Users, Registered Users 2 Posts: 7,041 ✭✭✭Seachmall


    There are absolute positioned element, should their not be? I specified a width for the wrap so it should be the right size.

    I'm don't have much expierence in CSS so I'm still a n00b, kinda.


  • Advertisement
  • Registered Users, Registered Users 2 Posts: 3,594 ✭✭✭forbairt


    absolute positioning is in relation to the page ... so saying left: 500px ... even though its in your wrap container won't make it 500px from its left side ... it'll be 500 from the left hand side of the page ...

    what you want is position: relative;

    hope that helps :)


  • Registered Users, Registered Users 2 Posts: 7,041 ✭✭✭Seachmall


    That solved my problems however it created another one,<sarcastic> oh what a suprise.</sarcastic>

    My layout is that I have 1 div (main div) centered in the page. Immediatley to the left (connected to the main div) I have a smaller div (menu div). This div contains 1 div for text and 4 divs for corners (to give a taped-on effect).

    I have positioned the menu div inside the main div and given it a negative left element [left: -210px;]. All the divs within the menu div are [position: relative;] however the corner divs line up vertically under the menu div. Why?

    I'll post my CSS if you'd like, and thanks again :o .


  • Registered Users, Registered Users 2 Posts: 3,594 ✭✭✭forbairt


    any chance you could throw up a link / screenshot ? ...

    And yeah fire ahead and post you css either way :)


  • Registered Users, Registered Users 2 Posts: 7,041 ✭✭✭Seachmall


    HTML
    This is all within the Main Wrap
    <div id="menuwrap">
    
    			<div id="menu">
    				<a href="index.html" alt="home" class="menu">Home</a>
    			<br />
    				<a href="About.html" alt="About" class="menu">About</a>
    			<br />
    				<a href="Projects.html" alt="Projects" class="menu">Projects</a>
    			<br />
    				<a href="Contact.html" alt="Contact" class="menu">Contact</a>
    			<br />
    				<div class="inactive" alt="inactive" class="menu">Discussion</div>
    			</div>
    
    			<div class="tapeTR"></div>
    			<div class="tapeBL"></div>
    			<div class="tapeTL"></div>
    			<div class="tapeBR"></div>
    
    	</div>
    

    CSS
    #menuwrap{
    	position: absolute;
    	top: 400px;
    	left: -210px;
    	width: 230px;
    	height: 300px;
    }	
    
    #menu {
    	position: relative;
    	top: 20px;
    	left: 15px;
    	width: 200px;
    	height: 240px;
    	padding-top: 20px;
    	background-color: #fdfb45;
    	text-align: center;
    }
    .tapeTR{
    	position: relative;
    	top: 0px;
    	right: 0px;
    	width: 92px;
    	height: 64px;
    	background-image: url(tape1.gif);
    }
    
    .tapeTL{
    	position: relative;
    	top: 0px;
    	left: 0px;
    	width: 92px;
    	height: 64px;
    	background-image: url(tape2.gif);
    }
    
    .tapeBL{
    	position: relative;
    	bottom: 0px;
    	left: 0px;
    	width: 92px;
    	height: 64px;
    	background-image: url(tape1.gif);
    }
    
    .tapeBR{
    	position: relative;
    	bottom: 0px;
    	right: 0px;
    	width: 92px;
    	height: 64px;
    	background-image: url(tape2.gif);
    }
    

    Wheni I set the menu wrap to [position:relative;] it skips down under the main wrap.

    Sorry for the poor quaility of the screenshot. Trying to keep file size down. I'll try to get the site up tomorrow so you can take a look if need be.


  • Registered Users, Registered Users 2 Posts: 3,594 ✭✭✭forbairt


    tired at the moment .... so this is probably complete bo**** :) ... try putting the tape before the menu div ... and giving the menu div a lower z-index than the tape divs :)


    Edit: on a side note ... might I suggest you start to get into the habit of using ul li's for your menus ... investigate listamatic or some such term online and you'll see the light


  • Advertisement
  • Registered Users, Registered Users 2 Posts: 7,041 ✭✭✭Seachmall


    Thanks, I cant try it now 'cause I'm in work.

    I've tried using lists for menus but it always 'outjuts' the text and I can't fix it so I get p****d so I just put breaks in 'em. I'll do a search now to see if I can fix the list problem.


  • Registered Users, Registered Users 2 Posts: 3,594 ✭✭✭forbairt


    Remember the first thing you want to do is get rid of any padding and margins ... once you've got that done you can fiddle about adjusting them to suit your needs.

    a basic list ... css
    ul { margin:0; padding:0; }
    ul li { margin:0; padding:0; }
    ul li a { }
    

    Here is the link I think I mentioned ...
    http://css.maxdesign.com.au/listamatic/


  • Registered Users, Registered Users 2 Posts: 7,041 ✭✭✭Seachmall


    Nah, that just place the tapes ontop of the menu.


  • Registered Users, Registered Users 2 Posts: 3,594 ✭✭✭forbairt


    gone to france for a month to get married as one does ... and with limited net access .. so sorry I wasn't able to help .... good luck with the problem and if its still a problem in august maybe I can help :eek: :D


  • Registered Users, Registered Users 2 Posts: 7,041 ✭✭✭Seachmall


    Fine, ditch me in my time of need! God, some people are just so selfish. :)

    Thanks anyway and congrats.


Advertisement