When I add the reset code, it changes my website layout. How do I keep it that i
ID: 3861957 • Letter: W
Question
When I add the reset code, it changes my website layout. How do I keep it that it doesn't change my display? Also, the navigation bar underlines every text how do I stop it from doing so?
Thanks!
Here is my css file:
/* Setting page background, font-family, font-size, margin, padding, border and aligning */
html {
background-color: #ffffff;
font-family: italic
font-size: 100%;
font: inherit;
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/* Setting as a block */
header, div, nav, section, footer {
display: block;
}
/* Setting line-height */
body {
line-height: 1;
}
/* Giving style to the header */
header {
text-align: center;
color: #999988;
font-size: 100%;
}
p {
color: #999988;
margin-left: auto;
}
h2 {
color:#999988;
font-size: 1.33333em;
margin-left: auto;
line-height: 0.75em;
vertical-align: -15%
}
li {
color: #999988;
margin-left: auto;
}
/* Giving style to the h3 */
h3 {
color:#999988;
font-size: 1.33333em;
margin-left: auto;
line-height: 0.75em;
vertical-align: -15%
}
/* Giving style to the h4 */
h4 {
color:#999988;
font-size: 1.33333em;
margin-left: auto;
line-height: 0.75em;
vertical-align: -15%
}
footer {
border-top: 1px solid #CCCCCC;
font-size: 12px;
overflow: hidden;
padding: 8px 0
}
#title { color: #cccccc; font-size: 25px; }
#menu li { list-style: none; float: left; margin-right: 10px; }
#menu ul { padding: 0; margin: 0; }
#top_wrap { background: #f5f5f5; }
.clear_fix { clear: both; }
/* Styling the list */
ol, ul {
list-style: none;
}
reset code added to the css file:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Shan Shazad -- Home </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<h1> Shan Shazad</h1>
<div id="top_wrap">
<div id="menu">
<ul>
<li><a href="index.html">Home |</a></li>
<li><a href="about.html">About me |</a></li>
<li><a href="resume.html">Resume |</a></li>
<li><a href="videos">Videos|
</ul>
<div class="clear_fix"></div>
</div> <!-- end menu -->
</div> <!-- end top_wrap -->
<p></p>
<footer id="footer">
<p>Contact Information: <a href="mailto:sshazad@hawk.iit.edu">sshazad@hawk.iit.edu</a></p>
<p> © Shan Shazad (2017)</p>
</footer>
</html>
Explanation / Answer
A. Updates in CSS File :-
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain) */
/* code updated to remove margin as on 15 March 2017 start */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* code updated to remove margin as on 15 March 2017 end */
/*HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Setting page background, font-family, font-size, margin, padding, border and aligning */
html {
background-color: #ffffff;
font-family: italic
font-size: 100%;
font: inherit;
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/* Setting as a block */
header, div, nav, section, footer {
display: block;
}
/* Setting line-height */
body {
line-height: 1;
}
/* Giving style to the header */
header {
text-align: center;
color: #999988;
font-size: 100%;
}
p {
color: #999988;
margin-left: auto;
}
h2 {
color:#999988;
font-size: 1.33333em;
margin-left: auto;
line-height: 0.75em;
vertical-align: -15%;
}
li {
color: #999988;
margin-left: auto;
}
/* Giving style to the h3 */
h3 {
color:#999988;
font-size: 1.33333em;
margin-left: auto;
line-height: 0.75em;
vertical-align: -15%;
}
/* Giving style to the h4 */
h4 {
color:#999988;
font-size: 1.33333em;
margin-left: auto;
line-height: 0.75em;
vertical-align: -15%;
}
footer {
border-top: 1px solid #CCCCCC;
font-size: 12px;
overflow: hidden;
padding: 8px 0;
}
#title { color: #cccccc; font-size: 25px; }
/* code added to define layout for h1 tag as on 15 March 2017 start */
h1 { font-weight : bold; color: black; font-size: 2em; }
/* code added to define layout for h1 tag as on 15 March 2017 end */
#menu li { list-style: none; float: left; margin-right: 10px; }
/* code added to remove underline from navigation links as on 15 March 2017 start */
#menu li a { text-decoration : none; }
/* code added to remove underline from navigation links as on 15 March 2017 end */
#menu ul { padding: 0; margin: 0; }
#top_wrap { background: #f5f5f5; }
.clear_fix { clear: both; }
/* Styling the list */
ol, ul {
list-style: none;
}
B. Updates in HTML File :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Shan Shazad -- Home </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> Shan Shazad</h1>
<div id="top_wrap">
<div id="menu">
<ul>
<li><a href="index.html">Home |</a></li>
<li><a href="about.html">About me |</a></li>
<li><a href="resume.html">Resume |</a></li>
<li><a href="videos">Videos|
</ul>
<div class="clear_fix"></div>
</div> <!-- end menu -->
</div> <!-- end top_wrap -->
<p></p>
<footer id="footer">
<p>Contact Information: <a href="mailto:sshazad@hawk.iit.edu">sshazad@hawk.iit.edu</a></p>
<p> © Shan Shazad (2017)</p>
</footer>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.