• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

content alles auf einmal nach unten verschieben

D

djhard2get

Neues Mitglied
hallo,

ich bin dj und bin gerade dabei meine seite zu erstellen. unter dem menüpunkt discography möchte ich in zukunft immer neue singles posten.

das problem dabei ist, dass ich alle darunterliegenden buttons jeweils einzeln die richtige position zugewiesen habe und nicht weiß, wie ich den ganzen content auf einmal um den wert x nach unten verschiebe.

könnt ihr mir da bitte weiterhelfen?

hier ein screenshot:
kamfszhm.png
 
da du nur ein Bild und keinen Link gepostet hast, weiß man ja nicht, wie du die Seite aufgebaut hast. Aber normal gruppiert man die gewünschten Objekte in einem Container-div und positioniert sie absolut in Beziehung auf den Nullpunkt des Container-div. Wenn du den Container-div verschiebst, dann verschiebst alle Inhalte mit, aber die Beziehungen im Container-div bleiben unverändert.
 
hallo netaktiv,

deine lösung ist genau was ich suche. wie ist dafür der genaue code?

das foto ist ein screenshot meiner webseite und der rechte teil sollte nach unten verschoben werden sobald ein neuer eintrag kommt.

ich habe mit html und css gecodet - angefügt ist mein html code, der mit rot markierte bereich sind die div-container, die nach unten verschoben werden sollten:




<!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=UTF-8" />
<title>Untitled Document</title>
</head>


<body>
<style type="text/css">
body {
font-family: "Helvetica Neue";
font-size: 10pt;
font-weight:
color: #000;
background: #FFF
clear: none;
float: none;
height: 100%;
width: 100%;
}
#logo {
height: 100px;
width: 385px;
position: absolute;
left: 240px;
top: 50px;
background: #FFF url(images/menu/1logo.gif);
}
#disco_header {
height: 35px;
width: 760px;
position: absolute;
left: 634px;
top: 47px;
background: #FFF url(images/disco_header.gif);

}








#keeprisingup_header {
height: 29px;
width: 630px;
position: absolute;
left: 634px;
top: 100px;
background: #FFF url(images/keeprisingup_header.gif);
}
#keeprisingup_cover {
height: 174px;
width: 174px;
position: absolute;
left: 637px;
top: 130px;
background: #FFF url(images/keeprisingup.gif);
}
#keeprisingup_text {
font-family: "Helvetica Neue";
height: 50px;
width: 450px;
position: absolute;
right: 150px;
top: 160px;
no-repeat;
}
#keeprisingup_video {
height: 18px;
width: 63px;
position: absolute;
right: 540px;
top: 255px;
}
#keeprisingup_itunes {
height: 20px;
width: 68px;
position: absolute;
right: 440px;
top: 253px;
}
#keeprisingup_beatport {
height: 23px;
width: 68px;
position: absolute;
right: 340px;
top: 256px;
}
#grumbler_header {
height: 29px;
width: 630px;
position: absolute;
left: 634px;
top: 325px;
background: #FFF url(images/grumbler_header.gif);
}
#grumbler_cover {
height: 174px;
width: 174px;
position: absolute;
left: 637px;
top: 355px;
background: #FFF url(images/grumbler.gif);
}
#grumbler_text {
font-family: "Helvetica Neue";
height: 50px;
width: 450px;
position: absolute;
right: 150px;
top: 385px;
no-repeat;
}
#grumbler_video {
height: 18px;
width: 63px;
position: absolute;
right: 540px;
top: 480px;

}
#grumbler_itunes {
height: 20px;
width: 68px;
position: absolute;
right: 440px;
top: 478px;
}
#grumbler_beatport {
height: 23px;
width: 68px;
position: absolute;
right: 340px;
top: 481px;
}
#remixes_header {
height: 29px;
width: 630px;
position: absolute;
left: 634px;
top: 555px;
background: #FFF url(images/remixes_header.gif);
}
#remixes_text {
font-family: "Helvetica Neue";
height: 50px;
width: 450px;
position: absolute;
left: 636px;
top: 585px;
no-repeat;
}
#home {
display: block;
height: 125px;
width: 125px;
position: absolute;
left: 243px;
top: 148px;
}
#news {
display: block;
height: 125px;
width: 125px;
position: absolute;
left: 369px;
top: 148px;
}
#bio {
display: block;
height: 125px;
width: 125px;
position: absolute;
left: 495px;
top: 148px;
}
#disco {
height: 125px;
width: 123px;
position: absolute;
left: 243px;
top: 274px;
}
#media {
height: 125px;
width: 123px;
position: absolute;
left: 369px;
top: 274px;
}
#contact {
height: 125px;
width: 123px;
position: absolute;
left: 495px;
top: 274px;
}


#facebook_like {
height: 26px;
width: 68px;
position: fixed;
left: 100px;
bottom: 5px;
no-repeat;
}


#google_like {
height: 26px;
width: 68px;
position: fixed;
left: 10px;
bottom: 0px;
no-repeat;
}






#beatport {
position: fixed;
height: 26px;
width: 100px;
bottom: 0px;
right: 2px;

}
#soundcloud {
position: fixed;
height: 26px;
width: 100px;
bottom: 0px;
right: 104px;

}
#myspace {
position: fixed;
height: 26px;
width: 100px;
bottom: 0px;
right: 206px;

}
#youtube {
position: fixed;
height: 26px;
width: 100px;
bottom: 0px;
right: 308px;

}
#twitter {
position: fixed;
height: 26px;
width: 100px;
bottom: 0px;
right: 410px;

}
#facebook {
position: fixed;
height: 26px;
width: 100px;
bottom: 0px;
right: 512px;

}


<!-- I begin my comments here --> nicht verschieben












</style>

<body>




<div id="logo"></div>
<div id="disco_header"></div>






<div id="home"><a href="http://christianrothas.com/home"><img src="images/menu/home.gif"
onmouseover="this.src='images/menu/home_red.gif'"
onmouseout="this.src='images/menu/home.gif'"
name="news" width="124" height="124" id="home2" /></a></div>


<div id="disco"><a href="http://christianrothas.com/news"><img src="images/menu/disco_red.gif" name="disco_red" width="124" height="124" id="disco_red" /></a></div>


<div id="bio"><a href="http://christianrothas.com/bio"><img src="images/menu/bio.gif"
onmouseover="this.src='images/menu/bio_red.gif'"
onmouseout="this.src='images/menu/bio.gif'"
name="bio" width="124" height="124" id="bio2" /></a></div>


<div id="news"><a href="http://christianrothas.com/news"><img src="images/menu/news.gif"
onmouseover="this.src='images/menu/news_red.gif'"
onmouseout="this.src='images/menu/news.gif'"
name="disco" width="124" height="124" id="disco2" /></a></div>


<div id="media"><a href="http://christianrothas.com/media"><img src="images/menu/media.gif"
onmouseover="this.src='images/menu/media_red.gif'"
onmouseout="this.src='images/menu/media.gif'"
name="media" width="124" height="124" id="media2" /></a></div>


<div id="contact"><a href="http://christianrothas.com/contact"><img src="images/menu/contact.gif"
onmouseover="this.src='images/menu/contact_red.gif'"
onmouseout="this.src='images/menu/contact.gif'"
name="contact" width="124" height="124" id="contact2" /></a></div>




<div id="beatport"><a href="http://www.beatport.com/search?query=christian+rothas"><img src="images/footer/beatport.jpg" width="100" height="26" /></a></div>
<div id="soundcloud"><a href="http://www.soundcloud.com/christianrothas"><img src="images/footer/soundcloud.gif" width="100" height="26" /></a></div>
<div id="myspace"><a href="http://www.myspace.com/djchristianrothas"><img src="images/footer/myspace.gif" width="100" height="26" /></a></div>
<div id="youtube"><a href="http://www.youtube.com/christianrothas"><img src="images/footer/youtube.gif" width="100" height="26" /></a></div>
<div id="twitter"><a href="http://www.twitter.com/christianrothas"><img src="images/footer/twitter.gif" width="100" height="26" /></a></div>
<div id="facebook"><a href="http://www.facebook.com/christianrothas"><img src="images/footer/facebook.gif" width="100" height="26" /></a></div>




<div id="facebook_like"></div>


<div id="google_like"><link rel="canonical" href="http://www.christianrothas.com" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>
<g:plusone size="small"></g:plusone>
</div>






<div id="keeprisingup_header"></div>
<div id="keeprisingup_cover"></div>
<div id="keeprisingup_video"><a href="http://www.youtube.com/watch?v=lfDIvSNqQZ8"><img src="images/video.gif" width="63" height="18" /></a></div>
<div id="keeprisingup_itunes"><a href="http://itunes.apple.com/de/album/keep-rising-up/id446767379"><img src="images/itunes.gif" width="68" height="20" /></a></div>
<div id="keeprisingup_beatport"><a href="http://www.beatport.com/release/keep-rising-up/374472"><img src="images/beatport.gif" width="68" height="23" /></a></div>
<div id="keeprisingup_text">
Mark Tonic & Farbenfroh & Petros T. feat. Nina Hall "Keep Rising up"<br/>
Tom Buster & Andrea Gaya Remix<br/>
Studio Brothers Remix<br/>
Fiesta Electronica Remix<br/>
Meave de Tria's White Island Dub<br/>
</div>


<div id="grumbler_header"></div>
<div id="grumbler_cover"></div>
<div id="grumbler_video"><a href="http://www.youtube.com/watch?v=mIdUX67Iynw"><img src="images/video.gif" width="63" height="18" /></a></div>
<div id="grumbler_itunes"><a href="http://itunes.apple.com/de/album/grumbler/id384742690"><img src="images/itunes.gif" width="68" height="20" /></a></div>
<div id="grumbler_beatport"><a href="http://www.beatport.com/release/grumbler/284576"><img src="images/beatport.gif" width="68" height="23" /></a></div>
<div id="grumbler_text">
Mark Tonic & Farbenfroh "Grumbler"<br/>
Delicious Dan & Silt Remix<br/>
Hell I Am Remix<br/>
Fiesta Electronica Remix<br/>
Meave de Trias Club Re-Work<br/>
</div>




<div id="remixes_header"></div>
<div id="remixes_text"><a href="http://www.youtube.com/watch?v=iRxZDexgjQo">
Damon Paul & Gabriel Bauzá - Acapulco (farbenfroh Remix)
</a></div>


















</body>
</html>
 
Hallo hard2get,

ich gebe hier Ideentipps und mache nicht die Detailarbeit, und das noch in der vollen Komplexität deiner Seite. Wenn du wissen willst, wie es geht, dann mach dir eine sehr einfache Testseite mit ein paar div. Gebe denen Höhe, Breite und Hintergrundfarbe, damit du siehst, wo sie sind und lies mal was zu den CSS Attributen position, top und left. Wenn du mal 2h oder mehr gegrübelt und versucht hast, ohne weiter zu kommen, dann poste das einfache Beispiel hier und wir sehen weiter.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben