Entrance Events! Chat Gallery Search Everyone Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
May 10, 2025 - @238.46 (what is this?)
Activity rating: Four Stars Posts & Arts: 73/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts Start New Topic  Submit Art
News: :happy:  :pc: There are community newsletters here! :pc: :happy: Super News: Upload a banner!

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  Everything has moved to the left of the page... :(


« previous next »
Pages: [1] Print
Author Topic: Everything has moved to the left of the page... :(  (Read 146 times)
dietcokeorchoke
Casual Poster ⚓︎
*


⛺︎ My Room
SpaceHey: Friend Me!

View Profile WWWArt

Joined 2025!
« on: May 08, 2025 @952.41 »

It was fine, I was editing graphics. Now it isn't fine! I'm not sure what's up, I tried to look at it myself and I also went to the last draft but somehow, I messed that up too! So I don't have a previous draft to undo the damage. Would some kind soul help me look over my code?

https://dietcokeorchoke.neocities.org/fudanshi



The code is here:
Spoiler
Code
<!DOCTYPE html>
<html>
  <head>
   <style>
body {
background-image: url('graphics/kitty.png');
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: auto;
}
</style> 
  <style>
  .container{
width: 1000px;
height: auto;
max-height: 100%;
border: 5px solid transparent;
  border-radius: 8px;
  padding: 5px;
float: center;
background-color: transparent;
background-clip: padding-box;
margin: 5px;
} 
</style>
<style>
  .smallcontainer{
width: 200px;
height: auto;
max-height: 100%;
float: left;
background-color: transparent;
background-clip: padding-box;
} 
</style>
<style>
  .bigcontainer{
width: 800px;
height: auto;
max-height: 100%;
float: left;
background-color: transparent;
background-clip: padding-box;
} 
</style>
  <style>
  .sidebar{
width: 150px;
height: auto;
max-height: 100%;
border: 5px solid black;
  border-radius: 8px;
  padding: 5px;
float: left;
overflow: auto;
line-height: 100%;
background-color: white;
background-clip: padding-box;
text-align: center;
color: black;
margin: 5px 2.5px 5px 5px;
font-family: 'OD';
background-image: url('link');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
} 
</style>
<style>
  .main{
width: 700px;
height: auto;
max-height: 100%;
border: 5px solid black;
  border-radius: 8px;
  padding: 5px;
line-height: 100%;
float: left;
background-color: white;
text-align: center;
color: black;
overflow: auto;
margin: 5px 5px 5px 2.5px;
font-family: 'OD';
background-image: url('link');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
} 
@font-face {
  font-family: Name;
  src: url(link);
}
@font-face {
  font-family: Name;
  src: url(link);
  font-weight: bold;
}
a:link {
  color: blue;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: purple;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: purple;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: purple;
  background-color: transparent;
  text-decoration: underline;
}
</style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fudanshi scum</title>
    <div class="container">
    
<div class="smallcontainer">

<div class="sidebar">
  <h3>Navigate</h3>
  <p><a href="https://dietcokeorchoke.neocities.org">Home</a></p>
  <p><a href="https://dietcokeorchoke.neocities.org/stuffilike">Stuff</a></p>
  <p><a href="https://dietcokeorchoke.neocities.org/infodump">I'm Sick</a></p>
</div>

<div class="sidebar">
  <p>Text</p>
</div>

<div class="sidebar">
   <testarea rows="5"    cols="15" ><img src="graphics/feed.gif"<img>
<a href="https://tamanotchi.world/19981c">
<img src="graphics/tommy.png" alt="my TomaNOTchi" width="70" height="75">
</a>
<img src="graphics/hunger.gif"<img></testarea>
</div>

<div class="sidebar">
  <img src="graphics/new/dsbutton.gif"><img><img src="graphics/new/tiktok.gif"><img><img src="graphics/new/ublock-now.png"><img><img src="graphics/fudan/piracy.gif"><img><img src="graphics/fudan/desktop.gif"><img><img src="graphics/fudan/old.gif"><img><img src="graphics/fudan/evil.gif"><img><img src="graphics/fudan/bookmark.gif"><img><img src="graphics/fudan/construction.gif><img>
</div>

</div>
<div class="bigcontainer">
<div class="main">
<img src="graphics/new/patch.png" alt= "A heart with purple and black stripes, a skull and crossbones, and thread along the sides as if it had been sewn in place.." width="250" height="250" style="float:left">
<h2>A Page for my Fandoms</h2>
<p>I've been a part of fandom since I was a little-little kid. I was around 6 googling pictures of characters I liked from shows and movies, and I found art of it by accident. (On... deviantart- shudder!!! <img src="graphics/fudan/yeesh.gif"><img>) I was around 8 when I started making my own accounts on stuff, and then my fandom life took off lol... I've been a little infamous (and famous-ish) on various websites throughout my life, many of them now defunct. I read a lot when I was younger, wrote a lot of fanfic. Quizilla was my jam!</p>
<p>Maybe you read one of my many mid-puberty, hormone-driven fanfics, or saw some of my fanart or OCs that I thought were SO GOOD, or argued with me under stamps or in the depths of Yahoo Answers- where I was top contributor on a regular basis at the wise old age of 11. So that probably tells you about the quality of the spaces I spent time in... <img src="graphics/fudan/nopls.gif"><img> </p>
</div>
<div class="main">
<p>You can have as many of these boxes as you want. They'll be nested inside your "Big Container" div if you keep the code like this, but if you take them out of that div, they'll arrange themselves instead of being constrained by the box. "Container," "Small Container" and "Big Container" divs can all have background colors and borders assigned to them if you want, but in this version of the code, they are transparent. </p>
<p>To change the colors of various elements, you can replace the "white" and "black" color tags with other color names or with hex codes. To add a background image, replace "link" in the background image code with an actual link. To change your font, upload a font file to Neocities and set it as the src link for the font. You can name the font family whatever you want then. Alternately, you can remove the src link and use the name of a web font (you can look up the names of these).</p>
<p>I left my custom cursor code in here at the top. In order to get rid of the custom cursor, just delete that section of code. In order to replace it with a different custom cursor, go to Cursors-4U and copy the code for your desired custom cursor, then replace it. Cursor animation doesn't work outside Internet Explorer as far as I can tell, so pick one that looks fine not animated.<p>
<p>You can make more styles of div if you like - as many as you want! This is good if you want lots of different elements on your page, but it can gum up your code somewhat.</p>
<div class="sidebar" style="height:200px">
<img src="graphics/fudan/ass.png"<img><img src="graphics/fudan/bubbles.gif"<img><img src="graphics/fudan/chomp.gif"<img><img src="graphics/fudan/cookie.png"<img><img src="graphics/fudan/gay.png"<img><img src="graphics/fudan/gba.gif"<img><img src="graphics/fudan/glitter.png"<img><img src="graphics/fudan/gum.gif"<img><img src="graphics/fudan/hug.gif"<img><img src="graphics/fudan/len.gif"<img><img src="graphics/fudan/mcds.png"<img><img src="graphics/fudan/old.png"<img><img src="graphics/fudan/prop.png"<img><img src="graphics/fudan/rat.png"<img><img src="graphics/fudan/shh.png"<img><img src="graphics/fudan/spiral.png"<img><img src="graphics/fudan/spook.gif"<img><img src="graphics/fudan/voc.gif"<img><img src="graphics/fudan/xx.jpg"<img><img src="graphics/fudan/fun.png"<img><img src="graphics/fudan/kitty.gif"<img><img src="graphics/fudan/nostalgia.gif"<img><img src="graphics/fudan/ouran.gif"<img><img src="graphics/fudan/serial.gif"<img><img src="graphics/fudan/teto.gif"<img><img src="graphics/fudan/bplz.png"><img><img src="graphics/fudan/hottopic.gif"<img><img src="graphics/fudan/kind.gif"<img><img src="graphics/fudan/suck.gif"<img>
</div>
<div class="sidebar" style="height:200px">
<p>cool sites</p>
<a href="https://sourgummywormz.neocities.org/">
<img src="graphics/fudan/sour.png" alt="Sour Gummy Wormz"></a><a href="https://planetsarah.neocities.org">
<img src="graphics/fudan/sarah.gif" alt="Planet Sarah"></a><a href="https://glamourgoblin.neocities.org">
<img src="graphics/fudan/gobble.gif" alt="Glamour Goblin"></a><a href="https://scenequeen.neocities.org">
<img src="graphics/fudan/queen.gif" alt="Scene Queen"></a><a href="https://sixtoesss.neocities.org//">
<img src="graphics/fudan/sixtoes.gif" alt="Six Toesss"></a><a href="URL">
<img src="graphics/fudan/GRAPHIC.XXX" alt="BROKEN"></a>
</div>
<div class="sidebar" style="height:200px">
<p>my links, email, buttons etc</p>
<a href="https://www.tumblr.com/dietcokeorchoke666">
<img src="graphics/fudan/tumblr.jpg" alt="Diet Coke or Choke Tumblr"></a>
<a href="https://www.tumblr.com/dietcokeorchoke666">
<img src="graphics/fudan/tumblr.jpg" alt="Diet Coke or Choke Tumblr"></a>
<a href="https://dietcokeorchoke.neocities.org">
<img src="graphics/fudan/cokestill.png" alt="Diet Coke or Choke"></a>
<p></p>
<a href="https://dietcokeorchoke.neocities.org">
<img src="graphics/fudan/cokegif.gif" alt="Diet Coke or Choke Gif"></a><a href="URL">
</div>
</div>
</div>
</div>
  </body>
</html>
[close]
Logged

xx_roryriot_xx
Casual Poster ⚓︎
*


she/he/it/rawr

⛺︎ My Room
SpaceHey: Friend Me!

View Profile WWW

Welcome To The Forum !Joined 2025!
« Reply #1 on: May 09, 2025 @970.61 »

Maybe try setting the width to auto? Not sure. I'm not super experienced with HTML.
Logged
dietcokeorchoke
Casual Poster ⚓︎
*


⛺︎ My Room
SpaceHey: Friend Me!

View Profile WWWArt

Joined 2025!
« Reply #2 on: May 09, 2025 @991.53 »

Well, since I was editing a template, I'll start the template over and copy-paste my changes one by one. Till I find the one that breaks it!
Logged

dietcokeorchoke
Casual Poster ⚓︎
*


⛺︎ My Room
SpaceHey: Friend Me!

View Profile WWWArt

Joined 2025!
« Reply #3 on: May 09, 2025 @0.66 »

Solved!  :mark: I was missing a quote around one of the images in a sidebar.
Logged

Målingen
Casual Poster ⚓︎
*


Hello Everyone, Målingen Here.

⛺︎ My Room
RSS: RSS

View Profile WWWArt

Welcome to the Melonland Forum !Joined 2025!
« Reply #4 on: May 09, 2025 @9.00 »

First, move all your <style>'s to a separate [whatever].css file on your site (just remove <style>, take the css code, and paste it in your css code; then do
Code
<link rel="stylesheet" href="[whatever].css">
) as it'll make everything cleaner in your page's source code.

To answer your question: remove float: left; in your .container div, seen below:

Code
<style>
  .container{
width: 1000px;
height: auto;
max-height: 100%;
border: 5px solid transparent;
  border-radius: 8px;
  padding: 5px;
float: left;
background-color: transparent;
background-clip: padding-box;
margin: 5px;
} 
</style>

Hope this helps.
Logged

That putrid smell...
That awful taste...
It tastes like iron on my tongue...
Maybe I shouldn't have ate graphite...
But 3.6 Roentgent isn't that bad...
Melooon
Hero Member ⚓︎
*****


So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games
RSS: RSS

View Profile WWWArt

Ozwomp wants to know your locationHyperactive DonutGreat Posts PacmanOfficially DogThanks for being rad!a puppy for your travels
« Reply #5 on: May 09, 2025 @572.30 »

Just a few small notes unrelated to the issue; but you should take some time to study up on your HTML document structure because your linked code has quite a few issues  :cry:

You only need one <style> tag pair in the head ~all CSS can go inside a single pair; also you've forgotten to close your <head> and open your <body> so there is no separation between the head and the body; most browsers will be able to handle this but its bad practice and might cause unexpected issues!

Make sure you've got your pyramids will constructed!
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered
dietcokeorchoke
Casual Poster ⚓︎
*


⛺︎ My Room
SpaceHey: Friend Me!

View Profile WWWArt

Joined 2025!
« Reply #6 on: May 09, 2025 @787.21 »

Just a few small notes unrelated to the issue; but you should take some time to study up on your HTML document structure because your linked code has quite a few issues  :cry:

You only need one <style> tag pair in the head ~all CSS can go inside a single pair; also you've forgotten to close your <head> and open your <body> so there is no separation between the head and the body; most browsers will be able to handle this but its bad practice and might cause unexpected issues!

Make sure you've got your pyramids will constructed!


I appreciate the advice! I'm currently just editing templates to brush up on some of the things I knew as a kid (for MySpace lol). My next step is to sit down and really learn from start to finish and then redo my site with layouts I've made from scratch. I worry I might be doing myself a disservice to start out using templates but I was so excited to start making a website I just jumped in!
Logged

Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

Website example page

Started by Icey!Board ✁ ∙ Web Crafting

Replies: 3
Views: 2934
Last post December 16, 2021 @285.10
by cinni
Making a landing page?

Started by DoctorDizzyBoard ☔︎ ∙ I need Help!

Replies: 2
Views: 1149
Last post November 03, 2022 @13.65
by DoctorDizzy
Making a Neo-cities page is so overwhelming!!

Started by syx (dead)Board ✁ ∙ Web Crafting

Replies: 5
Views: 2130
Last post July 02, 2022 @206.93
by Memory

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | ~ Send Feedback ~ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi