PS Weiterverarbeitung CSS!

Picturetuning · 14.03.2009

Bin absolut neu auf dem Gebiet, nun ja arbeite hauptsächlich mit V2B Videos, baue nach und übe....

Habe jetzt wieder ein Problem und zwar, habe ich ne Seite in PS gemacht, geslized und als CSS.html Datei gespeichert. Leider weis ich jetzt nicht wie ich das komplette Layout zentriere und vorallem den Seitenhintergrund ändere, weil immoment wird mir die Seite im Browser nur links angezeigt mit weissem Hintergrund, bei html weis ich wie es geht aber bei Css net. Nunja ich arbeite mit Dreamweaver...

Herr_D · 14.03.2009

AW: PS Weiterverarbeitung CSS!

Suchfunktion schon mal bemüht? Zum Seitezentrieren taucht hier heute Woche ein Thread auf...

Wenn du die simpelsten html/css Befehle nicht kannst, solltest du vielleicht überlegen, ob Webdesign wirklich dein neues Hobby werden sollte...

Antwort siehe meine Signatur

Ansonsten wäre der Quelltext interessant...

Picturetuning · 14.03.2009

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>
<title>Picturtune Company</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (Website 06.03.psd) -->
<style type="text/css">
<!--

#Tabelle_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:995px;
    height:597px;
}

#Logo1_ {
    position:absolute;
    left:0px;
    top:0px;
    width:285px;
    height:105px;
}

#Export-css-02_ {
    position:absolute;
    left:285px;
    top:0px;
    width:539px;
    height:15px;
}

#Export-css-03_ {
    position:absolute;
    left:824px;
    top:0px;
    width:171px;
    height:105px;
}

#Home-Button_ {
    position:absolute;
    left:285px;
    top:15px;
    width:120px;
    height:90px;
}

#Export-css-05_ {
    position:absolute;
    left:405px;
    top:15px;
    width:15px;
    height:105px;
}

#Produkte-Button_ {
    position:absolute;
    left:420px;
    top:15px;
    width:120px;
    height:90px;
}

#Export-css-07_ {
    position:absolute;
    left:540px;
    top:15px;
    width:15px;
    height:105px;
}

#Info-Button_ {
    position:absolute;
    left:555px;
    top:15px;
    width:120px;
    height:90px;
}

#Export-css-09_ {
    position:absolute;
    left:675px;
    top:15px;
    width:14px;
    height:105px;
}

#Kont-Button_ {
    position:absolute;
    left:689px;
    top:15px;
    width:122px;
    height:90px;
}

#Export-css-11_ {
    position:absolute;
    left:811px;
    top:15px;
    width:13px;
    height:105px;
}

#Export-css-12_ {
    position:absolute;
    left:0px;
    top:105px;
    width:405px;
    height:15px;
}

#Export-css-13_ {
    position:absolute;
    left:420px;
    top:105px;
    width:120px;
    height:15px;
}

#Export-css-14_ {
    position:absolute;
    left:555px;
    top:105px;
    width:120px;
    height:15px;
}

#Export-css-15_ {
    position:absolute;
    left:689px;
    top:105px;
    width:122px;
    height:15px;
}

#Export-css-16_ {
    position:absolute;
    left:824px;
    top:105px;
    width:171px;
    height:15px;
}

#Export-css-17_ {
    position:absolute;
    left:0px;
    top:120px;
    width:15px;
    height:477px;
}

#Inhalt_ {
    position:absolute;
    left:15px;
    top:120px;
    width:255px;
    height:476px;
    background-image: url(Bilder/menu_links_hg_leer.jpg);
    text-indent: 15px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: normal;
    color: #FF0B0A;
}

#Export-css-19_ {
    position:absolute;
    left:270px;
    top:120px;
    width:15px;
    height:477px;
}

#Export-css-20_ {
    position:absolute;
    left:285px;
    top:120px;
    width:527px;
    height:193px;
}

#Export-css-21_ {
    position:absolute;
    left:812px;
    top:120px;
    width:12px;
    height:477px;
}

#Inhalt022_ {
    position:absolute;
    left:824px;
    top:120px;
    width:156px;
    height:476px;
    background-image: url(Bilder/Inhalt_rechts_leer.jpg);
}

#Export-css-23_ {
    position:absolute;
    left:980px;
    top:120px;
    width:15px;
    height:477px;
}

#Start-bild_ {
    position:absolute;
    left:285px;
    top:313px;
    width:527px;
    height:2px;
}

#Export-css-25_ {
    position:absolute;
    left:285px;
    top:315px;
    width:527px;
    height:15px;
}

#Inhalt026_ {
    position:absolute;
    left:285px;
    top:332px;
    width:527px;
    height:267px;
    background-image: url(Bilder/inhalt_mitte_leer.jpg);
}

#Export-css-27_ {
    position:absolute;
    left:15px;
    top:596px;
    width:255px;
    height:1px;
}

#Export-css-28_ {
    position:absolute;
    left:824px;
    top:596px;
    width:156px;
    height:1px;
}

-->
</style>
<!-- End ImageReady Styles -->
<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>
</head>
<body style="background-color:#FFFFFF;" onload=
"MM_preloadImages('Bilder/Home_Button_ro.jpg','Bilder/Produkte_Button_ro.jpg','Bilder/Info_Button_ro.jpg','Bilder/Kont_Button_ro.jpg')">
!-- ImageReady Slices (Website 06.03.psd) -->
<div id="Tabelle_01">
    <div id="Logo1_">
        <a href="index.html"
            onmouseover="window.status='Home';  return true;"
            onmouseout="window.status='';  return true;">
            <img id="Logo1" src="Bilder/Logo1.jpg" width="285" height="105" border="0" alt="Home" /></a>
    </div>
    <div id="Export-css-02_">
        <img id="Export_css_02" src="Bilder/Export_css_02.jpg" width="539" height="15" alt="" />
    </div>
    <div id="Export-css-03_">
        <img id="Export_css_03" src="Bilder/Export_css_03.jpg" width="171" height="105" alt="" />
    </div>
    <div id="Home-Button_">
        <a href="index.html">
            <img src="Bilder/Home_Button.jpg" alt="Home" width="120" height="90" border="0" id="Home_Button" onmouseover="MM_swapImage('Home_Button','','Bilder/Home_Button_ro.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>    </div>
<div id="Export-css-05_">
        <img id="Export_css_05" src="Bilder/Export_css_05.jpg" width="15" height="105" alt="" />
</div>
    <div id="Produkte-Button_">
        <a href="prdukte.html">
            <img src="Bilder/Produkte_Button.jpg" alt="" width="120" height="90" border="0" id="Produkte_Button" onmouseover="MM_swapImage('Produkte_Button','','Bilder/Produkte_Button_ro.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>    </div>
<div id="Export-css-07_">
        <img id="Export_css_07" src="Bilder/Export_css_07.jpg" width="15" height="105" alt="" />
</div>
    <div id="Info-Button_">
        <a href="information.html">
            <img src="Bilder/Info_Button.jpg" alt="" width="120" height="90" border="0" id="Info_Button" onmouseover="MM_swapImage('Info_Button','','Bilder/Info_Button_ro.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>    </div>
<div id="Export-css-09_">
        <img id="Export_css_09" src="Bilder/Export_css_09.jpg" width="14" height="105" alt="" />
</div>
    <div id="Kont-Button_">
        <a href="kontakt.html">
            <img src="Bilder/Kont_Button.jpg" alt="" width="122" height="90" border="0" id="Kont_Button" onmouseover="MM_swapImage('Kont_Button','','Bilder/Kont_Button_ro.jpg',1)" onmouseout="MM_swapImgRestore()" /></a>    </div>
<div id="Export-css-11_">
        <img id="Export_css_11" src="Bilder/Export_css_11.jpg" width="13" height="105" alt="" />
</div>
    <div id="Export-css-12_">
        <img id="Export_css_12" src="Bilder/Export_css_12.jpg" width="405" height="15" alt="" />
    </div>
    <div id="Export-css-13_">
        <img id="Export_css_13" src="Bilder/Export_css_13.jpg" width="120" height="15" alt="" />
    </div>
    <div id="Export-css-14_">
        <img id="Export_css_14" src="Bilder/Export_css_14.jpg" width="120" height="15" alt="" />
    </div>
    <div id="Export-css-15_">
        <img id="Export_css_15" src="Bilder/Export_css_15.jpg" width="122" height="15" alt="" />
    </div>
    <div id="Export-css-16_">
        <img id="Export_css_16" src="Bilder/Export_css_16.jpg" width="171" height="15" alt="" />
    </div>
    <div id="Export-css-17_">
        <img id="Export_css_17" src="Bilder/Export_css_17.jpg" width="15" height="477" alt="" />    </div>
    <div id="Inhalt_">
      <h2>Kategorien:</h2>
      <p>Kisten</p>
      <p>Schubladen</p>
      <p>Freduktion</p>
      <p>Putzmittel</p>
      <p>Sonstige</p>
    </div>
<div id="Export-css-19_">
        <img id="Export_css_19" src="Bilder/Export_css_19.jpg" width="15" height="477" alt="" />
</div>
    <div id="Export-css-20_">
        <img id="Export_css_20" src="Bilder/Export_css_20.jpg" width="527" height="193" alt="" />
    </div>
<div id="Export-css-21_">
        <img id="Export_css_21" src="Bilder/Export_css_21.jpg" width="12" height="477" alt="" />
</div>
    <div id="Inhalt022_"><img src="Bilder/Inhalt-22.jpg" width="156" height="476" /></div>
<div id="Export-css-23_">
        <img id="Export_css_23" src="Bilder/Export_css_23.jpg" width="15" height="477" alt="" />
</div>
    <div id="Start-bild_">
        <img id="Start_bild" src="Bilder/Start_bild.jpg" width="527" height="2" alt="" />
    </div>
    <div id="Export-css-25_">
        <img id="Export_css_25" src="Bilder/Export_css_25.jpg" width="527" height="15" alt="" />    </div>
  <div id="Inhalt026_">      <span class="Stil3">
      <div align="justify">
        <h2>Willkommen auf unserer Bestellseite im WWW</h2>
      </div>
    </span>
      <div align="justify">
        <p class="Stil2">Nach einigen Neuerungen, Sicherheitsma&szlig;nahmen und Produkterweiterungenblabla.</p>
        <h2 class="Stil2">Welcome to our Ordersite in the WWW</h2>
    </div>  
    <div align="justify">
      <p class="Stil2">Now after some innovations, blalba.</span>        </p>
      </h2>
      <h1 class="Stil3">&nbsp;</h1>
    </div>
<div id="Export-css-27_">
        <img id="Export_css_27" src="Bilder/Export_css_27.jpg" width="255" height="1" alt="" />
    </div>
    <div id="Export-css-28_">
        <img id="Export_css_28" src="Bilder/Export_css_28.jpg" width="156" height="1" alt="" />
    </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

Rollover Effekte hab ich hinbekommen! Versuche es doch grad zu lernen...

Herr_D · 14.03.2009

AW: PS Weiterverarbeitung CSS!

autsch

PS macht so bösen Code... wenn ich das sehe, bin ich ja schon geneigt zu sagen, nimm lieber den Tabellencode von PS... besser wäre natürlich, das Ganze von Grundauf neu zu schreiben...

Auf die Schnelle:

CSS ändern:

Code:

#Tabelle_01 {
    position:absolute;
    left:50%;
    top:0;
    width:995px;
    *height:597px;
    min-height:597px;
    margin-left:-498px;
}

Picturetuning · 14.03.2009

AW: PS Weiterverarbeitung CSS!

OK im Browser wird es zwar zentriert angezeigt aber da steht jetzt hinter dem Feld !-- ImageReady Slices (Website 06.03.psd) -->und in Dreamweaver sind die Felder lückenhaft, also oben!

Danke so kommen wir der Sache zumindest näher!

Herr_D · 14.03.2009

AW: PS Weiterverarbeitung CSS!

!-- ImageReady Slices (Website 06.03.psd) -->

löscht du einfach im Quelltext...

DW-Ansicht ist wumpe... wichtig sind die Browser...

Ich kann das nicht nachbauen, weil mir die Bilder fehlen...

Überleg mal, ob du eventuell die Slices vereinfachen kannst...

Ist das irgendwo hochgeladen?

cebito · 14.03.2009

AW: PS Weiterverarbeitung CSS!

Picturetuning schrieb:
OK im Browser wird es zwar zentriert angezeigt aber da steht jetzt hinter dem Feld !-- ImageReady Slices (Website 06.03.psd) -->und in Dreamweaver sind die Felder lückenhaft, also oben!

Das ist ein Kommentar, den dir ImageReady mit reinschreibt (vorn fehlt die öffnende < deshalb wird er als Text angezeigt), kannst du aus dem Quellcode rauslöschen, ist nur unnötiger Ballast - davon ist eh noch reichlich vorhanden.

Picturetuning · 14.03.2009

AW: PS Weiterverarbeitung CSS!

Habs gelöscht, steht immer noch da...zu arg unten habe ich es auch rausgelöscht...

Picturetuning · 14.03.2009

AW: PS Weiterverarbeitung CSS!

Was jetzt und vorallem wie gestalte ich jetzt die Seite weiter, also wo füge ich meinen Haupttext ein...

Also um es genauer zu beschreiben, soll ich die html seite dann kopieren und immer bearbeiten...und dann verlinken? oder wie würdet ihr das machen...kennt ihr das Video2Brain Automatisierung und Webdesign genau die Page habe ich nachgebaut...genau so!+

Lade gleich was hoch!

Picturetuning · 14.03.2009

AW: PS Weiterverarbeitung CSS!

Hier sind die Dateien der Cd und ich habe es als Export.css gespeichert...und genau so geslized und halt meine Rubriken eingebaut!

waterwebdesign · 14.03.2009

AW: PS Weiterverarbeitung CSS!

Sei vorsichtig was du hochlädst, wenn das wirklich auch Dateien der CD sind, dann bewegst du dich schon auf illegalem Gebiet.

Text speichert man schon gar nicht als Bild, zu aufwendige Nachbearbeitung, er wird von Suchmaschinen nicht erfasst, und es ist schlichtweg völlig überflüssiger Traffic-Ballast.

Herr_D hat dir da zwei gute Links gegeben und auch von mir der Ratschlag: Eigne dir Grundlagen in HTML/CSS an, bevor du komplexe Projekte versuchst. Wobei sich deine Seite relativ einfach umsetzen lässt. Zwei (bzw. drei bei Speicher) Listen, ein Contentbereich.
Der Haupttext kommt da hin, wo du bislang die Grafik für den Text hast.

Picturetuning · 14.03.2009

AW: PS Weiterverarbeitung CSS!

Hm ok habe das den Text doch aber selber im Html geschrieben also net so wie im Videomaterial...ich habe der Text geht bei mir auch unten weiter als die Menübalken links und rechts...was mach ich dann in dem Fall...

soll ich dann quasi den Styleshet unten mitte löschen?

serverhombre · 14.03.2009

AW: PS Weiterverarbeitung CSS!

Picturetuning schrieb:
Hm ok habe das den Text doch aber selber im Html geschrieben also net so wie im Videomaterial...ich habe der Text geht bei mir auch unten weiter als die Menübalken links und rechts...was mach ich dann in dem Fall...

soll ich dann quasi den Styleshet unten mitte löschen?

sorry versteht das jemand, ich nicht :rolleyes:

Wo ist jetzt nochmal das Problem?

Picturetuning · 14.03.2009

Naja also ich habe den Text in die <Div Id Inhalt026 geschrieben und er läuft weiter wie das eigentliche Layout!

Desweiteren hätte ich gerne gewusst warum meine Seite in meinem Broser nur in der MItte angezeigt wird und net über den ganzen Bildschirm, hat das was mit meiner Monitoreinstellung zu tun?

waterwebdesign · 14.03.2009

AW: PS Weiterverarbeitung CSS!

Nein, es liegt schlichtweg daran, das du der Seite eine feste Größe gegeben hast, nämlich 995px. Auch das Layout hat feste Höhen von dir bekommen, da kann es nicht einfach mehr werden, nur weil mehr Inhalt da ist, das musst du dem Browser ja erstmal verklickern. Oder läuft er in der Horizontalen über dein Layout?

serverhombre · 14.03.2009

AW: PS Weiterverarbeitung CSS!

Lad die Seite mal hoch dann kann man das Problem genau erkennen und dir besser helfen. :rolleyes:

Picturetuning · 14.03.2009

AW: PS Weiterverarbeitung CSS!

Hier bitte habe aus Datenschutzgründen die Logos zensiert da mein Freund für den ich das mache dies nicht will. anonsten alles gleich!

ich muss dazu sagen das ich auch nicht weis wie ich die Tabs hinkriegen werde welche in dem Videoordner sind diese habe ich auch so nachgebaut! Wäre aber nicht so wichtig!

serverhombre · 15.03.2009

AW: PS Weiterverarbeitung CSS!

Picturetuning schrieb:
Hier bitte habe aus Datenschutzgründen die Logos zensiert da mein Freund für den ich das mache dies nicht will. anonsten alles gleich!

Aus Datenschutzgründen die Logos zensiert, werden die Später nicht Online gestellt ??? naja das muss ich jetzt nicht verstehen. :rolleyes:

Kleines Beispiel wie die Seite als Fensterfüllendes-Layout umgesetzt werden könnte:

Picturetuning · 15.03.2009

AW: PS Weiterverarbeitung CSS!

Hammergeil, genau so stell ich mir das vor... geil echt. Soll ich jetzt mit Web Developer den Text auslesen? krieg ich die Grafik in der Mitte auch größer?

Man danke echt jetzt muss ich ja nur noch das umsetzen lernen. Bin dir was schuldig!

Jetzt Kurze Frage hast Du Skype, wäre echt super...

waterwebdesign · 15.03.2009

AW: PS Weiterverarbeitung CSS!

Die Grafik (ich denke du meinst severhombres s/w-Grafik) kriegt man mit HTML/CSS größer, allerdings nur verzerrt. Es ist aber auch möglich das als Hintergrundgrafik zu machen, die dann meinetwegen 1000px groß ist. Je nach Fenstergröße sind dann mal die ersten 500px oder die erste 700px zu sehen.
Lernen auf SELFHTML