Danke für den Hinweis, daß mit den Code-Boxen kannte ich noch nicht.
der Grund, warum der Seitenstreifen, der ja in den Hauptcontainer hineingesetzt wurde, dann wieder herausragen soll, erschließt sich mir auch nicht ganz.
Aber gut! Machbar ist's ja.
Gruß Ralph
Ich weiß zwar nicht wie das genau aussehen soll, aber wenn ich Deine Daten lade, stört mich, daß der Seitenstreifen bündig mit dem Hauptcontainer anfängt und links nicht darüber
herausragt. Wäre die u.g. CSS vielleicht ein Ansatz?
CSS:
@charset "utf-8";
body {
height: 100%;
width: 100%;
background-color: hsla(240,100%,90%,1);
}
#Container {
background-color: hsla(166,100%,44%,1);
height: 2000px;
width: 960px;
margin: 0 auto;
}
#Seitenstreifen {
background-color: hsla(60,100%,67%,1);
height: 352px;
width: 1200px;
top:50%; /*zentriert den div erstmal in die Bildschirmmitte*/
left:50%; /*zentriert den div erstmal in die Bildschirmmitte*/
position: absolute;
margin-top: -126px; /*hiermit positionierst Du den div neu (ausgehend von der Bildschirmmitte aus)*/
margin-left: -600px; /*hiermit positionierst Du den div neu (ausgehend von der Bildschirmmitte aus)
halbe Werte von height und width ins minus gesetzt ist die Mitte. */
}
Hi, bin zwar auch nicht der Ober Guru,
aber wie ich sehe, strebst Du erst einmal eine Grundstrukturierung an.
Tippe, daß sich Dein Inhalt im Container abspielen soll. Das ist schon mal O.K.
den body mit soviel css zu verzieren halte ich für falsch. Ein background-color oder background-image sollte da schön genügen.
Breiten über 2000px sind ein absolutes no-go. Selbst ein 27-Zoll Bildschirm kommt meist mit 1920x1080 Pixeln daher. Also ist mit allem was kleiner ist, scrollen unumgänglich und nicht gern gesehen.
Um es einigermaßen im Rahmen zu halten würde ich den Hauptcontainer zwischen 900- max 1200px Breite halten und die Höhe variabel gestalten.
Grundsätzlich halte ich die o.g. css Datei für sehr überladen und unübersichtlich. Hast Du die selber geschrieben, oder stammt die von einem externen Programm?
Falls Sie von einem externen Programm kommt, würde ich sie erstmal löschen und neu schreiben. Mit den wesentlich wichtigen Dingen anfangen, Hauptcontainer (Höhe,Breite,Hintergrundfarbe)
und dan die inneren div's (Höhe, Breite, Hintergrundfarbe), mehr braucht es erstmal nicht, aber man kann schon eine Struktur erkennen und sehen wie sich das ganze Objekt verhält.
Gruß Ralph
Ich denke auch daß das jeder für sich selbst entscheiden muß, ob Zocken Zeitverschwendung ist, oder nicht. Fernsehen ist hinsichtlich wohl auch kaum besser.
Mir hilft es zumindest den Stress vom Tag zu vergessen und kurzzeitig komplett abzuschalten. Danach ist der Kopf wieder frei und aufnahmefähig.
Gerne lege ich ein:
Dirt3 - meist online
WOT (knapp über 4000 Gefechte)
F1 2012
GTA IV inkl. TBoGt
und GTA V für PC wird sehnsüchtig erwartet. 
Hi Robby,
schau mal unter: http://www.html-seminar.de/css3-transform-scale.htm
Ich hab das so gemacht: Meinen Bildern ne Klasse mitgegeben. Diese Klasse im CSS mit :hover belegt und die transform: scale() Anweisung benutzt.
Bei mir sieht das wunderbar aus und da verrutscht auch nichts!
Hoffe nicht zuviel geholfen zu haben!
Gruß Ralph
Denke Du hast Recht Lauras,
Durch die ungünstige Positionierung im Quellcode hat man keine Chance das so hinzubekommen. Wenigstens habe ich es jetzt geschafft den content div so zusammenzusetzen daß ich ihn zwischen die beiden column setzen konnte, ohne daß die Funktionalität des Shops gelitten hat. Aber die Umgestaltung scheint doch mehr komplizierter zu sein als ich dachte. Falls da jemand schon Erfahrungen mit gesammelt hat, oder vlt. sogar etwas helfen mag, darf sich gern per PN oder E-Mail bei mir melden. Macht ja dann vlt. auch mehr Spass. Zeitdruck habe ich keinen, mach das nur so, zum Lernen.
Gruß Ralph
Hatte ich auch gedacht! Wenn Du aber dem Content ein margin-left von 300px mit gibst, damit er in die Mitte rutscht, schiebt er automatisch die anderen zwei nach hinten und den letzten raus aus dem parent, da sie ja im Quellcode erst nach dem Content kommen,
dann bringt es auch nichts denen noch ein float mitzugeben. z.B. left mit float left und margin-right 600px dann schiebt sich alles nach unten.
Ich habe mich dran gewagt einen Online Shop von seinem 960grid Outfit zu befreien und die Gestaltung mit css selbst zu übernehmen. Das funktioniert so weit ganz gut, aber jetzt hänge ich an einem "schwerwiegenden" Problem.
Nach heraus filtern des php-Codes ergibt sich folgende div Konstellation:
<body>
<div id="header"></div>
<div id="content"></div>
<div id="column_left"></div>
<div id="column_right"></div>
<div id="footer"></div>
</body>
Ursprünglich war der Shop, wie die div Bezeichnungen schon vermuten lassen, so aufgebaut: header(oben), column_left(links), content(mitte), column_right(rechts), footer(unten),
dadurch daß der content im html Dokument direkt nach dem header kommt, ist es mir nicht möglich die ursprüngliche Konstellation wiederherzustellen. Ich floate, span'e und tue. aber es klappt nicht.
Da sich der content über 2 php Dateien erstreckt, ist es auch nicht möglich den content zwischen die zwei column div's zu stecken. Das hab ich probiert, dann hat aber der ganze Shop nicht mehr funktioniert.
Das müßte doch irgendwie über css zu regeln sein? Gruß Ralph
P.S. Mit absoluter Positionierung klappt das natürlich wunderbar, ich wollte es aber dynamisch flexibel halten! 
Zum Spielen hab ich mal angelegt:
<!DOCTYPE html>
<html>
<head>
<title>Content in die Mitte floaten</title>
<meta charset="UTF-8">
<style type="text/css" rel="stylesheet">
#wrapper
{
width: 900px;
height: 200px;
background-color: #cccccc;
}
#left
{
width: 300px;
height: 200px;
background-color: #FF0000;
float: left;
}
#content
{
width: 300px;
height: 200px;
background-color: #000000;
float: left;
color: #FFF;
}
#right
{
width: 300px;
height: 200px;
background-color: #FFFF00;
float: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">Content Mitte</div>
<div id="left">Column Left</div>
<div id="right">Column Right</div>
</div>
</body>
</html>
Ich hab das mal mit Viertelkreisen probiert. 6 div's Viertel Kreis oben links (ol) (or) (ul)(ur) und die zwei Kreise mittig nebeneinander (li) (re) - Firefox prima, IE hat leichte Ränder und ca. 10px Versatz der mittleren Kreise bei absoluter Positionierung. Chrome hat nur 10px Versatz.
Gruß Ralph
css
#ying-yang
{
width:400px;
height:400px;
margin:25px 0px 0px 25px;
background-color: #cccccc;
}
#yin-yang-ol
{
width: 200px;
height: 200px;
background-color: #00FF00;
-o-border-radius: 200px 0px 0px 0px;
-mo-border-radius: 200px 0px 0px 0px;
-webkit-border-radius: 200px 0px 0px 0px;
border-radius: 200px 0px 0px 0px;
float: left;
}
#yin-yang-or
{
width: 200px;
height: 200px;
background-color: #0000FF;
-o-border-radius: 0px 200px 0px 0px;
-mo-border-radius: 0px 200px 0px 0px;
-webkit-border-radius: 0px 200px 0px 0px;
border-radius: 0px 200px 0px 0px;
margin-left: 200px;
}
#yin-yang-ul
{
clear: left;
width: 200px;
height: 200px;
background-color: #FFFF00;
-o-border-radius: 0px 0px 0px 200px;
-mo-border-radius: 0px 0px 0px 200px;
-webkit-border-radius: 0px 0px 0px 200px;
border-radius: 0px 0px 0px 200px;
float: left;
}
#yin-yang-ur
{
width: 200px;
height: 200px;
background-color: #FF0000;
-o-border-radius: 0px 0px 200px 0px;
-mo-border-radius: 0px 0px 200px 0px;
-webkit-border-radius: 0px 0px 200px 0px;
border-radius: 0px 0px 200px 0px;
margin-left: 200px;
}
#yin-yang-li
{
width: 50px;
height: 50px;
background-color: #00FF00;
-o-border-radius: 100%;
-mo-border-radius: 100%;
-webkitborder-radius: 100%;
border-radius: 100%;
border: 75px solid yellow;
top:50%;
left:50%;
position: absolute;
margin-top: -325px;
margin-left: -815px;
}
#yin-yang-re
{
width: 50px;
height: 50px;
background-color: #FF0000;
-o-border-radius: 100%;
-mo-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
border: 75px solid #0000FF;
top:50%;
left:50%;
position: absolute;
margin-top: -325px;
margin-left: -615px;
}
Danke cottton, genau da war der Fehler zu suchen. Nachdem ich eine blanke HTML und CSS mit dem gleichen Inhalt angelegt und ausprobiert hab, konnte ich sehen daß es funktioniert.
Dann habe ich nacheinander alle div's deaktiviert, aber leider ohne positives Ergebnis. Dann konnte nur noch die CSS Datei das verursachen. Dachte es muß ein Eintrag mit 2-5 px zu finden sein und siehe da:
*
{
margin-top:3px
padding:0;
}
komisch nur, daß das vorher noch keine Unstimmigkeiten verursacht hat. Im Header oben hab ich auch eine Breitendynamik und da fällt das nicht auf.
Danke auf jeden Fall daß Du mich auf den richtigen Weg gebracht hast.
Hallo zusammen,
ich hoffe Ihr könnt mir helfen. Ich habe in meinem content div eine dynamische Verlängerung des Hintergrundes drinnen.
Wenn ich die Seite anschaue ist jedoch ein Versatz des Bildes zu erkennen.
[Blockierte Grafik: http://s1.directupload.net/images/130724/eaooh4v4.jpg]
das graue ist schon der nächste div Container. Margin ist keines gesetzt. Die Bilder haben die Formate links 346x100px, rechts 245x100px, mitte 1x100px. Habe die images
schon zweimal bearbeitet und neu abgespeichert und immer mit demselben Ergebnis. Ich bin ratlos??
HTML Code:
<div id="karriereheader">
<div id="karriereheader_li"></div>
<div id="karriereheader_re"></div>
<div id="karriereheader_mi"></div>
</div>
CSS:
#karriereheader
{
width: 100%;
height: 100px;
}
#karriereheader_li
{
width: 346px;
height: 100%;
background-image: url(bilder/aufeigenenbeinen_li.png);
float: left;
}
#karriereheader_re
{
width: 245px ;
height: 100%;
background-image: url(bilder/aufeigenenbeinen_re.png);
float: right;
}
#karriereheader_mi
{
background-image: url(bilder/aufeigenenbeinen_mitte.png);
width: auto;
height: 100%;
}
Jemand ne Ahnung was da los sein könnte?
Gruß Ralph
Danke erstmal für die Antworten. Das mit den include Dateien kann ich nachvollziehen. Mein erster Versuch diesbezüglich war eine index.php mit <?php include ('start.dat'); ?> der den oberen Inhalt der html Seite generierte.
dann kam der div Content und abschließend die <?php include ('end.dat'); das hat schon gut funktioniert. Aber das mit der htaccess Variante kapier ich nicht.
Hallo zusammen,
ich habe eine Anfängerfrage. Beim Surfen fällt mir immer wieder auf, daß beim Anklicken auf einen Link im Browser oben stets ein neues html Dokument mit anderem Namen geöffnet wird.
Heißt das, z.B. für eine Seite wie html-seminar, in der ja viele Links zu finden sind, daß sich auf dem Server hundert(e) html Dokumente befinden, die fast alle nahezu identisch sind, bis auf den Content Inhalt?
Oder wird der Inhalt, der immer gleich bleibt aus einer einzelnen externen Datei in die gerade aufgerufene importiert? Wie muß ich mir das vorstellen?
Gruß Ralph
