Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Entwickler>Buttons zentieren

Buttons zentieren

Big Boy16.01.0916:29
wie kann die vier Buttons so wie sie sind zentrieren?
„Lass mich gewähren und ich werde mich meinem Schicksal fügen. Sperre mich ein und ich werde unvergesslich. Töte mich und ich werde unstreblich.“
0

Kommentare

der schneyra
der schneyra16.01.0916:32
Was soll das sein? HTML?
„BAM!“
0
Big Boy16.01.0916:44
sorry. es ist css
„Lass mich gewähren und ich werde mich meinem Schicksal fügen. Sperre mich ein und ich werde unvergesslich. Töte mich und ich werde unstreblich.“
0
sierkb16.01.0916:54
Wenn das in HTML/XHTML geschehen soll, dann mit CSS:
Gib (den) betreffenden Element(en) einfach einen linken bzw. rechten Rand und stelle die dortige Größenangabe auf auto. Dann wird dieses Element/werden diese Elemente automatisch zentriert, weil der Parser des Browsers sowohl den linken als auch den rechten Rand automatisch berechnet und in der Folge das betreffende Element automatisch mittig zentriert.

Also z.B.: img { margin-left: auto; margin-right: auto }. Gleiches möglich mit jedem anderen in Frage kommenden Element wie z.B. hier das input-Element oder das button-Element.
Wenn drumherum noch ein weiteres Block-Element ist, zum Beispiel ein div-Element, so könntest Du alternativ auch diesem Blockelement (z.B. ein div-Element oder ein p-Element) sagen: div { text-align: center }. Damit dürfte dann alles zentriert werden, was sich direkt innerhalb dieses Block-Elements befindet.

Galanter finde ich den ersten Ansatz, weil er vom eigentlich zu zentrierenden Element ausgeht und so manches Mal ein umgebendes Block-Element im Zweifel überflüssig macht, was wiederum schlanker HTML-Code bedeutet.

Kommt immer auf den Anwendungsfall drauf an, welche Lösung bevorzugt wird. Wo möglich und sinnvoll, präferiere ich den zuerst genannten Ansatz.
0
Jaguar1
Jaguar116.01.0917:01
Manche bekommen es sogar hin, ihre Signatur zu verhunzen! Aber Hauptsache...
„Die Menschen sind nicht immer was sie scheinen, aber selten etwas besseres.“
0
sierkb16.01.0917:06
Ergänzung:

Entweder machst Du das für jedes der vier Elemente und gibst jedem ein margin: auto mit, oder Du packst alle 4 Elemente in ein p-Element oder div-Element (je nachdem, was semantisch im HTML-Code sinnvoller ist) und verpasst dann diesem einen Konstrukt ein margin-right: auto, margin-left: auto. Ausprobieren.

Tipp: Probiere einfach mal ein wenig herum bzw. versuche Deinen Denkansatz immer von den betreffenden Elementen aus zu sehen und umzusetzen bzw. so wenig wie möglich HTML dafür zu nehmen (immer soviel, wie irgend nötig) und soviel wie möglich, was reine Optik/Präsentation angeht, per CSS auszudrücken. HTML/XHTML für die semantische Struktur des Dokuments, CSS fürs Aussehen und die Positionierung der einzelnen Elemente. HTML-Elemente ohne semantische Aussage, die lediglich als (bedeutungsleere) Hilfselemente verwendet werden, möglichst gering halten bzw. vermeiden.

So. Bin dann mal weg. Schönes Wochenende und viel Erfolg.
0
Big Boy17.01.0910:55
schneyra und sierkb: besten dank für eure hilfe. es hat geklappt, schneyra hat mir den code gezeigt. nun habe ich aber ein anderes problem. die buttons sind nicht gleich lang. Wieso?
„Lass mich gewähren und ich werde mich meinem Schicksal fügen. Sperre mich ein und ich werde unvergesslich. Töte mich und ich werde unstreblich.“
0
Big Boy17.01.0910:55
hier der code:
<style type="text/css">
@page { size:landscape; }
</style>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Experiment</title>
<style type="text/css">
#navi {
text-align: center;
}

#navi a {
color:#000;
max-width:118px;
min-width:118px;
width:118px;
padding: 10px;
margin:0;
font-size:10px;
font-family:"Trebuchet MS", Arial, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
background-image:url(images/bg_nonactive.png);
}
#navi a:hover {
color:#fff;
background-color:#000;
background-image:url(images/bg_active.png);
}

br.clr{
clear:left;
width:1px;
overflow:hidden
}
</style>
</head>
<body>
<body background="images/bg_site.png">
<div align="center">
<h1><img src="images/header.jpg" width="918" height="236" alt="swissscore.com"></h1>
<div id="navi">
<a href="#"><img src="images/home_button.png" alt="home" width="22" height="20" align="absmiddle"></a><a href="#">News & Infos</a><a href="#">Statistiken</a><a href="#">Forum</a><a href="#">Managerbüro</a><a href="#">Web-Mail</a><a href="#">Demozugang</a>
<div><br class="clr"/></div>
</div>
</div>
</body>
</html>
„Lass mich gewähren und ich werde mich meinem Schicksal fügen. Sperre mich ein und ich werde unvergesslich. Töte mich und ich werde unstreblich.“
0
iThinkDifferent17.01.0911:05
Du musst dein navi-div iin mehrere divs unterteilen, denn man kann für Links keine Breite angeben
also dann so:
<div id="navi"><div class="subnavi"><a href="">Element1</a></div><div class="subnavi"><a href="">Element2</a></div></div>
Und dann die Eigenschaften für subnavi:
width:118px;
float:left;
und so weiter...
0
sierkb17.01.0911:30
iThinkDifferent
Du musst dein navi-div iin mehrere divs unterteilen,

Nein, musst Du nicht...
denn man kann für Links keine Breite angeben

Doch, kann man.
Indem man sie (a) oder die drinliegenden Bilder (img) nämlich von Inline-Elementen, die dem normalen Element-Fluss unterliegen, zu Block-Elementen macht und sie dann per float nebeneinandersetzt. Also z.B.

div#navi a {display: block;}
oder auch: div#navi img {display: block}


GGf. dann floaten.

0
Big Boy17.01.0911:32
und wo füge ich sie ein????
„Lass mich gewähren und ich werde mich meinem Schicksal fügen. Sperre mich ein und ich werde unvergesslich. Töte mich und ich werde unstreblich.“
0
Big Boy17.01.0911:41
es funktioniert nicht jungs .....
„Lass mich gewähren und ich werde mich meinem Schicksal fügen. Sperre mich ein und ich werde unvergesslich. Töte mich und ich werde unstreblich.“
0
Big Boy17.01.0911:52
wenn ich sie floate und display:blocke mache, dann verlieren sie die zentrierung.
ich blick nicht mehr durch......

<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Experiment</title>
<style type="text/css">
#navi {
text-align: center;
}

#navi a {
color:#000;
display:block;
float:left;
width:118px;
padding: 10px 0;
margin:0;
font-size:10px;
font-family:"Trebuchet MS", Arial, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
background-image:url(images/bg_nonactive.png);
}
#navi a:hover {
color:#fff;
background-color:#000;
background-image:url(images/bg_active.png);
}

br.clr{
clear:left;
width:1px;
overflow:hidden
}
</style>
</head>
„Lass mich gewähren und ich werde mich meinem Schicksal fügen. Sperre mich ein und ich werde unvergesslich. Töte mich und ich werde unstreblich.“
0
sierkb17.01.0912:04
Big Boy
wenn ich sie floate und display:blocke mache, dann verlieren sie die zentrierung.
ich blick nicht mehr durch...

Weil sich wahrscheinlich der float-Effekt und die Zentrierung gegenseitig aufheben bzw. die eine Regel die andere überschreibt. Entweder nochmal überdenken, oder die eine Regel, welche obsiegen soll, mit einem Leerzeichen und !important als wichtiger deklarieren.

Desweiteren:

Wenn ich sowas wie das hier

br.clr{
clear:left;
width:1px;
overflow:hidden
}

sehe, dann bedeutet es mir nur, dass da jemand nicht richtig seine gefloateten Elemente sauber vorher und an der richtigen Stelle gecleart hat. Normalerweise braucht man so ein (völlig überflüssiges) Hilfskonstrukt nicht, wenn man sauber gedacht und gearbeitet hat, denn das nächste Element, welches unterhalb der gefloateten Elemente kommt, das wird (ganz logisch) gecleart. Das ist in häufigen Fällen zum Beispiel irgend ein Blockelement (p oder div), z.B. als Footer. Auch, wenn es häufig als Empfehlung zu lesen ist: es ist meistens nur dann notwendig, wenn man unsauber gearbeitet hat und möglichst zu vermeiden bzw. es sollte Anlass sein, seinen Code nochmal zu überarbeiten und zu überdenken...

Merke: Jedes float bitte rechtzeitig und an geeigneter Stelle frühestmöglich wieder mit einem clear bereinigen. Ansonsten stellen sich irgendwann Seiteneffekte ein, und irgendwas haut nicht hin, und man weiß überhaupt nicht mehr, was die Ursache dafür war und hilft sich dann rettenderweise mit so einem inhaltlich völlig nichtssagenden und deshalb überflüssigen Hilfs-break oder Hilfs-div, welches dann clearen soll.

0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.