• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

display:inline will nicht.

Status
Für weitere Antworten geschlossen.
C

Chiba

Neues Mitglied
Heyho,

euch allen zuhause an euren TFT's- oder Röhren-Monitore. Ich ein kleines Problem. Ich möchte 3 Pics nebeinander als Header haben.

Quellcode meiner index.php:

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="<?php echo $this->language; ?>"lang="<?php echo $this->language; ?>" >
<head>
<link href="<?php echo $this->baseurl ?>/templates/redtel/css/template.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <?php echo '<div id="container" style="width:'.$width.';">';?>
                 <div id="header_l"></div>
        <div id="header_bg">
                 <jdoc:include type="modules" name="breadcrumb" />
        </div>
        <div id="header_r"></div>
        <div id="menue_top"><jdoc:include type="modules" name="top" /></div>

                 <div id="content">
                     <jdoc:include type="component" />
                 </div>

                 <div id="footer_l"></div>
        <div id="footer_bg"></div>
        <div id="footer_r"></div>
    </div>
</body>
</html>
Ausschnitt aus meiner template.css:
Code: 
body {
    text-align: center; /* required for centering the page in IE */
    margin: 0px;
    padding: 0px;
         width:100%;
    background-image: url(../images/bg.gif);
    background-repeat: repeat-x;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

#container{
    margin:auto;
    min-height:400px;
         padding-top:10px;
}
#header_l{

         height:138px;
         width:17px;
         background-image: url(../images/header_l.gif);
    background-repeat: repeat;
         float:left;
         display:inline;

}
#header_r{

         height:138px;
         width:17px;
         background-image: url(../images/header_r.gif);
         background-repeat: repeat;
         float:left;
         display:inline;
}
#header_bg{

         height:138px;
         width: 100%;
         background-image: url(../images/header_bg.gif);
    background-repeat: repeat-x;
         float:left;
         display:inline;
}
Endergebniss:




Ich hoffe sehr das mir jemannd helfen kann bin grade zu betriebsblind.
Mit aller freundlichsten Grüßen,
Chiba

EDIT:Falls ihr euch fragt woher der Content die Breite bekommt die wird vor dem HTML übergeben mit include_once in die Variable $width.
​
 
Zuletzt bearbeitet:
Der Quellcode deiner index.php hilft wenig weiter. Idealer wäre der Quellcode der in deinem Browser angezeigten Seite.

Allerdings sehe ich schon das Problem: du sagst du willst 3 Bilder (sprich: div's) nebeneinander? Zum Einen musst du display: inline dann rausnehmen damit diese überhaupt gefloatet werden können. Zum Anderen hast Du in #header_bg eine Breite von 100% angegeben was man in deinem Screenshot dann auch wunderbar als breiten weißen Balken sieht. Ersetz das durch eine geringere Breite, so dass die 3 div's in der Summe die Breite deiner Webseite haben.
 
Mh das Mittlere Bild solch sich der Größe die vorher mit einem Parameter her übergeben wurde anpassen. Der Container div erhält die größe und der Header soll dann genau so groß sein.

PHP: 
<body>
    <div id="container" style="width:950px;">                 <div id="header_l"></div>
        <div id="header_bg">
                 
        </div>
        <div id="header_r"></div>
        <div id="menue_top"><table width="100%" border="0" cellpadding="0" cellspacing="1"><tr><td nowrap="nowrap"><span class="mainlevel"> </span><a href="/Joomla_Praktikant/index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=22" class="mainlevel">Software & Anwendungsentwicklung</a><span class="mainlevel">  </span><a href="/Joomla_Praktikant/index.php?option=com_content&amp;view=article&amp;id=4&amp;Itemid=23" class="mainlevel">Forschung & Entwicklung</a><span class="mainlevel">  </span></td></tr></table></div>

                 <div id="content">
                     <div class="componentheading">
    Praktikanten_Joomla</div>
<table class="blog" cellpadding="0" cellspacing="0">
<tr>
    <td valign="top">
                </td>
</tr>


</table>

                 </div>
                 <div id="footer_l"></div>
        <div id="footer_bg"></div>
        <div id="footer_r"></div>
    </div>
</body>
</html>
 
Nein, dort setzt du für das umgebende div #container eine Breite. Du sagtest jedoch, dass du das Bild in der Mitte an die Breite anpassen möchtest. Dazu müsstest Du die Breite bei

Code: 
<div id="header_bg">

variabel angeben. Da du dies nicht tust erhält #header_bg weiterhin die Breite von 100% und erzeugt deine falsche Anzeige der Webseite.
 
Für backgrond-images braucht man selten Floats.
background-images lassen sich in weiteren Elementen überschreiben.
Floats können nicht display: inline; haben.
display: inline; kann kein height haben.
Echte inline-Elemente können durch
- float
- display:block;
- display:table
- oder display: inline-block.
Wie Blockelemente height, margin oder vertikales padding haben.

Derzeit sind in allen gängigen Browser dafür float und display: block geeignet.

Eine Grafik und ein Blockelement reichen aus:
Code: 
<h1>Überschrift<span></span><b></b></h1>
Wenn keine Überschrift erwünscht ist tut es auch ein div.
Das Blockelement (hier h1) trägt die Höhe und position:relative; als Bezugspunkt der absolute positionierten Elemente.
Die tragen die Grafik mit den jeweiligen ausrichtungen:
Code: 
h1 {
height: 125px;
position: relative;
margin: 0;
background-color: #3A3A3A;
color: #EAF4F5;
}

h1 span {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url(images/bg-leiste.jpg);
background-repeat: no-repeat;
}

h1 b {
position: absolute;
top: 0;
right: 0;
background-image: url(images/bg-leiste.jpg);
background-repeat: no-repeat;
background-position: right top;
width: 15px;
height: 100%;
}
Der Überschriftentext wird mit <span> und <b> übermalt. Werden die Grafiken abgeschaltet wird der Text wieder sichtbar.

Ein Beispiel mit darunterliegender Navigation
Der Inhalt ist mit einem div umschlossen um dem Ganzen eine maximale Breite zu geben. Bei Überschreitung wird er durch automatischen Außenabstand zentriert:
Ãœberschrift unter bg-image
Um den Effekt zu erkennen muß das Browserfenster gegebenfalls verkleinert werden.

Für IE 5-6 sind feste Breiten angegen. Für IE 5- 5.5 wurde der ganze Block mit text-align:center; zentriert (siehe Kommentare im Queltext)
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben