SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Denmark
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div not centering - text not centering

    Well i've been messing around with this for quite a while and tried a lot of different methods, text-align: center; - margin: auto; - left: auto; - right: auto in varies ways, but with no luck.. If you take a look at:

    http://sbeinati.monline.dk/
    stylesheet: http://sbeinati.monline.dk/styles.css
    you can see some buttons saying "hovedside" etc.

    Nr 1 - i'd like to center these buttons
    Nr 2 - i'd like to center the text within the buttons

    i've come to a point where i've simply run out of ideas, so really need some help..

    you can take a look at the html if you want, else i've narrowed it down here;

    HTML;
    -----------------------------------------------------------
    Code:
    <div id="menu_container">
    
    	<div id="menu_left"></div>
    		<div id="menubg">
    			<div style="position: relative; width: 100%; margin: auto; text-align: center;">
    			  <div id="knap_left"></div>
    				<div id="knap_bg">
    				<div style="position: relative; top: 7px; left: 4px;"><a href="link.com" class="knap">Hovedside</a></div>
    			  </div>
    			  <div id="knap_left"></div>
    				<div id="knap_bg">
    				<div style="position: relative; top: 7px; left: 4px;"><a href="link.com" class="knap">Gallery</a></div>
    			  </div>
    			  <div id="knap_left"></div>
    				<div id="knap_bg">
    				<div style="position: relative; top: 7px; left: 4px;"><a href="link.com" class="knap">CV</a></div>
    			  </div>
    			  <div id="knap_left"></div>
    				<div id="knap_bg">
    				<div style="position: relative; top: 7px; left: 4px;"><a href="link.com" class="knap">Sjove Ting </a></div>
    			  </div>
    		</div>
    	</div>
    <div id="menu_right"></div>
    </div>
    -----------------------------------------------------------
    CSS for involving id's;
    -----------------------------------------------------------
    #menu_container {
    width: 806px;
    height: 25px;
    }

    #menu_container *{
    float: left;
    height: 25px;
    text-align: center;
    }

    #menu_left {
    background-image: url(images/menu_left.gif);
    width: 38px;
    background-repeat: no-repeat;
    }

    #menubg {
    background-image: url(images/menu_bg.gif);
    width: 730px;
    background-repeat: repeat;
    text-align: center;
    }

    #menu_right {
    background-image: url(images/menu_right.gif);
    width: 38px;
    background-repeat: no-repeat;
    }
    -----------------------------------------------------------

    Any help would be appreciated. Thanks in advance!

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Niagara
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try inserting:

    display: block;
    text-align: center;

    to any DIV where you want the text centered. Also you should not make several DIV's with the same ID. You're better off making a class, this way you can ensure your CSS is more valid.

    Make this your friend:
    http://jigsaw.w3.org/css-validator/

  3. #3
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That and a lesson in FORMATTING your code wouldn't hurt... But yeah, the biggest problem is what Merkury mentioned as a afterthought, multiple use of ID's.

    Id's are SUPPOSED to be unique to ONE tag - while most browsers are smart enough to 'pretend' they are just classes, it IS invalid code and shouldn't work at ALL.

    and as I recently mentioned in another thread about someone else's code, all those position:relative are likely giving IE some major headaches... you should probably be using margins for that...

    THIS:
    #menu_container *{

    throws up a huge warning sign too, as that's WAY too dangerous, you are telling it even the anchors inside it are float left and 25px wide...

    All in all, you've got about twice the code you need for what you are doing.

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mixing inline style with an external stylesheet is also a bad practice and makes troubleshooting harder.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Denmark
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot for the response. I'll go and try out Merkurys example when I get home..

    and yes, couldn't agree more with you guys .. I'm very unexperienced in regards of using CSS, so its still a learning curve for me.

    "#menu_container *{" was an example I found on some forum while I was looking for a way to setup 3 divs next to eachother (for some way I cant figure this out) ..

    Tyssen > i'm not entirely sure what you mean with this? could you perhaps elaborate?

    Ok, so a few things to do.. change some id tags to classes > formatting > perhaps use margins instead of relative (think I tried that) > trying out Mercurys example.

    I'll get back later on with the results

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mrsam
    Tyssen > i'm not entirely sure what you mean with this? could you perhaps elaborate?
    HTML Code:
    <div style="position: relative; width: 100%; margin: auto; text-align: center;">
    This is inline style. All this stuff should go in your stylesheet.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Taking on board all the correct comments made above you could reduce this messy code here:

    Code:
    		<div id="menu_container">
    			<div id="menu_left"></div>
    			<div id="menubg">
    				<div style="position: relative; width: 100%; margin: auto; text-align: center;">
    					<div id="knap_left"></div>
    					<div id="knap_bg">
    						<div style="position: relative; top: 7px; left: 4px;"><a href="link.com" class="knap">Hovedside</a></div>
    					</div>
    					<div id="knap_left"></div>
    					<div id="knap_bg">
    						<div style="position: relative; top: 7px; left: 4px;"><a href="link.com" class="knap">Gallery</a></div>
    					</div>
    					<div id="knap_left"></div>
    					<div id="knap_bg">
    						<div style="position: relative; top: 7px; left: 4px;"><a href="link.com" class="knap">CV</a></div>
    					</div>
    					<div id="knap_left"></div>
    					<div id="knap_bg">
    						<div style="position: relative; top: 7px; left: 4px;"><a href="link.com" class="knap">Sjove Ting </a></div>
    					</div>
    				</div>
    			</div>
    			<div id="menu_right"></div>
    		</div>
    		<div id="menu_end"></div>
    to something as small as this:
    Code:
    <div id="menu_wrap">
    		<div>
    			<ul>
    				<li><a href="#">Hovedside</a></li>
    				<li><a href="#">Gallery</a></li>
    				<li><a href="#">CV</a></li>
    				<li><a href="#">Sjove Ting</a><span></span></li>
    			</ul>
    		</div>
    	</div>
    	<div id="menu_end"></div>
    That would be almost a 75% reduction in html!!


    Here is the code in your page with the css amended:

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    html,body{margin:0;padding:0}
    body {
    	background: #dedede url(http://sbeinati.monline.dk/images/bodybg.gif) repeat-x left top;
     text-align: center;
    }
    		 
    #wrapper {
     margin: auto;
     text-align: left;
    	width: 806px;
    	height: 600px;
    	background-image: url(http://sbeinati.monline.dk/images/template_bg.gif);
    	background-repeat: repeat;
    }
    #header {
    	background-image: url(http://sbeinati.monline.dk/images/header.gif);
    	width: 806px;
    	height: 143px;
    }
    
    #menu_wrap {
    	padding-right:38px;
    	height: 25px;
    	margin-left: 0px;
    	background: url(http://sbeinati.monline.dk/images/menu_bg.gif) repeat-x left top;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	position:relative;
    }
    #menu_wrap div {
    	height: 25px;
    	background: url(http://sbeinati.monline.dk/images/menu_left.gif) no-repeat left top;
    	padding-left:38px;
    }
    
    #menu_wrap ul {
    	height:25px;
    	width:420px;
    	text-align:center;
    	margin:0 auto;
    	padding:0;
    	list-style:none;
    }
    #menu_end {
      background: url(http://sbeinati.monline.dk/images/menu_end.gif) no-repeat left top;
      width: 806px;
      height: 8px;
      font-size: 0px;
    }
    
    #menu_wrap ul li {
    	background: url(http://sbeinati.monline.dk/images/knap_bg.gif) repeat-x left top;
    	width: 105px;
    	height: 25px;
    	font-size: 12px;
    	font-weight: bold;
    	float:left;
    	line-height:25px;
    }
    #menu_wrap ul li span {
    	background: url(http://sbeinati.monline.dk/images/menu_right.gif) no-repeat right top;
    	position:absolute;
    	right:0;
    	top:0;
    	width:38px;
    	height:25px;
    	z-index:99;
    	clear:both;/*ie bug*/
    }
    
    #menu_wrap ul li a {
    	background: url(http://sbeinati.monline.dk/images/knap_left.gif) no-repeat left top;
    	height: 25px;
    	float:left;
    	width:94px;
    	padding-left:11px;
    	color:#CBDBFF; 
    	text-decoration:none;
    	text-align:center;
    }
    * html #menu_wrap ul li a{width:105px;w\idth:94px}/* box model hack for ie5.+ only*/
    
    #menu_wrap ul li a:hover {
    	color:#FF3838;
    	text-decoration:none;
    }
    
    
    #head_container {
    	margin: auto;
    	width: 330px;
    	height: 31px;
    }
    
    #head_container *{
    	float: left;
    	height: 31px;
    }
    
    #head_left {
    	background-image: url(http://sbeinati.monline.dk/images/head_left.gif);
    	width: 15px;
    	background-repeat: no-repeat;
    }
    
    #headbg {
    	background-image: url(http://sbeinati.monline.dk/images/head_bg.gif);
    	width: 300px;
    	height: 31px;
    	background-repeat: repeat-x;
    }
    
    .head_text {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	color: #880000;
    }
    
    #head_right {
    	background-image: url(http://sbeinati.monline.dk/images/head_right.gif);
    	width: 15px;
    	background-repeat: no-repeat;
    }
    
    #indhold_top {
    	background-image: url(http://sbeinati.monline.dk/images/indhold_top.gif);
    	background-repeat: no-repeat;
    	width: 717px;
    	height: 23px;
    	 margin: auto;
    }
    
    #indhold {
    	background-image: url(http://sbeinati.monline.dk/images/indhold_bg.gif);
    	background-repeat: repeat;
    	width: 717px;
    	margin: auto;
    }
    
    #indhold_bund {
    	background-image: url(http://sbeinati.monline.dk/images/indhold_bund.gif);
    	background-repeat: no-repeat;
    	width: 717px;
    	height: 25px;
    	 margin: auto;
    }
    
    .dato {
    	width: 170px;
    	border: 1px solid #000000;
    	background-color: #3E6EAF;
    	margin-left: 20px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #FFFFFF;
    	padding: 2px;
    	text-align: center;
    }
    
    .dato_text {
    	margin-left: 20px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000000;
    	padding-top: 5px;
    	padding-bottom: 5px;
    }
    
    
    </style>
    </head>
    <body>
    <div id="wrapper">
    	<div id="menu_wrap">
    		<div>
    			<ul>
    				<li><a href="#">Hovedside</a></li>
    				<li><a href="#">Gallery</a></li>
    				<li><a href="#">CV</a></li>
    				<li><a href="#">Sjove Ting</a><span></span></li>
    			</ul>
    		</div>
    	</div>
    	<div id="menu_end"></div>
    	<div id="head_container">
    		<div id="head_left"></div>
    		<div id="headbg">
    			<div class="head_text" style="position: relative; top: 6px; width: 100%; text-align: center;">Velkommen</div>
    		</div>
    		<div id="head_right"></div>
    	</div>
    	<div id="indhold_top"></div>
    	<div id="indhold">
    		<div class="dato">23 September - 2006 </div>
    		<div class="dato_text"> Denne side er ikke f&aelig;rdig endnu, da CSS er dj&aelig;vlens v&aelig;rk og ikke vil g&oslash;re hvad jeg !!! Stay tuned! <br />
    		</div>
    		<div class="dato">23 September - 2006 </div>
    		<div class="dato_text"> Her skal st&aring; en masse nyehder ... Her skal en masse nyehder ... Her skal en masse nyehder ... <br />
    			<br />
    			Her skal en masse nyehder ... Her skal en masse nyehder ... <br />
    		</div>
    	</div>
    	<div id="indhold_bund"></div>
    	<br />
    	<br />
    </div>
    </body>
    </html>
    Bear in mind I have only reworked the menu and you should look to simplify the rest of the page based on techniques in my example.

    The menu now only has 2 unsemantic elements (the extra div and span needed for 2 extra images) and these could probably be incorporated into existing images anyway.

    Hope it helps

  8. #8
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Denmark
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow Paul , that is simply just amazing.. I would never had thought you could reduce it like that! Not only the html reduction amazes me, but also the dedication and time you took to help out, that is truly appreciated.

    Now I just need to go on and look at all the changes, i'm sure there's a few things I don't understand or atleast need to puzzle around with to understand.. Sadly I don't have time today, but hopefully i'll get around looking at it tomorrow.. So will probably have a few questions. I hope that's ok

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    So will probably have a few questions. I hope that's ok
    That's fine - We like questions


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
  •