Issue
I'm trying to put the image on the far left of the navigation bar but whenever I do the image just doesn't show up and is not there, but when I try and put the image in the footer or a paragraph it displays just fine.
I tried to put the image in other tags and it worked just fine, its just that I want the image to be inside the header.
body {
font-family: Helvetica;
background-color: rgb(40, 44, 52);
color: rgb(255, 255, 255);
}
#Logo img {
height: 50px;
width: auto;
vertical-align: middle;
}
#navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(33, 37, 43);
text-align: right;
border-radius: 10px;
padding-left: 20px;
}
#navbar li {
float: right;
}
#navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.buttons {
background-color: rgb(128, 128, 128);
border-radius: 10px;
}
#Logo {
font-size: 2em;
display: inline-block;
margin-right: 20px;
/* Adjust the margin as needed */
margin-left: 0;
/* Reset the right margin */
text-align: left;
}
#Services {
font-size: 3.5em;
display: inline-block;
margin-right: 80px;
}
#Help {
font-size: 3.5em;
display: inline-block;
}
.mains {
font-size: 1em;
}
img {
display: block;
margin-top: -260px;
margin-left: 750px;
}
#joinButton {
border-radius: 6px;
background-color: RGB(33, 150, 243);
}
#aboutUs {
font-size: 1.5em;
margin-top: 250px;
/* Adjust the value as needed */
}
.mainContent {
font-size: 2.5em;
margin-top: 30px;
/* Adjust the value as needed */
}
footer {
font-size: 1em;
margin-top: 20px;
/* Adjust the value as needed */
}
.buttons {
margin-top: 10px;
/* Adjust the value as needed */
margin-bottom: 5px;
/* Adjust the value as needed */
}<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul id="navbar">
<button class="buttons"><li><a href="#services">Services</a></li></button>
<button class="buttons"><li><a href="#about">About</a></li></button>
<button class="buttons"><li><a href="#contact">Contact</a></li></button>
</ul>
</nav>
<header id="Logo">
<img src="PlanetCodeLogo.jpg" alt="Planet Code Logo">
</header>
<header class="theslogan" id="Slogan">
The #1 Coding website in America!
</header>
<main id="aboutUs">About Us</main>
<div class="mainbuttonmanager">
<main class="mainContent" id="mainText">
Reminagining The World Of Programing<br>one script at a time.
</main>
</div>
<footer>
Welcome to Planet Code, the ultimate online destination for coding <br>enthusiasts of all levels! Our mission is to demystify the world of <br>programming by offering a diverse range of interactive courses,<br> expert-led tutorials, and hands-on projects.
Whether you’re taking<br>your first steps into code or looking to refine your skills, Planet Code <br>provides a supportive community and the resources you need to succeed.<br> Join us and start your journey to becoming a coding master today!
</footer>
<button class="buttons" id="joinButton">Join us today!</button>
<img src="giphy.gif">
<script src="main.js"></script>
</body>Solution
The margin-top: -260px style is hiding the image whenever you put it in the navigation bar. You're able to see it when it's in the footer or paragraph because the margin top from those places are more than 260px.
Additional:
This margin-top: -260px and margin-left: 750px affects every image in your website because you added them in the img tag, a better approach would be to add these styles to an id or class and attach to any image you want.
img {
display:block;
margin-top: -260px; // remove this
margin-left: 750px; // remove this
}
Answered By - Victoria Udechukwu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.