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

2 Blockelemente mittig nebeneinander

Status
Für weitere Antworten geschlossen.
A

assmaje

Neues Mitglied
Ich schon wieder. :mrgreen:

Ich möchte zwei Blockelemente (notwendig für Bild-Hovereffekt) nebeneinander (hab ich schon geschafft mit float:left) MITTIG darstellen. Mit text-align:center geht es schon mal nicht, weil dies nur bei inline-Elementen funktioniert, also hab ich <center> probiert, und es hat auch funktioniert. :) Allerdings nur mit EINEM Blockelement (also ohne floaten). Wenn ich das gleiche mit zwei mache, werden sie aber linksbündig dargestellt...

Hoffe mir kann jemand helfen. :?

HTML:

Code: 
      <div>

        <center>
          <a class="psp" href="#">PSP</a>
          <a class="pc" href="#">PC</a>
        </center>

      </div>

CSS:

Code: 
.psp { 
     text-decoration:none;
     border:0;
     padding:0;
     display:block;
     text-indent:-10px;
     letter-spacing:-10px;
     font-size:0;
     width:87px;
     height:88px;
     float:left;
     background:url("psp.png") 0 0 no-repeat;
}

.psp:hover { 
     background-position:-87px 0;
}

.pc { 
     text-decoration:none;
     border:0;
     padding:0;
     display:block;
     text-indent:-10px;
     letter-spacing:-10px;
     font-size:0;
     width:87px;
     height:88px;
     float:left;
     background:url("pc.png") 0 0 no-repeat;
}

.pc:hover { 
     background-position:-87px 0;
}
 
Vergiss <center>, das is' "schmutzig" :P

Nach diesem Prinzip wird es gehen (weiß nicht genau, was du vorhast, daher hier nur der Grundaufbau, zum drauf aufbauen):
Code: 
#wrap {
  width:174px;
  margin:0 auto;
}
#left {
  float:left;
  width:87px;
}
#right {
  margin-left:87px;
  width:87px;
}
.clear {
  clear:both;
}
Code: 
<div id="wrap">
  <div id="left">links</div>
  <div id="right">rechts</div>
  <br class="clear" />
</div>
Nicht getestet, mit den Größenangeben wirst du wohl etwas spielen müssen, damit es deinen Anforderungen entspricht (wenn es untereinander steht, beachte, dass margin, padding und border zur Breite hinzuaddiert werden und pass die Breite des umgebenden Containers an).
 
#Björn, prinzipiell richtig, aber zeig den Leuten doch nicht wieder so eine div-Suppe, das kannst du doch wirklich besser..

machs lieber so
Code: 
<ul id="wrap">
  <li id="left"><a href="#">PSP</a></li>
  <li id="right"><a href="#">PC</a></li>
  <br class="clear" />
</ul>
da steckt schon mal Html Sinn hinter

gruß
csstester
 
Zuletzt bearbeitet:
sinn? mit der ausnahme das du deine LI tags noch mit DIV tags abschließt sollte sonst alles richtig sein ^^
 
csstester schrieb:
#Björn, prinzipiell richtig, aber zeig den Leuten doch nicht wieder so eine div-Suppe, das kannst du doch wirklich besser..
Zum Vergrößern anklicken....
Wie gesagt, ich wollte nur das Prinzip darstellen, da ich den Zweck nicht genau kannte/kenne. Der Code sollte lediglich das CSS und die Anordnung der Elemente zeigen (man muss ja auch nicht alles fertig servieren ;) ).

Außerdem ist <br /> in einer Liste völliger Unsinn und alles andere als Standardkonform :P

Aber danke, dass du der Meinung bist, ich könne das besser :mrgreen:
 
csstester schrieb:
#Björn, prinzipiell richtig, aber zeig den Leuten doch nicht wieder so eine div-Suppe, das kannst du doch wirklich besser..

machs lieber so
Code: 
<ul id="wrap">
  <li id="left"><a href="#">PSP</a></div>
  <li id="right"><a href="#">PC</a></div>
  <br class="clear" />
</ul>
da steckt schon mal Html Sinn hinter

gruß
csstester
Zum Vergrößern anklicken....
Nicht wirklich. Anstatt eine div-"Suppe", gibt es jetzt eben eine li-Suppe. Und Sinn steckt da auch nicht dahinter. Denn die HTML-Tags für Listen sind für Listen gedacht und nicht für die Positionierung von Elementen.

@BcF:
DANKE, funktioniert perfekt! :D
 
assmaje schrieb:
Nicht wirklich. Anstatt eine div-"Suppe", gibt es jetzt eben eine li-Suppe. Und Sinn steckt da auch nicht dahinter. Denn die HTML-Tags für Listen sind für Listen gedacht und nicht für die Positionierung von Elementen.

@BcF:
DANKE, funktioniert perfekt! :D
Zum Vergrößern anklicken....

ähh hallo, das was du uns serviert hast war ne navi mit 2 Links und da macht ne Liste großen Sinn.

Ja das <br /> macht nicht wirklich sinn in der Liste, ist aber nur ein leeres Tag zu clearen wie man sieht.
 
mal benenbei... ein <br /> macht nirgendwo sinn ^^ wenn überhaupt würde ein <br> irgendwo sinn machen denn in xHTML zeiten sollte das so langsam aber sicher aussterben ^^
 
Slibbo schrieb:
mal benenbei... ein <br /> macht nirgendwo sinn ^^ wenn überhaupt würde ein <br> irgendwo sinn machen denn in xHTML zeiten sollte das so langsam aber sicher aussterben ^^
Zum Vergrößern anklicken....

Wo bin ich denn nu gelandet?

Selbstverständlich macht ein <br /> sinn, nämmlich da wo explizit ein Umbruch erwünscht ist, z.B in einem <address> element.

Und wenn du schon XHtml ansprichst solltest du wissen das <br> ja nun veraltet ist und nur nicht mehr XHtml Standart entspricht
 
genau darum sage ich ja das ein <br /> eigentlich keinen sinn mehr macht... sondern nur <br> (WENN man den doctype entsprechend gestaltet...)

das kleine spielchen sollte doch jeder verstehen ^^ naja an gelegenheiten wo ein umbruch wirklich notwendig ist habe ich nun eben nicht gedacht aber zum glück sind diese ja auch nur eine ausnahme ^^

und der grund warum ich das gesagt habe ist, jeder der html lernt und weiß was ein br ist der verwendet es falsch, unteranderem PHP anfänger mit nl2br -.-'
 
csstester schrieb:
Selbstverständlich macht ein <br /> sinn, nämmlich da wo explizit ein Umbruch erwünscht ist, z.B in einem <address> element.
Zum Vergrößern anklicken....
Nun, tatsächlich kann man sich hier streiten.
Es gibt die einen, die sagen, <br> ist ein Tag, das dem Layout dient und damit nichts mehr im HTML-Code zu suchen hat (Trennung von Inhalt und Layout).
Und es gibt die anderen.

Ich sehe das auch so, dass <br> eigentlich eher ein "Layout-Tag" ist. Aber tatsächlich verwende ich das auch genau da, wo Du es jetzt auch platziert hast. Bei einer Adresse.

Gruß,
-Efchen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben