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

Kasten mit Schaltfläche im Kasten

ManuelLemke

ManuelLemke

Neues Mitglied
Ich will eine Schaltfläche oben rechts platzieren mit geringem Abstand nach rechts.
Dieselbe Schaltfläche soll aber beim verändern der Anordnung des Browserfensters nicht über einen bestimmten Abstand nach Links hinaus verschoben werden (weil da schon das Logo und Menu ist). Wie geht das?

Die Schaltfläche beginnt als <div> Element.

Habe als erstes etwas mit margin/ padding/ versucht. Das ursprüngliche Konzept ist in etwa
- rechts 44 Pixel "right:44px";
+ links Mindestenstabstand 1111 Pixel "min-left:1111px;".

Bisher gab es nur Möglichkeit einer Anordnung rechts oder links.

Also habe ich es versucht mit einem zweiten Kasten in dem Kasten. Aber Ergebnis war, der zweite Kasten hat sich mit dem umklammernden entweder nach links/ rechts -mit bewegt, obwohl die Maße des ersten Kastens definiert waren. - Erwartungsgemäß sollten sich die Elemente des zweiten Kastens (auch <Div> und mit Bild als Schaltfläche) innerhalb des ersten Kastens anordnen.

Seitenkonzept ist eine Mindestgröße (orientiert an A4-Format, druck-freundlich) und andererseits Ausrichtung an den Browser-Abmessungen. Die Schaltfläche soll sich daher rechts anordnen und mit dem Browserfenster rechts mitgehen, außer es werden 1111Pixel nach links überschritten, dann soll die Schaltfläche da stehenbleiben und beim Verkleinern unter dem Browserrand verschwinden.
 
Zuletzt bearbeitet:
Hallo,

leider ist deine Problembeschreibung nicht aussagekräftig. Was meinst du zum Beispiel mit

beim verändern der Anordnung des Browserfensters nicht über einen bestimmten Abstand nach Links hinaus verschoben werden
Zum Vergrößern anklicken....

Was soll passieren wenn das Browserfenster z. B. nur 800px breit ist? Soll dann seitlich gescrollt werden? Wie groß ist die Schaltfläche? Um was für eine Konstruktion handelt es sich bei der Schaltfläche?

Am besten wäre ein Link zur Seite mit deinen bisherigen Bemühungen. Wenn du noch keinen Webspace hast oder deine Adresse nicht nennen magst kannst du einen Freeware-Provider wie bplaced.net nutzen.

Gruss

MrMurphy
 
Es geht nur um HTML und Style-Definition für die Kästen.
Bildschirmgröße ist = 100%.
Schaltfläche ist ein Bild, nicht groß.
Was unter 800 Pixel ist kann ruhig verschwinden (Pech!).
Man kann hier leider keinen Screenshot einfügen.
Sollte reichen.

Das bedeutet ab 1111 Pixel verschwindet der Seiteninhalt mit der Schaltfläche unter dem rechten Fensterrand des Browsers. Der Link (mit Bild) soll diese Eigenschaften besitzen.
Also ein äußerer div-Kasten mit der mindest-Weite 1111/ Weite = 100%
welcher am linken Rand bündig angeordnet ist, soll darin ein Bild mit Link enthalten,
das ist (SOLL) rechts mit 11 Pixel Abstand angeordnet (WERDEN) und den Spielraum zwischen Mindestweite und 100% Weite ausnutzen.


MrMurphy schrieb:
Hallo,

Problembeschreibung aussagekräftig. Was meinst du zum Beispiel mit
beim verändern der Anordnung des Browserfensters nicht über einen bestimmten Abstand nach Links hinaus verschoben werden
...
Gruss

MrMurphy
Zum Vergrößern anklicken....

Wieso kann man hier keine Bildschirmfotos hochladen?
 
Zuletzt bearbeitet von einem Moderator:
Hallo,

ich sehe zur Zeit folgende Lösung für dein Problem:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Box anordnen</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
         width: 100%;
         height: 100%;
         padding: 0;
         border: 2px solid red;
         margin: 0;
      }
      body {
         width: 100%;
         height: 100%;
         padding: 0;
         border: 4px solid blue;
         margin: 0;
      }
      section {
         padding-left: 1111px;
         border: 2px solid gray;
      }
      div {
         background-color: green;
         width: 5rem;
         height: 2rem;
         border: 2px solid green;
         margin-left: auto;
         margin-right: 11px;
      }
   </style>
</head>
<body>
   <section>
      <div>
      </div>
   </section>
</body>
</html>

Das grüne div soll die Schaltfläche darstellen.

Gruss

MrMurphy
 
Perfekt. Probiere es gleich mit dem vollständigen Dokument aus. Danke!

Jibbet dochnoch eine viel eifachere Lösung - folgende_

Erster Kasten ist ein DIV
<div style="position:absolute;z-index:2;top:0px;left:0px;min-width:1111px;width:100%;box-sizing: border-box">

zweiter -innerer- Kasten ist ein Span
<span style="position:absolute;right:11px;top:0px;"><a href="..."><img width="59" height="90" src="Dateien/Icon.png"></a></span>

Und muss man natürlich abschließen mit
</div>
klar!
 
Zuletzt bearbeitet von einem Moderator:
Hallo,

deine vemeintliche Lösung ist weder einfacher und schon gar nicht sinnvoller. So besteht meine Lösung für die Anordnung der Elemente nur aus drei CSS Anweisungen, der Rest ist nur für das Aussehen, da man ohne Inhalt sonst nur einen weißen Bildschirm sehen würde:

Code: 
section {
   padding-left: 1111px;
}
div {
   margin-left: auto;
   margin-right: 11px;
}

Und "position: absolute;" habe ich bewußt nicht verwendet, da mir bewußt ist, was für zumeist unerwünschte Auswirkungen sie hat. Es ist schon seltsam das Anfänger von dieser CSS-Anweisung magisch angezogen werden.

Siehe zum Beispiel auch

http://www.mediaevent.de/tutorial/css-position-absolute-relative.html

Für uns Hilfegebende ist es eine der nervigsten Aufgaben Anfängern "position: absolute;" wieder auszutreiben.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben