Jump to content
InvisionCommunity.de - Der Deutsche Invision Community Support
Sign in to follow this  
antihero

Sauberes Trennen der HTML Bereiche

Recommended Posts

Hi

Ich habe ein etwas komplexeres Problem bei der Erstellung eines neuen Skins.

Folgende HTML Seite sollte den grundsätzlichen Aufbau des Forums darstellen:

http://server3.cyon.ch/~beleavec/div/preview/

Kann mir jemand helfen diesen HTML Code sauber in einen Skin zu verpacken?

Mit sauber verpacken meine ich, welcher Teil des Codes kommt wohin.

Da ich noch ein absoluter Skin-N00b bin habe ich keinen Schimmer davon wie man eine solche Unterteilung schlau utnerbringt.

Ich hoffe ihr könnt mir helfen.

Ich möchte keinen Fix-fertigen Skin (Ja, ich kann mir vorstellen wieviel Aufwand das gibt ;) ) sondern eine ungefähre Anleitung/Anhaltspunkte zur sauberen Unterteilung der einzelnen Bereiche, wenns den möglich ist... :)

Danke scho im voraus!

antihero

Share this post


Link to post

das was du da hast ist relativ einfach,

alles was du da zutun musst ist das borad selbst auf 100% zu bringen und alle grafiken die du da hast in den board header die memberbox so anpassen das es dazu passt und fertig :)

ich nicht viel aufwand bei dem was du da hast

Share this post


Link to post

Geht so.

Hast du dir den HTML Code angeschaut? Der SChriftzug im Hintergrund soll sich nicht widerholen und daher kann er nur als Hitnergrund einer Zelle abgelegt werden. Die Navigationsbalken sollen 100% der Breite einnehmen, der Hedaer aber nur 95%. Das ganze muss also in eine grosse Tabelle rein.

Wie baue ich nun eine solche, grosse Tabelle am einfachsten ein?

Kann mich gerade nicht so ausdrücken... <_< sorry. :)

antihero

Share this post


Link to post

Hi also teste mal den code hier du musst aber alle abweichnugen in der memberbar ändern.

wenn du es drin hast kannste ja mal nen link geben oder einen screenshot

hier der Code für den Boardheader

<!--Boardheader-->

<td style='background-color:#454545;height:19px;'><table style='height:19px;background-color:#454545;' width="90%" border="0" align="center" cellpadding="0" cellspacing="0">

        <tr> 

          <td style='width:90%;text-align:left;'><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong>HOME 

            FOREN EVENTS ABOUT HILFE MITGLIEDER CONTACT</strong></font></td>

    <td style='width:10%;text-align:right;'><img src="images/cross_middle.gif" width="122" height="19"></td>


        </tr>

      </table></td>

  </tr>

  <tr> 

    <td style='background-color:#ABABAB;height:13px;'><table style='height:13px;background-color:#ABABAB;width:90%' width="90%" border="0" align="center" cellpadding="0" cellspacing="0">

        <tr> 

          <td style='width:90%;text-align:right;'><% MEMBERBAR %></td>

    <td style='width:10%;text-align:right;'><img src="images/cross_bottom.gif" width="122" height="13"></td>

        </tr>


      </table>
und hier der Code für den (Wrapper)
<!--Wrapper-->

   

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> 

<title><% TITLE %></title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<% GENERATOR %> 

<% CSS %> 

<% Javascript %> 

<script language="Javascript" type="text/Javascript">

<!--

function MM_jumpMenu(targ,selObj,restore){ //v3.0

  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

  if (restore) selObj.selectedIndex=0;

}

//-->

</script>

</head>

<body>

<table width='100%' border="0" cellspacing="0" cellpadding="0" style='height:100%;width:100%;'>

  <tr> 

    <td style='height:76px;'>

	<table style='background-image:url(images/header.gif);background-repeat:no-repeat;height:76px;background-position:bottom right;background-color:#F6F6F6;' width="90%" border="0" align="center" cellpadding="0" cellspacing="0">

        <tr>


          <td style='text-align:right;vertical-align:bottom;'><img src="images/rays.gif" width="396" height="94"></td>

        </tr>

      </table></td>

  </tr>

  <tr> 

    <% BOARD HEADER %>

	</td>

  </tr>

  <tr>

    <td><table style='height:100%;background-position:center;background-color:#F6F6F6;' width="90%" border="0" align="center" cellpadding="0" cellspacing="0">

        <tr> 

          <td><div align="center">

    <% NAVIGATION %> 

<% BOARD %> 

<% STATS %> 

<% COPYRIGHT %>

</div></td>

        </tr>

      </table></td>

  </tr>


</table>

</body>

</html>

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×