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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jul 2006
    Posts
    119
    Thanks
    1
    Thanked 0 Times in 0 Posts

    help with structure a site with css and divs.

    Hello, i have been building sites for about 3 years and i allways use tables, now i'd like to start trying css and divs but i don't know how to align the divs, give space between them and that stuff.
    The code i have to far works ok with firefox but on IE6 it looks completly diferent. Is this a problem with ie6 or a problem with my code? Because if the problem is with imcompatibity with ie6 i guess i'll have to keep using tables for a bit longer..

    Anyways to my problem.
    I want this: help with structure a site with css and divs.-temp.gif

    and my code now is:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Clube Amigos do 600/500 de Portugal</title>
    <link href="css/600.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="main">
      <div id="right"><img src="img/top_right.jpg" alt="" width="210" height="410" /></div>
      <div id="top"><img src="img/topo.gif" alt="top" name="top" width="740" height="110" id="top" />
      	<div id="logo"><img src="img/logo_club.png" width="188" height="192" /></div>
      </div>
      <div id="bottom">bottom</div>
      
    </div>
    </body>
    </html>
    my 600.css file is:
    Code:
    body {
    	background-color: #FFFFFF;
    	background-image: url(../img/background.gif);
    	text-align: center;
    }
    #logo{
    	height: 192px;
    	width: 188px;
    	z-index: 2;
    	position: relative;
    	top: -96px;
    	left: 500px;
    }
    #main{
    	background-color:#FFFFFF;
    	width: 955px;
    	padding: 5px;
    	margin: 0 auto;
    	text-align: left;
    	z-index: -1;
    }
    #top{
    	background-color:#666666;
    	height: 110px;
    	width: 740px;
    	z-index: 0;
    	position: relative;
    }
    #right{
    	background-color:#3333FF;
    	height: 410px;
    	width: 210px;
    	float: right;
    }
    #bottom{
    	background-color:#00CCFF;
    	height: 300px;
    	width: 740px;
    	overflow: auto;
    }
    what i'm doing wrong? i guess it has something to do with how i place divs inside divs, but i'm not sure.

    Anyone to help me?

    Thanks in advance

  • #2
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Probaby You Site

    Web browsers can only handle certain tags, and while i haven't had too much time to look over your code, it seems that there might be some problems with what tags you use
    There is this thing called Valid HTML - and that's and HTML site that ONLY uses tags supported by all the browsers (which is quite a number of tags really) ... try putting this at the bottom of you website and then click it:

    Code:
    <p style="text-align: center;"><a href="http://validator.w3.org/check/referer">
    <img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1!" height="31" width="88"/></a> </p>
    If it says valid, I'm wrong, but I bet it'll say invalid - in which case you would have to find an alternative way to do your site.

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Oh yeah

    Also, why does you thing say css/600.css? You describe your css page as 600.css, and if that's the title there's no need for the css/ part

  • #4
    Regular Coder
    Join Date
    Jul 2006
    Posts
    119
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by danielfolsom View Post
    Also, why does you thing say css/600.css? You describe your css page as 600.css, and if that's the title there's no need for the css/ part
    er... css is the dir where the 600.css file is.

    the main problem so far is that the top div instead of stay with the height set on the css file it dispaly with that height + the logo div height. that div should be on top of all others.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello alapimba,
    I totally did not understand your last post but I did have a look at your code. It might be easier if I had the images ... I don't know.
    See if this does what your wanting.

    Code:
    body {
    	background-color: #FFFFFF;
    	background-image: url(../img/background.gif);
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #logo{
    	height: 192px;
    	width: 188px;
    }
    #main{
    	background-color:#FFFFFF;
    	width: 955px;
    	padding: 5px;
    	margin: 0 auto;
    	text-align: left;
    }
    #top{
    	background-color:#666666;
    	height: 110px;
    	width: 740px;
    }
    #right{
    	background-color:#3333FF;
    	height: 410px;
    	width: 210px;
    	float: right;
    }
    #bottom{
    	background-color:#00CCFF;
    	height: 300px;
    	width: 740px;
    	overflow: auto;
    }
    I did not change anything in the html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    maybe #logo needed a little more help:

    Code:
    body {
    	background-color: #FFFFFF;
    	background-image: url(../img/background.gif);
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #logo{
    	height: 192px;
    	width: 188px;
    	float: left;
    }
    #main{
    	background-color:#FFFFFF;
    	width: 955px;
    	padding: 5px;
    	margin: 0 auto;
    	text-align: left;
    }
    #top{
    	background-color:#666666;
    	height: 302px;
    	width: 740px;
    }
    #right{
    	background-color:#3333FF;
    	height: 410px;
    	width: 210px;
    	float: right;
    }
    #bottom{
    	background-color:#00CCFF;
    	height: 300px;
    	width: 740px;
    	overflow: auto;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Jul 2006
    Posts
    119
    Thanks
    1
    Thanked 0 Times in 0 Posts
    on firefox it looks like this:


    on ie it looks like this:


    Excavator your css didn't solve the problem

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Just looked at it again real quick so there is probably a better way to do this. I'm not very good with absolute positioning but that's the only way I see of putting the logo over top of your other divs.
    I put the logo by itself, instead of enclosed in the #top div like you had it, and positioned it absolute using (and this is where I'm not sure) margin to move it over.

    It validates and looks good in IE7 and FF2.

    See it at http://www.nopeople.com/alapimba/



    Sorry about the picture, it's a crop from a photo of Johnny Cash that I really like and I probably shouldn't have used it - I don't mean to offend anyone with it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Regular Coder
    Join Date
    Jul 2006
    Posts
    119
    Thanks
    1
    Thanked 0 Times in 0 Posts
    well it seems to work.
    can you show me your css code?

  • #10
    Regular Coder
    Join Date
    Jul 2006
    Posts
    119
    Thanks
    1
    Thanked 0 Times in 0 Posts
    forget my last post. i just found how you did it.
    I just didn't understand this property at all... it set a margin from left based on the div where the logo div is in? If it's absolute it shouldn't be based on the x=o and y=o of the browser?

    It's working fine i just want to understand this property
    thanks in advance

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    It's working fine i just want to understand this property
    Maybe someone could explain it to me too. I avoid absolute positioning like the plague so I really don't know a lot about how it acts...That's why I was wondering if the margin I put on it was really the right way to do it.
    It validates so it can't be too messed up.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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