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

Troubleshooting Vue.js nested v-for with <tr> tag problem

Why does Vue complain about undefined properties when I try nesting a <tr> inside a <tr> with a v-for binding on each? <table> <thead></thead> <tbody> <tr v-for="item in items"> <td>{{ item.nam ...

htmlvue.jshtml-tablebindingv-for

Creating a Contact Form with Email Submission using Html and Php

Establishing Database Connection $server = 'localhost:8080'; $username = 'root'; $password = ''; $database = 'resort'; $connect = mysqli_connect($server, $username, $password ) or die(mysqli_error.&apos ...

phpjqueryhtml

How can an input field with a checkbox type be properly placed within a table data tag in a table nested within an AngularJS modal?

Below is the code for my modal: <!-- modal for viewing permissions --> <div id="modal-user-permissions" class="modal"> <div class="modal-content"> <h4 id= ...

htmlangularjs

What is the best way to serve a .ttf file in node.js with the http and fs libraries?

I am running a basic node server and I have a CSS file that is trying to load a font from the server: @font-face{ font-family: 'NiagaraSolid-Reg'; src: url('http://localhost:1111/NIAGSOL.TTF'); } This is my attempt at servin ...

cssnode.jsfont-face

What is the best method to retrieve information from two tables on a webpage that have identical classes?

I am facing a challenge in retrieving or selecting data from two different tables that share the same class. My attempts to access this information using 'soup.find_all' have proven to be difficult due to the formatting of the data. There are m ...

pythonhtmlseleniumselenium-webdriverbeautifulsoup

Showing hidden errors in specific browsers via JavaScript

I was struggling to make the code work on certain browsers. The code you see in the resource URL below has been a collection of work-around codes to get it functioning, especially for Android browsers and Windows 8. It might be a bit sketchy as a result. ...

javascriptandroidjqueryhtml

The Next.js application is unable to load the combined CSS from a React Component Toolkit

My React components repository includes individual .css files for each component which are imported into the respective components. These components are then bundled using a rollup configuration and published as an NPM package, with all component CSS being ...

cssreactjswebpacknext.jsrollup

Unwrapping the Angular ngForm Mystery: Resolving

I was attempting to retrieve values using ngOnInit and initializing the form with default values, but for some reason the form is returning as undefined. I also tried using patchValue, but since the form is undefined, it doesn't work. It's intere ...

htmlangularangular-forms

What is the best way to obtain a direct file link from a server URL using JavaScript?

After acquiring a file located at /home/johndoe/index.html, I am utilizing a tool like XAMPP to host, with the folder /home being hosted on localhost. The variables in play are as follows: $server_addr = "localhost"; $server_root = "/home"; $file_dir = " ...

javascriptphphtmlajax

The offset value was inconsistent in the desktop version of Firefox

Could you take a look at my code on the fiddle link, Here is the code snippet: <body> <div id="content" style="width:400px; height:110px;"> <svg id="circle" height="300" width="300"> <circle cx="150" cy="150" r="40" st ...

javascriptjqueryhtmlfirefoxsvg

Troubleshooting issues with adding child elements in JavaScript

Styling with CSS: ul #allposts li{ height: 50px; width: 50px; background-color: yellow; border: 1px solid yellow; } Creating HTML structure: <ul id = "allposts"></ul> Adding JavaScript functionality: var container = documen ...

javascripthtmlcssappendchild

The smooth scroll feature is not functioning properly on the animated mouse-scroll down button

I've recently added an Animated Mouse Scroll Down button on my website. However, when I click the button, the smooth scroll feature is not working as expected. Important Note: I already have a separate button for navigating to the next section where ...

javascripthtmlcssdom-events

What is the method of adding a child to the outerHTML of the parent element instead of within it?

Is there a way to use the outerHTML method on a parent element to append a child element so that the icons appear outside of the targeted element rather than inside it? The current code snippet shows the icons inside the box, but I want them to be placed o ...

javascripthtmlcss

Steps for displaying a website within a specific Div using HTML

I'm trying to set up a website to open within a specific <div> tag, like the example shown in this link: Responsive. Can anyone spot what I'm doing incorrectly? <html> <head> <script> function mobile320() { ...

javascriptjquerycsshtml

Mysterious attributes of angular 6's <table mat-table> tag

This particular question regarding the angular material table has not been duplicated in any other discussions. Other similar questions pertain to angular versions 2-5, not version 6 The issue I am encountering is as follows: Can't bind to 'dat ...

htmlangulartypescriptangular-material

The width of Material UI Grid decreases every time it is re-rendered

I'm attempting to display a list of 25 words in a 5x5 grid using the MUI Grid component. The grid is structured as a <Grid container direction="column"> with five <Grid item> elements. Each <Grid item> contains: <Grid co ...

javascriptcssreactjsmaterial-ui

Modifying the appearance of InputText through CSS encapsulation

I'm a newbie to using Blazor and I'm currently experimenting with changing the style of InputText by utilizing css isolation. Interestingly, I've managed to successfully change the style when setting it inline or internally, however, things ...

cssasp.net-coreblazor.net-7.0asp.net-core-css-isolation

Invisible Thinglink image revealed upon resizing browser

I am currently repurposing a pre-existing theme that has a drop-down menu showcasing an image. I am attempting to integrate a Thinglink into the content section of this drop-down, but unfortunately, the image does not appear until I adjust the size of the ...

javascripthtmlcssajax

The overflow-x: scroll !important feature is not functioning properly on Samsung Internet when using translated SVGs

I'm experiencing an issue with a div container that is filled horizontally with SVG drawings generated dynamically. The width of the container exceeds the window's width, so I added overflow-x: scroll !important to enable scrolling. However, the ...

androidcsssvgoverflowsamsung-internet

Having trouble sending data to an API through jQuery: the function is not functioning properly

Currently, I am in the process of developing an HTML form that allows users to input values into text fields and submit them to an external API called ThingSpeak. This API then uses the received values to generate a plot displayed within an iframe. Althoug ...

javascripthtmljqueryajax