I recently started learning HTML and CSS and am currently working on creating my very first portfolio website.
While I've made some progress, I'm facing a few challenges and could use some guidance. My main goal is to have a fixed navigation bar that stays in place as users scroll down the page. However, I'm struggling with aligning different elements properly on the body of the site. Specifically, I can't seem to get the image, table, and objective section to align the way I envision them.
Here's what I want to achieve:
- The image should be positioned to the far left of the page, centered vertically, and below the navigation bar
- The table needs to align directly below the image (meaning wherever the image is located)
- The objective section should be to the right of the page, next to the image but with ample spacing between them
- The title should sit above the objective (aligned with the objective)
- In summary, the objective and title should be on the right side of the page, while the image and table should be on the left
Current Issues:
- Title overlaps with the navigation bar
- Alignment issues with table, image, and objective
Any assistance or advice on how to tackle these challenges would be highly appreciated. Thank you!
HTML Section:
<!DOCTYPE html>
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title>FULL NAME</title>
</head>
<body>
<div id="center">
<h1>NAME</h1>
<img src="#"/a>
<table>
<tr>
<td><a href="#"><img src="#"/></a></td>
<td><a href="#"><img src="#"/></a></td>
<td><a href="#"><img src="#"/></a></td>
<td><a href="#"><img src="#"/></a></td>
<td><a href="#"><img src="#"/></a></td>
</tr>
</table>
<h4>Objective<h4>
</div>
<div id="navigation">
<ul>
<li><a href="#">MENU ITEM</a></li>
<li><a href="#">MENU ITEM</a></li>
<li><a href="#">MENU ITEM</a></li>
<li><a href="#">MENU ITEM</a></li>
<li><a href="#">MENU ITEM</a></li>
</ul>
</div>
<div id="footer">
<div id="bottom">
<p> © All Rights Reserved by FULL NAME<span class="em"></span></p></div>
</div>
</body>
</html>
CSS Section:
body {
padding: 0;
margin: 0;
max-width: 960px;
font-family: Verdana, Geneva, Sans-serif;
}
#navigation {
position: fixed;
top: 0;
color: #FFFFFF;
height: 50px;
text-align: center;
width: 100%;
margin: 0;
}
#navigation li {
font-size: 30px;
padding-left: -20px;
padding-right: -20px;
color: white;
text-decoration: none;
font-family: Georgia, Serif, Times;
display: inline;
float: left;
}
#navigation ul {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
#navigation ul li {
width: 20%;
float: left;
color: #00131C;
}
#navigation a:link, a:visited {
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:6px;
text-decoration:none;
display: block;
}
#navigation a:hover, a:active {
background-color:#FFFFFF;
color: #000000;
}
...