...

View Full Version : CSS, how do I!



Derfleiger
07-06-2007, 04:22 AM
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 (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 (http://myspace.com/kgandstuff)

:thumbsup:

-Dylan

Jutlander
07-06-2007, 10:47 AM
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:



<!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:



* {
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.

Derfleiger
07-06-2007, 11:46 PM
^_^" 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.

:thumbsup:

-Dylan

Jutlander
07-07-2007, 12:36 AM
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. :)

Derfleiger
07-07-2007, 01:01 AM
<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/k203/Derfleiger/untitled65654-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>

Jutlander
07-07-2007, 10:35 PM
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>.

_Aerospace_Eng_
07-08-2007, 05:25 AM
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.

Jutlander
07-08-2007, 07:45 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum