|
|||
Buttons horizontal positionieren mit immer gleichem randabstand
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> 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; 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). |
Sponsored Links |
|
|||
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
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
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. |
|
|||
Zitat:
HTML-Code:
<div id="button1"></div> <div id="button2"></div> <div id="button3"></div> HTML-Code:
<button id="button1"> </button> Zitat:
Von den Links hast du noch nichts gelesen, mach das mal ist sehr erhellend.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
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 Geändert von mymaksimus (22.08.2013 um 17:18 Uhr) |
|
|||
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; } |
|
||||
Schritt 1: Tabelle rauslöschen
Schritt 2: Aufhören Div mit "Button-IDs" als Button zu bezeichnen SChritt 3: Profit.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |