SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Margin - Auto (Centering issue)

  1. Oct 19, 2011 18:26 #1
    danrevah
    danrevah is offline
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Margin - Auto (Centering issue)

    At this moment the page is looking like that:
    http://imageshack.us/f/651/problemn.png/

    and i want it to look like that:
    http://imageshack.us/f/3/problemjny.png/

    i am trying to align the "round" div a little bit to the left so it will look at the same place
    doesn't matter if you change the size of the browser (since margin is set to auto i didnt understand how to do that..)

    how can i do that?
    CSS File:
    Code:
    body { background-image: url("../images/bg.png"); background-position:center; font-family:"Times New Roman"; font-size:11px;  }

.top { background-image: url("../images/top.png"); background-repeat:no-repeat; width: 1024px; height: 110px; margin: auto; }
.round { background-image: url("../images/round.png"); background-repeat:no-repeat; width: 441px; height: 285px; margin: auto; }
.bottom { background-image: url("../images/bottom.png"); background-repeat:no-repeat; width: 1024px; height: 220px; margin: auto; }
    Html File:
    Code:
    <div class="top"></div>
	<div class="round"></div>
	<div class="bottom"></div>
    Reply With Quote Reply With Quote
  2. Oct 19, 2011 18:34 #2
    danrevah
    danrevah is offline
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm i used a "wrapper" div to do it.. but is it the right way?

    this what i do (red is the changes)
    Code:
    .wrapper { margin: auto; width: 1024px; }
.top { background-image: url("../images/top.png"); background-repeat:no-repeat; width: 1024px; height: 110px; margin: auto; }
.round { background-image: url("../images/round.png"); background-repeat:no-repeat; width: 441px; height: 285px;  margin: auto 50px; }
.bottom { background-image: url("../images/bottom.png"); background-repeat:no-repeat; width: 1024px; height: 220px; margin: auto; }
    Html:
    Code:
    <div class="wrapper">
	<div class="top"></div>
	<div class="round"></div>
	<div class="bottom"></div>
</div>
    Reply With Quote Reply With Quote
  3. Oct 19, 2011 20:02 #3
    danrevah
    danrevah is offline
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Margin auto not working on IE (but works fine on chrome) + 1 more problem

    I've got 2 problems in my code

    1.
    look at the following picture:
    http://i51.tinypic.com/244pfsw.png

    as you can see the "round" div has some space between the menu how can i avoid that from happaning?

    2.
    the "margin: auto" on the "wrapper" div is working fine on chrome but not on IE
    how can i fix that?

    CSS Code:
    Code:
    * {
  margin: 0;
  padding: 0;
}
body { background-image: url("../images/bg.png"); background-position:center; font-family:"Times New Roman"; font-size:11px;  }

.wrapper {  width: 1024px; margin: auto; }
.top { background-image: url("../images/top.png"); background-repeat:no-repeat; width: 1024px; height: 110px; }
.logo { background-image: url("../images/logo.png"); background-repeat:no-repeat; width: 228px; height: 58px; margin: 25px 50px; float: left; }
.info_top_right { width:145px; height:60px; float: right; margin: 25px 25px; }
.info_top_right_links { color: #e20448; font-size: 14px; margin: auto; }
.info_top_right_call { color: #fff; font-size: 14px; font-weight:bold; }

.menu { background-image: url("../images/menu.png"); background-repeat:no-repeat; width: 172px; height: 311px; margin: 0 50px; overflow: auto; float: left; }
.menu_button_first { font-size: 15px; color: #fff;  text-align:center; margin-top: 137px; }
.menu_buttons { font-size: 15px; color: #fff; text-align:center; margin-top: 9px; }


.right_image { background-image: url("../images/right_image.png"); background-repeat: no-repeat; width: 638px; height: 366px; float: right; margin: 25px 25px 0 0; }

.round { background-image: url("../images/round.png"); background-repeat:no-repeat; width: 452px; height: 227px;  margin: auto 55px; clear: both; float: left;}
.wrapper_photo { float: right; margin: 20px 40px 0 0; }
.first_photo { background-image: url("../images/photo.png"); background-repeat:no-repeat; width: 84px; height: 84px;  float: right; }
.rest_photo { background-image: url("../images/photo.png"); background-repeat:no-repeat; width: 84px; height: 84px;  float: right; margin: 0 15px 0 0; }

.bottom { background-image: url("../images/bottom.png"); background-repeat:no-repeat; width: 1024px; height: 220px; margin: auto; clear: both;}
    Html Code:
    HTML Code:
    <html>
<head>
	<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
	<div class="top">
		<div class="logo"></div> 
		<div class="info_top_right">
			<div class="info_top_right_links"> about us | contact us </div>
			<div class="info_top_right_call"> Call free: 087 000 234 </div>
		</div>
	</div>

	<div class="menu">
		<div class="menu_button_first">home</div>
		<div class="menu_buttons">about</div>
		<div class="menu_buttons">protofolio</div>
		<div class="menu_buttons">customers</div>
		<div class="menu_buttons">contact us</div>
	</div>
	<div class="right_image"></div>
	
	<div class="round"></div>
	<div class="wrapper_photo">
		<div class="first_photo"></div>
		<div class="rest_photo"></div>
		<div class="rest_photo"></div>
		<div class="rest_photo"></div>
	</div>
	
	<div class="bottom"></div>
</div>
</body>
</html>
    Reply With Quote Reply With Quote
  4. Oct 19, 2011 22:22 #4
    danrevah
    danrevah is offline
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I managed to fix the 2 question by adding
    to the html
    strict tag to the top
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    and on the CSS wrapper div ive added
    text-align: center;
    and changed margin: auto; to margin: 0 auto;

    still looking for an answer to the first question !
    Reply With Quote Reply With Quote
  5. Oct 20, 2011 04:36 #5
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open silver trophybronze trophy
     SitePoint Award Recipient Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    37,872
    Mentioned
    103 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by danrevah View Post

    still looking for an answer to the first question !
    You'd have to wrap your menu and right image in a div and then apply repeating (repeat-y) background image(149px x 10px) to the div that matches the black behind the menu and will continue as the page gets stretched and always meet your round element. You'll just need to set the horizontal start of the image to match the correct position
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
    Check out SitePoint's latest JavaScript challenge
    Reply With Quote Reply With Quote
  6. Oct 20, 2011 04:40 #6
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open silver trophybronze trophy
     SitePoint Award Recipient Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    37,872
    Mentioned
    103 Post(s)
    Tagged
    3 Thread(s)
    Threads merged as they seemed to be the same issue more or less
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
    Check out SitePoint's latest JavaScript challenge
    Reply With Quote Reply With Quote
  7. Oct 20, 2011 08:43 #7
    danrevah
    danrevah is offline
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you now its working great...
    the new code:

    CSS:
    Code:
    * {
  margin: 0;
  padding: 0;
}
body { background-image: url("../images/bg.png"); background-position:center; font-family:"Times New Roman"; font-size:11px;  }

.wrapper {  width: 1024px; margin: auto; }
.top { background-image: url("../images/top.png"); background-repeat:no-repeat; width: 1024px; height: 110px; }
.logo { background-image: url("../images/logo.png"); background-repeat:no-repeat; width: 228px; height: 58px; margin: 25px 50px; float: left; }
.info_top_right { width:145px; height:60px; float: right; margin: 25px 25px; }
.info_top_right_links { color: #e20448; font-size: 14px; margin: auto; }
.info_top_right_call { color: #fff; font-size: 14px; font-weight:bold; }

.wrap { width: 100%; min-height: 80px; height: 80px; }
.menu { background-image: url("../images/menu.png"); background-repeat:no-repeat; width: 172px; height: 311px; margin: 0 50px; overflow: auto; float: left; }
.menu_button_first { font-size: 15px; color: #fff;  text-align:center; margin-top: 137px; }
.menu_buttons { font-size: 15px; color: #fff; text-align:center; margin-top: 9px; }

.menuline { background-image: url("../images/menuline.png"); background-repeat: repeat; width: 150px; height: 100%; margin: 0 61px; float: left;  }

.right_image { background-image: url("../images/right_image.png"); background-repeat: no-repeat; width: 638px; height: 366px; float: right; margin: 25px 25px 0 0; }

.round { background-image: url("../images/round.png"); background-repeat:no-repeat; width: 452px; height: 227px;  margin: auto 55px; clear: both; float: left;}
.wrapper_photo { float: right; margin: 20px 40px 0 0; }
.first_photo { background-image: url("../images/photo.png"); background-repeat:no-repeat; width: 84px; height: 84px;  float: right; }
.rest_photo { background-image: url("../images/photo.png"); background-repeat:no-repeat; width: 84px; height: 84px;  float: right; margin: 0 15px 0 0; }

.bottom { background-image: url("../images/bottom.png"); background-repeat:no-repeat; width: 1024px; height: 220px; margin: auto; clear: both;}
    html:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
	<div class="top">
		<div class="logo"></div> 
		<div class="info_top_right">
			<div class="info_top_right_links"> about us | contact us </div>
			<div class="info_top_right_call"> Call free: 087 000 234 </div>
		</div>
	</div>
	
	<div class="wrap">
		<div class="menu">
			<div class="menu_button_first">home</div>
			<div class="menu_buttons">about</div>
			<div class="menu_buttons">protofolio</div>
			<div class="menu_buttons">customers</div>
			<div class="menu_buttons">contact us</div>
		</div>
		<div class="right_image"></div>
		
		<div class="menuline"></div>
	</div>
	
	<div class="round"></div>
	
	<div class="wrapper_photo">
		<div class="first_photo"></div>
		<div class="rest_photo"></div>
		<div class="rest_photo"></div>
		<div class="rest_photo"></div>
	</div>
	
	<div class="bottom"></div>
</div>
</body>
</html>
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules