Zum Inhalt springen

Hilfe beim einbindes des Contents.

Erstellt am 12. November 2010 · 19 Antworten · letzte Antwort am 16. November 2010

Tags: Inhaltselemente, Frage

lost ·

Danke leute 🙂

Fals es euch nichts ausmacht mir noch zu schreiben was ich jetzt noch alles ändern muss um einen Hover einzurichten, so das der background verschwindet und ein schwarzer hintergrund mit der schrift der nav in weiss.. 🙂
So das auch beim Activen zustand der background schwarz bleibt..

So wie hier: http://urbanrechtsanwaltskanzlei.springerf3.de/

Ihr seid echt klasse, so schnelle Antworten 🙂

Danke,

Aless

P.S: Das mit den links und rechts Border krieg ich auch nciht so ganz hin.. also so das sie auch wie auf der Homepage oben aussehn...

etux ·

Und warum postest Du nicht einen Link zur Deinen Site?

Wenn bei der ersten Ebene die schwarze Hintergrundfarbe erscheinen soll, auch wenn Du mit der Maus schon über die zweite Ebene bist, muss Du sie den Li-Elementen der ersten Ebene zu ordnen. So in etwa:
li:hover { background: #000; }

Bei der aktuellen Seite kannst Du sie dem b-Element zu ordnen. Du hast ja nur bei ACT ein b-Element um den Link. b muss aber als block-Element ohne Margins formatiert werden, um das gesamte LI zu füllen.
Oder Du gibst dem LI der aktuellen Seite eine Klasse und formatierst sie entsprechend.

etux ·
lost schrieb

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.

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 ·

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:

<!DOCTYPE html
	PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 
	This website is powered by TYPO3 - inspiring people to share!
	TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
	TYPO3 is copyright 1998-2010 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
	Information and contribution at http://typo3.com/ and http://typo3.org/
-->



<title>Home</title>
<meta name="generator" content="TYPO3 4.4 CMS">

<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_670d0f71b2.css?1289557450" media="all">
<link rel="stylesheet" type="text/css" href="fileadmin/template/css/main_screen.css?1289809326" media="screen">


<script src="typo3temp/javascript_93077bb238.js?1289480786" type="text/javascript"></script>



</head>
<body>

      <div id="wrap">
          <div id="header_1">
              <img src="fileadmin/template/img/koeln_urban_rechtsanwaelte.png" />
          </div>

          <div id="header_2">
              <img src="fileadmin/template/img/header_images_01.jpg"/>
          </div>
          <div id="navigation"><a name="navigation" id="navigation"></a>
              <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>

          </div>
          <div id="content">
              
	<!--  CONTENT ELEMENT, uid:2/text [begin] -->
		<div id="c2" class="csc-frame csc-frame-frame1" >
		<!--  Header: [begin] -->
			<div class="csc-header csc-header-n1"><h4 class="csc-firstHeader">Willkommen, lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h4></div>
		<!--  Header: [end] -->
			
		<!--  Text: [begin] -->

			<p class="bodytext">&nbsp;</p>
<p class="bodytext">Aenean massa. Cum sociis natoque penatibus et magnis dis parturient  montes, nascetur ridiculus mus. 
</p>
<p class="bodytext">&nbsp;</p>
<p class="bodytext">Donec quam felis, ultricies nec,  pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.  
</p>
<p class="bodytext">&nbsp;</p>
<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>
		<!--  Text: [end] -->
			</div>
	<!--  CONTENT ELEMENT, uid:2/text [end] -->
		
          </div>

          <div id="footer">
              <div id="footer_text">
              Impressum &nbsp&nbsp|&nbsp&nbsp Drucken
              </div>
          </div>
      </div>



</body>
</html>
* {margin: 0; padding: 0;}

body {margin-top: 40px; font-family: Verdana,Arial,Helvetica,sans-serif;  font-size: 11px}

div#wrap {width: 940px; margin: auto; }

div#header_1 {float: right; padding: 20px 0px;}

div#navigation {border: 1px solid #c9cdce; margin: 10px 0px; height: 22px; overflow: hidden; }

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;}

div#navigation li {  margin: 0px; padding: 0px 53px; display: inline; height: 100%; width: 188px; border-right: 1px solid;}

div#navigation li:hover { background: #000; color: #fff ; }

div#navigation li a:hover {background: #000; color: #fff;}

div#navigation li b {display: block; margin: 0px;}

div#navigation ul li a { display: inline; text-decoration: none; color: #000000 }

div#content {padding: 40px;}

div#footer {border-top: 1px solid #c9cdce; }

div#footer_text {float: right; padding: 5px; color: #858585 }

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 ·

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 ·

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Case - lost (typo3.net)</title>
<style type="text/css">
* {margin: 0; padding: 0;}
body { margin-top: 40px; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: small; }
div#wrap { width: 940px; margin: auto; font-size: .9em; }
div#header_1 { float: right; padding: 20px 0px; }
/* div#header_2 {  } warum keine Formatierung */
div#navigation { clear: right; float: left; padding-top: 5px; background:url(../img/background_menu.png) repeat-x scroll left top; }
div#navigation ul { float: left; text-align: center; list-style-type: none; border: 1px solid #c9cdce; border-left: none;  }
div#navigation li { float: left; border-left: 1px solid #c9cdce; }
/* div#navigation li:hover { } unnötig bei nur einer Menü-Ebene */
div#navigation a { display: block; width: 186px; padding: 5px 0; overflow: hidden; text-decoration: none; color: #000000 }
div#navigation a:hover { color: #fff; background: #000; }
div#navigation strong { display: block; width: 186px; padding: 5px 0; overflow: hidden; color: #fff; background: #000; }
div#content { clear:left; padding: 40px;}
div#footer {border-top: 1px solid #c9cdce; }
div#footer_text {float: right; padding: 5px; color: #858585 }
label {display: block; padding-right: 5px; width: 200px; float: left; text-align: right; font-weight: bold;}
</style>
<!--[if lte IE 7]><style type="text/css">
	/* Extra CSS-Regel für die IEs kleiner IE 8 */
</style><![endif]-->
</head>
<body>
<div id="wrap">
	<div id="header_1">
		<img src="fileadmin/template/img/koeln_urban_rechtsanwaelte.png" alt="" />
	</div>
	<div id="header_2">
		<img src="fileadmin/template/img/header_images_01.jpg" alt="" />
	</div>
	<div id="navigation">
		<ul>
			<li><a href="index.php?id=2" onfocus="blurLink(this);"  >Kanzlei</a></li>
			<li><strong >Tätigkeitsbereiche</strong></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>
	</div>
	<div id="content">
		<div id="c2" class="csc-frame csc-frame-frame1" >
			<div class="csc-header csc-header-n1">
				<h4 class="csc-firstHeader">Willkommen, lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h4>
			</div>
			<p class="bodytext">&nbsp;</p>
			<p class="bodytext">Aenean massa. Cum sociis natoque penatibus et magnis dis parturient  montes, nascetur ridiculus mus.</p>
			<p class="bodytext">&nbsp;</p>
			<p class="bodytext">Donec quam felis, ultricies nec,  pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
			<p class="bodytext">&nbsp;</p>
			<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>
		</div>
	</div>
	<div id="footer">
		<div id="footer_text">Impressum &nbsp&nbsp|&nbsp&nbsp Drucken</div>
	</div>
</div>
</body>
</html>
lost ·

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

lost ·

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 ·
lost schrieb

du hast mir eine HTML Vorlage geschrieben.

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 ·

Achso, sorry.. Falsch verstanden 😃

Ich danke dir nochmals für deine Hilfe!

Vllt. kennst du ja noch eine Lösung für mein andares Problem:
#102398

Liebe Grüße 🙂

Aless