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

Dynamische Divs in Container Div horizontal zentrieren

L

Lookover.at

Neues Mitglied
Hallo Allerseits.

Ich habe nun bereits X-Mal X-Foreneinträge studiert und gelesen usw.....
Auf folgende Frage fand ich bereits öfters keine Lösung und musste mich immer mit diversen Kompromissen herumschlagen.

:arrow:Also hier das Beispiel kurz umrissen:

HTML: 
<div id='container' style='width:1000px;'>
   <div style='container2'><div style='content'> Dynamischer Inhalt</div></div>
   <div style='container2'><div style='content'> Anderer Inhalt</div></div>
   <div style='container2'><div style='content'> Ich weiß nicht wie breit dieses Ding ist</div></div>
   <div style='container2'><div style='content'> auch die Anzahl ist unbekannt.</div></div>
   <div style='container2'><div style='content'> Blah Blah</div></div>
</div>
Also so ähnlich wie eine Horizontale Navigation, bei der die Einträge unbekannt sind.

Wie kann ich also nun ohne zu wissen wie breit alle Einträge sind diese horizontal in dem ersten Container zentrieren, bei dem ich weiß, dass er 1000px Breit ist ?

Mann also ich hoffe echt irgendwer hat eine Lösung.
Zu <TABLE>-zeiten, wäre das ja vollkommen easy gewesen...!

Vielen Dank voraus und lg aus Wien
www.lookover.at
 
Also erst mal ist das ne ziemliche DIV-Suppe...da kannste auch gleich 'ne Tabelle nehmen.
Aber da das nur umrissen sein soll, nehme ich an, dass das nicht so bleibt.

Etwas genauer möchte ich es noch wissen.
Die Container, die du zentrieren möchtest, liegen die inline nebeneinander oder block untereinander?
 
Die liegen nebeneinander.

Diese "DIVSuppe" ist deswegen so, um in weiterer Folge diverse Layout und Styles zu definieren.
Und du sprichst von Tabellen: Die sind ja schon lange für Layoutzwecke verboten.

lg
 
Lookover.at schrieb:
Und du sprichst von Tabellen: Die sind ja schon lange für Layoutzwecke verboten.
Zum Vergrößern anklicken....
Ich merke schon: Ironie und Sarkasmus erkennt nicht jeder ;)
Hab jetzt leider keine Zeit mehr mich mit dem Problem zu befassen. Ich schau nachher nochmal rein und seh mir das an, falls sich zweischenzeitlich nicht schon jemand anderes berufen gefühlt hat.
 
Lookover.at schrieb:
Die liegen nebeneinander.

Diese "DIVSuppe" ist deswegen so, um in weiterer Folge diverse Layout und Styles zu definieren.
Und du sprichst von Tabellen: Die sind ja schon lange für Layoutzwecke verboten.

lg
Zum Vergrößern anklicken....

Hallo.

Zeichne deine Liste als Liste aus.

Diese kannst du mit CSS auch nebeneinander legen und wesentlich besser stylen als deine div Suppe.

Gruss
Elroy
 
Interessant

Das mit der Liste hört sich interessant an.

1-> Kannst du mir ein kurz umrissenes Beispiel senden, wie ich das aufbauen müsste
2-> Eine Liste kann ich dann in der Form zentrieren, wie ich das brauche.

ganz abgesehen davon, bin ich gar nicht der Meinung, dass das so eine über orge Divsuppe ist.

Na jedenfalls wie kann man das nun zentrieren ??


lg und Vielen Dank aus Wien !!
www.lookover.at
 
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>Liste</title>
        <style type="text/css">
        #list {
            width: 1000px;
            height: 30px;
        }

        #list li {
            float: left;
            list-style: none;
            padding: 5px 10px 5px 10px;
        }
        </style>
    </head>

    <body>
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>    
        </ul>
    </body>

</html>
 
Damit wird es aber nicht zentriert T!P-TOP
So wird eher ein Schuh draus:
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>Liste</title>
        <style type="text/css">
        #list {
            height: 30px;
	    text-align:center;
        }

        #list li {
            display:inline;
            list-style: none;
        }
        </style>
    </head>

    <body>
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>    
        </ul>
    </body>

</html>
 
Mann Danke !!!!

Damit wird es aber nicht zentriert T!P-TOP
So wird eher ein Schuh draus:
Zum Vergrößern anklicken....
Ha Ha!!! --> Ich lach mich deppat !!

Jedenfalls tausend dank !!
Das was ich benötige, schaut in etwa so aus:

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>Liste</title>
        <style type="text/css">
        #list {
            height: 30px;
        text-align:center;
        cursor:pointer;
        }

        #list li {
            display:inline;
        list-style: none;
        border:solid red 1px;
        padding-left:15px;
        padding-right:15px;

        padding-top:10px;
        padding-bottom:10px;


        margin-left:4px;
        margin-right:4px;



        background-color:#EEEEEE;
        }
    .Cnt
    {
    width:1000px;
    border:solid red 1px;
    }
    .Tx
    {
    font-family:Arial;
    font-size:20px;
    }
        </style>
    </head>

    <body>
    <div class='Cnt'>
        <ul id="list">
            <li OnMouseOver="this.style.backgroundColor='#D9D9D9'" OnMouseOut="this.style.backgroundColor=''" OnClick="alert('Berttl1');"><span class='Tx'>Link1</span></li>
            <li OnMouseOver="this.style.backgroundColor='#D9D9D9'" OnMouseOut="this.style.backgroundColor=''" OnClick="alert('Berttl2');"><span class='Tx'>Link2</span></li>
            <li OnMouseOver="this.style.backgroundColor='#D9D9D9'" OnMouseOut="this.style.backgroundColor=''" OnClick="alert('Berttl3');"><span class='Tx'>Blah Blah</span></li>
            <li OnMouseOver="this.style.backgroundColor='#D9D9D9'" OnMouseOut="this.style.backgroundColor=''" OnClick="alert('Berttl4');"><span class='Tx'>Norbert geht schwimmen</span></li>
            <li OnMouseOver="this.style.backgroundColor='#D9D9D9'" OnMouseOut="this.style.backgroundColor=''" OnClick="alert('Berttl5');"><span class='Tx'>Lolo Blah</span></li>    
        </ul>
    </div>
    </body>

</html>
und es funktioniert auch !!


Eine Frage noch am Rande, die mich vielleicht beim nächsten mal beschäftigt:
Was mache ich, wenn ich bei der gleichen Anforderung, eine kompliziertere Anforderung vom Layout habe. Zb 2x Hintergrundbild oder sowas, (wenn ich mit einem einzigen <li> nicht auskomme)

Jedenfalls 1000 Dank.
Wenn Ihr mal nach Wien kommt, lad ich euch auf ein Bier ein.

lg Tom,...
www.lookover.at
 
Ja, dass ist mit schon klar: Aber angenommen ich brauch innerhalb von dem <li> eine kleine Struktur, die ich quasi nur mit Divs lösen kann, zb, ein Icon oder ähnliches (Mir ist schon klar, dass ein einfaches Icon kein Problem darstellen würde)
....Vermutlich ist das ohne konkretes Beiscpiel schwer sich vorzustellen
 
Hallo Spave Vampire

...Also ich habe nun so einnen Fall:
Darf ich dir den Fall erörtern und du gibst mir deine Meinung:

Ich habe folgendes Element:
HTML: 
<div id='Punkt'>
    <div><img src='Links.gif'></div>
    <div style='background-image:url(Back.gif)'><span>Punkt 1</span></div>
     <div><img src='Rechts.gif'></div>
</div>
Dieses Element hat nun wieder eine Dynamische Länge,
weil unbekannt ist, wie lange der Text 'Punkt 1' ist.

Nun sollte eine unbekannte Anzahl von derartigen Punkten horizontal zentriert dargestellt werden.
Wie könnte ich das nun lösen.

Also das würde dann quasie so aussehen:


HTML: 
<div style='width:1000px;height:150px;'> 

<center>

    <div class='Punkt1'>
        <div><img src='Links.gif'></div>
         <div style='background-image:url(Back.gif)'><span>Punkt 1</span></div>
           <div><img src='Rechts.gif'></div>
     </div>

    <div class='Punkt2'>
          <div><img src='Links.gif'></div>
          <div style='background-image:url(Back.gif)'><span>Punkt 2</span></div>
            <div><img src='Rechts.gif'></div>
      </div>

    <div class='Punkt3'>
          <div><img src='Links.gif'></div>
          <div style='background-image:url(Back.gif)'><span>Punkt 3</span></div>
            <div><img src='Rechts.gif'></div>
      </div>

    <div class='Punkt4'>
          <div><img src='Links.gif'></div>
          <div style='background-image:url(Back.gif)'><span>Punkt 4</span></div>
            <div><img src='Rechts.gif'></div>
      </div>

</center>

</div>
Das Element mit den 3 Divs ineinander muss nicht unbingt so aussehen.
Wenn ich dieses Layout in einer anderen Form umsetzen kann, kann der 'Punkt' auch gänzlich anders aufgebaut werden.
Doch ich wüsste nicht wie.

Selbstverständlich ist mir bewusst, dass '<center>' hier nicht geht,
Ich wollte damit nur die Anforderung unterstreichen.

Vielen Dank nochmals,
und lg aus Wien.
http://www.lookover.at
 
die lösung hast du ja eigentlich schon beim letzten mal bekommen.
was ist denn bei dieser neuerlichen div-suppe nun die konkrete frage?

vorweg kann ich dir schon mal ans herz legen, dich mit den psoido-klassen before und after vertraut zu machen ;)
 
Naja,

Das Problem ist nun: Das zentrierte Element ist ein einziges <li>
Jetzt ist das Element welches ich zentrieren möchte etwas Aufwendiger, das ich mit der Styledefinition eines einzigen <li> nicht auskomme.
Ich brauche ien Bild links und rechts und einen Text dazwischen. Der Text braucht ein Margin und ein Backgroundimage, welches über die Bilder links und rechts nicht angewendet werden sollen.
das ist das Problem.

Ich verstehe nicht ganz, wie man aufwendigere Layouts ohne derartige Divsuppen lösen kann.


psoido-klassen before und after
Zum Vergrößern anklicken....
...Ok, werd das mal googlen
 
nein
es geht
Code: 
li:before
li.class:before
li#id:befor
.class:befor
#id:before

und natürlich auch alles after
also die volle auswahl
 
Verstehe !!
Sehr cool Danke !!

Na dann werde ich dass alles nochmal umbauen.
Ich habe meine Frage und meine bisherige Antwort hier zusammengefasst.

Mein Beispiel



Jedoch ist es schon klüger, in diesem Beispiel mit befor und after zu arbeiten.
Ich werde das in dem Beispiel noch einbauen.

Vielen Dank jedenfalls und lg
 
@Space Vampire

Es hat also doch alles seinen Hacken:
Wenn du dir nun dieses Beispiel anschaust:
Liste

Wie bekomme ich nun die seitlichen Bilder so hin, dass sie aussehen wie bei meiner DIV-Supper hier:
Liste

margin und Paddings aller Art greifen auf der :after Definition nicht so wie ich das brauchen würde,...
Das ist jetzt mehr oder weniger genau das gleiche, als wenn ich die Bilder in einem <SPAN> Tag hinten oder vorne dran gehängt hätte,...

Vielen Dank nochmal
 
Zuletzt bearbeitet:
Ich glaube nun hab ichs endgültig:

Mit:
Code: 
position:relative;top:Xpx;left:Ypx;

komme ich in meinem Beispiel schlussendlich dorthin wo ichs brauche.

Also weil mich dieses Thema bereits einige male beschäftigt hat, und ich in der Vergangenheit immer wieder einen Kompromiss gesucht hatte, habe ich nun meine Lösungen hier zusammengefasst:

dynamische Divs horizontal zentrieren

Was sagst du dazu Space Vampire

lg und Danke nochmal
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben