Homepage Problem

Click_It · 22 Oktober 2010

ja also ich werd heute mal mit dem css stylesheet weitermachen, irgendwie hab ich gestern die buttons nicht hinbekommen -.-

aber wenns aktualisiert wird kommts auf den link im ersten post :)

(falls es zu sehr richtung CSS abdriftet kanns gerne ins CSS board verschoben werden :)

EDIT:

Hab hier mal das HTML

<html>
<head>
<title>Overview</title>
<link rel="stylesheet" type="text/css" href="HP-CSS.css">
</head>

<body>

<div id="button">
<a href="Kategorien/About Me.html">About Me</a> 
<a href="Kategorien/Architecture.html">Architecture</a> 
<a href="Kategorien/People.html">People</a> 
<a href="Kategorien/Sports.html">Sports</a> 
<a href="Kategorien/Stills.html">Stills</a> 
<a href="Kategorien/Others.html">Others</a> 
<a href="Kategorien/Imprint.html">Imprint</a> 
</div>

</body>
</html>

und das zugehörige CSS sheet

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

body { background-color:#878787;}

p { font-family: Helvetica, Arial, sans-serif; color:#999999; text-decoration:none; border-right-width:1px; border-right-color:#FF0000; margin-left:50px; }

a#button:link { background-color:#878787; width:200px; height:50px; display:block;}
a#button:hover { background-color:#FF0000; width:200px; height:50px; display:block;}
a#button:active { background-color:#FFFFFF; width:200px; height:50px; display:block;}

Leider funktioniert momentan bei den links weder das hover noch das active, was is da falsch?

wegen der buttons:
ich hab mir das CSS tutorial bei html.net durchgelesen, für die buttons muss ich extra so eine box erstellen oder? aber wie kann ich die dann mit den links kombinieren?

skizZ · 22 Oktober 2010

Hallo,

als erstes solltest du einen Doctype angeben.

HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

über das <html> Tag.

Außerdem fehlt dir sowas im <head>-Bereich

HTML:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Du solltest dir mal das Grundgerüst eines HTML Dokumentes anschauen.
Das soll keine Schikane sein, aber du sollst es richtig lernen :-)

Die Buttons kommen in eine Liste

HTML:

<ul>
 <li class="button">Button1</li>
 <li class="button">Button2</li>
</ul>

Und im Stylesheet für "class" setzt du das Blockelement, gibst eine
feste Größe an und setzt den border-right.

skizZ · 22 Oktober 2010

Hier mal kleines, grobes Beispiel:

HTML Datei

HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 <link rel="stylesheet" type="text/css" href="styles.css">
 </head>
 
 <body>
   <ul>
     <li class="button"><a href="#">Test</a></li>
     <li class="button"><a href="#">Test</a></li>
   </ul>
 </body>
 </html>

CSS-Datei

HTML:

ul{
list-style:none;
}

.button{
background-color:#ccc;
display:block;
width:100px;
height:50px;
border-right: 1px solid #000;
margin-top:10px;
}

.button a{
display:block;
width:100px;
height:50px;
}

.button a:hover{
display:block;
width:100px;
height:50px;
background-color:#abcabc;
border-right: 1px solid #cbacba;
}

Click_It · 22 Oktober 2010

Hi,

erstmal danke für die tolle Hilfe =)

HTML sieht jetzt so aus:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Overview</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="HP-CSS.css">
</head>



<body>
	<u1>
    	<li class="button"><a href="Kategorien/About Me.html"><p>About Me</p></a></li>
        <li class="button"><a href="Kategorien/Architecture.html"><p>Architecture</p></a></li>
        <li class="button"><a href="Kategorien/People.html"><p>People</p></a></li>
        <li class="button"><a href="Kategorien/Nature.html"><p>Nature</p></a></li>
        <li class="button"><a href="Kategorien/Sports.html"><p>Sports</p></a></li>
        <li class="button"><a href="Kategorien/Stills.html"><p>Stills</p></a></li>
        <li class="button"><a href="Kategorien/Others.html"><p>Others</p></a></li>
        <li class="button"><a href="Kategorien/Imprint.html"><p>Imprint</p></a></li>
  	</u1>



</body>
</html>

und das CSS Sheet so:

HTML:

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

body 			{background-color:#878787;}

p 				{font-family: Helvetica, Arial, sans-serif; color:#999999; text-decoration:none; text-align:center;}
u1 				{list-style:none;}

.button			{display:block; width:200px; height:50px; margin-top:20px; text-decoration:none}
.button a		        {display:block; width:200px; height:50px; background-color:#878787; text-decoration:none; border-right: 1px solid #999999;}

.button a:hover	        {display:block; width:200px; height:50px; background-color:#878787; text-decoration:none; border-right: 1px solid #878787;}

momentan hab ich das problem das ich zwischen den buttons einen abstand hab den ich nicht will (vermute das hängt mit den tags zusammen)

ich hab ja die text einstellungen momentan mit ....., kann ich auch mehrere konfigurationen machen, z.B.: p1, p2, etc...?
EDIT: mit p hab ichs schon versucht aber das geht nicht, kann ich da jeden beliebigen buchstaben nehmen?

und den text in den buttons will ich nicht nur horizontal sondern auch vertikal zentrieren, aber da find ich nix dazu

EDIT2: wo muss ich was im .css dazuschreiben das ich bei den hover links eine andere textfarbe hab?

Fragen über fragen ^^

greez Click_It

skizZ · 22 Oktober 2010

Also, das -Tag steht für einen Absatz. Demnach bekommst du einen Abstand. Dieses -Tag kannst du auch einfach weglassen, da an dieser Stelle überflüssig. Es handelt sich nicht um einen Absatz, sondern einen Link. Dies hast du schon mit dem <a>-Tag ausgezeichnet. Und nein, du kannst da nicht jeden beliebigen Buchstaben nehmen, sondern nur die HTML Tags...

SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)

bitte lesen.

Um Absatz A anders zu formatieren als Absatz B musst du nur Styles erstellen...




und entsprechend die Klassen in der styles.css erstellen und definieren.

Zur vertikalen Zentrierung ist line-height dein Freund.

line-height: Zeilenhöhe: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

und zur Farbänderung eines Links hast du color ...

So, nun erstmal ein Paar Tage Zeit nehmen und google benutzen. Dort findest du eigentlich alles was du brauchst.

Nochmal: Grundlagen anlernen

Du willst es zwar richtig machen, willst aber nicht lesen.

skizZ

Click_It · 22 Oktober 2010

doch ich will lesen, tu ich auch aber manche sachen sind nirgends erklärt -.-

z.B. ich hab so eingestellt das mir die schrift gefällt, wenn ich das im html nicht zu den links dazuschreib, hab ich den üblichen blauen link, wenn ich ihn aber dazuschreib hab ich zwar meine schrift aber den abstand der auf zurückzuführen ist...

Ich hab jetzt ca. 30min gegoogelt und nichts gefunden

Elroy · 22 Oktober 2010

Hallo.

Du hast da Links also solltest du a so einstellen das dir die Schrift gefällt.
 ist für einen Absatz da nicht für einen Link.

Wenn ich das richtig gesehen habe kannst du auch die Class .button entfernen da du <li> direkt formatieren kannst.

Gruss
Elroy

Click_It · 22 Oktober 2010

Hi,

ich weiß ich nerve und ich weiß ihr werdet schreiben das ich doch selber nach einer Lösung suchen soll, aber das hab ich schon gemacht und irgendwie nichts gefunden...

Mein Problem, ich will bei den buttons das sie IMMER wenn man mit der maus drüberfährt hovern!

das tun sie allerdings nur beim ersten mal wenn ich die seite aufrufe, danach wechseln die links nämlich auf "schon einmal besucht".
Wenn ich bei a:visited dann aber die daten eingeb wie bei den anderen, hovern die besuchten natürlich nicht mehr....

http://danielwillinger.bendingzone.at/HTML-Docs/Index.html

Hier der übliche HTML Code und das .css:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Overview</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="../HP-CSS.css">
</head>

<body>

<table style="top: 200px; width:100%; ">
    <tr>
    <th width="15%"></th>
    <th width="85%"> 
    </tr>

	<tr>
	<th width="15%" valign="top" >
	<u1>
    	<li><a href="About Me.html">About Me</a></li>
        <li><a href="Architecture.html">Architecture</a></li>
        <li><a href="People.html">People</a></li>
        <li><a href="Nature.html">Nature</a></li>
        <li><a href="Sports.html">Sports</a></li>
        <li><a href="Stills.html">Stills</a></li>
        <li><a href="Others.html">Others</a></li>
        <li><a href="Imprint.html">Imprint</a></li>
  	</u1>
	</th>
    
    <th width="85%">
    <p> 
    Platzhalter
    </p>
    </tr>
    </table>


</body>
</html>

Code:

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

body {background-color:#878787;}


p {font-family: Helvetica, Arial, sans-serif; color:#333333; text-decoration:none; text-align:center; line-height:15px; font-size:14px;}

u1 {list-style:none;}

li {font-family:Helvetica, Arial, sans-serif; font-size: 16px; line-height:50px; text-decoration:none; text-align:center; color:999999; }

a:link	 {color:#999999; display:block; width:200px; height:50px; background-color:#878787; text-decoration:none; border-right: 1px solid #999999;}
a:active {color:#999999; display:block; width:200px; height:50px; background-color:#878787; border-right: 1px solid #878787;}
a:hover {color:#333333; display:block; width:200px; height:50px; background-color:#878787; border-right: 1px solid #878787;}
a:visited {color:#999999; display:block; width:200px; height:50px; background-color:#878787; border-right: 1px solid #999999;}

.button a:link {display:block; background-color:#878787; text-decoration:none;}
.button a:hover {display:block; background-color:#878787; text-decoration:none;}

threadi · 22 Oktober 2010

Die Reihenfolge der Pseudoklassen für die Links hast Du falsch gesetzt. Die richtige Reihenfolge wäre:

:link
:visited
:hover
:active
:focus

Dann klappt das auch was Du willst.

Click_It · 22 Oktober 2010

danke, es geht =)

skizZ · 22 Oktober 2010

Warum fängst du schon wieder mit Tabellen an?

Click_It · 22 Oktober 2010

weil ich irgendwie zu blöd bin um einen anderen weg zu finden das die sachen die ich rechts haben will auch rechts sind und nicht unter den links -.-

Elroy · 23 Oktober 2010

Click_It schrieb:
weil ich irgendwie zu blöd bin um einen anderen weg zu finden das die sachen die ich rechts haben will auch rechts sind und nicht unter den links -.-

Das kannst du mit CSS float erreichen.
Am besten mal hier schauen: CSS4You-float.

Das ist jetzt nicht böse gemeint aber wäre es nicht besser erst mal ein Tutorial durch zu arbeiten?
Du hast noch ziemliche Wissenslücken, auch was die Basics betrifft.

Gruss
Elroy

Click_It · 23 Oktober 2010

Oke, alles klar soweit, hab die navigations links in ein div gepackt mit float left, und für die gallerie hab ich auch ein div gemacht.

Jetzt wollte ich die Gallerie so einbinden wie mir auf seite 2 geraten wurde, nämlich einfach das in's div schreiben:

HTML:

<!--START SIMPLEVIEWER EMBED -->
	<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
	<script type="text/javascript">
	$(document).ready(function () {
		SV.simpleviewer.load('sv-container', '100%', '100%', '666666',true);
	});
	</script>
	<div id="sv-container"></div>
	<!--END SIMPLEVIEWER EMBED -->

aber das geht nicht -.-, vermutlich liegts an der reihenfolge der befehle im stylesheet, aber alle von mir ausprobierten kombinationen helfen nicht :/

Hier mal das aktuelle Stylsheet und HTML:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Architecture</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="../HP-CSS.css">
</head>



<body>

	<u1>
    	<div id="a">
      	<li class="button"><a href="About Me.html">About Me</a></li>
        <li class="button"><a href="Architecture.html">Architecture</a></li>
        <li class="button"><a href="People.html">People</a></li>
        <li class="button"><a href="Nature.html">Nature</a></li>
        <li class="button"><a href="Sports.html">Sports</a></li>
        <li class="button"><a href="Stills.html">Stills</a></li>
        <li class="button"><a href="Others.html">Others</a></li>
        <li class="button"><a href="Imprint.html">Imprint</a></li>
  		</div>
    </u1>
	



<div id="b">
Test
</div>

</body>
</html>

Code:

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

/*Allgemeine Body Einstellungen*/
body 			{	background-color:#878787;}

/*Schrift Einstellungen*/
p				{	font-family: Helvetica, Arial, sans-serif; color:#333333; text-decoration:none; text-align:center; line-height:15px; font-size:14px;}

/*Gruppierung der Sidebar*/
u1 				{ 	list-style:none;}

/*Schrift in den Sidebar Links*/
li				{	font-family:Helvetica, Arial, sans-serif; font-size: 16px; line-height:50px; text-decoration:none; text-align:center; color:999999; }

/*Einstellungen der Sidebar Links*/
.button a:link			{	color:#999999; display:block; width:200px; height:50px; background-color:#878787; text-decoration:none; border-right: 1px solid #999999;}
.button a:visited		{	color:#999999; display:block; width:200px; height:50px; background-color:#878787; text-decoration:none; border-right: 1px solid #999999;}
.button a:hover			{	color:#333333; display:block; width:200px; height:50px; background-color:#878787; text-decoration:none; border-right: 1px solid #878787;}
.button a:active 		{	color:#999999; display:block; width:200px; height:50px; background-color:#878787; text-decoration:none; border-right: 1px solid #878787;}

/*Box für die Sidebar*/
div#a					{	color:#878787; float:left; width:10%;}

/*Box für den Content*/	
div#b					{	color:#0F0; float:right; width:80%;}

threadi · 23 Oktober 2010

Zwischen <ul> und <li> darf nichts stehen. Also nimm das <div> dort raus. Die ID kannst Du auch an das <ul> hängen, und das CSS entsprechend anpassen.

Click_It · 24 Oktober 2010

danke, leider hab ich noch immer keine möglichkeit gefunden den simpleviewer ohne iframe einzubinden :/

bin momentan auf der suche nach einer anderen gallerie aber irgendwie mag mir nichts so recht gefallen :/

Cheffchen · 24 Oktober 2010

Hallo,

bleibe doch erst mal bei der wenn sie dir gefällt.
ich habe geschrieben "zb: bei Menschen, Tabelle, Links Menü und Rechts das, natürlich musst den Pfad anpassen von "svcore/js/simpleviewer.js" "
Leider hast ja die erste testseite gelöscht deswegen kann ich die auch nicht sagen wie jetzt der Pfad wäre z.b. "../menschen/svcore/js/simpleviewer.js" oder oder, das siehst nur du.

Cheffchen

Click_It · 24 Oktober 2010

naja gelöscht hab ich sie nicht, aber ich hab halt den aktuellen fortschritt hochgeladen^^

ich habs natürlich mit angepasstem pfad versucht ^^

irgendwie mag der simpleviewer aber nicht angezeigt werden in der <div> box die ich gemacht hab....

Cheffchen · 24 Oktober 2010

Hallo,

habe es auch gerad mal kurz vesucht, simpleviewer stellt sich auch bei mir quer sobalt unterordner ins spiel kommen.
Entweder suchts mal im Internet wie das mit unterordner funzt oder musst doch umsteigen auf ein anderen, leider.

Cheffchen

Click_It · 24 Oktober 2010

schade, hab schon befürchtet das ich umsteigen muss :/

leider gibts kaum was was so einfach funktioniert wie simpleviewer, gut aussieht, und gratis is

Homepage Problem

Neues Mitglied

Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Moderator

Neues Mitglied

Mitglied

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Moderator

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Neues Mitglied