Border positioning: how to?


Tags: css,positioning,border,border-layout

Problem :

I want to position the border, but this won't work. This is the CSS:

.menu-container {
    border-top: 5px solid #81806E;
    float: left;
    margin: 5px 27px 0 10px;
    width: 704px;
}

The problem is that this container, contains menu links. So if I adjust the width and margin, the border is coming with it. But I want to style it separately... How can I do this?



Solution :

Check the sample design and code with result, is this you want?

HTML:

<div class="menu-container">
      <a class="menu-item" href="#">Menu 1</a>
      <a class="menu-item" href="#">Menu 2</a>
      <a class="menu-item" href="#">Menu 3</a>
      <a class="menu-item" href="#">Menu 4</a>
      <a class="menu-item" href="#">Menu 5</a>
    </div>

CSS:

.menu-container {
    float: left;
    margin: 5px 27px 0 10px;
    width: 704px;
}
.menu-item{
  float:left;
  height:20px;
  margin-right:3px;
  border-top: 5px solid #81806E;
}

    CSS Howto..

    How to color my sidebars after centering my website

    How to make the same distance between tags with only CSS?

    how to set border spacing in javafx

    How to make background color extend all the way to bottom of page / content?

    how can i add the on hover effect on hyperlink in jeditorpane using swing in java

    How to place an image in table's right corner

    How do I change the Default Design? [closed]

    CSS how to keep text always inline with a paragraph

    jQuery - How to get elements height value and use it in another element via css code?

    How to customize the EditorFor CSS with razor

    How to apply CSS to elements that have multiple classes?

    How to prevent rendering css when loading stylesheet from local storage?

    How to apply a defined class to a new class in my css?

    How to position two divs on either side of the screen, HTML, CSS

    How to prevent transition to run on page load after height is set with javascript in Safari?

    CSS3: How to add more than 2 CSS Ribbon effects to same banner?

    How to make objects move with CSS?

    How do I repeat select elements in HTML

    Simple CSS: How to fix display:inline issue

    how to make website more user friendly for mobile users [closed]

    How to make Superfish menu vertical in first level but horizontal in second level?

    How can I join background images?

    How do I make my links be next to each other in CSS/HTML?

    How to stop html/css object from resizing

    How to put bootstrap glow (used in the 'form-control' CSS class) on a div?

    Why is Nexus 4 (using Chrome for Android) showing window size as 384x519 but screenshot shows 768x1038?

    How defile CSS rule path for iframe in cascade style sheet (CSS)?

    How to get an App made using JavaScript to autoresize for other Apple Devices?

    CSS - How to display dropdown text in one row?

    How to make text responsive to div size?