Webdesign in HTML umsetzen

**Fixed** · 08.09.10, 14:26

Hallo Community,

ich habe mich mal an einem Webdesign veruscht, nach Surakos Tutorial.
Nun möchte ich das Design gerne in HTML mit div's umsetzen.
Doch ich hab keine Ahnung wie das Funktioniert.

Ich hatte vor den Hintergrund zu nehmen und darein dann den weißen Kasten zu zentrieren.
in den Weißen Kasten lege ich dann den Header, Content und die News Box.
Doch wie richte ich das aus?
Könntet ihr mir bitte ein Beispiel geben?

[Um Links zu sehen registriere dich bitte. Klicke hier.]

lg Fixed

**Scharock** · 08.09.10, 14:30

Um das als HTML umzsetzen muss du folgendes tun:
1. Slicen
2. In HTML Gitter aufsetzen
3. Die einzelnden Bilder einsetzen
4. Hoffen das alles Spaltenfrei sitzt

**Grapefruit** · 08.09.10, 14:45

Zitat von Scharock [Um Links zu sehen registriere dich bitte. Klicke hier.]

Um das als HTML umzsetzen muss du folgendes tun:
1. Slicen
2. In HTML Gitter aufsetzen
3. Die einzelnden Bilder einsetzen
4. Hoffen das alles Spaltenfrei sitzt

er hat doch gesagt er will es in DIV's setzen und keine Tables....

**Scharock** · 08.09.10, 14:46

Einfach Gitter in DIV erstellen.Ist doch das gleiche Prinzip?

**Grapefruit** · 08.09.10, 14:48

Zitat von Scharock [Um Links zu sehen registriere dich bitte. Klicke hier.]

Einfach Gitter in DIV erstellen.Ist doch das gleiche Prinzip?

Probiers ma aus ;)

@Topic: wenn ich du wäre, würde ich alles in einzelne Bilddateien macht, Buttons, News Box, Content Box, Header, background...
Dann is der rest ein Kinderspiel

**Scharock** · 08.09.10, 14:50

Zitat von Grapefruit [Um Links zu sehen registriere dich bitte. Klicke hier.]

Probiers ma aus ;)

@Topic: wenn ich du wäre, würde ich alles in einzelne Bilddateien macht, Buttons, News Box, Content Box, Header, background...
Dann is der rest ein Kinderspiel

Ich würd einfach empfehlen alles in normalem HTML Tables zu machn

**Grapefruit** · 08.09.10, 14:52

Zitat von Scharock [Um Links zu sehen registriere dich bitte. Klicke hier.]

Ich würd einfach empfehlen alles in normalem HTML Tables zu machn

Naja Geschmäcker sind eben verschieden. Die einen mögen Div's und die anderen lieber Table's

btw: finde das Bild sieht echt geil aus vom Design her xD

Nydn · 08.09.10, 15:28

Mal abgesehen davon, das Tabellen nicht dafür gedacht sind. Ist es mir DIVs "besser".
Wenn man Tabellen benutzt dann ist und wirkt es unprofessionell und das will man ja
nicht =P

BTW: Ist das nicht das Tut von Surako und nur für Lernzwecke?

**Ne0nfire** · 08.09.10, 15:34

HTML Tables sind unflexibel, unmodern und wie bereits schon erwähnt: sie wirken unprofessionell. Hier: [Um Links zu sehen registriere dich bitte. Klicke hier.]
wird es ziemlich einfach erklärt, dort hab ich's auch gelernt. Dort lernt man auch gleich die "wichtigen" Grundlagen von CSS und einem fällt sofort auf, wie sehr es doch HTML ersetzt. Bei Fragen: PN! ;)

Mit freundlichem Gruß,
Ne0nfire

**Tekumi** · 08.09.10, 15:53

Ich bin zwar kein Vollprofi, kenne mich aber dennoch recht gut aus. Also: Falls du Fragen hast oder Hilfe brauchst, kannst du mich gerne in ICQ/Skype/MSN hinzufügen. Ich werde dann versuchen, dir so gut wie ich kann zu helfen :)

**Surako** · 08.09.10, 16:36

Zitat von Scharock [Um Links zu sehen registriere dich bitte. Klicke hier.]

Ich würd einfach empfehlen alles in normalem HTML Tables zu machn

I lol'd.

Lern erstmal HTML und CSS, so schwer ist das nicht. :)

**Tekumi** · 08.09.10, 16:50

Zitat von Surako [Um Links zu sehen registriere dich bitte. Klicke hier.]

I lol'd.

Einige können besser mit divs arbeiten, wenn sie vorher mit Tabellen gecodet haben. Ich persönlich finde es Schwachsinn, allerdings hab ich es genauso gemacht, da ich div damals noch garnich kannte :D

**Fixed** · 08.09.10, 17:06

Danke für die vielen Infos.
Bei Fragen weiß ich ja nun wer mir helfen kann ;D

Zitat von Nydn [Um Links zu sehen registriere dich bitte. Klicke hier.]

Mal abgesehen davon, das Tabellen nicht dafür gedacht sind. Ist es mir DIVs "besser".
Wenn man Tabellen benutzt dann ist und wirkt es unprofessionell und das will man ja
nicht =P

BTW: Ist das nicht das Tut von Surako und nur für Lernzwecke?

Ist auch nur für Lernzwecke gedacht.

**Surako** · 08.09.10, 17:10

Zitat von Tekumi [Um Links zu sehen registriere dich bitte. Klicke hier.]

Einige können besser mit divs arbeiten, wenn sie vorher mit Tabellen gecodet haben. Ich persönlich finde es Schwachsinn, allerdings hab ich es genauso gemacht, da ich div damals noch garnich kannte :D

Ich auch, aber deswegen empfehle ich es doch keinem.
Divs und Tabellen sind völlig unterschiedlich, da ist es scheißegal,
ob man vorher mit Tabellen gearbeitet hat oder nicht.

**Fixed** · 10.09.10, 16:57

Also ich push den Beitrag nochmal:

Rot markierte Bereiche und auch den Hintergrund hab ich einzelnt ausgeschnitten.
Doch ich schaffe es nicht die Elemente richtig auszurichten.

[Um Links zu sehen registriere dich bitte. Klicke hier.]

Meine Code:

Code:

<html>
	<head>
		<title>Test</title>
		
		<style type="text/css">
			body {
			}
			#box {
				background: url(./images/content.png) no-repeat center;
				margin: 40px 0px 0px 0px;
				height: 453px;
				padding: 0px;
			}
			#header {
				background: url(./images/header.png) no-repeat center;
				height: 102px;
				padding: 25px;
				font-size: 36px;
				font-family: Trebuchet MS;
				color: white;
			}	
			#headline {
			background: url(./images/headline.png) no-repeat left;
			height: 34px;
			margin-left: 350px;
			font-size: 11px;
			font-family: Trebuchet MS;
			color: white;
			}
			
		</style>
	</head>
	
	<body>
		<div id="box">
			<div id="header">
			Header
			</div>
			
			<div id="headline">
			</div>
			
			<div id="nav">
			</div>
		
		</div>
	</body>
</html>

Am Ende soll es mal so aussehen:

[Um Links zu sehen registriere dich bitte. Klicke hier.]

Hoffe ihr könnt mir helfen,
lg Fixed.