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

Kasten nebeneinander und untereinander

N

ngoci

Neues Mitglied
Hallo^^

Ich benutzte diesen Code für einen Kasten:
<br><div style="overflow:auto; width:350px; height:250px; padding:0px; border:4px Randfarbe solid; background-image:url(Link); background-repeat:repeat; background-attachment:fixed; color: #ffffff;"><br><font color="Schriftfarbe"> Text </font></div>
Zum Vergrößern anklicken....


Aber ich hätte gerne das drei nebeneinander stehen und unten noch mal drei. Es soll so wie eine Tabelle aussehen mit 2 Zeilen und 3 Spalten. Nur habe ich mit einer Tabelle echte Probleme :oops:
Und wenn ich den Code ohne Leerzeichen doppelt einfügen stehen die Kästen trotzdem untereinander und nebendran :(

Kann mir jemand da bitte helfen?
 
Gib ihnen ein
Code: 
float: left;
und cleare nach der dritten Box, z.B. mit
Code: 
<div style="clear: both;"><!--Clear-Div--></div>
 
Hallo.

Gib uns bitte deinen jetzigen Code, damit wir sehen können was du falsch gemacht hast.

Gruss
Elroy
 
So sieht der aus:
<br><div style="overflow:left; width:350px; height:250px; padding:0px; border:4px Randfarbe solid; background-image:url(Link); background-repeat:repeat; background-attachment:fixed; color: #ffffff;"><br><font color="Schriftfarbe"> Text </font></div>
<br><div style="overflow:left; width:350px; height:250px; padding:0px; border:4px Randfarbe solid; background-image:url(Link); background-repeat:repeat; background-attachment:fixed; color: #ffffff;"><br><font color="Schriftfarbe"> Text </font></div>
<br><div style="overflow:left; width:350px; height:250px; padding:0px; border:4px Randfarbe solid; background-image:url(Link); background-repeat:repeat; background-attachment:fixed; color: #ffffff;"><br><font color="Schriftfarbe"> Text </font></div>

<div style="clear: both;"><!--Clear-Div--></div><br><div style="overflow:auto; width:350px; height:250px; padding:0px; border:4px Randfarbe solid; background-image:url(Link); background-repeat:repeat; background-attachment:fixed; color: #ffffff;"><br><font color="Schriftfarbe"> Text </font></div>
Zum Vergrößern anklicken....

Also mit "klappt nicht" meine ich, dass die Kasten nicht nebeneinander angezeigt werden, und auch weiß ich nicht genau wo man den Code einsetzten soll...
 
@ngoci

Du hast im Style-Attribut deiner DIV-Container ja auch nirgends das dir bereits empfohlene float: left; untergebracht.

Auch wenn ich den Rest des Codes mal unangetastet lasse, könnte er in etwa so aussehen:

<br><div style="float:left; overflow:left; width:350px; height:250px; padding:0px; border:4px Randfarbe solid; background-image:url(Link); background-repeat:repeat; background-attachment:fixed; color: #ffffff;"><br><font color="Schriftfarbe"> Text </font></div>
<br><div style="float:left; overflow:left; width:350px; height:250px; padding:0px; border:4px Randfarbe solid; background-image:url(Link); background-repeat:repeat; background-attachment:fixed; color: #ffffff;"><br><font color="Schriftfarbe"> Text </font></div>
<br><div style="float:left; overflow:left; width:350px; height:250px; padding:0px; border:4px Randfarbe solid; background-image:url(Link); background-repeat:repeat; background-attachment:fixed; color: #ffffff;"><br><font color="Schriftfarbe"> Text </font></div>

<div style="clear: both;"><!--Clear-Div--></div><br><div style="float:left; overflow:auto; width:350px; height:250px; padding:0px; border:4px Randfarbe solid; background-image:url(Link); background-repeat:repeat; background-attachment:fixed; color: #ffffff;"><br><font color="Schriftfarbe"> Text </font></div>
Zum Vergrößern anklicken....
 
Es passiert trotzdem nicht. Die Kasten sind und bleiben unteinander...
Ich mache das mit Frontpage und kann in der "Vorschau" keine Veränderungen erkennen :(
 
Wenn man alle "Kästen" nach links floatet, werden sie auch immer untereinander bleiben. Du musst den einen nach rechts und den anderen nach links.

Und btw: Lagere deine Stylesheets doch aus, so verstehe ich es, wenn du dich nicht mehr auskennst...
 
Wenn man alle "Kästen" nach links floatet, werden sie auch immer untereinander bleiben.
Zum Vergrößern anklicken....

Das ist bei mir aber anders. Hier mal ein kleines Beispiel:

Code: 
<!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>Beispiel Floatboxen</title>
<style type="text/css">
div.floatbox {
    float:left;
    padding:30px;
    border:1px solid #000000;
    margin-right:10px;
    }
</style>
</head>

<body>
    <div class="floatbox">Box 1</div>
    <div class="floatbox">Box 2</div>
    <div class="floatbox">Box 3</div>
</body>
</html>

Aber das mit dem Auslagern des CSS-Codes ist auf jeden Fall eine gute Idee {*click*}. Aber vermutlich alleine mit Frontpage und ohne wirkliche Eingriffe in den Code auch etwas schwierig.
 
Das ist, weil du keine Breite definierst. Aber es stimmt schon, man kann auch nur mit float: left die Boxen so anordnen, wie vom Threadersteller gewollt.
Allerdings stimmt wahrscheinlich etwas mit den Breiten nicht.
 
medop schrieb:
Das ist bei mir aber anders. Hier mal ein kleines Beispiel:

Code: 
<!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>Beispiel Floatboxen</title>
<style type="text/css">
div.floatbox {
    float:left;
    padding:30px;
    border:1px solid #000000;
    margin-right:10px;
    }
</style>
</head>

<body>
    <div class="floatbox">Box 1</div>
    <div class="floatbox">Box 2</div>
    <div class="floatbox">Box 3</div>
</body>
</html>
Aber das mit dem Auslagern des CSS-Codes ist auf jeden Fall eine gute Idee {*click*}. Aber vermutlich alleine mit Frontpage und ohne wirkliche Eingriffe in den Code auch etwas schwierig.
Zum Vergrößern anklicken....

Also dieser Code kann ich in Frontpage sehen, und die Kasten sind auch nebeneinander^^
Nur ich hätte es gerne mit dem Code, den ich gepostet habe, wenn möglich^^

Ach ok ich habe es in Frontpage gesehen. Doch die Kasten sind dann leicht verschoben auch wenn sie nebeneinander sind. Ein Screen: (zum Vergrößern einfach drauf klicken)
 
Zuletzt bearbeitet:
Woran scheitert es denn? Du hast ja jetzt einen Beispielcode, der funktioniert. Ändere ihn doch einfach so um, dass er für dich passt...
 
Ach ok ich habe es in Frontpage gesehen. Doch die Kasten sind dann leicht verschoben auch wenn sie nebeneinander sind. Ein Screen:
Zum Vergrößern anklicken....

Entferne doch einfach mal die Zeilenumbrüche...

Code: 
[COLOR=red][B]<br>[/B][/COLOR]<div style="overflow:left; width:350px; height:250px;  padding:0px; border:4px Randfarbe solid; background-image:url(Link);  background-repeat:repeat; background-attachment:fixed; color:  #ffffff;"><br><font color="Schriftfarbe"> Text  </font></div> 
[B][COLOR=red]<br>[/COLOR][/B]<div style="overflow:left; width:350px; height:250px;  padding:0px; border:4px Randfarbe solid; background-image:url(Link);  background-repeat:repeat; background-attachment:fixed; color:  #ffffff;"><br><font color="Schriftfarbe"> Text  </font></div> 
[B][COLOR=red]<br>[/COLOR][/B]<div style="overflow:left; width:350px; height:250px;  padding:0px; border:4px Randfarbe solid; background-image:url(Link);  background-repeat:repeat; background-attachment:fixed; color:  #ffffff;"><br><font color="Schriftfarbe"> Text  </font></div>

Vermutlich sind sie dann horizontal auf einer Ebene.
 
ok hat geklappt die Seitenumbrüche weg zu lassen. Aber der zweite Kaste der unten ist...möchte ich gerne noch ein Stück nach oben.
Außerdem hätte ich gerne drei Kasten unten, nicht nur einen.......
 
Ok habe es hinbekommen^^
Nur der Abstand in der Mitte zwischen den beiden Kasten gefallen mir nicht und die wollen nicht in der Mitte stehen! Obwohl ich "center" eingegeben habe >.<
 
Versuch´s mal mit margin: 0 auto;
Da center veraltet ist, kann es sein, dass es nicht richtig interpretiert wird.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben