HELP!: Trying to get a main page centered and looking good - ☔︎ ∙ I need Help!

thecreechur
Casual Poster ⚓︎

Creechur [he/they]

⛺︎ My Room
StatusCafe: thecreechur
iMood:

HELP!: Trying to get a main page centered and looking good

« on: September 20, 2023 @766.18 »

Hey y'all! SO I'm trying to get my main content to be centered. Originally I managed to achieve what I wanted using frames, but decided that this may not be good for future mobile/accessibility optimization (and I'm pretty new to coding anyway). ANYWAY I've managed to sort out and get my sidebar working how I want it to, except now I'm a bit stuck on how to get my main bit to look good.

here is the main bit with a float:right property attached to it:

and this is what happens when I remove it:

I think what I want to do is get the main bit to act like it's own thing, if that makes sense?

has anybody got any suggestions as to what to kind of thing to search for :S thanks


	Logged

Melooon
Hero Member ⚓︎

So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games

...

Re: HELP!: Trying to get a main page centered and looking good

« Reply #1 on: September 20, 2023 @774.61 »

On the main bit try:

Code

float:left;
margin: auto;

And make sure it has a width set ^^ - thats the classic centring trick.

If that doesn't work, post a link to your page code; that will allow a more details answer!


	Logged

everything lost will be recovered, when you drift into the arms of the undiscovered

thecreechur
Casual Poster ⚓︎

Creechur [he/they]

⛺︎ My Room
StatusCafe: thecreechur
iMood:

Re: HELP!: Trying to get a main page centered and looking good

« Reply #2 on: September 20, 2023 @801.94 »

ah that didn't seem to work, there's a good chance I've mixed something up here haha :P

So here's my html code

Code

 <body>
    <header><h1>WELCOME</h1></header>
    <nav class="sidemenu"><ul style="list-style-type: none;">
      <li><a href="home.html">home</a></li>
      <li><a href="updates.html">updates</a></li>
      <li><a href="about.html">about</a></li>
      <li><a href="manifesto.html">some words</li>
      <li><a href="quowo.html">the quo hole</a></li>
      <li><a href="https://bellavista-creechur.neocities.org/viewtehquo">view them</a></li>
      <!--<li><a></a>shrines</li>-->
      <li><a href="resources.html">resources</li>
      <li><a href="links.html">links</li>
      <!--<li><a></a>snemail</li>-->
      <!--<li><a></a>to-do</li>-->
      <li><a href="https://bellavista-creechur.neocities.org/" target="_blank">old neo</a></li>
    </ul></nav>
    <main id="content">
      <p>You have reached The Creechur's Home.</p>
      <p>
        There will be strange and unusual things here. <br />An unhinged passion
        for a certain British rock band. <br />Maybe art. <br />Maybe general
        rambings.
      </p>
      <p>
        The Creechur is only a beginner in regards to coding. <br />There will
        be rough patches and probably bits of broken code.<br />And eternal
        construction. <br />As of now this site is not optimised for mobile and
        currently is best viewed on a desktop browser, or at a push a tablet.
      </p>
      <p>
        Please enjoy your stay :] <br />
        There will be more to come.
      </p>
      <p>The Creechur<br />xxx</p></main>
    
  </body>

and here's the css for the main bit:

Code

body {
    background-image: url('/textures and bgs/WATER01B.GIF');
    background-color: rgb(99, 148, 165);
}

h1 {
    color: rgb(32, 26, 70);
    font-family: 'Courier New', Courier, monospace;
    font-size: 500%;
    text-align: center;

}

p {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.125em;
    text-align: center;

}

#content {
    height: 500px;
    border: 5px dashed rgb(32, 26, 70);
    border-radius: 10px;
    background-color: rgb(178, 182, 224);
    overflow-y: auto;
    max-width: 700px;
}

.sidemenu {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.4em;
    color: white;
    text-decoration: underline;
    list-style-type: none;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 250px;
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
    border-right: 5px;
    border-color: black;
    border-style: solid;
    background-image: url('/textures and bgs/932dark.jpg');
    background-color: rgb(56, 94, 107);
    height: 100%;
    position: fixed;
    overflow: auto;
}


	Logged

Melooon
Hero Member ⚓︎

So many stars!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games

...

Re: HELP!: Trying to get a main page centered and looking good

« Reply #3 on: September 20, 2023 @815.16 »

Ooph looks like I was wrong about needing the float!

This works for me:

Code

#content {
    border: 5px dashed rgb(32, 26, 70);
    border-radius: 10px;
    background-color: rgb(178, 182, 224);
    max-width: 700px;
    margin: auto;
}


	Logged

everything lost will be recovered, when you drift into the arms of the undiscovered

thecreechur
Casual Poster ⚓︎

Creechur [he/they]

⛺︎ My Room
StatusCafe: thecreechur
iMood:

Re: HELP!: Trying to get a main page centered and looking good

« Reply #4 on: September 20, 2023 @954.65 »

rejoice! I figured it out!

turns out I needed to put margin-left:250px; (the width of my sidebar) into my body tag and it's sorted it all out :P

thanks for your advice!


	Logged

Pages: [1]

« previous next »

Vaguely similar topics! (3)