Attempting to adjust the navbar dimensions, alter the size of the font, and align the text in the center

I need help with creating a responsive navbar for my website. I have been working on the CSS to adjust the size of the navbar and align the text properly, but I'm struggling to get it right.

Here is a snippet of the CSS:

    .nav {
font-family: "Indie Flower", serif;
font-size: larger;
color: white;
}

#navwrapper{
width: 100%;
float: left;
margin: 0 auto;
list-style : none;
font-family: "Indie Flower", Arial;
background-color: red;
height: 10px;
text-align: "center";
}

And here is some HTML code:

<body>

<div id="main" class="main" style ="text-align: center">
</div>

<div id = "navwrapper">
    <p class = "nav">Holder</>
</div>
<br>
<iframe src = "http://chrisfoose.blogspot.com" width = "100%" height = "300" frameborder = "0">
<p>Unfortunately your browser does not support dynamic content.</p>
</iframe>   

</div>
</body>

For reference, you can view the current results through this Codepen Link.

htmlcssnavbar

Answer №1

var imgSrcArr = ["http://www.hdwallpapers.in/walls/running_horse-wide.jpg", "http://www.hdwallpapers.in/walls/colorful_background-wide.jpg", "http://www.hdwallpapers.in/walls/moonlight_cruise-wide.jpg"]

var imgSrcArr = ["background/000.jpg", "background/001.jpg", "background/002.jpg", "background/003.jpg", "background/004.jpg"]

window.onload = function() {
  var randNum = Math.floor(Math.random() * 4);
  document.getElementById("main").style.backgroundImage = "url('" + imgSrcArr[randNum] + "')"
}
@import url(http://fonts.googleapis.com/css?family=Russo+One);
@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Share+Tech+Mono);
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
 svg {
  width: 600px;
  height: 120px;
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  background: black;
}
a {
  text-decoration: none;
  color: white;
}
.left {
  float: left;
}
.right {
  float: right;
}
.center {
  float: center;
}
div.main {
  margin: auto;
  ;
  height: 500px;
  ;
  width: 1000px;
  background-position: center;
  backgroud-repeat: no-repeat border: 1px solid black;
}
body {
  background-color: black;
}
#main {
  width: 1000px;
  margin: 0 auto;
}
#vid {
  width: 1200px;
  text-align: center;
}
#circle {
  position: fixed;
  z-index: 1;
}
#buttonred {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #8A0808;
  border-style: solid;
  text-align: center;
}
#buttonblue {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #4000FF;
  border-style: solid;
  text-align: center;
}
#buttongreen {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #088A08;
  border-style: solid;
  text-align: center;
}
#buttonpink {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: pink;
  border-style: solid;
  text-align: center;
}
#buttonorange {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: orange;
  border-style: solid;
  text-align: center;
}
#buttonback {
  witdth: 100px;
  height 100px;
  border-radius: 100%;
  background-color: red;
  border-style: solid;
  text-align: center;
}
;
table.center {
  ;
  background-color: white;
  ;
  margin.left: auto;
  ;
  margin.right: auto;
  ;
}
table.center {
  width: 70%;
  margin-left: 200px;
  margin-top: 300px;
  color: white;
}
p {
  font-family: Arial, Terminal, Times New Roman;
  margin-top: 30px;
  font-color: white;
  line-height: 100px;
  margin: 0;
}
p.bio {
  background-color: white;
  font-family: 'Russo One', sans-serif;
  color: black;
  margin-top: 50px margin-left: 50px
}
div.enclose {
  margin-top: 50px margin-left: 50px
}
td.bio {
  padding: 15px;
  border-radius: 25px;
}
table.bio {
  width: 70%;
  margin-left: 300px;
  margin-top: 150px;
  padding: 50px;
}
table.video {
  width: 85%;
  margin-left: 150px;
  margin-top: 200px;
}
table.graphics {
  width: 85%;
  margin-left: 50px;
  margin-top: 150px;
  background-color: black;
  border: 1px border-color: white;
}
td.graphics {
  border: 1px solid white;
  align: center;
}
#videobanner {
  width: 150px;
  height: 50px;
  background-color: grey;
  text-align: center;
  margin-top: 1px;
  margin-bottom: 20px;
  color: white;
}
p.video {
  font-family: Arial;
  font-size: large;
  color: white;
  text-align: center;
  font-size: 18px;
  margin-top: 5px;
}
p.menu {
  font-family: "Indie Flower", serif;
  font-color: white font-size: medium;
  font-weight: 700;
}
.nav {
  font-family: "Indie Flower", serif;
  font-size: larger;
  color: white;
}
#navwrapper {
  width=100% float: left;
  margin: 0 auto;
  list-style: none font-family: "Indie Flower", Arial;
  background-color: red;
  height=10px;
  text-align="center";
}
<body>

  <div id="main" class="main" style="text-align = center">


    <div id="navwrapper">
      <p class="nav">Holder
        </>
    </div>
    <br>
    <iframe src="http://chrisfoose.blogspot.com" width="100%" height="300" frameborder="0">
      <p>Unfortunately your browser does not support dynamic content.</p>
    </iframe>
  </div>
  </div>
</body>

</html>

Your main div was prematurely closed and the formatting of your css code was incorrect. Remember to use colons instead of equals signs in CSS properties.

For the updated version, check out this CodePen link.

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

Adjust the text size in a collapsible tree based on the number of expanded components inside the container

Hi there, I'm currently developing a code for an expandable/collapsible tree using checkboxes. I have successfully implemented the basic functionality, but I have a specific requirement. I want the text size to decrease as the tree expands to prevent ...

javascriptjqueryhtmlcss

HTML and CSS are two separate languages that work together to create web pages

I'm experiencing an issue with my CSS file not responding to my HTML file. I have imported the CSS file into my HTML file and both files are located in the same directory. It was working fine when they were written in the same file, but after separati ...

htmlcss

The functionality of the delete button in Datatables is only operational on the initial page, failing to

My datatable is giving me trouble. The delete button in the action column only works on the first page, but not on the other pages. Here is the code for my delete button: <table id="example" class="table table-striped table-bordered" cellspacing="0" wi ...

javascriptjqueryhtmlajaxdatatables

Is it possible to modify the content of an element with a click event in Angular/HTML?

How can I implement a feature in my mat-accordion using mat-expansion-panels where the text becomes underlined when the panels are clicked? I want the title to be underlined when the panels are open and for the underline to disappear when they are closed ...

htmlangulartypescriptangular-material

What is the variance in performance between the sx prop and the makeStyles function in Material UI?

I recently started delving into Material UI and learned that it employs a CSS in JS approach to style its components. I came across 2 methods in the documentation for creating styles: First, using the sx prop: <Box sx={{ backgroundColor: 'green& ...

javascriptcssreactjsmaterial-ui

Several validation checks - logic malfunction

I have implemented a validation feature for passwords on a form, but I suspect there may be a logic error in my code that I haven't caught yet (blame it on the coffee machine!). Take a look at the JavaScript below: <script type="text/javascript"& ...

javascripthtmlformsvalidation

HTML 5 File selection on iOS and Android using Cordova/Phonegap

I attempted to utilize the camera in a PhoneGap app using the HTML5 input tag as shown below. Create a new project through CLI Add iOS and Android platforms Incorporate the camera plugin Build for both devices Run on iPhone 5 with iOS 7.1.2 and Samsung N ...

androidioshtmlcordova

Is it better to use one large CSS file for Angular 2 or opt for separate files per component

When working with Angular 2, the choice of how to style your application is an important decision. Should you create one large minified .css file using a task runner like Gulp, or use Angular 2's styleUrls: ['myfile.css'] for each component? ...

cssperformanceangular

What is causing the error that app.js file cannot be located?

Here is the layout of my directory: ReactCourse // Main folder public // Subfolder within ReactCourse index.html // HTML file with linked js file app.js // JavaScript file This is the content of index.html: <!DOCTYPE ...

javascripthtml

Can you apply Bootstrap 5 custom color directly to the class attribute?

just like this: <span class="text-primary">some text</span> I'm curious if there's a way to achieve the following: <span class="text-red-300">some text</span> The red-300 color in Bootstrap 5 is a c ...

csssasscss-variablesbootstrap-5

What causes the text-align property to function in varying ways across different tags?

Can you explain why the text-align property behaves differently on different tags? In two cases, I am trying to center my text. In the first case, I use a parent div tag with an anchor tag inside. When I need to center align, I apply the property to the p ...

javascriptjqueryhtmlcss

What measures can be taken to prohibit a user from accessing a client-side HTML file using express?

I am currently developing a task management application called "todolist." In my node.js code, I utilize express and grant it access to my directory named Client: var app = express(); app.use(express.static(__dirname + "/Client")); The contents of my Cl ...

javascripthtmlnode.jsexpress

The connection to Cordova.js is established, but the deviceready event is not

I've included cordova.js in my project, called app.initialize();, but for some reason deviceready event is not being triggered. Any ideas on what might be causing this issue? Here's the JavaScript code: var app = { initialize: function() { ...

javascripthtmlcordova

What caused the mat-date calendar style to malfunction?

I integrated mat-date into my Angular project, but encountered an issue where the styles of the calendar were not displaying properly when clicking the icon. Here is the displayed calendar effect I attempted to troubleshoot by commenting out the styles o ...

cssangularmaterial-uiangular-materialmat-datepicker

Enhancing User Experience on Android Devices: Automatic Website Zoom-In Feature for Responsive Design

For the first time, I am delving into creating a responsive website design. I seem to be encountering difficulties when it comes to smartphones. I have been using the following meta-tag to ensure that the website loads "zoomed in". (I found this method on ...

androidhtmlcssviewstate

The toggling feature seems to be malfunctioning as the div section fails to display

I'm facing an issue with my Django project while working on a template. I want to toggle the visibility of a div element between hiding and showing, but the function I used isn't working for some reason. I borrowed the function from a different t ...

javascripthtmlcssdjango

Tips on steering clear of the issue of "Automatic grid alignment" when working with Bootstrap?

I'm attempting to achieve something along the lines of, |--------------Empty space---------------|-----first column(aligned to the right)-----| |---logo---||------Empty space-------|----second column(aligned to the right)---- However, it is automat ...

htmlcsstwitter-bootstrap

Adjust the navigation bar to expand based on the amount of content it contains

I have two pages for my website - a forum and a homepage. While the homepage is all set up, I need to make some modifications to the navigation bar on the forum page. I have mirrored the navigation bar from the homepage to the forum to ensure consistent st ...

phphtmlcsstwitter-bootstrap

Is there a way to reset back to the default CSS styles?

I have a div container with a nested span element (simplified). <div class="divDash"> <span>XX</span> </div> The CSS styling for the div makes the span initially hidden and only visible when hovering over the parent div. .div ...

javascriptjqueryhtmlcss

Are there any methods to achieve smoother font icons on Firefox?

When it comes to using icons on different browsers, I've noticed an issue. Icons appear sharp on Google Chrome and Opera, but when viewed on Firefox they tend to look blurry if the font-size is less than 20px. Strangely enough, once the font size reac ...

cssfirefoxfontsiconsfont-smoothing