Jump to content
Strawberry Orange Banana Lime Leaf Slate Sky Blueberry Grape Watermelon Chocolate Marble
Strawberry Orange Banana Lime Leaf Slate Sky Blueberry Grape Watermelon Chocolate Marble

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>

 

Share this post


Link to post
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.

Share this post


Link to post
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. 😞

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Sweet! It actually worked! Now I can mess around with the DIV sizes and positions without it messing up, right? 

Thank you so much too! I know tidbits about coding, but I'm really not great at it. I'll follow your tips next time!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×