Exploring the world of CSS and designing layouts using multiple div elements

Upon reviewing this website, I must admit it is getting close to what I envision. However, being a perfectionist and new to HTML and CSS, I find myself struggling to achieve the desired outcome. The layout consists of two divs named topred and top yellow, followed by a slider and a navigation bar. My goal is to have these elements stack seamlessly on top of each other. Currently, there are slight alignment issues between the slider and topyellow, as well as a tiny gap between the navbar and the slider. These discrepancies may go unnoticed in Chrome but bother me when viewed in IE.

This issue stems from my lack of experience in web development. Despite spending hours troubleshooting, I have reached a point where seeking help from experts is necessary. Hopefully, with their guidance, I can resolve these concerns and feel like a genius in no time. And yes, I have removed all instances of "float:center" from my code!

On a side note, this project is a voluntary endeavor dedicated to supporting veterans—a cause close to my heart.

It took some effort, but I managed to clean up the code!

<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>

Here is my custom CSS—try not to 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;}
htmlcss

Answer №1

After some investigation, I have determined the cause of the gap between the navigation bar and the slider on your website. It seems that there is a sub-pixel margin applied to the navigation bar. To fix this issue, you can either remove the margin property or set it to 0.

#head_nav li {
    display:inline;
    /*margin: 0.3px; remove this */
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Connecting buttons to JavaScript functions that interact with MySQL database entries

I am working on a task involving rendering a database table using XMLHttpRequest in JavaScript to a PHP page. My goal is to display each entry from the table as an HTML row/cell with two buttons within each "entry". These buttons should trigger specific Ja ...

phpjavascriptmysqlhtmlajax

How can I make a CSS transition activate only on width increases, not decreases?

My element's width changes under different conditions, and I've implemented CSS with a transition for the width: .element-class { transition: width 500ms ease 0ms; } However, I only want the transition to occur when the width is decreasing. ...

csscss-transitions

Enhance the functionality of a directive by incorporating the ui-mask directive

Recently, I implemented a custom directive for an input field that adds a calendar icon with a datepicker to the input. I have used this directive in various sections of my application and now I am interested in incorporating ui-mask - another directive I ...

javascriptangularjshtmlangularjs-directive

Identify when a div reaches the end of the screen using CSS

I've developed a custom dropdown feature using Vue 2 and TypeScript to meet our specific requirements (without relying on jQuery). The dropdown functions correctly, opening the options list downwards when the main box is clicked. One enhancement I a ...

htmlcssvue.js

Position the ion-radio element in the middle of the layout

As I work on creating a privacy page in HTML using Ionic 3, my desired output should resemble the following: However, with my current code, the result I'm seeing is different from what I expected: This snippet showcases the code I am working with: ...

cssionic-frameworksassionic3

Display or conceal a YouTube video with a click

Q1) Is it possible to use JQuery on page load to detect the file name of an image and then dynamically position it on the page with CSS? Q2) What is the most efficient way to achieve this without embedding iframe code inside a specific div.icon element? ...

javascriptjquerycssxhtml

Steps to display a JSX component stored in a variable

Presently, I am implementing an if/else statement within my code to determine the content that will be displayed in the JSX element named 'signupMessage'. Subsequently, I render the contents of this 'signupMessage' element. render() { ...

javascripthtmlreactjsjsx

How can I pass an array from HTML to Node.js and subsequently store it in MongoDB?

Looking to combine the values of longitude and latitude into one array for input, then store it in the database. While there are plenty of examples on handling arrays, most of them are based on PHP. Check out the following code snippet: HTML <html> ...

javascriptjqueryhtmlnode.jsmongodb

The functionality of an HTML form utilizing JavaScript struggles to function correctly when integrated with PHP

I created a form with JavaScript that allows me to toggle between different fields based on the selection made with radio buttons. <?php require_once 'resources/menus/adminMenu.php'; ?> <div class="col-lg-offset-3 col-lg-6 "> < ...

javascriptphphtmlforms

Is there a way to extract a list of words from a designated element using selenium?

I have been trying to scrape the content of this webpage 10 Fast Fingers in order to extract the words that need to be typed into a list. My intention is to then input these words into a text box for typing practice. The code seems to be running fine, but ...

pythonhtmlcssselenium-webdriverweb

Is there a way to showcase XML in a web browser while maintaining its whitespace and preserving its preformatted text?

In an attempt to simplify the process of formatting my reports, I am considering creating a basic XML language. This would resemble something like this: <?xml-stylesheet href="./report.css"?> <report> <title>A Tale of Two Cities</ ...

htmlcssxmlbrowserwhitespace

Refreshing Div Element with PHP AJAX POST请求

It's me again. I'm feeling really frustrated with this code, it's starting to get on my nerves. I don't mean to keep bothering you, but I finally figured out where the issue was in the code and now I just need a little help with the fin ...

phpjqueryhtmlajax

"Optimizing the Placement of jPlayer for Your Website

Struggling to properly position jPlayer on my webpage. After consulting jPlayer's documentation, I learned that it is supposed to be absolutely positioned by default. However, it seems to be flowing with the rest of the page content rather than being ...

javascriptjqueryhtmljplayer

The functionality of changing the category in the second carousel slider on click using JavaScript appears to

Creating a bootstrap carousel slider that dynamically changes based on the selected category. For example, clicking on the hammer category will display only hammer images, while selecting the compass category will show compass images. Everything worked sm ...

javascripthtmlbootstrap-5

The "Read more" feature is not functional on mobile devices

I am encountering issues with my Wordpress blog on mobile screens. The "read more" button is not functioning, and the screen size does not fit properly on mobile devices. Visit abood250.com for more information. CSS Styling: /* =Global ----------------- ...

javascriptjqueryhtmlcsswordpress

Assistance required in filling out a table solely through JavaScript with input from an HTML form

Hello, I am currently pursuing a second career and have just started learning HTML & JavaScript. For a simple assignment, I need to take user input in the form of numShares and numYears through HTML. My goal is to use JavaScript to populate a 3-column tabl ...

javascripthtml

creating nested columns within a parent column using flexbox techniques

Struggling with column height issues in Bootstrap 3? Consider using flexboxes for a simpler solution. Check out the design image I created using Bootstrap 3: Can this design be replicated with flexboxes? I have successfully implemented flexboxes for the m ...

htmlcssflexbox

How come the inclusion of a DOCTYPE tag impacts the styling of my CSS?

I am puzzled why the code below renders correctly without any issues until I add a doctype declaration: <body style="margin:0; padding:0; background-color:#eeeeee"></body> <div id="HeaderContainer" style="background-color:#eeeeee; color:Bl ...

htmlcss

Is applying a bevel effect when hovering achievable?

Is there a way to add a bevel effect to my hyperlink image so it stays in place without moving down? I need the bevel effect to be inside the image as it keeps shifting position. Any suggestions would be greatly appreciated. I really need the bevel effect ...

htmlcssalignmentbevelled

REST, hypertext, and clients other than web browsers

I'm struggling to understand how a REST API can be both hypertext driven, as explained in this article, and still be machine readable. Let's say I create an API where one endpoint lists the contents of a collection. GET /api/companies/ When the ...

htmljsonhttprest