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 8 of 8

Thread: CSS, how do I!

  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS, how do I!

    Hello! Just a real beginner here in the world of CSS, and I need help with a small little job "if someone is willing!"

    Here is my site "myspace"

    http://www.myspace.com/good_eye_sniper13


    What I need help with is this:

    I want to make both my left and right column one large center box, perhaps two center boxes. The width will be larger than the height, and I would like the width to be the width of the page exactly. The height isn't really that big of a deal. But, anyway, how can I do this? I've tried just about everything my simple mind can think of, and I've gotten nothing! Please, help me!


    Here's an unusual example, but it's really the best I could get!
    "Something like her middle box!"

    http://myspace.com/kgandstuff




    -Dylan

  • #2
    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
    Hello there.

    You can make a centered layout by keeping everything in a wrapper. I presume you know a bit HTML and CSS already?

    The wrapper must be an ID, because we're only going to use it once. It must be right after the <body> tag and it's closing tag must be right before the </body>.

    So the basic template could look something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>good_eye_sniper13</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    
    <div id="wrapper">
    
    [everything goes here]
    
    </div>
    
    </body>
    </html>
    It won't be any good without CSS though so make a new file and call it "style.css". Put this in it:

    Code:
    * {
    margin: 0;
    padding: 0;
    }
    #wrapper {
    margin: 0 auto;
    width: 750px;
    border: 1px solid #000;
    background: #ddd;
    }
    Because we've removed all default margin and padding on all elements, you will have to add them yourself, but the design is much easier to work with and you can then decide for yourself.
    .
    .

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ^_^" Wow! I guess I am a little inexperienced! I really don't know how exactly to do all of this, could you put it in lay mans terms?

    ^_^ All I need to do is copy paste a CSS code into a myspace edit section, nothing more.



    -Dylan

  • #4
    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
    Hello there. I'm not really into the whole Myspace stuff, but you have to create two files, one with the HTML code I posted and one with the CSS code. Call the file with the html for "index.html" and the css file for "style.css".

    Perhaps someone who knows about Myspace can explain in further detail exactly how to arrange this.
    .
    .

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <style>body { margin-top: 425px; } .mybannermakerheadbanner { position: absolute; top: 0; width: 735px; text-align:center; margin-top: 15px; margin-left: -364px; left: 50%; }</style><div class="mybannermakerheadbanner"><img src="http://i89.photobucket.com/albums/k203/Derfleiger/IMG_3162.jpg" alt='Welcome' border=0></a></div>

    <style>table table table td {vertical-align:top ! important;} span.blacktext12 {visibility:visible !important; background-color:transparent; background-image:url(http://i89.photobucket.com/albums/k2...d65654-4.jpg); background-repeat:no-repeat; background-position:center center; font-size:0px; letter-spacing:-0.5px; width:475px; height:80px; display:block !important; } span.blacktext12 img {display:none !important;}</style>

    <div><style>.hidethem {visibility:hidden; display:none;}</style><center><img src="http://i89.photobucket.com/albums/k203/Derfleiger/Barcode.jpg"> </center></font><br><br><b><font size=+"2"></font></b><br><center><img src="http://i89.photobucket.com/albums/k203/Derfleiger/l_7d17d98c134f2e241e04ef569fea3a-1.jpg"><br><img src="http://i89.photobucket.com/albums/k203/Derfleiger/untitled6776.jpg"></center>


    <style type="text/css">
    . Whateverlife Layout{Whateverlife.com, Whateverlife, Inc.}

    table, tr, td { background-color:transparent; border:none; border-width:0;}
    body {

    background-color:000000;

    background-image:url();
    background-attachment: fixed;
    background-position:top left;
    background-repeat:no-repeat;
    scrollbar-face-color:FFFFFF;
    scrollbar-highlight-color:444444;
    scrollbar-3dlight-color:FFFFFF;
    scrollbar-shadow-color:FFFFFF;
    scrollbar-darkshadow-color:444444;
    scrollbar-arrow-color:333333;
    scrollbar-track-color:FFFFFF;
    cursor:crosshair;
    }

    . whateverlifedotcom { major additions }

    table table { border: 0px }
    table table table table{border:0px}
    table table table {
    border-style:solid;
    border-width:1px;
    border-color:000000;
    background-color:FFFFFF; }

    table table table table {border:0px;}
    table table table {width:100px;}
    table table td.text table {width:auto;}

    . whateverlifedotcom { cascading it up suckas }

    table, tr, td, li, p, div, textarea
    { font-family:Verdana;
    color:3e3e3e;
    font-size:11px;
    line-height:12px;}

    .btext
    { font-family:Verdana;
    color:3e3e3e;
    line-height:12px; }

    .blacktext10
    { font-family:Verdana;
    color:3e3e3e;
    line-height:12px;}

    .blacktext12 { font-family:Verdana;
    color:3e3e3e;
    line-height:12px;
    font-weight:bold;}

    .lightbluetext8 {color:ffffff; font-family:Courier New;
    background-color:3e3e3e;
    font-size: 17pt;
    letter-spacing:-1pt;
    font-weight:bold;
    line-height:8px;
    text-transform:lowercase;
    border: px solid 3e3e3e;
    display: block;
    text-align:right;}

    .orangetext15 {color:ffffff; font-family:Courier New;
    background-color:3e3e3e;
    font-size: 17pt;
    letter-spacing:-1pt;
    font-weight:bold;
    line-height:8px;
    text-transform:lowercase;
    border: px solid 3e3e3e;
    display: block;
    text-align:right;}

    big { font-family:Courier New;
    font-size:22px;
    letter-spacing:-1px;
    font-weight:bold;
    color:black;
    line-height:15px; }

    h1, h2 { font-family:Courier New;
    font-size:22px;
    letter-spacing:-1px;
    font-weight:bold;
    color:black;
    line-height:15px; }

    b { font-family:arial;
    font-size:11px;
    color:black;
    line-height:12px;
    letter-spacing:1px; }

    i { font-family:Courier New;
    font-size:11px;
    color:black;
    line-height:12px; }

    u { font-family:arial; color:3e3e3e;line-height:12px;text-decoration:underline; border-bottom:1px dashed 000000; }

    .redtext { font-family:Courier New; color:3e3e3e;line-height:12px;}

    .redbtext { font-family:Courier New; color:3e3e3e;line-height:12px;}

    .text { font-family:Courier New; color:3e3e3e;line-height:12px;}

    .whitetext12 { font-family:Courier New; color:3e3e3e;line-height:12px;}

    a:active, a:visited, a:link { font-family:Courier New; color:3e3e3e;line-height:12px;}

    a:hover { font-family:Courier New; color:3e3e3e;line-height:12px;text-decoration:none; }

    a.navbar:active, a.navbar:visited, a.navbar:link { font-family:Courier New; color:9dca5d; line-height:12px; }

    a.navbar:hover { color:fb729f;font-family:Courier New;
    font-size:13px;
    letter-spacing:-2px;
    font-weight:bold;
    color:black;
    line-height:15px;
    text-decoration:none; }

    a.redlink:active, a.redlink:visited, a.redlink:link { font-family:Courier New; color:9dca5d; line-height:12px; }

    a.redlink:hover { font-family:Courier New; color:333333;line-height:12px; text-decoration:none; }

    .nametext { color:9dca5d;font-family:Courier New;
    font-size:17px;
    letter-spacing:-1px;
    font-weight:bold;
    color:black;
    line-height:15px;
    cursor:default; }

    input {background-color:transparent !important;}

    .whateverlifedotcom { Other properties }

    img { filter:gray;cursor:crosshair;}
    a:link img { filter:Gray;cursor:move;}
    a:hover img { filter:Gray;}
    a:hover { cursor:se-resize;}
    div table tr td font {visibility:hidden;}
    div table table tr td font {visibility:visible;}
    a.text, table div font a, table div div {visibility:hidden;}
    table table div font a, table table div div {visibility:visible;}
    img {border:0px;}
    .blacktext10 {
    border-top-width:1px; border-bottom-width:0px; border-left-width:0px; border-right-width:0px;
    border-color:000000; border-style:dotted; display:block; width:260px;}
    </style><center><font size=+"8"><b><i></i></b></font></center><br><br><STYLE>
    a:hover img {filter: progid: DXImageTransform.Microsoft.Pixelate(maxsquare=30);}
    </STYLE><center>


    <style type="text/css">textarea {background-color:&#035;FFFFFF; background-image:url(); border-width:2px; border-style:double; border-color: &#035;000000; color: &#035;000000; font-family:Courier New;} input {background-color: &#035;999999; border-width:2px; border-style:solid; border-color: &#035;000000; color: &#035;000000; font-family:Courier New;}</style></center></a></div>
    <center><div style="position: absolute;z-index:9;top:0px;left:0px; border-width:0px;"></div>

  • #6
    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
    I'm sorry but that is not valid code. You've mixed up style elements and HTML totally. You need to keep all your CSS in a stylesheet and link to that between <head> and </head>.

    All HTML goes between <body> and </body>.
    .
    .

  • #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
    Quote Originally Posted by Jutlander View Post
    I'm sorry but that is not valid code. You've mixed up style elements and HTML totally. You need to keep all your CSS in a stylesheet and link to that between <head> and </head>.

    All HTML goes between <body> and </body>.
    Unfortunately thats what he has to work with. Myspace doesn't allow you to edit the html. It only allows you to add to it. Anything added will go in between the body tags. Only classes can be used and the color values can be in hex but the # part has to be left off. Just wanted to clear up a few things. As to the problem, I don't do myspace sorry.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    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 _Aerospace_Eng_ View Post
    Unfortunately thats what he has to work with. Myspace doesn't allow you to edit the html. It only allows you to add to it. Anything added will go in between the body tags. Only classes can be used and the color values can be in hex but the # part has to be left off. Just wanted to clear up a few things. As to the problem, I don't do myspace sorry.
    Ah thanks for clearing that up, I wasn't aware of that.

    I don't do myspace either, have never had a serious look at what it is yet.
    .
    .


  •  

    Posting Permissions

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