HTML5 & Css

Hallo

Ich will HTML5 und CSS lernen....

Problem ist ich weiss nicht wo anfangen ?
Ich habe mir ein paar videos von video2brain gekauft u.a. => HTML und CSS, Website mit Dreamweaver und HTML 5 (also 3 video)

Trotzdem weiss ich nicht wie und wo anfangen :uhm:

Kann mir jemand erklären wie ist es am besten anzufangen und wie gehst es am schnellsten?

Kann mir z.b. jemand erklären unterschied zwischen id und class ..das habe ich bis jetzt nie verstanden. Was bewirkt id und was class dann im css ?

Danke.

 

AW: HTML5 & Css

Mit id und class werden den HTML-tags entsprechende Zuweisungen im CSS zugeordnet. Der Unterschied ist, dass id auf einer HTML-Seite nur ein einziges Mal verwendet werden kann, während class mehrfach vorkommen kann.

Zum Erlernen hilft es immer ein - erstmal - kleines Projekt zu bearbeiten, dann findet das Gelernte gleich praktische Anwendung. Stell Dir zum Beispiel Deine eigene Startseite für den Browser Deiner Wahl zusammen. Je mehr Du erfolgreich bewerkstelligst, desto mehr Ideen werden Dir kommen.

Viel Erfolg
O.

 

AW: HTML5 & Css

Hallo und danke.

Also zb:

<div id="name22" ...</div>

Dann darf ich name22 nicht mehr in einem neuen id verwenden (es darf nicht so gleich heissen, aber ich kann in einer html seite 6-7 id haben, einfach mit anderen namen: name22, name27, name35 usw?)

und darf ich name22 zb beim class verwenden, obwohl es schon im id verwendet wird, oder macht es überhaupt keinen sinn ?

Nochmals danke

 

AW: HTML5 & Css

So gesehen: ja. Wenn du zu einem Namensstamm einfach noch eine (andere) Nummer/Zahl hinzufügst, hast du eine andere ID.
ID steht ja für eine "Identität", also eine eindeutige, unverwechselbare Benennung.
IDs spielen übrigens nicht nur bei CSS eine Rolle, sondern (später) auch bei Javascript.
Im Gegensatz zur class (Klasse) kannst du damit im Stylesheet/CSS (und ggf. auch per Javascript) ein ganz bestimmtes Element gezielt ansprechen.
Die class hat ja eher den Sinn, alle ähnlichen Elemente, von denen gleiches Aussehen und Verhalten erwartet wird, zusammen zu fassen, zu einer Klasse eben.
Dafür muss dann auch nur einmal eine Deklaration im CSS hinterlegt werden.

Ja, du darfst
Sowohl im Markup (also im HTML-Code), also auch im CSS werden class und id ja getrennt aufgeführt:

HTML:

1. <div id="name1" class="name1"> </div>

Du siehst, du deklarierst die Bezeichnung je gesondert.
Auch im CSS wird das voneinander getrennt, so dass das Stylesheet immer genau "weiß", ob du nun eine ID namens "name1" oder eine class "name1" ansprichst:

Code (Text):

1. .name1 {background-color: yellow; border: 3px;} /* Das wäre eine class */
2. #name1 {background-color: green;} /* das wäre eine id */
3.  

Ob das aber sinnvoll ist, ist die andere Frage, denn du musst bedenken, dass du immer die Übersicht behalten solltest, besonders, wenn du später die Seite erweitern oder überarbeiten musst.
Darum nutze möglichst eindeutige, funktionelle Namen.
Nenne z.B. die Klasse der divs, die die Navigation bilden sollen class="navigation", oder wenn du eine Schaltfläche erstellst, dann gib ihr als id="anistart", wenn damit eine Animation gestartet wird.

Du musst auch nicht jedem Element sowohl eine class, als auch eine ID geben; vergib IDs am besten nur da, wo du sie wirklich brauchst.

Im gezeigten Beispiel würdest du übrigens eine class definieren, die immer einen gelben Hintergrund hat und immer einen 3px breiten Rand (stell dir einfach noch eine ganze Liste mit weiteren Eigenschaften vor...). Nur bei einem Element willst du, um es stärker hervorzuheben, eine andere Farbe haben - der Rest soll so bleiben, du willst nur die Hintergrundfarbe ändern.
Um nicht alles neu zu schreiben, um unnötige Redundanzen zu vermeiden, gibst du einfach dem Element aus der class eine ID und nennst nur die Eigenschaft, die geändert werden soll.

Lieber Gruß

 

AW: HTML5 & Css

Für die Locale Entwicklung empfehle ich Dir auch noch Xampp, Wamp, ampps http://www.ampps.com/ so kannst du in ruhe alles austesten über deinen Rechner.

Das wichtigste beim Anfang ist es zudem auch ein gute Struktur zu erstellen.

Eine Ordnerstruktur wie zb.:
css
js
images

Dadurch ist schon mal eine gute Grundstruktur vorhanden, wo sich Deine Daten befinden.
zudem empfehle ich Dir dieses Basis mal http://html5boilerplate.com/ anzuschauen.

Auch die CSS Datei sollte eine gute Gliederung haben

wie zu Beispiel :

Code (Text):

1.  
2. /* -- Reset -- */
3. /* -- Basis Layout --*/
4. /* -- Header --*/
5. /* -- Navigation -- */
6. /* -- Content --*
7. /* -- Aside/Sidebar -- */
8. /* -- Footer -- */
9. /* -- Mediaqueries --*/
10. /* -- Print -- */
11. /* -- Hilfklassen */
12.  

Damit jedoch wirklich viel lernst empfehle ich dir auf eine ganz simple Editor wie Notepad++ oder Brackets http://brackets.io/index_de.html zuwechseln und nicht den Dreamweaver. Und Dein Ergebniss vom Code dann auch im Browser anzusehen.

Zudem gibt es bei den Browsern die möglichkeit auch, die Developper Tools zu nutzen.

Du kannst auch für manche Editoren Zencoding oder besser Emmet http://emmet.io/ nutzen, jedoch erst wenn du eine gewisse Basis von HTML5 und CSS3 verstanden hast

 

AW: HTML5 & Css

Hallo und danke @randacek_pro & @cythux

Ich habe schon mal etwas begonnen ...
HTML

Code (Text):

1. <body>
2. <div id="bild2"><img src="update_cloud.png"><p>Text für Cloud22</div>
3. <p>Dieser text steht hier</p>
4.  
5. <div class="mars2">Hier steht ein Text, nur ein Text</div>
6. </body>

CSS:

Code (Text):

1. #bild2 {background-color:green; color:yellow; margin-bottom:30px; font-size:24px;
2. font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; font-style:italic; border:solid 12px #C52035;
3. }
4.  
5. .mars2 {color: green; border:brown 15px outset;
6. }
7.  

Ja es wird immer spannender
Nur blöd es zeigt nicht immer im Safari oder Firefox das was ich geändert habe ?? Wieso das? :hmpf:

_______________________________________​

Nun wie kann ich andere Elementen per CSS definieren bzw. bearbeiten (h1,p,table,ul,ol..)?

z.b.

Code (Text):

1. <h1>etwas</h1>

=> brauche ich dann eine stern oder ?

Code (Text):

1. *h1 {color: orange}

Wieso nur dort wo es wirklich braucht?

Ich habe bis jetzt DW benutzt, hilft eingetlich da er automatisch </div> etc schreibt.


Besten Dank.

 

AW: HTML5 & Css

Hallo!

In deinem Beispiel fehlt hinter "...Cloud22" noch das schließende p-tag.
Der Text im div "mars2" sollte auch noch in ein p-tag.
Wenn du Änderungen vorgenommen hast, musst du im Browser mit [F5] aktualisieren.
Eine h1 oder irgendein anderes HTML-Element sprichst du einfach über seinen Namen an:

h1{colorrange;}

Weil du deinen Code ansonsten nur unnötig aufblähst.

Ich würde dir als Einsteiger http://little-boxes.de/ empfehlen! Den ersten Teil gibt es sogar gratis zum online-lesen.

 

AW: HTML5 & Css

Hi & danke...
Für was braucht es denn im div noch <p> tag ..ich habe es probiert ohne und es funktioniert auch


Ich werde es natürlich weiter versuchen und little-boxes sofort bestellen (ich hoffe es bringt etwas)

Danke.

 

AW: HTML5 & Css

Hallo!

Zwingend nötig ist das p-tag nicht, aber HTML sollte immer semantisch korrekt aufgebaut sein. Ein div-tag ist ersteinmal "nur" ein neutrales Blockelement, welches für eine Suchmaschine daher keine konkrete Bedeutung hat. Ein p-tag bezeichnet einen Absatz. Nun kann man natürlich trefflich darüber streiten, ab welcher Länge ein Text als Absatz gilt und die Länge ist auch gar nicht entscheidend, sondern eben die Bedeutung. Statt <p> kann das natürlich auch eine <h1> oder eine <caption> oder noch irgendetwas anderes sein.

 

AW: HTML5 & Css

Nun habe ich etwas gebastelt ...kann mir jemand sagen wo sind die typische Fehler?

Wie ihr sieht habe ich fast nur mit id gearbeitet. (ist einfacher oder so..)

Danke.


HTML:

Code (Text):

1.  
2. <body>
3.             <!-- Beginn Container -->
4.  
5. <div id="container">
6.  
7.             <!-- Beginn Header-->
8.    
9.     <div id="header">
10.         Web Site von ....
11.      </div>
12.             <!-- Ende Header -->
13.        
14.             <!-- Beginn navi-->
15.     <div id="navi">
16.         <center>
17.             <ul>
18.                 <li class="aktiv"><a href="index.html">Home</a></li>
19.                 <li><a href="html/ueber.html">Über mich</a></li>
20.                 <li><a href="html/gallerie.html">Gallerie</a></li>
21.                 <li><a href="html/links.html">Links</a></li>
22.                 <li><a href="html/kontakt.html">Kontakt</a></li>
23.             </ul>
24.         </center>
25.        
26.     </div>
27.    
28.             <!-- Ende navi -->
29.  
30.             <!--Beginn Content -->
31.            
32.     <div id="content">
33.          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
34.           eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
35.           montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
36.           pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
37.           vel, aliquet nec, vulputate eget arcu felis natoque sem metus.</p>
38.  
39.         <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
40.         felis eu pede mollis pretium.<br /> Integer tincidunt. Cras dapibus. Vivamus
41.         elementum semper nisi. Aenean vulputate eleifend tellus sem. <br />Aenean leo ligula,
42.         porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,      
43.         viver<br /> quis, feugiat a, tellus Nulla consequt massa enim.</p>
44.  
45.         <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.       Etiam ultricies nisi.<br /> Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam       rhoncus. Maecenas tempus, tellus eget condim<br /> rhoncus, sem quam semper libero,            
46.         it ame adipiscing sem neque sed ipsum. Nam quam nunc, bladit vel<br /> luctus  
47.         pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec
48.         vitae sapien ut<br /> libero venenatis faucibus. Nullam quis ante. Etiam sit amet  
49.         orci eget eros fauc
50.         Ibus tincidunt. Duis leo.<br /> Sed fringilla mauris sit amet nibh. Donec sodales          
51.         sagittis magna. Sed consequat, leo eget bibendum<br /> sodales, augue velit cursus     
52.         <img src="http://l3lab.erwachsenenbildung.at/wp-content/uploads/Smile_icon.png" alt=   
53.         "Alternativtext zum Bild" border="0" height="50" width="50"  />
54.  
55.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula  
56.         eget dolor. Aenean.<br /> Cum sociis natoque penatibus et magnis dis parturient
57.         montes, nascetur ridiculus mus. Donec sociis fringilla mauris sit amet. </p>
58.     </div>
59.    
60. <div id="right">
61.      <div id="news"><h3 align="center">Neuigkeiten:</h3>
62.         <p><font color="red">22. Sept.2013</font> - Erste Idee für die neue Web Seite.</p>
63.         <p><font color="red">25. Sept.2013</font> - Domain .....com wurde erfolgreich  
64.         registriert.</p>
65.         <p><font color="red">30. Sept.2013</font> - Neue Web Seite wurde erstellt.</p>
66.  
67. </div>
68.      </div>
69.    
70. <!-- Ende Content -->
71.      
72.             <!-- Beginn Footer -->
73.     <div id="footer">
74.     <p><a href="html/bald.html">Impressum</a> <a href="html/bald.html">Datenschutz</a>
75.     </div>
76. </div>
77.  
78.     <div id="footer-unter">
79.     <p style="color:#999; font-size:1em; margin-left:25%; margin-right:50%">© 2013 All rights     
80.         reserved.
81.     </div>
82.             <!-- Ende Footer -->
83.            
84.  
85.             <!--Ende Container -->
86.  
87. </body>

CSS:

Code (Text):

1. @charset "UTF-8";
2. /* CSS Document */
3.  
4. body{
5.     background-color:#9CF;
6.     font-family:Arial, Helvetica, sans-serif;
7.     color:#000;
8.     }
9.  
10. /* Container */
11. #container{
12.     margin:auto;
13.     margin-top:20px;
14.     width:1024px;
15.     height:768px;
16.     background-color:aqua;
17.     background-repeat:no-repeat;
18.     border:#666 0px solid;
19.     }
20.  
21. /* Header */
22. #header{
23.     margin:auto;
24.     margin-top:20px;
25.     padding:10px;
26.     width:1005px;
27.     height:200px;  
28.     background-image:url(../bilder/banner-header.jpg);
29.     text-align:center;
30.     color:#96E0DD;
31.     }
32. /*Ende Header */
33.  
34. /* navi */
35.  
36. #navi{
37.     margin:auto;
38.     margin-top:-2px;
39.     margin-bottom:10px;
40.     padding:5px;
41.     padding-bottom:13px;
42.     width:1015px;
43.     height:40px;   
44.     background-color:grey;
45.     background-image:url(../bilder/menu2.jpg);
46.     }
47.    
48. #navi li{
49.     display:inline;
50.     color:#fff;
51.     padding-right:70px;
52.     }
53.  
54. div#navi a{
55.     color:black;
56.     text-decoration:none;  
57.     }
58.  
59. div#navi a:hover{
60.     color:#3C6;
61.     text-decoration:overline;
62.     }
63.    
64.    
65. .aktiv {
66.     font-weight:bold;
67.     text-decoration:underline;
68.     }
69.    
70.    
71. /* Ende navi */
72.  
73. /* Content */
74.  
75. #content{
76.     margin:auto;
77.     margin-top:20px;
78.     padding:20px;
79.     width:930px;
80.     height:420px;
81.     background-color:#B5D5FF;
82.     border:#666 0px solid;
83.     }
84.    
85. div#right{
86.     float: right;
87.     margin-right: 35px;
88.     margin-top: -340px;
89.     width: 200px;
90.     }
91.  
92. div#news{
93.     height: 260px;
94.     background-color: white;
95.     padding: 8px;
96.     }
97.    
98. h3{
99.     color:#3FF;
100.     text-shadow:#000 3px 5px 8px;
101.     font-family:Tahoma, Geneva, sans-serif;
102.     }
103.    
104. div#ueber{
105.     color:#666;
106.     text-align:center;
107.     font-family:Arial, Helvetica, sans-serif;
108.     width:930px;
109.     height:100px;
110.     }
111.    
112. div#table{
113.     width:400px;
114.     height:200px;
115.     margin:auto;
116.     margin-top:80px;
117.     color:#666;
118.     text-align:center;
119.     }
120.    
121. div#gallerie{
122.     margin:auto;
123.     margin-top:0px;
124.     text-align:center;
125.     }
126.    
127. div#flash{
128.     margin:auto;
129.     text-align:center; 
130.     }
131.    
132. div#kontakt{
133.     padding:auto;
134.     margin-top:-30px;
135.     text-align:center;
136.     }
137. /* Ende Content */
138.    
139.  
140.  
141. /* Footer */
142. #footer{
143.     margin:0px;
144.     margin-top:30px;
145.     background-color:aqua;
146.     padding:15px;
147.     width:995px;
148.     height:30px;   
149.     border:#666 1px solid;
150.     text-align:center;
151.     word-spacing:50px;
152.     }
153.    
154. #footer-unter{
155.     margin-top:80px;
156.     padding:30px;
157.     padding-bottom:auto;
158.     background-image:url(../bilder/logo-unten.jpg);
159.     background-position:center;
160.     background-repeat:no-repeat;
161.     text-align:justify;
162.     }
163.  
164. /*Ende Footer */

 

AW: HTML5 & Css

Du willst HTML5 lernen, benutzt aber die dafür neuen Tags nicht. Beispielsweise ist Markup wie

HTML:

1. <div id="footer">

so häufig, dass dafür der semantisch bessere <footer>-Tag eingeführt wurde. Schau dir diese Liste an, das orangene Schild-Symbol zeigt neue Tags in HTML5.

Auf der anderen Seite benutzt du bspw. <center>, welches in HTML5 nicht mehr unterstützt wird. Sowas wird mit CSS gemacht. Genauso das <font>-Tag.
Die Grundregel dafür ist ungefähr so: alles, was den Stil / das Aussehen beschreibt, gehört in CSS. Alles, was die Funktion des Inhaltes beschreibt ("dies ist der Kopfbereich meiner Seite"), wird in HTML ausgedrückt.

HTML5 ist auch nicht mehr XML-basiert, also benötigen Einzel-Tags wie <br> kein schließendes "/".

Für dein Bild

HTML:

1. <img src="http://l3lab.erwachsenenbildung.at/wp-content/uploads/Smile_icon.png" alt=   
2.        "Alternativtext zum Bild" border="0" height="50" width="50"  />

benutzt du ebenfalls veraltete Attribute (und schließt es unnötig). Höhe und Breite eines Bildes sollten nicht im Tag selbst angegeben werden, weil es wieder das Aussehen beschreibt (-> CSS). Das "border"-Attribut fällt in HTML5 weg.

Du stylst auch häufiger direkt die Elemente, bspw.

HTML:

1. <p style="color:#999; font-size:1em; margin-left:25%; margin-right:50%">

Es gibt zwar Anwendungsfälle dafür, aber fast immer sollte das per CSS-Regel gelöst werden. Ausserdem fehlt das schließende </p> auf der Zeile.
Dabei sollte die gewählte Klasse oder id wiederum die Funktion beschreiben, nicht das Aussehen. Beispielsweise wäre

HTML:

1. <p class="copyright">

besser als

HTML:

1. <p class="grey text margin50">

oder ähnlicher Blödsinn. CSS Zen Garden ist das perfekte Beispiel für die Trennung von Inhalt und Stil - dort muss lediglich die CSS-Datei gewechselt werden, schon sieht die Seite komplett anders aus.

Zusammengefasst: lern HTML5, wenn du HTML5 lernen willst.


Duddle

 

AW: HTML5 & Css

Styles im Head Bereich und auch Inline Styles sollten vermieden werden.

Ich selber arbeite selten mit ID eher mit class, zudem nutze ich SASS/Compass -> dies solltest du erst nutzen wenn du HTML5/CSS(3) kannst. Oder auch OOCSS.
Aber dies würde Dich denke ich mal momentan überfordern.

Viele Tipps findest HTML5 findest du beim HTML5 Doctor und Html5rocks.
Vorerst rate ich Dir zudem, ab auf Frameworks zu schauen

Hier mal ein Verbesserungsvorschlag für Deinem HTML5 Code :

Code (Text):

1.  
2. <!DOCTYPE html>
3. <html lang="de">
4. <head>
5.   <title></title>
6.     <meta charset="utf-8">
7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
8.     <title></title>
9.     <meta name="description" content="">
10.     <meta name="viewport" content="width=device-width, initial-scale=1">
11.  
12.         <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
13.  
14.     <link rel="stylesheet" href="css/normalize.css">
15.     <link rel="stylesheet" href="css/style.css">
16. </head>
17. <body>
18.             <!-- Beginn Container -->
19.  
20. <div id="container">
21.  
22.             <!-- Beginn Header-->
23.    
24.     <header role="banner">
25.     <h1 class="logo">Web Site von ....<h1>
26.     <h2 class="slogan"></h2>
27.   </header><!-- Ende Header -->
28.        
29.             <!-- Beginn navi-->
30.     <nav role="navigation">
31.     <ul>
32.         <li class="aktiv"><a href="index.html">Home</a></li>
33.       <li><a href="html/ueber.html">Über mich</a></li>
34.       <li><a href="html/gallerie.html">Gallerie</a></li>
35.       <li><a href="html/links.html">Links</a></li>
36.       <li><a href="html/kontakt.html">Kontakt</a></li>
37.     </ul>
38.     </nav><!-- Ende navi -->
39.  
40.             <!--Beginn Content -->
41.            
42.     <section role="content">
43.     <article id="content">
44.       <header>
45.         <h3>Artictle Titel</h3>
46.       </header>  
47.         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
48.           eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
49.           montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
50.           pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
51.           vel, aliquet nec, vulputate eget arcu felis natoque sem metus.</p>
52.  
53.           <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum
54.         felis eu pede mollis pretium.<br /> Integer tincidunt. Cras dapibus. Vivamus
55.         elementum semper nisi. Aenean vulputate eleifend tellus sem. <br />Aenean leo ligula,
56.         porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in,      
57.         viver<br /> quis, feugiat a, tellus Nulla consequt massa enim.</p>
58.  
59.           <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.         Etiam ultricies nisi.<br /> Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam       rhoncus. Maecenas tempus, tellus eget condim<br /> rhoncus, sem quam semper libero,            
60.         it ame adipiscing sem neque sed ipsum. Nam quam nunc, bladit vel<br /> luctus  
61.         pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec
62.         vitae sapien ut<br /> libero venenatis faucibus. Nullam quis ante. Etiam sit amet  
63.         orci eget eros fauc
64.         Ibus tincidunt. Duis leo.<br /> Sed fringilla mauris sit amet nibh. Donec sodales          
65.         sagittis magna. Sed consequat, leo eget bibendum<br /> sodales, augue velit cursus     
66.         <img src="http://l3lab.erwachsenenbildung.at/wp-content/uploads/Smile_icon.png" alt=   
67.         "Alternativtext zum Bild" border="0" height="50" width="50"  />
68.  
69.          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula    
70.         eget dolor. Aenean.<br /> Cum sociis natoque penatibus et magnis dis parturient
71.         montes, nascetur ridiculus mus. Donec sociis fringilla mauris sit amet. </p>
72.         <footer>
73.           <p class="content_footer"></p>
74.         </footer>
75.     </article>
76. </section><!-- Ende Content -->
77.    
78.     <!-- Start Sidebar -->
79.   <aside role="sidebar">
80.     <div id="news"><h3 align="center">Neuigkeiten:</h3>
81.     <p><font color="red">22. Sept.2013</font> - Erste Idee für die neue Web Seite.</p>
82.         <p><font color="red">25. Sept.2013</font> - Domain .....com wurde erfolgreich  
83.         registriert.</p>
84.     <p><font color="red">30. Sept.2013</font> - Neue Web Seite wurde erstellt.</p>
85.   </aside><!-- Ende Sidebar -->
86.      
87.         <!-- Beginn Footer -->
88.     <footer role="footer">
89.       <p><a href="html/bald.html">Impressum</a> <a href="html/bald.html">Datenschutz</a>
90.       </p>
91.       <p class="copyright">&copy 2013 All rights reserved. </p>
92.     </footer>
93.     <!-- Ende Footer -->            
94.   </body>
95. </html>
96.  

Ps.: Thema CSS

Mache bitte ein Browser Reset rein wie zb. Normalize http://necolas.github.io/normalize.css/

Und versuche auch Dich nicht unnötige zu wiederholen

LG

 

AW: HTML5 & Css

Wenn man schon alles in die CSS Datei auslagert, dann doch bitte auch das ...

z.B. mit:

Code (Text):

1.  
2. [...]<span class="highlighted">22. Sept.2013</span>[...]
3.  

und in der css-Datei:

Code (Text):

1.  
2. [...]
3. .highlighted {color: red;}
4. [...]
5.  

hat den Vorteil, dass man dann später nicht bei jedem bspw. die Farbe ändern muss...

 

AW: HTML5 & Css

Hallo

Ich habe eine kleine Seite auf: http://website-code.lima-city.de hochgeladen. Bitte besuchen.

Mit Firefox sieht es in Ordnung aus, sobald ich es mit Safari teste dann sieht es nicht schön aus (die Linien verrutschen sich) muss ich padding/margin verstellen & wie?

Bild=> Wie es im Safari aussieht

Ebenfalls sobald ich mehr Text hinzufüge verrutscht es. Was ist die Ursache?

Bild=> Es ist verrutscht

Wenn ich jetzt eine Bild unter Meine Sidebar hinzufügen will, wie muss ich genau vorgehen? Ich habe probiert per HTML <img src=".." funktioniert nicht Tool....ebenfalls es verrutscht.


HTML Code:

HTML:

1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5. <title>Lernen-Lernen</title>
6. <style>
7. <!--
8. * {
9.     margin: 0;
10.     /* [disabled]padding: 0; */
11. }
12. header, nav, section, article, aside, footer {
13. display:block; 
14. }
15. -->
16. </style>
17. <link href="css/style.css" rel="stylesheet" />
18. </head>
19.  
20. <body>
21. <div class="container">
22. <header>
23. <h1>Banner2</h1>
24. <nav>
25.     <ul>
26.         <li><a href="index.html">Startseite</a></li>
27.         <li><a href="ueber.html">Über Uns</a></li>
28.         <li><a href="portofolio.html">Portofolio</a></li>
29.         <li><a href="kontakt.html">Kontakt</a></li>
30.         <li><a href="impressum.html">Impressum</a></li>
31.     </ul>
32. </nav>
33. </header>
34. <div style="overflow:hidden;">
35.     <section>
36.         <article>
37.             <h2>Mein Text</h2>
38.             Es gibt im Moment in diese Mannschaft, oh, einige Spieler vergessen ihnen Profi was sie sind. Ich lese nicht sehr viele Zeitungen, aber ich habe gehört viele Situationen. Erstens: wir haben nicht offensiv gespielt. Es gibt keine deutsche Mannschaft spielt offensiv und die Name offensiv wie Bayern. Letzte Spiel hatten wir in Platz drei Spitzen: Elber, Jancka und dann Zickler. Wir müssen nicht vergessen Zickler. Zickler ist eine Spitzen mehr, Mehmet eh mehr Basler. Ist klar diese Wörter, ist möglich verstehen, was ich hab gesagt? Danke. Offensiv, offensiv ist wie machen wir in Platz. Zweitens: ich habe erklärt mit diese zwei Spieler: nach Dortmund brauchen vielleicht Halbzeit Pause.<p> Ich habe auch andere Mannschaften gesehen in Europa nach diese Mittwoch. Ich habe gesehen auch zwei Tage die Training. Ein Trainer ist nicht ein *****! Ein Trainer sei sehen was passieren in Platz. In diese Spiel es waren zwei, drei diese Spieler waren schwach wie eine Flasche leer! Haben Sie gesehen Mittwoch, welche Mannschaft hat gespielt Mittwoch? Hat gespielt Mehmet oder gespielt Basler oder hat gespielt Trapattoni? Diese Spieler beklagen mehr als sie spielen! Wissen Sie, warum die Italienmannschaften kaufen nicht diese Spieler? Weil wir haben gesehen viele Male solche Spiel! Haben gesagt sind nicht Spieler für die italienisch Meisters! Strunz! Strunz ist zwei Jahre hier, hat gespielt 10 Spiele, ist immer verletzt! Was erlauben Strunz? Letzte Jahre Meister Geworden mit Hamann, eh, Nerlinger. Diese Spieler waren Spieler! Waren Meister geworden! Ist immer verletzt! Hat gespielt 25 Spiele in diese Mannschaft in diese Verein. Muß respektieren die andere Kollegen! haben viel nette kollegen! Stellen Sie die Kollegen die Frage! Haben keine Mut an Worten, aber ich weiß, was denken über diese Spieler. Mussen zeigen jetzt, ich will, Samstag, diese Spieler müssen zeigen mich, <strong>seine Fans, müssen alleine die Spiel gewinnen.</strong> <em>Trapattoni '94</em>
39.         </article>
40.     </section>
41.  
42. <aside>
43.     <h2>Meine Sidebar</h2>
44.     Hier gibt es Infos.
45.     </aside>
46.  
47. <div style="height: 20px; clear:both;"></div>
48. </div>
49. <footer>
50.     Copy Seite 2013
51. </footer>
52. </div>
53. </body>
54. </html>
55.  

CSS Code:

Code (Text):

1. @charset "UTF-8";
2. /* CSS Document */
3.  
4. body {
5.     font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
6.     font-size:14px;
7.     color: #333;
8.     height:100%;
9.     }
10. .container{
11.     margin:auto;
12.     width:800px;
13.     padding:20px 0;
14.     height: 1%;
15.     }
16.    
17. header {
18.     background-color:#3E94D1;
19.     border-top-left-radius:6px;
20.     border-top-right-radius:6px;
21.     }
22.    
23. header h1{
24.     color:white;
25.     padding: 15px 20px;
26.     text-transform:uppercase;
27.     }
28.    
29. nav {
30.     padding: 0 15px;
31.     text-align:center;
32.     }
33.    
34.    
35. nav ul{
36.     list-style:none;
37.     font-size: 16px;
38.     text-transform:uppercase;
39.     }
40.    
41. nav ul li{
42.     display:inline;
43.     margin: 0;
44.     padding: 0;
45.     }
46. nav ul li a{
47.     padding: 0 6px;
48.     background-color:#03406A;
49.     color:yellow;
50.     display:inline;
51.     text-decoration:none;
52.     border-top-left-radius:8px;
53.     border-top-right-radius:8px;
54.     }
55.    
56. nav ul li.active a,
57. nav ul li a:hover
58.     {
59.     background-color:white;
60.     color:purple;
61.     }
62.    
63. section{
64.     width:470px;
65.     float:left;
66.     border-right:solid 1px #CCC;
67.     border-left:solid 1px #CCC;
68.     padding-bottom:10px;
69.     margin-bottom:10px;
70.     }
71.  
72. article{
73.     padding:15px 15px 5px 20px;
74.     }
75. article h2{
76.     padding-top:10px;
77.     padding-bottom:20px;
78.     }
79. aside{
80.     width:297px;
81.     border-right:solid 1px #CCC;
82.     float:left;
83.     padding: 15px 15px 15px 15px;
84.     padding-bottom:510px;
85.     margin-bottom:10px;
86.     }
87.    
88. aside h2{
89.     padding-top:10px;
90.     padding-bottom:45px;
91.     }
92.    
93. footer{
94.     clear:both;
95.     text-align:center;
96.     padding: 7px 0;
97.     margin-top:-30px;
98.     color: white;
99.     background-color:#24577B;
100.     border-bottom-left-radius:9px;
101.     border-bottom-right-radius:9px;
102.     }

Danke.

 

AW: HTML5 & Css

In meinem Firefox sieht es wie in deinem Safari aus.
Du bist über ein sehr altes Problem gestolpert: wie erzwinge ich gleichgroße Spalten mit CSS. Dafür gibt es ein paar Lösungsansätze, je mit Vor- und Nachteilen. Hier ist ein zusammenfassender Artikel mit verschiedenen Varianten. Falls dir Englisch nicht liegt, probier das oder das.


Duddle

 

AW: HTML5 & Css

hier scheint der Fehler zu sein
<div style="height: 20px; clear:both;"></div>

dafür kannst du einen clearfix nutzen

PHP:

1.  
2. /*
3.  * Clearfix: contain floats
4.  *
5.  * For modern browsers
6.  * 1. The space content is one way to avoid an Opera bug when the
7.  *    `contenteditable` attribute is included anywhere else in the document.
8.  *    Otherwise it causes space to appear at the top and bottom of elements
9.  *    that receive the `clearfix` class.
10.  * 2. The use of `table` rather than `block` is only necessary if using
11.  *    `:before` to contain the top-margins of child elements.
12.  */
13.  
14. .clearfix:before,
15. .clearfix:after {
16.     content: " "; /* 1 */
17.     display: table; /* 2 */
18. }
19.  
20. .clearfix:after {
21.     clear: both;
22. }
23.  
24. /*
25.  * For IE 6/7 only
26.  * Include this rule to trigger hasLayout and contain floats.
27.  */
28.  
29. .clearfix {
30.     *zoom: 1;
31. }
32.  

 

AW: HTML5 & Css

du musst schon die <footer class="clearfix">

falls es noch nicht klappt kann ich morgen mal das ganze überfliegen, wenn ich es zeitlich schaffe

 

AW: HTML5 & Css

Schade, es klappt immer noch nicht ...