HTML Tabellenabstand IE/firefox

Unregistriert

Danke erstmal für eure hilfe !

Mein porblem ist leider noch nicht aus der welt, aber ers sieht schonmal ordentlicher aus.

Ich habe mit Golive angefangen, und golive macht scheinbar keine Grundstrukturen :-/ (Golive 2)
Kann auch daran liegen, dass das schon etwas älter ist.

Da ihr euch meine seite nicht wirklich vorstellen könnt, zeige ich sie euch mal in einem screen.

<img>http://www.fotos-hochladen.net/big/unbenanntxs6aqtyu.png</img>

Habe den Code jetzt soweit übernommen, aber ich verstehe nicht wofür das hier gut ist:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

welche website muss da reiN ?

Unregistriert

die fehler im text, mache ich später weg

Unregistriert

ich bins nochmal..
mir ist aufgefallen, das der screen etwas veraltet ist.

[Blockierte Grafik: http://www.fotos-hochladen.net/unternhemen6zbtukx5.png]

das ist der neue !

danke im vorraus

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

Unregistriert

mhm... ich habe das einfach mal in einem text dok als .htm gespeichert...

allerdings weiß ich jetzt nicht wo ich die hintergrundbilder einfügen muss.

Ich habe für das Menu ein javascript benutzt...

Den hier : (habe ihn im html verfasst und im i-net übersetztenlassen)

sieht allerdings ziemlich chaotisch aus....

Bandit

Das macht Sinn! Ich gebe auch immer HTML-Code mit JavaScript aus, immer in der Hoffnung, dass der Besucher JS abgeschaltet und dann nix sieht.

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

Unregistriert

Wie gebe ich hier die sachen in [Code]tags an?

ja ich wollte das eig. auch nur so machen, weil wenn ich was am menu verändern will, muss ich nur eine datei umändern
dein quelletext zeigt mit i.wie was komplett falsches an...

screen:
[Blockierte Grafik: http://www.fotos-hochladen.net/unbenanntiw1t04uj.png]

#navi a {
display: block;
height: 44px;
width: 171px;
text-align: center;
color: #000;
text-decoration: underline;
font: 17px/44px Times, serif;
text-indent: -999em;
background: url(../pic/button.gif) no-repeat;

danke

Unregistriert

hier das dropdown menu

[Blockierte Grafik: http://www.fotos-hochladen.net/unbenannt124n87pko.jpg]

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 =)

Unregistriert

ahh jetzt nimmt es gestalt an

ich versuch dann mal die hintergründe einzufügen

Unregistriert

mein ergebnis:
die größen sind noch nicht angepasst, aber ich weiß nicht wofür die andern sachen stehen zb. h2
(die, die du nicht auf dem pic beschriftet hast)

[Blockierte Grafik: http://www.fotos-hochladen.net/atecsliceslqpeai07.png]

Bandit

Ich hoffe nur, dass diese Seite nicht die aktuelle Seite der Firma A-TEC ersetzen soll, denn die aktuelle Seite sieht wesentlich besser aus.

Unregistriert

falscher upload :-/

[Blockierte Grafik: http://www.fotos-hochladen.net/unbenanntcof4t5eb.png]

die website ist für atec.de
so sinnlose kommentare kann ich hier nicht gebrauchen.

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.

Bandit

Zitat von Unregistriert

die website ist für atec.de

Ja eben, die Seite sieht jetzt besser aus, als das was du hier machst. Das ist eine Verschlechtbesserung

Zitat von Unregistriert

so sinnlose kommentare kann ich hier nicht gebrauchen.

Nicht kritikfähig?

Und wenn du schon für eine Firma eine Homepage bastelst, dann solltest du das auch können und nicht mit unserer kostenloser Hilfe Geld verdienen.

Unregistriert

ich werde mir die seite mal angucken ..
.

bandit600:

es ist lächerlich was du erzählst....

atec.de ist eine ganz ander seite als A-TEC.de
(fals du das noch nicht bemerkt hast)

Desweitern kenne ich den geschäftsleiter privat und er hat mich gefragt, ob ich das denn nicht mal ausprobieren wolle.
Genau das tue ich gerade.

Also hör auf dir i.was aus den fingern zu saugen!

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

Grevas

Bis auf die Tatsache, dass die startseite besch* ist und die Inhalte bei anderen Sprachen fehlen etc... Öhm, doch, das Layout ist aufjedenfall viel angenehmer als dein bunti-wolken kram den ich aufm screen seh

Ist aber denke ich mal noch nicht die endgültige Fassung.

Wenn du nicht weist was "h2" bedeutet, warum schaust du nicht einfach mal nach? Gleich das erste Ergebniss der Google-Suche (nach h2 html) bringt mir eine ausführliche und klare Erklärung.
Ausprobieren ist sehr gut, aber alles fragen nicht...

//edit: komisch, vorhin ließen sich auf der englischen Fassung die Subnavi links nicht anklicken - nu gehts. Kann man das also schoma streichen.

Unregistriert

Ich entschuldige mich für mein Verhalten.

Ich werde jetzt erstmal wieder allein arbeiten.

ich weiß was h1 h2 h3 h4 bedeutet, ich wollte eig. die navi li usw. wissen.

Danke

man schreibt sich vllt. nochmal

Ich verstehe bis heute nicht, wieso man sowas nicht mal in der Schule druchnimmt

Tags