Okay, I guess you could say this website looks "close" to how I want it which is okay for maybe someone else, but not me because I'm a perfectionist. I'm also new to all of this html and css so you can imagine the struggle that is my life. I have two divs called topred and top yellow. I then have a slider and then a navbar(navigation bar). I would like all of these element to "stack" on one another if that makes sense. If you were to lo load it with an image at the moment you could tell that the slider doesn't perfectly match up with the topyellow. also the navbar and the slider have a tiny gap between then. Its killing me cause although it looks okay and unoticable in chrome, I can see it in IE.
This is just due to my lack of experience. I can promise you I have already spent hours trying to trouble shoot this issue. It's now time to ask the experts. Seriously, I bet Im about to feel like a genius. Dont worry, I already deleted all of my "float:center"'s lol
BTW this is a volunteer project I am doing for veterans, a great way to give back
I just took some time to clean this up!
<head>
<link rel="shortcut icon" href="bavafavicon"/>
<title>Berlin Airlift Veterans Association: News</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body id="news">
<div id="topyellow"></div>
<div id="topred"></div>
<div id="left"></div>
<div id="leftblue"></div>
<div id="right"></div>
<div id="container">
<div id="slider">
<script type="text/javascript">
var i = 0; var path = new Array();
path[0] = "1.jpg";
path[1] = "2.jpg";
path[2] = "3.jpg";
path[3] = "4.jpg";
path[4] = "5.jpg";
path[5] = "6.jpg";
function swapImage()
{
document.slide.src = path[i];
if(i < path.length - 1) i++;
else i = 0;
setTimeout("swapImage()",5500);
}
</script>
<img name="slide"/>
</div>
<ul id="head_nav">
<li><a href="index.htm" class="currentButton">NEWS</a></li>
<li><a href="aboutbava.htm" class="button">ABOUT BAVA</a></li>
<li><a href="history.htm" class="button">HISTORY</a></li>
<li><a href="biographies.htm" class="button">BIOGRAPHIES</a></li>
<li><a href="calendar.htm" class="button">CALENDAR</a></li>
<li><a href="contact.htm" class="button">CONTACT</a></li>
<li><a href="links.htm" class="button">LINKS</a></li>
<li><a href="donate.htm" class="button">DONATE</a></li>
</ul>
<div id="headlogo">
<img src="BAVA.png" alt="BAVA logo" width="150" height="150"/>
</div>
<div id="subscribe">Sign up for BAVA updates!<br>
<img src="emailBomb.png" alt="emailBomb" id="emailBomb" width="150" height="300"/>
<form action="demo_form.asp">
E-mail: <input type="email" name="userid">
<input type="submit" value="Submit"><br>
</form>
<script type="text/javascript">
function GetClock(){
tzOffset = +2;
d = new Date();
dx = d.toGMTString();
dx = dx.substr(0,dx.length -3);
d.setTime(Date.parse(dx))
d.setHours(d.getHours() + tzOffset);
nday = d.getDay();
nmonth = d.getMonth();
ndate = d.getDate();
nyear = d.getYear();
nhour = d.getHours();
nmin = d.getMinutes();
if(nyear<1000) nyear=nyear+1900;
if(nmin <= 9){nmin="0"+nmin}
document.getElementById('berlinClock').innerHTML=""+(nmonth+1)+"/"+ndate+"/"+nyear+" "+nhour+":"+nmin+"";
setTimeout("GetClock()", 1000);
}
</script>
<script type="text/javascript" language="javascript">
window.onload = function() { swapImage(); GetClock(); };
</script>
<div id="berlinClock"></div>
</div>
</div>
<footer>
<div id="footer">
<p><i>15 N. College Ave, Newton, NC 28658 | (828) 466-3410</i></p>
</div>
</footer>
</body>
And Here is my CSS, please don't laugh...
body {margin:0px; padding:0;min-width: 1100px;}
#container {position:absolute; display:block; width:100%; height:100%}
#center {margin:0px}
#topred {z-index:1; top: 0; left: 0; right:0; height: .6%; width: 100%; background: rgb(211,5,24); position:absolute; display:block}
#topyellow {z-index:1 ;top: .6%; left: 0; right:0; height: .9%; width: 100%; background: rgb(253,248,12); position:absolute; display:block }
#left, #right {top: 0; bottom: 0; width: 19.5%; background-color: black; position: fixed}
#left {left: 0}
#right {right: 0}
#leftblue {left:19.5%;top: 0; bottom: 0; width: .35%; background-color: rgb(8,44,180); position: fixed}
#slider {position:relative;display:block; margin-top:.6%;width: 100%; max-width: 875px; height:350px;margin-bottom:0px;margin-left: auto;
margin-right:auto; padding-bottom:0px}
#headlogo {display: block; position: absolute; left: 14.5%; top:5%}
#subscribe {display: block; position: absolute; top:388px; right:0; width:19.5%; text-align:center; color: white}
#head_nav {z-index:1;position:relative;text-align: center;margin-left: auto;margin-right:auto;padding:0; margin-top:0px; margin-bottom:none; width:975px; border:0}
#head_nav li {display:inline;margin: 0.0px}
#emailBomb {padding-bottom: 10px}
#berlinTime {display: block; position: relative; top:388px; left:0; width:19.5%; text-align:center; color: red}
#footer {z-index:-1; padding-top:99%; font-size:10; color:black; position: relative; width:100%; text-align:center}
.currentButton {
-moz-box-shadow:inset 0px 0px 0px 0px #d3051a;
-webkit-box-shadow:inset 0px 0px 0px 0px #d3051a;
box-shadow:inset 0px 0px 0px 0px #d3051a;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
background-color:#000000;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
display:inline-block;
color:rgb(211,5,24);
font-family:Arial;
font-size:14px;
font-weight:bold;
font-style:normal;
height:33pxpx;
line-height:33px;
width:105px;
text-decoration:none;
text-align:center;}
.currentButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
background-color:#000000;color:rgb(211,5,24);}
.currentutton:active {
position:relative;
top:1px;}
.button {
-moz-box-shadow:inset 0px 0px 0px 0px #d3051a;
-webkit-box-shadow:inset 0px 0px 0px 0px #d3051a;
box-shadow:inset 0px 0px 0px 0px #d3051a;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
background-color:#000000;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
display:inline-block;
color:#fdf902;
font-family:Arial;
font-size:14px;
font-weight:bold;
font-style:normal;
height:33pxpx;
line-height:33px;
width:105px;
text-decoration:none;
text-align:center;}
.button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
background-color:#000000;color:rgb(211,5,24);}
.button:active {
position:relative;
top:1px;}
