Something went terribly wrong please help! [Archive] - Lissa Explains it All: Web Design Forums

View Full Version : Something went terribly wrong please help!

StrawberryWine

06-05-2006, 10:03 PM

Ok i'm trying to make a CSS layout with two coloms and a header and I made a background that perfectly fit the divs but because i wasn't sure what order to put things in is isn't showing up right.

Here's the url for my background image:
http://i79.photobucket.com/albums/j129/StrawberryW1ne/tarabg.gif

Here's my code:
<html>
<head>
<title>Home</title>
<style type="text/css">
A:link
{ text-decoration: value; none color:#0fe3b9}
A:visited
{ text-decoration: value; none color:#0fe3b9}
A:active
{ text-decoration: value; none color:#0fe3b9; }
A:hover
{ text-decoration: value; underline overline color:#0fe3b9;

background-image: url http://i79.photobucket.com/albums/j129/StrawberryW1ne/tarabg.gif;

cursor: value; crosshair;}

{ background: #c0007e;
background-image: url "http://i79.photobucket.com/albums/j129/StrawberryW1ne/tarabg.gif";
background-repeat: value; repeat-y
background-position: center center;
background-attachment: value; fixed

font-family: value; arial
color: #0fe3b9;
letter-spacing: value; 3pt
font-weight: value; normal
font-size: value; x-small

scrollbar-face-color : #c0007e;
scrollbar-highlight-color : #0fe3b9;
scrollbar-3dlight-color : #c0007e;
scrollbar-shadow-color : #0fe3b9;
scrollbar-darkshadow-color : #c0007e;
scrollbar-track-color : #0fe3b9;
scrollbar-arrow-color : #0fe3b9;

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 135px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 15px;
}
</style>
</head>

<body>

<div id="header">

Your header will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.

</div>

<div id="left">
<p>fsd
<p>fdsdfs
<p>fds

</div>

<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>

</body>
</html>

Here's what my page end's up looking like:
http://asktara.topcities.com/home.html

Can ya'll find what's wrong because i can't?

douglasMAH

06-05-2006, 10:10 PM

I don't know if this will change anything, but there isn't a bracket for the background part. And your host might not accept this type of layout, some are strict about these things.

hiyas

06-06-2006, 01:52 AM

yeah.. i think he's right.. and here..

A:link
{ text-decoration: value; none color:#0fe3b9;}
A:visited
{ text-decoration: value; none color:#0fe3b9;}
A:active
{ text-decoration: value; none color:#0fe3b9; }
A:hover
{ text-decoration: value; underline overline color:#0fe3b9;

background-image: ('url http://i79.photobucket.com/albums/j1...ne/tarabg.gif');

i hope it helps..
i haven't checked the whole css though.. i'll read it again. :)

cursor: value; crosshair;}

remove the value;

you also forgot to put the semicolons on some parts of the link style. :) i corrected them anyway. ^_^

hiyas

06-06-2006, 01:59 AM

i got it but i'm not so sure if it will do the trick..

font-family: value; arial
color: #0fe3b9;
letter-spacing: value; 3pt
font-weight: value; normal
font-size: value; x-small

see all parts that look like this? replace "value" with the corresponding thing..

for example. for the first line, we have..

font-family: value; arial

remove the word "value" and replace it with "arial"

we get..

font-family: arial;

get it? :)

and don't forget those semicolons for each line. and the {} for each part. :)

Good Luck!

hiyas

06-06-2006, 02:06 AM

i have nothing to do so i decided to arrange it for you. :)

<html>
<head>
<title>Home</title>
<style type="text/css">
A:link
{ text-decoration: value; none color:#0fe3b9}
A:visited
{ text-decoration: value; none color:#0fe3b9}
A:active
{ text-decoration: value; none color:#0fe3b9; }
A:hover
{ text-decoration: value; underline overline color:#0fe3b9;
background-image: url('http://i79.photobucket.com/albums/j1...ne/tarabg.gif;');
cursor: crosshair;}

{ background: #c0007e;
background-image: url('http://i79.photobucket.com/albums/j129/StrawberryW1ne/tarabg.gif');
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;

font-family: arial;
color: #0fe3b9;
letter-spacing: 3pt;
font-weight: normal;
font-size: x-small;

scrollbar-face-color : #c0007e;
scrollbar-highlight-color : #0fe3b9;
scrollbar-3dlight-color : #c0007e;
scrollbar-shadow-color : #0fe3b9;
scrollbar-darkshadow-color : #c0007e;
scrollbar-track-color : #0fe3b9;
scrollbar-arrow-color : #0fe3b9;
}

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 20px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 15px;
top: 160px;
width: 135px;
}
#center {
top: 0;
margin-left: 230px;
margin-right: 15px;
}
</style>
</head>

<body>

<div id="header">

Your header will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.

</div>

<div id="left">
<p>fsd</p>
<p>fdsdfs</p>
<p>fds</p>

</div>

<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>

</body>
</html>

StrawberryWine

06-10-2006, 12:19 AM

ok maybe i misunderstood what you said on the background part because now the only thing that isn't showing up is the background so tell what is wrong there

<html>
<head>
<title>Home</title>
<style type="text/css">
A:link
{ text-decoration: none color:#0fe3b9;}
A:visited
{ text-decoration: none color:#0fe3b9;}
A:active
{ text-decoration: none color:#0fe3b9; }
A:hover
{ text-decoration: underline overline color:#0fe3b9;
background-image: url('http://i79.photobucket.com/albums/j1...ne/tarabg.gif;');
cursor: crosshair;}

{ background: #c0007e;
background-image: url('http://i79.photobucket.com/albums/j1...1ne/tarabg.gif');
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;

font-family: arial;
color: #0fe3b9;
letter-spacing: 3pt;
font-weight: normal;
font-size: x-small;

scrollbar-face-color : #c0007e;
scrollbar-highlight-color : #0fe3b9;
scrollbar-3dlight-color : #c0007e;
scrollbar-shadow-color : #0fe3b9;
scrollbar-darkshadow-color : #c0007e;
scrollbar-track-color : #0fe3b9;
scrollbar-arrow-color : #0fe3b9;
}

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

#header {
margin: 0px;
padding: 10px;
height: 100px;
}
#left {
position: absolute;
left: 0px;
top: 100px;
width: 135px;
}
#center {
top: 100;
margin-left: 136px;
margin-right: 15px;
}
</style>
</head>

<body>

<div id="header">

Your header will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.

</div>

<div id="left">
<p>fsd</p>
<p>fdsdfs</p>
<p>fds</p>

</div>

<div id="center">
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly. To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
</div>

</body>
</html>

sputter

06-11-2006, 05:29 AM

{ background: #c0007e;
background-image: url('http://i79.photobucket.com/albums/j1...1ne/tarabg.gif');
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;

font-family: arial;
color: #0fe3b9;
letter-spacing: 3pt;
font-weight: normal;
font-size: x-small;

scrollbar-face-color : #c0007e;
scrollbar-highlight-color : #0fe3b9;
scrollbar-3dlight-color : #c0007e;
scrollbar-shadow-color : #0fe3b9;
scrollbar-darkshadow-color : #c0007e;
scrollbar-track-color : #0fe3b9;
scrollbar-arrow-color : #0fe3b9;
}

body
{ margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

you may want to combine these two as well since the background and scroll attributes are not assigned to anything

body { background: #c0007e;
background-image: url('http://i79.photobucket.com/albums/j1...1ne/tarabg.gif');
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;

font-family: arial;
color: #0fe3b9;
letter-spacing: 3pt;
font-weight: normal;
font-size: x-small;

scrollbar-face-color : #c0007e;
scrollbar-highlight-color : #0fe3b9;
scrollbar-3dlight-color : #c0007e;
scrollbar-shadow-color : #0fe3b9;
scrollbar-darkshadow-color : #c0007e;
scrollbar-track-color : #0fe3b9;
scrollbar-arrow-color : #0fe3b9;

margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}

hiyas

06-11-2006, 07:36 AM

background-image: url('http://i79.photobucket.com/albums/j1...ne/tarabg.gif;');
cursor: crosshair;}

i missed this. remove the semicolor after the link. ^_^