3 elemente horizontal

[homplom]

ich würde gerne im maincontent meiner page drei elemente horizontal nebeneinander anordnen, und zwar:
div, h1, div

ich hab allerdings probleme es korrekt im firefox angezeigt zu bekommen.

wenn ich versuche allen drei elementen float: left zuzuweisen verschwinden elemente komplett, alle auf inline zu stellen bringt auch nicht den gewünschten erfolg.

was mich besher am nähesten gebracht hat war eine kombination aus float, inline und inline block, allerdings wird es nur im explorer wie gewünscht angezeigt, firefox verschiebt das erste div etwa um ein pixel nach oben.

explorer:
http://www.funpic.de/foto/487773

firefox:
http://www.funpic.de/foto/487772

<div id="PreHeadline"></div>  
  <h1>Home</h1>  
  <div id="AfterHeadline"></div>

    #PreHeadline {  
       background-color: #B4B4B4;  
       height: 21px;  
       width: 100px;  
       margin-top: 7px;  
       float: left;  
    }  
  
    h1 {  
       font-size: 28px;  
       color: #B4B4B4;  
       width: 100%;  
       margin-top: 0px;  
       display: inline;  
    }  
  
    #AfterHeadline {  
       background-color: #B4B4B4;  
       height: 21px;  
       width: 100px;  
       margin-top: 7px;  
       display: inline-block;  
    }

die div elemente mit ner border vorzutäuschen gelingt nicht da der rahmen wesentlich größer ausfällt als die schrift selbst.

die h1 in ein div einzunesten, den hintergrund grau zu setzen und den hintergrund der h1 weiß zu setzen bringt auch nicht den gewünschten erfolg und bilder wollte ich eigentlich nicht für jede überschrift der seite basteln müssen.

wenn jemand eine lösung parat hat, oder zumindest nen workaround, währ ich sehr dankbar!

[Matthias Apsel]

Om nah hoo pez nyeetz, homplom!

Es ist nicht notwendig, zusätzliche Elemente für die Gestaltung zu verwenden.

border kann man getrennt für alle 4 Seiten eines Elementes definieren. Schau ins Wiki.

text-align (ebenfalls im Wiki) sorgt für eine Zentrierung, sodass sich ergibt: <h1>Überschrift</h1>

Mehr als eine Überschrift erster Ordnung sollte es in einer Seite nicht geben, deshalb braucht man weder Klassen noch IDs, es sei denn, du möchtest die h1 auf verschiedenen Seiten unterschiedlich gestalten.

im CSS:

h1 {border:        100px solid grey;
    border-top:    0 none;
    border-bottom: 0 none;

    text-align: center;}

Matthias

[homplom]

Om nah hoo pez nyeetz, homplom!

ich sprech leider kein mexikanisch (?), den namen hab ich zufällig gewählt, was bedeutet er den? :)

Es ist nicht notwendig, zusätzliche Elemente für die Gestaltung zu verwenden.

border kann man getrennt für alle 4 Seiten eines Elementes definieren. Schau ins Wiki.

text-align (ebenfalls im Wiki) sorgt für eine Zentrierung, sodass sich ergibt:
<h1>Überschrift</h1>

Mehr als eine Überschrift erster Ordnung sollte es in einer Seite nicht geben, deshalb braucht man weder Klassen noch IDs, es sei denn, du möchtest die h1 auf verschiedenen Seiten unterschiedlich gestalten.

im CSS:

h1 {border:        100px solid grey;

border-top:    0 none;
    border-bottom: 0 none;

text-align: center;}

>   
> Matthias  
  
ich hab das jetzt noch einmal probiert, aber mit der border variante bekomme ich nicht ganz das resultat das ich anstrebe. bei der border variante werden die rahmen zu hoch, ich will quasi das der rand auf der horizontalen linie mit der überschrift abschliest.  
  
ich hab nochmal einen screenshot gemacht der es hoffendlich verständlicher macht, der rote bereich soll wegfallen:  
  
[zur verdeutlichung](http://www.funpic.de/foto/487792)  
  
  
es soll am ende eher so aussehen wie in dem screenshot "explorer:" aus meinem ersten post zu sehen ist, hier ist er nochmal:  
  
[wie internet explorer es darstellt](http://www.funpic.de/foto/487773)  
  
  
ganz zum schluss sollen eigentlich auch noch zwei bilder in den linken und den rechten rahmen rein (deswegen wäre die variante mit dem seperaten divs vieleicht auch praktischer), aber das, so hoffe ich, kriege ich dann selbst gebacken.

[Matthias Apsel]

Om nah hoo pez nyeetz, homplom!

ganz zum schluss sollen eigentlich auch noch zwei bilder in den linken und den rechten rahmen rein (deswegen wäre die variante mit dem seperaten divs vieleicht auch praktischer), aber das, so hoffe ich, kriege ich dann selbst gebacken.

Dafür bietet sich dann an, zwei Hintergrundbilder für die Überschrift zu verwenden und keinen Rahmen. Wobei es ohne zusätzliche Elemente relativ schwierig ist, dafür zu sorgen, dass der graue Hintergrund immer bis an den Text heran reicht. Mein erster Vorschlag:

<h1><span>Überschrift</span></h1>

h1 {text-align:          center;     background-color:    white;     background-image:    url(Bild1), url(Bild2);     background-position: left center, right center;}

Du verwendest also mehrere Hintergrundbilder und nimmst in Kauf, dass die Seite in älteren Browsern nicht exakt wie gewünscht aussieht. Für eine private Seite soll man sich das durchaus leisten.

Matthias

[homplom]

Om nah hoo pez nyeetz, homplom!

ganz zum schluss sollen eigentlich auch noch zwei bilder in den linken und den rechten rahmen rein (deswegen wäre die variante mit dem seperaten divs vieleicht auch praktischer), aber das, so hoffe ich, kriege ich dann selbst gebacken.

Dafür bietet sich dann an, zwei Hintergrundbilder für die Überschrift zu verwenden und keinen Rahmen. Wobei es ohne zusätzliche Elemente relativ schwierig ist, dafür zu sorgen, dass der graue Hintergrund immer bis an den Text heran reicht. Mein erster Vorschlag:

<h1><span>Überschrift</span></h1>

h1 {text-align:          center;
    background-color:    white;
    background-image:    url(Bild1), url(Bild2);
    background-position: left center, right center;}

Du verwendest also mehrere Hintergrundbilder und nimmst in Kauf, dass die Seite in älteren Browsern nicht exakt wie gewünscht aussieht. Für eine private Seite soll man sich das durchaus leisten.

Matthias

ist leider nicht für eine private homepage, deswegen währs mir relativ wichtig das es auch in etwas älteren browsern noch ordentlich dargestellt wird.

ich kann leider nicht nachvollziehen warum firefox das div links neben der headline um einen pixel nach oben versetzt und das auf der rechten seite gleich auf liegt. liegt der fehler an mir oder ist das ein browser seitiger bug?

ich hab das mal im bildbearbeitungs programm so zusammen geschustert wie ichs auch gern im browser hätte:

http://www.funpic.de/foto/487812

und hier nochmal wie es im firefox angezeigt wird:

http://www.funpic.de/foto/487772

tut mir leid wegen der umständlichen links, aber das mit dem bild einfügen funktioniert nicht so recht, liegt vieleicht am hoster.

die großen grauen flächen neben der schrift wollte ich per background farbe simulieren und nur die beiden enden ganz links und rechts mit bildern ergänzen um die bild dateien möglichst klein zu halten. bringt das überhaupt etwas oder denke ich da zu umständlich?

[Matthias Apsel]

Om nah hoo pez nyeetz, homplom!

ich kann leider nicht nachvollziehen warum firefox das div links neben der headline um einen pixel nach oben versetzt und das auf der rechten seite gleich auf liegt. liegt der fehler an mir oder ist das ein browser seitiger bug?

Das wird er wahrscheinlich nicht tun, ich denke, das was du dort als "verschoben" bezeichnest, wird die box sein, in der "Leistungen" steht.

die großen grauen flächen neben der schrift wollte ich per background farbe simulieren und nur die beiden enden ganz links und rechts mit bildern ergänzen um die bild dateien möglichst klein zu halten. bringt das überhaupt etwas oder denke ich da zu umständlich?

Es gibt grundsätzlich mehrere Möglichkeiten zwei habe ich dir aufgezeigt. Wenn die grauen Balken bis an die Schrift heranreichen sollen, die mit

<h1><span>Überschrift</span></h1>

Die Grafiken realisierst du mit multiplen Hintergrundbildern oder durch verwenden von generiertem Inhalt mit ::before bzw. ::after.

Ältere Browser stellen dann eben nur den grauen Streifen dar.

Matthias

[Gunnar Bittersmann]

@@homplom:

nuqneH

ich hab das mal im bildbearbeitungs programm so zusammen geschustert

Damit kannst du bei „Bildbearbeitungsprogramm“ und „zusammengeschustert“ gleich weitermachen.

Qapla'

PS: Und zitiere bitte sinnvoll, nicht alles!

[Matthias Apsel]

Om nah hoo pez nyeetz, homplom!

ich hab nochmal einen screenshot gemacht der es hoffendlich verständlicher macht, der rote bereich soll wegfallen:

Die Höhe des Rahmens richtet sich nach der Höhe des Elements, siehe Boxmodell im Wiki, mit padding und ggf. line-height lässt sich dies beeinflussen.

Für den Firefox gibt es Firebug, da kannst du genau sehen, welches Layout dein gewünschtes Element hat (Dragon-Fly für Opera, Entwicklertools in den anderen Browsern, Rechtsklick -> Element untersuchen.

Es gibt auch border-image (ebenfalls im Wiki), die Unterstützung durch die Browser ist afaik etwas geringer als die für multiple Hintergründe.

Matthias

[homplom]

ich habs jetzt mal über die border variante mit line-hight probiert, funktioniert leider auch nicht.

jetzt sind sogar beide grauen bereiche, also links UND rechts um 1 pixel nach oben verschoben:

http://www.funpic.de/foto/488815

die elemente die direkt nach der headline kommen sehen folgendermaßen aus:

  <div id="divMainContent">  
  <h1>  
  Home  
  </h1>  
  <div class="divMainContentSplitOne">  
  <div class="MainContentDivTopBorderless">  
    <h2>Leistungen</h2>  
    <a href="Leistungen.html"><img src="assets/images/home/leistungen.gif" alt="Leistungen Bild" class="MainContentPictures"/></a>  
    <p>Eine detailierte Auflistung unseres Dienstleistungsangebotes. Bei offenen Fragen Kontaktieren Sie uns bitte per Telefon oder E-mail.</p>  
</div>

h1 {  
	font-size: 28px;  
	color: #B4B4B4;  
	margin-top: 0px;  
	line-height: 21px;  
	border-right-width: 100px;  
	border-left-width: 100px;  
	border-right-style: solid;  
	border-left-style: solid;  
	border-right-color: #B4B4B4;  
	border-left-color: #B4B4B4;  
	text-align: left;  
	float: left;  
	padding-right: 3px;  
	padding-left: 3px;  
}  
  
  
  
  
h2 {  
	font-size: 20px;  
	margin-top: 0px;  
	margin-bottom: 6px;  
}  
  
.  
.  
.  
  
#divMainContent {  
	overflow: auto;  
	width: auto;  
	margin-bottom: 13px;  
	color: #B4B4B4;  
	padding-right: 5px;  
	padding-left: 13px;  
	padding-top: 15px;  
	padding-bottom: 9px;  
}  
  
.MainContentPictures {  
	margin-right: 5px;  
	border-top-style: none;  
	border-right-style: none;  
	border-left-style: none;  
	border-bottom-style: none;  
	float: left;  
}  
  
.MainContentDivMargin {  
	height: 170px;  
	border-top-width: thin;  
	border-top-style: solid;  
	border-top-color: #EE6E00;  
	padding-top: 15px;  
}  
  
.MainContentDivTopBorderless {  
	height: 170px;  
}  
  
.divMainContentSplitOne {  
	text-align: left;  
	width: 335px;  
	margin-bottom: 30px;  
	float: left;  
	clear: left;  
}  
  

die drei punkte bedeuten das da noch anderer code ist der aber (meines achtens) hiefür unwichtig ist, deswegen hab ich ihn mal weggelassen.

ich weis nicht ob es helfen würde wenn ich die komplette html index + css hier rein stelle oder zwecks der übersichtlichkeit eben nur die schnippsel von denen ich vermute das sie relevant sind.

[Matthias Apsel]

Om nah hoo pez nyeetz, homplom!

Das Beste ist, du stellst ein online-Beispiel zur Verfügung.

Matthias

[homplom]

Om nah hoo pez nyeetz, homplom!

Das Beste ist, du stellst ein online-Beispiel zur Verfügung.

Matthias

würde ich echt gerne, aber nachdem ich erst eine neue domain reserviert hatte, bin ich jetzt gut 3 stunden mit dreamweaver cs5 am rödeln um eine verbindung zum remote server aufzubauen.

es will mir einfach nicht gelingen, vieleicht probier ichs heut abend noch einmal. wenn ich bis dahin nicht bereits ein stück aus meinem rechner gebissen habe.

[homplom]

Das Beste ist, du stellst ein online-Beispiel zur Verfügung.

ich habe feuer gemacht!

momentan ist noch diese fehlermeldung zu lesen:
Service Temporarily Unavailable

The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.

aber auf den server geladen sind die dateien auf jedenfall, ich hoffe mal das der server heute früh dann wieder funktioniert.

hier die url:
www.zu-test-zwecken.de

[Matthias Apsel]

Om nah hoo pez nyeetz, homplom!

die Tatsache, dass du die Seiten mit dw machst, lässt Schlimmes ahnen. Kostenlosen Webspace ohne Werbung und viel Aufwand gibts bei lima-city.

Matthias

[homplom]

die Tatsache, dass du die Seiten mit dw machst, lässt Schlimmes ahnen. Kostenlosen Webspace ohne Werbung und viel Aufwand gibts bei lima-city.

aber auch nur für jemanden der in deren forum aktiv ist:

"* Eine kostenlose .de-Domain bekommst du, wenn du dir diese ersteigert hast in unseren Auktionen! Danach stehen dir 3 Möglichkeiten zur Verfügung."

"Gulden kannst du kostenlos im Forum durch das Schreiben von Beiträgen verdienen."

was past den an dreamweaver nicht? kann sein das im quelltext einige leerzeichen zuviel sind, aber das hab ich wohl selbst zu verschulden, nicht dreamweaver. ansonsten sieht der code recht sauber aus. (zumindest für mich als laien)

nachdem die fehlermeldung von wartungs arbeiten oder capazität problemen spricht, geh ich davon aus das es sich um einen fehler seitens des hoster (strato) handelt und nicht von mir!?

[Matthias Apsel]

Om nah hoo pez nyeetz, homplom!

die Tatsache, dass du die Seiten mit dw machst, lässt Schlimmes ahnen. Kostenlosen Webspace ohne Werbung und viel Aufwand gibts bei lima-city.

aber auch nur für jemanden der in deren forum aktiv ist:

nein [ungetestet]

"* Eine kostenlose .de-Domain bekommst du, wenn du dir diese ersteigert hast in unseren Auktionen! Danach stehen dir 3 Möglichkeiten zur Verfügung."

domain ist nicht dasselbe wie webspace. Deine Seite ist dann erreichbar unter www.lima-city.de/meine_seite/ oder so ähnlich.

was past den an dreamweaver nicht? kann sein das im quelltext einige leerzeichen zuviel sind, aber das hab ich wohl selbst zu verschulden, nicht dreamweaver. ansonsten sieht der code recht sauber aus. (zumindest für mich als laien)

Dreamweaver erstellt HTML-Dateien, ohne dass man selbst Ahnung davon haben muss. Diese sind meist syntaktisch wenig sinnvoll und zeichnen sich durch eine Vielzahl von nicht benötigten Klassen aus, wie man an deinem sehen kann.

nachdem die fehlermeldung von wartungs arbeiten oder capazität problemen spricht, geh ich davon aus das es sich um einen fehler seitens des hoster (strato) handelt und nicht von mir!?

Du solltest zunächst einmal die Strato-webseiten verwenden um Zugriff zu deiner Domain zu erhalten, dann dir dort die Hilfeseiten durchlesen, und vielleicht mal ein Programm wie FileZilla verwenden um zu testen, ob es funktioniert, bevor du DW damit beauftragst.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

... Diese sind meist syntaktisch wenig sinnvoll ...

semantisch

Matthias

[homplom]

die Tatsache, dass du die Seiten mit dw machst, lässt Schlimmes ahnen. Kostenlosen Webspace ohne Werbung und viel Aufwand gibts bei lima-city.

der webspace bei lima ist anscheinend in einem passwort geschütztem bereich.

ich habs jetzt mal gezipt und auf rapdishare hochgeladen, ist das auch in ordnung?

link:
rapdishare

[homplom]

die Tatsache, dass du die Seiten mit dw machst, lässt Schlimmes ahnen. Kostenlosen Webspace ohne Werbung und viel Aufwand gibts bei lima-city.

so wie ichs verstanden habe ist mein absoluter pfad bei lima-city folgender:

http://www.lima-city.de/home/webpages/lima-city/plomhom/html/

plomhom ist dort mein benutzername. allerdings hab ichs wohl wieder falsch verstanden den es funktioniert nicht.

[Matthias Apsel]

Om nah hoo pez nyeetz, homplom!

so wie ichs verstanden habe ist mein absoluter pfad bei lima-city folgender:

http://www.lima-city.de/home/webpages/lima-city/plomhom/html/

plomhom ist dort mein benutzername. allerdings hab ichs wohl wieder falsch verstanden den es funktioniert nicht.

eigentlich http://plomhom.lima-city.de/

Matthias

[homplom]

eigentlich http://plomhom.lima-city.de/

ahja, dann ist die faq vieleicht nichtmehr aktuell.

kann man den jetzt erkenne woran es liegen könnte?
hat doch mit sicherheit irgendwas mit float: oder display: zutun!?

[Matthias Apsel]

Om nah hoo pez nyeetz, homplom!

kann man den jetzt erkenne woran es liegen könnte? hat doch mit sicherheit irgendwas mit float: oder display: zutun!?

Nu mal ganz langsam.

Wenn du die Seite so hast, wie sie vor 60 Minuten noch war (fontsize 28, lineheight 21) und die Seite mal quer durch alle Auflösungen zoomst, stellst du fest, dass das beschriebene Pixelverschieben nur durch das unterschiedliche Renderverhalten zu stande kommt.

Matthias

[homplom]

Wenn du die Seite so hast, wie sie vor 60 Minuten noch war (fontsize 28, lineheight 21) und die Seite mal quer durch alle Auflösungen zoomst, stellst du fest, dass das beschriebene Pixelverschieben nur durch das unterschiedliche Renderverhalten zu stande kommt.

da muss ich passen, ich finde den reiter "ansicht" im neusten firefox nicht und wenn ich unter einstellungen an den font sizes rumstelle hat das keinen einfluss auf die seite.

was soll mir das sagen?

[homplom]

also an dem nachfolgenden content kanns schonmal nicht liegen weil das selbe problem noch vorhanden ist selbst wenn ich alles restliche aus dem content lösche oder in nem ganz neuen dokument die rahmen setze, sieht im firefox nie so aus wie es soll.

[Matthias Apsel]

Om nah hoo pez nyeetz, homplom!

also an dem nachfolgenden content kanns schonmal nicht liegen weil das selbe problem noch vorhanden ist selbst wenn ich alles restliche aus dem content lösche oder in nem ganz neuen dokument die rahmen setze, sieht im firefox nie so aus wie es soll.

in manch anderen je nach Zoomstufe auch nicht.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, homplom!

da muss ich passen, ich finde den reiter "ansicht" im neusten firefox

in jedem[1] Browser STRG+"+" oder STRG+Mausrad

was soll mir das sagen?

dass du daran nichts machen kannst.

[1] In Browsern, in denen das nicht so ist, ist es anders. Matthias

[homplom]

in jedem[1] Browser STRG+"+" oder STRG+Mausrad

ah, gut zu wissen, danke.

was soll mir das sagen?

dass du daran nichts machen kannst.

das is mir heut nacht auch klar geworden als ich auf den link gestoßen bin:
http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/

ziemlich ernüchterndes endergebnis dafür das ich mich jetzt 3 tage darauf konzentriert habe...

muss ich mir halt was anderes einfallen lassen für die headlines.

wie auch immer, glaub das ist erstmal die letzte website die auf meinem mist wächst, vieleicht in 10 jahren nochmal wenn man mit dem zeug entlich vernünftig arbeiten kann. (irgendwie glaub ichs nicht)

aufjedenfall danke für die hilfe!

[Matthias Apsel]

Om nah hoo pez nyeetz, homplom!

muss ich mir halt was anderes einfallen lassen für die headlines.

Wenn es dir so wichtig ist, dass die Balken links und rechts genau dieselbe Höhe haben wie der Text (was machst du, wenn der Text Unterlängen hat?), dann folgender Alternativvorschlag:

Mach die Überschrift als Bild (nur die Streifen)

h1: {text-align: left;
     color: #b4b4b4;
     background-image: url(Pfad zum Bild); background-position: /*je nach Sprite-Verwendung*/;}

Mach das Bild auf jeden Fall lang genug. Durch das CSS ist sichergestellt, dass bei deaktivierten Grafiken der Text zu sehen ist und bei aktivierten Grafiken ist der Text nicht sichtbar (ostfriesische Nationalflagge).

Die Grafiken links und rechts machst du extra, steckst jedoch alle diese Bilder in eine Grafik (Sprites).

#home:before {content: url(Pfad zum Bild); background-position: /* s.o. */}
#home:after {content: url(Pfad zum Bild); background-position: /* s.o. */}

[1]

<h1 id="home">Home</h1>

[1] Pseudoelemente werden mit :: gekennzeichnet, die Schreibweise mit einem : versteht aber auch der IE8.

Matthias