What I would like to achieve is to have two divs on either side of my tab container, one on the left and one on the right both touching the far sides. Then information will need to go inbetween the two divs in the middle.
They also need to automatically expand in height when the tab container expands. Here is my code up to now: -
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head runat="server">
-
<title>Untitled Page</title>
-
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
-
-
<script type="text/javascript">
-
-
function ShowDiv(divid)
-
{
-
if(document.getElementById(divid).style.display == 'none')
-
{
-
document.getElementById(divid).style.display = 'block';
-
}
-
else
-
{
-
document.getElementById(divid).style.display = 'none';
-
}
-
}
-
-
</script>
-
</head>
-
<body>
-
<form id="form1" runat="server">
-
<asp:ScriptManager ID="ScriptManager1" runat="server">
-
</asp:ScriptManager>
-
-
<cc1:TabContainer ID="TabContainer1" runat="server" CssClass="blue" ActiveTabIndex="0">
-
<cc1:TabPanel runat="server" HeaderText="Test" ID="TabPanel1">
-
<ContentTemplate>
-
-
<div id="LeftDiv" style="background:red; float:left; width:25px; margin:-8px; height:auto;"></div>
-
-
<div id="RightDiv" style="background:red; float:right; width:25px; margin:-8px; height:auto;"></div>
-
-
<div style="margin: 25px;">
-
Test <br />
-
Test <br />
-
Test <br />
-
<a href="javascript:;" onclick="ShowDiv('Test');">Test</a>
-
<div id="Test" style="display:none;">
-
-
Hellllloo!!!!<br /><br /><br />
-
-
</div>
-
</div>
-
</ContentTemplate>
-
</cc1:TabPanel>
-
-
<cc1:TabPanel runat="server" HeaderText="Test" ID="TB2">
-
<ContentTemplate>
-
-
-
</ContentTemplate>
-
</cc1:TabPanel>
-
<cc1:TabPanel runat="server" HeaderText="Test" ID="TabPanel2">
-
<ContentTemplate>
-
Hello!!!
-
</ContentTemplate>
-
</cc1:TabPanel>
-
</cc1:TabContainer>
-
</form>
-
</body>
-
</html>
-
Many thanks in advance
2  4338 
Since most people don't use ASP, you need to provide the generated markup and the stylesheet for us to help you.
Well here is the HTML markup with a few changes from me trying things: -
<div id="TabContainer1" class="blue" style="width:200px;visibility:hidden;">
-
<div id="TabContainer1_header">
-
<span id="__tab_TabContainer1_TabPanel1">Test</span><span id="__tab_TabContainer1_TB2">Test</span><span id="__tab_TabContainer1_TabPanel2">Test</span>
-
</div><div id="TabContainer1_body">
-
<div id="TabContainer1_TabPanel1" style="display:none;visibility:hidden;">
-
-
<table style="margin: -8px;" width="200px">
-
<tr>
-
-
<td style="width:20px;"><div style="background:red; float:left; width:25px; height:auto; position:relative;"></div></td>
-
-
-
<td style="width:150px;">
-
<div style="margin: 25px;">
-
Test <br />
-
Test <br />
-
Test <br />
-
<a href="javascript:;" onclick="ShowDiv('Test');">Test</a>
-
<div id="Test" style="display:none;">
-
-
Hellllloo!!!!<br /><br /><br />
-
-
</div>
-
</div>
-
</td>
-
-
<td style="width:25px;"><div style="background:red; float:right; width:27px; height:auto; position:relative;"></div></td>
-
-
</tr>
-
</table>
-
-
-
</div><div id="TabContainer1_TB2" style="display:none;visibility:hidden;">
-
-
-
-
-
</div><div id="TabContainer1_TabPanel2" style="display:none;visibility:hidden;">
-
-
Hello!!!
-
-
</div>
-
</div>
-
</div>
-
I don't have any CSS on it at the moment because I am just trying to get it working before populating the whole page.
Many thanks in advance.
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Glabbeek |
last post by:
I'm changing the layout of my site. Instead of using tables, I will use
DIVs. It's working fine, except for 1 thing: In IE6 some DIVs are not
the correct width. Mozilla and Opera are showing the page the way I
want. Does anybody know a solution for this?
First of all, the code I am using:
CSS
-------
body {
|
by: deko |
last post by:
Is there any way to work around the blank space created by hidden divs? I'm
trying to use a relatively postioned divs with show/hide behaviors to
annotate an image. The divs show/hide onMouseOver/onMouseOut but leave a
blank space on the page when hidden (the space where the divs would normally
be). Is it possible to use z-indexing to put regular content where the
hidden divs would be? When I try to do this, the layers don't unhide as...
|
by: day |
last post by:
I know I've seen this issue described before, but I can't find it, or
the solution now that I need it.
I have some css-specified floating divs that contain images or text.
The text divs have a background color and text color that differ from
the rest of the page, and I'd like them to be positioned from the
right edge of the rightmost image div, to the right edge of the
browser window. In other words, if the browser window is 800 pixels...
|
by: justingoodman |
last post by:
I'm working on a website for a friend, and the layout has been giving
me some trouble.
http://members.osc3.com/nosferatu/zombie/
I would like the content panels to be able to be any length, without
the left side auto-expanding, without using iframes.
Every table is defined exactly as big as the image inside of it, and it
looks fine until the news content extends too far, then it stretches.
|
by: inkswamp |
last post by:
I've been using CSS for quite a while now but I have yet to master its
eccentricities. Here's something I recently ran across and if someone
could explain why this happens, I would appreciate it.
I've included code below. The code produces three divs, each with
height set to "auto." Within each div is an image. If I float the image
left or right, the height of the box does not accommodate the height of
the image automatically. If I don't...
| | |
by: Harris Kosmidhs |
last post by:
Consider the following HTML:
<div class="links">
<img src="linkimages/logo.gif">
<h2>title</h2>
<span><a target="_blank" href="http://">http://</a></span>
<p>description of link</p>
</div>
I have the following CSS:
|
by: bakum |
last post by:
Hi, i've got a basic layout as follows:
One large table (height 100%) with two columns, left and right.
Inside the left column are two divs#bottom #top.
Inside the right column is one div#main.
All div CONTENT is variable height, however I want div#main to always be 100% for layout purposes, hence I put a height:100% on it. #top + #bottom + a 10px margin between them need to add up to 100%, but since their sizes are variable I didn't...
|
by: Patrick Smith |
last post by:
Hi All,
Working on a new design for our site trying to incorporate fluid design,
etc.
Ran into a situation that is befuddling me.
In this instance <http://ocgweb.marine.usf.edu/~patrick/New/testwidth.html>
The top banner divs expand when the browser is resized, but when the
|
by: Ben C. |
last post by:
Hi
If I have a container div and inside the container div I float two divs
(one left and one right), the containting div will collapse as the
floated divs will no longer prop it up, meaning that any background
colour or image on the containing div will not be visible.
Now, suppose I put left and right padding on the containing div. How
come, if the containing div has collapsed, does the padding of the
container still apply to the two...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
