We help IT Professionals succeed at work.

ul over div

itinfserv
itinfserv asked
on
I'm using the following code to have a box with tabs.
<ul class="tabs">
<li id="basic" class="selected">
<a class="button-basic-search" href="#panel-basic-search">Basic search</a>
</li>
<li id="advanced" class="">
<span>
<a class="button-advanced-search" href="#panel-advanced-search">Advanced search</a>
</span>
</li>
</ul>
<div id="panel-basic-search" class="panel" style="display: block;">
<div class="panelBody">
<div class="panelMain">
<form id="basic-search-form" class="styled" method="get" action="/server/">
<p>Enter first name or last name to search for contacts:</p>
<label for="basic-search">Search for:</label>
<input id="basic-search" class="text" type="text" name="search_word">
<span class="button inline">
<button type="submit">Search</button>
</span>
<input type="hidden" value="ContactSearchResults" name="change">
<input type="hidden" value="simple" name="search_type">
</form>
</div>
</div>
</div>

Open in new window

my issue is how to make the bottom of the tabs to go over the border of the text box (Search)? is it as they are in two different branches?
Comment
Watch Question

Mark StegglesWeb Developer
Top Expert 2006

Commented:
Hello,

One way would be to put the tabs and the panels in a container like:

<div class="tabs-container">
<!-- put tabs and panels here -->
</div>

css:

.tabs-container {
padding-top:50px;
position:relative
}
.tabs {
left:0;
position:absolute;
top:0;
}

Adjust the padding on .tabs-container to suit your design. Get the idea?

Author

Commented:
not really, i want the selected tab not to have the bottom border so it seems it's integrated with the text box.
Web Developer
Top Expert 2006
Commented:
If you add a z-index to .tabs it will be over .tabs.

Please post your css for the tabs.

Without seeing the css I would guess that you can do this for selected tab:

.tabs .selected {
border-bottom-width:0;
padding-top:1px; /* increase this by 1px compared to the other tabs */
position:relative;
top:1px; /* push the selected tab down 1 px */
}

Let me know if this helps