Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15

Thread: Beginner..

  1. #1
    New Coder
    Join Date
    Dec 2005
    Posts
    55
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Beginner..

    Iíve just finished reading through css-p and beginning to get the grips of it. Anyway, Iím having a little trouble configuring for all browsers.

    View the following page in ie or opera first and you will get an idea of what I want it to look like it all browsers, 'cause it looks funny in firefox. I also wanted to position the buttons in the centre of the middle column, and centre the middle column in the middle of the page, lol..

    .click

    Thanks for all your help.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <title> Stephen Daly </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="Stephen Daly" />
    <style type="text/css">
    body {
      	background: #e0e4e5 url(http://www.xtopic.net/css/images/background.gif) repeat-x;
      	margin: 0;
      	padding: 0;
      	font-family: Verdana, Arial, sans-serif;
      	font-size: 10px;
    }
    
    #container {
      	margin-left: auto;
      	margin-right: auto;
      	padding: 0;
      	width: 720px;
    }
    
    #content {
      	background: #fff;
      	margin: 0;
      	padding: 0;
      	width: 650px;
      	height: 300px;
    	margin:auto; 
    }
    
    #menu{
    	background: #f1f1f1;
    	width: 650px;
    	margin:auto;
    }
    
    #menu ul{
    	list-style: none;
    	margin: 0 auto;
    	padding:0;
    	width:420px; /*this is the width of your links plus the 5px left margin for each li*/
    }
    
    #menu ul li{
    	display: block;
    	float: left;
    	margin-top: 0;
    	margin-bottom: 0;
    	margin-left: 5px;
    	text-align: center;
    }
    
    * html #menu ul li { /*this is needed to fix IE double margin bug, floated element with right or left margin, margin gets doubled*/
    	display:inline;
    }
    
    #menu ul li a{
    	display: block;
    	text-decoration: none;
    	font: 10px verdana, arial, sans-serif;
    	color: #000;
    	width: 100px;
    	line-height: 20px;
    	border-bottom: none;
    	background: #fff;
    }
    
    #menu ul li a:hover{
        background: #000;
        color: #fff;
    }
    
    #menu ul li a.active{
    	background: #000;
    	color: #fff;
    	font-weight: bold;
    }
    
    #menu ul li a.active:hover{
    	background: #474747;
    	color: #fff;
    }
    
    .clear { /*this takes care of the extra height due to font-size and line-height*/
    	clear:both;
    	font-size:1px;
    	line-height:0px;
    }
    </style>
    </head>
    
    <body>
    <!--XHTML IN HERE-->
    <!--START DIV CONTAINER-->
    <div id="container">
    	<!--START TOP-->
     	<div id="menu">
    		<ul>
         		<li><a href="#">link 1</a></li>
    	 		<li><a href="#">link 2</a></li>
    	 		<li><a href="#">link 3</a></li>
    	 		<li><a href="#">link 4</a></li>
    	 	</ul>
     		<div class="clear">&nbsp;</div><!--You can't self close a div in XHTML-->
    	</div>
    	<!--START DIV CONTENT-->
     	<div id="content">Blah</div>
    <!--END DIV CONTAINER-->
    </div>
    </body>
    </html>
    Looks the same in IE and FF now, should look okay in Opera as well. I added comments to try and explain things, if you have any questions about them just ask.
    Last edited by _Aerospace_Eng_; 12-22-2005 at 02:30 AM.

  • #3
    New Coder
    Join Date
    Dec 2005
    Posts
    55
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It looks perfect in all browsers, thanks for your quick reply and help! Much appreciated!!

    You know if I add:

    Code:
    #menu ul li a:hover{
        background: #000;
        color: #fff;
    height: 25px;
    so on mouse over it expands, is it possible to to code it so it doesn't push the content div below it downwards?
    Last edited by Stephen; 12-22-2005 at 02:53 AM.

  • #4
    New Coder
    Join Date
    Dec 2005
    Posts
    55
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried switching the divs around but it made the menu go below the content div, which I over looked. Any suggestions?

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What are you trying to achieve by making the height 25px? Right now it looks fine to me.

  • #6
    New Coder
    Join Date
    Dec 2005
    Posts
    55
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, sorry. I wanted it so that when you rollover the button it enlargens to 25px, that's why I added it in the ul li a:hover. But when you rollover and it expands, it pushes the white content area downwards

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <title> Stephen Daly </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="Stephen Daly" />
    <style type="text/css">
    body {
      	background: #e0e4e5 url(http://www.xtopic.net/css/images/background.gif) repeat-x;
      	margin: 0;
      	padding: 0;
      	font-family: Verdana, Arial, sans-serif;
      	font-size: 10px;
    }
    
    #container {
      	margin-left: auto;
      	margin-right: auto;
      	padding: 0;
      	width: 720px;
    }
    
    #content {
      	background: #fff;
      	margin: 0;
      	padding: 0;
      	width: 650px;
      	height: 300px;
    	margin:auto; 
    }
    
    #menu{
    	background: #f1f1f1;
    	width: 650px;
    	margin:auto;
    }
    
    #menu ul{
    	list-style: none;
    	margin: 0 auto;
    	padding:0;
    	width:420px; /*this is the width of your links plus the 5px left margin for each li*/
    }
    
    #menu ul li{
    	display: block;
    	float: left;
    	margin-top: 0;
    	margin-bottom: 0;
    	margin-left: 5px;
    	text-align: center;
    }
    
    * html #menu ul li { /*this is needed to fix IE double margin bug, floated element with right or left margin, margin gets doubled*/
    	display:inline;
    }
    
    #menu ul li a{
    	display: block;
    	text-decoration: none;
    	font: 10px verdana, arial, sans-serif;
    	color: #000;
    	width: 100px;
    	line-height: 20px;
    	border-bottom: none;
    	background: #fff;
    	position:relative;
    }
    
    #menu ul li a:hover{
        background: #000;
        color: #fff;
    }
    #menu ul li a span {
    	display:none;
    }
    #menu ul li a:hover span {
    	display:block;
    	width:100px;
    	height:5px;
    	line-height:0px;
    	font-size:1px;
    	position:absolute;
    	bottom:-5px;
    	left:0;
    	background:#CDD3C6;
    	color:#000;
    }
    #menu ul li a.active{
    	background: #000;
    	color: #fff;
    	font-weight: bold;
    }
    
    #menu ul li a.active:hover{
    	background: #474747;
    	color: #fff;
    }
    
    .clear { /*this takes care of the extra height due to font-size and line-height*/
    	clear:both;
    	font-size:1px;
    	line-height:0px;
    }
    </style>
    </head>
    
    <body>
    <!--XHTML IN HERE-->
    <!--START DIV CONTAINER-->
    <div id="container">
    	<!--START TOP-->
     	<div id="menu">
    		<ul>
         		<li><a href="#">link 1<span></span></a></li>
    	 		<li><a href="#">link 2<span></span></a></li>
    	 		<li><a href="#">link 3<span></span></a></li>
    	 		<li><a href="#">link 4<span></span></a></li>
    	 	</ul>
     		<div class="clear">&nbsp;</div><!--You can't self close a div in XHTML-->
    	</div>
    	<!--START DIV CONTENT-->
     	<div id="content">Blah</div>
    <!--END DIV CONTAINER-->
    </div>
    </body>
    </html>

  • #8
    New Coder
    Join Date
    Dec 2005
    Posts
    55
    Thanks
    0
    Thanked 0 Times in 0 Posts
    woo that's great. Mac browsers appear to render it slightly differntly though, when viewed on a mac there is a slight gap between the buttons and the container div. See attached image below;


  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What browser is that? Try this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <title> Stephen Daly </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="Stephen Daly" />
    <style type="text/css">
    body {
      	background: #e0e4e5 url(http://www.xtopic.net/css/images/background.gif) repeat-x;
      	margin: 0;
      	padding: 0;
      	font-family: Verdana, Arial, sans-serif;
      	font-size: 10px;
    }
    
    #container {
      	margin-left: auto;
      	margin-right: auto;
      	padding: 0;
      	width: 720px;
    }
    
    #content {
      	background: #fff;
      	margin: 0;
      	padding: 0;
      	width: 650px;
      	height: 300px;
    	margin:auto; 
    }
    
    #menu{
    	background: #f1f1f1;
    	width: 650px;
    	margin:auto;
    }
    
    #menu ul{
    	list-style: none;
    	margin: 0 auto;
    	padding:0;
    	width:420px; /*this is the width of your links plus the 5px left margin for each li*/
    }
    
    #menu ul li{
    	display: block;
    	float: left;
    	margin-top: 0;
    	margin-bottom: 0;
    	margin-left: 5px;
    	text-align: center;
    }
    
    * html #menu ul li { /*this is needed to fix IE double margin bug, floated element with right or left margin, margin gets doubled*/
    	display:inline;
    }
    
    #menu ul li a{
    	display: block;
    	text-decoration: none;
    	font: 10px verdana, arial, sans-serif;
    	color: #000;
    	width: 100px;
    	line-height: 20px;
    	border-bottom: none;
    	background: #fff;
    	position:relative;
    }
    
    #menu ul li a:hover{
        background: #000;
        color: #fff;
    }
    #menu ul li a span {
    	display:none;
    }
    #menu ul li a:hover span {
    	display:block;
    	width:100px;
    	height:5px;
    	line-height:0px;
    	font-size:1px;
    	position:absolute;
    	bottom:-5px;
    	left:0;
    	background:#CDD3C6;
    	color:#000;
    }
    #menu ul li a.active{
    	background: #000;
    	color: #fff;
    	font-weight: bold;
    }
    
    #menu ul li a.active:hover{
    	background: #474747;
    	color: #fff;
    }
    
    .clear { /*this takes care of the extra height due to font-size and line-height*/
    	clear:both;
    	font-size:0px;
    	line-height:0px;
    }
    </style>
    </head>
    
    <body>
    <!--XHTML IN HERE-->
    <!--START DIV CONTAINER-->
    <div id="container">
    	<!--START TOP-->
     	<div id="menu">
    		<ul>
         		<li><a href="#">link 1<span></span></a></li>
    	 		<li><a href="#">link 2<span></span></a></li>
    	 		<li><a href="#">link 3<span></span></a></li>
    	 		<li><a href="#">link 4<span></span></a></li>
    	 	</ul>
     		<div class="clear"></div><!--You can't self close a div in XHTML-->
    	</div>
    	<!--START DIV CONTENT-->
     	<div id="content">Blah</div>
    <!--END DIV CONTAINER-->
    </div>
    </body>
    </html>

  • #10
    New Coder
    Join Date
    Dec 2005
    Posts
    55
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that is safari, however it looks like that in firefox also, not sure about ie.

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I changed some things, I revised my post above.

  • #12
    New Coder
    Join Date
    Dec 2005
    Posts
    55
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It still appears the same apparantly, I've got a mac user testing it for me

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <title> Stephen Daly </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="Stephen Daly" />
    <style type="text/css">
    body {
      	background: #e0e4e5 url(http://www.xtopic.net/css/images/background.gif) repeat-x;
      	margin: 0;
      	padding: 0;
      	font-family: Verdana, Arial, sans-serif;
      	font-size: 10px;
    }
    
    #container {
      	margin-left: auto;
      	margin-right: auto;
      	padding: 0;
      	width: 720px;
    }
    
    #content {
      	background: #fff;
      	margin: 0;
      	padding: 0;
      	width: 650px;
      	height: 300px;
    	margin:auto; 
    }
    
    #menu{
    	background: #f1f1f1;
    	width: 650px;
    	height:20px;
    	margin:auto;
    }
    
    #menu ul{
    	list-style: none;
    	margin: 0 auto;
    	padding:0;
    	width:420px; /*this is the width of your links plus the 5px left margin for each li*/
    }
    
    #menu ul li{
    	display: block;
    	float: left;
    	margin-top: 0;
    	margin-bottom: 0;
    	margin-left: 5px;
    	text-align: center;
    }
    
    * html #menu ul li { /*this is needed to fix IE double margin bug, floated element with right or left margin, margin gets doubled*/
    	display:inline;
    }
    
    #menu ul li a{
    	display: block;
    	text-decoration: none;
    	font: 10px verdana, arial, sans-serif;
    	color: #000;
    	width: 100px;
    	height:20px;
    	line-height:20px;
    	border-bottom: none;
    	background: #fff;
    	position:relative;
    }
    
    #menu ul li a:hover{
        background: #000;
        color: #fff;
    }
    #menu ul li a span {
    	display:none;
    }
    #menu ul li a:hover span {
    	display:block;
    	width:100px;
    	height:5px;
    	line-height:0px;
    	font-size:1px;
    	position:absolute;
    	bottom:-5px;
    	left:0;
    	background:#CDD3C6;
    	color:#000;
    }
    #menu ul li a.active{
    	background: #000;
    	color: #fff;
    	font-weight: bold;
    }
    
    #menu ul li a.active:hover{
    	background: #474747;
    	color: #fff;
    }
    
    .clear { /*this takes care of the extra height due to font-size and line-height*/
    	clear:both;
    	font-size:0px;
    	line-height:0px;
    }
    </style>
    </head>
    
    <body>
    <!--XHTML IN HERE-->
    <!--START DIV CONTAINER-->
    <div id="container">
    	<!--START TOP-->
     	<div id="menu">
    		<ul>
         		<li><a href="#">link 1<span></span></a></li>
    	 		<li><a href="#">link 2<span></span></a></li>
    	 		<li><a href="#">link 3<span></span></a></li>
    	 		<li><a href="#">link 4<span></span></a></li>
    	 	</ul>
    	</div>
    	<!--START DIV CONTENT-->
     	<div id="content">Blah</div>
    <!--END DIV CONTAINER-->
    </div>
    </body>
    </html>
    Make sure they are hard refreshing, not sure what the command is for a Mac, on windows its CTRL + F5

  • #14
    New Coder
    Join Date
    Dec 2005
    Posts
    55
    Thanks
    0
    Thanked 0 Times in 0 Posts
    genious, it worked. What did you change?

  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Just set a height to the #menu div and the lis, took out the clearing div (which I think may have been causing the problem.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •