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.
Page 1 of 3 123 LastLast
Results 1 to 15 of 31
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts

    Positioning things using html and css.

    Hello, this is my website. http://elementalstudios.freehostia.com/

    It had everything positioned where I wanted to be. But people said it was messed up, my first answer was it was because I was using a theme on Firefox, SO I made the theme to default, and now I see the problem, but I can't figure out how to position it.

    Css Code
    Code:
    @charset "utf-8";
    /* Elemental Studios */
    
    body {
    text-align:center;
    background:#000000;
    margin:auto;
    padding:0;
    color:#FFFFFF;
    font-family:Tahoma, Verdana, sans-serif, Arial;
    font-size:11px;
    text-decoration:none;
    }
    
    #content {
    width:770px;
    margin:auto;
    }
    
    .gapless {
    display:block;
    background-position:center;
    }
    
    .left {
    display:block;
    float:left;
    margin-left:119px;
    }
    
    .right {
    display:block;
    float:right;
    margin-right:130px;
    }
    
    .leftpipe {
    display:block;
    float:left;
    }
    
    .home {
    display:block;
    float:left;
    }
    
    .teams {
    display:block;
    float:left;
    }
    
    .videos {
    display:block;
    float:left;
    }
    
    .graphics {
    display:block;
    float:left;
    }
    
    .about {
    display:block;
    float:left;
    }
    
    .contact {
    display:block;
    float:left;
    }
    
    .rightpipe {
    display:block;
    float:left;
    margin-top:500px;
    }
    
    #header {
    background:url(images/Top-Content-Headers.png);
    width: 535px;
    height: 76px;
    background-position:center;
    float:left;
    vertical-align:middle;
    }
    
    .textcontent {
    font-family:Tahoma, Verdana, sans-serif, Arial;
    font-size:11px;
    text-indent:20px;
    color:#FFFFFF;
    text-decoration:none;
    }
    
    
    #contentbox {
    background: #001 url(images/Content.png);
    width: 535px;
    height: 385px;
    background-position:center;
    float:left;
    }
    Any help is appreciated.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,628
    Thanks
    6
    Thanked 1,002 Times in 975 Posts

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Ok, now I corrected the errors, it now validated. Dang I forgot the Javascript stuff I put..well, how can I specify which css file to use if you are using a certain browser

    Edit: Nevermind, I got the code, good thing I make backups! Now onwards to the positioning.
    Last edited by l Squid l; 06-29-2007 at 04:48 PM.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by l Squid l View Post
    Now onwards to the positioning.
    If you still need help, you might want to describe what the desired position is. Right now, I see what appears to be a vertical lamp with no indication of where it should be.

    Your document still seems to be invalid as well.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    If you still need help, you might want to describe what the desired position is. Right now, I see what appears to be a vertical lamp with no indication of where it should be.

    Your document still seems to be invalid as well.
    Ok Now its validated, the lamp/neon light(what i like to call it)
    The left neon light is in the correct spot, but in both IE and Firefox the right neon light appears to be, in a new row. I would like to align on the opposite of the left neon light. Also, in CSS, is positioning using the margin properties such as the margin, margin-top,margin-left,ect. the right way of positioning or is there a different property, I am supposed to use to position it? Also if I don't specify an alt(I think it means alternative text) why is it an error? Thanks for inquiring if I still needed help.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by l Squid l View Post
    the lamp/neon light(what i like to call it)
    I chose the term lamp since it looks like a hydrogen lamp. I guess that that’s a bit off though since hydrogen lamps are purple.

    Quote Originally Posted by l Squid l View Post
    Also, in CSS, is positioning using the margin properties such as the margin, margin-top,margin-left,ect. the right way of positioning or is there a different property, I am supposed to use to position it?
    There are multiple ways of positioning things. The best method is based upon what you want to position; where you want it; possibly, why you want it there; and what and where other content will appear on the page. All I know is where you want the images, so I can’t tell you what the best method would be.

    Quote Originally Posted by l Squid l View Post
    Also if I don't specify an alt(I think it means alternative text) why is it an error? Thanks for inquiring if I still needed help.
    The DTD file referenced by the document type declaration at the top of your document indicates that the attribute is required.

    The attribute’s purpose is to provide a text fall‐back should it not be possible to display the image or if the user has vision issues and can’t see it. Obviously, it doesn’t make sense for presentational images that convey no information; such images should be displayed via CSS anyway.

    Being that your images appear to be presentational, I’ve moved them to a style sheet. You can view a live example or use the code below. I’m not sure if it’s at all what you’re looking for though.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en-Latn-US">
    	<head>
    
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>Demo CF117566</title>
    		<meta name="Author" content="Patrick Garies">
    		<meta name="Created" content="2007-06-28">
    		<meta name="Revised" content="2007-06-28">
    		<link rel="icon" type="image/vnd.microsoft.icon" href="CF117566.ico">
    		<style type="text/css">
    			* { margin: 0; padding: 0; }
    			html { background: black url("CF117566_LNL.png") no-repeat; color: white; font: 16px/1.2 sans-serif; }
    			body { min-height: 592px; padding: 1em 104px; background: url("CF117566_RNL.png") top right no-repeat; }
    			p { text-align: center; }
    		</style>
    
    	</head>
    	<body>
    
    		<p>It works.</p>
    
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #7
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Thanks for the handful of information, well, What I'm trying to do is center the banner in the center obvious. The left lamp/light should have its left edge align up with the left edge/side of the banner,and the right light/lamp should align up with the right edge/side of the banner. Know what Im saying? Final result is this.

    BTW
    I trust community, i know you wont rip but i posted this on a different forum.

    Edit: Well, I am starting all over again. I am taking your advice to put the images in the CSS rather the HTML because of the alt. In IE it is now centered, but in Firefox, I cannot get it to center. It is validated BTW

    CSS Code
    Code:
    .gapless {
    background:url(images/Banner.png);
    width:796px;
    height:178px;
    background-position:center;
    text-align:center;
    }
    HTML Code
    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>
    
    <link rel="stylesheet" type="text/css" href="firefox-stylesheet.css" />
        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="IE-stylesheet.css" />
        <![endif]-->
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Elemental Studios | Montages, Graphics, Teams and more!</title>
    <link rel="shortcut icon" type="image/ico" href="Element2.ico" />
    <style type="text/css">
    <!--
    body {
    	background-repeat: no-repeat;
    }
    -->
    </style></head>
    
    <body>
    
    <div class="gapless" align="center"></div>
    
    </body>
    </html>
    Last edited by l Squid l; 06-30-2007 at 02:55 PM.

  • #8
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by l Squid l View Post
    I am taking your advice to put the images in the CSS rather the HTML because of the alt. In IE it is now centered, but in Firefox, I cannot get it to center.
    Firefox is rendering correctly. The correct way to horizontally center a block-level element is like this:
    Code:
    .gapless {
      margin: 0 auto;
    }
    .gapless is centered in IE (including IE7) because you have set body {text-align: center}. This is a due to a bug in IE.

  • #9
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    OoO, Thank You.

    Ok well, if you check out my site. http://elementalstudios.freehostia.com/
    You the see the left light. Which Css property should I use to move the lamp to the right?
    Last edited by l Squid l; 06-30-2007 at 03:46 PM.

  • #10
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Quote Originally Posted by l Squid l
    Which Css property should I use to move the lamp to the right?
    Try floating it right.

  • #11
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Ok, float:right moves way too much to the right, In this situation would using the margin-left property a good idea?
    Last edited by l Squid l; 06-30-2007 at 04:26 PM.

  • #12
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Oh I thought you wanted it moved over far to the right.

    I've just tested it with the margin-left applied and IE 6 doesn't display it correctly.

    Try with this CSS:

    Code:
    body {
    text-align : center;
    background : #000000;
    margin : auto;
    padding : 0;
    color : #ffffff;
    font-family : Tahoma, Verdana, sans-serif, Arial;
    font-size : 11px;
    text-decoration : none;
    }
    #content {
    width : 760px;
    margin : 0 auto;
    }
    .gapless {
    background : url(images/Banner.png);
    width : 760px;
    height : 178px;
    margin : 0 auto;
    }
    .left {
    background : url(images/Left-Neon-Light.png);
    width : 178px;
    height : 592px;
    background-repeat : no-repeat;
    float: left;
    }
    .right {
    background : url(images/Right-Neon-Light.png);
    }
    body {
    background-repeat : no-repeat;
    }
    And this HTML between the body tags:

    Code:
    <div id="content">
    
    <div class="gapless" align="center"></div>
    
    <div class="left"></div>
    
    </div>
    That works on IE 6 and 7 too.

  • #13
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Hmm..I just try this but it doesn't go far enough to the left, but I can control how far left it goes if I enter a number then write px(pixel). I am going try that.
    Edit: I added margin-left, 0 px. and it works maybe thats what you trying to tell me.
    Edit again: I did the same for the firefox code and it works very nicely. Thank You.
    Last edited by l Squid l; 06-30-2007 at 05:34 PM.

  • #14
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    Hi there, it's just that with what you've done now, it looks like this on IE 6.

    http://img92.imageshack.us/img92/9124/testqq4.png

    Just locally, try copying this into a new document and save it as .html

    It needs to be saved to the same directory as the folder /images/

    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>
    
    <link rel="stylesheet" type="text/css" href="firefox-stylesheet.css" />
        <!--[if IE]>
        <link rel="stylesheet" type="text/css" href="IE-stylesheet.css" />
        <![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Elemental Studios | Montages, Graphics, Teams and more!</title>
    <link rel="shortcut icon" type="image/ico" href="Element2.ico" />
    <style type="text/css">
    <!--
    body {
    background-repeat: no-repeat;
    }
    -->
    body {
    text-align : center;
    background-color : #000000;
    background-repeat : no-repeat;
    margin : auto;
    padding : 0;
    color : #ffffff;
    font-family : Tahoma, Verdana, sans-serif, Arial;
    font-size : 11px;
    text-decoration : none;
    }
    #content {
    width : 760px;
    margin : 0 auto;
    }
    .gapless {
    background : url(images/Banner.png);
    width : 760px;
    height : 178px;
    margin : 0 auto;
    }
    .left {
    background : url(images/Left-Neon-Light.png);
    width : 178px;
    height : 592px;
    background-repeat : no-repeat;
    float: left;
    }
    .right {
    background : url(images/Right-Neon-Light.png);
    } 
    </style></head>
    
    <body>
    
    <div id="content">
    
    <div class="gapless" align="center"></div>
    
    <div class="left"></div>
    
    </div>
    
    </body>
    </html>
    This looks the same on FF, IE 6 & 7 and Opera.

  • #15
    Regular Coder
    Join Date
    Jun 2007
    Posts
    155
    Thanks
    19
    Thanked 0 Times in 0 Posts
    Hmmm, but do ppl still use IE 6 if you look at the site now I made it look good with Firefox, and IE 7. I don't have major concerns for other browsers.

    Edit: Ok now I have added the right lamp/light,I'd like to move directly up. How can I do this I tried background-positioning, vertical-alignment. I think its called that.
    Last edited by l Squid l; 06-30-2007 at 06:38 PM.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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