Willkommen in der Webstatt Zum Webstatt Blog und Stories
Vermilion am 14.12.06 15:17

Hi Leute, ich habe mein neues Portfolio mit Photoshop fertig gestellt, nun heisst es "coden". Doch lang lang ists her das sich mit css gearbeitet habe und dem entsprechend wird das ganze auch in den verschiedenen Browsers angezeigt:


CSS

div.header_top { background: url(images/header_top.jpg) left repeat-x;
width:811px;
height:28px;
}
div.header_logo { background: url(images/header_logo.jpg) left top no-repeat;
width:154px;
height:57px;
margin-left:279px;
float:left;
}
div.header_empty { background: url(images/header_empty.jpg) left top no-repeat;
width:552px;
height:57px;
margin-left:433px;
}
div.header_main { background: url(images/header_main.jpg) left top no-repeat;
width:706px;
height:102px;
margin-left:279px;
float:left;
}
div.content_top { background: url(images/content_top.jpg) left top no-repeat;
width:487px;
height:82px;
margin-left:279px;
float:left;
}
div.new_top { background: url(images/new_top.jpg) left top no-repeat;
width:219px;
height:82px;
margin-left:766px;
margin-top:102px;
}
div.content_main { background: url(images/content_main.jpg) left top no-repeat;
width:483px;
height:303px;
margin-left:279px;
float:left;
}
div.new_main { background: url(images/new_main.jpg) left top no-repeat;
width:223px;
height:303px;
margin-left:762px;
}
div.content_bottom { background: url(images/content_bottom.jpg) left top no-repeat;
width:485px;
height:82px;
margin-left:279px;
float:left;
}
div.content_bottom { background: url(images/content_bottom.jpg) left top no-repeat;
width:485px;
height:82px;



HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Online Portfolio | </title>

<meta name="ROBOTS" content="INDEX, FOLLOW" />
<meta name="revisit-after" content="7" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body bgcolor="#ffffff">
<script type="text/javascript" src="http://www.deine-stimme-gegen-armut.de/banner/banner_klein_rechts.js">
</script><noscript><a href="http://www.deine-stimme-gegen-armut.de/"> http://www.deine-stimme-gegen-armut.de</a></noscript>
<br /><center>
<div class="header_top"></div></center>
<div class="header_logo">
&nbsp;
</div>
<div class="header_empty">
&nbsp;
</div>
<div class="header_main">
&nbsp;
</div>
<div class="content_top">
&nbsp;
</div>
<div class="new_top">
&nbsp;
</div>
<div class="content_main">
&nbsp;
</div>
<div class="new_main">
&nbsp;
</div>
</div>
<div class="content_bottom">
&nbsp;
</div>
<div class="new_bottom">
&nbsp;
</div>
<div class="footer">
&nbsp;
</div>



[COLOR=red]Ich bin für jede Hilfe / Tipps / Tricks / Ideen / Rat-Vorschläge etc. dankbar![/COLOR]

Mfg. Verm.

netcup.de Warum gibt es hier Werbung?
crooked am 14.12.06 15:47

Hast du ein genaueres Problem?

Vermilion am 14.12.06 15:50

Jop schau dir die gecodete Seite doch mal im IE an :)

Verm.

Al3x0r Al3x0r am 14.12.06 15:58

Quote
Original von crooked
Hast du ein genaueres Problem?


schau dir den Link an :D


@topic:

Zuallererst ist es nicht notwendig für jedes Bild, dass du als Designelement einbindest einen eigenen Div-Container zu benutzen.

<br> und <center> sind unschöne Methoden um das Design zu positionieren. Lege an dieser Steller lieber einen Container an, der dann ganzes Design umschließt und gebe diesem die Style-Anweisungen

style="width:800px; margin:10px auto 0;"

Die Breitenangabe musst du je nach belieben anpassen, jedoch ist diese zwingend. Zum horizontalen zentrieren wird dem Container der "Marginwert" auto zugewiesen. Die 10px geben den gewünschten Abstand von der oberen "Browserkante" an.

Es empfielt sich auch noch ein

* {margin:0; padding:0;}

damit du bei den Marginangaben (s.o.) auch die Pixel Abstand hast, die du angibst.

Weiterhin gibt es auch noch das <img> Tag...

Das war zwar nicht direkt dazu, wie du dein Design richtig positionierst aber ich hoffe es hilft dir ein bisschen den Code halbwegs sauber zu gestalten.

mfg Alex

Vermilion am 14.12.06 16:07

Hi, was meinst du mit Container? Bzw. wie sieht sowas aus? Wenn nicht mit <div>?

Al3x0r Al3x0r am 14.12.06 16:15

So zum Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta name="Content-Language" content="de" />
<meta name="ROBOTS" content="INDEX, FOLLOW" />
<meta name="revisit-after" content="7" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body bgcolor="#ffffff">
<script type="text/javascript" src="http://www.deine-stimme-gegen-armut.de/banner/banner_klein_rechts.js">
</script><noscript><a href="http://www.deine-stimme-gegen-armut.de/"> http://www.deine-stimme-gegen-armut.de</a></noscript>
<div id="container">
<div class="header_top"></div></center>
<div class="header_logo">
&nbsp;
</div>
<div class="header_empty">
&nbsp;
</div>
<div class="header_main">
&nbsp;
</div>
<div class="content_top">
&nbsp;
</div>
<div class="new_top">
&nbsp;
</div>
<div class="content_main">
&nbsp;
</div>
<div class="new_main">
&nbsp;
</div>
</div>
<div class="content_bottom">
&nbsp;
</div>
<div class="new_bottom">
&nbsp;
</div>
<div class="footer">
&nbsp;
</div>
</div>
</body>
</html>


Nun gibs du in deinem Stylesheet dem div mit der ID container die oben genannten eigenschaften.

du hast übrigens auch </body> und </html> vergessen.

Du kannst viel mit Image Replacement machen.

mfg Alex

Vermilion am 14.12.06 16:26

Ohman... ID hab ich noch nie gehört :D! Dem nach auch keine ahnung wie ich dass ins style sheet ein bauen müsste und sry aber bei deinem Link versteh ich nur Bahnhof. Ich arbeite immer mit [URL]www.css4you.de...[/URL]

Verm.

// mal den HTML-Code geändert


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Online Portfolio | </title>
</head>
<body style="width:800px; margin:10px auto 0;" bgcolor="#ffffff">
<script type="text/javascript" src="http://www.deine-stimme-gegen-armut.de/banner/banner_klein_rechts.js">
</script><noscript><a href="http://www.deine-stimme-gegen-armut.de/"> http://www.deine-stimme-gegen-armut.de</a></noscript>
<div id="container">
<div class="header_top"></div>
<div class="header_logo">
&nbsp;
</div>
<div class="header_empty">
&nbsp;
</div>
<div class="header_main">
&nbsp;
</div>
<div class="content_top">
&nbsp;
</div>
<div class="new_top">
&nbsp;
</div>
<div class="content_main">
&nbsp;
</div>
<div class="new_main">
&nbsp;
</div>
</div>
<div class="content_bottom">
&nbsp;
</div>
<div class="new_bottom">
&nbsp;
</div>
<div class="footer">
&nbsp;
</div>
</div>
</body>
</html>



Sieht jetzt ehr schlechter aus als vorher :P

[COLOR=red]Also mein Problem ist es ja, das da sganze nur im FF richtig angezeigt wird! abe rim IE usw. nicht...[/COLOR]

BNightSpeeder am 14.12.06 19:34

Jetzt wirds auch im FF nett mehr richtug angezeigt!

Al3x0r Al3x0r am 14.12.06 19:37

Ich habe das Gefühl, dass du dich erstmal mit den Grundlagen in CSS befassen solltest und dich dann langsam an soetwas rantasten solltest. Alternativ könnte ich dir auch anbieten den Kram für dich umzusetzen, nur wo bliebe da der Lerneffekt ? ;-)
Ließ dir mal die Kapitel zu float und position durch.

mfg alex

Vermilion am 15.12.06 16:09

Alles geht jetzt eigentlich!

-> click

Verm.

Vermilion am 17.12.06 18:49

Ich Frag mich nur wieso der Link in den News nicht geht :)

-> click

Verm.

crooked am 17.12.06 18:53

da liegt bestimmt irgendwas drüber... mach mal bei den divs border: 1px solid black; um zu sehen, wie groß die wirklich alle sind. dann wird sicher eins über dem link liegen.

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt