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

Ap div relativ zu anderem Ap div

W

WeMa

Neues Mitglied
Hallo,
entschuldigung, falls diese Frage schoneinmal gestellt wurde, ich habe jedoch mit der Suche gesucht und nichts brauchbares gefunden.

1.Also ich habe eine Site erstellt, wo per:

left:XX%;
top:XX%;

Die Position verschiedener Divs festgelegt wird. Nun habe ich alle ap divs(3) mit diesem Verfahren positioniert und möchte aber das 4. div relativ zu einem anderen machen. Wie geht das?

2. Welches Attribut muss ich benutzen, dass bei "kleiner werdendem Screen" also kleinerer Auflösung, auch der Text in den Divs richtig fließt?

Vielen herzlichen Dank im Voraus!!
 
Ich würde dafür
HTML: 
#div {
float: left;
margin: Opx Rpx Upx Lpx;
}
verwenden.
Aber gibt es einen Link zu dieser Seite?
 
nein

noch nicht, ich kann aber den Quellcode posten:


HTML: 
<!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>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#apDiv1 {
    top:38%;
    left:1%;
    position:absolute;
    width:134px;
    height:385px;
    z-index:1;
}
#apDiv2 {
    left:88%;
    top:38%;
    position:relative;
    margin-right:500px;
    width:134px;
    height:385px;
    z-index:2;
}
#apDiv3 {
    position:absolute;
    left:18%;
    top:6%;
    width:667px;
    height:56px;
    z-index:3;
}
body {
    padding: auto;
    background-image: url(bg.png);
    background-color: #448D2E;
}

body,td,th {
    color: #FFF;
}
#apDiv4 {
    top:38%;
    left:144px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    position:absolute;
    width:726px;
    height:536px;
    z-index:4;
    overflow: auto;
}
}

-->
</style>
</head>

<body>
<div id="apDiv1">
  <p><img src="Button.png" border="0" width="120" height="50" /></p>
  <p><img src="Button.png" border="0" width="120" height="50" /></p>
  <p><img src="Button.png" border="0" width="120" height="50" /></p>
  <p><img src="Button.png" border="0" width="120" height="50" /></p>
</div>
<div id="apDiv2">
  <p><img src="Button.png" border="0" width="120" height="50" /></p>
  <p><img src="Button.png" border="0" width="120" height="50" /></p>
  <p><img src="Button.png" border="0" width="120" height="50" /></p>
  <p><img src="Button.png" border="0" width="120" height="50" /></p>
</div>
<div id="apDiv3"><img src="Mundart.png" width="668" height="71" alt="Top" /></div>
<div id="apDiv4">
  <p align="left"><
  Lorem ipsum dolor sit amet....
</div>
</body>
</html>
Ich will, dass "apdiv2" relativ zu "apdiv4" ist und zwar mit Abstand 0px und auf gleicher Höhe.
 
2 und 4 sollen nebeneinander auf gleicher Höhe sein? Dann schreib sie im Quelltext hintereinander und floate die 2.

Ausserdem sind deine Grafiken falsch ausgezeichnet. Eine einzelne Grafik ist kein Textabsatz, mehrere aufeinander folgende Grafiken sind eine Liste, also solltest du sie auch so auszeichnen, als Liste.
 
Die HTML-Datei:
HTML: 
<ul id="apDiv2">
     <li><img src="Button.png" border="0" width="120" height="50" /></li>
     <li><img src="Button.png" border="0" width="120" height="50" /></li>
     <li><img src="Button.png" border="0" width="120" height="50" /></li>
     <li><img src="Button.png" border="0" width="120" height="50" /></li>
</ul>
<div id="apDiv4">
     <p>
           Lorem ipsum dolor sit amet....
     </p>
</div>
CSS:
HTML: 
ul#apDiv2 {
     float:left;
}

#apDiv4 {
     float:right;
}
Was wurde gemacht?

Erstmal habich die Liste von Bildern in eine Liste gegeben. Mit CSS kannst du dann die zwei divs floaten: apDiv2 richten wir links aus; apDiv4 nach rechts.
Nun stehen die zwei divs nebeneinander.
 
WOW, vielen Dank!!
Das hat mir sehr weiter geholfen!
Jetzt habe ich nur noch das Problem, dass die rechten Buttons dafür an der rechten Seite der Site "kleben" und obwohl ich right:XX% gemacht habe passiert nichts:

HTML: 
<!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>Unbenanntes Dokument</title>
<style type="text/css">
<!--


#apDiv1 {
    top:38%;
    left:1%;
    position:absolute;
    width:134px;
    height:385px;
    z-index:1;
}
#apDiv2 {
    float:left;
    left:88%;
    right:20%;
    top:38%;
    float:left;
    position:absolute;
    margin-right:500px;
    width:134px;
    height:385px;
    z-index:2;
}
#apDiv3 {
    position:absolute;
    left:18%;
    top:6%;
    width:667px;
    height:56px;
    z-index:3;
}
body {
    padding: auto;
    background-image: url(bg.png);
    background-color: #448D2E;
}

body,td,th {
    color: #FFF;
}
#apDiv4 {
    float:right;
    top:38%;
    left:144px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    position:absolute;
    width:726px;
    height:536px;
    z-index:4;
    overflow: auto;
}
}

-->
</style>
</head>

<body>
<div id="apDiv1">
  <p><img src="Button.png" border="0" width="120" height="50" /></p>
  <p><img src="Button.png" border="0" width="120" height="50" /></p>
  <p><img src="Button.png" border="0" width="120" height="50" /></p>
  <p><img src="Button.png" border="0" width="120" height="50" /></p>
</div>

<div id="apDiv3"><img src="Mundart.png" width="668" height="71" alt="Top" /></div>
<ul id="apDiv2">
     <p><img src="Button.png" border="0" width="120" height="50" /></p>
     <p><img src="Button.png" border="0" width="120" height="50" /></p>
     <p><img src="Button.png" border="0" width="120" height="50" /></p>
     <p><img src="Button.png" border="0" width="120" height="50" /></p>
</ul>
<div id="apDiv4">
     <p>
           Lorem ipsum dolor sit amet....
     </p>
</div> 
<div id="apDiv4">
</div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben