Probleme beim Mappen

Ltd.Lupo · #1 02.01.08, 16:13

Hallo Leute

Bin neu hier im Forum und möchte an dieser Stelle erst einmal recht herzlich grüßen.

Folgendes Problem:

Ich habe mir ein kostenlos zu Verfügung stehendes Template gezogen und wollte bzw. will dieses mit TemplaVoila mappen.

Soweit so gut, nach diversen Videotutorials bin ich eigentlich gut voran gekommen..., dass heisst was man für den Anfang mit gut voran gekommen bezeichnen kann.

Über dem Wizard klappt der Anfang des Mappens...Body, Content und Navigationsmenü funktioniert einwandfrei! Auch das mappen des Headers bzw. Logo funktioniert.

Jetzt zum eigentlichen Problem:

Code:

<div id="content">

beinhaltet

Code:

<div id="column1">

, drei Boxen die am rechten Seitenrand (Sitebar?) dargestellt werden

sowie

Code:

<div id="column2">

, der eigentliche Text der Seite. Hier bekomme ich ein Problem beim Mappen.

Es gelingt mir nicht das ganze so zu mappen das am Ende etwas brauchbares dabei heraus kommt oder sagen wir ich am Ende etwas in die Boxen eintragen kann!

Ich habe hier mal den ganzen html Code der Vorlage

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title>template: home</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

  <!-- **** layout stylesheet **** -->
  <link rel="stylesheet" type="text/css" href="style/style.css" />

  <!-- **** colour scheme stylesheet **** -->   <link rel="stylesheet" type="text/css" href="style/green.css" />

</head>

<body>
  <div id="main">
    <div id="links">
      <!-- **** INSERT LINKS HERE **** -->
      <a href="#">another link</a> | <a href="#">another link</a> | <a href="#">another link</a> | <a href="#">another link</a>
    </div>
    <div id="logo"><h1>TICK_TOCK_PRO</h1><h2>&quot;You can put a slogan here if you want to&quot;</h2></div>
    <div id="menu">
      <ul>
        <!-- **** INSERT NAVIGATION ITEMS HERE (use id="selected" to identify the page you're on **** -->
        <li><a id="selected" href="#">home</a></li>
        <li><a href="#">page 1</a></li>
        <li><a href="#">page 2</a></li>
        <li><a href="#">page 3</a></li>
        <li><a href="#">contact</a></li>
      </ul>
    </div>
    <div id="content">
      <div id="column1">
        <div class="sidebaritem">
          <!-- rounded corners - top **** -->
          <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
          <h1>latest news</h1>
          <!-- **** INSERT NEWS ITEMS HERE **** -->
          <h2>01.09.2006</h2>
          <p>This is where you can put your latest news.</p>
          <p><a href="#">read more ...</a></p>
          <p></p>
          <p></p>
          <h2>01.09.2006</h2>
          <p>This is where you can put your latest news.</p>
          <p><a href="#">read more ...</a></p>
          <!-- rounded corners - bottom **** -->           <div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
        </div>
        <div class="sidebaritem">
          <!-- rounded corners - top **** -->
          <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
          <h1>additional links</h1>
          <div class="sbilinks">
            <!-- **** INSERT ADDITIONAL LINKS HERE **** -->             <ul>
              <li><a href="http://www.opendesigns.org">open designs</a></li>
              <li><a href="http://www.w3schools.com/xhtml/default.asp">learn XHTML</a></li>
              <li><a href="http://www.w3schools.com/css/default.asp">learn CSS</a></li>
              <li><a href="http://www.mozilla.com/firefox">get firefox</a></li>
            </ul>
          </div>
          <!-- rounded corners - bottom **** -->
          <div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
        </div>
        <div class="sidebaritem">
          <!-- rounded corners - top **** -->
          <div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
          <h1>other information</h1>
          <!-- **** INSERT OTHER INFORMATION HERE **** -->           <p>
            This space can be used for additional information such as a contact phone number, address
            or maybe even a graphic.
          </p>
          <!-- rounded corners - bottom **** -->
          <div class="rbottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
        </div>
      </div>
      <div id="column2">
        <h1>introduction</h1>
        <!-- **** INSERT PAGE CONTENT HERE **** -->
        <p>
          tick_tock_pro is a 'refined' version of the previously released 'tick_tock' design.
          The template is a little smoother, refined and polished, using gradient graphics
          for the menu and css curved edges for the sidebar.
        </p>
        <p>
          The css curved edges are based on <a href="http://www.html.it/articoli/nifty/index.html">
          Nifty Corners: rounded corners without images By Alessandro Fulciniti</a>.
        </p>
        <p>
          This standards compliant website template is released as an 'open source' design
          (under the <a href="http://creativecommons.org/licenses/by/2.5">Creative Commons
          Attribution 2.5</a> licence), which means that you are free to download and use it
          for anything you want (including modifying and amending it). The logo image
          is from a digital photograph taken by me, so there are no issues with copyright
          there. All I ask is that you leave the 'design by dcarter' link in the footer of
          the template, but other than that...
        </p>
        <p>
          This template is written entirely in XHTML 1.1 and CSS, and can be validated
          using the links in the footer.
        </p>
        <p>
          You can view my other 'open source' template designs
          <a href="http://www.dcarter.co.uk/templates.html">here</a>.
        </p>
        <h1>alternative colour schemes</h1>
        <p>Here are some alternative colour schemes for anyone who doesn't like blue:</p>
        <div id="colour">
          <a href="index_green.html"><span class="green">green</span></a>
          <a href="index_purple.html"><span class="purple">purple</span></a>
          <a href="index_orange.html"><span class="orange">orange</span></a>
          <a href="index.html"><span class="blue">blue</span></a>
        </div>
        <h1>example elements</h1>
        <h2>Bold Text</h2>
        <p><strong>this is an example of bold text</strong></p>
        <h2>Italics</h2>
        <p><i>this is an example of italic text</i></p>
        <h2>Links</h2>
        <p><a href="index.html">this is an example link</a></p>
        <h2>Block Quotes</h2>
        <blockquote>
          <p>
            Some blockquote text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua.
          </p>
        </blockquote>
        <h2>Unordered Lists</h2>
        <ul>
          <li>list item 1</li>
          <li>list item 2</li>
        </ul>
        <br />
        <h2>Ordered Lists</h2>
        <ol>
          <li>list item 1</li>
          <li>list item 2</li>
        </ol>
        <br />
        <h2>Images</h2>
        <p>images can be placed on the left, in the center or on the right.</p>
        <span class="left"><img src="style/graphic.jpg" alt="example graphic" /></span>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur.
        </p>
        <span class="center"><img src="style/graphic.jpg" alt="example graphic" /></span>
        <span class="right"><img src="style/graphic.jpg" alt="example graphic" /></span>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur.
        </p>
      </div>
    </div>
    <div id="footer">
      copyright &copy; 2006 your name | <a href="#">email@emailaddress</a> | <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.dcarter.co.uk">design by dcarter</a>
    </div>
  </div>
</body>
</html>

sowie das Stylesheet gepostet:

Code:

/* global */
html{height: 100%;}

body
{ font-family: verdana, arial, sans-serif;
  padding: 0px;
  margin: 0px;
  font-size: .68em;
}

p
{ margin: 0px;
  padding: 0px 0px 16px 0px;
  line-height: 1.7em;
}

h1
{ font-family: arial, sans-serif;
  font-size: 108%;
  letter-spacing: .1em;
}

h2
{ margin: 0px;
  padding: 0px 0px 4px 0px;
  font-size: 100%;
}

img{border: 0px;}

a{outline: none;}

/* image positioning - left, right and center */
.left
{ float: left; 
  padding: 0px 8px 0px 0px;
}

.right
{ float: right; 
  padding: 0px 0px 0px 8px;
}

.center
{ display: block;
  text-align: center;
  margin: 0 auto;
}

/* block quote */
blockquote
{ margin: 20px 0px 20px 0px; 
  padding: 10px 20px 0px 20px;
  border-left: 8px solid;
}

/* unordered list */
ul
{ margin: 8px 0px 0px 16px;
  padding: 0px;
}

ul li
{ list-style-type: square;
  margin: 0px 0px 11px 0px; 
  padding: 0px;
}

/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
  padding: 0px;
}

ol li
{ margin: 0px 0px 11px 0px; 
  padding: 0px;
}

/* margin lefts / margin rights - to centre content */
#main, #links, #footer, #logo, #menu, #content
{ margin-left: auto; 
  margin-right: auto;
}

/* main container */
#main{width: 780px;}

/* links above the logo / footer */
#links, #footer
{ width: 726px;
  height: 20px;
  font-size: 88%;
  text-transform: uppercase;
  padding: 8px 21px 0px 19px;
}

#links{text-align: right;}

#footer
{ text-align: center; 
  border-top: 2px solid;
}

#links a, #footer a, #links a:hover, #footer a:hover{text-decoration: none;}

/* logo */
#logo
{ width: 766px;
  height: 125px;
  border-top: 2px solid;
  border-bottom: 5px solid;
}

#logo h1, #logo h2
{ margin: 0px;
  letter-spacing: .2em;
}

#logo h1
{ padding: 28px 0px 0px 139px;
  font-size: 160%;
}

#logo h2
{ font-family: arial, sans-serif;
  padding: 5px 0px 0px 139px;
  font-size: 108%;
}

/* navigation menu */
#menu
{ height: 31px;
  width: 766px;
  margin-top: -31px;
  position: relative;
}

#menu ul{margin: 0px auto;} 

#menu li
{ float: left; 
  margin: 0px 5px 0px 0px; 
  padding: 0px;
  list-style: none;
} 

#menu li a 
{ display: block; 
  float: left; 
  height: 22px;
  text-decoration: none; 
  padding: 6px 19px 2px 19px;
  text-transform: uppercase;
  font-size: 88%;
  border-bottom: 1px solid;
} 

#menu li a:hover, #menu li a#selected, #menu li a#selected:hover
{ height: 22px;
  padding: 6px 19px 2px 19px;
  border: 0px;
} 

/* main content */
#content
{ width: 766px;
  overflow: hidden;
} 

/* column 1 - contains sidebar items */
#column1
{ width: 198px;
  margin: 22px 0px 0px 0px;
  float: right;
  padding: 19px 19px 15px 19px;
}

.sidebaritem
{ text-align: left;
  width: 184px;
  float: left;
  margin: 0px 0px 29px 4px;
}

.sidebaritem h1, .sidebaritem h2, .sidebaritem p{margin: 0px 10px 0px 10px}

.sidebaritem h1
{ font-weight: normal;
  padding: 8px 0px 16px 0px;
  text-transform: uppercase;
}

.sidebaritem p
{ line-height: 16px; 
  padding: 0px 0px 8px 0px;
}

.sidebaritem a, .sidebaritem a:hover
{ padding: 0px 0px 2px 19px;
  text-decoration: none;
}

.sbilinks ul{margin: 0px 0px 0px 10px;}

.sbilinks li
{ list-style: none; 
  padding: 0px 0px 0px 0px; 
}

.sbilinks li a, .sbilinks li a:hover
{ height: 16px;
  text-decoration: none; 
  width: 149px;
} 

/* column 2 - page content */
#column2
{ text-align: justify;
  width: 508px;
  float: left;
  padding: 2px 3px 15px 19px;
}

#column2 h1
{ font-family: arial, sans-serif;
  padding: 16px 0px 5px 0px; 
  margin: 0px 0px 12px 0px; 
  border-bottom: 1px solid;
  font-size: 150%;
  text-transform: uppercase;
  font-weight: normal;
}

#column2 a, #column2 a:hover
{ padding: 0px 0px 2px 0px;
  text-decoration: none;
  border-bottom: 1px dashed;
}

#column2 a:hover{border-bottom: 1px solid;}

/* Based on Nifty Corners: rounded corners without images */
/* By Alessandro Fulciniti */
/* http://www.html.it/articoli/nifty/index.html */
.rtop, .rbottom{display: block;}

.rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
.rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4
{ display: block;
  height: 1px;
  overflow: hidden; 
}

.r1{margin: 0 5px}

.r2{margin: 0 3px}

.r3{margin: 0 2px}

.rtop .r4, .rbottom .r4
{ margin: 0 1px;
  height: 2px
}

/* additional colour scheme selections */
#colour{margin: 0px 0px 20px 0px;}

#colour a, #colour a:hover{border: 0px;}

.blue
{ background: #414141 url(blue.png) no-repeat left center;
  color: #109CEF;
  padding: 0px 40px 0px 20px;
}

.green
{ background: #414141 url(green.png) no-repeat left center;
  color: #94C65A;
  padding: 0px 40px 0px 20px;
}

.purple
{ background: #414141 url(purple.png) no-repeat left center;
  color: #CE5AEF;
  padding: 0px 40px 0px 20px;
}

.orange
{ background: #414141 url(orange.png) no-repeat left center;
  color: #FF9C21;
  padding: 0px 40px 0px 20px;
}

Wer kann mir helfen?

Vielen Dank vorab!

Ltd.Lupo

Vincent · #2 11.01.08, 20:15

Wie mapst du genau column1 und column2

Du solltest Sie so mappen:

Mapping Type: Element
Editing Type: Content Elements

Der Rest vom Mapping kann leer sein

Gruß aus der IT-Stadt Karlsruhe

Vincent

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht	Thema bewerten
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln	Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Probleme beim FE-Rendering	mjuergens	TYPO3 4.x Fragen und Probleme	2	19.05.08 07:44
Gelöst Probleme beim Mapping	Querxom	TemplaVoila	1	16.03.08 14:38
Eigenartiges Problem beim Mappen	Witti	TemplaVoila	4	16.01.08 17:12
Probleme beim Mappen -> Datenstruktur zuweisen	Typo3-Anfänger	TemplaVoila	2	02.01.08 07:29
Add fehlt beim mappen	zimtstern3	TemplaVoila	2	19.04.07 13:21

Suche

Userpanel

Probleme beim Mappen