1
Ich habe ein div, das nicht richtig schweben wird. Wenn Sie die Sichtbarkeit ändern, wird ein Teil des aktuellen Textes überlagert, aber ich kann das später verschieben. Nur neugierig, warum es nicht richtig schwebt!Div wird nicht richtig floaten
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple Tabs with CSS & jQuery</title>
<style type="text/css">
.hidden{
background-color:#ccc;
position:absolute;
clear:both;
width:300px;
float:right;
border:1px black inset;
height:300px;
text-decoration:none;
font-size:14px;
padding: 1em 1em 1em 1em;
border:2px black double;
list-style-type:none;
display:none;
top:330px;
}
.hidden1{
background-color:#ccc;
position:absolute;
float:right;
width:100px;
border:1px black inset;
height:100px;
text-decoration:none;
font-size:14px;
padding: 1em 1em 1em 1em;
border:2px black double;
list-style-type:none;
display:none;
}
body {
margin:1em;
padding:0;
height:100%;
background-color:#cbcbcb;
color:#000000;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
border-style: thin;
}
h1 {font-size: 3em; margin: 20px 0;}
#centerColumn {
margin: 0 auto;
padding: 1em;
width: 1000px;
height:1200px;
text-align: left;
vertical-align: bottom;
background-color: #ffffff;
border: 1px solid #999999;}
ul.tabs {
margin: 0;
list-style: none;
height: 32px;
float:left;
width:200px;
padding:0 0 0 0;
}
ul.tabs li {
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #eee;
font-size:1.25em;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
table {
background-color: black;
border: 1px black solid;
border-collapse: collapse;
}
th {
border: 1px outset silver;
background-color: silver;
color: white;
}
tr {
background-color: white;
margin: 10px;
}
tr.striped {
background-color:silver ;
}
td {
padding: 1px 8px;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: right;
width: 99%;
background: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
</style>
<script type="text/javascript"
src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table tr:nth-child(even)").addClass("striped");
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
$("#agebutton").hover(function(){
$(".hidden1").fadeIn(200);
},
function(){
$(".hidden1").fadeOut(200);
});
$("#button").hover(function(){
$(".hidden").fadeIn(200);
},
function(){
$(".hidden").fadeOut(200);
});
});
</script>
</head>
<body>
<div id="centerColumn">
<div id="header"></div>
<h2 style="float:right; color:silver ">KARRN Spinal Cord Injury Registry</h2>
<br/><br/><br/><br/>
<ul class="tabs">
<li><a href="#tab1">Personal</a></li>
</ul><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<div class="hidden"><p>Resident County Stats
</p>
<p>Top three counties:<br/></p>
<ul style="list-style:none; padding: 0;">
<li style="border-bottom:1px">Johnson</li>
<li>Perry</li>
<li>Pike</li>
</ul>
</div>
<div class="hidden1">Average age: </div>
<div class="tab_container">
<div id="tab1" class="tab_content">
<table style="width: 100%" cellspacing="1" >
<tr>
<td >Username</td>
<td >Last Name</td>
<td >First Name</td>
<td >MI</td>
<td >Address</td>
<td >Email</td>
<td id="agebutton" class="style1" ><strong><a href="javascript:;">Age</a></strong></td>
<td id="button" class="style1" ><strong><a href="javascript:;">Resident County</a></strong></td>
</tr>
<tr>
<td >ww</td>
<td >Wilson</td>
<td >Woodrow</td>
<td >I</td>
<td >Penn Ave.</td>
<td ><a href="mailto:[email protected]">[email protected]</a></td>
<td >112</td>
<td > </td>
</tr>
<tr>
<td >othername</td>
<td >Last</td>
<td >First Name</td>
<td > </td>
<td >None</td>
<td ><a href="mailto:[email protected]">[email protected]</a></td>
<td >56</td>
<td >Fayette</td>
</tr>
<tr>
<td >Jr</td>
<td >Routen</td>
<td >Johnny</td>
<td >R</td>
<td >1 St.</td>
<td > </td>
<td >23</td>
<td >Hart</td>
</tr>
<tr>
<td >Jackson</td>
<td >Jackson</td>
<td >Smith</td>
<td >I</td>
<td >123 Address St.</td>
<td ><a href="mailto:[email protected]">[email protected]</a></td>
<td >34</td>
<td >Pike</td>
</tr>
<tr>
<td >roquefort</td>
<td >Head</td>
<td >Cheese</td>
<td >M</td>
<td >green bay</td>
<td ><a href="mailto:[email protected]">[email protected]</a></td>
<td >19</td>
<td >Menifee</td>
</tr>
<tr>
<td >Greenstein</td>
<td >Green</td>
<td >Up</td>
<td >C</td>
<td >1 Holler Road</td>
<td > </td>
<td >55</td>
<td >Greenup</td>
</tr>
<tr>
<td >Mwb</td>
<td >Merriwether</td>
<td >Brandon</td>
<td >R</td>
<td >Drive</td>
<td > </td>
<td >29</td>
<td >Rockcastle</td>
</tr>
</table>
<br/>
</div>
</div>
</div>
</body>
</html>
Welches div insbesondere, Sie müssen uns wirklich helfen und einige Besonderheiten geben. –