I cannot get a div within a list to display inline. It seems to create a line break.
I have tried using a clear div, setting the body font-size to 0, rearranging the html and all sorts of other things to no avail.
jsfiddle: https://jsfiddle.net/Loy4a2st/1/
.guiding_more_info_button{
cursor:pointer;
display:inline;
}
.guiding_more_info{
margin-left:3rem;
display:none;
}
<h2>Itinerary</h2>
<li><p>Day 01 </p></li>
<li><p>Day 02</p></li>
<li>
<p>Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li><p>Day 04</p></li>
<li><p>Day 05.</p></li>
P tag block element, apply p tag to inline
.guiding_more_info_button{
font-family:maratExtraLightItalic;
cursor:pointer;
display:inline;
}
.guiding_more_info{
margin-left:3rem;
font-family:maratExtraLight;
display:none;
}
.inline{
display:inline;}
<h2>Itinerary</h2>
<ul>
<li><p>Day 01 </p></li>
<li><p>Day 02</p></li>
<li>
<p class="inline">Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li><p>Day 04</p></li>
<li><p>Day 05.</p></li>
</ul>
I have used your code and made some adjustments.
.guiding_more_info_button {
font-family: maratExtraLightItalic;
cursor: pointer;
display: inline-block;
}
.guiding_more_info {
margin-left: 3rem;
font-family: maratExtraLight;
display: none;
}
#day3 {
display: inline-block;
}
<h2>Itinerary</h2>
<li>
<p>Day 01 </p>
</li>
<li>
<p>Day 02</p>
</li>
<li>
<p id="day3">Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li>
<p>Day 04</p>
</li>
<li>
<p>Day 05.</p>
</li>
You can view the fiddle here:
https://jsfiddle.net/fo6ryj29/
You need to make both elements you want to show next to each other display:inline-block.
In your case the div and the p tag.
Your html isn't written correctly. You need to wrap your <li>'s in the <ul> element for it work properly.
.guiding_more_info_button{
font-family:maratExtraLightItalic;
cursor:pointer;
display:inline;
}
.guiding_more_info{
margin-left:3rem;
font-family:maratExtraLight;
display:none;
}
<h2>Itinerary</h2>
<ul>
<li><p>Day 01 </p></li>
<li><p>Day 02</p></li>
<li>
<p>Day 03</p>
<div class="guiding_more_info_button">+ more info
<div class="guiding_more_info">
<p>more info here</p>
</div>
</div>
</li>
<li><p>Day 04</p></li>
<li><p>Day 05.</p></li>
</ul>
Related
How can I align the bullets with the left margin of the text above the list? For example:
<html>
<style>
ul.p1 {padding-left: 40px}
ul.p2 {padding-left: 0px}
</style>
<body>
<h2>List A</h2>
<ul class="p1">
<li>
<p>
Item 1.1
</p>
<p>
Item 1.2
</p>
</li>
</ul>
<h2>List B</h2>
<ul class="p2">
<li>
<p>
Item 2.1
</p>
<p>
Item 2.2
</p>
</li>
</ul>
</body>
</html>
This gives the following output in Google Chrome:
Notice that the bullets in List B have disappeared. I would like to have the bullets exactly positioned over (aligned with) the "L" in the <h2> element above the list. Can this be done without using a trial and error approach?
Build you custom list style using pseudo element and you can easily control what you want:
ul {
padding-left: 0px;
list-style: none;
}
li {
padding-left: 1em;
position: relative;
}
li:before {
content: "•";
position: absolute;
left: 0;
font-size: 1.5em;
line-height: 0.9em;
}
/* to illustrate */
body {
border-left:1px solid grey;
}
<h2>List A</h2>
<ul >
<li>
<p>
Item 1.1
</p>
<p>
Item 1.2
</p>
</li>
</ul>
<ul style="font-size:30px;">
<li>
<p>
Item 1.1
</p>
<p>
Item 1.2
</p>
</li>
</ul>
Just remove margins/padding as necessary and use list-position:inside.
ul {
list-style-position: inside;
padding: 0;
}
p {
display: inline-block;
margin: 0;
}
<h2>List A</h2>
<ul class="p1">
<li>
<p>
Item 1.1
</p>
</li>
<li>
<p>
Item 1.2
</p>
</li>
</ul>
<h2>List B</h2>
<ul class="p2">
<li>
<p>
Item 2.1
</p>
</li>
<li>
<p>
Item 2.2
</p>
</li>
</ul>
alternatively, wrap the paragraphs in a div
body {
margin: 1em;
}
ul {
list-style-position: inside;
padding: 0;
}
div {
display: inline-block;
vertical-align: top;
}
p {
margin: 0;
}
<h2>List B</h2>
<ul class="p2">
<li>
<div>
<p>
Item 2.1
</p>
<p>
Item 2.2
</p>
</div>
</li>
</ul>
You can try this modifications:
<html>
<style>
ul.p1 {padding-left: 20px}
ul.p2 {padding-left: 20px}
</style>
<body>
<h2>List A</h2>
<ul class="p1">
<li>Item 1.1</li>
<li>Item 1.2</li>
</ul>
<h2>List B</h2>
<ul class="p2">
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</body>
</html>
I know they are block elements, but I'm sure there is a way, maybe with CSS? I tried to use the span tag but it doesn't work. What did I do wrong? I would like to put the second element next to the first one on the website. Not under it, but next.
<span>
<section>
<h3>Favourite quotes</h3>
<ul>
<li>
“Pizza is good" ―Me
</li>
</ul>
</section>
</span>
<span>
<section>
<h3>Favourite series</h3>
<ul>
<li> X </li>
<li> Y </li>
<li> Z </li>
</ul>
</section>
</span>
make the two "span" "inline-block" display and that's it!
.first,.second{
display:inline-block;
}
<span class="first">
<section>
<h3>Favourite quotes</h3>
<ul>
<li>
“Pizza is good" ―Me
</li>
</ul>
</section>
</span>
<span class="second">
<section>
<h3>Favourite series</h3>
<ul>
<li> X </li>
<li> Y </li>
<li> Z </li>
</ul>
</section>
</span>
Try something like this
.displayList .ol .ul {
visibility: visible;
}
Using span this way is wrong because span is inline element and you can't wrap section like this and any other block's. You can use <table> or flexbox for this case.
.container {
display: flex;
}
.container section {
width: 50%;
}
<div class="container">
<section>
<h3>Favourite quotes</h3>
<ul>
<li>“Pizza is good" ―Me</li>
</ul>
</section>
<section>
<h3>Favourite series</h3>
<ul>
<li> X </li>
<li> Y </li>
<li> Z </li>
</ul>
</section>
</div>
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'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'm having a hard time getting my Footer Navigation to show up properly now that I'm using some new CSS rules. In addition to this problem IE 9 shows my IMG with a border around the outside of it (much like the underline of a linked item).
Questions as follows:
Why is IE creating a border despite img a { text-decoration: none; } ?
What is up with the footer being all wonky? What am i missing?
Here is my jsfiddle: http://jsfiddle.net/misterizzo/fTe5Q/
<
body>
<div id="bg">
<img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
<div id="header">
<div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo">
</div>
<div id="nav">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
<div class="acton">
{{TEXT}}
</div>
<div id="footer">
<ul>
<li><span class="button">NewsWorthy
</span>
</li>
<li><span class="button">Solutions
</span>
</li>
<li><span class="button">About Us
</span>
</li>
<li><span class="button">Home
</span>
</li>
</ul>
</div>
</div>
</div>
</body>
Everything shows up nice in current FF and Chrome browser (as usual)
Thanks!
First question:
You should use a normalise.css to make browsers behave more consistent.
http://necolas.github.io/normalize.css/
This is the bit you need out of that file.
/**
* Remove border when inside a element in IE 8/9.
*/
img {
border: 0;
}
Second question:
Try to increase the width of your footer ul
#footer ul {
width: 530px;
}
Hope that helped.