[Website entsteht] Website wünscht sich Feedback und Hilfe

DarkMo · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

BenRo schrieb:
Frames: Nein! Wenn sich hier jemand zu einem neuen Computer beraten lässt, wird ihm immer aktuelle Hardware empfohlen und nicht etwa der Sockel 775.

leider die falsche analogie

es geht (mir) dabei nicht darum, ihm das zur nutzung schmackhaft zu machen, er soll es einfach mal selber probiert haben. es kennen. meinetwegen auch einfach mal drüber gelesen haben. er will etwas lernen, nicht etwas "kaufen" (deiner metapher nach). um bei besagter metapher zu bleiben, will er quasi was über rechner lernen, nicht unbedingt jetzt einen nutzen. das kommt freilich irgendwann, aber du weist, worauf ich hinauswill.

stells dir jetzt mit ner ausbildung oder dem studium vor. da fängst du auch mit dem urschleim an. touringmaschine, microcontroler, uralt-cpu's, da deren architektur noch einigermaßen verständlich ist und für die veranschaulichung eines prinzips ausreicht. ich habe NIE davon geredet, dass er irgendwas davon im "produktiveinsatz" nutzen soll. aber er soll doch bitte wenigstens nen bissl mehr lernen wie "state of the art". wieso sind wir heute, wo wir sind? wieso ist geschichtsschreibung so wichtig - nur als bsp.

edit: aha, über die tabellen ziehste auch her - dabei hab ich die nachteile selber schon angedeuted. aber auch hier das gleiche prinzip: etwas lesen und verstehen fällt weit schwieriger als es selber zu praktizieren und zu verstehen. daher war einfach mein anliegen, das zu verdeutlichen: probieren geht über studieren!

ofhouse · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Hmm, wir drehen uns wieder im Kreis, weil wir uns lieber mit uns selbst beschäftigen, statt mit dem Problemen des TE (Ich schließe mich da bewusst selbst nicht aus^^)...

Ich bin mir sicher, wir könnten hier binnen kürzester Zeit 20 Leitfäden zusammenstellen, wie man am Besten mit Web-Programmierung beginnt.
Allein daran sieht man schon, dass es nicht den Weg gibt. Jeder muss bei dem Thema seine eigenen Erfahrungen machen, da helfen gut gemeinte Ratschläge wenig.

Der Knackpunkt an der Diskussion ist, dass sich hier viele zu sehr darauf versteifen, den TE in Richtung Programmieren zu bewegen.
Ist aus meiner Sicht zwar ein richtiger Weg, den man einschlagen kann, man sollte aber bedenken, dass nicht jeder, der gerne Webseiten erstellt, auch unbedingt gleich eine Programmiersprache lernen will.
Muss man auch nicht, wichtig ist erstmal der Spaß an der Sache. Und Spaß kann sich nur entwickeln, wenn man selbst Dinge entdeckt.
Dafür ist es aus meiner Sicht aber wichtig, den Horizont stetig erweitern. Statt sich mit Frames herumzuärgern, kann man sich genau so gut auch ein Framework anschauen, was spricht dagegen?

Speedy hat auf jeden Fall noch eine Menge Potential und wir sollten ihm die Freiheit gestatten, das auch zu nutzen, egal wohin ihn sein Weg führt.

Und noch zum Abschluss, weil ich das Thema gefühlt alle 2 Wochen lese:
Mir ist es völlig egal, ob Jemand meint, dass er HTML programmiert oder schreibt. Ein 3 Zeilen Hello-World Programm darf als Programmieren bezeichnet werden, aber ein 2000 Zeilen HTML-Dokument nur als gute Schreibarbeit?
Diese Unterscheidung ist völliger Schwachsinn und zeigt nur immer wieder die Eitelkeit des Mathematikers im Informatiker. Meinetwegen kann auch Jemand seine Fernbedienung programmieren, mich juckt das nicht.

BenRo · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

An DarkMo:
Ich finde nicht, dass man als Einsteiger HTML-Tags lernen sollte, die im aktuellen Standard nicht existieren. Es verschwendet Zeit. Falls man irgendwann dringend ein System in HTML 3.0 oder sowas warten muss, dann kann man die spezifischen Tags ja immer noch lernen (der Standard ist ja nach wie vor online). SpeeedyMaus erstellt aber eine NEUE Webseite, warum also Tags verwenden, die nicht mehr aktuell sind? Ich finde da passt meine Sockel-Analogie durchaus. Etwas zu lernen ist so ähnlich, wie etwas zu kaufen (Geld ist auch nur umgewandelte Zeit)...

Über Tabellen ziehe ich nicht her. Natürlich sollte man wissen, wie man eine Tabelle in HTML beschreibt, dies aber auch nur dann einsetzen, wenn es sich um tabellarischen Inhalt handelt. Klar muss man Verschiedenes ausprobieren, aber muss man unbedingt ausprobieren, einen Nagel mit einem Schraubenzieher in die Wand zu hauen? Oder ist es nicht sinnvoller, wenn hier Leute, die in der Materie erfahren sind sagen, "Nimm einen Hammer!"?

ofhouse: Programmieren/Schreiben: Ja, das ist einerseits Erbsenzählerei, aber es kann auch beim Verständnis helfen. Wenn ich weiß "Ich beschreibe, wie ich ein Dokument strukturiere" werde ich niemals nachfragen müssen: "Wie kann ich in HTML mit einer Schleife dreimal das Selbe wiederholen?", weil das eine Frage ist, die sich auf Programmierung richtet und nicht auf das Beschreiben einer semantischen Struktur.

Speeedymauss · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

So wegen der ganzen Diskussion wegen PHP und so weiter:

Ich werde erstmal nur HTML und CSS benutzen (später Javascript noch, das kommt auch noch in nem Buch dran wo ich dran arbeite).

Ich habe hier 3 gute Bücher fürs lernen von HTML CSS und Javascript, die muss ich aber ach erstmal durch bekommen und verstehen. Wenn ich die alle durch habe könnte ich mir irgendwann mal PHP und so angucken, zunächst benutze ich aber nur das, was ich schon gelernt habe. Es hilft auch nicht viel wenn ihr mit so mega komplexen Dingen an kommt wo ich noch nie was von gesehen habe, das kann ich nicht so einfach verstehen. Ich würde mich da freuen wenn ihr einfach bei normalem, einfacheren HTML/CSS bleibt wenn ihr mir helfen wollt, da ist die wahrscheinlichkeit am höchsten, dass ich eure Antwort verstehen und anwenden kann.

Ich möchte mich aber auch bedanken, dass ihr hier alle mit lest und mich so gut unterstützt, das ist auch nicht selbstverständlich!

Ich denke mal ich werde mich gleich wieder etwas an die Seite begeben und mal gucken wie ich das mit den bildbeschriftungen hinbekomme.

Ich habe die Lösung:

rtf schrieb:
position:absolute; + bottom:0; aus deiner Klasse herausnehmen und margin-top:-50px; hinzufügen
50 dabei mit deinem Wert austauschen den du benötigst.

So sieht mein schneller Code dafür aus.

Code:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Speeedy's Mods Homepage</title> <style type="text/css"> img{ } #text{ position:relative; margin-top:-50px; width:100%; background-color:rgb(255,255,255); } </style> </head> <body> <div id="wrapper"> <img src="pictures/720int28fertigthumbnail.jpg" alt="" /> <div id="text">some text</div> </div> </body> </html>

schonmal ausprobiert aber nur in der schnelle und da hats nicht richtig geklappt, ich werde das gleich also nochmal in ruhe testen und gucke was draus wird

BenRo · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Ich würde es so ähnlich lösen:

Code:

<!doctype html>
<html>
     <head>
         <meta charset="utf-8">
         <title>Speeedy's Mods Homepage</title>
         <style type="text/css">
                
      figure {
        position: relative;
      }
      
      figcaption {
        background-color: hsla(0, 0%, 100%, 0.5);
        position: absolute;
        bottom: 20px;
        left: 10px;        
      }
         </style>
   </head>
   <body>
      <figure>
         <img src="pictures/720int28fertigthumbnail.jpg" alt="Bildunterschrift" />
         <figcaption>Bildunterschrift</figcaption>
      </figure>
  </body>
</html>

Allgemeine Hinweise:

Achte darauf, dass du bei sowas class statt id verwendest, id ist ein eindeutiger Identifier, der nur einmal pro Seite vorkommen darf, ein Beispiel wäre z. B. (bei vielen Seiten) id="company_logo" (sofern jenes nur einmal im Design vorkommt). Da du aber vermutlich mehrere Bilder mit Bildunterschriften hast, bietet sich stattdessen class an. Allgemein vermeidest du bei komplexeren Projekten mit classes später auftretende komplizierte specifity-Probleme
figure und figcaption anstatt divs für Bilder mit Bildunterschriften verwenden, diese sind genau hierfür da und du bewahrst die Übersicht
Anstatt "text" würde ich aussagekräftigere ids/Klassen verwenden
Es ist sinnvoll das CSS in eine Extradatei auszulagern

hann96 · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

So, ich habe auch mal was vorbereitet:
Bildergalerie

Hier der Code:

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Bildergalerie</title>
	<link href='http://fonts.googleapis.com/css?family=Arimo|Asap' rel='stylesheet' type='text/css'>

<style type="text/css">

* {
	margin: 0;
	padding: 0;
}

body {
	margin-top: 30px;
	background-color: #222;	
}

h1 {
	text-align: center;
	font-weight: 400;
	font-family: arimo;
	margin-bottom: 20px;	
}

#wrapper {
	padding: 20px;
	width: 960px;	
	margin: 0 auto;	
	background-color: white;
}

.kleines-bild {
	width: 250px;
}

.galerie img {
	margin-right: 20px;
	margin-bottom: 20px;
	border-radius: 6px;
	border: 3px solid #ccc;	
	transition: all 500ms;
}

.galerie img:hover {
	opacity: 0.79;
	transition: all 500ms;
	width: 280px;
}

.galerie img:first-child {
	float: left;
}

.galerie img:last-child {
	clear: both;
}

</style>

</head>
<body>

<div id="wrapper">

	<div class="galerie">

		<h1>Bildergalerie</h1>

		<img src="http://static.universal-music-services.de/asset_new/290211/881/view/Pulcino-Pio-Das-kleine-Kueken-piept.jpg" class="kleines-bild">
		<img src="http://static.twoday.net/cordulamueller/images/bvb-logo-schwarz.jpg" class="kleines-bild">
		<img src="http://www.naturfoto-cz.de/bilder/sevcik/kleine-streifenschwalbe--hirundo-abyssinica.jpg" class="kleines-bild">
		<img src="http://upload.wikimedia.org/wikipedia/commons/f/f9/Stausee_kleine_kinzig.jpg" class="kleines-bild">
		<img src="http://www.manager-magazin.de/images/image-250667-panoV9-cuuk.jpg" class="kleines-bild">
		<img src="http://imalbum.aufeminin.com/album/D20111116/810354_XM4V5Y86DDCEKLM4ZMK6AKNJNGACML_katzenbabys-europaische-kurzhaarkatze-3_H154527_L.jpg" class="kleines-bild">

	</div>

</div>

</body>
</html>

Für die Übersicht habe ich den CSS Code in den <head> Bereich geschrieben, aber bitte mach das nicht für deine Website, benutze eine externe css Datei!
Natürlich besteht noch die Möglichkeit Bildunterschriften zu setzen. Siehe BenRo. (dann musst du aber clearen, sonst verrutscht der Text wegen dem float left!)

rtf · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Speeedymauss schrieb:
So wegen der ganzen Diskussion wegen PHP und so weiter:

Ich habe die Lösung:

schonmal ausprobiert aber nur in der schnelle und da hats nicht richtig geklappt, ich werde das gleich also nochmal in ruhe testen und gucke was draus wird

Mein Code kannst du nicht 1 zu 1 übernehmen. Ich wollte dir nur zeigen wie das gehen könnte. Einige Sachen müssen da halt noch auf deinen Code angepasst werden, aber ich finde nur so kannst du etwas lernen. Du sollst selber wissen wie sich der Code/Struktur verhält wenn du etwas veränderst und warum er sich so verhält. Dementsprechend musst du auch selber nachdenken. :daumen:

Bringt ja nichts wenn wir hier schon fertige Ergebnisse liefern und du nur Copy & Paste machen musst. Und das es viele Wege gibt merkst du ja wahrscheinlich selber an den Diskussionen im Thread

hann96 · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Nun kommen die erklärungen für meinen CSS Code!

Also...

HTML:

* {
	margin: 0;
	padding: 0;
}

Der Universalselektor setzt die Einstellungen des jeweiligen Browsers zurück.

HTML:

body {
	margin-top: 30px;
	background-color: #222;	
}

Hier wird der <body> TAG im html-Dokument angesprochen!
Margin sorgt für einen oberen Außenabstand zum Browser Fenster von 30px.
background-color sollte wohl klar sein...

HTML:

h1 {
	text-align: center;	
	font-family: arimo;
	margin-bottom: 20px;	
}

Hier wird die Überschrift zentriert.
Schrift "Familie" wird festgelegt. Ganz oben im head Bereich wird mit

HTML:

<link href='http://fonts.googleapis.com/css?family=Arimo|Asap' rel='stylesheet' type='text/css'>

ein Font über Google eingebunden. Vorteil, die Schirftart muss nicht auf dem PC des Besuchers sein. :daumen:

Margin-bottom sorgt für einen optisch schönen Abstand nach unten.

HTML:

#wrapper {
	padding: 20px;
	width: 960px;	
	margin: 0 auto;	
	background-color: white;
}

padding setzt den Innenabstand auf 20px, nun werden alle Elemente im HTML Dokument, die im div mit der id wrapper sind, 20px "eingedrängt".
Die Breite des Wraper wird bestimmt, damit man die Seite per
margin: 0 auto; zentrieren kann.

.kleines-bild {
width: 250px;
}

Setzt Bilder mit der Klasse .kleines-bild auf die gleiche Breite. Sieht m. M. n. optisch besser aus.

HTML:

.galerie img

Stelle dir diesen "Pfad" wie eine verschachtlung vor. Diese "Pfad Angabe" bedeutet, dass wenn nach der Klasse .galerie ein bild (img) kommt, diese Werte angewendet werden.

HTML:

.galerie img {
	margin-right: 20px;
	margin-bottom: 20px;
	border-radius: 6px;
	border: 3px solid #ccc;	
	transition: all 500ms;
}

1. Ein rechter-Abstand wird festgelegt.
2. Unten wird ein Abstand festgelegt.
Nr. 1 & 2 sorgen für einen Abstand zwischen den Bildern.
Ekcken der Bilder werden abgerundet. Es kann auch:

HTML:

border-radius: 6px 0px 0px 6px;

...geschrieben werden. Man geht immer von der oberen linken Ecke aus.

Ein Rand wird bestimmt. (mit farbe)
Ein weicher Übergang von dem :hover wird bestimmt (Dauer 500 milliisekunden).

HTML:

.galerie img:hover {
	opacity: 0.79;
	transition: all 500ms;
	width: 280px;
}

Hier der hover zustand, wenn man mit der maus über das bild geht.
Die Transparenz wird festgelegt. (werte zwischen 0 und 1 sind möglich)
Der Übergang wird festgelegt.
Die Breite wird festgelegt, damit sich das bild beim hover vergrößert.

HTML:

.galerie img:first-child {
	float: left;
}

Float left bewirkt ein umfließen um das erste Bild (deswegen sind die Bilder nebeneinander). Google einfach mal ":first-child css" und "Eltern und Kind Elemente HTML".

HTML:

.galerie img:last-child {
	clear: both;
}

Es heißt: Wer floatet muss auch clearen! Diese Anweisung bewirkt, dass das float left nach dem letzten Kind-Element "beendet" wird.

So das war's. Sorry für Rechtschreibfehler, habe es eilig, muss gleich weg.

-----------------------------------------------------------

PS und EDIT///
@BenRo und Speeedymauss
Kein Wunder, dass das nicht klappt, schaut euch mal das an:
<!doctype html>

Speeedymauss · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

BenRo schrieb:
Ich würde es so ähnlich lösen:

Code:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Speeedy's Mods Homepage</title> <style type="text/css"> figure { position: relative; } figcaption { background-color: hsla(0, 0%, 100%, 0.5); position: absolute; bottom: 20px; left: 10px; } </style> </head> <body> <figure> <img src="pictures/720int28fertigthumbnail.jpg" alt="Bildunterschrift" /> <figcaption>Bildunterschrift</figcaption> </figure> </body> </html>

Allgemeine Hinweise:

Achte darauf, dass du bei sowas class statt id verwendest, id ist ein eindeutiger Identifier, der nur einmal pro Seite vorkommen darf, ein Beispiel wäre z. B. (bei vielen Seiten) id="company_logo" (sofern jenes nur einmal im Design vorkommt). Da du aber vermutlich mehrere Bilder mit Bildunterschriften hast, bietet sich stattdessen class an. Allgemein vermeidest du bei komplexeren Projekten mit classes später auftretende komplizierte specifity-Probleme

figure und figcaption anstatt divs für Bilder mit Bildunterschriften verwenden, diese sind genau hierfür da und du bewahrst die Übersicht

Anstatt "text" würde ich aussagekräftigere ids/Klassen verwenden

Es ist sinnvoll das CSS in eine Extradatei auszulagern

Ich habe mich jetzt mal an meine Website gesetzt und wollte mal eure Lösungsvorschläge austesten, aber so richtig funktionieren die auch nicht, zumindest das zitierte oben.

Außerdem habe ich ein anderes Problem festgestellt: Meine Website wird nur von Opera richtig dargestellt. Firefox und IE bekommen das scheinbar mit den Prozentangaben nicht richtig hin, da ist alles so riiiiesig -.-

Hier mal als Bild was ich meine, mit der veränderung im Code mit dem Bildern ausm Zitat:
FF:

Opera:

Eine einfachere Lösung des Problems wäre es vlt wenn ich die Beschriftung komplett ins Bild bearbeite und dann das bild als link benutze, dann noch ne transition beim hovern drauf machen und fertig...dann müsst ich bei nem neuen Projekt auch das html nicht anpassen

hann96 · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Kannst du bitte nochmal den Link zur Seite posten? Damit man sich das Problem nochmal selber im Browser angucken kann? Ich finde den Link hier nicht...

hann96 · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Eine einfachere Lösung des Problems wäre es vlt wenn ich die Beschriftung komplett ins Bild bearbeite und dann das bild als link benutze, dann noch ne transition beim hovern drauf machen und fertig...dann müsst ich bei nem neuen Projekt auch das html nicht anpassen

Nein, wäre es nicht! Das ist dann keine Barriere freie Website und Suchmaschinenfreundlich ist das auch nicht, denn Google und co. wissen ja nicht, was im Bild steht.

Gruß

hannover96xdneu

Speeedymauss · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

stimmt, ich muss mich wohl doch mit dem problem beschäftigen aber hast ja vollkommen recht

hann96 · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Speeedymauss schrieb:
stimmt, ich muss mich wohl doch mit dem problem beschäftigen aber hast ja vollkommen recht

Zu dein Problem mit den Prozent angaben, kannst du bitte den kompletten Code (HTML & CSS) dazu hier "posten"?

Speeedymauss · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Ich könnt auch eben die Website packen und komplett hochladen wenn du möchtest.

Code:

HTML:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Speeedy's Mods Homepage</title>
        <link rel="stylesheet" type="text/css" href="home.css" />
        <link rel="stylesheet" type="text/css" href="layout.css" />
    </head>

    <body>
        <nav>
            <ul>
                <a href="index.html" title="Homepage"><li class="selected">Homepage</li></a>
                <a href="tagebuecher.html" title="Tagebücher"><li>Tagebücher</li></a>
                <a href="quickie.html" title="Quickie"><li>Quickie</li></a>
                <a href="galerie.html" title="Galerie"><li>Galerie</li></a>
                <a href="tutorials.html" title="Quickie"><li>Tutorials</li></a>
                <a href="tools.html" title="Tools"><li>Tools</li></a>
            </ul>
        </nav>
        <div class="tabellencontainer">
            <div class="tabellenzeile kopfzeile">
                <div class="tabellenzelle logo">
                <p></p>
                <img src="pictures/logo.png" alt="Logo" />
                </div><!--Ende Zelle-->
                <div class="tabellenzelle titel">
                    <h1>Speeedy's <br /> Mods</h1>
                    <h2>Homepage</h2>
                </div><!--Ende Zelle-->
                <div class="tabellenzelle casemod">
                <p></p>
                <img src="pictures/computer.png" alt="Fertiger Casemod" />
                </div><!--Ende Zelle-->
            </div><!--Ende Tabellenreihe-->
        </div><!--Ende Tabellencontainer-->
        <div class="tabellencontainer">
            <div class="tabellenzeile casemodstitel">
                <div class="tabellenzelle">
                    <h3>Casemods</h3>
                </div><!--Ende Zelle-->
            </div><!--Ende Tabellenreihe-->
        </div><!--Ende Tabellencontainer-->
                </div><!--Ende Tabellencontainer-->
        <div class="tabellencontainer">
            <div class="tabellenzeile casemodsbilder">
                <div class="tabellenzelle casemod1">
                    <figure class="bildmitbschriftung">
                        <img src="pictures/720int28fertigthumbnail.jpg" alt="" />
                        <figcaption class="bildbeschriftung">
                            <h3>Projekt 1</h3>
                            <h4>Kurzbeschreibung</h4>
                        </figcaption>
                    </figure>
                </div><!--Ende Zelle-->
                <div class="tabellenzelle casemod2">
                    <div class="bildmitbeschriftung">
                        <span class="bildbeschriftung">
                            <h3>Projekt 2</h3>
                            <h4>Kurzbeschreibung</h4>
                        </span>
                        <img src="pictures/happybirthdayfertigthumbnail.jpg" alt="" />
                    </div>
                </div><!--Ende Zelle-->
                <div class="tabellenzelle casemod3">
                    <div class="bildmitbeschriftung">
                        <span class="bildbeschriftung">
                            <h3>Projekt 3</h3>
                            <h4>Kurzbeschreibung</h4>
                        </span>
                        <img src="pictures/sockelathumbnail.jpg" alt="" />
                    </div>
                </div><!--Ende Zelle-->
            </div><!--Ende Tabellenreihe-->
        </div><!--Ende Tabellencontainer-->
        <div class="tabellencontainer">
            <div class="tabellenzeile casemodstitel">
                <div class="tabellenzelle">
                    <h3>Casecons</h3>
                </div><!--Ende Zelle-->
            </div><!--Ende Tabellenreihe-->
        </div><!--Ende Tabellencontainer-->
                </div><!--Ende Tabellencontainer-->
        <div class="tabellencontainer">
            <div class="tabellenzeile casemodsbilder">
                <div class="tabellenzelle casemod1">
                    <div class="bildmitbschriftung">
                        <img src="pictures/720int28fertigthumbnail.jpg" alt="" />
                        <span class="bildbeschriftung">
                            <h3>Projekt 1</h3>
                            <h4>Kurzbeschreibung</h4>
                        </span>
                    </div>
                </div><!--Ende Zelle-->
                <div class="tabellenzelle casemod2">
                    <div class="bildmitbeschriftung">
                        <span class="bildbeschriftung">
                            <h3>Projekt 2</h3>
                            <h4>Kurzbeschreibung</h4>
                        </span>
                        <img src="pictures/happybirthdayfertigthumbnail.jpg" alt="" />
                    </div>
                </div><!--Ende Zelle-->
                <div class="tabellenzelle casemod3">
                    <div class="bildmitbeschriftung">
                        <span class="bildbeschriftung">
                            <h3>Projekt 3</h3>
                            <h4>Kurzbeschreibung</h4>
                        </span>
                        <img src="pictures/sockelathumbnail.jpg" alt="" />
                    </div>
                </div><!--Ende Zelle-->
            </div><!--Ende Tabellenreihe-->
        </div><!--Ende Tabellencontainer-->
        
    </body>
</html>

CSS Layout:

Code:

@charset "utf-8";
/* CSS Document */

body {
    background-color:#DDD;
    margin: 0px;
    padding: 0px;
    font-family:"Comic Sans MS", cursive;
}
nav{
    padding:10px;
    margin-bottom:0px;
    background-image:url(pictures/navhintergrund.jpg);
    background-size:100% 100%;

}
nav ul{
    list-style-type:none;
    padding: 0px;
    margin:0px;

}
nav ul li{
    display:inline;
    margin:0px;
    padding:10px 20px 10px 20px;
    font-weight:bold;
}

.tabellencontainer{
    display:table;
    margin:0px;
    padding:0px;
    width:100%;
}

.tabellenzeile{
    display:table-row;
}

.tabellenzelle{
    display:table-cell;
    vertical-align:top;
}

.kopfzeile{
    background-color:#FFF;
}

.logo{
    width:20%;
}
.logo img {
    max-width: 100%;
    height: auto;
} 

.casemod{
    width:40%;
}

.casemod img {
    max-width: 100%;
    height: auto;
} 

.titel{
    width:30%;
}


.kopfzeile h1{
    font-size:600%;
    margin-top:5px;
    width:100%;
}

.kopfzeile h2{
    font-size:400%;
    width:100%;
}

nav a:link, nav ul a:visited{
    text-decoration:none;
    border-bottom:none;
    font-weight:bold;
    color:back;
    border-color:black;
}

CSS home:

Code:

@charset "utf-8";
/* CSS Document */

.casemodstitel{
    background-color:#666;
    width:100%;
}
.casemod1{
    width:33%;
}
.casemod1 img {
    max-width: 100%;
    height: auto;
} 
.casemod2{
    width:33%;
}
.casemod2 img {
    max-width: 100%;
    height: auto;
} 
.casemod3{
    width:33%;
}
.casemod3 img {
    max-width: 100%;
    height: auto;
} 
figure.bildmitbeschriftung {
    position:relative;
}

figcaption.bildbeschriftung{
    background-color: hsla(0, 0%, 100%, 0.5);
    position: absolute;
    bottom: 20px;
    left: 10px;
    text-align: center;
}

hann96 · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Danke, passt schon, ich mache das mit meinem localhost

hann96 · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Lade doch mal bitte hoch, wegen den Bildern!

Speeedymauss · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Ok, hier der Download:
Anhang anzeigen Website Neugestaltung 1.0.zip

BenRo · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

Die CSS-Klassen im CSS müssen denen, die im HTML-Code angegeben sind entsprechen. Oder kurz: Du hast den Schreibfehler "bildmitbschriftung" drin (das e fehlt).

Edit: Wenn du Firebug zum CSS-Debuggen verwendest siehst du sowas ganz flott ^^

Nocheinedit: Kannst du mal ein Bild machen, wie es am Schluss aussehen soll? Das würde es für Außenstehende einfacher machen.

hann96 · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

BenRo schrieb:
Nocheinedit: Kannst du mal ein Bild machen, wie es am Schluss aussehen soll? Das würde es für Außenstehende einfacher machen.

Jop, das wäre gut.

Hier schon einmal meine paar Fehler-Analysen:

1. Ich habe bereits gesagt, dass das <!doctype html> falsch ist! So muss es sein: <!DOCTYPE html>
2. Grenzwertig, eigetnlich darf in einer Liste nicht das <a> Element, vor einem <li> TAG stehen.
3. Weg von Position Absolute. Du meintest doch, dass du eine Flexible Website haben willst!?!?!?
Dann bist du bei dem position Attribut falsch! Immer margin / padding verwenden.
Denn wie der Name schon sagt, wird mit position absolute das Element, >absolut< positioniert, dies nimmt es aus dem Dokumentenfluss raus.
Es orientiert sich nicht an den unteren oder oberen Elementen im HTML-Dokument.
4. Schreibfehler (Tipp: Immer klein schreiben, also z. B. nicht: meineSeite, sondern meine-seite). Aber eigentlich sollte dir das DW aber doch anzeigen, oder?
5. Mehr werden folgen

EDIT///
6. Bitte komme von Tabellen weg, auch wenn sie nur in CSS definiert sind. Man macht sowas eigentlich mit div Containern und float, bzw. mit flexbox machen.

Speeedymauss · 17. August 2014

AW: [Website entsteht] Website wünscht sich Feedback und Hilfe

BenRo schrieb:
Die CSS-Klassen im CSS müssen denen, die im HTML-Code angegeben sind entsprechen. Oder kurz: Du hast den Schreibfehler "bildmitbschriftung" drin (das e fehlt).

Edit: Wenn du Firebug zum CSS-Debuggen verwendest siehst du sowas ganz flott ^^

Nocheinedit: Kannst du mal ein Bild machen, wie es am Schluss aussehen soll? Das würde es für Außenstehende einfacher machen.

den fehler hab ich immer überlesen, danke

Ich werd versuchen morgen früh schnell nen grobes bild der seite zu erstellen, ich werd hier hochladen sobald ichs habe

hannover96xdneu schrieb:
Jop, das wäre gut.

Hier schon einmal meine paar Fehler-Analysen:

1. Ich habe bereits gesagt, dass das <!doctype html> falsch ist! So muss es sein: <!DOCTYPE html>
2. Grenzwertig, eigetnlich darf in einer Liste nicht das <a> Element, vor einem <li> TAG stehen.
3. Weg von Position Absolute. Du meintest doch, dass du eine Flexible Website haben willst!?!?!?
Dann bist du bei dem position Attribut falsch! Immer margin / padding verwenden.
Denn wie der Name schon sagt, wird mit position absolute das Element, >absolut< positioniert, dies nimmt es aus dem Dokumentenfluss raus.
Es orientiert sich nicht an den unteren oder oberen Elementen im HTML-Dokument.
4. Schreibfehler (Tipp: Immer klein schreiben, also z. B. nicht: meineSeite, sondern meine-seite). Aber eigentlich sollte dir das DW aber doch anzeigen, oder?
5. Mehr werden folgen

EDIT///
6. Bitte komme von Tabellen weg, auch wenn sie nur in CSS definiert sind. Man macht sowas eigentlich mit div Containern und float, bzw. man kann es auch mit flexbox machen.

in meinem html buch schreiben die das "doctype" aber auch immer klein...

2) hab ich aus meinem buch, so wird das erklärt, dass man nicht nur auf den text der navigation drücken kann sondern auf das ganze feld...
3) wie gesagt, ich arbeite dran

4) momentan wird nicht angezeigt, vlt muss ich das noch iwo aktivieren
5) sehr gerne

Und DANKE, dass ihr mir da so helft!

[Website entsteht] Website wünscht sich Feedback und Hilfe

Lötkolbengott/-göttin

Komplett-PC-Käufer(in)

Software-Overclocker(in)

Software-Overclocker(in)

Software-Overclocker(in)

Freizeitschrauber(in)

PC-Selbstbauer(in)

Freizeitschrauber(in)

Software-Overclocker(in)

Freizeitschrauber(in)

Freizeitschrauber(in)

Software-Overclocker(in)

Freizeitschrauber(in)

Software-Overclocker(in)

Freizeitschrauber(in)

Freizeitschrauber(in)

Software-Overclocker(in)

Software-Overclocker(in)

Freizeitschrauber(in)

Software-Overclocker(in)

Ähnliche Themen