Antworten auf deine Fragen:
Neues Thema erstellen

PS Layout div fest größe scrollen

W

wlive

Nicht mehr ganz neu hier

Hallo Leute,

ich habe mit PS CS 2 ein Layout für eine Webseite gebastelt. Diese mit Imageready dann als HTML gespeichert. Alle Divs haben feste Positionen Höhen und Breiten. Allerdings in den Contentbereich soll etwas mehr rein als ich an Pixel mit den festen Angaben Platz habe (Text, Bilder etc.) Ist es Möglich die Seite so stehen zu lassen und nur den Content flexibel zu machen? Scrollen aber bitte ohne Scrollbalkenanzeige im Content-DIV sondern nur den Scrollbalken wie man es kennt am Rande vom Browserfenster. Unter dem Content kommt noch der Footer und der ist auch fest positioniert.
 

cebito

cebito

undefined

AW: PS Layout div fest größe scrollen

wlive schrieb:
Scrollen aber bitte ohne Scrollbalkenanzeige im Content-DIV sondern nur den Scrollbalken wie man es kennt am Rande vom Browserfenster.
Zum Vergrößern anklicken....
Wie soll das gehen, wenn alles Größen fest sind? Der Contentbereich muss sich ausdehnen können, damit der Scrollbalken am Seitenrand erscheint. Eine Lösung wäre sich von den absoluten (fest?) Positionierungen zu verabschieden. Zeig mal dein Grundgerüst und ein Bild dazu!
 
Zuletzt bearbeitet:
W

wlive

Nicht mehr ganz neu hier

AW: PS Layout div fest größe scrollen

Code: 
<script type="text/javascript">
<!--
userAgent = window.navigator.userAgent;
browserVers = parseInt(userAgent.charAt(userAgent.indexOf("/")+1),10);
function newImage(arg) {
 if (document.images) {
  rslt = new Image();
  rslt.src = arg;
  return rslt;
 }
}
function findElement(n,ly) {
 if (browserVers < 4)  return document[n];
 var curDoc = ly ? ly.document : document;
 var elem = curDoc[n];
 if (!elem) {
  for (var i=0;i<curDoc.layers.length;i++) {
   elem = findElement(n,curDoc.layers[i]);
   if (elem) return elem;
  }
 }
 return elem;
}
function changeImages() {
 if (document.images && (preloadFlag == true)) {
  var img;
  for (var i=0; i<changeImages.arguments.length; i+=2) {
   img = null;
   if (document.layers) {
    img = findElement(changeImages.arguments[i],0);
   }
   else {
    img = document.images[changeImages.arguments[i]];
   }
   if (img) {
    img.src = changeImages.arguments[i+1];
   }
  }
 }
}
var preloadFlag = false;
function preloadImages() {
 if (document.images) {
  Slice_10_over = newImage("../images/Slice_10-over.jpg");
  Slice_13_over = newImage("../images/Slice_13-over.jpg");
  Slice_14_over = newImage("../images/Slice_14-over.jpg");
  Slice_15_over = newImage("../images/Slice_15-over.jpg");
  Slice_16_over = newImage("../images/Slice_16-over.jpg");
  Slice_17_over = newImage("../images/Slice_17-over.jpg");
  preloadFlag = true;
 }
}
// -->
</script>
<link href="../style/style.css" rel="stylesheet" type="text/css">
</head>
<body onload="preloadImages();" style="background-color:#FFFFFF;">
<div id="Tabelle_01">
  <div id="Slice-1">
 <img src="../images/Slice_1.jpg" width="103" height="187" alt="" />  </div>
 <div id="Slice-2">
   <img src="../images/Slice_2.jpg" width="193" height="187" alt="" />  </div>
<div id="Slice-3">
   <img src="../images/Slice_3.jpg" width="604" height="187" alt="" />  </div>
<div id="Slice-4">
  <img src="../images/Slice_4.jpg" width="100" height="187" alt="" />  </div>
  <div id="Slice-5">
 <img src="../images/Slice_5.jpg" width="103" height="63" alt="" />  </div>
 <div id="Slice-6">
   <img src="../images/Slice_6.jpg" width="193" height="63" alt="" />  </div>
 <div id="Slice-7"><br><br>
   <h1>Leistungen</h1>
 </div>
  <div id="Slice-8">
 <img src="../images/Slice_8.jpg" width="100" height="63" alt="" />  </div>
 <div id="Slice-9">
   <img src="../images/Slice_9.jpg" width="103" height="566" alt="" />  </div>
 <div id="Slice-10">
   <a href="index.html"
   onmouseover="changeImages('Slice_10', '../images/Slice_10-over.jpg'); return true;"
   onmouseout="changeImages('Slice_10', '../images/Slice_10.jpg'); return true;"
   onmousedown="changeImages('Slice_10', '../images/Slice_10-over.jpg'); return true;"
   onmouseup="changeImages('Slice_10', '../images/Slice_10-over.jpg'); return true;">
   <img name="Slice_10" src="../images/Slice_10.jpg" width="193" height="22" border="0" alt="" /></a>  </div>
  <div id="Slice-11">
 
 
    CONTENT
 
 
      </div>
 
 
  <div id="Slice-12">
 <img src="../images/Slice_12.jpg" width="100" height="566" alt="" />  </div>
 <div id="Slice-13">
   <a href="leistungen.html"
   onmouseover="changeImages('Slice_13', '../images/Slice_13-over.jpg'); return true;"
   onmouseout="changeImages('Slice_13', '../images/Slice_13.jpg'); return true;"
   onmousedown="changeImages('Slice_13', '../images/Slice_13-over.jpg'); return true;"
   onmouseup="changeImages('Slice_13', '../images/Slice_13-over.jpg'); return true;">
   <img name="Slice_13" src="../images/Slice_13.jpg" width="193" height="18" border="0" alt="" /></a>  </div>
<div id="Slice-14">
   <a href="produkte.html"
   onmouseover="changeImages('Slice_14', '../images/Slice_14-over.jpg'); return true;"
   onmouseout="changeImages('Slice_14', '../images/Slice_14.jpg'); return true;"
   onmousedown="changeImages('Slice_14', '../images/Slice_14-over.jpg'); return true;"
   onmouseup="changeImages('Slice_14', '../images/Slice_14-over.jpg'); return true;">
   <img name="Slice_14" src="../images/Slice_14.jpg" width="193" height="20" border="0" alt="" /></a>  </div>
<div id="Slice-15">
   <a href="technik.html"
   onmouseover="changeImages('Slice_15', '../images/Slice_15-over.jpg'); return true;"
   onmouseout="changeImages('Slice_15', '../images/Slice_15.jpg'); return true;"
   onmousedown="changeImages('Slice_15', '../images/Slice_15-over.jpg'); return true;"
   onmouseup="changeImages('Slice_15', '../images/Slice_15-over.jpg'); return true;">
   <img name="Slice_15" src="../images/Slice_15.jpg" width="193" height="40" border="0" alt="" /></a>  </div>
<div id="Slice-16">
   <a href="kontakt.html"
   onmouseover="changeImages('Slice_16', '../images/Slice_16-over.jpg'); return true;"
   onmouseout="changeImages('Slice_16', '../images/Slice_16.jpg'); return true;"
   onmousedown="changeImages('Slice_16', '../images/Slice_16-over.jpg'); return true;"
   onmouseup="changeImages('Slice_16', '../images/Slice_16-over.jpg'); return true;">
   <img name="Slice_16" src="../images/Slice_16.jpg" width="193" height="20" border="0" alt="" /></a>  </div>
<div id="Slice-17">
   <a href="impressum.html"
   onmouseover="changeImages('Slice_17', '../images/Slice_17-over.jpg'); return true;"
   onmouseout="changeImages('Slice_17', '../images/Slice_17.jpg'); return true;"
   onmousedown="changeImages('Slice_17', '../images/Slice_17-over.jpg'); return true;"
   onmouseup="changeImages('Slice_17', '../images/Slice_17-over.jpg'); return true;">
   <img name="Slice_17" src="../images/Slice_17.jpg" width="193" height="20" border="0" alt="" /></a>  </div>
<div id="Slice-18">
   <img src="../images/Slice_18.jpg" width="193" height="426" alt="" />  </div>
 <div id="Slice-19">
   <img src="../images/Slice_19.jpg" width="103" height="184" alt="" />  </div>
 <div id="Slice-20">
   <p>&nbsp;</p>
   <p class="footer"><br>
      </p>
  </div>
 <div id="Slice-21">
   <img src="../images/Slice_21.jpg" width="100" height="184" alt="" />  </div>
</div>
</body>
</html>

...und hier die css

Code: 
/* CSS Document */
body{
 font: 85% Verdana, Arial, Helvetica, sans-serif;
 background-color: #ffffff;
 text-align:justify;
  margin: 0;
   padding: 0;
}
a{
 color: #204EC3;
 text-decoration: none;
}
td {
font-family: verdana;
 font-size: 12px;
 color: #000000;
 text-decoration: none;
 border: none;
}
h1{
 font: 120% Verdana, Arial, Helvetica, sans-serif;
 font-weight:bold;
 color: #204EC3;
 text-decoration: none;
}
h2{
 font: 90% Verdana, Arial, Helvetica, sans-serif;
 font-weight:bold;
 color: #204EC3;
 text-decoration: none;
}
#Tabelle_01 {
 position:absolute;
 left:0px;
 top:0px;
 width:1000px;
 left: 50%;
 margin-left: -500px;
}
#Slice-1 {
 position:absolute;
 left:0px;
 top:0px;
 width:103px;
 height:187px;
}
#Slice-2 {
 position:absolute;
 left:103px;
 top:0px;
 width:193px;
 height:187px;
}
#Slice-3 {
 position:absolute;
 left:296px;
 top:0px;
 width:604px;
 height:187px;
}
#Slice-4 {
 position:absolute;
 left:900px;
 top:0px;
 width:100px;
 height:187px;
}
#Slice-5 {
 position:absolute;
 left:0px;
 top:187px;
 width:103px;
 height:63px;
}
#Slice-6 {
 position:absolute;
 left:103px;
 top:187px;
 width:193px;
 height:63px;
}
#Slice-7 {
 position:absolute;
 left:296px;
 top:187px;
 width:604px;
 height:63px;
 background-image:url(../images/Slice_7.jpg);
}
#Slice-8 {
 position:absolute;
 left:900px;
 top:187px;
 width:100px;
 height:63px;
}
#Slice-9 {
 position:absolute;
 left:0px;
 top:250px;
 width:103px;
 height:566px;
}
#Slice-10 {
 position:absolute;
 left:103px;
 top:250px;
 width:193px;
 height:22px;
}
#Slice-11 {
 position:absolute;
 left:296px;
 top:250px;
 width:604px;
 background-image:url(../images/Slice_11.jpg);
}
#Slice-12 {
 position:absolute;
 left:900px;
 top:250px;
 width:100px;
 height:566px;
}
#Slice-13 {
 position:absolute;
 left:103px;
 top:272px;
 width:193px;
 height:18px;
}
#Slice-14 {
 position:absolute;
 left:103px;
 top:290px;
 width:193px;
 height:20px;
}
#Slice-15 {
 position:absolute;
 left:103px;
 top:310px;
 width:193px;
 height:40px;
}
#Slice-16 {
 position:absolute;
 left:103px;
 top:350px;
 width:193px;
 height:20px;
}
#Slice-17 {
 position:absolute;
 left:103px;
 top:370px;
 width:193px;
 height:20px;
}
#Slice-18 {
 position:absolute;
 left:103px;
 top:390px;
 width:193px;
}
#Slice-19 {
 position:absolute;
 left:0px;
 top:816px;
 width:103px;
 height:184px;
}
#Slice-20 {
 position:absolute;
 left:103px;
 top:816px;
 width:797px;
 height:184px;
 background-image:url(../images/Slice_20.jpg);
}
#Slice-21 {
 position:absolute;
 left:900px;
 top:816px;
 width:100px;
 height:184px;
}
/*Class*/
 
.sub_head {
 font-weight: small;
 color: 204EC3;
}
.footer {
color: #204EC3;
font-size: 12px;
text-align:center;
font:bold;
}
 
wex_stallion

wex_stallion

Motzerator

Teammitglied
PSD Beta Team
AW: PS Layout div fest größe scrollen

Ein DIV ist, so gesehen, ein Fenster. Entweder es passt alles rein ins Fenster oder es fehlt was. Die Alternative ist scrollen im Fenster.
 
W

wlive

Nicht mehr ganz neu hier

AW: PS Layout div fest größe scrollen

Ok,... scrollen im Fenster ist nicht schön. Dann werde ich mir mal was anderes einfallen lassen müssen.

Danke euch
 
sokie

sokie

Mod | Web

AW: PS Layout div fest größe scrollen

Du musst eifach zusehen, dass deine Bereiche(divs) so angeordnet sind, dass sich die darunterliegenden mit wachsendem Inhaltsbereich mit verschieben. Man kann schon an der Stelle heraushören, dass deren Position folglich relativ zum vorangegangenen Element sein muss.
Alle Elemente absolut zu positionieren, so wie es beim automatischen Slicen der Fall ist, ist für dein Vorhaben nicht ausreichend.
 
W

wlive

Nicht mehr ganz neu hier

AW: PS Layout div fest größe scrollen

Ich habe es jetzt etwas anders gemacht und ich denke das war gut so. Alles nochmals komplett neu von Hand und nicht mit der automatischen Geschichte von Imageready. Ein Globales Div und alle anderen Divs darein gepackt. Die einzelnen Grafiken schön benannt, das Globale so positioniert wie ich es haben möchte. Bin auch schon fasst fertig mit der Umsetzung.
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 90 (Mitglieder: 4, Gäste: 86)
Robots: 519

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.528
Neuestes Mitglied
Links Stream es
Oben