Jump to content

Broken Code?


coogra111

Recommended Posts

Hey there! I've been working on a petpage, just using CSS and some HTML, and for some reason my DIVs just... aren't there. I've tried so many things, I found a similar layout and tried it (it worked) and I tried following their coding style-- it still didn't work. The background works just fine, and my first header shows up (not in the right place). Also, I'm just using my pet's image until I finish some art in my one "img src" code, and it says it's not allowed, even though the file matches their specifications (since it's a Neopets image). I tried to make it clean, could someone look through and see where I messed up (or if I need to just start from scratch)? Thank you!

Quote

<style>

 

body {

background-image: url("http://i63.tinypic.com/1zcd8qo.jpg");

background-repeat: no-repeat;

background-position: center;

cursor: crosshair;

}

table {

background-color: transparent;

}

table a img {

display: none;

}

.sf {

display: none;

}

.main {

top: 75px;

left: 50px;

background: #cfcfb7;

height: 700px;

width: 450px;

text-align: justify;

overflow: hidden;

border: 1px solid #8e907f;

}

.content {

width: auto;

height: 690px;

overflow: auto;

padding: 8px;

}

.side {

left: 600px;

top: 0px;

background: #cfcfb7;

width: 300 px;

height: 560 px;

text-align: justify;

overflow: hidden;

padding: 15px;

}

.nav {

text-align: center;

height: 100px;

width: 100%;

}

a:link, a:visited, {

color: #cb4848;

font: 9pt verdana;

text-decoration: none;

}

a:hover {

color: #5d3536;

font: 6.5pt verdana;

font-weight: bold;

letter-spacing: 1px;

text-transform: uppercase;

text-decoration: none;

}

p, .medText, font, body, div, tr, td, table {

font: 9pt verdana;

color: #8e907f;

line-height: 14px;

}

b {

font: 9.5pt arial black;

color: #5f6055

}

i {

font: 8.5pt century gothic;

color: #7c7e6f;

letter-spacing: 1px;

}

a.nav {

display: inline-block;

padding: 5px;

text-align: center;

font: 15pt arial narrow;

width: 40px;

line-height: 30px;

text-transform: lowercase;

color: #4a4e50;

margin: 10px;

 

a.nav:hover {

color: #323436;

font-weight: bold;

}

h1 {

text-align: right;

letter-spacing: 2px;

color: #5d3536

font: 16pt century gothic;

text-transform: small-caps;

padding-right: 20px;

}

h2 {

text-align: center;

color: #323436;

font: 15pt arial narrow;

font-weight: bold;

text-transform: uppercase;

}

h3 {

text-align: right;

padding-right: 20px;

letter-spacing: 3px;

font: 15pt arial narrow;

color: #4a4e50;

text-transform: lowercase;

}

h4 {

font: 30pt arial narrow;

color: #cb4848;

line height: 20px;

letter-spacing: -1px;

text-transform: lowercase;

}

h5 {

font: 20pt century gothic;

line-height: 20px;

font-weight: bold;

color: #5d3536;

letter-spacing: 2px;

text-transform: uppercase;

}

.art {

text-align: center;

}

.art img {

width: 150px;

height: 150px;

border: 3px solid #8e907f;

margin: px;

display: inline-block;

}

</style>

 

<div class “side” style=“position: fixed; border-radius: 0 0 7em 7em;”>

 

<h4 style=“margin-top: 0px;”>little</h4>

<h5> blue </h5>

 

<center>

 

<img src=“http://pets.neopets.com/cpn/Pettyblue/1/2.png” style="width: 55%; border: 3px solid #e3e8aa; margin: 4px; margin-top: -80px;”>

<br>

<div class=“nav”>

<a href="#home">Home</a>

<a href=“#one”>Profile</a>

<a href=“#two”>Story</a>

<br>

<a href=“#three”>Diary</a>

<a href=“#four”>Art</a>

<a href=“#five”>Presents</a>

 

</div>

 

</center>

 

<br>

<br>

 

Blurb

 

</div>

 

<div class=“main” style="position: fixed;">

<div class=“content” id="home">

 

Stuff

 

</div>

<div class=“content" id="one">

 

Stuff

 

</div>

<div class=“content" id="two">

 

Stuff

 

</div>

<div class=“content” id="three">

 

Stuff

 

</div>

<div class=“content” id=“four”>

 

Stuff

 

</div>

<div class=“content” id=“five”>

 

Stuff

 

</div>

</div>

 

Link to comment
Share on other sites

Hey There!

I'm normally not very active, but I wanted to help you out.

This is what I found:
- You don't close some of your classes. 
The example down here misses an "}" at the end.

a.nav {

display: inline-block;

padding: 5px;

text-align: center;

font: 15pt arial narrow;

width: 40px;

line-height: 30px;

text-transform: lowercase;

color: #4a4e50;

margin: 10px;

- And things like this don't work either:
 

<div classsidestyle=“position: fixed; border-radius: 0 0 7em 7em;”>

It should be:
 

<div class=“side” style=“position: fixed; border-radius: 0 0 7em 7em;”>

- Also, it would be way better if you remove all the styles from you tags.
For example:

<img src=“http://pets.neopets.com/cpn/Pettyblue/1/2.png” style="width: 55%; border: 3px solid #e3e8aa; margin: 4px; margin-top: -80px;”>


Should be: 
 

<img src=“http://pets.neopets.com/cpn/Pettyblue/1/2.png” class="class-for-images">

Or, you could do:
<img src=“http://pets.neopets.com/cpn/Pettyblue/1/2.png” id="id-for-images">



I would start of by doing that.
If it still doesn't work, post your new code here and I'll take a look at it again.

Link to comment
Share on other sites

Thank you! I knew I missed a few closing tags, but I can scour it fifty times and still miss a few because my awareness is awful. Needed another pair of eyes! It still won't let me put the photo up for some reason... it said it needed to be a basic file format (JPG/JPEG/GIF/PNG/etc.,) still. That part is just infuriating. My DIVs still aren't showing up either! More of the info is there, but it's just slapped against the background. ?

Link to comment
Share on other sites

This took me some time, but I think I solved everything that was slipped thought unnoticed.
I think you can work with the code I supplied here.
There is just one more thing, you use things like this: “ ”
But they don't work in HTML, CSS, PHP or anything else. You should use " " and ' ' .

Hope it helps! ?

<style>
body {
	background-image: url("http://i63.tinypic.com/1zcd8qo.jpg");
	background-repeat: no-repeat;
	background-position: center;
	cursor: crosshair;
}

img {
width: 55%; 
border: 3px solid #e3e8aa;
margin: 4px; 
margin-top: -80px;
}

table {
background-color: transparent;
}

table a img {
display: none;
}

.sf {
display: none;
}

.main {
top: 75px;
left: 50px;
background: #cfcfb7;
height: 700px;
width: 450px;
text-align: justify;
overflow: hidden;
border: 1px solid #8e907f;
position: fixed;
}

.content {
width: auto;
height: 690px;
overflow: auto;
padding: 8px;
}

.side {
left: 600px;
top: 0px;
background: #cfcfb7;
width: 300 px;
height: 560 px;
text-align: justify;
overflow: hidden;
padding: 15px;
position: fixed; 
border-radius: 0 0 7em 7em;
}

.nav {
text-align: center;
height: 100px;
width: 100%;
}

a:link, a:visited, {
color: #cb4848;
font: 9pt verdana;
text-decoration: none;
}

a:hover {
color: #5d3536;
font: 6.5pt verdana;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
}

p, .medText, font, body, div, tr, td, table {
font: 9pt verdana;
color: #8e907f;
line-height: 14px;
}

b {
font: 9.5pt arial black;
color: #5f6055;
}

i {
font: 8.5pt century gothic;
color: #7c7e6f;
letter-spacing: 1px;
}

a.nav {
display: inline-block;
padding: 5px;
text-align: center;
font: 15pt arial narrow;
width: 40px;
line-height: 30px;
text-transform: lowercase;
color: #4a4e50;
margin: 10px;
}

a.nav:hover {
color: #323436;
font-weight: bold;
}

h1 {
text-align: right;
letter-spacing: 2px;
color: #5d3536;
font: 16pt century gothic;
text-transform: small-caps;
padding-right: 20px;
}

h2 {
text-align: center;
color: #323436;
font: 15pt arial narrow;
font-weight: bold;
text-transform: uppercase;
}

h3 {
text-align: right;
padding-right: 20px;
letter-spacing: 3px;
font: 15pt arial narrow;
color: #4a4e50;
text-transform: lowercase;
}

h4 {
font: 30pt arial narrow;
color: #cb4848;
line height: 20px;
letter-spacing: -1px;
text-transform: lowercase;
margin-top: 0px;
}

h5 {
font: 20pt century gothic;
line-height: 20px;
font-weight: bold;
color: #5d3536;
letter-spacing: 2px;
text-transform: uppercase;
}

.art {
text-align: center;
}

.art img {
width: 150px;
height: 150px;
border: 3px solid #8e907f;
margin: px;
display: inline-block;
}

<!-- Remove the things starting with < and ending in >.
But please note, it doesn't really do what you want.
Enable and modify this if you want to use it. 
Just smashing "<center>" somewhere in your HTML doesn't always do the job.

.center {
text-align: center;
background: black;
color: white;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
}-->
</style>

<body>

<div class="side">

 

<h4>little</h4>

<h5> blue </h5>

 
<span class="center">
<img src="http://pets.neopets.com/cpn/Pettyblue/1/2.png" class="img">

<br>

<div class="nav">

<a href="#home">Home</a>

<a href="#one">Profile</a>

<a href="#two">Story</a>

<br>

<a href="#three">Diary</a>

<a href="#four">Art</a>

<a href="#five">Presents</a>

</span> 

</div>

<br><br>
Blurb

</div>

<div class="main">

<div class="content" id="home">

Stuff

</div>

<div class="content" id="one">

Stuff

</div>

<div class="content" id="two">

Stuff

</div>

<div class="content" id="three">

Stuff

</div>

<div class="content" id="four">

Stuff

</div>

<div class="content" id="five">

Stuff

</div>

</div>
</body>


EDIT:
I quickly removed and re-tested the thing I supplied.
It should display the image now without any trouble.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...