Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ Help with Layout

Posted by: riffslayer68 Feb 22 2023, 05:54 PM

im fairly new to coding, trying to make a little website and i just cant figure it out. google isnt any help as i dont really know WHAT
to search. here is my code:

CODE

<!DOCTYPE html>

<html>
<head>

<title> my title </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.content {
  max-width: 600px;
  margin: auto;
  background: #090909;
  padding: 10px;

}

.vertical-menu {
  width: 100px;
}

.vertical-menu a {
  background-color: #2f2f2f;
  color: black;
  display: block;
  padding: 0px;
  border:2px solid black;
  text-decoration: none;
}

.vertical-menu a:hover {
  background-color: #484848;
}

.vertical-menu a.active {
  text-align:center;
  background-color: #2f2f2f;
  color: yellow;
}

a:visited {
text-decoration: none;
color: yellow;
}

</style>

</head>
<body>

<div class="content">

   <div class="vertical-menu">
  <a href="#" class="active">My Stuff</a>
  <a href="https://link">link</a>
   <a href="https://link">link</a>
   <a href="https://link">link</a>
   <a href="https://link">link</a>

<p> this is my text! </p>

</div>

</div>

</body>
</html>

i attached an image of what id like it to look like, any help would be appreciated. thank you!

Posted by: pandy Feb 22 2023, 06:31 PM

So you want the menu to the left of the content?

It can be done many ways, but an easy way is to float the menu left. It isn't necessary, but it beomes easier if you separarate the menu from the content. Like this.

HTML

<div class="vertical-menu">
<a href="#" class="active">My Stuff</a>
<a href="https://link">link</a>
<a href="https://link">link</a>
<a href="https://link">link</a>
<a href="https://link">link</a>
</div>

<div class="content">
<p> this is my text! </p>
</div>

You use very narrow widths in pixels. I removed the with from .content and gave .vertical-menu a width in em instead. That way it will shrink or expand with the text size. I also moved the background color from .content to BODY, so that whole page will be covered.

The left margin on #content is so it will go free from the menu and create a little distance to it. Floats just push the content of adjacent boxes to the side, but the box itself is really under the float, Without a margin the content text would be snug up against the menu.

See if this is in line with what you want. I didn't bother with other margins or padding. You can sort that out yourself so things line up nicely.

CODE

body   { background: #090909; }

.content {
/*   max-width: 600px; */
  margin-left: 16em;

  padding: 15px;

}

.vertical-menu {
  width: 15em;
  float: left
}

.vertical-menu a {
  background-color: #2f2f2f;
  color: black;
  display: block;
  padding: 0px;
  border:2px solid black;
  text-decoration: none;
}

.vertical-menu a:hover {
  background-color: #484848;
}

.vertical-menu a.active {
  text-align:center;
  background-color: #2f2f2f;
  color: yellow;
}

a:visited {
text-decoration: none;
color: yellow;
}

Posted by: riffslayer68 Feb 22 2023, 07:15 PM

[quote name='pandy' date='Feb 22 2023, 06:31 PM' post='145287']

Dude! thank you so much! everything is almost perfect, although i cant seem to figure out how to get the text to align
all the way to the left...

is there anything here that could be preventing it from aligning? or am i just missing a string of code?

CODE

.content {
/*   max-width: 600px; */
  margin-left: 16em;
  padding: 15px;
  max-width: 600px;
  background: #090909;
  margin-right: 16em;
  padding: auto;



}

.vertical-menu {
  width: 13em;
  float: left
}

.vertical-menu a {
  background-color: #2f2f2f;
  color: black;
  display: block;
  padding: 0px;
  border:2px solid black;
  text-decoration: none;
}

.vertical-menu a:hover {
  background-color: #484848;
}

.vertical-menu a.active {
  text-align:center;
  background-color: #2f2f2f;
  color: yellow;
}

a:visited {
text-decoration: none;
color: yellow;
}

Posted by: pandy Feb 22 2023, 07:37 PM

OK. That's because of the left margin I added to .content. I wrongly supposed you wouldn't want the text snug to the menu. Just remove that margin. Or make it smaller, whatever suits you.

Posted by: riffslayer68 Feb 22 2023, 07:43 PM

Oh no worries, thank you for helping me out :-)

Posted by: pandy Feb 22 2023, 09:28 PM

You're welcome.