Selection of text within a block resembling a bar of buttons

Question

Selection of text within a block resembling a bar of buttons

design.css

body {
    background-color: #666666;
    margin-left:500px;
    margin-right:500px;
    margin-top:10px;
    margin-bottom:20px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size:12px; 
    color:white;
}

div.header {
    background-color: #333333;  
}

div.navigationBar {
    border:0;
    border-style:solid;
    background-color:#112211;  
}

div.navigationButton {
    border:1px;
    border-color:#ffffff;
    border-style:solid;
    background-color:#112211;
    padding:15px;
    width:100px;
    height:40px;
    text-transform:uppercase;
    overflow:hidden;
    font-weight:bold;
    text-align:center;
}

.navigationBar ul {
    list-style-type:none;   
    padding:1px;
}

.navigationBar li {
    display:inline;
    float:left; 
}

.navigationButton a
{
    text-decoration:none;
    color:#eec600;
    display:block;
}


.navigationButton a:link {
    text-decoration:none;
}


.navigationButton a:hover {
    color:#ffe811;
}

homepage.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="pl" http-equiv="Content-Language">
  <link rel="stylesheet" type="text/css" href="design.css"/> 
</head>
<body>
  <div class="header" style="height:200px; width: 800px;"></div>
  <div class="navigationBar" style= "height:73px; width: 800px;" > /* added unit to the height property */
    <ul>
      <li><div class="navigationButton" ><a href="#link4">Button4</a></div></li>
      <li><div class="navigationButton" ><a href="#link5">Button5</a></div></li>
      <li><div class="navigationButton" ><a href="#link6">Button6</a></div></li>
    </ul>
  </div>
</body>
</html>

Why is there a space between the header div and the navigationBar? Any feedback or suggestions for improvements are greatly appreciated.

The strange gap appears in web browsers (but not in jsFiddle). I have tested this code on Firefox and IE.

html css

Answer 1

Answer №1

Your code has several mistakes that need to be addressed:

Avoid using div elements inside list items
Ensure your height values in HTML have a specified unit, like height: 73px;
Avoid unnecessarily nesting elements, such as placing your ul element within a div, along with links inside list items.
Avoid mixing inline styles with linked stylesheets.

If you can provide more details on what you're trying to achieve or any specific examples, it would help in providing better assistance.

I've made some modifications to your code for better cross-browser compatibility. Let me know your thoughts on the revised version.

Here is a Fiddle link to the updated code with CSS separated into a different file: http://jsfiddle.net/FsvJ3/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>

  <style type="text/css">
    /* Updated CSS styles */
  </style>

</head>
<body>
  <div id="header"></div>

  <ul id="nav">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
  </ul>
</body>
</html>

In your original code, the way you attempted to center content could lead to unexpected behavior. I adjusted it by setting explicit width and using auto for margins.

It's advisable to simplify the structure by minimizing unnecessary elements. For instance, consider styling the list directly instead of enclosing it in a div with the class navigationBar.

Keep your markup concise, focusing solely on essential elements rather than adding extra hooks for styling purposes.

Answer 2

Your code has several mistakes that need to be addressed:

Avoid using div elements inside list items
Ensure your height values in HTML have a specified unit, like height: 73px;
Avoid unnecessarily nesting elements, such as placing your ul element within a div, along with links inside list items.
Avoid mixing inline styles with linked stylesheets.

If you can provide more details on what you're trying to achieve or any specific examples, it would help in providing better assistance.

I've made some modifications to your code for better cross-browser compatibility. Let me know your thoughts on the revised version.

Here is a Fiddle link to the updated code with CSS separated into a different file: http://jsfiddle.net/FsvJ3/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>

  <style type="text/css">
    /* Updated CSS styles */
  </style>

</head>
<body>
  <div id="header"></div>

  <ul id="nav">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
  </ul>
</body>
</html>

In your original code, the way you attempted to center content could lead to unexpected behavior. I adjusted it by setting explicit width and using auto for margins.

It's advisable to simplify the structure by minimizing unnecessary elements. For instance, consider styling the list directly instead of enclosing it in a div with the class navigationBar.

Keep your markup concise, focusing solely on essential elements rather than adding extra hooks for styling purposes.

Answer 3

Answer №2

It is not recommended to place div elements inside li elements. Instead, you can simply assign the li element a class of navigationButton.

I have tested your code on jsfiddle and I cannot see any gap that you mentioned...I would recommend checking the link: http://jsfiddle.net/qL8Ra/

Answer 4

It is not recommended to place div elements inside li elements. Instead, you can simply assign the li element a class of navigationButton.

I have tested your code on jsfiddle and I cannot see any gap that you mentioned...I would recommend checking the link: http://jsfiddle.net/qL8Ra/

Answer 5

Answer №3

Check out this Fiddle

I'm puzzled by the Gap between the grey Header and the navigation bar. Any thoughts on how to address it? Also, any feedback on the code provided?

<li> class="navigationButton" ><a href="#link1">Button1</a></li>
<li> class="navigationButton" ><a href="#link2">Button2</a></li>
<li> class="navigationButton" ><a href="#link3">Button3</a></li>

It's recommended not to use inline styles like

style="height:200px; width: 800px;"

since you already have a stylesheet.

Your code could be more readable if formatted properly for easier understanding.

Answer 6

Check out this Fiddle

I'm puzzled by the Gap between the grey Header and the navigation bar. Any thoughts on how to address it? Also, any feedback on the code provided?

<li> class="navigationButton" ><a href="#link1">Button1</a></li>
<li> class="navigationButton" ><a href="#link2">Button2</a></li>
<li> class="navigationButton" ><a href="#link3">Button3</a></li>

It's recommended not to use inline styles like

style="height:200px; width: 800px;"

since you already have a stylesheet.

Your code could be more readable if formatted properly for easier understanding.

Selection of text within a block resembling a bar of buttons

Answer №1

Answer №2

Answer №3

Similar questions

Enhanced browsing experience with personalized search suggestions

Error 404: The requested file could not be located on the MAMP server

How to visually deactivate a flat button ( <input type="button"> ) programmatically with JavaScript

CSS Animation glitch with images

In JavaScript, a "switch statement" retrieves a test value from a "input type text" by accessing the value using getElementByName.value

The back button fails to refresh the page on a website utilizing Ajax technology

Properly appears in Chrome, but experiences issues in Internet Explorer 11

Is it possible to place a list/accordion above a button in Semantic UI?

"Activate the mat-checkbox based on the outcome of a certain process

SVG tags are not functioning properly

Adding several <div> elements with the correct indices

Switch up the color of checkboxes with a dropdown menu option

Checkbox offering a tri-state option

"Addclass() function successfully executing in the console, yet encountering issues within the script execution

Create an HTML table using data from a Python dictionary

Page width incorrectly set leading to unnecessary scrolling

Selenium Webdriver is retrieving background colors with unexpected alpha values

Display or conceal a frame with the help of JavaScript or jQuery

Troubleshooting issue with Calendar styling in Bootstrap and SimpleCalendar Rails integration

I have just started a new project in Vue and noticed that the app div has some extra margin around it. Can anyone