Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Breite einer Überschrift“

the_real_didi

Aktives Mitglied

Hallo zusammen,

ich bin mir jetzt nicht ganz sicher, ob das hier her gehört oder zu den CMS.
Also ich lasse mir die Seite mit Typo3 erzeugen.
Mein Problem ist, dass bei dem per Typo3 eingefügten Content die Überschriften über die gesamte Breite des Content-Bereiches gehen.

hier ein screenshot mit Rahmen. Damit ihr seht, was ich meine.


Um die Überschrift wird ein div erzeugt, in dass ich ein background-image eingefügt habe, welches also immer im gleichen abstand hinter der Überschrift stehen soll. durch die mir unklare breite der Überschrift wird das aber alles an den rechten Rand der Seite verschoben. hier mal der erzeugte Code der Seite:

HTML:
<!--  Header: [begin] -->
			<div class="csc-header_csc-header-n1"><h1 class="csc-firstHeader">Hauptüberschrift</h1><img src="Bilder/Template1_17.jpg" alt="" /></div>
		<!--  Header: [end] -->
			
		<!--  Text: [begin] -->
			<p class="bodytext">Inhaltsbereich hier</p>
                <!--  Text: [end] -->

und mein CSS dazu:
Code:
.csc-header_csc-header-n1 {
	height: 39px;
	width: auto;
	padding-left: 15px;
	padding-right: 65px;
	background-image: url(../Bilder/Template1_17.jpg);
	background-position: right;
	background-repeat: no-repeat;
	border: 1px solid #000000;
	display: block;
}
h1 {
	font-size: 14px;
	font-weight: bold;
	width: auto;
	border: 1px solid #000000;
}

ich bin mir jetzt nicht sicher, ob sich das per CSS lösen lässt oder ob es am Typo3 liegt. Vielleicht könnt ihr mir da weiter helfen.
 

sokie

Mod | Web

AW: Breite einer Überschrift

ich bin mir jetzt nicht sicher, ob sich das per CSS lösen lässt oder ob es am Typo3 liegt. Vielleicht könnt ihr mir da weiter helfen.

wenn du nun auch geschrieben hättest was in welcher Art zu lösen sein soll, wären wir schon ein ganzes Stück weiter.

CSS ist genau das richtige um Dinge passend zu positionieren.
 

dosonaro

Aktives Mitglied

AW: Breite einer Überschrift

gebe doch mal der class ".csc-header_csc-header-n1" eine feste breite anstatt auto;

vielleicht geht es, ich kenne mich mit typo3 leider nicht aus :)
 

the_real_didi

Aktives Mitglied

AW: Breite einer Überschrift

Ein link zur Seite existiert noch nicht. da muß ich beim Provider erstmal das Typo3 installieren.

So, ich habe das Problem lokalisiert, aber noch nicht beheben können. Es liegt also doch am CSS. Hier mal der Teil als HTML:
HTML:
<table cellspacing="0" cellpadding="0" id="table_content" summary="Inhaltsbereich">
  <tr>
    <td id="hauptmenue">
      <!--###hauptmenue### begin -->
      <div id="div-hauptmenue">
        <div class="menu1-level1-no">
          <a href="index.php?id=8" onfocus="blurLink(this);">Für Bewerber</a>
        </div>
        <div class="menu1-level1-act">
          <a href="index.php?id=2" onfocus="blurLink(this);">Über uns</a>
        </div>
        <div class="menu1-level2-no">
          <a href="index.php?id=7" onfocus="blurLink(this);">Filialen</a>
        </div>
        <div class="menu1-level2-no">
          <a href="index.php?id=3" onfocus="blurLink(this);">Kontakt</a>
        </div>
        <div class="menu1-level2-no">
          <a href="index.php?id=4" onfocus="blurLink(this);">Impressum</a>
        </div>
        <div class="menu1-level2-no">
          <a href="index.php?id=5" onfocus="blurLink(this);">Datenschutz</a>
        </div>
        <div class="menu1-level2-no">
          <a href="index.php?id=6" onfocus="blurLink(this);">Sitemap</a>
        </div>
      </div>
      <!--###hauptmenue### end -->
    </td>
    <td id="content">
      <!--###content### begin -->
      <div id="div-content">
        <!--  CONTENT ELEMENT, uid:1/text [begin] -->
        <a id="c1"></a>
        <!--  Header: [begin] -->
          
              <div class="csc-header_csc-header-n1">
                <h1 class="csc-firstHeader">Hauptüberschrift</h1>
              </div>
        
        <!--  Header: [end] -->
        <!--  Text: [begin] -->
            <p class="bodytext">Inhaltsbereich hier</p>
        <!--  Text: [end] -->
            
    <!--  CONTENT ELEMENT, uid:1/text [end] -->
        </div><!--###content### end --></td>
      </tr>
    </table>

Die Breite der Überschrift passt sich immer der Breite der umgebenden Container an. wenn ich also für den umgebenden <div>-tag für den Content-Bereich eine feste breite vergebe, dann geht die breite der Überschrift auch bis zum rechten Rand. Werden garkeine festen Breiten festgelegt dann bestimmt ja der Inhalt die Breite der umgebenden Elemente. Die Überschrift passt sich dann auch hier der Breite des Inhalts an.

hier nochmal das vollständige CSS für diesen Bereich ohne feste Breiten:
Code:
h1 {
    font-size: 14px;
    font-weight: bold;
}
#table_content {
    background-color: #e7e6e6;
    height: 400px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 6px;
}

/******************************************************************/
/*************** Hauptmenue  Anfang *******************************/
/******************************************************************/
#hauptmenue {
    padding-top: 10px;
    vertical-align: text-top;
}
#div-hauptmenue {
    width: 240px;
}

/*************** Level 1 ******************************************/
.menu1-level1-no a, .menu1-level1-act a {
    font-size: 14px;
    text-decoration: none;
    font-weight: bold;
    color: #bc3c7a;
    padding-left: 34px;
    padding-top: 3px;
    padding-bottom: 3px;
}
.menu1-level1-no a:hover {
    color: #ff9bcb;
}
.menu1-level1-no, .menu1-level1-act {
    height: 20px;
}
.menu1-level1-act {
    background-image: url(../Bilder/Template1_20.jpg);
    background-repeat: no-repeat;
}

/*************** Level 2 ******************************************/
.menu1-level2-no, .menu1-level2-act {
    padding-left: 16px;
    margin-left: 34px;
    width: 180px;
    height: 15px;
}
.menu1-level2-no a, .menu1-level2-act a{
    text-decoration: none;
    padding-top: 2px;
    padding-bottom: 2px;
}
.menu1-level2-act {
    background-color: #d4d4d4;
}
.menu1-level2-no a:hover {
    text-decoration: underline;
}
/******************************************************************/
/*************** Hauptmenue  Ende *********************************/
/******************************************************************/

/******************************************************************/
/*************** Content Anfang ***********************************/
/******************************************************************/
#content {
    background-color: #FFFFFF;
    border: 1px solid #c6c6c6;
    vertical-align: text-top;
}
#div-content {
    /*width: 738px;*/
}
.csc-header_csc-header-n1 {
    height: 39px;
    padding-left: 15px;
    padding-right: 65px;
    background-image: url(../Bilder/Template1_17.jpg);
    background-position: right;
    background-repeat: no-repeat;
}
.bodytext {
}
/******************************************************************/
/*************** Content  Ende ************************************/
/******************************************************************/


@dosonaro: ne feste breite würde mir nicht gefallen, da sich die breite ja dynamisch je nach überschriftenlänge verändern soll.
 

the_real_didi

Aktives Mitglied

AW: Breite einer Überschrift

also ich konnte das Problem lösen.
habe dem div csc-header_csc-header-n1 einen float: left; verpasst und dem bodytext ein clear: left; Das funktioniert wunderbar.

Ich bedanke mich für eure Denkanstöße.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
174.476
Beiträge
2.577.967
Mitglieder
65.962
Neuestes Mitglied
seppeldeluxe
Oben