XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Textabschnitt Grafiken (http://xhtmlforum.de/showthread.php?t=66058)

marvinb 27.10.2011 20:17

Textabschnitt Grafiken
 
Hi,
Ich hab mein komplettes Layout mit CSS gemacht und stehe nurnoch vor einem kleinen Problem!
Habe also einen div-Abschnitt erstellt in dem nur der ganze Text steht und das ganze in der .css-Datei formatiert und so weiter.
Jetzt hab ich eine Hintergrundgrafik erstellt die sich immer weiter nach unten ausweitet, je nach Textlänge und möchte jetzt oben einen Anfang der Grafik und unten einen Abschluss setzen.
Soll am Ende ein Kasten mit abgerundeten Ecken sein und die Ecken kann ich schließlich nur in einer extra Grafik einbauen.

Habs auch alles schön drüber gesetzt, jetzt ist allerdings noch ein kleiner Spalt zwischen Anfang und Rest, beim Ende vermutlich auch, habs noch nicht versucht.
Frage also jetzt: Wie schaff ichs, dass die Anfangs-Grafik direkt anbindet?
Hab die margins und paddings alle auf null gesetzt die angrenzen, theoretisch dürfte kein Platz mehr zwischen den beiden Teilen sein. Mein letzter Verusch war die Anfangsgrafik in einen extra div-Abschnitt zu setzen bei dem ich margin und padding bottom auf null setze, hat aber auch ncihts gebracht.

CSS-Code:

Code:

/* =======================================
4. Navi-Bereich
======================================= */

#navibereich {
  text-align: center;
  padding: 0;
  margin: 0;
  margin-bottom: 25px;
}

#navibereich ul { margin-bottom: 0; }
#navibereich li {
  display: inline;
  list-style-type: none;
  }
 
/* =======================================
5. Text-Bereich
======================================= */
#textoben {
        margin: 0;
        padding: 0;
  }

#textbereich {
  color: #272528;
  background-image: url(Grafiken/textlang.png);
  font-family: Verdana, Arial, Helvetica, sans-serif;
  width: 620px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 50px;
  margin-left: auto;
  padding-top: 20px ;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 20px;
  }

HTML-Code:

HTML-Code:

<!-- ===========================================NAVIBEREICH========================================================= -->
        <div id="navibereich">
       
        <ul>
          <li id="NaviStartseite"><a href="Websiteneu.html"><IMG SRC="Grafiken/Startseite.png" alt="Startseite"></a></li>
          <li id="NaviJaegermeister"><a href="Jägermeister.html"><IMG SRC="Grafiken/Jägermeister.png" alt="Jägermeister"></a></li>
          <li id="NaviBacardi"><a href="Bacardi.html"><IMG SRC="Grafiken/Bacardi.png" alt="Bacardi"></a></li>
          <li id="NaviImpressum"><a href="Impressum.html"><IMG SRC="Grafiken/Impressum.png" alt="Impressum"></a></li>
        </ul>
       
        </div> <!-- Ende vom Navibereich -->
<!-- ===========================================TEXTBEREICH========================================================= -->
        <div id="textoben">
        <p align="center"><img src="Grafiken/textstart.png"></p>
        </div>
        <div id="textbereich">
       
        <h1>Startseite</h1>
       
        <p>Willkommen auf <strong>Test</strong></p>
        <a href="hotmail.de">hotmail</a>
       
        </div> <!-- Ende vom Textbereich -->


fricca 27.10.2011 21:08

Dieses Codefragment bringt uns nichts. Vollständiger Code beginnt mit einem Doctype. Du hast ja sicher bereits gelesen, dass und warum der so wichtig ist.
Meine Kristallkugel meint, in diesem Fall ist er sogar besonders wichtig. Denn meine Kristallkugel meint, dass das, was du "Anfangsgrafik" nennst -- und wir nicht sehen können -- dieses img-Element in dem p mit dem veralteten align-Attribut sein soll.
Wir brauchen einen Link zum Problem. Und um dem "Ich-hab-keinen-Webspace" vorzugreifen: Es gibt "Freehoster" (Google hilft).

Und zum Abschluss: Ziergrafiken gehören nicht ins HTML, sondern nur ins CSS.


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:06 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019