CODEWITHSUNDEEP
htmlcss
Andreas Bonini
Andreas Bonini

Reputation: 44832

Moving the position of the sidebar

I have this control on my page which is a <div style="max-height: X"> inside a <fieldset> (I uploaded on jsfiddle.net the relevant HTML and CSS code).

enter image description here

As you can see there is a small problem: the area pointed to by the red arrow looks unnaturally empty. The scroll bar should start 9px more above than where it starts now!

Adding position: relative; top: -9px; to the div and padding-top: 9px to the ul fixes it when you are not scrolled, but once you start scrolling things start to look strange:

enter image description here

I need both of these:

Upvotes: 3

Views: 1060

Answers (9)

Kaushal
Kaushal

Reputation: 471

You can put span below scroll legend making a layer between the 'legend' and 'div', so that it hides 'div' and does not overlap with 'legend' on scroll.

Like this:

<fieldset class="scroll">
    <legend>Scroll:</legend>
    **<span class="stopoverlap"></span>**
    <div>

Now you can create 'stopoverlap' css like this:

.stopoverlap {
    display: block;
    position: absolute;
    height: 5px;
    top: 10px;
    background-color: #ffffff;
    width: 80%;    
    z-index: 2;
}

You also have to define z-index for 'legend' and 'div' under scroll fieldset and their position relative like this:

fieldset.scroll div {
    position: relative;
    top: -9px;
    **z-index: 1;**
}

and 

legend {
    font-weight: bold;
    margin-left: 5px;
    **position: relative;**
    **z-index : 3;**
}

Your scroll will look like:

enter image description here

Hope this helps

Edit : Do not put ** in your code as this is just to specify a change or an addition.

Upvotes: 1

S.S.Niranga
S.S.Niranga

Reputation: 364

add float:left;clear:both for those items, probably will fix lots of issues.

Upvotes: 0

James Cazzetta
James Cazzetta

Reputation: 3220

Try this simple solution:

http://jsfiddle.net/WY3dj/210/

To avoid the overlapping issue, just change the CSS style for following element:

legend
{
    font-weight: bold;
    margin-left: 5px;
    background-color: #fff;
    position:relative;
    z-index:1;
}

Upvotes: 0

Matt Whipple
Matt Whipple

Reputation: 7134

Here's a visually consistent solution which is probably the best that can be done with HTML/CSS alone (if you're stuck with that look) and can be easily tuned as needed.

http://jsfiddle.net/WY3dj/198/

Upvotes: 1

Nagaraj Chandran
Nagaraj Chandran

Reputation: 228

I hope this works..
Fiddle - http://jsfiddle.net/WY3dj/197/

Upvotes: 1

yodog
yodog

Reputation: 6252

here, fixed it for you: http://jsfiddle.net/WY3dj/172/

  • two nested divs inside the fieldset
  • changed your CSS a little bit

Test 1: Firefox 13

FF13

Test 2: Internet Explorer 9

IE9

Upvotes: 0

yunzen
yunzen

Reputation: 33449

Try something like this:

http://jsfiddle.net/HerrSerker/WY3dj/165/

Just make the legend's position absolute with fieldset's position relative; Then you can shift your legend with top/margin-top to the top

Upvotes: 5

Sujanth
Sujanth

Reputation: 621

You need to remove all styles from fieldset.scroll div

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

In the CSS, replace the value of top: -9px and make it as 0px.

fieldset.scroll div
{
    position: relative;
    top: 0px;
}

Fiddle here: http://jsfiddle.net/WY3dj/10/

Upvotes: 0

Related Questions