The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Help with Layout, Cant get text to be next to my menu?
riffslayer68
post Feb 22 2023, 05:54 PM
Post #1





Group: Members
Posts: 3
Joined: 22-February 23
From: canada
Member No.: 28,817
im fairly new to coding, trying to make a little website and i just cant figure it out. ohmy.gif 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!Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 22 2023, 06:31 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
riffslayer68
post Feb 22 2023, 07:15 PM
Post #3





Group: Members
Posts: 3
Joined: 22-February 23
From: canada
Member No.: 28,817
[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... Attached Image

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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 22 2023, 07:37 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
riffslayer68
post Feb 22 2023, 07:43 PM
Post #5





Group: Members
Posts: 3
Joined: 22-February 23
From: canada
Member No.: 28,817
Oh no worries, thank you for helping me out :-)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 22 2023, 09:28 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,733
Joined: 9-August 06
Member No.: 6
You're welcome. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · General Web Design · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 04:19 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC