This question already has answers here:
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How do you easily horizontally center a <div> using CSS? [duplicate]
(22 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 4 years ago.
The middle body text won't center, and I don't know why. Also, if you have any other recommendations, they would be greatly appreciated! This is for a project and I just need a little help. I am using the margin:auto property, but it doesn't seem to work.
body {
margin:10px;
background-color:white;
}
/* Unordered List */
ul {
border:1px solid green;
width:750px;
}
/* Lists styles */
li {
font-weight:bold;
}
.test-div {
width:500px;
height:250px;
background-color:#f2f2f2;
display:block;
margin-left:auto;
margin-right:auto;
}
#body-text {
width:500px;
display:block;
margin-right:auto;
margin-left:auto;
}
/* Divider is 1.5 times shorter than header - 750/1.5 = 500 */
.divider {
background-color:black;
width:500px;
height:1px;
}
.text-center {
display:block;
margin-right:0px auto;
margin-left:0px auto;
}
.centered {
display:block;
margin-right:auto;
margin-left:auto;
text-align:center;
}
.link {
text-decoration:none;
margin-left::auto;
margin-right:auto;
}
.link:hover {
text-decoration:none;
color:#00008B;
}
#footer {
text-align:center;
width:800px;
height:500px;
padding:25px;
border:2px solid green;
margin:0 auto;
}
.filler {
height:100px;
}
ul .divider {
margin-right:auto;
margin-left:auto;
}
<head>
</head>
<script>
</script>
<div class="text-center" style="display:block;margin-left:auto;margin-right:auto;background-color:#f2f2f2;width:750px;height:450px;border-radius:15px;">
<img src="https://blog.adioma.com/wp-content/uploads/2016/02/how-elon-musk-started-infographic-700x466.png" alt="Elon Musk Wealth Sahre Joke" style="width:480px;height:380px;margin-left:10; margin-top:20px"/>
<br>
<em style="font-size:11px;"> Elon musk wealth Share - Joke </em>
</div>
<div id="body-text">
<ul class="text-center" style="list-style-type:none;">
<br>
<div class="centered" style="width:300px;height:40;border:1px solid black;padding-top:10px;">
<h1 style="font-family:monospace"> <em> A Life of Work </em> </h1>
<p> <u> A Timeline of Elon Musk's Life life </u> </p>
</div>
<br>
<li>June 28, 1971 - Born in South Africa </li>
<br>
<div class="divider"> </div>
<br>
<li> Taught himself how to code at age 12</li>
<br>
<div class="divider"> </div>
<br>
<li> Creates and writes a video game called Blastar; sells it for the equivalent of $500 </li>
<br>
<div class="divider"> </div>
<br>
<li> 1988: Graduates from Pretoria Boys High School with distinctions in science and computer studies </li>
<br>
<div class="divider"> </div>
<br>
<li>1989 to 1991: Attends college at Queen’s University in Kingston, Ontario. Then transfers to the University of Pennsylvania; completed a BS in Economics (Wharton) and a BA with a major in physics </li>
<br>
<div class=divider> </div>
<br>
<li> 1995: Moves to Silicon Valley; defers graduate program in applied physics and materials science at Stanford University to join the Internet boom </li>
<br>
<div class="divider"> </div>
<br>
<li> February 1999: Sells Zip2 to Compaq, the personal computer company, for $307 million, of which $22 million went to Musk. Then forms X.com, which in 2000 morphs into PayPal </li>
<br>
<div class="divider"> </div>
<br>
<li> July 2002: eBay acquires PayPal for $1.5 billion in stock, of which $165 million goes to Musk </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Becomes an American citizen </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Founds SpaceX9 </li>
<br>
<div class="divider"> </div>
<br>
<li> 2004: Invests in Tesla Motors </li>
<br>
<div class="divider"> </div>
<br>
<li> 2007: SpaceX wins $1.6 billion contract to bring cargo to the International Space Station </li>
<br>
<div class="divider"> </div>
<br>
<li> October 2008: Becomes Tesla’s CEO </li>
<br>
<div class="divider"> </div>
<br>
<li> Jun 29, 2010: Tesla IPO </li>
<br>
<div class="divider"> </div>
<br>
<li> May 2012: SpaceX becomes the first commercial vehicle to deliver a load of supplies to the International Space Station. </li>
<br>
<div class="divider"> </div>
<br>
<li> June 2012: Tesla begins deliveries of the all-electric Model S </li>
<br>
<div class="divider"> </div>
<br>
<li> August 2013: Releases sketch and concept of the Hyperloop </li>
<br>
<div class="divider"> </div>
</ul> <!-- END of list -->
<div class="filler"> </div>
</div> <!-- END Body Text -->
<!-- Footer -->
<div id="footer">
<div style="width:600px; height:4px; background-color:black;margin:0 auto">
</div>
<div class="filler"> </div>
<!-- Credits START -->
<h4> <b><em> Credits </em><b> </h4>
<div style="border:1px solid lightgrey;width:550px; margin:0 auto">
<p style="font-size:14px;margin-left:auto; margin-right:auto;color:grey;"> Note this events are not updated to current times. All timeline facts are from </p> <a style="font-size:12px;" class="link" href="http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/"> http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/ </a>
</div>
<p style="font-size:10px;text-align:center"> <u> Page made by Jacob Bruce </u> </p>
This centers everything BUT the middle text, any solutions?
Add text-align: center; to your <li> tags.
li {
text-align:center;
}
For body text I have added
#body-text ul > li {
text-align:center;
}
Hope this will help You.
Attached snippet.
Let me know if any other issue .
body {
margin:10px;
background-color:white;
}
/* Unordered List */
ul {
border:1px solid green;
width:750px;
}
/* Lists styles */
li {
font-weight:bold;
}
.test-div {
width:500px;
height:250px;
background-color:#f2f2f2;
display:block;
margin-left:auto;
margin-right:auto;
}
#body-text {
width:500px;
display:block;
margin-right:auto;
margin-left:auto;
}
#body-text ul > li {
text-align:center;
}
/* Divider is 1.5 times shorter than header - 750/1.5 = 500 */
.divider {
background-color:black;
width:500px;
height:1px;
}
.text-center {
display:block;
margin-right:0px auto;
margin-left:0px auto;
}
.centered {
display:block;
margin-right:auto;
margin-left:auto;
text-align:center;
}
.link {
text-decoration:none;
margin-left::auto;
margin-right:auto;
}
.link:hover {
text-decoration:none;
color:#00008B;
}
#footer {
text-align:center;
width:800px;
height:500px;
padding:25px;
border:2px solid green;
margin:0 auto;
}
.filler {
height:100px;
}
ul .divider {
margin-right:auto;
margin-left:auto;
}
<head>
</head>
<script>
</script>
<div class="text-center" style="display:block;margin-left:auto;margin-right:auto;background-color:#f2f2f2;width:750px;height:450px;border-radius:15px;">
<img src="https://blog.adioma.com/wp-content/uploads/2016/02/how-elon-musk-started-infographic-700x466.png" alt="Elon Musk Wealth Sahre Joke" style="width:480px;height:380px;margin-left:10; margin-top:20px;"/>
<br>
<em style="font-size:11px;"> Elon musk wealth Share - Joke </em>
</div>
<div id="body-text">
<ul class="text-center" style="list-style-type:none;">
<br>
<div class="centered" style="width:300px;height:40;border:1px solid black;padding-top:10px;">
<h1 style="font-family:monospace"> <em> A Life of Work </em> </h1>
<p> <u> A Timeline of Elon Musk's Life life </u> </p>
</div>
<br>
<li>June 28, 1971 - Born in South Africa </li>
<br>
<div class="divider"> </div>
<br>
<li> Taught himself how to code at age 12</li>
<br>
<div class="divider"> </div>
<br>
<li> Creates and writes a video game called Blastar; sells it for the equivalent of $500 </li>
<br>
<div class="divider"> </div>
<br>
<li> 1988: Graduates from Pretoria Boys High School with distinctions in science and computer studies </li>
<br>
<div class="divider"> </div>
<br>
<li>1989 to 1991: Attends college at Queen’s University in Kingston, Ontario. Then transfers to the University of Pennsylvania; completed a BS in Economics (Wharton) and a BA with a major in physics </li>
<br>
<div class=divider> </div>
<br>
<li> 1995: Moves to Silicon Valley; defers graduate program in applied physics and materials science at Stanford University to join the Internet boom </li>
<br>
<div class="divider"> </div>
<br>
<li> February 1999: Sells Zip2 to Compaq, the personal computer company, for $307 million, of which $22 million went to Musk. Then forms X.com, which in 2000 morphs into PayPal </li>
<br>
<div class="divider"> </div>
<br>
<li> July 2002: eBay acquires PayPal for $1.5 billion in stock, of which $165 million goes to Musk </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Becomes an American citizen </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Founds SpaceX9 </li>
<br>
<div class="divider"> </div>
<br>
<li> 2004: Invests in Tesla Motors </li>
<br>
<div class="divider"> </div>
<br>
<li> 2007: SpaceX wins $1.6 billion contract to bring cargo to the International Space Station </li>
<br>
<div class="divider"> </div>
<br>
<li> October 2008: Becomes Tesla’s CEO </li>
<br>
<div class="divider"> </div>
<br>
<li> Jun 29, 2010: Tesla IPO </li>
<br>
<div class="divider"> </div>
<br>
<li> May 2012: SpaceX becomes the first commercial vehicle to deliver a load of supplies to the International Space Station. </li>
<br>
<div class="divider"> </div>
<br>
<li> June 2012: Tesla begins deliveries of the all-electric Model S </li>
<br>
<div class="divider"> </div>
<br>
<li> August 2013: Releases sketch and concept of the Hyperloop </li>
<br>
<div class="divider"> </div>
</ul> <!-- END of list -->
<div class="filler"> </div>
</div> <!-- END Body Text -->
<!-- Footer -->
<div id="footer">
<div style="width:600px; height:4px; background-color:black;margin:0 auto">
</div>
<div class="filler"> </div>
<!-- Credits START -->
<h4> <b><em> Credits </em><b> </h4>
<div style="border:1px solid lightgrey;width:550px; margin:0 auto">
<p style="font-size:14px;margin-left:auto; margin-right:auto;color:grey;"> Note this events are not updated to current times. All timeline facts are from </p> <a style="font-size:12px;" class="link" href="http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/"> http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/ </a>
</div>
<p style="font-size:10px;text-align:center"> <u> Page made by Jacob Bruce </u> </p>
Change your #body-text width to width: 750px; and remove your .ul width property.
#body-text {
width: 750px;
...
}
.ul {
border:1px solid green;
}
you should use flex css property:
your html will look like this (you now need to remove unused classes from markup):
<div class="container"> <!-- !!!!!!!!!! ADD THIS !!!!!!!!!!! -->
<div class="text-center"> <!-- !!!!!REMOVE INLINE STYLE HERE!!!! -->
<img src="https://blog.adioma.com/wp-content/uploads/2016/02/how-elon-musk-started-infographic-700x466.png" alt="Elon Musk Wealth Sahre Joke" style="width:480px;height:380px;margin-left:10; margin-top:20px"/>
<br>
<em style="font-size:11px;"> Elon musk wealth Share - Joke </em>
</div>
<div id="body-text">
<ul class="text-center" style="list-style-type:none;">
<br>
<div class="centered" style="width:300px;height:40;border:1px solid black;padding-top:10px;">
<h1 style="font-family:monospace"> <em> A Life of Work </em> </h1>
<p> <u> A Timeline of Elon Musk's Life life </u> </p>
</div>
<br>
<li>June 28, 1971 - Born in South Africa </li>
<br>
<div class="divider"> </div>
<br>
<li> Taught himself how to code at age 12</li>
<br>
<div class="divider"> </div>
<br>
<li> Creates and writes a video game called Blastar; sells it for the equivalent of $500 </li>
<br>
<div class="divider"> </div>
<br>
<li> 1988: Graduates from Pretoria Boys High School with distinctions in science and computer studies </li>
<br>
<div class="divider"> </div>
<br>
<li>1989 to 1991: Attends college at Queen’s University in Kingston, Ontario. Then transfers to the University of Pennsylvania; completed a BS in Economics (Wharton) and a BA with a major in physics </li>
<br>
<div class=divider> </div>
<br>
<li> 1995: Moves to Silicon Valley; defers graduate program in applied physics and materials science at Stanford University to join the Internet boom </li>
<br>
<div class="divider"> </div>
<br>
<li> February 1999: Sells Zip2 to Compaq, the personal computer company, for $307 million, of which $22 million went to Musk. Then forms X.com, which in 2000 morphs into PayPal </li>
<br>
<div class="divider"> </div>
<br>
<li> July 2002: eBay acquires PayPal for $1.5 billion in stock, of which $165 million goes to Musk </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Becomes an American citizen </li>
<br>
<div class="divider"> </div>
<br>
<li> 2002: Founds SpaceX9 </li>
<br>
<div class="divider"> </div>
<br>
<li> 2004: Invests in Tesla Motors </li>
<br>
<div class="divider"> </div>
<br>
<li> 2007: SpaceX wins $1.6 billion contract to bring cargo to the International Space Station </li>
<br>
<div class="divider"> </div>
<br>
<li> October 2008: Becomes Tesla’s CEO </li>
<br>
<div class="divider"> </div>
<br>
<li> Jun 29, 2010: Tesla IPO </li>
<br>
<div class="divider"> </div>
<br>
<li> May 2012: SpaceX becomes the first commercial vehicle to deliver a load of supplies to the International Space Station. </li>
<br>
<div class="divider"> </div>
<br>
<li> June 2012: Tesla begins deliveries of the all-electric Model S </li>
<br>
<div class="divider"> </div>
<br>
<li> August 2013: Releases sketch and concept of the Hyperloop </li>
<br>
<div class="divider"> </div>
</ul> <!-- END of list -->
<div class="filler"> </div>
</div> <!-- END Body Text -->
<div> <!-- !!!!!!!!!! ADD THIS !!!!!!!!!!! -->
<!-- Footer -->
<div id="footer">
<div style="width:600px; height:4px; background-color:black;margin:0 auto">
</div>
<div class="filler"> </div>
<!-- Credits START -->
<h4> <b><em> Credits </em><b> </h4>
<div style="border:1px solid lightgrey;width:550px; margin:0 auto">
<p style="font-size:14px;margin-left:auto; margin-right:auto;color:grey;"> Note this events are not updated to current times. All timeline facts are from </p> <a style="font-size:12px;" class="link" href="http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/"> http://www.mercurynews.com/2014/04/10/timeline-elon-musks-accomplishments/ </a>
</div>
<p style="font-size:10px;text-align:center"> <u> Page made by Jacob Bruce </u> </p>
`
for css:
body {
margin:10px;
background-color:white;
}
/* Unordered List */
ul {
border:1px solid green;
width:750px;
}
/* Lists styles */
li {
font-weight:bold;
}
.test-div {
width:500px;
height:250px;
background-color:#f2f2f2;
display:block;
margin-left:auto;
margin-right:auto;
}
/*#body-text {*/
/* width:500px; */
/* display:block; */
/* margin-right:auto; */
/* margin-left:auto; */
/*}*/
/* Divider is 1.5 times shorter than header - 750/1.5 = 500 */
.divider {
background-color:black;
width:500px;
height:1px;
}
/*.text-center {
display:block;
margin-right:0px auto;
margin-left:0px auto;
}*/
/*.centered {
display:block;
margin-right:auto;
margin-left:auto;
text-align:center;
} */
/* THIS IS FLEX */
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.link {
text-decoration:none;
margin-left::auto;
margin-right:auto;
}
.link:hover {
text-decoration:none;
color:#00008B;
}
#footer {
text-align:center;
width:800px;
height:500px;
padding:25px;
border:2px solid green;
margin:0 auto;
}
.filler {
height:100px;
}
ul .divider {
margin-right:auto;
margin-left:auto;
}
a useful guide to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I am trying to have two columns in my block. The result of my code is I am having my bullet lists overflow outside of the block area. How do I adjust the problem?
Here is my code as a snippet:
#education{
padding:50px 15px 20px 15px;
border-bottom:1px solid #dcd9d9;
text-align:center}
#education h2{color:#374054;margin-bottom:50px}
.education-block{
max-width:700px;
margin:0 auto 30px auto;
padding:15px;
border:1px solid #dcd9d9;
text-align:left;
}
.education-block h3{
font-weight:500;
float:left;
margin:0;
color:#374054
}
.education-block span{
color:#74808a;
float:right}
.education-block h4{
color:#74808a;
clear:both;
font-weight:500;
margin:0 0 15px 0}
.education-block p,.education-block ul{
margin:0;
color:#74808a;
font-size:0.9em
}
.education-block ul{padding:0 0 0 15px}
<div id="education">
<h2 class="heading">Education</h2>
<div class="education-block">
<h3>A University</h3>
<span class="education-date">Sep 2018 - Present</span>
<h4>Master of Computer Science</h4>
<p>
The courses intened to take are:
</p>
<div class="col-xs-6">
<p>A:</p>
<ul>
<li>
B
</li>
<li>
C
</li>
<li>
D
</li>
</ul>
</div>
<div class="col-xs-6">
<p>E:</p>
<ul>
<li>
F
</li>
<li>
G
</li>
<li>
H
</li>
</ul>
</div>
</div>
</div>
In this case, BCD and FGH is not included inside the education-block. I am trying to solve this problem.
Im not sure exactly how do you want it to look, but because of theese clases i think you are using bootstrap and triying to get two cols whith the lists.
In that case you must wrap all in a div with class row and this in a div with class container or container-fluid, like this:
<div id="education">
<h2 class="heading">Education</h2>
<div class="education-block">
<h3>A University</h3>
<span class="education-date">Sep 2018 - Present</span>
<h4>Master of Computer Science</h4>
<p>
The courses intened to take are:
</p>
<div class="container">
<div class="row">
<div class="col-xs-6">
<p>A:</p>
<ul>
<li>
B
</li>
<li>
C
</li>
<li>
D
</li>
</ul>
</div>
<div class="col-xs-6">
<p>E:</p>
<ul>
<li>
F
</li>
<li>
G
</li>
<li>
H
</li>
</ul>
</div>
</div> <!-- Row -->
</div> <!-- Container-->
</div>
</div>
I have the following code:
.date {
float: left;
border: 1px white solid;
text-align: left;
}
.text {
float: left;
text-align: left;
margin: 7px;
/* color: white; */ /* Removed for the snippet */
border: 1px white solid;
}
<ul>
<ol>
<div class="date">
<span>Feb 24 1955</span>
</div>
<div class="text">Steven Paul was born in San Francisco, the son of Abdulfattah Jandali and Joanne Schieble. He is quickly adopted by Paul and Clara Jobs
</div>
</ol>
<ol>
<div class="date">
<span>1969</span>
</div>
<div class="text">Steve Jobs meets Steve Wozniak, 5 years older, through a mutual friend. Woz and Steve share a love of electronics, Bob Dylan, and pranks
</div>
</ol>
<ol>
<div class="date">
<span>1974</span>
</div>
<div class="text">Steve gets his first job at video game maker Atari, and later makes a trip to India to 'seek enlightenment' with his college friend Dan Kottke
</div>
</ol>
<ol>
<div class="date">
<span>April 1 1976</span>
</div>
<div class="text">Apple Computer Inc. is incorporated by Steve Jobs, Steve Wozniak and Ron Wayne
</div>
</ol>
And I want the display to show up as (without the bullet points)
Date Text
Date Text
But right now it's showing as Date Text Date Text
I think if I didn't use div and instead only used ol it might work, but I want to practice using div and understand how positioning works in CSS.
First of all, replace ol with li. ol means an ordered list while li means list-item. Don't mix-up the two. ul and ol must contain li.
For your problem, I suggest a flex-box solution:
ul {
list-style: none;
width: 100%;
}
li {
width: 100%;
display: flex;
margin: 5px;
box-sizing: border-box;
}
.date {
width: 25%;
align-self: center;
}
.text {
flex: 1;
}
<ul>
<li>
<div class="date">
<span>Feb 24 1955</span>
</div>
<div class="text">Steven Paul was born in San Francisco, the son of Abdulfattah Jandali and Joanne Schieble. He is quickly adopted by Paul and Clara Jobs
</div>
</li>
<li>
<div class="date">
<span>1969</span>
</div>
<div class="text">Steve Jobs meets Steve Wozniak, 5 years lider, through a mutual friend. Woz and Steve share a love of electronics, Bob Dylan, and pranks
</div>
</li>
<li>
<div class="date">
<span>1974</span>
</div>
<div class="text">Steve gets his first job at video game maker Atari, and later makes a trip to India to 'seek enlightenment' with his clilege friend Dan Kottke
</div>
</li>
<li>
<div class="date">
<span>April 1 1976</span>
</div>
<div class="text">Apple Computer Inc. is incorporated by Steve Jobs, Steve Wozniak and Ron Wayne
</div>
</li>
You only need to float .date, then .text will wrap around it. Your HTML is invalid though. a ul can't have an ol as a direct child. That should be a li instead.
.date {
float: left;
margin: 0 1em 0 0;
}
li {
margin: 0 0 1em;
list-style: none;
}
<ul>
<li>
<div class="date">
<span>Feb 24 1955</span>
</div>
<div class="text">Steven Paul was born in San Francisco, the son of Abdulfattah Jandali and Joanne Schieble. He is quickly adopted by Paul and Clara Jobs
</div>
</li>
<li>
<div class="date">
<span>1969</span>
</div>
<div class="text">Steve Jobs meets Steve Wozniak, 5 years older, through a mutual friend. Woz and Steve share a love of electronics, Bob Dylan, and pranks
</div>
</li>
<li>
<div class="date">
<span>1974</span>
</div>
<div class="text">Steve gets his first job at video game maker Atari, and later makes a trip to India to 'seek enlightenment' with his college friend Dan Kottke
</div>
</li>
<li>
<div class="date">
<span>April 1 1976</span>
</div>
<div class="text">Apple Computer Inc. is incorporated by Steve Jobs, Steve Wozniak and Ron Wayne
</div>
</li>
</ul>
I've been working on a website in which you can access the information for many different songs, including artist, album, length, etc. On the homepage, I have a navigation bar fixed to the left of the screen(25% in width). It has a home link, and a link to every letter(the songs are organized in sections based on their first letter). In a perfect world, I would want all these links to fit perfectly vertical in this div, however this is not the case. When I open the website on different screens, there is always different amounts of 'excess' below the 'Z'.
The navigation bar looks a little like this:
Home
A
B
C
D
...
Z
(This is where the unused space is)
Here is my code:
html,
body {
margin: 0;
}
/* Navigation Menu Styling */
ul.main-menu {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
ul.main-menu li a {
display: block;
color: #000;
padding: 7.45px 0 7.45px 16px;
text-decoration: none;
}
ul.main-menu li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
/* Text Styling */
h1,
h2,
p {
font-family: Calibri
}
p a:link,
p a:visited {
font-family: Times New Roman;
color: black;
text-decoration: none;
}
p a:hover {
color: red;
}
<ul class="main-menu">
<li><a class="active" href="#home">Home</a>
</li>
<li>A
</li>
<li>B
</li>
<li>C
</li>
<li>D
</li>
<li>E
</li>
<li>F
</li>
<li>G
</li>
<li>H
</li>
<li>I
</li>
<li>J
</li>
<li>K
</li>
<li>L
</li>
<li>M
</li>
<li>N
</li>
<li>O
</li>
<li>P
</li>
<li>Q
</li>
<li>R
</li>
<li>S
</li>
<li>T
</li>
<li>U
</li>
<li>V
</li>
<li>W
</li>
<li>X
</li>
<li>Y
</li>
<li>Z
</li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<h1 id="home">Welcome To Name That Artist</h2>
<p> You can find information about a song from the wide selection we offer.</p>
<h3>Use the navigation bar to jump to a letter or search for a specific song.</h3>
<hr id="a_songs"/><p align="center">A</p><hr/>
<div>
<p>
<a id="all_of_me_john_legend" href="songs/a/All_Of_Me_John_Legend.html">All Of Me - John Legend</a>
</p>
</div>
<hr id="b_songs"/><p align="center">B</p><hr/>
<div>
<p>
<a id="bad_blood_bastille" href="songs/b/Bad_Blood_Bastille.html">Bad Blood - Bastille</a>
</p>
</div>
<hr id="c_songs"/><p align="center">C</p><hr/>
<div>
<p>
<a id="cake_by_the_ocean_dnce" href="songs/c/Cake_By_The_Ocean_DNCE.html">Cake By The Ocean - DNCE</a>
</p>
</div>
<hr id="d_songs"/><p align="center">D</p><hr/>
<div>
<p>
<a id="dont_stop_believin_journey" href="songs/d/Dont_Stop_Believin_Journey.html">Don't Stop Believin' - Journey</a>
</p>
</div>
<hr id="e_songs"/><p align="center">E</p><hr/>
<div>
<p>
<a id="eye_of_the_tiger_survivor" href="songs/e/Eye_Of_The_Tiger_Survivor.html">Eye Of The Tiger - Survivor</a>
</p>
</div>
<hr id="f_songs"/><p align="center">F</p><hr/>
<div>
<p>
<a id="feel_good_robin_thicke" href="songs/f/Feel_Good_Robin_Thicke.html">Feel Good - Robin Thicke</a>
</p>
</div>
<hr id="g_songs"/><p align="center">G</p><hr/>
<div>
<p>
<a id="geronimo_sheppard" href="songs/g/Geronimo_Sheppard.html">Geronimo - Sheppard</a>
</p>
</div>
<hr id="h_songs"/><p align="center">H</p><hr/>
<div>
<p>
<a id="here_alessia_cara" href="songs/h/Here_Alessia_Cara.html">Here - Alessia Cara</a>
</p>
</div>
<hr id="i_songs"/><p align="center">I</p><hr/>
<div>
<p>
<a id="i_write_sins_not_tragedies_panic_at_the_disco" href="songs/i/I_Write_Sins_Not_Tragedies_Panic_At_The_Disco.html">I Write Sins Not Tragedies - Panic! At The Disco</a>
</p>
</div>
<hr id="j_songs"/><p align="center">J</p><hr/>
<div>
<p>
<a id="just_give_me_a_reason_pink" href="songs/j/Just_Give_Me_A_Reason_Pink.html">Just Give Me A Reason - P!nk</a>
</p>
</div>
<hr id="k_songs"/><p align="center">K</p><hr/>
<div>
<p>
<a id="kill_of_the_night_gin_wigmore" href="songs/k/Kill_Of_The_Night_Gin_Wigmore.html">Kill Of The Night - Gin Wigmore</a>
</p>
</div>
<hr id="l_songs"/><p align="center">L</p><hr/>
<div>
<p>
<a id="latch_disclosure" href="songs/l/Latch_Disclosure.html">Latch - Disclosure</a>
</p>
</div>
<hr id="m_songs"/><p align="center">M</p><hr/>
<div>
<p>
<a id="me_and_my_broken_heart_rixton" href="songs/m/Me_And_My_Broken_Heart_Rixton.html">Me And My Broken Heart - Rixton</a>
</p>
</div>
<hr id="n_songs"/><p align="center">N</p><hr/>
<div>
<p>
<a id="the_nights_avicci" href="songs/n/The_Nights_Avicci.html">The Nights - Avicci</a>
</p>
</div>
<hr id="o_songs"/><p align="center">O</p><hr/>
<div>
<p>
<a id="on_my_mind_ellie_goulding" href="songs/o/On_My_Mind_Ellie_Goulding.html">On My Mind - Ellie Goulding</a>
</p>
</div>
<hr id="p_songs"/><p align="center">P</p><hr/>
<div>
<p>
<a id="paradise_coldplay" href="songs/p/Paradise_Coldplay.html">Paradise - Coldplay</a>
</p>
</div>
<hr id="q_songs"/><p align="center">Q</p><hr/>
<div>
<p>
</p>
</div>
<hr id="r_songs"/><p align="center">R</p><hr/>
<div>
<p>
<a id="rather_be_clean_bandit" href="songs/r/Rather_Be_Clean_Bandit.html">Rather Be - Clean Bandit</a>
</p>
</div>
<hr id="s_songs"/><p align="center">S</p><hr/>
<div>
<p>
<a id="secrets_coldplay" href="songs/s/Secrets_Coldplay.html">Secrets - Coldplay</a>
</p>
</div>
<hr id="t_songs"/><p align="center">T</p><hr/>
<div>
<p>
<a id="this_is_how_we_do_katy_perry" href="songs/t/This_Is_How_We_Do_Katy_Perry.html">This Is How We Do - Katy Perry</a>
</p>
</div>
<hr id="u_songs"/><p align="center">U</p><hr/>
<div>
<p>
<a id="uma_thurman_fall_out_boy" href="songs/u/Uma_Thurman_Fall_Out_Boy.html">Uma Thurman - Fall Out Boy</a>
</p>
</div>
<hr id="v_songs"/><p align="center">V</p><hr/>
<div>
<p>
<a id="victorious_panic_at_the_disco" href="songs/v/Victorious_Panic_At_The_Disco.html">Victorious - Panic! At The Disco</a>
</p>
</div>
<hr id="w_songs"/><p align="center">W</p><hr/>
<div>
<p>
<a id="want_to_want_me_jason_derulo" href="songs/w/Want_To_Want_Me_Jason_Derulo.html">Want To Want Me - Jason Derulo</a>
</p>
</div>
<hr id="x_songs"/><p align="center">X</p><hr/>
<div>
<p>
<a id="xo_the_eden_project" href="songs/x/XO_The_Eden_Project.html">XO - The Eden Project</a>
</p>
</div>
<hr id="y_songs"/><p align="center">Y</p><hr/>
<div>
<p>
<a id="you_know_you_like_it_dj_snake" href="songs/y/You_Know_You_Like_It_DJ_Snake.html">You Know You Like It - DJ Snake</a>
</p>
</div>
<hr id="z_songs"/><p align="center">Z</p><hr/>
<div>
<p>
</p>
</div>
</div>
You may use display:flexon ul and flex:1; on li, so they spray evenly on the whole area avalaible (or shrink on themselves).
edit : added an extra level of flexbox to wrap all letters at screen
snippet updated and DEMO to play with and fork
html,
body {
margin: 0;
}
/* Navigation Menu Styling */
ul.main-menu {
display: flex;
flex-flow: column wrap;
}
ul.main-menu li {
flex: 1;
display:flex;
align-items:center;
}
ul.main-menu li a {
padding: 0.25em 0.5em;
flex:1;
}
/* end flex model */
ul.main-menu {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
ul.main-menu li a {
display: block;
color: #000;
text-decoration: none;
}
ul.main-menu li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
/* Text Styling */
h1,
h2,
p {
font-family: Calibri
}
p a:link,
p a:visited {
font-family: Times New Roman;
color: black;
text-decoration: none;
}
p a:hover {
color: red;
}
<ul class="main-menu">
<li><a class="active" href="#home">Home</a>
</li>
<li>A
</li>
<li>B
</li>
<li>C
</li>
<li>D
</li>
<li>E
</li>
<li>F
</li>
<li>G
</li>
<li>H
</li>
<li>I
</li>
<li>J
</li>
<li>K
</li>
<li>L
</li>
<li>M
</li>
<li>N
</li>
<li>O
</li>
<li>P
</li>
<li>Q
</li>
<li>R
</li>
<li>S
</li>
<li>T
</li>
<li>U
</li>
<li>V
</li>
<li>W
</li>
<li>X
</li>
<li>Y
</li>
<li>Z
</li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<h1 id="home">Welcome To Name That Artist</h2>
<p> You can find information about a song from the wide selection we offer.</p>
<h3>Use the navigation bar to jump to a letter or search for a specific song.</h3>
<hr id="a_songs"/><p align="center">A</p><hr/>
<div>
<p>
<a id="all_of_me_john_legend" href="songs/a/All_Of_Me_John_Legend.html">All Of Me - John Legend</a>
</p>
</div>
<hr id="b_songs"/><p align="center">B</p><hr/>
<div>
<p>
<a id="bad_blood_bastille" href="songs/b/Bad_Blood_Bastille.html">Bad Blood - Bastille</a>
</p>
</div>
<hr id="c_songs"/><p align="center">C</p><hr/>
<div>
<p>
<a id="cake_by_the_ocean_dnce" href="songs/c/Cake_By_The_Ocean_DNCE.html">Cake By The Ocean - DNCE</a>
</p>
</div>
<hr id="d_songs"/><p align="center">D</p><hr/>
<div>
<p>
<a id="dont_stop_believin_journey" href="songs/d/Dont_Stop_Believin_Journey.html">Don't Stop Believin' - Journey</a>
</p>
</div>
<hr id="e_songs"/><p align="center">E</p><hr/>
<div>
<p>
<a id="eye_of_the_tiger_survivor" href="songs/e/Eye_Of_The_Tiger_Survivor.html">Eye Of The Tiger - Survivor</a>
</p>
</div>
<hr id="f_songs"/><p align="center">F</p><hr/>
<div>
<p>
<a id="feel_good_robin_thicke" href="songs/f/Feel_Good_Robin_Thicke.html">Feel Good - Robin Thicke</a>
</p>
</div>
<hr id="g_songs"/><p align="center">G</p><hr/>
<div>
<p>
<a id="geronimo_sheppard" href="songs/g/Geronimo_Sheppard.html">Geronimo - Sheppard</a>
</p>
</div>
<hr id="h_songs"/><p align="center">H</p><hr/>
<div>
<p>
<a id="here_alessia_cara" href="songs/h/Here_Alessia_Cara.html">Here - Alessia Cara</a>
</p>
</div>
<hr id="i_songs"/><p align="center">I</p><hr/>
<div>
<p>
<a id="i_write_sins_not_tragedies_panic_at_the_disco" href="songs/i/I_Write_Sins_Not_Tragedies_Panic_At_The_Disco.html">I Write Sins Not Tragedies - Panic! At The Disco</a>
</p>
</div>
<hr id="j_songs"/><p align="center">J</p><hr/>
<div>
<p>
<a id="just_give_me_a_reason_pink" href="songs/j/Just_Give_Me_A_Reason_Pink.html">Just Give Me A Reason - P!nk</a>
</p>
</div>
<hr id="k_songs"/><p align="center">K</p><hr/>
<div>
<p>
<a id="kill_of_the_night_gin_wigmore" href="songs/k/Kill_Of_The_Night_Gin_Wigmore.html">Kill Of The Night - Gin Wigmore</a>
</p>
</div>
<hr id="l_songs"/><p align="center">L</p><hr/>
<div>
<p>
<a id="latch_disclosure" href="songs/l/Latch_Disclosure.html">Latch - Disclosure</a>
</p>
</div>
<hr id="m_songs"/><p align="center">M</p><hr/>
<div>
<p>
<a id="me_and_my_broken_heart_rixton" href="songs/m/Me_And_My_Broken_Heart_Rixton.html">Me And My Broken Heart - Rixton</a>
</p>
</div>
<hr id="n_songs"/><p align="center">N</p><hr/>
<div>
<p>
<a id="the_nights_avicci" href="songs/n/The_Nights_Avicci.html">The Nights - Avicci</a>
</p>
</div>
<hr id="o_songs"/><p align="center">O</p><hr/>
<div>
<p>
<a id="on_my_mind_ellie_goulding" href="songs/o/On_My_Mind_Ellie_Goulding.html">On My Mind - Ellie Goulding</a>
</p>
</div>
<hr id="p_songs"/><p align="center">P</p><hr/>
<div>
<p>
<a id="paradise_coldplay" href="songs/p/Paradise_Coldplay.html">Paradise - Coldplay</a>
</p>
</div>
<hr id="q_songs"/><p align="center">Q</p><hr/>
<div>
<p>
</p>
</div>
<hr id="r_songs"/><p align="center">R</p><hr/>
<div>
<p>
<a id="rather_be_clean_bandit" href="songs/r/Rather_Be_Clean_Bandit.html">Rather Be - Clean Bandit</a>
</p>
</div>
<hr id="s_songs"/><p align="center">S</p><hr/>
<div>
<p>
<a id="secrets_coldplay" href="songs/s/Secrets_Coldplay.html">Secrets - Coldplay</a>
</p>
</div>
<hr id="t_songs"/><p align="center">T</p><hr/>
<div>
<p>
<a id="this_is_how_we_do_katy_perry" href="songs/t/This_Is_How_We_Do_Katy_Perry.html">This Is How We Do - Katy Perry</a>
</p>
</div>
<hr id="u_songs"/><p align="center">U</p><hr/>
<div>
<p>
<a id="uma_thurman_fall_out_boy" href="songs/u/Uma_Thurman_Fall_Out_Boy.html">Uma Thurman - Fall Out Boy</a>
</p>
</div>
<hr id="v_songs"/><p align="center">V</p><hr/>
<div>
<p>
<a id="victorious_panic_at_the_disco" href="songs/v/Victorious_Panic_At_The_Disco.html">Victorious - Panic! At The Disco</a>
</p>
</div>
<hr id="w_songs"/><p align="center">W</p><hr/>
<div>
<p>
<a id="want_to_want_me_jason_derulo" href="songs/w/Want_To_Want_Me_Jason_Derulo.html">Want To Want Me - Jason Derulo</a>
</p>
</div>
<hr id="x_songs"/><p align="center">X</p><hr/>
<div>
<p>
<a id="xo_the_eden_project" href="songs/x/XO_The_Eden_Project.html">XO - The Eden Project</a>
</p>
</div>
<hr id="y_songs"/><p align="center">Y</p><hr/>
<div>
<p>
<a id="you_know_you_like_it_dj_snake" href="songs/y/You_Know_You_Like_It_DJ_Snake.html">You Know You Like It - DJ Snake</a>
</p>
</div>
<hr id="z_songs"/><p align="center">Z</p><hr/>
<div>
<p>
</p>
</div>
</div>
I think I would use relative sizing on the height to do this. Basically, set the height and font-size of the links to a percentage of the viewport with the vh unit of measure.
https://jsfiddle.net/6ksL4845/
ul.main-menu li a {
display: block;
color: #000;
text-decoration: none;
height:3.3vh;
font-size:3vh;
padding:0.2vh 5%;
}
Also, an unsolicited suggestion to simplify your markup (also shown in fiddle:
you might change:
<hr id="a_songs"/><p align="center">A</p><hr/>
to:
<p id="a_songs" class="letter_heading"/>A</p>
and add this to your CSS:
.letter_heading {
border-top:1px solid #bbb;
border-bottom:1px solid #bbb;
padding:15px 0px;
text-align:center;}
I can't get these to move to the center of the page. Anyone see what's wrong?
<ul id="contact">
<h1> Contact </h1>
<p> Dreamstowheels#yahoo.com </p>
<p> 2236 El Camino Real <br>
Santa Clara Ca 95050 </p>
</ul>
<ul id="follow">
<h1> Follow </h1>
<img src="http://www.flagera.eu/sites/all/modules/socialmedia/icons/levelten/glossy/32x32/facebook.png">
</ul>
<ul id="supporters">
<h1> Supporters </h1>
<p> Cyclinginquisition.com </p>
<p> Colombia Cycling Team </p>
<p> Calmar Bicycles </p>
<p> Rock Solid Cycling </p>
<p> Fast Freddie Foundation </p>
<p> Golden Creek Services (Envio de Paquetes) </p>
</ul>
</footer>
CSS
footer{ /*Footer section attributes */
margin: -50px auto;
width: 100%;
text-align: center;
/* border-top: solid 1px;*/
}
Let me know if you need to css for the contact, follow, and supporters divs. Thanks in advance.
Erase everything in your CSS code in fiddle and just put the following there.
footer{ margin:0 auto; text-align:center;}
https://jsfiddle.net/u2Zb2/45/
My mini website works well in chrome, but not IE. Can someone tell me why it doesn't?
<!DOCTYPE html>
<html>
<head>
<title>Steves Homepage</title>
<style>
#left {
float:left;
margin:0;
padding:0;
width:33%;
;
}
#right {
float:right;
margin:0;
padding:0;
width:33%;
}
#middle {
float:left;
width:33%;
}
#wrapper {
width:100%;
}
li {
list-style-type: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="left">
<ul>
<li><b>Useful Docs</b></li>
<li>Passwords
</li>
<li>Server Naming Convention</li>
<li>Common Phone Numbers</li>
<li>GPO</li>
<li>Useful Emails</li>
<li>F5 Notes</li>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<b>Spreadsheets</b>
<li>DSL Details</li>
<li>IP Spreadsheet</li>
<li>Phone Numbers</li>
</ul>
</div>
<div id="middle">
<ul>
<li><b>Configurations</b></li>
<li>MRV Config</li>
<li>MRV Lines</li>
<li>DMVPN Config
</li>
<li>PDU
</li>
<li>UPS
</li>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<b>Websites</b>
<li>Orion
</li>
<li>Timesheets
</li>
<li>Change Management
</li>
<li>Onyx
</li>
<li>Juniper VPN</li>
</ul>
</div>
<div id="right">
<ul>
<li><b>How To Guides</b>
<li>Meeting Rooms</li>
<li>Activations</li>
<li>Engineer Dispatch Guide</li>
<li>Temperature Issues</li>
<li>Comms Standards Normal</li>
<li>Comms Standards Large</li>
<li>Orion Back End</li>
<li>Orion Front End</li>
<li>New Site Deployment Checklist</li>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<b>Useful Links</b>
<li>Birmingham NAS</li>
<li>Secure CRT Files</li>
<li>IOS Images</li>
<li>Proxy Pac File</li>
</ul>
</div>
</div>
</body>
</html>
In IE the display is fine, but when you click on any of the links it doesn't direct you to the files. I don't understand why, because they must be referenced correctly because chrome loads the links.
you can use relative address with respective to the current folder. like
For file in similar folder
Link
and folder which is one up lavel
benifite to this is if you change your project your given absolute file address dont work but relative will work fine