Suche
Teilen
startseite » forum

Hilfe beim einbindes des Contents.

  • lost lost
    Padawan
    0 x
    38 Beiträge
    0 Hilfreiche Beiträge
    12. 11. 2010, 10:53

    Liebe Typo3.net Community,

    ich bin noch sehr neu im bereich Typoscript und Typo3. Mein jetziges wissen habe ich aus Video Tutorials und einen Typo3 einsteiger Buch erlangt. Nun habe ich Folgendes Problem:

    -Egal wie ich es versuche, ich bekomme keinen Inhalt angezeigt. Benutze eine HTML Vorlage in der ich Marker verwende. Hier mal mein Typo3 Setup und meine HTML Vorlage:

    1. page = PAGE
    2.  
    3. page.includeCSS {
    4.     file10 = fileadmin/template/css/main_screen.css
    5.     file10.media = screen
    6. }
    7.  
    8.     page.10 = TEMPLATE
    9.     page.10 {
    10.         template = FILE
    11.         template.file = fileadmin/template/index.html
    12.         workOnSubpart = DOCUMENT_BODY
    13.         subparts {
    14.         INHALT < styles.content.get
    15.         }
    16.  
    17.         marks.NAVIGATION = HMENU
    18.         marks.NAVIGATION {
    19.                wrap = <ul> | </ul>
    20.                1 = TMENU
    21.                1.NO.linkWrap = <li> | </li>
    22.                1.ACT.linkWrap = <li><b> | </b></li>
    23.         }
    24.  
    25.  
    26.         marks.FOOTER = TEXT
    27.         marks.FOOTER.value = Impressum   |   Drucken
    28.  
    29. }

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    3.   <head>
    4.     <title>Urbanrechtsanwälte</title>
    5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    6.     <link rel="stylesheet" type="text/css"
    7.           href="fileadmin/template/css/main_screen.css" media="screen">
    8.   </head>
    9.   <body><!-- ###DOCUMENT_BODY### -->
    10.       <div id="wrap">
    11.           <div id="header_1">
    12.               <img src="fileadmin/template/img/koeln_urban_rechtsanwaelte.png" />
    13.           </div>
    14.           <div id="header_2">
    15.               <img src="fileadmin/template/img/header_images_01.jpg"/>
    16.           </div>
    17.           <div id="navigation"><a name="navigation" id="navigation"></a>
    18.               ###NAVIGATION###
    19.           </div>
    20.           <div id="content">
    21.               ###INHALT###
    22.           </div>
    23.           <div id="footer">
    24.               <div id="footer_text">
    25.               ###FOOTER###
    26.               </div>
    27.           </div>
    28.       </div>
    29.       <!-- ###DOCUMENT_BODY### -->
    30.   </body>
    31. </html>

    Was mache ich denn nun falsch? Warum wird mein Inhalt nicht angezeigt?

    Vielen herzlichen Dank für eure Hilfe

    MFG
    Aless

  • etux etux
    Jedi-Meister
    0 x
    360 Beiträge
    13 Hilfreiche Beiträge
    12. 11. 2010, 16:52

    [quote="lost"]Und von daher ist das ganze nur auf meinem Rechner hier und so kann ich sie euch nicht live zeigen, aber ich mache jetzt mal ein paar fotos.
    [/quote]
    Ein Test-Case könntest Du aber schon schnell zusammen bauen und hoch laden.
    Oder zumindest im Browser ausgegebenen Quellcode plus die CSS-Datei posten, was ja schon fast ein Test-Case wäre.

    Aus der CSS-Datei von oben kommt der rechte Border nicht.

    Die Hintergrund- und Schriftfarben muss Du über li:hover der ersten Ebene definieren. Das Element was die Hintergrundfarbe trägt, muss ein Block-Element sein und keine Margins haben. Bzw. sein Eltern-Element keine Paddings.
    Steht aber alles schon in meinem Vorpost.

  • lost lost
    Padawan
    0 x
    38 Beiträge
    0 Hilfreiche Beiträge
    15. 11. 2010, 10:07

    Tut mir echt leid nur ich weiss noch nicht einmal was ein Test Case ist, bzw. was genau ich hochladen sollte..

    Der im Browser ausgegebene Quellcode lautet wie folgt:

    1. <!DOCTYPE html
    2. 	PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    5.  
    6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    7. <!-- 
    8. 	This website is powered by TYPO3 - inspiring people to share!
    9. 	TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
    10. 	TYPO3 is copyright 1998-2010 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
    11. 	Information and contribution at http://typo3.com/ and http://typo3.org/
    12. -->
    13.  
    14.  
    15.  
    16. <title>Home</title>
    17. <meta name="generator" content="TYPO3 4.4 CMS">
    18.  
    19. <link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_670d0f71b2.css?1289557450" media="all">
    20. <link rel="stylesheet" type="text/css" href="fileadmin/template/css/main_screen.css?1289809326" media="screen">
    21.  
    22.  
    23. <script src="typo3temp/javascript_93077bb238.js?1289480786" type="text/javascript"></script>
    24.  
    25.  
    26.  
    27. </head>
    29.  
    30.       <div id="wrap">
    31.           <div id="header_1">
    32.               <img src="fileadmin/template/img/koeln_urban_rechtsanwaelte.png" />
    33.           </div>
    34.  
    35.           <div id="header_2">
    36.               <img src="fileadmin/template/img/header_images_01.jpg"/>
    37.           </div>
    38.           <div id="navigation"><a name="navigation" id="navigation"></a>
    39.               <ul><li> <a href="index.php?id=2" onfocus="blurLink(this);"  >Kanzlei</a> </li><li> <a href="index.php?id=3" onfocus="blurLink(this);"  >Tätigkeitsbereiche</a> </li><li> <a href="index.php?id=4" onfocus="blurLink(this);"  >Rechtsanwältin</a> </li><li> <a href="index.php?id=5" onfocus="blurLink(this);"  >Veröffentlichungen</a> </li><li> <a href="index.php?id=6" onfocus="blurLink(this);"  >Kontakt</a> </li></ul>
    40.  
    41.           </div>
    42.           <div id="content">
    43.  
    44. 	<!--  CONTENT ELEMENT, uid:2/text [begin] -->
    45. 		<div id="c2" class="csc-frame csc-frame-frame1" >
    46. 		<!--  Header: [begin] -->
    47. 			<div class="csc-header csc-header-n1"><h4 class="csc-firstHeader">Willkommen, lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h4></div>
    48. 		<!--  Header: [end] -->
    49.  
    50. 		<!--  Text: [begin] -->
    51.  
    52. 			<p class="bodytext">&nbsp;</p>
    53. <p class="bodytext">Aenean massa. Cum sociis natoque penatibus et magnis dis parturient  montes, nascetur ridiculus mus. 
    54. </p>
    55. <p class="bodytext">&nbsp;</p>
    56. <p class="bodytext">Donec quam felis, ultricies nec,  pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.  
    57. </p>
    58. <p class="bodytext">&nbsp;</p>
    59. <p class="bodytext">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.  Venenatis vitae, justo. Donec pede justo, fringilla vel, aliquet nec,  vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis  vitae, justo ultricies nec, pellentesque eu, pretium quis, sem.</p>
    60. 		<!--  Text: [end] -->
    61. 			</div>
    62. 	<!--  CONTENT ELEMENT, uid:2/text [end] -->
    63.  
    64.           </div>
    65.  
    66.           <div id="footer">
    67.               <div id="footer_text">
    68.               Impressum &nbsp&nbsp|&nbsp&nbsp Drucken
    69.               </div>
    70.           </div>
    71.       </div>
    72.  
    73.  
    74.  
    75. </body>
    76. </html>

    1. * {margin: 0; padding: 0;}
    2.  
    3. body {margin-top: 40px; font-family: Verdana,Arial,Helvetica,sans-serif;  font-size: 11px}
    4.  
    5. div#wrap {width: 940px; margin: auto; }
    6.  
    7. div#header_1 {float: right; padding: 20px 0px;}
    8.  
    9. div#navigation {border: 1px solid #c9cdce; margin: 10px 0px; height: 22px; overflow: hidden; }
    10.  
    11. div#navigation ul { text-align: center;  height: 22px; list-style-type: none; background:url(../img/background_menu.png) repeat-x scroll left top; padding-top: 5px;}
    12.  
    13. div#navigation li {  margin: 0px; padding: 0px 53px; display: inline; height: 100%; width: 188px; border-right: 1px solid;}
    14.  
    15. div#navigation li:hover { background: #000; color: #fff ; }
    16.  
    17. div#navigation li a:hover {background: #000; color: #fff;}
    18.  
    19. div#navigation li b {display: block; margin: 0px;}
    20.  
    21. div#navigation ul li a { display: inline; text-decoration: none; color: #000000 }
    22.  
    23. div#content {padding: 40px;}
    24.  
    25. div#footer {border-top: 1px solid #c9cdce; }
    26.  
    27. div#footer_text {float: right; padding: 5px; color: #858585 }
    28.  
    29. label {display: block; padding-right: 5px; width: 200px; float: left; text-align: right; font-weight: bold;}

    Solltet ich mich nicht verständlich genug ausdrücken, dann entschuldige ich mich.. Bin nunmal noch ganz am anfang mit Typo3, HTML und CSS.. Allerdings hängt meine Zukunft davon ab das was ich hier mache, also muss ich wohl mein bestes geben..

    Wenn ihr nicht wisst wie ihr mir dabei helfen könnt, hätte ich noch 2 andare sachen die ich bis heute abend versuchen muss hinzukriegen:

    1. Dynamischer Header, so das ich auf jeder Unterseite einen andaren Header angezeigt bekomme.
    2. Im Footer, der Text "Impressum | Drucken" sollte eigentlich kein Text sein sondern ein Menü..

    Vielen, vielen Dank für eure Hilfe!

    MFG

    Aless

  • etux etux
    Jedi-Meister
    0 x
    360 Beiträge
    13 Hilfreiche Beiträge
    15. 11. 2010, 12:41

    Sorge erst mal für einen validen Quellcode und vernünftigen DOCTYPE.
    Die LI-Elementen mit „display: inline“ zu formatieren, geht auch. Leichter wäre es, wenn Du Float nimmst. Floaten kennst Du Alles, bis auf die Links. Sie bekommen ein „display: block;“ und sorgen für die Abstände (Paddings).
    Außer (beispielsweise) bei den Links, sind keine weitere Breiten-Angaben nötig. Höhen-Angaben – noch weniger. Sie beschränken auch die Flexibilität Deines Layouts. Die Schriftgrößen-Angabe in Pixel genau so (Internet Explorer).
    Wofür Du das b-Element in den Links brauchst, weiß ich nicht. Um den aktuellen Link zu bezeichnen wäre es besser, wenn Du ihn mit einem strong-Element ersetzest.

    marks.NAVIGATION = HMENU
    marks.NAVIGATION {
    wrap = <ul> | </ul>
    1 = TMENU
    1.NO.allWrap = <li>|</li>
    1.CUR.allWrap = <li>|</li>
    1.CUR.doNotLinkIt = 1
    1.CUR.linkWrap = <strong>|</strong>
    }

    Border:
    Du kannst dem UL einen Border für „top“, „right“ und „bottom“ zuordnen und den LI-Elementen einen für „left“.

    Wenn die Bilder in den Header nur der Dekoration dienen (Logos ausgeschlossen), definiere sie lieber als Hintergrund-Bilder. Dabei solltest Du auf leeren Elementen verzichten.

    Verzichte auf „overflow: hidden“ um die Floats einzuschließen. Du hast dafür geeignete Elementen, die ein „clear“ bekommen können.

  • etux etux
    Jedi-Meister
    0 x
    360 Beiträge
    13 Hilfreiche Beiträge
    15. 11. 2010, 12:57

    Hier auf die Schnelle ein „Test-Case“: #giggle#

    Die Paddings muss Du Dir noch anpassen.
    Aber betrachte das Ganze eher als ein Vorschlag. Denn ich kenne Deine Bilder nicht und nicht wirklich weiß, was Du erreichen willst.
    Die IEs habe ich bei der CSS-Formatierung erst mal nicht berücksichtigt.

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Test Case - lost (typo3.net)</title>
    6. <style type="text/css">
    7. * {margin: 0; padding: 0;}
    8. body { margin-top: 40px; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: small; }
    9. div#wrap { width: 940px; margin: auto; font-size: .9em; }
    10. div#header_1 { float: right; padding: 20px 0px; }
    11. /* div#header_2 {  } warum keine Formatierung */
    12. div#navigation { clear: right; float: left; padding-top: 5px; background:url(../img/background_menu.png) repeat-x scroll left top; }
    13. div#navigation ul { float: left; text-align: center; list-style-type: none; border: 1px solid #c9cdce; border-left: none;  }
    14. div#navigation li { float: left; border-left: 1px solid #c9cdce; }
    15. /* div#navigation li:hover { } unnötig bei nur einer Menü-Ebene */
    16. div#navigation a { display: block; width: 186px; padding: 5px 0; overflow: hidden; text-decoration: none; color: #000000 }
    17. div#navigation a:hover { color: #fff; background: #000; }
    18. div#navigation strong { display: block; width: 186px; padding: 5px 0; overflow: hidden; color: #fff; background: #000; }
    19. div#content { clear:left; padding: 40px;}
    20. div#footer {border-top: 1px solid #c9cdce; }
    21. div#footer_text {float: right; padding: 5px; color: #858585 }
    22. label {display: block; padding-right: 5px; width: 200px; float: left; text-align: right; font-weight: bold;}
    24. <!--[if lte IE 7]><style type="text/css">
    25. 	/* Extra CSS-Regel für die IEs kleiner IE 8 */
    26. </style><![endif]-->
    27. </head>
    29. <div id="wrap">
    30. 	<div id="header_1">
    31. 		<img src="fileadmin/template/img/koeln_urban_rechtsanwaelte.png" alt="" />
    32. 	</div>
    33. 	<div id="header_2">
    34. 		<img src="fileadmin/template/img/header_images_01.jpg" alt="" />
    35. 	</div>
    36. 	<div id="navigation">
    37. 		<ul>
    38. 			<li><a href="index.php?id=2" onfocus="blurLink(this);"  >Kanzlei</a></li>
    39. 			<li><strong >Tätigkeitsbereiche</strong></li>
    40. 			<li><a href="index.php?id=4" onfocus="blurLink(this);"  >Rechtsanwältin</a></li>
    41. 			<li><a href="index.php?id=5" onfocus="blurLink(this);"  >Veröffentlichungen</a></li>
    42. 			<li><a href="index.php?id=6" onfocus="blurLink(this);"  >Kontakt</a></li>
    43. 		</ul>
    44. 	</div>
    45. 	<div id="content">
    46. 		<div id="c2" class="csc-frame csc-frame-frame1" >
    47. 			<div class="csc-header csc-header-n1">
    48. 				<h4 class="csc-firstHeader">Willkommen, lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h4>
    49. 			</div>
    50. 			<p class="bodytext">&nbsp;</p>
    51. 			<p class="bodytext">Aenean massa. Cum sociis natoque penatibus et magnis dis parturient  montes, nascetur ridiculus mus.</p>
    52. 			<p class="bodytext">&nbsp;</p>
    53. 			<p class="bodytext">Donec quam felis, ultricies nec,  pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
    54. 			<p class="bodytext">&nbsp;</p>
    55. 			<p class="bodytext">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.  Venenatis vitae, justo. Donec pede justo, fringilla vel, aliquet nec,  vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis  vitae, justo ultricies nec, pellentesque eu, pretium quis, sem.</p>
    56. 		</div>
    57. 	</div>
    58. 	<div id="footer">
    59. 		<div id="footer_text">Impressum &nbsp&nbsp|&nbsp&nbsp Drucken</div>
    60. 	</div>
    61. </div>
    62. </body>
    63. </html>

  • lost lost
    Padawan
    0 x
    38 Beiträge
    0 Hilfreiche Beiträge
    15. 11. 2010, 15:06

    Deine CSS änderungen haben mir sehr geholfen, allerdings weiß ich nicht was ich mit dem HTML Code anfangen soll, da Typo3 denn HTML Code mittels TypoScript ja generiert..

    Aber ich denke ich kann das jetzt erstmal so stehen lassen, und mein Chef erklärt mir das Restliche später.

    Ich danke euch allen für eure Hilfe :)

    Liebe Grüße,

    Aless

  • etux etux
    Jedi-Meister
    0 x
    360 Beiträge
    13 Hilfreiche Beiträge
    15. 11. 2010, 15:11

    Hast Du denn keinen Zugriff auf die TypoScript-Setup Datei?

  • lost lost
    Padawan
    0 x
    38 Beiträge
    0 Hilfreiche Beiträge
    15. 11. 2010, 16:23

    Ja schon, nur du hast mir eine HTML Vorlage geschrieben. Nun müsste ich ja wissen wie man diese Haar genau in Typoscript umsetzt, da ich keine reine HTML Vorlage verwenden darf, sondern die Aufgabe darin liegt so gut wie alles was möglich ist in Typoscript zu schreiben...

    Aber ist nicht weiter tragisch, bin ja noch kein Profi udn mein Chef weiß das ;P

    Aber trozdem danke für deine große Mühe mir zur helfen, echt klasse von dir und auch von denn andaren!!!

    Liebe Grüße

  • etux etux
    Jedi-Meister
    0 x
    360 Beiträge
    13 Hilfreiche Beiträge
    15. 11. 2010, 16:59

    [quote="lost"]du hast mir eine HTML Vorlage geschrieben.[/quote]
    Diese sogenannte Vorlage besteht einzig und alleine aus Deinem Quellcode (HTML und CSS aus Deinem Beitrag oben). Ein Test-Case mit dem im Browser ausgegebenen Quellcode eben. Natürlich mit etwas geänderten CSS. ;)

  • lost lost
    Padawan
    0 x
    38 Beiträge
    0 Hilfreiche Beiträge
    16. 11. 2010, 12:13

    Achso, sorry.. Falsch verstanden :D

    Ich danke dir nochmals für deine Hilfe!

    Vllt. kennst du ja noch eine Lösung für mein andares Problem:
    http://www.typo3.net/forum/beitraege/diverse_sonstige_module/102398/

    Liebe Grüße :)

    Aless

Präsentiert von
Mittwald
Nützliche Links
TYPO3 Dokumentation
eStrategy
webworker Magazin