I'm pretty new to dev in general(2 weeks in), trying to learn some basic skills in html/css before moving on to an actual language.
I'm having trouble getting my site to look similar to the apple homepage. Mainly i want my nav bar to fill out all the way across the screen and to adjust the "donate" banner correctly.
Again i'm fairly new so i'm not interested in the functionality yet. It also doesn't need to be an "exact" replica, just somewhere within that ball park.
I'm using pink as a background color so I can see my edits a bit easier, earlier I was using a black background that seemed to mask alot of my margin/float issues. It ended up causing issues down the road when I needed to add content.
Here's a look( disclaimer again i literally picked up web dev 10 days ago):
body{
background-color:rgb(253, 94, 214);
margin: 0px;
border: 0px;
padding: 0px;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
border: 0px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 13px;
font-family: 'Roboto', sans-serif;
width: 100%;
background-color: rgb(87, 87, 87);
position: absolute;
z-index: 100;
}
li a:hover {
font-size: 15px;
font-family: 'Roboto', sans-serif;
}
.banner{
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
margin-top: 40px;
margin-bottom: 62%;
font-size: 18px;
text-align: center;
padding: 15px;
font-family: 'Roboto', sans-serif;
color: rgb(4, 133, 255);
}
.main{
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
margin-top: 150px;
margin-bottom: 48%;
color: white;
font-size: 18px;
text-align: center;
padding: 15px;
font-family: 'Roboto', sans-serif;
}
h3{
color: rgb(4, 133, 255);
font-size: 16px;
}
#redcross{
height: 40px;
width: 40px;
float: left;
}
.promobanner{
color: rgb(4, 133, 255);
padding: 50px;
float: left;
vertical-align: center;
}
#mainimg{
width: 100%;
left: 0px;
right: 0px;
position: absolute;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Apple</title>
<link rel="stylesheet" href="mystyle.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class=nav>
<ul>
<li> <a href="#">Mac </a></li>
<li> <a href="#">iPad </a></li>
<li> <a href="#">iPhone </a></li>
<li> <a href="#">Watch </a></li>
<li> <a href="#">TV </a></li>
<li> <a href="#">Music </a></li>
<li> <a href="#">Support </a></li>
</ul>
</div>
<div class="banner">
</div>
<div class="promobanner">
<img id="redcross" src="redcross.png" alt="redcross">
<span> Donate to Australian Bushfire Relief > </span>
</div>
<div class="main">
<h1>iPhone 11 Pro</h1>
<h2>Pro cameras.Pro display.Pro performance</h2>
<p>From $28.29/mo. or $689 with trade-in.</p>
<h3>Learn more > Buy > </h3>
<img id="mainimg" src="iphone.jpg" alt="mainiphoneimage">
</div>
</body>
</html>Is this what you are looking for?
I removed the width: 100%; position: absolute; from the li a and added width: 100%; display:flex; justify-content:center; background-color: rgb(87, 87, 87); max-height:35px; to the ul.
As for the banner: I replaced it with this:
.promobanner {
background-color: rgb(242, 242, 242);
padding: 25px 0;
width:100%;
justify-content: center;
display: flex;
}
body {
background-color: rgb(253, 94, 214);
margin: 0px;
border: 0px;
padding: 0px;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
border: 0px;
width: 100%;
display: flex;
justify-content: center;
background-color: rgb(87, 87, 87);
max-height: 35px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 13px;
font-family: 'Roboto', sans-serif;
background-color: rgb(87, 87, 87);
z-index: 100;
}
li a:hover {
font-size: 15px;
font-family: 'Roboto', sans-serif;
}
.banner {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
margin-top: 40px;
margin-bottom: 62%;
font-size: 18px;
text-align: center;
padding: 15px;
font-family: 'Roboto', sans-serif;
color: rgb(4, 133, 255);
}
.main {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
margin-top: 150px;
margin-bottom: 48%;
color: white;
font-size: 18px;
text-align: center;
padding: 15px;
font-family: 'Roboto', sans-serif;
}
h3 {
color: rgb(4, 133, 255);
font-size: 16px;
}
#redcross {
height: 40px;
width: 40px;
}
.promobanner {
background-color: rgb(242, 242, 242);
padding: 25px 0;
width:100%;
justify-content: center;
display: flex;
}
#mainimg {
width: 100%;
left: 0px;
right: 0px;
position: absolute;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Apple</title>
<link rel="stylesheet" href="mystyle.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class=nav>
<ul>
<li> <a href="#">Mac </a></li>
<li> <a href="#">iPad </a></li>
<li> <a href="#">iPhone </a></li>
<li> <a href="#">Watch </a></li>
<li> <a href="#">TV </a></li>
<li> <a href="#">Music </a></li>
<li> <a href="#">Support </a></li>
</ul>
</div>
<div class="banner"></div>
<div class="promobanner">
<img id="redcross" src="redcross.png" alt="redcross">
<span> Donate to Australian Bushfire Relief > </span>
</div>
<div class="main">
<h1>iPhone 11 Pro</h1>
<h2>Pro cameras.Pro display.Pro performance</h2>
<p>From $28.29/mo. or $689 with trade-in.</p>
<h3>Learn more > Buy > </h3>
<img id="mainimg" src="iphone.jpg" alt="mainiphoneimage">
</div>
</body>
</html>