Beiträge von lukasn

lukasn

Code

#navi ul {
     list-style: none;
}

sollte dein Problem lösen. Allerdings noch was anderes: Warum definierst du immer id und class? eins davon wäre genug

-Lukas

lukasn

Bei euch schneits? Hier schauts immer noch nach Frühling aus =)

lukasn

Hehe, du hast es ernst gemeint als du sagtest du spielst mit CSS rum, was? =)

Im Safari 90% find ich allerdings etwas übertrieben, das Bild wird bei mir nur gezeigt, solange man die Maustaste gedrückt hält. Hoffentlich kriegste es noch Bugfrei und IE tauglich, dann werd ich se gerne verwenden

-Lukas

lukasn

Lieber Herr Unregistriert, arbeite doch bitte mal an deinem Ton, das geht ja mal gar nicht.
atec.de ist ja die Seite deines Auftraggebers, und die sieht nunmal um vieles besser aus als das, was du hier produzierst. Ich helf dir gerne weiter dabei, aber so ein Design war vor 7-10 Jahren schön, 2010 ist anders.

Was mich aber echt nevt, ist dass du hier als Gast über Stammmitglieder lästerst weil du deren Kritik nicht verträgst.

Gruss,
-Lukas

lukasn

Na, das sieht doch schonmal ganz gut aus. Aber Header- und Navi sehen ja ganz anders aus als auf deinem originale Screenshot, warum hast du da nicht alles kopiert (z.B. Rahmen und die Bilder im Header)?

Und ganz ehrlich: Wenn du nicht weisst was <h2> ist, dann bist du nicht bereit eine Website zu machen. Ein letztes mal noch verweise ich dich auf Selfhtml, solange du dich weigerst die absoluten Basics zu lernen bringt dir das ständige Vorgekaue von mir auf die lange Sicht auch nichts. Du kannst meinen Code zwar kopieren, aber nicht an deine eigenen Bedürfnisse anpassen.

-Lukas

EDIT: Ach ja, nochwas. Sei doch so lieb und Verlinke auf deine Bilder, anstatt sie direkt einzubinden, bei Bildern dieser Grösse ist das eher irritierend.

lukasn

Na, hast du das CSS als separate Datei gespeichert? mein HTML geht davon aus, dass du eine style.css im gleichen Ordner hast, mit dem oben genannten CSS Code. Falls du das so gespeichert hast, in welchem Browser (version?) hast du den obigen Screenshot gemacht?

Wenn du das Menu extern willst, machste das besser per PHP include als mit diesem Javascript.

EDIT: Zum Dropdown: Das lässt sich ganz einfach per CSS machen, ich mach dir später heut Abend ne Grundlage. Jetzt muss ich erst mal Abendessen machen =)

lukasn

Verwend in Zukunft bitte

Code

tags hier auf dem Forum.


Von der JS Navi will ich dir mal abraten, auch eine Dropdown-Navi kann man in CSS realisieren, und zwar deutlich lesbarer als das Chaos da oben ;) Mach mal einen Screenshot eines aktiven Navi-Links, also mit offenem Dropdown. Dann kann ich dir nen CSS Ansatz dafür geben.


Zum Thema Hintergrundbilder häng ich dir noch ein Bild an, wie du die einzelnen Bilder circa zuschneiden sollst, in deinem Originaldokument siehst du am besten, wie genau das dann sein soll. Achte einfach darauf, dass die jeweiligen Rahmen (z.B. um die Navigations-Buttons) auch auf dem Bild sind.
Eingebunden werden die dann per CSS in der jeweiligen Dekalration, z.B. so:


[CODE]
h1 {
	height: 184px;
	text-indent: -999em;
	background: url(link/zum/bild.png) no-repeat;
}

Alles anzeigen

Gruss,
-Lukas

EDIT: Das Bild war zu gross ums Anzuhängen, stattdesen also ein Link

lukasn

Na also, jetzt weiss ich mal, wie das ding aussehen soll. Da ich keine Tabellenlayouts unterstütze, erst recht nicht bei so einem Simpellayout, schlage ich dir mal einen alternativen Weg vor.

Ich hab dir hier mal ein grobes CSS-Layout zusammengestellt, die Höhen- und Breitenangaben sind ohne Gewähr, die musst du noch an deine Grafiken anpassen. Das selbe gilt für die Schrift, die hab ich auch nur grob angepasst.
Ausserdem solltest du den text im header mit text-indent: -999em; ausblenden und dann das Header-Bild als Hintergrundbild einbinden. Auch die restlichen Hintergrundbilder musst du noch entsprechend zuschneiden und dann im CSS die Angaben anpassen.
Ein Spezialfall ist hier noch das Hintergrundbild im #wrapper, da kommt das Wolkenmuster hin, welches unter der Navi um den eigentlichen Inhalt mit background-position entsprechend positioniert wird.

So, hier die HTML-Datei:

HTML

<!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>A-TEC Anlagentechnik GmbH</title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
</head>


<body>
	<div id="wrapper"><!-- Wird nur benötigt, wenn die Seite zentriert werden soll -->
		<h1 id="header">A-TEC Anlagentechnik</h1><!-- Die schrift wird per CSS versteckt, der Header als Hintergrundbild eingebunden -->
		<ul id="navi">
			<li><a href="#">Home</a></li>
			<li><a href="#">Grubengas</a></li>
			<li><a href="#">Dienstl. (DL)</a></li>
			<li><a href="#">Referenzen</a></li>
			<li><a href="#">Aktuell</a></li>
			<li><a href="#">Kontakt</a></li>
		</ul>
		<div id="content">
			<h2>Das Unternehmen</h2>
			<p><!-- Hier kommt der Inhalt hin-->Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben.</p>
		</div>
		<div id="footer">
			<a href="#">Impressum</a> | <a href="#">Seite drucken</a> | <a href="#header">Seitenanfang</a> | &copy;2010 A-TEC Anlagentechnik GmbH
		</div>
	</div><!-- Ende Wrapper -->		
</body>


</html>

Alles anzeigen

und die style.css:

Code

* {
	margin: 0;
	padding: 0;
	border: 0;
	text-decoration: none;
}


#wrapper {
	position: relative;
	width: 1024px;
	height: 857px;
	margin: 0 auto;
	background: #555;
}


h1 {
	height: 184px;
	background: #CCC;
}


h2 {
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 10px;
}


#navi {
	height: 44px;
	background: #888;
	list-style: none;
}


#navi li {
	float: left;
	width: 170px;
}


#navi a {
	display: block;
	height: 44px;
	width: 171px;
	text-align: center;
	color: #000;
	text-decoration: underline;
	font: 17px/44px Times, serif;
}


#content {
	width: 700px;
	height: 390px;
	padding: 110px 10px 0 10px;
	margin: 50px auto 0 auto;
	background: #CCC;
	font: 15px/27px Arial, sans-serif;
}

#footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 26px;
	margin: auto 0 0 0;
	font: 11px/26px Times, serif;
	background: #CCC;
}

Alles anzeigen

Das sollte dich schonmal ziemlich weit bringen, wenn du noch weitere Fragen hast meld dich

-Lukas

lukasn

Seit ich se am 19. am Paganfest in Pratteln gesehen hab, steht Arkona ganz weit oben auf meiner Liste

/watch?v=A7fuuDc2hH0

lukasn

Design gefällt mir recht gut, die riesige Googlewerbung direkt in der Mitte der Seite, da wo man als erstes hinschaut, ist allerdings etwas nervig.
Zur Technik gibts hingegen einige Kritikpunkte, der wichtigste davon: Dein <!DOCTYPE fehlt. Auch sonst hast du noch einige Validator-Fehler, bügle die doch erst mal noch aus, so lange halte ich mich mit einer Bewertung noch zurück.

-Lukas

lukasn

Ok... Ich hab ja gesagt ich geb auf, aber darin bin ich nicht gub =P. Der Anlauf ist ja schonmal gut, einige Fehler in der Grundstruktur gibt es aber noch. Als erstes mal fehlt der Doctype, in deinem Fall wohl für HTML 4.01

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Dann solltest du noch einen Zeichensatz angeben, am besten UTF-8, dann must du das Dokument aber auch als UTF-8 ohne BOM speichern.

HTML

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

Ausserdem musst du den BODY-tag noch schliessen, direkt vor dem </html>

Dein berichtigter Code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Seitentitel</title>
<script type="text/javascript" src="javascripte/mouseover_effekt.js"></script>
<script type="text/javascript" src="javascripte/headline.js"></script>
<script type="text/javascript" src="javascripte/menu.js"></script>
</head>
<body>
<noscript>
Your browser does not support script
</noscript>


<br>
<table width="1023" border="1" cellspacing="5" cellpadding="25" background="../WillkommenBG.gif"height="600">
<td>
<div align="center">
<FONT FACE="Lucida Sans,Verdana,Comic Sans MS,Arial,Times New Roman">
<table width="700" border="1" cellspacing="10" cellpadding="50" background="../pic/schreibBG.gif" height="500">


<td><b>Das Unternehmen</b><br>
blblblblbllb	
</td>


</table>
</font></div>
</td>
</table>
</div>
<tr>
<div align="left">
<font color="black"><a href="Impressum.htm "><font size="-1" color="black"> Impressum</font></a> | <font color="black"></font><a href="javascript:window.print()"><font size="-1" color="black">Seite drucken</font></a><font color="black"> |</font> <a href="#seitenanfang"><font size="-1" color="black">Seitenanfang</font></a><font color="black"> | &copy; 2010 A-TEC Anlagentechnik GmbH
</tr>


</body>
</html>

Alles anzeigen

Dieser Code ist jetzt noch immer nicht korrekt, den Inhalt des BODY-tags habe ich direkt von dir übernommen und der ist immer noch ziemlich durcheinander. Da ich nicht weiss was genau du mit der Seite darstellen willst, kann ich den aber nicht einfach so korrigieren. Allerdings sollte der validator schon mal etwas bessere Resultate liefern.
Du sagst du hast die Basis mit GoLife erstellt, wenn du willst kannste mal die originale PSD hochladen, da sehe ich wies aussehen soll und kann dir bessere Hilfestellungen liefern.

Gruss,
-Lukas

PS: Mensch, ich bin einfach zu nett =P

EDIT: Whoops, da war noch ein fehler den ich vergessen habe, der <title>-tag ist für valides HTML auch nötig. Ich habe den code dementsprechend überarbeitet.

lukasn

Ok, das ist offensichtlich ein hoffnungsloser Fall. Die Struktur ist nicht "nicht ganz richtig", sie ist absoluter Müll. Aber ich gebs auf, schau halt wie weit du mit deiner Einstellung kommst. So kann dir tatsächlich keiner weiterhelfen.

lukasn

Meine Güte, einmal sag ichs noch: Das funktioniert per Zufall im IE, es funktioniert sonst nirgends weil du sämtliche korrekten HTML-Strukturen ignorierst und dein Code nichts mit validem HTML zu tun hat. Mehr wird dir keiner sagen können. Dein HTML sagt einem Browser circa soviel wie dieser Satz: "schaute schwimmen das Kirschen in in der Briefpapier"

-Lukas

lukasn

Wie wärs damit?

http://validator.w3.org/#validate_by_upload oder damit:
http://validator.w3.org/#validate_by_input

Allerdings solltest du wirklich erst mal ein HTML-Grundgerüst anschauen, sonst findest du beim Validator for lauter Fehlerangaben keine brauchbaren infos.

lukasn

Du hast jetzt Mehrere antworten. Wenn du willst dass dein Code funktioniert, besonders in allen Browsern gleich, dann muss der wenigstens halbwegs korrekt sein. Mit solchem Käse wie du oben gepostet hast, wirst du das nie erreichen. Und solange du uns nichts brauchbares volegst wird dir auch keiner weiterhelfen. Schau mal auf selfhtml nach, oder google nach "HTML Grundlagen", sonst wird das nichts.

-Lukas

EDIT: Sorry über den harten Ton, aber solche absoluten Grundlagen musst du einfach selbst lernen.

lukasn

Dieser Code ist Käse, lern doch erst man die Basics.

Hier mal deine gröbsten Fehler

kein <!DOCTYPE
keine Head- und Body tags
manche Tags werden nicht geschlossen, z.B. <html>
Wilde mischung aus Tabellen- und CSS Layout

Wie gesagt,schau dir mal die Grundlagen an, dann probiers nochmal.

-Lukas

lukasn

Selbst wenn du bei Tabellen bleiben willst, jag den code doch mal durch den Validator...

Erster Fehler der mir auffällt: Du schliesst den <HEAD> tag nicht... Nach weiteren hab ich nicht gesucht

-Lukas

lukasn

Zitat

GRANT OF LICENSE: Upon payment of the license fee, the seller grants to the purchaser of the font license a perpetual Non Exclusive License to use the digital font software for commercial purposes (including but not limited to: production design of text, graphics, logos, identity, etc. for print and/or digital output) on an unlimited number of computers and output devices within the purchaser's commercial organization.

Zitat

Bei Zahlung der Lizenzkosten gewährt der VERKÄUFER dem KÄUFER der Schrift eine nicht zeitbedingte, Nicht-Exklusive Lizenz, die digitale Schrift für kommerzielle Anwendungen zu verwenden. (Dies beinhaltet, ist aber nicht limitiert auf: Design von Texten, Grafiken, LOGOS, ID's etc, für Druck wie auch Digitale Präsentation.) Die Schrift darf auf einer unlimitierten Anzahl Computern und Ausgabegeräten innerhalb der Firma des KÄUFERS verwendet werden.

So, jetzt alles klar? Zusammenfassung davon in meinem oberen post Nach kauf der schrift kannste damit machen was du willst, ausser die Schrift selbst ausserhalb deiner Firma weiter zu geben

lukasn

Eh, ne. das heisst du darfst die Schrift für sämtliche kommerziellen (also auch nicht-kommerziell, wäre anzunehmen) Zwecke verwenden. Anders gesagt: Du darfst damit mache was du willst, solange du sie nicht an eine andere Firma weitergibst.

-Lukas

lukasn

Ich nehm an weil man bei dem Baukasten eins gewinnen kann

...aber meint er die frage ernst? Falls ja, das iPad ist das bisher unsinnigste Produkt von Apple, eigentlich ein iPhone ohne dessen Vorteile (grösse, Telefon, Kamera...) mehr erfährst du auf apple.com (achja, ich sag das als Mac-User...)

-Lukas

Beiträge von lukasn

Die Punkte in der ul gehen nicht weg!?

off off topic quasselfred

CSS "Lightbox"

HTML Tabellenabstand IE/firefox

HTML Tabellenabstand IE/firefox

HTML Tabellenabstand IE/firefox

HTML Tabellenabstand IE/firefox

HTML Tabellenabstand IE/firefox

eure lieblingsbands

Skiratgeberportal - Bitte um Kritik

HTML Tabellenabstand IE/firefox

HTML Tabellenabstand IE/firefox

HTML Tabellenabstand IE/firefox

HTML Tabellenabstand IE/firefox

HTML Tabellenabstand IE/firefox

HTML Tabellenabstand IE/firefox

Darstellungsfehler im IE (Fehler im Code?)

Logo mit geschützer Schriftart

Logo mit geschützer Schriftart

Webseiten-Baukasten mit de.cc, ch.cc oder at.cc Domain, Hosting und E-Mail