Working with divs and their border positioning

I am struggling to properly position a border within a specific div id. The border doesn't seem to correspond correctly with the text content inside the div.

Here is a snippet of my HTML code:

<div id="menu-left-top">

<ul class="menu-left-top">

<li><a href="auktioner.php">Categories</a></li>

</div>

<div id="menu-left">

<ul class="menu-left">

<li><a href="lamper.php">Lamps</a></li>
<li><a href="mobler.php">Furniture</a></li>
<li><a href="kunst.php">Art</a></li>
<li><a href="design.php">Design</a></li>
</div>

This is the CSS I have applied:

#menu-left-top {
width:195px;
height:1em;
margin-top:5px;
border-top-style:solid;
border-width:thin;
border-color: #999;

}

ul.menu-left-top {
list-style-type: none;
height:1em;

}

ul.menu-left-top li{

}

ul.menu-left-top li a{
color:#000;
font-size:12px;
text-decoration:none;
font-family: "Gill Sans Light"; 

}

ul.menu-left-top li a:hover{
color:#cf0036;
font-size:12px;
text-decoration:none;
font-family:"Gill Sans Light";
font-weight:300;
}

#menu-left {
width:195px;
max-height:4em;
margin-top:5px;
border-top-style:solid;
border-bottom-style:solid;
border-width:thin;
border-color: #999;

}


ul.menu-left {
list-style-type: none;

}

ul.menu-left li{

}

ul.menu-left li a{
color:#000;
font-size:12px;
text-decoration:none;
font-family: "Gill Sans Light"; 

}
ul.menu-left li a:hover{
color:#cf0036;
font-size:12px;
text-decoration:none;
font-family:"Gill Sans Light";
font-weight:300;
}

To see the current output, please visit this link. My main issue is with the navigation on the left side. Additionally, there appear to be faults with the floating div on the right side, but I'm unsure if it is related to my initial problem.

csshtmlborder

Answer №1

Hey there, no need to worry about separating the first menu item from the others. Take a look at this example:

<div id="menu-left">
<ul class="menu-left">
<li class="first"><a href="auktioner.php">Kategorier</a></li>
<li><a href="lamper.php">Lamper</a></li>
<li><a href="mobler.php">Møbler</a></li>
<li><a href="kunst.php">Kunst</a></li>
<li class="last"><a href="design.php">Design</a></li>
</ul>
</div>

If you prefer this layout, you can apply the following CSS:

.first { border:#000 solid; }
.last{  border-bottom:#000 solid;  }

Alternatively, if you want a different style, you can use this CSS:

.first { border-top:#000 solid; }
.last {  border-bottom:#000 solid; }

For a combination of both styles, you can try the following:

.first { border-top:#000 solid;
    border-bottom:#000 solid; }
.last{ border-bottom:#000 solid; }

Answer №2

Eliminate the max-height attribute from the menu-left division.

Answer №3

Is there a limit on the height?
You may want to consider removing max-height:4em; or changing it to height:auto;

Answer №4

Your ul tags are not properly closed, which is causing the issue. Make sure to close all html tags that you open. The main problem lies in the ul tags not being closed correctly.

<div id="menu-left-top">
<ul class="menu-left-top">
<li><a href="auktioner.php">Kategorier</a></li>
</ul>
</div>

<div id="menu-left">
<ul class="menu-left">
<li><a href="lamper.php">Lamper</a></li>
<li><a href="mobler.php">Møbler</a></li>
<li><a href="kunst.php">Kunst</a></li>
<li><a href="design.php">Design</a></li>
</ul>
</div>

The large borders around your list elements are caused by incorrect styling with border-top-style:solid; and border-bottom-style:solid;. Instead, use proper border styling like border:2px solid #00000;. Also, update your layout design and provide a blueprint for how you want it to look so I can assist you further in formatting. Remember to set height:auto as well.

Answer №5

To maintain consistency in the top menu, you can use the following HTML format: Implement the code below:

<div id="menu-left">
<ul class="menu-left">
<li class="first"><a href="auktioner.php">Kategorier</a></li>
<li><a href="lamper.php">Lamper</a></li>
<li><a href="mobler.php">Møbler</a></li>
<li><a href="kunst.php">Kunst</a></li>
<li><a href="design.php">Design</a></li>
</ul>
</div>

After implementing the HTML code, make these changes to the CSS:

.first { border-top:#000 solid; }
ul.menu-left li{
border-bottom:#000 solid; 
}

This will create a layout similar to the example provided. Feel free to adjust the border styles as needed. If you have any questions, don't hesitate to ask.

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

Pick CSS classes that have random letters added to the end

Currently in the process of learning how to perform web scraping using Python. I've been diving into Web scraping with Python by Ryan Mitchell for some guidance. My current roadblock is within the section on Crawling Sites Through Search. When I atte ...

pythonhtmlcssweb-scrapingbeautifulsoup

Moving data of a row from one table to another in Laravel by triggering a button click

For instance, consider a scenario where clicking a button moves a row to another table in the database and then deletes it. Implementing this functionality in Laravel seems challenging as I am unable to find any relevant resources or guidance on how to pro ...

javascriptphphtmljquerylaravel

wunderground compass tool indicating the direction of the wind

I am using weather jQuery from the Wunderground API, and my jQuery is working well. However, the problem lies in the Wunderground API wind direction degrees. I want to display the wind degrees on a compass, and I found this answer on StackOverflow: CSS: ...

javascriptjqueryhtmlcss

Preventing image rotation in an Angular 4 application: Strategies and Solutions

My Angular application allows users to choose a profile picture. During testing, I discovered that when I upload images from an iPhone in portrait mode, they appear rotated in my app. However, when the photos are taken in landscape mode, they display corre ...

javascripthtmlioscssangular

The functionality to hide one div and display another in its place is disabled for popups and is not currently working as

For easy access, feel free to download my project files here. (Size: 2mb) In my webpage, there is a popup containing two images and a heading inside a div. I want to implement a functionality where upon hovering over the div, it will hide and show another ...

javascriptjqueryhtmlcss

Maximizing values entered into form fields

Looking for a way to extract the highest number from a set of input fields in an HTML form using JavaScript? Take this example: <input id="temp_<strong>0</strong>__Amount" name="temp[<strong>0</strong>].Amount" type="text" valu ...

javascriptjqueryhtml

"Maximizing Bootstrap Functionality with Angular 2: Step-by

I'm experiencing an issue with Angular2, Bootstrap 3.3.7, and Bootstrap Plugins. I have imported all the necessary stylesheets and JavaScript files in the 'index.html' file. Below is the snippet from the index.html: <!-- Bootstrap & ...

csstwitter-bootstrapangularpluginstwitter-bootstrap-3

Issue: Incorrectly calling a hook. Hooks can only be used within the body of a function component. Assistance needed to resolve this issue

import React, { useState } from "react"; const RegistrationForm = () => { const [name, setName] = useState(""); const [password, setPassword] = useState(""); const [email, setEmail] = useState(" ...

javascripthtmljqueryjsonreactjs

Strategically stacking two Bootstrap columns for perfect alignment

I'm currently having trouble with aligning Bootstrap columns. Can someone assist me, please? <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <di ...

htmlcssbootstrap-4

Should I publish on a model that can be accessed as a list?

Hey there, everyone. I'm new to .net mvc and I have a listing page for students. The challenge I am facing is that I need to enter grades for all the students on the page at once, but the model is structured as a list which makes it difficult to save ...

html.netformspostmodel-view-controller

The initial-scale setting for the iOS viewport is not respected when the on-screen keyboard is

I have encountered a situation where I need to embed a non-responsive page using an iframe. To display the entire iframe, I adjust the viewport width and scale dynamically through JavaScript. When it is time to close the iframe, I revert the viewport width ...

javascripthtmlioscss

Problem arises with the HTML/CSS tab on hover or when it is in active state

I am encountering a problem with a tab. The link is provided below for reference: <div class="dm-main-tab-menu"> <ul> <li class="Content active"><a accesskey="1" href="?content">Content</a></li> < ...

htmlcsstabshover

Personalized Grid Design for Showcasing Athletic Teams

I am looking to create a custom grid layout that represents the team's Players, separated by their positions (GK, Defense, Midfielders, and Forwards), similar to the image below. The layout should also be responsive like in image 1. Currently, the re ...

javascripthtmlcssreactjs

Why does the script source direct me to localhost:5000?

https://i.sstatic.net/X0TKs.png Hello fellow developers! I've encountered an issue while attempting to keep my javascript file separate from my .ejs files. Despite pointing my script tag to "../client/index.js," which is the correct location of the f ...

javascripthtmlnode.js

Show a checkbox element with a square in the center instead of a tick mark

Is there a way to create a custom checkbox in HTML with a black box in the center, similar to the third checkbox shown in the image below? I've noticed this design in many interfaces, but I haven't been able to find a satisfactory example online ...

javascriptjqueryhtmlcss

New to JavaScript and Bootstrap - eager to learn by using Bootstrap 4 Chart Template, just need help with a small issue in the code

I am eager to dive into Bootstrap 4 and data visualization charts. I want to replicate the visualizations found in the link below. However, after copying and pasting the code into Atom, it's not functioning as expected. I ensured that I copied the HT ...

javascripthtmlcssbootstrap-4

Guide on styling Treeview with CSS

When attempting to print my treeview using the script below, I encountered an issue where the printed output did not include any CSS styling. I have two specific requirements: I would like each level of the tree to be displayed in a different color usin ...

javascriptasp.netcssteleriktreeview

Changing the line spacing in HTML/CSS code

I'm working on a minimalist checkout interface using bootstrap. Here's my progress so far: https://i.sstatic.net/DMVAJ.png <ul class="list-group list-group-flush"> <li class="list-group-item ...

htmlcssbootstrap-4

Tips for resolving encoding problems without the need to rewrite the content

Issue at Hand: When I copy a gridview from one .aspx page to another, I encounter a problem with Arabic words like: رقم اذن الإضافة They appear as: &#1585;&#1602;&#1605; &#1575;&#1584;&#1606; &#1575;&#1604;& ...

asp.nethtmlencodingmetadataarabic

Creating a multi-column dropdown menu: options for two, three, or multiple columns

Is there a way to implement multiple columns in a dropdown menu using the grid system in Bootstrap 4? Here is the code I have tried so far, but it's not working as expected (please note that the snippet is mobile-responsive) <!DOCTYPE html> ...

htmlcssbootstrap-4