1. Liebe Forumsgemeinde,

    aufgrund der Bestimmungen, die sich aus der DSGVO ergeben, müssten umfangreiche Anpassungen am Forum vorgenommen werden, die sich für uns nicht wirtschaftlich abbilden lassen. Daher haben wir uns entschlossen, das Forum in seiner aktuellen Form zu archivieren und online bereit zu stellen, jedoch keine Neuanmeldungen oder neuen Kommentare mehr zuzulassen. So ist sichergestellt, dass das gesammelte Wissen nicht verloren geht, und wir die Seite dennoch DSGVO-konform zur Verfügung stellen können.
    Dies wird in den nächsten Tagen umgesetzt.

    Ich danke allen, die sich in den letzten Jahren für Hilfesuchende und auch für das Forum selbst engagiert haben. Ich bin weiterhin für euch erreichbar unter tti(bei)pcwelt.de.
    Dismiss Notice

Div-Boxen Anordnung

Discussion in 'Web-Know-how für die Homepage' started by jonny x, Aug 17, 2008.

Thread Status:
Not open for further replies.
  1. jonny x

    jonny x Byte

    Hallo,

    Ich erstelle gerade eine Homepage und bin dabei auf folegendes Problem gestoßen.

    Ich habe ein Div-Box als "Rahmen für alles" erstellt.

    Dann habe ich eine weitere Div-Box mit dem Inhalt eines - mir nur unter dem Namen Akkordeon-Menu bekannten - Elementes erstellt.

    Jetzt wollte ich eine weitere solche Box erstellen, unzwar neben der zweiten in der ersten, also so.....

    HTML:
    [COLOR="Red"]<div id="box1">[/COLOR]

[COLOR="Lime"]<div id="box2">
</div>[/COLOR]

[COLOR="Blue"]<div id="box3">
</div>[/COLOR]

[COLOR="Red"]</div>[/COLOR]
    Aber meine 3. Box wird in und nicht neben der zweiten dargestellt.

    Ein Screenshot:
    [​IMG]


    Und er vollständige Quellcode:

    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Schule Kaemper - Seminare</title>


<head>

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="ddaccordion.js"></script>
<script type="text/javascript">


ddaccordion.init({
	headerclass: "expandable", //Shared CSS class name of headers group that are expandable
	contentclass: "categoryitems", //Shared CSS class name of contents group
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: true, //persist state of opened contents within browser session?
	toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively 

["class1", "class2"]
	togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  

["position", "html1", "html2"] (see docs)
	animatespeed: "normal" //speed of animation: "fast", "normal", or "slow"
})


</script>

<style type="text/css">
  


.arrowlistmenu{
width: 191px; 
}

.arrowlistmenu .menuheader{ 
font: bold 14px Arial;
color: white;
background: black url(tbi.jpg) repeat-x center left;
margin-bottom: -14px; 
text-transform: uppercase;
padding: 5px 0px 5px 10px; /
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ 
background-image: url(tba.jpg);
}

.arrowlistmenu ul{ 
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 9px; 
}

.arrowlistmenu ul li{
padding-bottom: 2px;
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(arrowbullet.png) no-repeat center left; 
display: block;
padding: 2px 0;
padding-left: 19px; 
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ 
color: #A70303;
background-color: #F3F3F3;
}


</style>
<style type="text/css">


#box1 {
        
    display:block; 
    width:600px;  
    height:700px; 
    overflow:hidden; 
    padding:0px; 
    border:1px solid #000000;  
    margin:0 auto; 
    margin-top: 0px; 
    margin-left: center; 
    }



#box2 {
        
    display:block; 
    width:191px;  
    height:432px; 
    overflow:hidden; 
    padding:0px; 
    border: 1px solid #000000;  
    margin:0 auto; 
    margin-top: 116px; 
    margin-left: 017px; 
    }




#box3 {
        
    display:block; 
    width:191px;  
    height:432px; 
    overflow:hidden; 
    padding:0px; 
    border: 1px solid #000000;  
    margin:0 auto; 
    margin-top: 117px; 
    margin-left: 112px; 
    }




a.klasse1 {
text-decoration: none;
border:0;
margin: 0 auto;
padding:0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size:0;
width: 139px;
height:42px;
background: url("Schule.jpg") 0 0 no-repeat;
}
a.klasse1:hover {
background-position: -139px 0;

}


a.klasse2 {
text-decoration: none;
border:0;
margin: 0 auto;
padding:0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size:0;
width: 145px;
height:42px;
background: url("Haupt-Seminar.jpg") 0 0 no-repeat;
}
a.klasse2:hover {
background-position: -145px 0;

}


a.klasse3 {
text-decoration: none;
border:0;
margin: 0 auto;
padding:0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size:0;
width: 145px;
height:42px;
background: url("Englich-Seminar.jpg") 0 0 no-repeat;
}
a.klasse3:hover {
background-position: -145px 0;

}

a.klasse4 {
text-decoration: none;
border:0;
margin: 0 auto;
padding:0;
display: block;
text-indent: -9999px;
letter-spacing: -9999px;
font-size:0;
width: 149px;
height:42px;
background: url("Latein-Seminar.jpg") 0 0 no-repeat;
}
a.klasse4:hover {
background-position: -149px 0;

}






</style>
</head>
<body style="background-color:white">

<div id="box1" style="background-color:white;background-image:url(BG.jpg);background-repeat:no-repeat;">

<table cellspacing="0" cellpadding="0" border="0" style=" margin-left:10px;
  margin-top:40px">

<tr>


<td><a href="http://1" class="klasse1">Grafiken in Browser deaktiviert</a></td>
<td><a href="http://2" class="klasse2">Grafiken in Browser deaktiviert</a></td>
<td><a href="http://3" class="klasse3">Grafiken in Browser deaktiviert</a></td>
<td><a href="http://4" class="klasse4">Grafiken in Browser deaktiviert</a></td>

</tr>

</table>





<div id="box2">

<left><div class="arrowlistmenu" style="margin-top:-14px">
<h3 class="menuheader expandable"><center>1</center></h3>
<ul class="categoryitems">
<font color=black><b><br>
Download 1
</font></b>
</ul>

<h3 class="menuheader expandable"><center>2</center></h3>
<ul class="categoryitems">
<font color=black><b><br>
Download 2
</font></b>
</ul>
<h3 class="menuheader expandable"><center>3</center></h3>
<ul class="categoryitems">
<font color=black><b><br>
Download 3
</font></b>
</ul>
<h3 class="menuheader expandable"><center>4</center></h3>
<ul class="categoryitems">
<font color=black><b><br>
Download 4
</font></b>
</ul>
<h3 class="menuheader expandable"><center>5</center></h3>
<ul class="categoryitems">
<font color=black><b><br>
Download 5
</font></b>
</ul>
<h3 class="menuheader expandable"><center>6</center></h3>
<ul class="categoryitems">
<font color=black><b><br>
Download 6
</font></b>
</ul>
</div>





<div id="box3">

</div>






</div>


</body>
     
    jonny x, Aug 17, 2008
    #1
  2. Supeede

    Supeede Byte

    Hi,

    um deine div's nebeneinander zu bekommen, schreibe bei deinem css-Anweisungen bei box 2 und 3 float:left dazu
    Also

    #box2 {
    float:left;
    .....
    }

    #box3 {
    float:left;
    .....
    }

    dann setzt er sie direkt nebeneinander. (Der Browser :-)
     
    Supeede, Aug 21, 2008
    #2
  3. jonny x

    jonny x Byte

    Hallo Supeede,

    erstmal vielen Danl für deine Antwort,

    habe jeweils bei "box 2" und "box 3" float:left ergänzt, leider hat sich aber nichts verändert.

    Woran könnte es denn sonst noch liegen?

    Schonmal vielen Dank

    Jonny
     
    jonny x, Aug 23, 2008
    #3
  4. Supeede

    Supeede Byte

    hallo.

    an allem. was du zum beispiel im body eingeben hast (margin)
    oder an dingen die du in den box-css einstellungen geschrieben hast.
     
    Supeede, Aug 27, 2008
    #4
Thread Status:
Not open for further replies.

Share This Page