Buttons horizontal positionieren mit immer gleichem randabstand

troneleck · #1 (**permalink**) 22.08.2013, 13:21

Hallo ich versuche grad HTML/CSS zu Lernen.

Ich habe mir einen DIV container erstellt in dem 3 weitere enthalten sind (buttons).

HTML-Code:

<div id="start">
                		
						         	<div id="button1"></div>
						         	<div id="button2"></div>
						         	<div id="button3"></div>	       
                		
                		
            </div>

Nun möchte ich diese buttons mittels css, horizontal anordnen.
Aber ich möchte sie nicht statisch anordnen, sondern bei verwendung von transform: scale, soll der abstand immer gleich bleiben.

Button--> mousezeiger ist auf dem button----> #button1:hover-->transform: scale (170,50).

Sobalt die scalierung ausgelöst wird sollen die anderen buttons auf einen abstand von 5px zueinander rutschen.

Code:

#button1
		{
			
			width: 150px;
			height: 40px;
			margin-top: 5px ;
			margin-left: 20px ;
			background: #562031;

Mein Problem ist das erstmal margin-top ignoriert wird. Nur bei position: absolute; wird es richtig angezeigt.

Bei margin-left ist es so das es ausgeführt wird.

Nun hab ich mir gedacht schreibst mal margin-left: 20px , auto; aber leider wird aus irgend einem grund der 2te button dann unter dem ersten angeordnet.

Frag: Wie kann ich objekte (DIV) horizontal anordnen mit automatischen, gleichbleibenden abstand nach größenveränderung eines der objekte (DIV).

mymaksimus · #2 (**permalink**) 22.08.2013, 15:50

ich bin gerade ein bisschen unschlüssig über dein ziel. Also du willst das der abstand der buttons grösser wird, je grösser der container wird oder wie?

explanator · #3 (**permalink**) 22.08.2013, 16:22

Du solltest dir mal anschauen welche Elemente es gibt:
https://developer.mozilla.org/de/docs/HTML/Element
oder
HTML-Elementreferenz - Webkompetenz

Weil dein Button ein Div ist. Es gibt auch Button als Element.

Zu deinem Abstandproblem ist zu sagen, dass es das collapsing margin Phänomen gibt.
Hier wird es beschrieben: Advanced CSS - Collapsing margins

troneleck · #4 (**permalink**) 22.08.2013, 16:25

nein ich möchte das der abstand zu den buttons gleich bleibt, auch wenn einer größer wird.

Zb sollen es immer 5px bleiben egal wie groß einer der buttons wird.

Ich weis nicht ob jemand das Rocketdock für windoof kennt...ich glaub die menüleiste vom Mac ist genauso....so möchte ich gerne meine menüleiste gestallten.

Man fährt mit em Mauszeiger über die elemente, die vergrößern sich und schieben die anderen etwas zur seite.

explanator · #5 (**permalink**) 22.08.2013, 16:33

Zitat:

Zitat von troneleck

nein ich möchte das der abstand zu den buttons gleich bleibt, auch wenn einer größer wird.

Noch mal du hast keine Buttons, das sind DIV-Elemente.

HTML-Code:

<div id="button1"></div>
<div id="button2"></div>
<div id="button3"></div>

Buttons sehen so aus

HTML-Code:

<button id="button1"> </button>

Zitat:

Ich weis nicht ob jemand das Rocketdock für windoof kennt...ich glaub die menüleiste vom Mac ist genauso....so möchte ich gerne meine menüleiste gestallten.

Man fährt mit em Mauszeiger über die elemente, die vergrößern sich und schieben die anderen etwas zur seite.

Davon bist du noch weit entfernt. Lerne doch erst mal die Grundlagen vernünftig anzuwenden.
Von den Links hast du noch nichts gelesen, mach das mal ist sehr erhellend.

mymaksimus · #6 (**permalink**) 22.08.2013, 16:59

Ich bastel dir mal so einen code. Ich verstehe das problem einfach nicht ganz... aber naja warte kurz

So würde es funktionieren. Ist zwar noch nicht sehr gut zeigt aber das prinzip... sollte dir reichen

troneleck · #7 (**permalink**) 22.08.2013, 17:08

hier mal so wie es sein soll nur möchte ich es horizontal mit abständen zwischen den buttons.

HTML-Code:

<!DOCTYPE html>
<html>

<head>
    <title>test</title>

    <meta charset="ISO-8859-1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">


    <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>
    <table align="center">
        <tr>
            <td>
                <div id="start">
                    <div id="button1"></div>
                    <div id="button2"></div>
                    <div id="button3"></div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

und die css

Code:

body
{
  background-position: top;
  background-position: center;
  background: #000000;
}

#start
{
    width: 960px;
    height: 960px;
    background: #808080;
    box-shadow: 0px 0px 30px #e3e3e3;

}



#button1
{
    width: 150px;
    height: 50px;
    margin-left: 10px;
    background: #0000FF;


}
    #button1:hover
    {
        width: 200px;
        height: 100px;
    }

#button2
{
    width: 150px;
    height: 50px;
    margin-left: 10px;
    background: #000063;


}
     #button2:hover
    {
        width: 200px;
        height: 100px;
    }
#button3
{
    width: 150px;
    height: 50px;
    margin-left: 10px;
    background: #00004F;


}
    #button3:hover
    {
        width: 200px;
        height: 100px;
    }

troneleck · #8 (**permalink**) 22.08.2013, 17:20

@ mymaksimus
genau so soll es sein!

Dann werd ich mal versuchen das zu verstehen.

Thielo · #9 (**permalink**) 22.08.2013, 17:21

Schritt 1: Tabelle rauslöschen
Schritt 2: Aufhören Div mit "Button-IDs" als Button zu bezeichnen

SChritt 3: Profit.

troneleck · #10 (**permalink**) 22.08.2013, 17:28

VIELEN DANK!!!

float: left; ist die lösung!!

Danke mymaksimus deine Vorlage hatt geholfen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
wie kann ich ein Wrapper-Div mit variabler Breite immer horizontal positionieren?	sharkbait	CSS	6	08.08.2011 15:32
Buttons richtig positionieren	joergi	CSS	1	28.06.2011 02:17
Problem mit dem Menü [erledigt]	Julian	CSS	2	15.01.2006 23:27
Problem: 3 Div's horizontal positionieren	Krieju	CSS	2	07.05.2004 17:00