Ratschläge bei Publizierung eines fertigen Layouts gesucht - Seite 2

Black Fladder · #11 (**permalink**) 19.08.2004, 19:41

Thx - Tut mir Leid, dass ich immer wieder so sau dumme Fragen stelle -.-'. Mir fällts au immer erst hinterher auf und außerdem bin ich grad n bissel in Eile wegen dem Verein - mach ich ja auch ehrenamtlich - und was das heißt, dürft ja hinlänglich bekannt sein

Eine Sache noch was den Balken oben angeht:

1. Vermutlich ist er in dieser Form n bissel zu groß. Muss mir aber noch mal angucken, wie sich float zu relativ zu absolut verhält - dann kommen solche Dinge gar nimmer auf, aber dazu siehe anfang dieser Antwort.

2. Der Div "wird ja nur angezeigt", wenn er "gefüllt" ist - Soll ich in meinem Fall einfach ein transparentes Image drüber legen or gibts da ne Angabe für, was ich mir allerdings nicht vorstellen kann?
Edit: Ach und außerdem - wie groß die Grafik? Durch die relative Angabe, gibts ja keine beschränkung - und wenn zu klein, wird der div-Container ja nicht voll dargestellt

Danke nochmal,

Fladdy

EDIT:

So siehts jetzt aus, nach nem Lösungsversuch:
Der Browser müsste jetzt ja nicht mehr im Quirks, sondern im Standard-Modus arbeiten, right?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Musikverein Herlikofen 1930 e.V.</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
#bigdiv { position:relative; margin:5% 20% 0 20%;  background-color:#FFFFFF; background-image: url(Streifen.gif); background-repeat:repeat-x; background-position: top; }
</style>
</head>

<body>
<div id="bigdiv">
[img]Bilder/Blank.gif[/img]
</div>
</body>
</html>

terrikay · #12 (**permalink**) 19.08.2004, 20:58

Zitat:

Zitat von Black Fladder

..... bin ich grad n bissel in Eile wegen dem Verein - mach ich ja auch ehrenamtlich - und was das heißt, dürft ja hinlänglich bekannt sein

Das ist schlecht! Das erste CSS-Design dauert immer lange und man sollte Zeit haben!

Zitat:

Muss mir aber noch mal angucken, wie sich float zu relativ zu absolut verhält

Hähl - das muß ich jetzt aber nicht verstehen, oder?

Zitat:

Der Div "wird ja nur angezeigt", wenn er "gefüllt" ist - Soll ich in meinem Fall einfach ein transparentes Image drüber legen or gibts da ne Angabe für, was ich mir allerdings nicht vorstellen kann?

Das mit dem transparenten gif vergiß mal bitte wieder ganz schnell! Später hast Du Inhalt im div, und wenn nicht, dann gib halt eine Mindesthöhe an!

Zitat:

Edit: Ach und außerdem - wie groß die Grafik? Durch die relative Angabe, gibts ja keine beschränkung - und wenn zu klein, wird der div-Container ja nicht voll dargestellt

Versteh ich jetzt nicht....... - der Container paßt sich der Webseite an, und die Grafik kachelt sich - ganz einfach.

Zitat:

Der Browser müsste jetzt ja nicht mehr im Quirks, sondern im Standard-Modus arbeiten, right?

Genau!

Ansonsten ist doch Dein Versuch schon nicht schlecht - jetzt bau mal die Logos oben rechts und links ein als nächstes! - und nimm das Blind-gif wieder raus.....

Black Fladder · #13 (**permalink**) 20.08.2004, 14:56

Meinte oben nur, dass ich mir nochmal angucken muss, wie sich die verschiedenen Möglichkeiten Größen anzugeben in ihrem Verhalten unterscheiden.

Ich krieg das ohne transparentes gif net hin x.x' ich hab in den Div-Container ein "min-height" definiert - aber der IE schluckts einfach net- wird wohl von IE 6.0 zumindest nicht unterstützt. Hier der Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Musikverein Herlikofen 1930 e.V.</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
#bigdiv {	position:relative; margin:5% 20% 0 20%; background-color:#FFFFFF; 
			background-image: url(Streifen.gif); background-repeat:repeat-x; background-position: top; min-height:180px; }
</style>
</head>

<body>
<div id="bigdiv">


</div>
</body>
</html>

terrikay · #14 (**permalink**) 20.08.2004, 15:08

Zitat:

Zitat von Black Fladder

Ich krieg das ohne transparentes gif net hin x.x' ich hab in den Div-Container ein "min-height" definiert - aber der IE schluckts einfach net- wird wohl von IE 6.0 zumindest nicht unterstützt.

Nein, für den IE mußt Du ein height angeben - der zieht den Container dann aber im Gegensatz zu den anderen alleine weiter....... such mal im Forum, wie das geht.

Aber das Blindgif ist dennoch unnötig - es kommen noch mehr Container und Text! Außerdem kann man Abstände mit padding erzeugen usw.... denk einfach nicht mehr in Tabellen ! die divs sind gleichzeitig flexibler und stabiler als Tabellen!

Und jetzt mach mal weiter - bau die beiden Logos ein! - Das Layout ist ja noch lange nicht fertig!

Black Fladder · #15 (**permalink**) 20.08.2004, 16:55

Ich dreh mich im Kreis - hier mal der aktuelle Code, hab zwei weitere Container zugefügt - guck mal, was da jetzt nicht deiner Vorstellung entspricht - ich krieg die Sache mit der margin-Ausrichtung bei den verschachtelten Divs net so hin

Gruß
Blacky
Außerdem bei Tripod on gestellt - durch die Werbeleiste allerdings verfälscht

http://mitglied.lycos.de/blackfladder/

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Musikverein Herlikofen 1930 e.V.</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
#bigdiv {	position:relative; margin:5% 20% 0 20%; background-color:#FFFFFF; 
			background-image: url(Streifenh.gif); background-repeat:repeat-x; background-position: top; height:179px; }
#leftdiv {  position:relative; background-color:#FFFFFF; float:left; background-image: url(Streifenv.gif);
			background-repeat:repeat-y; width:179px; margin:15% 0 0 0 }
#rightdiv {  position:relative; background-color:#FFFFFF; float:right; background-image: url(Streifenv.gif);
			background-repeat:repeat-y; width:179px; margin:15% 0 0 0 }
</style>
</head>
<body>
<div id="bigdiv">
  <div id="leftdiv"> </div>
  <div id="rightdiv"> </div>
</div>
</body>
</html>

terrikay · #16 (**permalink**) 20.08.2004, 17:51

Der Ansatz ist nicht schlecht - auch wenn man im Moment online noch nicht viel sieht, weil Du für die seitlichen Streifen keine Höhe angegeben hast.

Ich hab mal weitergebastelt - schau es Dir mal an. Dann kannst Du ja mal auf der Basis weiterprobieren - ist auch noch nicht optimal.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Musikverein Herlikofen 1930 e.V.</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
<!--
body {background-color:#fff;}
#bigdiv {   position:relative; 
margin:5% 20% 0 20%; 
background:#fff url(Streifenh.gif) repeat-x  top; 
 }
#leftdiv { 
background:url(Streifenv.gif)  repeat-y 0 0;

 }
#rightdiv {
background:url(Streifenv.gif)  repeat-y 0 0;

}
#inhalt {
padding-top:100px;
margin:0 190px;
min-height: 400px;
}

*html  #inhalt {height:400px;}    /*nur für den IE*/
-->
</style>
</head>
<body>
<div id="bigdiv">
  [img]purpl012.jpg[/img]
 [img]purpl012.jpg[/img]
   <br style="clear:both">
  <div id="leftdiv">
  <div id="rightdiv">
  <div id="inhalt">
     und hier der Inhalt hin</div>
</div> 
 </div>  
</div> 
</body>
</html>

Edit: So müßte es jetzt gehen - hab's noch mal geändert und viel geschachtelt.

Wird immer so hoch wie der Inhalt.
Die genauen Werte bitte selber tüfteln.

Ein Problem gibt es noch:

Bei weniger als 1024px Breite wird der Inhaltsbereich extrem eng - ich würde weniger margin an den Seiten lassen.

Und noch ein Tipp: such Dir einen anderen Hoster. Gibt auch bessere kostenlose Hoster - z.B. Arcor - ist werbefrei.

Black Fladder · #17 (**permalink**) 21.08.2004, 14:45

Thx, werd mir dein Werk mal anschaun ^^"

Wegen tripod - war nur zum Test - Server bei 1&1 steht schon bereit, aber trotzdem danke für den Tipp - ich meld mich denn, sobald ich mehr weiß - nur hier schnell noch ne Sache, die mir bei meinem weiteren Versuch Kopfzerbrechen bereitet hat:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Musikverein Herlikofen 1930 e.V.</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
#bigdiv {	position:relative; margin:5% 20% 0 20%; background-color:#FFFFFF; 
			background-image: url(Streifenh.gif); background-repeat:repeat-x; background-position: top; height:179px; }
#leftdiv {  position:relative; background-color:#000000; float:left; background-image: url(Streifenv.gif);
			background-repeat:repeat-y; width:179px; margin: 15% 0 0 -20% }
#rightdiv {  position:relative; background-color:#000000; float:right; background-image: url(Streifenv.gif);
			background-repeat:repeat-y; width:179px; margin: 15% -20% 0 0 }
</style>
</head>
<body>
<div id="bigdiv">
  <div id="leftdiv"> </div>
  <div id="rightdiv"> </div>
</div>
</body>
</html>

Siehe folgender Screenie:

Die Abstände der kleinen Div-Container zum Großen sind trotz jeweils identischer Angaben nicht identisch, y?

Ich guck mir derweil mal wie gesagt dein Teil da an *g* ^^

Black Fladder · #18 (**permalink**) 21.08.2004, 15:43

Zu deinem Vorschlag, Terrikay:

Hier der Code und im Screenie darunter das entsprechende Ergebnis:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Musikverein Herlikofen 1930 e.V.</title> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 
<!-- 
body {background-color:#fff;} 
#bigdiv {   position:relative; 
margin:5% 25% 0 25%; 
background:#fff url(Streifenh.gif) repeat-x  top; 
 } 
#leftdiv { 
background:url(Streifenv.gif)  repeat-y -120px 0; 

 } 
#rightdiv { 
background:url(Streifenv.gif)  repeat-y 350px 0; 

} 
#inhalt { 
padding-top:100px; 
margin:0 190px; 
min-height: 400px; 
} 

*html  #inhalt {height:400px;}    /*nur für den IE*/ 
--> 
</style> 
</head> 
<body> 
<div id="bigdiv"> 
  [img]ol.gif[/img] 
 [img]or.gif[/img] 
   <br style="clear:both"/> 
  <div id="leftdiv"> 
  <div id="rightdiv"> 
  <div id="inhalt"> 
     und hier der Inhalt hin</div> 
</div>  
 </div>  
</div>  
</body> 
</html>

Dadurch stellen sich mir einige Fragen:

1. Wie man sieht, is das Bild hier offensichtlich nicht im Vollbildmodus angezeigt. Ursprünglich war vorgesehen, dass sich beim Verkleinern des Ausgabefensters nur der obere Balken zusammenschiebt, die beiden roten Grafiken in ihrer Form allerdings erhalten bleiben. Hier allerdings ergibts sich nur bei der rechten Grafik ein Ebeneneffekt: Die rechte rote Grafik schiebt sich ab einer bestimmten Position unter den Balken - hat das was mit dem Floaten zu tun? Ich blick da noch net ganz durch.

2. Die beiden vertikalen Balken verschwinden ebenfalls durch die negative Marginausrichtung, wenn sie den "bigdiv"-Container verlassen - auch Floating? Wobei ja ne Angabe fürs Clearen gemacht wurde?

Ansonsten hat die Sache mit dem Positionieren der roten Grafiken einwandfrei geklappt - den Margin seitlich wollte ich erst verkleinern, musste ihn dann allerdins wieder größer definieren, da die besagten zwei Grafiken zu groß waren.

Eventuell werd ich, wenn das Layout steht, die ein bissel kleiner machen, die Balken dann etwas schmäler, dürft ja kein Problem darstellen.

Dann könnte man den Margin locker enger fassen, um dadurch auch Rücksicht auf Anwender mit kleinerer Auflösung zu nehmen.

Okay, soweit so gut - jetzt wärs supa, wenn wir zu meinem Verständnis diese Fragen und die im vorherigen Post von mir klären könnten, denn dann geht die Sache, glaub ich, voll schneller ihrem Ende zu ^^"

Blacky

terrikay · #19 (**permalink**) 21.08.2004, 16:17

Sorry - ich hatte oben Fehler drin.....

hier nochmal der jetzt neu ausgetüftelte Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Musikverein Herlikofen 1930 e.V.</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
<!--
body {background-color:#c0c0c0;}
#bigdiv {   position:relative;
margin:5% 10% 0 10%;
background:#fff url(http://mitglied.lycos.de/blackfladder/Streifenh.gif) repeat-x  top;
 }
#leftdiv {
background:url(http://mitglied.lycos.de/blackfladder/Streifenv.gif)  repeat-y left;

 }
#rightdiv {
background:url(http://mitglied.lycos.de/blackfladder/Streifenv.gif)  repeat-y right;

}
#inhalt {
padding-top:100px;
margin:0 190px;
min-height: 400px;
}

*html  #inhalt {height:400px;}    /*nur für den IE*/
-->
</style>
</head>
<body>
<div id="bigdiv">
  [img]http://mitglied.lycos.de/blackfladder/ol.gif[/img]
 [img]http://mitglied.lycos.de/blackfladder/or.gif[/img]
   <br style="clear:both">
  <div id="leftdiv">
  <div id="rightdiv">
  <div id="inhalt">
     und hier der Inhalt hin</div>
</div> 
 </div> 
</div> 
</body>
</html>

Der hat leider nur einen Schönheitsfehler, wie ich grad feststelle: im IE werden die beiden gefloateten Bilder hinter dem div angezeigt?

Kann das jemand erklären?

O.k. - Ansatz verworfen - neuer Plan!

Du solltest die beiden seitlichen Grafiken schmaler machen - nur die schwarzen Balken, nicht so viel weiß dazu - sonst bekommst Du es nur schwer vernünftig ausgerichtet und es bleibt Dir nicht genug Platz für den Inhalt - besonders bei kleinen Monitorauflösungen.

Und wenn der IE die floatenden Bilder nicht anzeigen mag, was ich wirklich nicht verstehe, dann müssen die beiden Logos eben absolut positioniert werden - dadurch, dass #bidiv relativ positioniert ist, geht das und die werden sich an ihm ausrichten. Einen halt top, left und einen top, right positionieren - diese Punkte bleiben immer gleich, egal bei welcher Auflösung...... Wenn der IE die dann immer noch nicht anzeigen mag, helfen wir mit z-index nach!

Nochmal gezielt zu Deinen Fragen:

Zitat:

1. Wie man sieht, is das Bild hier offensichtlich nicht im Vollbildmodus angezeigt. Ursprünglich war vorgesehen, dass sich beim Verkleinern des Ausgabefensters nur der obere Balken zusammenschiebt, die beiden roten Grafiken in ihrer Form allerdings erhalten bleiben. Hier allerdings ergibts sich nur bei der rechten Grafik ein Ebeneneffekt: Die rechte rote Grafik schiebt sich ab einer bestimmten Position unter den Balken - hat das was mit dem Floaten zu tun? Ich blick da noch net ganz durch.

Passiert bei mir weder im Firefox noch im Opera, sondern nur im IE - und da hab ich beim besten Willen keine Erklärung für, s.o.! Scheiß Browser -> da hilft wohl nur Plan B, s.o.

Zitat:

2. Die beiden vertikalen Balken verschwinden ebenfalls durch die negative Marginausrichtung, wenn sie den "bigdiv"-Container verlassen - auch Floating? Wobei ja ne Angabe fürs Clearen gemacht wurde?

Du kannst ein Hintergrundbild nicht aus seinem Container heraus anzeigen lassen - das geht mit Vordergrundbildern (jedenfalls in guten Browsern

), aber nicht mit Hintergrundbildern -> mach daher den Container breiter und nimm den weißen Streifen außen weg -> nur den schwarzen lassen.

Black Fladder · #20 (**permalink**) 22.08.2004, 12:17

Zitat:

Zitat von terrikay

Du solltest die beiden seitlichen Grafiken schmaler machen - nur die schwarzen Balken, nicht so viel weiß dazu - sonst bekommst Du es nur schwer vernünftig ausgerichtet und es bleibt Dir nicht genug Platz für den Inhalt - besonders bei kleinen Monitorauflösungen.

Und wenn der IE die floatenden Bilder nicht anzeigen mag, was ich wirklich nicht verstehe, dann müssen die beiden Logos eben absolut positioniert werden - dadurch, dass #bidiv relativ positioniert ist, geht das und die werden sich an ihm ausrichten. Einen halt top, left und einen top, right positionieren - diese Punkte bleiben immer gleich, egal bei welcher Auflösung...... Wenn der IE die dann immer noch nicht anzeigen mag, helfen wir mit z-index nach!

Okay - Folgendes hab ich geändert:

- Die "weißen"(<-- waren transparent) Flächen sind entfernt.

- Hab die ganzen Pfadangaben im Quelltext wieder relativ gestaltet - für mich lokal auf der Platte - kannst aber gern mit den anderen weiter machen - ich werd die Grafiken gleich mit den verbesserten Modellen "ohne weiß" ersetzen.

Wo's grad noch hängt:

Wie kann ich die Bilder absolut positionieren? o.o' Hirnrissige Frage - aber in deinem Tut steht nur was von div-Containern und "position:" kann ich innerhalb des <img>-Tags ja nicht verwenden, or? Bin schon auf die Idee gekommen für die absolute Positionierung ne extra id zu definiern aber des scheint ja etwas übertrieben *g* - du meintest ja auch was von "top, left" und "top, right" - nur wie ich das im <img>-Tag realisier, ist mir grad schleierhaft - sry

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln