nicht angemeldet
Hallöchen,
Ich habe meinen footer (der nur aus Text besteht) wie üblich per css zentriert:
[CODE]#footer {
text-align: center;
font-size: 11px;
color: #fff;
margin-top: 40px;
border-top: 1px dotted #a24fb5;
padding-top: 10px;
padding-bottom: 10px;[/CODE]
Was auch prima funktioniert hat.
Bis ich die Motiongallery eingebaut habe ([url=http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm]Dynamic Drive DHTML Scripts- CMotion Image Gallery[/url])
die ist dafür gedacht einen vertikal scrollbare Bildleiste zu haben.
Nachdem ich die aber eingebaut habe hat sich plötzlich die Seite verlängert so das ich rechts nen unschönen scrollbalken bekam..
ja ich mich mit .js nicht auskenne und mir der code doch ein bisschen umfangreich vorkam hab ich beschlossen einfach meinen Wrap eine feste höhe zuzuweisen :
#wrap {
margin: 0 auto 0 10%;
width: 800px;
background-image: #ffffff
height: 700px;
Was zwar dazu führte das die Seite jetzt nicht mehr zu lang war,
dafür befand sich mein footer jetzt am linken Rand.
Als ich dann versuchte in der html datei per
<font align=center>Die Bilderschmiede</font>
den Text zu zentrieren war die Seite wieder zu lang.
Ich hoffe jemand von euch kann mir sagen wie ich den footer zentrieren kann und gleichzeitig den Wrap nur so lang wie möglich halten kann.
mfg Flakke
*edit:
Ich habe dem Footer jetzt eine breite von 30% zugewiesen und margin-left: 30%,
was bewirkt das die gedottete linie richtig liegt, der schriftzug aber immer noch viel zu weit unten ist.
[B]Die Seite um die es geht:[/B]
Die website
[B]die css:[/B]
[CODE]~~~css
- {
margin: 0;
padding: 0;
}
body {
background: #333333 no-repeat top center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
color: #eee;
}
a {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: underline;
color: #a24fb5;
}
#wrap {
margin: 0 auto 0 10%;
width: 800px;
background-image: #ffffff
background-repeat:repeat-y;
height: 700px;
}
#header {
height: 120px;
background: url(images/header.jpg) no-repeat top center;
}
#header h1 {
font-size: 28px;
letter-spacing: -1px;
padding: 35px 0 0 20px;
color: #fff;
}
#header h1 a {
color: #fff;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
}
#header h1 a:hover {
color: #A3D74F;
}
#header h2 {
font-size: 19px;
color: ##a24fb5;
padding: 5px 0 0 20px;
letter-spacing: -1px;
font-weight: 100;
}
#content {
padding: 0 10px;
}
.right {
float: right;
width: 580px;
text-align: justify;
padding-top: 20px;
font-size: 14px;
}
.right h2 {
font-size: 18px;
font-weight: 100;
height: 30px;
line-height: 30px;
color: #a24fb5;
}
.right h2 a {
text-decoration: none;
color: #a24fb5;
}
.right h2 a:hover {
color: #fff;
}
.left {
position: relative;
background: url(images/linksbg6.png) no-repeat top;
color: #ffffff;
float: left;
width: 180px;
height: 500px;
padding-top: 60px;
padding-left: 0px;
}
.left h2 {
margin: 10px 0 0 0;
padding-left: 10px;
height: 30px;
line-height: 30px;
color: #ffffff;
font-size: 13px;
}
.left ul {
padding: 10px 0px 5px 10px;
list-style-type: none;
}
.left ul li a {
text-decoration: none;
font-weight: 600;
font-size: 13px;
}
.left ul li a:hover {
}
#motioncontainer {
margin: 400px auto; Uncomment this line if you wish to center the gallery on page /
width: 600px; / Set to gallery width, in px or percentage /
height: 90px; / Set to gallery height */
float: right;
}
#motioncontainer a img {
border: 1px solid #cccccc; /* Set image border color */
}
#motioncontainer a:hover img {
border: 1px solid navy; /* Set image border hover color */
}
#statusdiv {
background-color: lightyellow;
border: 1px solid gray;
padding: 2px;
position: absolute; /* Stop Editing Gallery Styles */
left: -300px;
visibility: hidden;
}
#motioncontainer a:hover {
color: red; /* Dummy definition to overcome IE bug */
}
#footer {
text-align: center;
font-size: 11px;
color: #fff;
margin-top: 40px;
border-top: 1px dotted #a24fb5;
padding-top: 10px;
padding-bottom: 10px;
}[/CODE]
[B]der java kram:[/B]
~~~javascript
/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* This copyright notice must stay intact for legal use
* Modified for autowidth and optional starting positions in
* http://www.dynamicdrive.com/forums/showthread.php?t=11839 by jschuer1 8/5/06
***********************************************/
//1) Set width of the "neutral" area in the center of the gallery.
var restarea=6;
//2) Set top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var maxspeed=5;
//3) Set to maximum width for gallery - must be less than the actual length of the image train.
var maxwidth=600;
//4) Set to 1 for left start, 0 for right, 2 for center.
var startpos=0;
//5) Set message to show at end of gallery. Enter "" to disable message.
var endofgallerymsg="";
function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to default height
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
window.open(path,"", winattributes)
}
////NO NEED TO EDIT BELOW THIS LINE////////////
var iedom=document.all||document.getElementById, scrollspeed=0, movestate='', actualwidth='', cross_scroll, ns_scroll, statusdiv, loadedyes=0, lefttime, righttime;
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
function creatediv(){
statusdiv=document.createElement("div")
statusdiv.setAttribute("id","statusdiv")
document.body.appendChild(statusdiv)
statusdiv=document.getElementById("statusdiv")
statusdiv.innerHTML=endofgallerymsg
}
function positiondiv(){
var mainobjoffset=getposOffset(crossmain, "left"),
menuheight=parseInt(crossmain.offsetHeight),
mainobjoffsetH=getposOffset(crossmain, "top");
statusdiv.style.left=mainobjoffset+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px";
statusdiv.style.top=menuheight+mainobjoffsetH+"px";
}
function showhidediv(what){
if (endofgallerymsg!="") {
positiondiv();
statusdiv.style.visibility=what;
}
}
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function moveleft(){
if (loadedyes){
movestate="left";
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px";
showhidediv("hidden");
}
else
showhidediv("visible");
}
lefttime=setTimeout("moveleft()",10);
}
function moveright(){
if (loadedyes){
movestate="right";
if (iedom&&parseInt(cross_scroll.style.left)<0){
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px";
showhidediv("hidden");
}
else
showhidediv("visible");
}
righttime=setTimeout("moveright()",10);
}
function motionengine(e){
var mainobjoffset=getposOffset(crossmain, "left"),
dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft,
dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop,
curposy=window.event? event.clientX : e.clientX? e.clientX: "";
curposy-=mainobjoffset-dsocx;
var leftbound=(menuwidth-restarea)/2;
var rightbound=(menuwidth+restarea)/2;
if (curposy>rightbound){
scrollspeed=(curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed;
clearTimeout(righttime);
if (movestate!="left") moveleft();
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed;
clearTimeout(lefttime);
if (movestate!="right") moveright();
}
else
scrollspeed=0;
}
function contains_ns6(a, b) {
if (b!==null)
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function stopmotion(e){
if (!window.opera||(window.opera&&e.relatedTarget!==null))
if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
clearTimeout(lefttime);
clearTimeout(righttime);
movestate="";
}
}
function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer;
if(typeof crossmain.style.maxWidth!=='undefined')
crossmain.style.maxWidth=maxwidth+'px';
menuwidth=crossmain.offsetWidth;
cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery;
actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;
if (startpos)
cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';
crossmain.onmousemove=function(e){
motionengine(e);
}
crossmain.onmouseout=function(e){
stopmotion(e);
showhidediv("hidden");
}
}
loadedyes=1
if (endofgallerymsg!=""){
creatediv();
positiondiv();
}
if (document.body.filters)
onresize()
}
window.onload=fillup;
onresize=function(){
if (typeof motioncontainer!=='undefined'&&motioncontainer.filters){
motioncontainer.style.width="0";
motioncontainer.style.width="";
motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, maxwidth)+'px';
}
menuwidth=crossmain.offsetWidth;
cross_scroll.style.left=startpos? (menuwidth-actualwidth)/startpos+'px' : 0;
}