---
title: "Sitemap dynamisch wachsen lassen"
url: "https://www.typo3.net/d/126347-sitemap-dynamisch-wachsen-lassen"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","HTML & CSS","TYPO3 7"]
created: "2017-10-27"
last_reply: "2017-11-02"
replies: 3
solved: false
page: 1
pages: 1
lang: "de"
---

# Sitemap dynamisch wachsen lassen

TYPO3 › Menüs · 3 Antworten · gestartet 2017-10-27

## Eröffnungsbeitrag

**Power-Poler** · 2017-10-27 · [Beitrag #1](https://www.typo3.net/d/126347-sitemap-dynamisch-wachsen-lassen/1)

Guten Tag,
Hänge jetzt an einem Css Problem, was die Sitemap angeht.

```typoscript
temp.menu = HMENU
temp.menu {
    1=TMENU	
    #1.NO = 1
    #1.expAll = 1
    1.wrap = <ul>|</ul>
    1.NO.wrapItemAndSub = <li class="sitemapelementname">|</li>
    2 < .1
    3 < .2
    4 < .3
    5 < .4
    6 < .5
    7 < .6
}
lib.site_map.10 < temp.menu
```

Meine Sitemap wird auf diese Weise erzeugt. Wird zwar sicher keine 7 Unterebenen haben, aber sicher ist sicher.
Nun zu meinem Problem, Die Seite besteht aus 3 Spalten.
Sitemap          Content              News
Wenn ich jetzt alle 3 Elemente float:left; Sitemap max-width: 20% ; Content max_width: 60%; news max_width: 20%
setze, sieht es aus wie es soll. Nur wenn ein Eintrag innerhalb der Sitemap zu lang ist, läuft es über den Rand in den Content Bereich.
Daher habe ich die class sitemapelementname eingebaut, welche auf width: 16em steht. Leider bringt dies auch nicht den gewünschten Effekt.
Am Ende soll es so ein, das die Sitemap dynamisch breiter wird, das Content Element schrumpft, und die News ebenfalls dynamisch breiter werden. Alles aber in einer Zeile verbleibt.
CSS:

```css
div#sitemap {
	float:left;
	//padding-right:15px;
	//max-width:20%;
	padding-left:10px;
	//width: 100%;
	position: relative;
	bottom: 0px;
	border-right-style: solid;
	border-width: 1px;
	border-color: #8cacbb;
}
.tx-felogin-pi1,
div#sitemap .sitemapelementname {
	width: 16em;
}

div#sitemap ul {
	padding-left: 10px;	
}

div#container_content {
	float:left;
	//max-width: 65%;
	//width: 100%;
	min-height: 10px;
	position: relative;
	padding-right: 15px;
	padding-left: 15px;
	
}

div#container_news {
	//max-width: 15%;
	//padding-right: 10px;
	float: left;
	height: auto;
	//width: 100%;
	position: relative;
	bottom: 0px;
	border-left-style: solid;
	border-width:1px;
	border-color: #8cacbb;
	padding-left: 2px;
}
```

```html
	<div id="sitemap">
		<f:cObject typoscriptObjectPath="lib.site_map" />
	</div>

	<div id="container_content">
		<!--TYPO3SEARCH_begin-->
		<f:cObject typoscriptObjectPath="lib.container_content" />
		<!--TYPO3SEARCH_end-->
	</div><!-- container_content -->

	<div id="container_news">
		<f:cObject typoscriptObjectPath="lib.nachrichten" />
	</div><!-- container_news -->
	<!--TYPO3SEARCH_end-->
```

Habe jetzt schon öfters gesehen, dass Seiten mit unendlichen Verschachtelungen ihr Aussehen erreichen. Leider habe ich mit dem Verschachteln noch nicht so auseinander gesetzt (weiß nicht mal ob dies die Lösung wäre).
Schon mal Danke für eure Antwort
Mfg
Power-Poler

## Antworten

### [#2](https://www.typo3.net/d/126347-sitemap-dynamisch-wachsen-lassen/2) · Norman2k · 2017-10-27

Du könntest u.a. mit Flexbox arbeiten, allerdings benötigt es ein paar Anpassungen wenn es auch mit dem IE10 laufen soll.
<https://caniuse.com/#feat=flexbox>

### [#3](https://www.typo3.net/d/126347-sitemap-dynamisch-wachsen-lassen/3) · Power-Poler · 2017-10-27

Hab das jetzt mal ausprobiert.
Leider läuft der Text immer noch über den Rand hinaus, statt die box größer werden zu lassen.
Wenn ich keine width setze, wird die Box zwar dynamisch größer, aber es werden an Leerstellen auch keine Zeilenumbrüche mehr gemacht. Sodass die Box unnötig groß wird.

Glaube ich werde einfach ein overflow hidden setzen. Ist zwar nicht Sinn der Sache, aber nun ja.
Wäre natürlich nur die aller letzte Möglichkeit
In Kombination mit word-wrap: break-word;

### [#4](https://www.typo3.net/d/126347-sitemap-dynamisch-wachsen-lassen/4) · Power-Poler · 2017-11-02

Hab mich jetzt für den Weg endschieden, leider klappt dies auch nicht so wirklich:
[/d/126359-background-keine-transparents](https://www.typo3.net/d/126359-background-keine-transparents)

---

Quelle: „Sitemap dynamisch wachsen lassen“, typo3.net, https://www.typo3.net/d/126347-sitemap-dynamisch-wachsen-lassen
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.