Antworten zum Thema „[Ro4dRunner] Neues Homepage Design“

Ro4dRunner · 02.03.2009

Hey @ all,

nun ja das ist mein Erstes mal bei euch. Bisher habe ich immer nur gelesen und gelesen. Naja und so einiges durchs lesen habe ich mir schon beibringen können. Nun bin ich mal an der rei, ein neues Thead zu eröffnen.

Bisher habe ich anhand eines Tutorials einen Internetauftritt für mich gemacht. Dadurch lerne ich auch mit den einzelnen Ebene umzugehen und festigte meinen wenigen Einsatz in Photoshop.

Naja wie bereits erwähnt, wage ich mich jetzt an ein eigens durchdachtes Design für einen Internetauftritt (Homepage), dass meine künftiges Layout werden soll.

Ich wollte euch nun mal um Kritik und Anregungen bitten.

Wo ich noch nicht 100% mit zufrieden bin, ist der Titel; "Ro4d-Runner Fotografie" dieses wird voraussichtlich noch ersetzt.
Fehlt mir jedoch noch die Idee für ein schönen Texteffekt vielleicht könnte mir jemand von euch eine Impression geben (Texteffekt).

Naja und dann kommt auch noch der größte Brocken das HTML; Bisher habe ich immer ein Layout erstellt; dann Slice erstellt; und dann per Photoshop sozusagen entwickeln lassen ; dann in HTML und somit Tabellen Format eingestellt; Danach ein Iframe erstellt und fertig war die Bockwurst
Iframe möchte ich jedoch nicht mehr; ist ja auch überholt diese Variante von Hompage erstellen -so wie ich gelesen habe-:'(
Ich möchte das psd in css- und xhtml unterstützter Form ausgeben bzw. erstellen. Jedoch komm ich einfach nicht dahinter wie ich das aus solch einer Datei machen soll.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ro4d-Runner Fotografie // Pictures and Arts</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
 
<style type="text/css">
<!--
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
 
<body onLoad="MM_preloadImages('images/over/Weblayout-3_09.gif','images/over/Weblayout-3_11.gif','images/over/Weblayout-3_13.gif','images/over/Weblayout-3_15.gif','images/over/Weblayout-3_17.gif')">
<table width="907" border="0" align="center" cellpadding="0" cellspacing="0" id="Tabelle_01">
 <tr>
  <td colspan="19"><img src="images/Weblayout-3_01.gif" alt="" name="Weblayout" width="907" height="382" align="top" id="Weblayout_3_01"></td>
 </tr>
 <tr>
  <td colspan="19"><img src="images/Weblayout-3_02.gif" alt="" width="907" height="15" align="baseline" id="Weblayout_3_02"></td>
 </tr>
    <tr>
  <td width="28" rowspan="2"><img id="Weblayout_3_03" src="images/Weblayout-3_03.gif" width="28" height="227" alt=""></td>
  <td colspan="17" align="left"><img src="images/Weblayout-3_04.gif" alt="" width="850" height="212" border="0" align="middle"></td> 
   <td width="29" rowspan="2"><img id="Weblayout_3_05" src="images/Weblayout-3_05.gif" width="29" height="227" alt=""></td>
 </tr>
 <tr>
  <td colspan="17"><img id="Weblayout_3_06" src="images/Weblayout-3_06.gif" width="850" height="15" alt=""></td>
 </tr>
 <tr>
  <td colspan="19"><img id="Weblayout_3_07" src="images/Weblayout-3_07.gif" width="907" height="37" alt=""></td>
 </tr>
    <tr>
  <td colspan="2" rowspan="4"><img id="Weblayout_3_08" src="images/Weblayout-3_08.gif" width="227" height="105" alt=""></td>
        <td width="56"><a href="index.html" target="_self" onMouseOver="MM_swapImage('Image55','','images/over/Weblayout-3_09.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/Weblayout-3_09.gif" name="Image55" width="56" height="19" border="0" id="Image55"></a></td>
  <td width="57" rowspan="4"><img id="Weblayout_3_10" src="images/Weblayout-3_10.gif" width="57" height="105" alt=""></td>
  <td width="59"><a href="about.html" target="_self" onMouseOver="MM_swapImage('Image53','','images/over/Weblayout-3_11.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/Weblayout-3_11.gif" name="Image53" width="59" height="19" border="0" id="Image53"></a></td>
  <td width="54" rowspan="4"><img id="Weblayout_3_12" src="images/Weblayout-3_12.gif" width="54" height="105" alt=""></td>
  <td width="57"><a href="portfolio.html" target="_self" onMouseOver="MM_swapImage('Image54','','images/over/Weblayout-3_13.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/Weblayout-3_13.gif" name="Image54" width="57" height="19" border="0" id="Image54"></a></td>
  <td width="57" rowspan="4"><img id="Weblayout_3_14" src="images/Weblayout-3_14.gif" width="57" height="105" alt=""></td>
  <td width="57"><a href="services.html" target="_self" onMouseOver="MM_swapImage('Image56','','images/over/Weblayout-3_15.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/Weblayout-3_15.gif" name="Image56" width="57" height="19" border="0" id="Image56"></a></td>
  <td colspan="4" rowspan="2"><img id="Weblayout_3_16" src="images/Weblayout-3_16.gif" width="170" height="53" alt=""></td>
  <td colspan="4"><a href="contacts.html" target="_self" onMouseOver="MM_swapImage('Image57','','images/over/Weblayout-3_17.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/Weblayout-3_17.gif" name="Image57" width="56" height="19" border="0" id="Image57"></a></td>
  <td colspan="2" rowspan="4"><img id="Weblayout_3_18" src="images/Weblayout-3_18.gif" width="57" height="105" alt=""></td>
 </tr>
 <tr>
  <td rowspan="3"><img id="Weblayout_3_19" src="images/Weblayout-3_19.gif" width="56" height="86" alt=""></td>
  <td rowspan="3"><img id="Weblayout_3_20" src="images/Weblayout-3_20.gif" width="59" height="86" alt=""></td>
  <td rowspan="3"><img id="Weblayout_3_21" src="images/Weblayout-3_21.gif" width="57" height="86" alt=""></td>
  <td rowspan="3"><img id="Weblayout_3_22" src="images/Weblayout-3_22.gif" width="57" height="86" alt=""></td>
  <td colspan="4"><img id="Weblayout_3_23" src="images/Weblayout-3_23.gif" width="56" height="34" alt=""></td>
 </tr>
 <tr>
  <td width="99" rowspan="2"><img id="Weblayout_3_24" src="images/Weblayout-3_24.gif" width="99" height="52" alt=""></td>
  <td width="42"><a href="index.html" target="_blank"><img id="Weblayout_3_25" src="images/Weblayout-3_25.gif" width="42" height="6" border="0" alt=""></a></td>
  <td width="9" rowspan="2"><img id="Weblayout_3_26" src="images/Weblayout-3_26.gif" width="9" height="52" alt=""></td>
  <td colspan="2"><a href="#contacts.html" target="_blank"><img id="Weblayout_3_27" src="images/Weblayout-3_27.gif" width="40" height="6" border="0" alt=""></a></td>
  <td width="8" rowspan="2"><img id="Weblayout_3_28" src="images/Weblayout-3_28.gif" width="8" height="52" alt=""></td>
  <td width="27"><a href="mailto:@gmx.de" target="_blank"><img id="Weblayout_3_29" src="images/Weblayout-3_29.gif" width="27" height="6" border="0" alt=""></a></td>
  <td width="1" rowspan="2"><img id="Weblayout_3_30" src="images/Weblayout-3_30.gif" width="1" height="52" alt=""></td>
 </tr>
 <tr>
  <td><img id="Weblayout_3_31" src="images/Weblayout-3_31.gif" width="42" height="46" alt=""></td>
  <td colspan="2"><img id="Weblayout_3_32" src="images/Weblayout-3_32.gif" width="40" height="46" alt=""></td>
  <td><img id="Weblayout_3_33" src="images/Weblayout-3_33.gif" width="27" height="46" alt=""></td>
 </tr>
 <tr>
  <td><img src="images/Abstandhalter.gif" width="28" height="1" alt=""></td>
  <td width="199"><img src="images/Abstandhalter.gif" width="199" height="1" alt=""></td>
  <td><img src="images/Abstandhalter.gif" width="56" height="1" alt=""></td>
  <td><img src="images/Abstandhalter.gif" width="57" height="1" alt=""></td>
  <td><img src="images/Abstandhalter.gif" width="59" height="1" alt=""></td>
  <td><img src="images/Abstandhalter.gif" width="54" height="1" alt=""></td>
  <td><img src="images/Abstandhalter.gif" width="57" height="1" alt=""></td>
  <td><img src="images/Abstandhalter.gif" width="57" height="1" alt=""></td>
  <td><img src="images/Abstandhalter.gif" width="57" height="1" alt=""></td>
  <td><img src="images/Abstandhalter.gif" width="99" height="1" alt=""></td>
  <td><img src="images/Abstandhalter.gif" width="42" height="1" alt=""></td>
  <td><img src="images/Abstandhalter.gif" width="9" height="1" alt=""></td>
  <td width="20"><img src="images/Abstandhalter.gif" width="20" height="1" alt=""></td>
  <td width="20"><img src="images/Abstandhalter.gif" width="20" height="1" alt=""></td>
  <td><img src="images/Abstandhalter.gif" width="8" height="1" alt=""></td>
  <td><img src="images/Abstandhalter.gif" width="27" height="1" alt=""></td>
  <td><img src="images/Abstandhalter.gif" width="1" height="1" alt=""></td>
  <td width="28"><img src="images/Abstandhalter.gif" width="28" height="1" alt=""></td>
  <td><img src="images/Abstandhalter.gif" width="29" height="1" alt=""></td>
 </tr>
</table>
</body>
</html>

Bitte fallt nicht über mich her, ich bin leider kein gelernter Webdesigner und helfe mir eigentlich nur immer irgendwie aus. :rolleyes:

Ich weiß auch, dass es keine Ausrede ist, aber ich versuche mein bestes.

Bitte versteht meine Unwissenheit und versucht mir mit möglichst einfachen Worten zu erklären -habt verständnis, dass ich nicht jeden Fachbegriff parat habe- wie ich weiter vorgehen soll.

Ich freue mich auf eure professionelle Hilfe.
Viele Grüße aus dem Frankenländle
Ro4dRunner

sokie · 02.03.2009

AW: [Ro4dRunner] Neues Homepage Design

Das Problem bei Navigationselementen die unten angebracht sind ist, dass sie bei Standardauflösungen zu sehen sein sollten. bei der Seite wird das bei der noch viel genutzten Auflösung von zB 1024x768 nicht der Fall sein.

Zu dem Tabbelngemansche im 'html' ohne Fachausdrücke und verständlich: Das ist nicht der Sinn von HTML und sollte eigentlich einfach nicht da stehen.

für das Layout sollte eine klassische Dreiteilung (header,inhalte,footer) ausreichen. im footer eine linkliste mit den grafiken und die hover per css.

Ro4dRunner · 03.03.2009

AW: [Ro4dRunner] Neues Homepage Design

@ sokie

Vielen Dank für deine erste Meinung zu meiner Homepage. Hm... das mit der Darstellung ist so eine Sache. Wenn das tatsächlich ein Problem auswerfen wird, ist tatsächlich zu überlegen ob ich das ganze nicht ein wenig kleiner mache. So meintest du das doch?

Naja und wie bereits erwähnt erhält man mit dem Slicen solch eine Tabellenstruktur. Habe gestern länger versucht, das ganze in eine andere Form zu kriegen, jedoch musste ich das ganze dann abbrechen, sonst wäre ich heute morgen noch dagesessen und hätte kein Ergebnis gehabt. Ich verstehe nicht ganz, wie ich das in der CSS datei dann so ausführen muss, damit ich die ganzen Dateien, so anzeigen lasse, dass Sie wieder zusammenpassen. :'(

Neue Fragen die Aufkommen:

Wie stellt man die Grafiken in die CSS Datei und Positioniert sie passend im Layout, damit das ganze Layout nicht zerrissen wird?
Kann mir jemand ein Beispielcode geben, damit ich nachvollziehen kann, wie man die Dateien dort einbindet?

Bitte entschuldigt meine Unwissenheit. Ich versuche es so gut wie möglich umzusetzen, jedoch brauch ich weiterhin noch eure Hilfe.

cvdR · 03.03.2009

AW: [Ro4dRunner] Neues Homepage Design

dort steht eigentlich alles was du brauchst -> CSS 4 You - The Finest in Stylesheets

lg.

Setsuna · 03.03.2009

AW: [Ro4dRunner] Neues Homepage Design

zur hilfestellung könntest du dir für den firefox-browser den firebug holen er veranschaulicht die dir vorliegende seite besser und etwas abzuschreib/ zu kopieren.
Ich habe dir mal ein einfache Beispiel mit erklärungen angehangen.
der css-style-teil kann erstmal in einer html stehen und später wenn die seite fertig ist ausgelagert werden.

Ro4dRunner · 05.03.2009

AW: [Ro4dRunner] Neues Homepage Design

So erst einmal vielen Dank, für die von euch mitgeteilten Infos.

Habe gestern herausgefunden, dass man sich gleich eine CSS Datei über Photoshop generien lassen kann.

Ich werde das Layout mal verkleiner (Vorschlag von Sokie) und werde mich dann mal an das Slicen und Konvertieren in CSS in Photoshop stürzen. Sollte ich dann noch weitere Fragen haben, dann werde ich mich hier dann nochmals melden.

Ach vielleicht noch eines? Gibt es von euch noch ein paar Vorschläge wie man die Überschrift der Homepage ändern könnte (oder gefällt sie euch so?) bzw. kennt jemand dann auch ein gutes Tutorial, welches mir dann helfen könnte eine nach meinen Wunsch erstellt Überschrift zu erstellen?

Viele Grüße
Ro4dRunner

Schattenspringer · 05.03.2009

AW: [Ro4dRunner] Neues Homepage Design

hallo,

also ist vielleicht geschmackssache .. aber es ist die frage, ob es nicht komplizierter ist, wenn du mit photoshop den code generierst ...?
denn im grund von der struktur her ist deine seite ja nicht sehr kompliziert gebaut ...

wie sokie schon sagte:

"für das Layout sollte eine klassische Dreiteilung (header,inhalte,footer) ausreichen. im footer eine linkliste mit den grafiken und die hover per . "

also ein div mit namen header erstellen, eins für den inhalt und eins für den footer ...
denke tust dir auf dauer echt leichter, wenn du dich ein wenig in html und css einarbeitest - weil so ist es ein wenig so, als ob du ein pferd von hinten aufzäumst, wenn du photoshop zum web-seiten-erstellen nutzt, weil DU willst ja entscheiden, wie die struktur deiner seite sein soll oder?

naja hoffe, war verständlich was ich damit sagen wollte...

was mir übrigens noch auffiel: du hast kein impressum auf deiner seite!

grafisch find ich die seite ganz nett - kommt halt drauf an, was für ne schrift du für den content verwendest ... ob dann halt die überschrift dazu passt ... nur leider lassen sich die zwei rechten links (contents udn services) nicht ganz so gut lesen durch die darüber gelegten effekte ..

gruss
schattenspringer

Ro4dRunner · 10.03.2009

AW: [Ro4dRunner] Neues Homepage Design

So nun bin ich ein wenig weiter gekommen:

So sieht mein HTML Code aus:

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>
 
<titel>...
<meta>...
 
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
 
<style type="text/css">
<!--
-->
</style>
<link href="../styles.css" rel="stylesheet" type="text/css">
</head>
 
<body leftmargin="auto" marginwidth="auto" onload="MM_preloadImages('../images/over/Home.gif','../images/over/About.gif','../images/over/Portfolio.gif','../images/over/Services.gif','../images/over/Contacts.gif')"> 
 
<!--Kopf bzw. Banner-->
<div id="container"><img src="../images/Header.png" width="850" height="311" /></div> 
<!--Ende Kopf bzw. Banner-->
 
<!--Inhalt-->
<div id="Inhalt"><img src="../images/Inhalt.gif" width="25" height="197" /><img src="../images/Inhalt-03.gif" width="800" height="197" /><img src="../images/Inhalt-04.gif" width="25" height="197" /></div><!--Ende Inhalt-->
<!--Textbereich-->
<span id="Textbereich">
STARTSEITE // STARTSEITE // STARTSEITE
</span><!--Ende Textbereich-->
<!--Navigationsbereich bzw. Footer-->
<div id="footer">
  <table width="850" border="0" align="center" cellpadding="0" cellspacing="0" id="navi">
<tr><th colspan="2" scope="col"><p><img src="../images/Footer.gif" width="850" height="31" /></p></th></tr>
        <tr>
          <th colspan="2" scope="col"><p><img src="../images/Footer-06.gif" width="227" height="14" /><a href="index.html" target="_self"><img src="images/over/Home.gif" alt="Home Index" name="Home" width="56" height="14" border="0" id="Home" /></a></a><img src="../images/Footer-08.gif" width="57" height="14" /><a href="about.html" target="_self" onmouseover="MM_swapImage('Image27','','../images/over/About.gif',1)" onmouseout="MM_swapImgRestore()"><img src="../images/About.gif" name="Image27" width="57" height="14" border="0" id="Image27" /></a><img src="../images/Footer-10.gif" width="57" height="14" /><a href="portfolio.html" target="_self" onmouseover="MM_swapImage('Image28','','../images/over/Portfolio.gif',1)" onmouseout="MM_swapImgRestore()"><img src="../images/Portfolio.gif" name="Image28" width="56" height="14" border="0" id="Image28" /></a><img src="../images/Footer-12.gif" width="57" height="14" /><a href="services.html" target="_self" onmouseover="MM_swapImage('Image29','','../images/over/Services.gif',1)" onmouseout="MM_swapImgRestore()"><img src="../images/Services.gif" name="Image29" width="57" height="14" border="0" id="Image29" /></a><img src="../images/Footer-14.gif" width="113" height="14" /><a href="contacts.html" target="_self" onmouseover="MM_swapImage('Image30','','../images/over/Contacts.gif',1)" onmouseout="MM_swapImgRestore()"><img src="../images/Contacts.gif" name="Image30" width="57" height="14" border="0" id="Image30" /></a><img src="../images/Footer-16.gif" width="56" height="14" /></p></th>
        </tr>
        <tr>
          <th width="172" scope="col"><p><img src="../images/Footer-17.gif" width="624" height="71" /></p></th>
          <th scope="col"><p><img src="../images/Footer-18.gif" width="226" height="20" /><br />
            <img src="../images/Footer-19.gif" width="76" height="8" /><a href="index.html" target="_self"><img src="../images/Back-to-Index.gif" width="41" height="8" border="0" /></a><img src="../images/Footer-21.gif" width="5" height="8" /><a href="contacts.html" target="_self"><img src="../images/Impressum.gif" width="41" height="8" border="0" /></a><img src="../images/Footer-23.gif" width="7" height="8" /><a href="mailto:kreativ.master@gmx.de" target="_blank"><img src="../images/Mail.gif" width="28" height="8" border="0" /></a><img src="../images/Footer-25.gif" width="28" height="8" /><br />
            <img src="../images/Footer-26.gif" width="226" height="43" /><br />
          </p></th>
        </tr>
      </table>
</div>
<!--Ende Navigationsbereich bzw. Footer-->
</body>
</html>

Dazugehörend habe ich einen CSS Code erstellt:

HTML:

body {
 font: Verdana, Arial, Helvetica, sans-serif;
 background: #fff;
 padding: 0;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 margin-top: auto;
 margin-bottom: auto;
}
a {
 font-family: Verdana, Geneva, sans-serif;
 font-size: 11px;
 color: #433C2F;
}
a:visited {
 color: #DE96C0;
}
a:hover {
 color: #FFF;
}
h1,h2,h3,h4,h5,h6 {
 font-family: Verdana, Geneva, sans-serif;
}
h1 {
 font-size: 11px;
 color: #FFF;
}
#container {
 width: auto;
 background: #FFFFFF;
 padding: 0;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
 border: 0;
}
#inhalt {
 width: auto;
 padding: 0;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
 z-index: 1;
 background-color: #FFFFFF;
}
#Textbereich {
 position: absolute;
 font-family: Verdana, Geneva, sans-serif;
 font-size: 11px;
 color: #FFF;
 width: 789px;
 padding: 0;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
 z-index: 1;
 left: 176px;
 top: 329px;
 text-align: left;
 
}
#Textbereich2{
 position:absolute;
 width:790px;
 height:190px;
 z-index:1;
 left: 175px;
 top: 330px;
 font-family: Verdana, Geneva, sans-serif;
 font-size: 11px;
 color: #FFF;
 font-style: normal;
 line-height: normal;
 text-align: right;
}
#Portfolio {
 position:absolute;
 width:790px;
 height:190px;
 z-index:1;
 left: 175px;
 top: 330px;
 font-family: Verdana, Geneva, sans-serif;
 font-size: 11px;
 color: #FFF;
 font-style: normal;
 line-height: normal;
 text-align: right;
}
#footer  {
 width: auto;
 background-color: #FFF;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
}

Nun ist das Problem eigentlich nur noch, dass mein Text nicht Zentriert wird.
In CS4 Dreamweaver ist er zentriert.
Aber im IE ist er einfach nicht zentriert.

Ich weiß einfach nicht mehr weiter, habe da schon 1 Tag dran rumgesessen und finde einfach keine Lösung. Ist wahrscheinlich eine ganz einfache Aufgabe für euch.

Ihr würdet mir echt super helfen, wenn Ihr mir da helfen könnten.
Viele Grüße
Ro4dRunner

afr0kalypse · 10.03.2009

AW: [Ro4dRunner] Neues Homepage Design

dann ist an irgendeiner deiner stellen wo du in deinem css script "text-align" benutzt, der wert left oder right enthalten

da sollte dann center stehen dann stehts da wo du es haben willst denk ich...

Ro4dRunner · 10.03.2009

AW: [Ro4dRunner] Neues Homepage Design

Also daran liegt es nicht, ich meinte mit der Zentrierung das Textfeld bzw. das DIV.

Es befindet sich in meiner Ansicht im Dreamweaver im Zentrum genau auf meinem Layout (siehe Blauer Divbereich) Aber wenn ich in den IE überprüfe ob alles passend ist, dann ist das Textfeld nicht mehr richtig ausgerichtet.

Ich weiß nicht welche einstellung ich vornehmen muss, damit das Textfeld automatisch dort erscheint wo ich mein Textfeld auch ausgerichtet haben.

Engholm · 10.03.2009

AW: [Ro4dRunner] Neues Homepage Design

es liegt daran, dass Du für das Textefeld eine absolute Position verwendest. Bei Dir sieht es im DW deshalb passend aus, da Du vermutlich auf der rechten Seite noch die Werkzeug-Paletten hast. Wenn Du die ausblendest, dürfte sich das Layout auch um Deine Textfelder herum verschieben.

Generell würde ich auf absolute Positionen verzichten, es sei denn Du willst wirklich etwas absolut positionieren ;-) (z.B. )

Also in Deinem Fall wäre die elegantere Lösung:
- der Container-DIV bekommt eine feste Breite und wir zentriert (z.B. { margin: 0 auto; width:850px; } )
- alle anderen Elemente werden innerhalb des Containers platziert, ohne position Angabe.

Ro4dRunner · 13.03.2009

AW: [Ro4dRunner] Neues Homepage Design

Erst einmal vielen vielen Dank für deine Nachricht. Deine Info hat mir
vorerst sehr geholfen um weiteres zu verstehen. Aber ich habe immer
noch das Problem, dass wenn ich den Text einbauen will -mit einem DIV-
die Positionierung nicht richtig wähle. Warum steh ich so sehr auf der Leitung.

Vielleicht kannst du mir noch mehr auf die Sprünge helfen, oder du
kannst mir sagen, wass ich an dem Quelltext falsch haben:

HTML:

<!--Kopf bzw. Banner--><div id="container"><img src="../images/Header.png" width="850" height="311" /><!--Inhalt--><div id="Inhalt"><img src="../images/Inhalt.gif" width="25" height="197" /><img src="../images/Inhalt-03.gif" width="800" height="197" /><img src="../images/Inhalt-04.gif" width="25" height="197" /><!--Ende Inhalt--><!--Navigationsbereich bzw. Footer--><div id="footer">
  <table width="850" border="0" align="center" cellpadding="0" cellspacing="0" id="navi">
<tr><th colspan="2" scope="col"><p><img src="../images/Footer.gif" width="850" height="31" /></p></th></tr>
        <tr>
          <th colspan="2" scope="col"><p><img src="../images/Footer-06.gif" width="227" height="14" /><a href="index.html" target="_self"><img src="images/over/Home.gif" alt="Home Index" name="Home" width="56" height="14" border="0" id="Home" /></a></a><img src="../images/Footer-08.gif" width="57" height="14" /><a href="about.html" target="_self" onmouseover="MM_swapImage('Image27','','../images/over/About.gif',1)" onmouseout="MM_swapImgRestore()"><img src="../images/About.gif" name="Image27" width="57" height="14" border="0" id="Image27" /></a><img src="../images/Footer-10.gif" width="57" height="14" /><a href="portfolio.html" target="_self" onmouseover="MM_swapImage('Image28','','../images/over/Portfolio.gif',1)" onmouseout="MM_swapImgRestore()"><img src="../images/Portfolio.gif" name="Image28" width="56" height="14" border="0" id="Image28" /></a><img src="../images/Footer-12.gif" width="57" height="14" /><a href="services.html" target="_self" onmouseover="MM_swapImage('Image29','','../images/over/Services.gif',1)" onmouseout="MM_swapImgRestore()"><img src="../images/Services.gif" name="Image29" width="57" height="14" border="0" id="Image29" /></a><img src="../images/Footer-14.gif" width="113" height="14" /><a href="contacts.html" target="_self" onmouseover="MM_swapImage('Image30','','../images/over/Contacts.gif',1)" onmouseout="MM_swapImgRestore()"><img src="../images/Contacts.gif" name="Image30" width="57" height="14" border="0" id="Image30" /></a><img src="../images/Footer-16.gif" width="56" height="14" /></p></th>
        </tr>
        <tr>
          <th width="172" scope="col"><p><img src="../images/Footer-17.gif" width="624" height="71" /></p></th>
          <th scope="col"><p><img src="../images/Footer-18.gif" width="226" height="20" /><br />
            <img src="../images/Footer-19.gif" width="76" height="8" /><a href="index.html" target="_self"><img src="../images/Back-to-Index.gif" width="41" height="8" border="0" /></a><img src="../images/Footer-21.gif" width="5" height="8" /><a href="contacts.html" target="_self"><img src="../images/Impressum.gif" width="41" height="8" border="0" /></a><img src="../images/Footer-23.gif" width="7" height="8" /><a href="mailto:" target="_blank"><img src="../images/Mail.gif" width="28" height="8" border="0" /></a><img src="../images/Footer-25.gif" width="28" height="8" /><br />
            <img src="../images/Footer-26.gif" width="226" height="43" /><br />
          </p></th>
        </tr>
  </table>
</div>
</div>
</div>
</body>
</html>

Quelltext CSS:

HTML:

body {
 font: Verdana, Arial, Helvetica, sans-serif;
 background: #fff;
 padding: 0;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 margin-top: auto;
 margin-bottom: auto;
}
#container {
 width: 850px;
 background: #FFFFFF;
 padding: 0;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
 border: 0;
 margin: 0 auto;
}
#inhalt {
 width: 850px;
 background: #FFFFFF;
 padding: 0;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
 border: 0;
 margin: 0 auto;
 z-index: 1;
}
#footer  {
 width: 850px;
 background: #ffffff;
}
a {
 font-family: Verdana, Geneva, sans-serif;
 font-size: 11px;
 color: #433C2F;
}
a:visited {
 color: #DE96C0;
}
a:hover {
 color: #FFF;
}
h1,h2,h3,h4,h5,h6 {
 font-family: Verdana, Geneva, sans-serif;
}
h1 {
 font-size: 11px;
 color: #FFF;
}
#Textbereich {
 position: absolute;
 left: 114px;
 top: 329px;

Wie/Wo muss das Textfeld:

HTML:

<!--Textbereich-->
<div align="center" id="Textbereich" dir="ltr" lang="de">STARTSEITE // STARTSEITE // STARTSEITE<!--Ende Textbereich-->
</div>

eingebunden werden?

Was muss im CSS geändert werden, dass das Textfeld vor dem Layout,
was über PS erstellt worden ist programmiert werden. I´m sorry aber ich
komm nicht mehr weiter.

Bin mir sicher, dass wenn ich es einmal verstanden habe, dass ich mich
dann sicherlich mit dem besagten "aha... ach so... verstehe..." äußern
werden. Bitte hilf mir weiter. Ich weiß echt nicht mehr weiter. :'(

LG Ro4dRunner