Issue with Top Bar not resizing properly when window is made smaller (HTML,CSS)

Hey there, I'm currently working on a website and encountering an issue with the top bar not resizing when the browser window is made smaller. I've tried looking for solutions on different websites but haven't had any luck. Any assistance you can provide would be greatly appreciated.

Below is my code:

HTML


            <div class="main">
                <div class ="centering">
                    <a href="index.html" >Home</a>
                </div>
                <div class="aboutbutton">   
                    <a href="About.html">About Me</a>
                </div>
                <div class="portfoliobutton">   
                    <a href="Portfolio.html">Portfolio</a>
                </div>          
                <div class="whatforyoubutton">
                    <a href="What can i do for you?">What can i do for you?</a>         
                </div>
                <div class="contactbutton"> 
                    <a href="Contact.html">Contact</a> 
                </div>      
            </div>

And here is the CSS:


            .centering{
                text-align:center;
                margin-top:-8px;
                margin-left:50px;
                margin-right:1050px;
                border-style:solid;
                border-width:1px;
                border-color:#000000;
                border-radius:3px;
                color:white;
                font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
                font-size: 20px;
                font-weight:bold;
                background-color:#2B2930;
                position:relative;
                display:block;
            }

            // Repeat similar CSS styles for other classes

Your help is much appreciated!

htmlcssweb

Answer №1

Be sure to check out this JSFiddle demonstration: http://jsfiddle.net/Ncp24/1/

To achieve the desired effect, utilize margin: 0 auto; along with width: 50%; as demonstrated in the example.

An updated version that avoids hard coding the width has been provided by Paulie_D: http://jsfiddle.net/Paulie_D/Ncp24/3

Answer №2

To achieve this, you'll need to delve into the world of responsive web design. By using percentages, you can make divs rescale on different screen sizes. Here is a link to some code I created previously that you can use as a reference: http://jsfiddle.net/ThCcd/

HTML
<body class="body">
<div class="mainContent">
<div class="Content">
<div class="topContent">
<div class="mainHeader">
<div id="nav">
<div align="center"><!--nav start-->    
<div id="nav"><a href="#"><b>Contact Us</b></a></div>
<div id="nav"><a href="#"><b>Ebay</b></a></div>
<div id="nav"><a href="#"><b>Team</b></a></div> 
<div id="nav"><a href="#"><b>Facebook</b></a></div>   
</div><!--end nav-->


CSS
@charset "utf-8";
/* CSS Document */

*{
text-decoration:none;
}
body{
font-size:87.5%; /*Normal font 14px */
font-family:Arial, Helvetica, sans-serif;
line-height:1.5;
text-align:left;
}
.body {
margin:0 auto;
width:70%;
clear:both;
}

#wrapper
{
width:100%;
margin:0 auto;
}

#nav{
background-color:#EEECED;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-opacity: 0.75;
opacity: 0.75;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=75);
}
.topContent{
background-color:#FFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:3% 5%;
margin-top:2%;
background-image:url(paper.jpg)
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation : landscape)
and (orientation : portrait)
{

.body {
width:90%;
font-size:95%;
}
.topContent{
background-color:#FFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:3% 5%;
margin-top:2%;
margin-bottom:4%;
}
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (orientation : landscape)
and (orientation : portrait)
{
.body {
width:90%;
font-size:95%;
}

.topContent{
background-color:#FFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:3% 5%;
margin-top:2%;
margin-bottom:4%;
}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation : landscape)
and (orientation : portrait)
{

.body {
width:90%;
font-size:95%;
}



.topContent{
background-color:#FFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:3% 5%;
margin-top:2%;
margin-bottom:4%;
}
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation : landscape)
and (orientation : portrait)
{

.topContent{
background-color:#FFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:3% 5%;
margin-top:2%;
margin-bottom:4%;
}
}

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

A div without any content and styled with a percentage height will appear as invisible

I'm working on creating a responsive background image for a room, where I want the wall to take up 2/3 of the vertical height and the carpet area to cover the remaining 1/3. Here are snippets of the code I've been using - my issue is that I am t ...

htmlcss

Modifying the stylesheet of an Infragistics WebDataGrid

Currently, I am attempting to customize the appearance of my web data grid by changing its CSS, particularly focusing on altering the color of the header and rows. So far, my search for solutions has led me to two common suggestions: Edit the Infragist ...

csshtmlinfragistics

Utilize JavaScript to save user-selected CSS styles by setting a cookie in jQuery

I am currently using a jQuery styleswitcher to change the stylesheet upon click. Despite trying various solutions, I have been unable to find a resolution to this issue. Could someone please assist me in setting a cookie for this functionality? Markup: ...

javascriptjqueryhtmlcsscookies

Designing the presentation of two overflowing text containers positioned next to each other

Hey there, I'm currently working on styling something that shows both the user's username and the title of an item on the same line, similar to how it's done on GitHub: username / title I want to make sure that if the combined width of the ...

javascriptcssangular

Updating the Origin of a Sound Element in HTML5

I am currently working on developing a personalized browser-based music application. I am at the initial stage of this project where my main goal is to create a button that allows users to change the song being played by an HTML5 audio player. I have attem ...

htmlhtml5-audio

configuring radio buttons with a default value using PHP

I am facing an issue in setting a default value for radio buttons in my form. The default value needs to be fetched from the database. I am aware of how to set a default value using checked="checked", however, in my specific case, I am struggling with in ...

phphtml

Enhancing Animation Speed with jQuery

I've provided the code snippet at this link: http://jsfiddle.net/LnWRL/4/: Here is the HTML: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <div id="wrap_demo"> <div id="demo"></di ...

javascriptjqueryhtmlcss

Dynamic fields added using JavaScript are not recognized by PHP

I have a MySQL database where orders are stored along with various activities. My PHP/HTML page retrieves these activities when an order is clicked and allows users to modify them using a form. Upon submission, another PHP file updates the database by loop ...

javascriptphphtmlmysql

Breaking apart paragraphs in a text using JavaScript

Hello, I am working on a code that is supposed to extract paragraphs from text entered into a textarea and create an array containing each paragraph. For example, it should turn text like this: Hello, that's the first paragraph Hello, that's th ...

javascripthtmlarrayssplit

The deletion feature on my virtual keyboard was malfunctioning when using JavaScript

The virtual keyboard feature I added to my website isn't working properly, specifically the delete function. How can I fix this issue? Below is my code: HTML Code <input type="text" maxlength="12" min="10" name="msidn" id="jkeyboard" min="1" sty ...

javascriptphphtmlajaxvirtual-keyboard

Error with Zend Framework document object model

Is it possible to get the website shortcut icon (favicon) and stylesheet path using Zend Dom Query? $dom = new Zend_Dom_Query($html); $stylesheet = $dom->query('link[rel="stylesheet"]'); $shortcut = $dom->query('link[rel="shortcut ic ...

htmlzend-frameworkdom

Angular 2's Multi-select dropdown feature allows users to select multiple options

Recently, I encountered an issue with customizing CSS for angular2-multiselect-dropdown. I found the solution in this link: https://www.npmjs.com/package/angular2-multiselect-dropdown. I have included my code below. Any assistance in resolving this matter ...

javascripthtmlcssangular

The dataTable plugin is malfunctioning, displaying all records on a single page when it should only show 10 per page

I utilized the dataTable plugin to format my HTML table, but unfortunately it is not displaying the results as expected. Instead of showing 10 records per page, it is displaying all records at once. I even tried setting "iDisplayLength: 10" but it didn&apo ...

javascriptphpjqueryhtmlcss

Generating Javascript code with PHP and handling quotes successfully

After encountering an issue with apostrophes causing errors in my PHP-generated HTML, I found a solution that involved using the addslashes() function. Here is the code snippet: <?php $lines = array(); $lines[] = "I am happy"; $lines[] = "I'm hap ...

javascriptphphtml

Using Jquery to Retrieve the Content of Head and Body Tags from a String

Here is a string that I currently have: <head> This is the Head </head> <body> <div> <div> <p> Body Content <br /></p> <p>&nbsp; Hello World <br />< ...

javascriptjqueryhtmltags

Calculate the total sum using the footerCallback function

I've written some code that retrieves data for the tbody of a table. Now, I want to add a tfoot to display the sum of the last column, and here's how I'm attempting to do it: var data = [ {Id: "1", Quantidade: "14", Preco: "3.10", }, ...

javascripthtmldatatable

What steps should I take to adjust the CSS code to properly integrate with my HTML file?

There seems to be an issue with the code provided. The CSS for the menu bar is not functioning properly with the HTML. <!DOCTYPE html> <html> <body class="news"> <head> <style type="text/css">body { margin: 0; paddi ...

htmlcss

Is there a way to streamline the process of uploading an image and storing its details in a single HTML form with just one submit button?

Here is the code snippet I have: <form id="registration_form" action="AddProductServlet" method="post"> <div> <label> <input placeholder="Product ID" name="pid" type="text"> ...

javahtmlformsjspservlets

Does the <cite> tag go inside a link in HTML?

Whenever I include a citation in HTML using the <cite> tag, I typically place the link around the citation itself. For example: <a href="http://example.com/"><cite>Example Citation></cite></a> This method makes sense to m ...

htmlhyperlink

Extracting the date from an HTML file and transferring it to a PHP script, then storing it

Can you assist me in finding the necessary PHP code to insert the date from an HTML form into a database? The date format I am working with can be found here. HTML FORM: <form action="insertleave.php" method="post"> <label>Date Filed:& ...

phphtmlmysqlformsdate