HTML - The button does not contain any text within it

Hi there! I'm a newbie around here, and I have a question about a particular issue.

I noticed that the text appears to be located outside of the designated box, which looks quite odd. How can I ensure that the text displays within the specified box? Did I make an error in my coding somewhere? Upon reviewing my code, I am unable to pinpoint any issues. For your information, I used Dreamweaver for this interface design.

Below are snippets of the HTML and CSS codes:

<html>
<head>
<meta charset="utf-8">
<title>Deane.co</title>
<link href="style.css" rel="stylesheet" type="text/css" >
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<div id="nav1">
 <h4><a href="index.html"><h1>Deane.co</a></h4>
 <ul>
    <li id="active"><a href="index.html"</a>Home</li>
    <li><a href="service.html"</a>Products</li>
    <li><a href="contact.html"</a>Contact</li>
    <li><a href="about.html"About</a>About</li>
 </ul>
 </div>
 <div id="main-content">
 <br>
 <h1> Welcome To Deane.co </h1>
 <br>
 <p> Welcome to Deane.co the place to shop beautiful clothes easier </p>
 <br>
 <div id = "products">
 <h5><a href="products.html">Check our products</a></h5>
 </div>
 </div>
 <div id="shirtsaesthetic"> 
 <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
 <h4> Hipster Blouse </h4> <br>
 <p> RM40 </p>
 </div>
 <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
 <h4> Hipster Blouse </h4> <br>
 <p> RM40 </p>
 </div>
 <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
 <h4> Hipster Blouse </h4> <br>
 <p> RM40 </p>
 </div>
 </div>
 <div id="footer">
 <h2>&copy; Allright Reserved</h2>
 <div>
 <ul>
    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
 </ul>
 </div> 
 </div>
 </body>
 </html>

For the CSS code snippet, refer to the original post above.

htmlcss

Answer №1

It seems like your initial code snippets are a bit messy. Ensure to close tags properly:

<head>
<title>Deane.co</title>
<link href="style.css" rel="stylesheet" type="text/css" >
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>    
<body>
<div id="nav1">
<h4><a href="index.html"><h1>Deane.co</h1></a></h4>
 <ul>
    <li id="active"><a href="index.html">Home</a></li>
    <li><a href="service.html">Products</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="about.html"About>About</a></li>
 </ul>
 <div id="main-content">
 <br>
 <h1> Welcome To Deane.co </h1>
 <br>
 <p> Welcome to Deane.co, the place to shop for beautiful clothes more easily </p>
 <br>
 <div id = "products">
 <h5><a href="products.html">Check out our products</a></h5>
 </div>
 </div>
 <div id="shirtsaesthetic"> 
 <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
 <h4> Hipster Blouse </h4> <br>
 <p> RM40 </p>
 </div>
 <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
 <h4> Hipster Blouse </h4> <br>
 <p> RM40 </p>
 </div>
 <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
 <h4> Hipster Blouse </h4> <br>
 <p> RM40 </p>
 </div>
 </div>
 <div id="footer">
 <h2>&copy; All Rights Reserved</h2>
 <div>
 <ul>
    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
 </ul>
 </div> 
 </div>
 </body>

Answer №2

Make the following changes in your style.css file:

 #products a {
  color: white;
  text-decoration: none;
 }

In your html file, you need to add the closing bracket ">" for the "a" tag in these lines:

<ul>
    <li id="active"><a href="index.html"></a>Home</li>
    <li><a href="service.html"></a>Products</li>
    <li><a href="contact.html"> </a>Contact</li>
    <li><a href="about.html"></a>About</li>
</ul>

Answer №3

The a tags in your navigation are not correctly formatted, and you should eliminate the padding from the #products a

body {
font-family: 'Raleway', sans-serif;
}
*{
padding: 0px;
margin: 0px;
}

#nav1 {
width: 100%;
height: 70px;
line-height: 70px;
background: #a5aab1;
}
#nav1 h1 {
float: left;
font-size: 2.5em;
margin-left: 15px;

}
#nav1 h1 a {
text-decoration: none;
color: white;
}
#nav1 ul {
float: right;
margin-right: 15px;

}
#nav1 ul li {
display: inline-block;
list-style-type: none;
}

#nav1 ul li a {
text-decoration: none;
color: white;
padding: 25px;
}
#nav1 ul li:hover{
background: #bfc5ce;
transition: all ease-in-out 0.45s;

}
#active {
background: #bfc5ce;

}

#main-content {
width: 100&;
height: 600px;
background: url(Images/store-background3.jpg) no-repeat;
background-size: cover;
text-align: center;
color: black;
line-height: 40px;

}
#main-content a {
text-decoration: none;
color: black;
}
#products {
background: #a5aab1;
width: 170px;
height: 60px;
line-height: 60px;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
color: white;
font-weight: 100;
}
#products:hover {
box-shadow: 1px 1px 10px 10px rgba(136, 131, 131, 0.83);
transition: all ease-in-out 0.45s;
}
#products a {
color: white;
text-decoration: none;

}

#shirtsaesthetic {
width: 100%;
height: 400px;
background: white;
}
#shirtsaesthetic1 {
width: 400px;
height: 300px;
padding: 5px;
display: inline;
float: left;
margin: 19px;
text-align: center;
}
#shirtsaesthetic1 img {
width: 300px;
height: 220px;
border-radius: 5px;
}
<html>

<head>
  <meta charset="utf-8">
  <title>Deane.co</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div id="nav1">
    <h4><a href="index.html"><h1>Deane.co</a></h4>
    <ul>
      <li id="active"><a href="index.html">Home </a></li>
      <li><a href="service.html">Products</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </div>
  <div id="main-content">
    <br>
    <h1> Welcome To Deane.co </h1>
    <br>
    <p> Welcome to Deane.co the place to shop beautiful clothes easier </p>
    <br>
    <div id="products">
      <h5><a href="products.html">Check our products</a></h5>
    </div>
  </div>
  <div id="shirtsaesthetic">
    <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
      <h4> Hipster Blouse </h4> <br>
      <p> RM40 </p>
    </div>
    <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
      <h4> Hipster Blouse </h4> <br>
      <p> RM40 </p>
    </div>
    <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
      <h4> Hipster Blouse </h4> <br>
      <p> RM40 </p>
    </div>
  </div>
  <div id="footer">
    <h2>&copy; Allright Reserved</h2>
    <div>
      <ul>
        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
      </ul>
    </div>
  </div>
</body>

</html>

Answer №4

The unclosed tags in the initial unordered list need to be fixed.

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

Unable to interpret the remainder: '('static', filename='main.png')' within the context of 'url_for('static', filename='main.png')'

I am a beginner with django and I'm attempting to display an html page. I have a test HTML page and a URL for testing purposes. When accessing the URL, I encounter the following error: Could not parse the remainder: '('static', filena ...

pythonhtmldjango

What is the best way to update a section of an HTML file without changing the entire "inner.html"?

I'm working on a counter that can either count backwards or in ascending order based on requirements. The counter is functioning correctly, but I want to add text to accompany each number as it counts. The issue is that the text changes every time the ...

javascripthtmlcss

Generating a fictional list of items in a sequential order

I am managing a website that focuses on displaying the line of succession to the British crown. The main content of the site is structured as an ordered list using the <ol> tag. However, there is a unique challenge. Individuals occasionally drop out ...

htmlcss

Support for TrueType fonts in web browsersLet me know if you

If I have a custom font in TTF format and want to check if @font-face supports it, what script can I use? What are the available options? ...

csshtmlfontsfont-face

Aligning a child element with siblings within a parent div

I'm trying to create a layout where the grandparent div has multiple parent divs, each with different numbers of elements. In one type of parent div with 3 elements, the second element should always be aligned in the center. The first and third elemen ...

htmlcssbootstrap-4css-grid

I'm encountering difficulties with customizing the root styling of material-ui's DialogActions

Check out the two buttons in a DialogActions just like this. This is the JSX snippet I'm working with: <DialogActions classes={{ root: classes.dialogActionsLeft }}> <Button autoFocus onClick={() => { setOpen(false); }} ...

cssreactjsmaterial-ui

Is it possible to shift the image within the <canvas> element without having to redraw the entire canvas?

I created a game board and I am trying to implement drag-and-drop functionality for my pieces, which are in .gif format. However, I am struggling with finding a solution that allows me to move the pieces without constantly redrawing the entire board. Cur ...

javascripthtml

Fade or animate the opacity in jQuery to change the display type to something other than block

I am currently using display: table and display: table-cell to vertically align multiple divs. However, I have encountered an issue when animating the opacity with jQuery using either fadeTo() or fadeIn. The problem is that it always adds inline style di ...

javascriptjqueryhtmlcss

Exploring all the options within a dropdown menu using JQuery

Within the MVC 4 view, there is a dropdown box that, when its value changes, needs to capture all selected values. Each selection consists of three items: the Id, the visible value on the form, and a path to a file. While the functionality works for readin ...

javascriptjqueryhtmldrop-down-menu

Unable to delete a segment of text within the description of each individual article division using jQuery

In an effort to clean up the article descriptions on my website's homepage, I am seeking a solution to remove the {AC} text that appears at the beginning of each description. While attempting to use the jQuery code provided below, I encountered an iss ...

javascriptjqueryhtml

"Stop" and "start" a loop in AngularJS

Feeling a bit lost on how to articulate this inquiry, or even where to start looking for answers. I have a dynamic photo/text feed populating an array, meaning my page is constantly being updated with new information. The influx of data is happening at a ...

javascripthtmlangularjs

Tips for refreshing innerHTML without altering the entire content

I've written a JavaScript code that uses AJAX to periodically send an XMLHttpRequest to fetch data from a PHP file. The data retrieved is then added to the innerHTML of a <p> tag. However, every time new content is added, the entire paragraph se ...

javascripthtmlajax

Utilizing Typescript to pass props to a material-ui button enclosed in styled-components

After setting up my react project using the typescript template, I decided to style the material-ui Button component using the 'styled' method from the styled-components library as shown below: import React from 'react'; import styled f ...

cssreactjstypescriptmaterial-uistyled-components

Trouble with CSS3 Menu Layout and Gradient Display Issues

My task is to replicate this menu: I'm having trouble creating the gradient. Completed Why can't I see it in my code? http://jsfiddle.net/Vtr6d/ Here's what I currently have: CSS: .mainOptions{ float:left; margin:0 20px 0 20px; ...

htmlcssgradient

What is the best way to calculate the number of div elements with a specific class that are contained within parent div elements with another specific class?

Is there a way to count the number of elements with the class '.child' in each container and then add a sentence containing that count inside each container? <div class='container'> <div class='child'></di ...

javascriptjqueryhtml

What is the best way to shade a webpage and showcase a floating, engaging box at the same time?

I have noticed a common trend of websites using this attention-grabbing effect. Are there various methods to achieve this? Is there a popular JavaScript library designed specifically for this purpose that is widely utilized? Additionally, how can I impleme ...

javascriptajaxhtml

Implement styling based on user input - Transmit form data via PHP to designated email address

My form allows people to provide their details and share their current timetable. I then group them based on suitable times The PHP form currently prints either 'work' or 'free' into a table cell, based on user selection in the form, a ...

javascriptphphtmlformsemail

What are the steps to configure or reach a page located in a subdirectory of a different project within a Laravel/OctoberCMS website

I have developed a website using an OctoberCMS theme, hosted on a DigitalOcean server. I am looking to integrate a separate project (specifically the code from Matomo analytics) onto the same server and create a public page that can be accessed at my_site. ...

phphtmllaraveloctobercmsmatomo

Issues with table formatting and malfunctioning functions

I created a basic tic-tac-toe game, but I'm having an issue with the table display. It appears squished when the game loads. Is there a way to prevent this and keep the table empty? Additionally, I am using NotePad++ and encountering problems running ...

javascripthtmlfunctionfirefoxhtml-table

Styles for submit buttons in IE 8 are dysfunctional

Check out my form here: It seems that the button at the bottom of the form is not displaying correctly in Internet Explorer, despite working fine on other browsers. Below is the CSS code I am using for styling the button: .button { -moz-border-radius: ...

htmlcssbutton