problem mit website - "verschiebt" sich alles"

porkus1990 · 29.06.2009

hi ( wusste nicht in welches forum mein problem am besten passt. ist es hier ungünstig: entschuldigt bitte und verschiebt es einfach

)

ich habe ein kleines problemchen...
so und zwar: wenn ich auf meiner hp ( porki-online.de ) mehr inhalt reinstelle als der "rand" lang ist ( also nach unten ), verschiebt sich alles und es entstehen im rand "frame" weisse flecken etc, da sich ja alles verschiebt...

zur information: die seite wurde mit adobe photoshop cs4 erstellt.

ich hoffe, ihr könnt mir helfen dieses problem zu beheben. der rand muss nicht auftomatische länger werden, es würde reichen, wenn er sich nicht mehr verschiebt

wenn bedarf besteht, poste ich gerne noch den quellcode der seite.

mfg
porkus1990

thexe · 29.06.2009

AW: problem mit website - "verschiebt" sich alles"

hallo porkus,
ich würd an deiner stelle einmal einen der links mit soviel text füllen, dass das problem wirklich auftritt, im moment seh ich da nix und kann mir es auch eher nicht vorstellen

5 empfehlungen möchte ich dir trotzdem noch geben:
1: benutze ein div-layout anstatt der tabellen, ist auch um einiges leichter handzuhaben
2: zerschneide den hintergrund nicht sondern lass ihn als gesamten page-hintergrund anzeigen
3:sorg dafür, dass der "header" und die "menüleiste" ab einem gewissen punkt unendlich wiederholbar sind und lass sie auch wiederholen, bei mir tritt grad das phänomen auf, dass der header einfach nicht mehr existiert (vermutlich isses genau das was bei längerem content mit der "navi-leiste" passiert)
4: die links würd ich ggf als text-links machen mit einem einheitlichen hintergrundbutton
5: gugg dir das design nochmal in ruhe an, die ansätze sind bestimmt nicht verkehrt und für den anfang nicht schlecht, aber das ist für mich weder fisch noch fleisch

porkus1990 · 29.06.2009

AW: problem mit website - "verschiebt" sich alles"

danke für die schnelle antwort

hab mal 2 bilder wiederholt um es zu zeigen ( ist bei "party pics" auf der hp )
die empfehlungen sind im prinzip nicht schlecht, aber kenne mich damit noch nicht soo gut aus um sie spontan in die tat umsetzen zu können

würde bei mir wohl ein wochenende in anspruch nehmen ;-)

was ich wohl demnächst auch machen werde...

so, hoffe man kann mein problem jetzt besser sehen

moviehank · 29.06.2009

AW: problem mit website - "verschiebt" sich alles"

wenn du mit tabellen arbeitest musst du die verschachteln und dann den content der oben bleib auch nach oben ausrichten zum

<td align="center" valign="top">

dann sollte der teil in dem du die bilder hast oben bleiben

porkus1990 · 29.06.2009

AW: problem mit website - "verschiebt" sich alles"

hm...grad offline ausprobiert, hat nicht so geklappt : /
kann es eigl sein das durch das slicen mit photoshop die tabellen eine bestimmte größe erhalten haben und sich die bilder danach einfach ausrichten ? also das die tabellen eigl nicht größer werden können und wenn dann nur mit dem bekannten fehler ? ( das würde ja heissen, ich kann die ganze site neu machen, oder "externes" fotoalbum.. -.- )

sinnerdash · 29.06.2009

AW: problem mit website - "verschiebt" sich alles"

Hi, dein Design ist nicht ganz durchdacht. Vor allem der große Leere Bereich oben. Aber mir ging es anfangs genau so :lol:

Versuchs mal Hiermit:

HTML-Teil:
----------

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Porki Online 5 8 10 12</title>
<link href="main.css" rel="stylesheet" type="text/css" media/>
</head>
<body>
<div id="mainframe">
<div id="navigation">
<div id="buttoncontainer"><ul>
<li><a id="homebutton" href="Index.html"><span class="hidden">Home</span></a></li>
<li><div id="placeholder1"><span class="hidden">-</span></div></li>
<li><a id="uebermichbutton" href="uebermich.html"><span class="hidden">Über mich</span></a></li>
<li><div id="placeholder2"><span class="hidden">-</span></div></li>
<li><a id="partypicsbutton" href="partypics.html"><span class="hidden">Party Pics</span></a></li>
<li><div id="placeholder3"><span class="hidden">-</span></div></li>
<li><a id="sonstigepicsbutton" href="wacken07festival.html"><span class="hidden">Sontige Pics</span></a></li>
<li><div id="placeholder4"><span class="hidden">-</span></div></li>
<li><a id="neuesbutton" href="klasse.html"><span class="hidden">Neues</span></a></li>
</ul>
<div class="navigationbildunten"></div>
</div>
</div>
<div class="textcontent">
<p>Hier kommt dein Inhalt rein, egal wie viel</p>
</div>
</div>
</body>
</html>

CSS-Part (im Stammordner eine Datei erstellen: main.css):
----------------------------------------------------------

body {
background-color: #FFFFFF;
margin: 0px;
}
#mainframe {
width: 1280px;
background-image: url(Bilder/Index_01.png);
background-repeat: no-repeat;
float: left;
display: block;
}
#mainframe #navigation {
width: 212px;
float: left;
background-image: url(Bilder/Index_02.png);
background-repeat:no-repeat;
color: #FFFFFF;
margin-top: 368px;
}
#navigation ul,#navigation ol,#navigation li {
list-style: none;
display: inline;
margin: 0px;
padding: 0px;
}
#navigation #buttoncontainer {
float: right;
width: 166px;
margin: 0px;
}
#navigation #buttoncontainer #placeholder1 {
width: 166px;
float: left;
height: 11px;
background-image: url(Bilder/Index_05.png);
background-repeat: no-repeat;
overflow: hidden;
}
#navigation #buttoncontainer #placeholder2 {
width: 166px;
float: left;
height: 13px;
background-image: url(Bilder/Index_08.png);
background-repeat: no-repeat;
overflow: hidden;
}
#navigation #buttoncontainer #placeholder3 {
width: 166px;
float: left;
height: 15px;
background-image: url(Bilder/Index_10.png);
background-repeat: no-repeat;
overflow: hidden;
}
#navigation #buttoncontainer #placeholder4 {
width: 166px;
float: left;
height: 14px;
background-image: url(Bilder/Index_12.png);
background-repeat: no-repeat;
overflow: hidden;
}
#navigation #buttoncontainer #homebutton {
background-image: url(Bilder/webvorschlag2_03.png);
height: 43px;
width: 166px;
display: block;
float: left;
background-repeat: no-repeat;
}
#navigation #buttoncontainer #uebermichbutton {
background-image: url(Bilder/webvorschlag2_06.png);
height: 43px;
width: 166px;
display: block;
float: left;
background-repeat: no-repeat;
}
#navigation #buttoncontainer #partypicsbutton {
background-image: url(Bilder/webvorschlag2_09.png);
height: 43px;
width: 166px;
display: block;
float: left;
background-repeat: no-repeat;
}
#navigation #buttoncontainer #sonstigepicsbutton {
background-image: url(Bilder/webvorschlag2_11.png);
height: 43px;
width: 166px;
display: block;
float: left;
background-repeat: no-repeat;
}
#navigation #buttoncontainer #neuesbutton {
background-image: url(Bilder/webvorschlag2_13.png);
height: 43px;
width: 166px;
display: block;
float: left;
background-repeat: no-repeat;
}
#navigation #buttoncontainer .hidden {
display: none;
}
#navigation #buttoncontainer .navigationbildunten {
background-image:url(Bilder/Index_14.png);
height: 388px;
float: left;
width: 166px;
}
#mainframe .textcontent {
float: left;
width: 1000px;
margin-top: 368px;
padding-left: 25px;
padding-right: 25px;
background-color: #FFFFFF;
}

porkus1990 · 29.06.2009

AW: problem mit website - "verschiebt" sich alles"

nice work

danke dir

sinnerdash · 30.06.2009

AW: problem mit website - "verschiebt" sich alles"

Habe einen Fehler bei mir entdeckt.

da wo steht <link href="main.css" rel="stylesheet" type="text/css" media/>

muss natürlich stehen:

<link href="main.css" rel="stylesheet" type="text/css" media="screen" />

porkus1990 · 01.07.2009

AW: problem mit website - "verschiebt" sich alles"

danke

schon mal n teil hochgeladen ^^ funktioniert einwandfrei