zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Grundlegende Fragen zu CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.02.2009, 14:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.02.2009
Beiträge: 3
Asparagus befindet sich auf einem aufstrebenden Ast
Standard Grundlegende Fragen zu CSS

Hallo,
ich programmiere seit einiger Zeit mit HTML.
Allerdings ist 'nur' HTML manchmal so unprofessionell und ich wollte da ein paar Sachen machen, die wahrscheinlich nur mit CSS gehen:

Hyperlinks: Ich möchte ununterstrichene Hyperlinks, bei denen sich, wenn man mit dem Cursor drüber geht, die Farbe ändert. Und wenn man einmal auf dem Link war, soll die Farbe des Linkes trotzdem so bleiben und nicht in lila umgeändert werden.

wie geht das?

Und muss ich im Grundgerüst von Html noch etwas ändern, so dass der Browser erkennt, dass er es mit CSS zu tun hat?

Das wären VORERST die Fragen

mfg. Asparagus


***

Asparagus Films
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.02.2009, 14:58
Benutzer
neuer user
 
Registriert seit: 22.10.2008
Beiträge: 69
dephazz befindet sich auf einem aufstrebenden Ast
Standard

HTML ohne CSS wird schwierig
Such mal nach "a: hover und a: visited". Sollte alles beschrieben sein.

sollte etwa so aussehen:
HTML-Code:
a:link{color:#000;}
 a:visited{color:#ff0;}
 a:hover{color:#f00;}
 a:active{color:#f00;}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.02.2009, 15:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.02.2009
Beiträge: 3
Asparagus befindet sich auf einem aufstrebenden Ast
Standard

Danke für die Antwort.

Wo muss der Quelltext dann hin? in das '<a href="bla">' herein?


***
unabhängig davon noch eine Frage:
Wenn ich bei einer Tabelle ein Hintergrundbild reinmache, welches zu klein ist, wird es rechts wieder wiederholt. Kann ich irgendwie einstellen, dass es das Bild streckt?

mfg.

***
Asparagus Films
Mit Zitat antworten
  #4 (permalink)  
Alt 16.02.2009, 15:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.397
regloh wird schon bald berühmt werden
Standard

Zitat:
HTML ohne CSS wird schwierig
Ist doch ganz einfach. Einfach kein CSS benutzen. HTML funktioniert auch ohne. Zumindest für den Webentwickler. Die Browser nutzen es natürlich intern auch.

@Asparagus: Mach dich mal über die Grundlagen von CSS schlau. Wenn du nur das mit den Links vorhast, dann gibt es überhaupt kein Problem und es ist auch ziemlich einfach. Beispiel hatte mein Vorredner ja schon gegeben. Die Grundlagen bekommst du an jeder Ecke bei Google vermittelt und für den Anfang sollte Copy&Past auch reichen. Dann kannst du dich langsam ranarbeiten. Wenn es tiefgründiger werden sollte, dann wäre vielleicht doch noch ein Buch oder größeres Tutorial angebracht.
Mit Zitat antworten
  #5 (permalink)  
Alt 16.02.2009, 15:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.02.2009
Beiträge: 3
Asparagus befindet sich auf einem aufstrebenden Ast
Standard

Hallo,
dann werde ich mich mal an CSS ranarbeiten. Aber trotzdem möchte ich erstmal das mit dem Link jetzt reinmachen, auch wenn ich dann nicht verstehe, wie das funktioniert.
Also ich nehme jetzt den Quelltext - siehe oben und mache den genau so einfach in den body rein und dann funktioniert das sofort?!

mfg.


*edit:
geht das nun eigentlich, dass ich das Hintergrundbild meiner Tabelle strecke, so dass es nicht immer nebeneinander dargestellt wird, weil es zu klein ist für die tabelle?

***
Asparagus Films

Geändert von Asparagus (16.02.2009 um 15:50 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 17.02.2009, 00:46
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.12.2005
Ort: Oranienburg
Beiträge: 230
celine@23 ist in Verruf geraten
Standard

So müsste das Ausehen. Schau dir mal den Link an!

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hover mit CSS</title>

<style type="text/css">
<!--
a:link {
	color:#000;
}
a:visited {
	color:#ff0;
}
a:hover {
	color:#f00;
}
a:active {
	color:#f00;
}

-->
</style>
</head>
<body>

<a href="http://de.selfhtml.org/css/layouts/index.htm" title="CSS-basierte Layouts">CSS-basierte Layouts</a>
</body>
</html>

Check deine Seite mal mit http://validator.w3.org/ deine Quellcode ist echt Müll.
__________________
Das Leben ist ein scheiss Spiel, aber die Grafik ist geil!

Geändert von celine@23 (17.02.2009 um 00:58 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 17.02.2009, 00:57
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von celine@23 Beitrag anzeigen
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
-->
</style>
Ein XHTML-Parser wertet die Kommentare im Element style aus. Also bekommt der CSS-Parser nichts zu Gesicht, was zuvor daringestanden hat.

Ich verstehe einfach nicht, warum noch so viele Leute den IE 2 berücksichtigen …
__________________
toscho.de
Mit Zitat antworten
  #8 (permalink)  
Alt 17.02.2009, 01:11
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.12.2005
Ort: Oranienburg
Beiträge: 230
celine@23 ist in Verruf geraten
Standard

Das hier ist ein fertiges Grundlayout mit CSS nehme mal lieber das und baue deine Inhalte da ein. Den CSS Teil kannste später auch noch in einer externen Datei auslagern. Achja Firebug würde ich mir an deiner stelle installieren. Dann siehste in dem Template besser und schneller durch.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
	padding: 0;
	text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
	color: #000000;
}

/* Tipps für elastische Layouts:
1. Da die Gesamtgröße elastischer Layouts von der Standardschriftgröße des Benutzers abhängt, sind diese Layouts weniger berechenbar. Bei korrekter Verwendung haben sie außerdem für Personen, die größere Schriften benötigen, einen höheren Nutzwert, weil die Zeilenlänge proportional bleibt.
2. Die Größe der divs in diesem Layout basiert auf der Originalschriftgröße (100%) im Body-Element. Wenn Sie die Textgröße durch eine Einstellung wie font-size: 80% im Body-Element oder im #container global verringern, wird das gesamte Layout proportional verkleinert. Sie sollten die Breiten der verschiedenen divs vergrößern, um hierfür einen Ausgleich zu schaffen.
3. Wenn Sie in den einzelnen divs unterschiedliche Werte für die Schriftgröße angegeben, anstatt die Schriftgröße im Design global zu ändern (z. B. wenn #sidebar1 die Schriftgröße 70% zugewiesen wird und #mainContent die Größe 85%), so wird die Gesamtgröße der einzelnen divs proportional geändert. Sie sollten anhand der endgültig gewählten Schriftgröße entsprechende Anpassungen vornehmen.
*/
.oneColElsCtrHdr #container {
	width: 46em;  /* Mit dieser Breite wird ein Container erstellt, der in ein 800 Pixel breites Browserfenster passt, sofern für den Text die Standardschriftgröße des Browsers übernommen wird. */
	background: #FFFFFF;
	margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
	border: 1px solid #000000;
	text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
}
.oneColElsCtrHdr #header { 
	background: #DDDDDD; 
	padding: 0 10px 0 20px;  /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die Auffüllung entfernen. */
} 
.oneColElsCtrHdr #header h1 {
	margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */
	padding: 10px 0; /* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */
}
.oneColElsCtrHdr #mainContent {
	padding: 0 20px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
	background: #FFFFFF;
}
.oneColElsCtrHdr #footer { 
	padding: 0 10px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
	background:#DDDDDD;
} 
.oneColElsCtrHdr #footer p {
	margin: 0; /* Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen, können Sie unerwartete Abstände zwischen divs vermeiden. */
	padding: 10px 0; /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
}
-->
</style></head>

<body class="oneColElsCtrHdr">

<div id="container">
  <div id="header">
    <h1>Kopfzeile</h1>
  <!-- end #header --></div>
  <div id="mainContent">
    <h1> Hauptinhalt </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
    <h2>H2-Überschrift </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
	<!-- end #mainContent --></div>
  <div id="footer">
    <p>Fußzeile</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
__________________
Das Leben ist ein scheiss Spiel, aber die Grafik ist geil!

Geändert von celine@23 (17.02.2009 um 01:15 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 17:09
CSS Buchtipp Eric A. Meyer vistahr Ressourcen 2 01.11.2006 19:53
css code fragen! a.searchlink ??? Beta CSS 2 15.09.2005 17:15
CSS Neuling hat einige Fragen Toupman CSS 4 18.05.2005 15:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:01 Uhr.