Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Aufteilung der Seite und Layout-Probleme“

papiertiger

Aktives Mitglied

Hallo Ihr!

Ich würde aus dieser Grafik gern eine Seite machen, auf der das Design mittig ist und sich der Content-Bereich nach unten beliebig ausdehnen lässt - je nach Platzbedarf also. Allerdings soll dieser Bereich eine Mindesthöhe haben.

Hier mal der Entwurf:


Ich hab mir gedacht ich Schneide das Stück mit den vertikalen Balken aus und speicher das als header.jpg diese Linkleiste, auf der später der Text keine Grafik sondern eben Text sein wird schneide ich ebenfalls aus und speicher sie als menue.jpg. Nun würde ich gern von dem dunkelbraunen Stück (wo später der Content stehen wird) ein kleines Stück ausschneiden (ein paar Pixel hoch und über die gesamte Breite), welches entweder nach unten wiederholt oder eben langgestreckt wird. Das wäre dann content.jpg. Nun hab ich noch den unteren helleren Balken, auf dem später mit Text diese Copyright-Info stehen soll, bzw. ein Link zum Impressum oder ähnliches... Den würde ich ebenfalls ausschneiden und footer.jpg nennen.

Das einzige Problem, das ich habe ist, dass ich nicht weiß, wie ich die einzelnen Grafiken so untereinander bekomme, dass sie pixelgenau aufeinander passen, sich das Stück content.jpg wiederholt oder streckt und darauf der Text liegt. Das alles würde ich gern mit div-Tags machen und in einer CSS-Datei stehen haben!

Wäre für eure Hilfe superdankbar!

LG papiertiger
 

torbstoff

Nicht mehr ganz neu hier

alles soweit richtig.

definiere ersteinmal 4 div-boxen
1. logo
2. menu
3. content
4. footer

dann schreibst du in jedes <div> ein id="". zum bleistift <div id="logo">, wobei in jeder div-box eine andere id ist. dann mit css die ids bestimmen:
z.b.:
div#logo{
background-image:url(BILD_DES_LOGO);
width:BREITE;
height:HÖHE;
position:absolute;
left:ENTFERNUNG_VOM_LINKEN_RAND;
top:ENTFERNUNG_VON_DER_OBEREN_KANTE;
}

das machst du für jede div-box.
ich setze hier ein paar html/css kenntnisse voraus. mach mal bitte soweit du kommst

EDIT: bei dem footer solltest du entweder mit fixed arbeiten oder statt bottom statt top verwenden - wobei ich nicht weiß, ob das jeder browser kennt. vielleicht wäre ne tabelle angemessener.
 

papiertiger

Aktives Mitglied

Hi Torbstoff!

Danke schon mal für deine Hilfe!

Bis auf das mit dem footer klappt alles prima! ;)

Ich wollte das alles eigentlich in ne Tabelle von 100% schreiben und dann eben die einzelnen Grafik-Streifen als bg für die einzelnen td-Tags angeben. Aber mir hat jemand gesagt, dass man Tabellen eigentlich nicht mehr verwendet für Layout-Zwecke und div-Tags flexibler sind!? Jetzt bin ich verwirrt!?

Es geht mir hier auch einfach darum, dass ich es mit Tabelle und div-Tags kann. Dann hab ich wieder was, worüber ich mich freuen kann! :p

Edit: Ich hab das footer-div-Tag ins content-div rein und mit bottom: 0px geht es wunderbar!

Vielen Dank noch mal!

LG papiertiger
 

torbstoff

Nicht mehr ganz neu hier

hm... also besser finde ich tabellen, auch wenn das viele andere - aus welchen gründen auch immer - anders sehen. einer hier im forum meinte mal, mit div und css wäre das besser, weil man dann seiten z.b. flexibel im pda oder dergleichen betrachten kann. aber ich gehe davon aus, dass niemand deine seite im pda oder geräten mit geringen auflösungen betrachten will.
 

papiertiger

Aktives Mitglied

Vielleicht könntest du mir dann auch bzgl. Tabellen weiter helfen!? Wie würde das für eine Tabelle aussehen?

Ich hätte das ganze jetzt so gemacht:

Code:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td background="header.jpg"></td>
	</tr>
	<tr>
		<td background="menue.jpg"></td>
	</tr>
	<tr>
		<td background="content.jpg"></td>
	</tr>
	<tr>
		<td background="footer.jpg"></td>
	</tr>
</table>

So hab ich aber das Problem, dass nichts angezeigt wird, wenn nichts in der Tabelle steht...!?

LG papiertiger
 

torbstoff

Nicht mehr ganz neu hier

also mit tabelle hätte ich das so gemacht:
Code:
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td background="header.jpg">
</td>
   </tr>
   <tr>
      <td background="menue.jpg"></td>
   </tr>
   <tr>
      <td background="content.jpg"></td>
   </tr>
   <tr>
      <td background="footer.jpg"></td>
   </tr>
</table>
wobei ich jetzt nicht weiß, ob das height="" in tr oder td-tag gehört. aber damit hätte ich jetzt die höhe jeder zeile angegeben und da, wo der inhalt rein soll einfach n * gesetzt, sodass das variabel ist.
wenn da nichts drin ist, musst du da was rein machen. z.b.
EDIT: ach mensch... wieso geht das mit dem leerzeichen nicht
EDIT2: kann mir mal jemand erklären, wie man ein Leerzeichen im htmlcodestil (kp wie das jetzt richtig heißt) einfügt - ihr wisst schon & n b s p ; nur ohne leerzeichen zwischen den buchstaben. irgendwie klappt das in diesem forum nicht

eleganter wäre das jetzt mit ein wenig css statt background="" und width="" aber hier reicht das wohl auch[/quote]
 

papiertiger

Aktives Mitglied

DANKE! Werd ich gleich mal ausprobieren :wink:

Meine nächsten Probleme:

Ist es möglich den Content-Streifen (content.jpg) wiederholen zu lassen, statt ihn in die Länge zu ziehen?

Im Mozilla funktioniert alles... Im IE nicht :( Warum?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>TEST</title>
<style type="text/css">
<!--
#header
{
background-image:url(Bilder/entwurf01_01.jpg);
width:780px;
height:153px;
position:absolute;
left:0px;
top:0px;
}

#menue
{
background-image: url(Bilder/entwurf01_02.jpg);
width:780px;
height:46px;
position:absolute;
left:0px;
top:153px;
} 

#content
{
background-image: url(Bilder/entwurf01_03.jpg);
width:780px;
height:auto;
position:absolute;
left:0px;
top:199px;
min-height: 400px;
}

#footer
{
background-image: url(Bilder/entwurf01_05.jpg);
width:780px;
height:44px;
position: absolute;
left:0px;
bottom:0px;
}
-->
</style>
</head>
<body>
	<div id="header">
	</div>
	<div id="menue">
	</div>
	<div id="content">test
		<div id="footer">
		</div>
	</div>
</body>
</html>

Wie gesagt, ich würde mich riesig freuen, wenn ich das hinbekommen würde mit eurer Hilfe!

LG papiertiger
 
F

fanttomas

Guest

Nur so nebenbei, ich weiss nicht wie es den anderen ergeht, aber meine Augen leiden unter der Farbe.

gruss
 

Eskayp

Something

Ich würde es auch mit Tabellen machen, also meinetwegen so:

Code:
<table width="xxx" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td background="header.jpg"></td>
  </tr>
  <tr>
    <td background="menue.jpg"></td>
  </tr>
  <tr>
    <td background="content.jpg"></td>
  </tr>
  <tr>
    <td background="footer.jpg"></td>
  </tr>
</table>

Das (=festes Leerzeichen) bewirkt, dass in der Zelle etwas steht und diese so in jedem Browser auf jeden Fall angezeigt wird.

Allerdings kann man das Bild auch direkt als IMG einfügen, wenn ansonsten in der Zelle nichts mehr stehen soll.

Also z.B. so:

Code:
<html>
  <head>
    <style type="text/css">
      [...]
      td.content {
        background-image:url(bilder/content.jpg);
        background-repeat:repeat-y;
        height:100px;
        vertical-align:top;
      }
    </style>
  </head>
  <body>
    <div align="center"><table cellspacing="0" cellpadding="0" border="0" width="xxx">
      <tr>
        <td>
          

          [img]bilder/menu.jpg[/img]

        </td>
      </tr>
      <tr>
        <td class="content">
          Blabla
        </td>
      </tr>
      <tr>
        <td>
          [img]bilder/footer.jpg[/img]

        </td>
      </tr>
    </table></div>
    <map name="menumap">
      [...]
    </map>
  </body>
</html>
 

papiertiger

Aktives Mitglied

fanttomas schrieb:
Nur so nebenbei, ich weiss nicht wie es den anderen ergeht, aber meine Augen leiden unter der Farbe.

gruss

Entschuldigung an deine Augen :D. Das ist ein auf die Schnelle zusammen geschusterters Etwas, was nicht dafür gedacht ist schön auszusehen ;)!

@Eskayp: Ja, so hatte ich es versucht... WEnn ich in die Tabelle ein festes Leerzeichen setze, dann wird eben genau eine Zeile angezeigt und der Rest abgeschnitten...
Und als img will ich sie nicht einfügen, weil wie gesagt überall Text drauf liegen soll...

LG papiertiger
 

Eskayp

Something

Naja, dann machst Du eben alle als Hintergrundbilder, wie in meinem Beispiel der "content"-Bereich und notierst im Stylesheet den Befehl "height:100px;" (bzw. so hoch, wie die Zelle eben sein soll).
 

papiertiger

Aktives Mitglied

Hi Ihr!

So, ich hab es mit Tabellen geschafft! ;) Ich hatte gestern nicht 100px sondern 100% angegeben! Das war der ganze Fehler da dran! Im Firefox, Opera und IE kann man es schon mal ansehen - abgesehen von der schrecklichen Farbe ;)!

Ich würde mich freuen, wenn jemand noch eine Idee hätte, wie ich das mit div-Tags machen kann... So dass es auch der IE richtig anzeigt...!

LG papiertiger
 
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

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.849
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben