HI. What i Want to do is i want to color up my homepage with 2 colors, where the centre of the page is different color with the whole's background color. So, the blue gridlines is the part where i want it in white color.
below is the code:
<body>
<style>
body {
background-color: #A2D8EB;
}
#wrapper
{
background-color:#F4F4F4;
}
</style>
<center>
<br>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'>Utama</a></li>
<li><a href='login design.php'>Log Masuk</a></li>
<li><a href='contact.php'>Hubungi Kami</a></li>
</ul>
</div>
</center>
<center>
<br><br>
<img src="bilik/a.gif">
</center>
<center>
<div id="wrapper">
<p font face="Verdana,Arial,Helvetica size="6" color="black">Sistem ini dibangunkan oleh Cawangan Teknologi Maklumat </p>
<p font face="Verdana,Arial,Helvetica size="6" color="black"> Jabatan Kastam Diraja Malaysia Wilayah Persekutuan Kuala Lumpur </p>
<p font face="Verdana,Arial,Helvetica size="6" color="black">bagi memudahkan semua staf untuk membuat tempahan bilik di JKDM WPKL </p>
</div>
</center>
</body>
so i really hope you guys can help me out. thank you :
Hi I have understood your problem and here is the solution of it. Try it may be this is what you wanted.
<body>
<style>
body {
background-color: #A2D8EB;
}
#wrapper
{
background-color:#F4F4F4;
width: 60%;
text-align: -webkit-center;
}
</style>
<div style="text-align: -webkit-center;">
<br>
<div id="cssmenu">
<ul >
<li class='active'><a href='index.html'>Utama</a></li>
<li><a href='login design.php'>Log Masuk</a></li>
<li><a href='contact.php'>Hubungi Kami</a></li>
</ul>
</div>
</div>
<div style="text-align: -webkit-center;">
<div id="wrapper" >
<div style="text-align: -webkit-center;">
<br><br>
<img src="bilik/a.gif">
</div>
<div style="text-align: -webkit-center;">
<div >
<p font face="Verdana,Arial,Helvetica" size="6" color="black">Sistem ini dibangunkan oleh Cawangan Teknologi Maklumat
</p>
<p font face="Verdana,Arial,Helvetica" size="6" color="black"> Jabatan Kastam Diraja Malaysia Wilayah Persekutuan Kuala Lumpur </p>
<p font face="Verdana,Arial,Helvetica" size="6" color="black">bagi memudahkan semua staf untuk membuat tempahan bilik di JKDM WPKL </p>
</div>
</div></div></div>
</body>
Hope this may help you.
html css background
Related
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/
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 have following problem.
So i want to create a switch content on my Website.
I want to create that i can toggle with my navbar the content.
I dont have any Idea more...
This is my Code
<section class="content show" id="home">
<h1>Welcome</h1>
<h5>My new site is coming soon!</h5>
<p>ich werde diese Seite komplett neu aufbauen, ich hoffe das Ihnen meine neue Webpräsenz gefallen wird. <br><br> Mit freundlichen Grüßen, <br> <b> Alexander Constapel </b> </p>
<p>More info »</p>
</section>
<!-- /About Page -->
<section class="content hide" id="about">
<h1>About</h1>
<h5>Some facts about me!</h5>
<p>
<ul>
<li>Alexander Constapel </li>
<li>20.02.1994 </li>
<li>Ausbildung zum Mediengestalter in Digital und Print </li>
<li>Webdevelopment & Design </li>
</ul></p>
<p>Subscribe me on Facebook!</p>
</section>
<!-- /Contact Page -->
<section class="content hide" id="contact">
<h1>Contact</h1>
<h5>Get in touch!</h5>
<p>Email: Alook.de<br />
Phone: 05<br /></p>
<p>Jever<br />
Germany</p>
</section>
And this is my CSS to this:
.show {
display: block;
}
.hide {
opacity: 0;
}
.content {
color: deepskyblue;
float:left;
margin:40px;
position:absolute;
top:200px;
width:600px;
z-index:9999;
-webkit-font-smoothing:antialiased;
}
Ofc my NAV have href to #home #about #contact
But it still dont work.
Please help me out.
Thanks a lot.
Alex
The best way I can describe it is by showing.
<div style="position: absolute; z-index:100">This is in background</div>
<div style="position: absolute; z-index:5000">This is in foreground</div>
I thought maybe it could be used in a similar way, but i think im too stupid.
I think I got the rotation part, I have seen a lot of css codes on the internet for that. So if i can just get some help and find a way to just place the banner on top of my container, that would be a huge help!
I want it to be ontop of this:
What I want: http://i.imgur.com/E5DuDSw.jpg
Banner: http://i.imgur.com/LTUZE58.jpg
I tried this:
<div id=container>
<div style="clear:both; height: 40px"></div>
<div class=box_highlight>
<h2 style="text-align: center; color: #000000;">Bestellen Sie jetzt!</h2>
<center>
<h3>
<ul style="padding-top:30px">
<li>- Blick ins Olympiastadion München</li>
<li>- Hochwertiges, doppellagiges Polyester-Pongée-Material</li>
<li>- Durchmesser ca. 140 cm</li>
<li>- Stabiles Metallgestänge</li>
</ul>
</h3>
<h2 class="priceSize" style="text-align: center; color: #000000" ><br>
Preis: 24,90 €
</h2>
<h3>
<ul style="padding-top:30px">
<li>zzgl. Versandkosten: Deutschland: 4,95 € / EU: 14,95 € / Schweiz: 22,70 € </li>
</ul>
</h3>
</center>
<br>
</div>
Thanks!
Try this:
<div id=container style="position:relative;">
<div style="position:absolute; top: 0; left:-50px; transform:rotate(-45deg)"><img src="http://i.imgur.com/LTUZE58.jpg" alt="" width="300"></div>
<div style="clear:both; height: 40px"></div>
<div class=box_highlight>
<h2 style="text-align: center; color: #000000;">Bestellen Sie jetzt!</h2>
<center>
<h3>
<ul style="padding-top:30px">
<li>- Blick ins Olympiastadion München</li>
<li>- Hochwertiges, doppellagiges Polyester-Pongée-Material</li>
<li>- Durchmesser ca. 140 cm</li>
<li>- Stabiles Metallgestänge</li>
</ul>
</h3>
<h2 class="priceSize" style="text-align: center; color: #000000" ><br>
Preis: 24,90 €
</h2>
<h3>
<ul style="padding-top:30px">
<li>zzgl. Versandkosten: Deutschland: 4,95 € / EU: 14,95 € / Schweiz: 22,70 € </li>
</ul>
</h3>
</center>
<br>
</div>
Here's the fiddle
I don't know if you are embedding all the CSS in the html for asking your question, but you should really put all of it in a separate stylesheet.
The simplest solution:
<div id="container">
<div id="main_content"></div>
<div id="banner"></div>
</div>
And a CSS here:
http://jsfiddle.net/uf67L7tp/
I am having some css issues...
When you hover over a product from here, you can see 'show now'..
But when you hover over the product from here, you can see 'Addto Cart' and you also see some black background for 'Add To Cart' which I am not understanding..
May I know what still I have to add in CSS..?
here is my code that displays products:
<!-- Product List -->
<div class="pl">
[product.each]
<div class="t1 col3">
<ul class="products ribbon">
<li class="product">
<a href="[product.link]">
<div class="thumbnail">
<img width="150" height="150" src="[product.image direct='1' tag='0']" class="attachment-shop_catalog wp-post-image" alt="[product.name]" title="[product.name]">
<div class="thumb-shadow"></div>
<strong class="below-thumb">[product.name]</strong>
</div>
<span class="price">
<span class="amount">
<?php if ($product->saleprice > 0 && $product->saleprice < $product->price) { ?>
<div class="prc">
<small>
<span style="text-decoration: line-through; color:blue;">[product.currency mode='sign'][product.price]</span>  
<span style="font-weight: bold; color:red;">[product.currency mode='sign'][product.saleprice]</span>
</small>
</div>
<?php } else { ?>
<div class="prc">
<small>
<span style="font-weight: bold; color:blue;">[product.currency mode='sign'][product.price]</span>
</small>
</div>
<?php } ?>
</span>
</span>
</a>
<div class="buttons" style="opacity: 0; visibility: visible; overflow: hidden; height: 41px; ">
SHOP NOW
</div>
</li>
</ul>
</div> <!-- t1 col3 #end -->
[/product.each]
<div class="clearingdiv"> </div>
</div>
<!-- /Product List -->
so, please tell me what am I missing..? you can find CSS code in source code...
They have used a background image.
In your case you need to set a background to .buttons or the anchor in there.
BTW: please stop using inline-stylsheets; use a separate <style> block or an external CSS file instead. That way, your CSS is much easier to read and understand.