Aligning table data elements within a division

Currently working on revamping a tech night website for my school. I made some changes to the navbar, switching it from the side to the top. However, I'm struggling to get the table data and menu to center properly within the div.

If you'd like to take a look: http://jsfiddle.net/ksta1584/c88qswsx/

<a href="http://jsfiddle.net/ksta1584/c88qswsx/">Link<a/>

I'm aiming to have the lines remain visible even when scrolled over, each in equally sized boxes that "pop" out. Struggling with getting the borders to appear correctly as well. Any tips would be greatly appreciated!

htmlcssmenunavbarnav

Answer №1

To achieve this in your .nav section:

.nav {
    width: 100%;
    text-align: center; 
    position:relative;
    top:35%;
}

Answer №2

Add margin:0 auto to the styling for your navigation menu within the CSS file

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

What is the best way to update my logo and incorporate a colored border at the bottom of my fixed header while the user is scrolling down?

After spending countless hours researching online, I've been struggling to implement header effects on scroll without using JavaScript. My goal is to achieve a simple effect where the header reduces in height, the logo changes, and a colored border is ...

javascripthtmlcss

Employing ngModel in an option dropdown

I am having trouble passing an attribute from an API call to a submit function. I suspect it might have something to do with either the option select or how the input is being formatted. Encountering the error Error: No value accessor for form control wit ...

htmlangulartypescriptapiangular-ngmodel

Ways to ensure that an svg image is perfectly sized to its parent container

I'm exploring the svg <image> tag for the first time. I've decided to use this tag to apply a gray filter on an image (thanks, IE). Check out my HTML code below: <div class="container"> <div class="item"> <svg version ...

htmlcsssvg

Creating a two-dimensional canvas within a div element using the console

I have some code that currently generates an image in the console when I hit F12. However, I would like to display this image inside a more user-friendly area such as a div on the webpage. I attempted to create a <div class = "mylog"> to place the i ...

javascriptjqueryhtmlcanvas

What could be causing my select tags to appear incorrectly in Firefox and IE?

With the help of Jquery, my goal is to dynamically populate a select field when it is in focus, even if it already has a value. Once populated, I want to retain the previous value if it exists as an option in the newly populated field. Although this works ...

javascriptjqueryhtmlinternet-explorerfirefox

Making lightbox/dhtml appear in front of flash

After extensive research, I have come across numerous posts highlighting the importance of modifying the embed-tag with wmode="opaque" in order to force lightbox and other dhtml elements above flash content. Simply adjusting the z-index of the desired elem ...

cssflashdhtmllightbox

Having trouble with JavaScript in a project I'm trying to replicate

For my coding practice, I am working on a project where clicking on the images should change the main product displayed along with its color. However, nothing happens when I click on the products. Can anyone point out what I might be doing wrong? Here is ...

javascripthtmlcss

Troubleshooting Bootstrap: Navigation bar toggling causes JS functions to malfunction

My JS function is no longer working when the responsive website's breakpoint of 768px is activated (specifically, the nav var toggle/collapse). This is causing the problem where the JS function stops working. The HTML code in question is: <div cl ...

javascriptjquerytwitter-bootstrapnavbar

Error: Attempting to append a child to a non-existent property

I am currently learning Java Script and this is the code I have been working on. <!doctype html> <html> <head> <style> div {position:absolute; width:500px; height:500px} img {position:absolute} ...

javascripthtmldom

The jQuery CSS menu is having trouble highlighting the active link

Can you help me figure out what's wrong with this code and how I can fix it? I'm working on a CSS menu (horizontal) where I want the background and font to change when an item is selected. I found some jQuery code from another post that should m ...

jquerycssmenuhtml-lists

When using IE6, images may momentarily appear stretched when set to height:auto

I have set the height to auto, however I am observing that small thumbnail images are being momentarily stretched vertically in Internet Explorer 6 before adjusting to their correct height. It is worth mentioning that the image tag in the HTML appears as ...

htmlcssimageinternet-explorer-6

Load the listbox with information retrieved from the database

<?php ini_set("display_errors","on"); $conn = new COM("ADODB.Connection"); try { $myServer = "WTCPHFILESRV\WTCPHINV"; $myUser = "sa"; $myPass = "P@ssw0rd"; $myDB = "wtcphitinventory"; $connStr = "...conn string..."; $conn-&g ...

phphtmlsql-server

Adjust the color of a contenteditable div once the value matches

I currently have a table with some contenteditable divs: <div contenteditable="true" class="change"> This particular JavaScript code is responsible for changing the color of these divs based on their content when the page loads. However, I am now ...

javascriptjqueryhtmlbackground-colorcontenteditable

adjust the size of a form field to match the background image dimensions

I'm encountering an issue while trying to solve this particular challenge: My goal is to integrate a login box onto a full-screen image. Although I've come across numerous methods for incorporating an image into a form field, my task requires me ...

css

Developing a security system that limits the number of times a code or password can be utilized

Introduction: I have a unique idea for a system where customers can purchase codes from my online store and redeem them on my PHP website. Each code purchased will have a limited number of uses, which decrease with each redemption until the code is no long ...

phphtmlmysqlweb

Materriel-UI ToggleButton has the appearance of a traditional button

Looking to style a ToggleButton like a button? Having trouble with an error in the console when nesting a button inside? Check out this solution: const StyledToggleButtonGroup = withStyles((theme) => ({ grouped: { margin: theme.spacing(0.5) ...

cssreactjsmaterial-ui

Tips for automatically adjusting the height of the footer

Is there a way to dynamically adjust the height of the footer based on the content length inside the body? I've been exploring solutions like setting the position of the footer as "fixed," but it seems to stay at the bottom of the screen, which is no ...

htmlcss

Rotate object within HTML table

I have a simple data structure as shown below: [ { "ClientId": 512, "ProductId": 7779, "Date": "2019-01-01", "Quantity": 20.5, "Value": 10.5 }, { "ClientId": 512, "ProductId": ...

javascripthtmlangulartypescript

Height of Owl Carousel on mobile devices

On my desktop, I have an image that covers the entire screen using Owl Carousel. However, when viewed on a phone device, the same image only takes up one-third of the screen size. How can I adjust the height so that it appears taller on a phone? I' ...

cssflexboxowl-carousel

Can the text color be customized to match the brightness level of the background area being covered?

Does anyone know of a plugin or method that can automatically change the color of text or swap predefined images/icons based on the average brightness of its parent element's background? If the background is dark, it should make the text white or swit ...

javascriptjqueryhtmlcsssass