Suche im Forum:
Suchen


Autor Nachricht
Beitrag05.09.2007 um 09:15 (UTC)    
Titel: Tabelle
Antworten mit Zitat
Hallo,

wie bekomme ich so ne Tabelle, oder was das auch ist, wie bei www.aoz.de.tl hin??

Danke schon mal.
↑
Beitrag05.09.2007 um 11:44 (UTC)    
Titel:
Antworten mit Zitat
Hi,

ich versuch mal so gut wie möglich zu erklären:


Zitat:


<style type="text/css">
<!--
.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left;
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url() top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li.selected{
position: relative;
top: 1px;
}

.shadetabs li.selected a{
background-image: url();
border-bottom-color: white;
}

.shadetabs li.selected a:hover{
text-decoration: none;
}

.tabcontentstyle{
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block!important;
}
}-->
</style>




<script type="text/javascript">
<!--
var enabletabpersistence=1 //enable tab persistence via session only cookies, so selected tab is remembered?

var tabcontentIDs=new Object()

function expandcontent(linkobj){
var ulid=linkobj.parentNode.parentNode.id //id of UL element
var ullist=document.getElementById(ulid).getElementsByTagName("li") //get list of LIs corresponding to the tab contents
for (var i=0; i<ullist.length; i++){
ullist[i].className="" //deselect all tabs
if (typeof tabcontentIDs[ulid][i]!="undefined") //if tab content within this array index exists (exception: More tabs than there are tab contents)
document.getElementById(tabcontentIDs[ulid][i]).style.display="none" //hide all tab contents
}
linkobj.parentNode.className="selected" //highlight currently clicked on tab
document.getElementById(linkobj.getAttribute("rel")).style.display="block" //expand corresponding tab content
saveselectedtabcontentid(ulid, linkobj.getAttribute("rel"))
}

function expandtab(tabcontentid, tabnumber){ //interface for selecting a tab (plus expand corresponding content)
var thetab=document.getElementById(tabcontentid).getElementsByTagName("a")[tabnumber]
if (thetab.getAttribute("rel"))
expandcontent(thetab)
}

function savetabcontentids(ulid, relattribute){// save ids of tab content divs
if (typeof tabcontentIDs[ulid]=="undefined") //if this array doesn't exist yet
tabcontentIDs[ulid]=new Array()
tabcontentIDs[ulid][tabcontentIDs[ulid].length]=relattribute
}

function saveselectedtabcontentid(ulid, selectedtabid){ //set id of clicked on tab as selected tab id & enter into cookie
if (enabletabpersistence==1) //if persistence feature turned on
setCookie(ulid, selectedtabid)
}

function getullistlinkbyId(ulid, tabcontentid){ //returns a tab link based on the ID of the associated tab content
var ullist=document.getElementById(ulid).getElementsByTagName("li")
for (var i=0; i<ullist.length; i++){
if (ullist[i].getElementsByTagName("a")[0].getAttribute("rel")==tabcontentid){
return ullist[i].getElementsByTagName("a")[0]
break
}
}
}

function initializetabcontent(){
for (var i=0; i<arguments.length; i++){ //loop through passed UL ids
if (enabletabpersistence==0 && getCookie(arguments[i])!="") //clean up cookie if persist=off
setCookie(arguments[i], "")
var clickedontab=getCookie(arguments[i]) //retrieve ID of last clicked on tab from cookie, if any
var ulobj=document.getElementById(arguments[i])
var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL
for (var x=0; x<ulist.length; x++){ //loop through each LI element
var ulistlink=ulist[x].getElementsByTagName("a")[0]
if (ulistlink.getAttribute("rel")){
savetabcontentids(arguments[i], ulistlink.getAttribute("rel")) //save id of each tab content as loop runs
ulistlink.onclick=function(){
expandcontent(this)
return false
}
if (ulist[x].className=="selected" && clickedontab=="") //if a tab is set to be selected by default
expandcontent(ulistlink) //auto load currenly selected tab content
}
} //end inner for loop
if (clickedontab!=""){ //if a tab has been previously clicked on per the cookie value
var culistlink=getullistlinkbyId(arguments[i], clickedontab)
if (typeof culistlink!="undefined") //if match found between tabcontent id and rel attribute value
expandcontent(culistlink) //auto load currenly selected tab content
else //else if no match found between tabcontent id and rel attribute value (cookie mis-association)
expandcontent(ulist[0].getElementsByTagName("a")[0]) //just auto load first tab instead
}
} //end outer for loop
}


function getCookie(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

function setCookie(name, value){
document.cookie = name+"="+value //cookie value is domain wide (path=/)
}
-->
</script>




<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">1</a></li>
<li><a href="#" rel="tcontent2">2</a></li>
<li><a href="#" rel="tcontent3">3</a></li>
</ul>

<div class="tabcontentstyle" align="center" style="width: 468px; height: 131px">

<div id="tcontent1" class="tabcontent">
text der in dem ersten

</div>

<div id="tcontent2" class="tabcontent">
im zweiten dann vielleicht was anderes? Very Happy
</div>

<div id="tcontent3" class="tabcontent">
und weils so schön ist noch eins dazu
</div>


<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>



das würde dann ungefähr SO aussehen

grob heißt das also:
Das ROTE lässt du am besten so wies ist
und das GRÜNE kannst du so anpassen wie du es gerne hättest...


ok und jetzt noch was das einzelne bedeuted (bei den grünen an denen du rumbasteln kannst):

wobei wir jetzt mal die designsachen weglassen weil das eher css ist und das hab ich ned so drauf Very Happy
wenn du da noch was ändern willst kannst ja mit dem codeteil (das obere grüne) in die rubrik im forum gehen
und dich dort von den profis beraten lassen...

aber jetzt zum anderen teil:


Zitat:

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">1</a></li>
<li><a href="#" rel="tcontent2">2</a></li>
<li><a href="#" rel="tcontent3">3</a></li>
</ul>

<div class="tabcontentstyle" align="center" style="width: 468px; height: 131px">

<div id="tcontent1" class="tabcontent">
text der in dem ersten

</div>

<div id="tcontent2" class="tabcontent">
im zweiten dann vielleicht was anderes? Very Happy
</div>

<div id="tcontent3" class="tabcontent">
und weils so schön ist noch eins dazu
</div>

</div>
<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>


ERKLÄRUNG:

das
Grüne ist die anzahl und beschriftung der "Navigationsbutton" (nenn ich sie jetzt einfach mal)
da kannst du natürlich die anzahl noch erweitern ich hoffe es ist klar wie?
Blaue ist die größe und position des "textfeldes"
Gelbe ist jetzt der inhalt der im textfeld erscheit wenn man auf den navibutton von oben klickt
(wenn du oben die anzahl der navibuttons erweiterst musst du unten natürlich dann auch deren inhalt hinschreiben)
das hoffe ich auch das man erkennen kann wie es gehen soll ^^

das wärs dann Very Happy ein bisschen lang aber naja....
______________
[img:69a25d729e]http://www.lima-city.de/images/banner/lima-city_728x90_3.gif[/img:69a25d729e]
↑
Beiträge der letzten Zeit anzeigen:   
  • Seite 1 von 1

  •  
    • Gehe zu:  


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de

© 2024 webme GmbH, Deutschland. Alle Rechte vorbehalten.