|
|||
Zitat:
Zitat:
Und bitte nimm das Schlusstag beim Link-Element weg. Das wird notiert wie das img-Element! Das Base lösch bitte ganz raus. edit: Steph, Conditional Comments sind HTML-Kommentare. Du können nicht ins Stylesheet! Bitte vergiss die alten IEs erstmal. Du hast wirklich noch andere Themen.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (26.11.2012 um 23:00 Uhr) |
Sponsored Links |
|
|||
Hey Corina ... wow ... es funktioniert. Sowohl im FF und IE werden nach dem Refresh die Bilder im Blocksatz dargestellt.
Man siehts auch im code: hier stehen keine komischen Namen mehr für die Bilder da. Danke, Danke, auf das muss man als normalsterblicher erst mal kommen. Jetzt kann ich voranschreiten mit meinen companion columns wie in Fortgeschrittene CSS-Techniken beschrieben. Ist auch schon im werden, muss nur mehr eine Feinheit lösen. Auf deine Frage von vorhin: nur Zeile 3 in Link 1 war gestaucht dargestellt! HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <title>Steven's page</title> <link rel="stylesheet" type="text/css" href="mystyles.css" media="screen"> <link rel="icon" href="mein_favicon.ico" type="image"> </head> <body id="main"> <div id="wrapper"> <div id="stapel"> <div class="header"> <h1>Art Gallery</h1> </div><!--header--> <div class="bildmenue"> <ul class="Orte"> <li> <div class="hov"> <a class="hove" href="dailylife.html"><span class="voll">[daily:life]</span></a> </div> <a class="koala" href="dailylife.html"><img src="spanien1.1.jpg" alt="image"/></a> <div class="box"> <h3>[daily:life]</h3> <p>Mostly unnoticed, happening every day</p> </div> <!--box--> </li> <li> <div class="hov"> <a class="hove" href="purenature.html"><span class="voll">[pure:nature]</span></a> </div> <a class="koala" href="purenature.html"><img src="spanien2.1.jpg" alt="image"/></a> <div class="box"> <h3>[pure:nature]</h3> <p>Images only the nature can compose</p> </div> </li> <li> <div class="hov"> <a class="hove" href="buzzinglifestyle.html"><span class="voll">[buzzing:lifestyle]</span></a> </div> <a class="koala" href="buzzinglifestyle.html"><img src="spanien3.1.jpg" alt="image"/></a> <div class="box"> <h3>[buzzing:lifestyle]</h3> <p>Feel the people as part of their activities</p> </div> </li> <li> <div class="hov"> <a class="hove" href="silentbuildings.html"><span class="voll">[silent:buildings]</span></a> </div> <a class="koala" href="silentbuildings.html"><img src="spanien4.1.jpg" alt="image"/></a> <div class="box"> <h3>[silent:buildings]</h3> <p>Architectural expressions of mankind</p> </div> </li> </ul> </div><!--bildmenue--> <h1>companion columns</h1> <div id="container"> <div class="spalte1 spalte"> <h2>Spalte 1</h2> <p>Costa Rica was one of my first bigger trips in December/January 2012/2013. I was very curious about the Central-American country as it fitted perfectly to my fields of interest: Rainforest, The Sea (Carrebean waters and the Pacific) and of course a rich cultural background. </p> <p>In advance of this trip the idea arose to document the beauty and characteristic of this country, culture and people. As in every further project to follow, I aim to capture the very essence of the motive in front of the camera.</p> <p> Each photograph will be tagged with an information box displaying the title of the image. Apart from the location no further description will be added so that each viewer can interpret what I have tried to capture by that shot. </p> <p>Enjoy!</p> </div> <div class="spalte2 spalte"> <h2>Spalte 2</h2> <p>Hi, my name is Stephan, I live in Vienna. This is my very first webpage dedicatd to fine arts expressed by photographs.</p> <p> The following picutres are taken by me during travelling or everyday life. My photographic aim is to catch an image as naturally as possible.</p> <p>Enjoy!</p> </div> <hr /> </div> <!--#container--> </div> <!--#stapel--> <div id="pedestal"> <div class="spalte 1 companion1"> </div> <div class="spalte 2 companion2"> </div> </div> <!--#pedestal--> <div id="footer-wrapper"> <div id="footer"> © 2012 Stephan Kardos. All Rights Reserved. Impressum. Für den Inhalt verantwortlich: Stephan Kardos Martinstraße 78/2, 1180 Wien, Austria Contact Phone: +43-650 525 66 44 E-Mail: stephan.kard@gmail.com Mit dieser privaten Homepage werden keinerlei kommerzielle Interessen verfolgt und keine kostenpflichtige Produkte oder Dienstleistungen auf dieser Homepage angeboten. Der Autor verfolgt mit dieser Homepage nicht die Absicht, irgendwelche Gewinne zu erzielen. Die Inhalte meiner Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte kann ich jedoch keine Gewähr übernehmen. </div> </div><!--footer-wrapper--> <p> <a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> </p> <p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="CSS ist valide!" /> </a> </p> </div><!--wrapper--> </body></html> |
Sponsored Links |
|
|||
Zitat:
So, wie es jetzt ist, ist der Komprimierungsprozess komplett umgangen worden. Ich glaube nicht, dass das von Dauer ist. Bitte schließ deine Seite. Dann leer den Cache. Dann öffne den Browser neu und ruf deine Seite nochmal auf. Soll wäre: Das Stylesheet wird eingebunden angezeigt, die Bilder werden ersetzt aber Whitespace im Inhaltsbereich bleibt erhalten. Wenn bei dir trotzdem wieder alle Whitespaces entfernt werden, dann war es nur ein Zufallsergebnis. [Meine Vermutung war, dass der Komprimierer die verkürzte Charset-Schreibung nicht erkennt und sich deshalb nicht ... traut, den Quelltext zu ändern.] Ansonsten schau dir an, was ich in den Testdateien gemacht habe. Die drei Dateien sind identisch bis auf die Charset-Angaben. Bei den ersten beiden Listen habe zwei unterschiedliche Maßnahmen drin, den Whitespace zu erhalten. Das einfachste ist wohl die Methode in der zweiten Liste: Zwischen die li-Elemente das Leerzeichen kodiert schreiben: Code:
& #x20; Zitat:
14.1.2 zeigt ein Layout, in dem Rahmenlinien als Spaltentrenner verwendet werden. Erarbeite dir lieber das. Dazu brauchst du auch den entsprechenden Abschnit aus dem Kapitel zu Mehrspaltenlayouts. Zitat:
Poste bitte mal den Quelltext, den du beim ersten Link erhältst und den, den du beim zweiten Link erhältst. Danke.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
corina,
ich muss für heute aufhören. Möchte mir nämlich für deine Antwort mehr Zeit lassen und nicht drüber wurschteln. Ich komme morgen mit den Quellcodes ins Forum zurück. Der erste Test ( Broweser schließen, Cache leeren) hat schon mal ergeben, was du vermutet hast. Es war nur Zufall Trotzdem danke für deine Bemühungen, Tipps und Unterstützung lg Stephan |
|
|||
Hallo Corina,
bin jetzt mal deine Sachen durchgegangen und bin zu folgendem positiven Ergebnis gekommen ... es funktioniert. Zitat:
Zitat:
Zitat:
Code:
<!DOCTYPE html><html lang="de"><head><meta charset="utf-8" /><title>Steven's page</title> <style media="screen" type="text/css" style="display:none">*{/**/margin :0;/**/padding :0;/**/font-size :100%;}div#wrapper{margin:6em auto 3em;width:60em;border:8px solid rgba(0,0,0,0.5);box-shadow:0 5px 10px #131313;padding:1em 1em;}h1,h2{font-size:100%;line-height:0em;margin-top:0.9em;margin-bottom:0.9em;}p{line-height:2em;font-size :75%;margin-top:1em;margin-bottom:1em;}#container{overflow:hidden;}#spalte1{width:56%;float:left;padding:0 2%;border-left:dotted 0.4em rgba(0,0,0,0.5);color:rgba(0,0,0,1);}#spalte2{width:34%;float:right;padding:0 2%;border-left:dotted 0.4em rgba(0,0,0,0.5);border-right:dotted 0.4em rgba(0,0,0,0.5);color:rgba(0,0,0,1);}#spalte1,#spalte2{padding-bottom:16000px;margin-bottom:-16000px;}body#main{font-family:"Trebuchet MS";background-image:url("http://stev.bplaced.net/texture.jpg");background-repeat:repeat;}div.header h1{padding:2em 0.5em;margin:0 0 1em;/**/color:white;background-color:rgba(0,0,0,0.5);}/**/div.bildmenue{position:relative;/**/}ul.Orte{list-style:none;/**/text-align:justify;/**/}.bildmenue ul:after /**/{content:'';/**/display:inline-block;/**/width:100%;}.bildmenue ul li{display:inline-block;/**/border:0.2em solid #fff;box-shadow:0 5px 10px #131313;position:relative;}div.bildmenue a img{padding:0px;width:14em;height:14em;vertical-align:bottom;}div.box{background-color:rgba(0,0,0,0.8);padding:2% 4% 0%;font-family:"Trebuchet MS";font-size:90%;line-height:1.1;position:absolute;bottom:0em;width:92%;color:white;}div.box p{line-height:1.1;}div.hov a{text-align:center;font-family:"Trebuchet MS";font-size:150%;width:100%;top:0;bottom:0;padding-top:40%;position:absolute;color:transparent;background:transparent;}div.hov a:hover{color:white;background:rgba(0,0,0,0.8);text-decoration:none;}#footer{clear:both;font-size:8px;position:relative;padding:2em 0.5em;color:white;background-color:rgba(0,0,0,0.5);/**/} </style> <link rel="icon" href="mein_favicon.ico" type="image" /></head><body id="main"><div id="wrapper"><div class="header"><h1>Art Gallery</h1></div><div class="bildmenue"><ul class="Orte"><li><div class="hov"><a class="hove" href="dailylife.html"><span class="voll">[daily:life]</span></a></div><a class="koala" href="dailylife.html"><img src="http://1.2.3.12/bmi/stev.bplaced.net/spanien1.1.jpg" alt="image"/></a><div class="box"><h3>[daily:life]</h3><p>Mostly unnoticed, happening every day</p></div></li> <li><div class="hov"><a class="hove" href="purenature.html"><span class="voll">[pure:nature]</span></a></div><a class="koala" href="purenature.html"><img src="http://1.2.3.13/bmi/stev.bplaced.net/spanien2.1.jpg" alt="image"/></a><div class="box"><h3>[pure:nature]</h3><p>Images only the nature can compose</p></div></li> <li><div class="hov"><a class="hove" href="buzzinglifestyle.html"><span class="voll">[buzzing:lifestyle]</span></a></div><a class="koala" href="buzzinglifestyle.html"><img src="http://1.2.3.9/bmi/stev.bplaced.net/spanien3.1.jpg" alt="image"/></a><div class="box"><h3>[buzzing:lifestyle]</h3><p>Feel the people as part of their activities</p></div></li> <li><div class="hov"><a class="hove" href="silentbuildings.html"><span class="voll">[silent:buildings]</span></a></div><a class="koala" href="silentbuildings.html"><img src="http://1.2.3.10/bmi/stev.bplaced.net/spanien4.1.jpg" alt="image"/></a><div class="box"><h3>[silent:buildings]</h3><p>Architectural expressions of mankind</p></div></li></ul></div><h1>Equal height Colums</h1><div id="container"><div id="spalte1" class="spalte"><h2>Spalte 1</h2><p>Costa Rica was one of my first bigger trips in December/January 2012/2013. I was very curious about the Central-American country as it fitted perfectly to my fields of interest: Rainforest, The Sea (Carrebean waters and the Pacific) and of course a rich cultural background.</p><p>In advance of this trip the idea arose to document the beauty and characteristic of this country, culture and people. As in every further project to follow, I aim to capture the very essence of the motive in front of the camera.</p><p>Each photograph will be tagged with an information box displaying the title of the image. Apart from the location no further description will be added so that each viewer can interpret what I have tried to capture by that shot.</p><p>Enjoy!</p></div><div id="spalte2" class="spalte"><h2>Spalte 2</h2><p>Hi, my name is Stephan, I live in Vienna. This is my very first webpage dedicatd to fine arts expressed by photographs.</p><p>The following picutres are taken by me during travelling or everyday life. My photographic aim is to catch an image as naturally as possible.</p><p>Enjoy!</p></div></div><div id="footer-wrapper"><div id="footer">© 2012 Stephan Kardos. All Rights Reserved. Impressum. Für den Inhalt verantwortlich: Stephan Kardos Martinstraße 78/2, 1180 Wien, Austria Contact Phone: +43-650 525 66 44 E-Mail: stephan.kard@gmail.com Mit dieser privaten Homepage werden keinerlei kommerzielle Interessen verfolgt und keine kostenpflichtige Produkte oder Dienstleistungen auf dieser Homepage angeboten. Der Autor verfolgt mit dieser Homepage nicht die Absicht, irgendwelche Gewinne zu erzielen. Die Inhalte meiner Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte kann ich jedoch keine Gewähr übernehmen.</div></div><p><a href="http://validator.w3.org/check?uri=referer"><img src="http://1.2.3.10/bmi/www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a></p><p><a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://1.2.3.13/bmi/jigsaw.w3.org/css-validator/images/vcss-blue" alt="CSS ist valide!" /> </a></p></div></body></html> In diesem Sinne vielen Dank für diese sehr detailierte Hilfestellung bei einem wie ich meine schwierigen Thema; auch an fox - vielleicht liest man sich bald wieder (wahrscheinlich früher als dir lieb ist) |
|
|||
Obwohl du gelesen hast, dass und warum wir diese Methode nicht für den Einsatz im Hauptbereich einer Seite empfehlen?
Ich habe dich auf Abschnitt 14.1.2 verwiesen, nicht auf 14.2.1. Nochmal: Lies aufmerksamer, was dir hier gepostet wird. Schau dir bitte an, wie oft alleine in diesem Thread der Hinweis auf die Notation der Elemente in deinem Head steht. Oder in deinem anderen Thread der Hinweis darauf, die height-Angabe zu entfernen. Das ist für Helfer anstrengend und auch frustrierend. Zitat:
Zitat:
Ganz nebenbei: Für deine Bilderleiste brauchst du diese Methode mit dem erzwungenen Blocksatz nicht. Da alle beteiligten Breiten bekannt sind (und in der gleichen Einheit sind), kann man floaten und passende Abstände angeben.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Zitat:
Eines wollte ich aber unbedingt sagen: ich vertraue keineswegs auf das Forum und sehe es auch nicht als meinen Personal Coach. Ich versuche die Regeln einzuhalten und ja ich bin noch auf einem niedrigen Level. War selbst während meines Studiums in einem inhaltlichen Forum aktiv und ich persönlich habe es so gehandhabt, dass ich selbst auf Fragen meiner Wissensstufe geantwortet habe. D.h. ich finde es vollkommen OK wenn Profis sich nicht mit meinen Problemchen auseinandersetzen, vielleicht ist es gerade das richtige Niveau für jemanden der kürzlich das selbe Prolbem hatte und bei der Wissensteilung selbst noch dazu lernt. Kurzum: ich wertschätze jeden Beitrag und finde es auch OK wenn keiner mir antwortet (ist auch eine Antwort) Zitat:
|
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Karrierestart-IT - die online Jobmesse für IT-Studenten | ictjob.de | Offtopic | 0 | 20.09.2012 11:46 |
Biete Half live 2 cs:s Server auf übernahme an | netshuttle | Offtopic | 4 | 20.12.2009 23:51 |
SMTP Server einrichten [Mercury, Win03 Server] | ct2oo4 | Serveradministration und serverseitige Scripte | 5 | 22.08.2009 14:51 |
footer stick alt tut nicht wirklich, was es soll | E|H | (X)HTML | 16 | 01.01.2006 20:15 |
Beim Seitenaufruf schon connect zu anderem Server herstellen | Olel | (X)HTML | 8 | 01.02.2005 01:14 |