Anzeige

Breite einer Überschrift

Breite einer Überschrift | PSD-Tutorials.de

Erstellt von the_real_didi, 14.10.2008.

  1. the_real_didi

    the_real_didi Aktives Mitglied

    21
    Dabei seit:
    31.08.2005
    Beiträge:
    452
    Geschlecht:
    männlich
    Software:
    Photoshop, Illustrator, InDesign, TYPO3,
    Breite einer Überschrift
    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.
    [​IMG]

    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:
    1. <!--  Header: [begin] -->
    2.             <div class="csc-header_csc-header-n1"><h1 class="csc-firstHeader">Hauptüberschrift</h1><img src="Bilder/Template1_17.jpg" alt="" /></div>
    3.         <!--  Header: [end] -->
    4.            
    5.         <!--  Text: [begin] -->
    6.             <p class="bodytext">Inhaltsbereich hier</p>
    7.                 <!--  Text: [end] -->
    8.  
    und mein CSS dazu:
    Code (Text):
    1.  
    2. .csc-header_csc-header-n1 {
    3.     height: 39px;
    4.     width: auto;
    5.     padding-left: 15px;
    6.     padding-right: 65px;
    7.     background-image: url(../Bilder/Template1_17.jpg);
    8.     background-position: right;
    9.     background-repeat: no-repeat;
    10.     border: 1px solid #000000;
    11.     display: block;
    12. }
    13. h1 {
    14.     font-size: 14px;
    15.     font-weight: bold;
    16.     width: auto;
    17.     border: 1px solid #000000;
    18. }
    19.  
    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.
     
    #1      
  2. cebylon

    cebylon IBM5120-Oldie

    Dabei seit:
    28.07.2008
    Beiträge:
    920
    Geschlecht:
    männlich
    Ort:
    Niederbayern
    Software:
    ArchiCAD/Artlantis/Adobe
    Kameratyp:
    Canon EOS
    Breite einer Überschrift
    AW: Breite einer Überschrift

    poste doch einmal den Link zu deiner Seite, in der das auftritt !
     
    #2      
  3. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Breite einer Überschrift
    AW: Breite einer Überschrift

    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.
     
    #3      
  4. dosonaro

    dosonaro Aktives Mitglied

    Dabei seit:
    12.10.2008
    Beiträge:
    364
    Geschlecht:
    männlich
    Ort:
    Wuppertal
    Software:
    Adobe Photoshop CS4
    Breite einer Überschrift
    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 :)
     
    #4      
  5. the_real_didi

    the_real_didi Aktives Mitglied

    21
    Dabei seit:
    31.08.2005
    Beiträge:
    452
    Geschlecht:
    männlich
    Software:
    Photoshop, Illustrator, InDesign, TYPO3,
    Breite einer Überschrift
    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:
    1. <table cellspacing="0" cellpadding="0" id="table_content" summary="Inhaltsbereich">
    2.   <tr>
    3.     <td id="hauptmenue">
    4.       <!--###hauptmenue### begin -->
    5.       <div id="div-hauptmenue">
    6.         <div class="menu1-level1-no">
    7.           <a href="index.php?id=8" onfocus="blurLink(this);">Für Bewerber</a>
    8.         </div>
    9.         <div class="menu1-level1-act">
    10.           <a href="index.php?id=2" onfocus="blurLink(this);">Über uns</a>
    11.         </div>
    12.         <div class="menu1-level2-no">
    13.           <a href="index.php?id=7" onfocus="blurLink(this);">Filialen</a>
    14.         </div>
    15.         <div class="menu1-level2-no">
    16.           <a href="index.php?id=3" onfocus="blurLink(this);">Kontakt</a>
    17.         </div>
    18.         <div class="menu1-level2-no">
    19.           <a href="index.php?id=4" onfocus="blurLink(this);">Impressum</a>
    20.         </div>
    21.         <div class="menu1-level2-no">
    22.           <a href="index.php?id=5" onfocus="blurLink(this);">Datenschutz</a>
    23.         </div>
    24.         <div class="menu1-level2-no">
    25.           <a href="index.php?id=6" onfocus="blurLink(this);">Sitemap</a>
    26.         </div>
    27.       </div>
    28.       <!--###hauptmenue### end -->
    29.     </td>
    30.     <td id="content">
    31.       <!--###content### begin -->
    32.       <div id="div-content">
    33.         <!--  CONTENT ELEMENT, uid:1/text [begin] -->
    34.         <a id="c1"></a>
    35.         <!--  Header: [begin] -->
    36.          
    37.               <div class="csc-header_csc-header-n1">
    38.                 <h1 class="csc-firstHeader">Hauptüberschrift</h1>
    39.               </div>
    40.        
    41.         <!--  Header: [end] -->
    42.         <!--  Text: [begin] -->
    43.             <p class="bodytext">Inhaltsbereich hier</p>
    44.         <!--  Text: [end] -->
    45.            
    46.     <!--  CONTENT ELEMENT, uid:1/text [end] -->
    47.         </div><!--###content### end --></td>
    48.       </tr>
    49.     </table>
    50.  
    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 (Text):
    1.  
    2. h1 {
    3.     font-size: 14px;
    4.     font-weight: bold;
    5. }
    6. #table_content {
    7.     background-color: #e7e6e6;
    8.     height: 400px;
    9.     padding-right: 10px;
    10.     padding-left: 10px;
    11.     padding-bottom: 6px;
    12. }
    13.  
    14. /******************************************************************/
    15. /*************** Hauptmenue  Anfang *******************************/
    16. /******************************************************************/
    17. #hauptmenue {
    18.     padding-top: 10px;
    19.     vertical-align: text-top;
    20. }
    21. #div-hauptmenue {
    22.     width: 240px;
    23. }
    24.  
    25. /*************** Level 1 ******************************************/
    26. .menu1-level1-no a, .menu1-level1-act a {
    27.     font-size: 14px;
    28.     text-decoration: none;
    29.     font-weight: bold;
    30.     color: #bc3c7a;
    31.     padding-left: 34px;
    32.     padding-top: 3px;
    33.     padding-bottom: 3px;
    34. }
    35. .menu1-level1-no a:hover {
    36.     color: #ff9bcb;
    37. }
    38. .menu1-level1-no, .menu1-level1-act {
    39.     height: 20px;
    40. }
    41. .menu1-level1-act {
    42.     background-image: url(../Bilder/Template1_20.jpg);
    43.     background-repeat: no-repeat;
    44. }
    45.  
    46. /*************** Level 2 ******************************************/
    47. .menu1-level2-no, .menu1-level2-act {
    48.     padding-left: 16px;
    49.     margin-left: 34px;
    50.     width: 180px;
    51.     height: 15px;
    52. }
    53. .menu1-level2-no a, .menu1-level2-act a{
    54.     text-decoration: none;
    55.     padding-top: 2px;
    56.     padding-bottom: 2px;
    57. }
    58. .menu1-level2-act {
    59.     background-color: #d4d4d4;
    60. }
    61. .menu1-level2-no a:hover {
    62.     text-decoration: underline;
    63. }
    64. /******************************************************************/
    65. /*************** Hauptmenue  Ende *********************************/
    66. /******************************************************************/
    67.  
    68. /******************************************************************/
    69. /*************** Content Anfang ***********************************/
    70. /******************************************************************/
    71. #content {
    72.     background-color: #FFFFFF;
    73.     border: 1px solid #c6c6c6;
    74.     vertical-align: text-top;
    75. }
    76. #div-content {
    77.     /*width: 738px;*/
    78. }
    79. .csc-header_csc-header-n1 {
    80.     height: 39px;
    81.     padding-left: 15px;
    82.     padding-right: 65px;
    83.     background-image: url(../Bilder/Template1_17.jpg);
    84.     background-position: right;
    85.     background-repeat: no-repeat;
    86. }
    87. .bodytext {
    88. }
    89. /******************************************************************/
    90. /*************** Content  Ende ************************************/
    91. /******************************************************************/
    92.  

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

    the_real_didi Aktives Mitglied

    21
    Dabei seit:
    31.08.2005
    Beiträge:
    452
    Geschlecht:
    männlich
    Software:
    Photoshop, Illustrator, InDesign, TYPO3,
    Breite einer Überschrift
    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.
     
    #6      
x
×
×
teststefan