I'm struggling to create a striped colored background with a narrow center single color background on top for showcasing articles and photos. However, I am unable to get the colored background to display correctly. Despite trying different approaches like using divs and multiple backgrounds in the body CSS, I can't seem to identify what is causing the issue. Where should I insert the code?
Additionally, I'm facing challenges while working on a coded gallery.
The CSS file:
body {
text-align: center;
background: url("redstripebackground.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-size: cover;
background-position: center top;
}
#nav {
font-family: Celtic Garamond the 2nd;
font-weight: bold;
font-size: 14pt;
width:1000px;
margin:0 auto;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav ul li {
float: left;
}
#nav ul li a {
display: block;
padding: 5px 25px 2px 25px;
color: #000000;
background-color: #FF0000;
text-decoration: none;
height: 24px;
text-transform:uppercase;
width:150px;
z-index: 11;
}
#nav ul li a.active {
background-color: #FFBF00;
}
#nav ul li a.active:hover {
background-color: #FFBF00;
}
#nav ul li a:hover {
background-color: #FFBF00;
color: #000000;
}
#icon {
font-family: Varsity Regular;
font-weight: bold;
font-size: 50pt;
width:1000px;
margin:0 auto;
}
#icon ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#icon ul li {
float: left;
}
#icon ul li a {
display: block;
padding: 0px 25px 10px 25px;
margin: 0px 0px 0px 0px;
color: #000000;
background-color: #FF0000;
text-decoration: none;
height: 60px;
text-transform:uppercase;
width:150px;
border-radius: 0px 0px 20px 20px;
z-index: 11;
}
#icon ul li a.active {
background-color: #FFBF00;
}
#icon ul li a.active:hover {
background-color: #FFBF00;
}
#icon ul li a:hover {
background-color: #FFBF00;
color: #000000;
}
Navigation bar file:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="headerandBackground.css">
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Club</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
<div id="icon">
<ul>
<li><a href="#">UCLC</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="#">Media</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
Home Page:
<!DOCTYPE html>
<html>
<head>
<link href="/normalize.css" rel="stylesheet">
</script>
<style>
body{
width:1000px;
margin:0 auto;
}
#cp_widget_63af049c-b69e-4e75-8019-da486b92eef5{
width:900px;
position: relative;
margin:0px auto;
z-index: -1;
}
</style>
</head>
<body>
<?php include('Navbar.php'); ?>
<div id="cp_widget_63af049c-b69e-4e75-8019-da486b92eef5">...</div><scripttype="text/javascript">
var cpo = []; cpo["_object"] ="cp_widget_63af049c-b69e-4e75-8019-da486b92eef5"; cpo["_fid"] = "AgNAf3ry4BXk";
var _cpmp = _cpmp || []; _cpmp.push(cpo);
(function() { var cp = document.createElement("script"); cp.type = "text/javascript";
cp.async = true; cp.src = "//www.cincopa.com/media-platform/runtime/libasync.js";
var c = document.getElementsByTagName("script")[0];
c.parentNode.insertBefore(cp, c); })(); </script><noscript>Powered by Cincopa <a href='http://www.cincopa.com/video-hosting'>Video Streaming Hosting</a> solution.<span>New Gallery 2014/7/25</span><span>height</span><span> 500</span><span>width</span><span> 958</span><span>camerasoftware</span><span> Paint.NET v3.5.11</span><span>originaldate</span><span> 1/1/0001 6:00:00 AM</span><span>height</span><span> 620</span><span>width</span><span> 1024</span><span>camerasoftware</span><span> Paint.NET v3.5.11</span><span>originaldate</span><span> 1/1/0001 6:00:00 AM</span><span>height</span><span> 500</span><span>width</span><span> 960</span><span>camerasoftware</span><span> Paint.NET v3.5.11</span><span>originaldate</span><span> 1/1/0001 6:00:00 AM</span><span>height</span><span> 500</span><span>width</span><span> 957</span><span>camerasoftware</span><span> Paint.NET v3.5.11</span><span>originaldate</span><span> 1/1/0001 6:00:00 AM</span></noscript>
</body>
</html>