As I embark on my journey into the world of HTML and CSS, my knowledge is still limited. Despite trying various solutions from similar queries, none seem to resolve my specific issue. What I yearn for is to have both my title and navigation bar share the same border-bottom line. Even after exhausting multiple methods, I find myself at a loss of what steps to take next.
Below is the current state of my HTML code:
<body>
<div id="main">
<nav id="nav01"></nav>
<h1 class="padding">hardalname</h1>
<p>Lorem ipsum dolor sit amet.</p>
<footer id="foot01"></footer>
</div>
<script src="script.js"></script>
</body>
Here's how my CSS looks:
body {
font-family: "Courier New", Courier, monospace;
font-size: 16px;
background-color: white;
color: #696969;
padding: 3px;
}
#main {
padding: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: white;
border-radius: 0 0 5px 5px;
}
h1 {
font-family: "Courier New", Courier, monospace;
border-bottom: 1px double darkred;
color: darkred;
font-size: 30px;
}
h1.padding {
padding-bottom: 5px;
}
ul#menu {
padding: 0;
margin-bottom: 11px;
}
ul#menu li {
display: inline;
margin-right: 3px;
}
ul#menu li a {
background-color: #ffffff;
padding: 10px 20px;
text-decoration: none;
color: #696969;
border-radius; 4px 4px 0 0;
}
ul#menu li a:hover {
color: white;
background-color: silver;
}
And this snippet shows the implementation of the navigation bar in use:
document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='index.html'>hardalname</a></li>" +
"<li><a href='about.html'>hakkımda</a></li>" +
"</ul>";