Header Html

Für Fragen und Diskussionen zum Layout und Design, Templates und Stylesheets sowie Themes
Post Reply
L4d3_D4t3n
Forum Members
Forum Members
Posts: 15
Joined: Fri Apr 18, 2008 9:37 am

Header Html

Post by L4d3_D4t3n »

Hallo CMS Gemeinde

Kann mir bitte einer helfen diesen Header Code richtig in mein Templates einzubringen. ???





///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////













   
   
   

             











//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


















{* Change lang="en" to the language of your site *}



{sitename} - {title}
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}


{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}


{literal}

=b){nw=b+"px";}if(w



#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}


{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}





{* The above JavaScript is required for CSSMenu to work in IE *}







   {* start accessibility skip links *}
   
     {anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}
     {anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}
   
   {* end accessibility skip links *}


   
   {* Horizontal ruler that is hidden for visual browsers by CSS *}


  {* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" *}
 
          {cms_selflink dir="start" text="$sitename"}
 
 
  {* End Header *}


     {* Start Navigation *}
     
        Navigation
        {menu template='cssmenu.tpl'}
     
     
     {* End Navigation *}


  {* Start Search *}
 
         {search}
 
  {* End Search *}


  {* Start Breadcrumbs *}
 
       {breadcrumbs starttext='' root='Home' delimiter='»'}
 
 
  {* End Breadcrumbs *}


  {* Start Content (Navigation and Content columns) *}
 

     {* Start Sidebar *}
     
        {content block='Sidebar'}
     
     {* End Sidebar *}

     {* Start Content Area *}
     
        {print showbutton=true script=true}
        {title}
        {content}


        {* Start relational links *}


{anchor anchor='main' text='» nach oben'}

{* End relational links *}

     
     
 {* End Content Area *}


 
  {* End Content *}

  {* Start Footer. Edit the footer in the Global Content Block called "footer" *}
 
{global_content name='footer'}
   
  {* End Footer  *}
{* end pagewrapper *}

.


NaN

Re: Header Html

Post by NaN »

Entschuldige die blöde Frage, aber wo liegt das Problem?
Ich hätte es dort im Template eingefügt eingefügt wo steht
{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" *}
D.h. ich hätte es jetzt so gemacht:

Code: Select all

<!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" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}

<head>

<title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}


{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}


{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
   var nw="auto",w=document.documentElement.clientWidth;
   if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}


<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
{* The above JavaScript is required for CSSMenu to work in IE *}

</head>

</__body>

<div id="pagewrapper">

    {* start accessibility skip links *}
    <ul class="accessibility">
      <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
      <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
    </ul>
    {* end accessibility skip links *}


    <hr class="accessibility" />
    {* Horizontal ruler that is hidden for visual browsers by CSS *}


   {* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" *}
   <div id="header">


<!-- header -->
<table id="Tabelle_01" width="960" height="200" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td colspan="3">
         <img src="/images/header/header_01.jpg" width="960" height="103" alt=""></td>
   </tr>
   <tr>
      <td rowspan="2">
         <img src="/images/header/header_02.jpg" width="487" height="97" alt=""></td>
      <td>
         
    <!-- header -->
    <a href="http://webmaster.gekkoos.de/" target="_blank"><img src="http://www.gekkoos.de/werbemittel/werbeflatrate/wf_banner468x60_001.gif" width="466" height="59" border="0" alt="Gekkoos Crossmedia"></a>
    <!-- header -->

              <td rowspan="2">
         <img src="/images/header/header_04.jpg" width="7" height="97" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="http:/images/header/header_05.jpg" width="466" height="38" alt=""></td>
   </tr>
</table>
<!-- header -->


   <hr class="accessibility" />
   </div>
   {* End Header *}


      {* Start Navigation *}
      <div id="menu_vert">
         <h2 class="accessibility">Navigation</h2>
         {menu template='cssmenu.tpl'}
      <hr class="accessibility" />
      </div>
      {* End Navigation *}


   {* Start Search *}
   <div id="search">
          {search}
   </div>
   {* End Search *}


   {* Start Breadcrumbs *}
   <div class="breadcrumbs">
        {breadcrumbs starttext='' root='Home' delimiter='»'}
   <hr class="accessibility" />
   </div>
   {* End Breadcrumbs *}


   {* Start Content (Navigation and Content columns) *}
   <div id="content">

      {* Start Sidebar *}
      <div id="sidebar" class="hascontent">
         {content block='Sidebar'}
      </div>
      {* End Sidebar *}

      {* Start Content Area *}
      <div id="main">
         <div style="float: right;">{print showbutton=true script=true}</div>
         <h2>{title}</h2>
         {content} <br />

         {* Start relational links *}
    <div class="hr"></div>
    <div class="right49">
       <p>{anchor anchor='main' text='» nach oben'}</p>
    </div>
    {* End relational links *}

      <hr class="accessibility" />
      </div>
     {* End Content Area *}


   </div>
   {* End Content *}

   {* Start Footer. Edit the footer in the Global Content Block called "footer" *}
   <div id="footer">
{global_content name='footer'}
   </div>  
   {* End Footer  *}
</div>{* end pagewrapper *}

<img src=“http://www.youweb24.de/cgi-bin/activate.cgi“
width=“1“ height=“1“ border=“0“>.

<__body>
</__html>
L4d3_D4t3n
Forum Members
Forum Members
Posts: 15
Joined: Fri Apr 18, 2008 9:37 am

Re: Header Html

Post by L4d3_D4t3n »

So dachte ich das anfangs auch aber leider ist dann die ganze Seite verzogen.

Kann es sein das Ich in Stylesheet, was ändern muss?


wie bei heder.jpg oder so..




/*****************
browsers interpret margin and padding a little differently,
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
}

/*
Set initial font styles
*/
body {
  text-align: left;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 75.01%;
  line-height: 1em;
}

/*
set font size for all divs,
this overrides some body rules
*/
div {
  font-size: 1em;
}

/*
if img is inside "a" it would have
borders, we don't want that
*/
img {
  border: 0;
}

/*
default link styles
*/
/* set all links to have underline and bluish color */
a,
a:link
a:active {
  text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
  background-color: inherit;
  color: #18507C;
}

a:visited {
  text-decoration: underline;
  background-color: inherit;
  color: #18507C;                /* a different color can be used for visited links */
}


/* remove underline on hover and change color */
a:hover {
  text-decoration: none;
  background-color: #CCD8F2;
  color: #385C72;
}

/*****************
basic layout
*****************/
body {
    font-family:tahoma,Helvetica,sans-serif;;
    margin-top:0px;
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    background-color: #4A809C;
    background-repeat : repeat;

}

/* center wrapper, min max width */
div#pagewrapper {
  margin: 0 auto;    /* this centers wrapper */
  max-width: 80em; /* IE wont understand these, so we will use javascript magick */
  min-width: 60em;
  background-color: #fff;
  color: black;
}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it
*/

div#header {
  height: 200px; /* adjust according your image size */
  background: #f1f1f1;         
}

div#header h1 a {
/* you can set your own image here */
  background: #f1f1f1 url(/images/header.jpg);
  display: block;
  height: 200px;            /* adjust according your image size */
  text-indent: -999em;  /* this hides the text */
  text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#search {
  float: right;
  width: 23em;    /* enough width for the search input box */
  text-align: right;
  padding: 0.6em 0 0.2em 0;
  margin: 0 1em;
}

div.breadcrumbs {
  padding: 1em 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
  font-size: 90%;            /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
  margin: 0 1em;              /* css shorthand rule will be opened to be "0 1em 0 1em" */
  border-bottom: 1px dotted #000;
}

div.breadcrumbs span.lastitem {
  font-weight:bold;
}

div#content {
  margin: 1.5em auto 2em 0; /* some air above and under menu and content */
  background-image:url(/images/contentbg.gif);
}

div#main {
  margin-left: 15%; /* this will give room for sidebar to be on the left side, make sure this space is bigger    than sidebar width */
  margin-right: 21%; /* and some air on the right */
}


div#sidebar {
  float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
  width: 0%;    /* sidebar width, if you change this please also change #main margins */
  display: inline;  /* FIX ie doublemargin bug */
  margin-left: 0;
}

/* if sidebar doesnt include menu but content add class="hascontent" */
div#sidebar.hascontent {
  padding: 0 1%;
  width: 0%;  /* make width smaller if there's padding, or it will get too wide for the floated divs in IE */
}

div#footer {
  clear:both;      /* keep footer below content and menu */
  color: #5f9ea0;
  background-color: #dcdcdc; /* same bg color as in header */
}

div#footer p {
  font-size: 0.8em;
  padding: 1.5em;      /* some air for footer */
  text-align: center; /* centered text */
  margin:0;
}

div#footer p a {
  color: #fff; /* needed becouse footer link would be same color as background otherwise */
}

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
  height: 1px;
  margin: 1em;
  border-bottom: 1px dotted black;
}

/* relational links under content */
div.left49 {
  float: left;
  width: 49%;  /* 50% for both left and right might lead to rounding error on some browser */
}

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
}




/********************
CONTENT STYLING
*********************/

/* HEADINGS */
div#content h1 {
  font-size: 2em;  /* font size for h1 */
  line-height: 1em;
  margin: 0;
}
div#content h2 {
  color: #294B5F;
  font-size: 1.5em;
  text-align: left;
/* some air around the text */
  padding-left: 0.5em;
  padding-bottom: 1px;
/* set borders around header */
  border-bottom: 1px solid #4A809C;
  text-align: left; 
  border-left: 1.1em solid #4A809C;
  line-height: 1.5em;
/* and some air under the border */
  margin: 0 0 0.5em 0;
}
div#content h3 {
  color: #294B5F;
  font-size: 1.3em;
  line-height: 1.3em;
  margin: 0 0 0.5em 0;
}
div#content h4 {
  color: #294B5F;
  font-size: 1.2em;
  line-height: 1.3em;
  margin: 0 0 0.25em 0;
}
div#content h5 {
  font-size: 1.1em;
  line-height: 1.3em;
  margin: 0 0 0.25em 0;
}
h6 {
  font-size: 1em;
  line-height: 1.3em;
  margin: 0 0 0.25em 0;
}
/* END HEADINGS */

/* TEXT */
p {
  font-size: 1em;
  margin: 0 0 1.5em 0;  /* some air around p elements */
  line-height:1.4em;
  padding: 0;
}
blockquote {
  border-left: 10px solid #ddd;
  margin-left: 10px;
}
pre {
  font-family: monospace;
  font-size: 1.0em;
}
strong, b {
/* explicit setting for these */
  font-weight: bold;
}
em, i {
/* explicit setting for these */
  font-style:italic;
}

/* Wrapping text in tags. Makes CSS not validate */
code, pre {
white-space: pre-wrap;      /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;      /* Internet Explorer 5.5+ */
font-family: "Courier New", Courier, monospace;
font-size: 1em;
}

pre {
  border: 1px solid #000;  /* black border for pre blocks */
  background-color: #ddd;
  margin: 0 1em 1em 1em;
  padding: 0.5em;
  line-height: 1.5em;
  font-size: 90%;  /* smaller font size, as these are usually not so important data */
}

/* END TEXT */

/* LISTS */
div#main ul,
div#main ol,
div#main dl {
  font-size: 1.0em;
  line-height:1.4em;
  margin: 0 0 1.5em 0;
}
div#main ul li,
div#main ol li {
  margin: 0 0 0.25em 3em;
}

div#dl dt {
  font-weight: bold;
  margin: 0 0 0.25em 3em;
}
div#dl dd {
  margin: 0 0 0 3em;
}
/* END LISTS */
antibart
Power Poster
Power Poster
Posts: 1162
Joined: Sun Aug 17, 2008 9:29 am

Re: Header Html

Post by antibart »

Naja klar ... du mischst hier zwei Templateschnipsel zusammen, die auch noch zwei verschiedene Techniken benutzen (Oben Tabellen, der Rest Divs) ...

... Da musst zumindest die Dimensionen der "Restseite" deinem Tabellenheader anpassen:

Zum Beispiel:

Dein Header ist 960px breit, aber der #pagewrapper:

Code: Select all

max-width: 80em; /* IE wont understand these, so we will use javascript magick */
min-width: 60em;
Dh: dein pagewrapper sollte ebenfalls 960px breit sein ... aber ich befürchte, das wird nicht die letzte Änderung bleiben.
L4d3_D4t3n
Forum Members
Forum Members
Posts: 15
Joined: Fri Apr 18, 2008 9:37 am

Re: Header Html

Post by L4d3_D4t3n »

shit ich weiß nicht was du meinst...grummel kann mir den keiner das anpassen... ???
NaN

Re: Header Html

Post by NaN »

L4d3_D4t3n wrote: shit ich weiß nicht was du meinst...grummel kann mir den keiner das anpassen... ???
Deine Tabelle ist 960 Pixel breit.
Steht so in Deinem Codeschnipsel:

Code: Select all

<table id="Tabelle_01" width="960" height="200" border="0" cellpadding="0" cellspacing="0">
Der Rest der Seite ist aber 80em breit.

Steht so im Stylesheet:

Code: Select all

/* center wrapper, min max width */
div#pagewrapper {
   margin: 0 auto;     /* this centers wrapper */
   max-width: 80em; /* IE wont understand these, so we will use javascript magick */
   min-width: 60em;
   background-color: #fff;
   color: black;
}
Jetzt musst Du nur noch eins und eins zusammenzählen.
L4d3_D4t3n
Forum Members
Forum Members
Posts: 15
Joined: Fri Apr 18, 2008 9:37 am

Re: Header Html

Post by L4d3_D4t3n »

was sind 80em  ??? sry ich hatte den stylesheet so übernommen ::)

soll ich jetzt dort 960 eintragen  :o
antibart
Power Poster
Power Poster
Posts: 1162
Joined: Sun Aug 17, 2008 9:29 am

Re: Header Html

Post by antibart »

L4d3_D4t3n wrote: shit ich weiß nicht was du meinst...grummel kann mir den keiner das anpassen... ???
Hier gibt es eher "Hilfe zur Selbsthilfe" ... wenn Du einen kommerziellen Auftrag zur Template-Codierung vergeben möchtest, geht das unter

http://forum.cmsmadesimple.org/index.ph ... ,47.0.html
L4d3_D4t3n wrote: sry ich hatte den stylesheet so übernommen ::)
.... aber das HTML-Template durch den neuen Header modifiziert. Also stimmen auch das stylesheets nicht mehr genau mit dem Template überein.
L4d3_D4t3n wrote: was sind 80em  ???
Wichtiger: 80em sind NICHT 960px (BTW: 960px entsprächen etwa 60em ... :))

Das Ganze ist einfachste Mathematik. Also ein paar Grundrechenarten und - wenn möglich - vermeiden "Äpfel und Birnen" durcheinanderzubringen.

... das ist, als wenn du eine Kommode aus Holz baust, die insgesamt 60 cm breit ist und 3 gleichgröße Schubladenlöcher a 50 cm haben soll . Du wirst, um das zu bewerkstelligen, ein Lineal oder Zollstock nehmen und bündig drei Löcher ausmessen und aussägen , die alle 50 cm  haben. Auf dein Template bezogen hätte die Kommode zwar das Maß 60 cm, aber die  Schubladen ein Maß von ZB 27 inch / Zoll. Also sowohl das falsche Maß als auch unterschiedliche Maßeinheiten. Ergebnis: die Kommode sieht unordentlich aus, die Schubladenlöcher  sind zu groß.

em, px, pt, % sind einfach nur unterschiedliche Maßeinheiten. em (equal M) und pt (Punkt -  für schriftgrößen) sind relative Maßeinheiten und haben ihren Ursprung im Printbereich, px (pixel=Bildschirmpunkte) ist speziell für die Ausgabe auf dem Computerbildschirm konzipiert und daher für absolute Dimensionen auf Webseiten (gemessen an der Bildschirmauflösung) gut geeignet. % (Prozent) ist eine ebenfalls relative, dynamische Maßeinheit, die sich prozentual am zur Verfügung stehenden Platz orientiert - einfach ausgedrückt..

Es ist nicht grundsätzlich verboten, unterschiedliche Maßeinheiten auf einer Website zu benutzen. Nur sollte es Sinn ergeben und und man sollte wissen, was man tut oder was man damit bezwecken will.

Wenn du eine Tabelle als Header benutzt, die 960px breit ist, sollte der Rest deines Layouts eben rechnerisch zu dieser Breite passen. Da liegt es einfach nahe, auch die restlichen Dimensionen in Pixel anzugeben.

Also ja:

#pagewrapper { width:960px;}

Noch besser wäre natürlich, Du würdest auch deinen Header in css gestalten, statt in Tabellen. Aber das ginge jetzt für den Anfang vielleicht einen Schritt zu weit.

...

...
Last edited by antibart on Sun May 10, 2009 11:25 am, edited 1 time in total.
Post Reply

Return to “Layout und Design”