Wie kann ich mit CSS die Position meines Menüs ändern?

Wie auf den Bildern zu sehen, habe ich zwei Probleme. Das Menü befindet sich am obersten Bildschirmrand - soll aber eigentlich am unteren Rand des schwarzweiß-banners positioniert werden. Des weiteren bekomme ich die weiße Box in der die Navigationspunkte sitzen nicht kleiner, sodass die Divider Striche auch noch zu hoch sitzen. Momentan ist das menü auch so eingestellt, dass es fest oben sitzt bis man runterscrollt und es am oberen bildschirmrand folgt. das kann auch gern so bleiben, mit ausnahme dass es eben erst ab der position am unteren bannerrand folgen soll. hoffe ist irgendwie klar was ich meine.

so ist es momentan - (programmieren, HTML, CSS)

so hätte ich es gern in etwa - (programmieren, HTML, CSS)

3 Antworten

heilwigkenner

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

29.04.2015, 08:42

Einfach das Menue im Markup unter das Bild schreiben. Für die Divider einfach die Höhe des <nav>-Elements verringern.

hunterbreexdy

Fragesteller

02.05.2015, 15:02

habe das problem leider immernoch mit den dividern. die box größe in der das menü zentral sitzt ist perfekt so, aber die striche kleben immernoch am oberen rand. kriege sie nicht zwischen die worte zentriert.

dermick74

29.04.2015, 01:47

Hallo,

bevor ich mir hier einen wund schreibe.....

Öffne Deine Seite mit Firefox, istalliere Dir vorher Firebug.

Nun kannst Du mit firebug Deine Seite durchgehen und schauen was Du wo und wie ändern musst

hunterbreexdy

Fragesteller

29.04.2015, 01:58

habe ich installiert. jetzt sehe ich zwar markiert welche stellen die "problemzonen" sind, aber ich weiß nicht recht wie ich das ändern soll?

Steffile

29.04.2015, 08:39

Die position des Muenues musst du im HTML aendern.

Fuer die Divider zwischen den Navigationspunkten mit line-height und/oder padding von den links < a >rumprobieren.

Ich habe ein reiner Parallax-Effekt mittels CSS der auch genauso funktioniert wie er soll. Hierbei handelt es sich um ein einziges DIV mit Hintergrundbild:

<div id="h123_3" class="container-fluid parallax" style="height: 40vh; background-image: url(/bilder/bild1.jpg);"><a href="#h123_3" class="imageOpener btn btn-light btn-sm">Vergrößern</a></div>

Das CSS:

.parallax {
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0px 0px 30px #444;
  position: relative;
  transition: all 0.5s ease;
}

Einzigstes Problem: Durch background attachment: fixed wird das Bild ja relativ zum Viewport, also an der oberste Bildkante, fixiert. Gibt es ein Trick/Workaround in dem ich es schaffe, dass background-position: bottom trotzdem funktioniert ohne den Parallax-Effekt (durch fixed) zu verlieren? Auch JS würde ich gerne weitgehenst verzichten.

Edit: Hab mich etwas falsch ausgedrückt. Ja background-position funktioniert. Nur das Parallax-DIV sitzt beim Laden der Seite am oberen Bildschirmrand. Dadurch wird trotzdem nur der größteil obere Bildausschnitt angezeigt.

...zur Frage

CSS Problem mit Firefox?

Ich will gerade ein kleines CSS-only Dropdown-Menü mittels der Pseudoklasse :focus realisieren. Das funktioniert in Chrome, Edge und Safari super, nur Firefox schießt hier quer und die Links lassen sich nicht anklicken. Meine Vermutung ist, dass es bei Firefox ein Timing-Problem gibt und – vereinfacht gesagt – blur vor click kommt und click ins leere läuft, da der Link dann unsichtbar ist.

Hier ein ganz einfacher Testcase:

HTML

<nav>
 <span class="menu" tabindex="-1">
  Menü aufrufen
  <ul>
   <li><a href="https://www.gutefrage.net/" target="_blank">Gutefrage</a></li>
   <li><a href="https://www.google.com/" target="_blank">Google</a></li>
  </ul>
 </span>
</nav>

CSS

.menu {
 position: relative;
 border: 1px solid silver;
 border-radius: 5px;
 padding: 4px 8px;
}

.menu:focus {
 background-color: coral;
}

.menu ul {
 display: none;
}

.menu:focus ul {
 position: absolute;
 display: block;
}

Link

https://jsfiddle.net/Babelfisch/bck65qeo/6/

Hat jemand eine Idee, wie ich Firefox hier dazu bringen kann, sich wie alle anderen Browser zu verhalten? Ich bin hier gerade mit meinem Latein am Ende, will das ganze aber ungern begraben oder unnötig Javascript dafür nutzen.

...zur Frage

Bei "scroll down" Menü animieren nur mit CSS möglich?

Ist es möglich rein in CSS ein oberes Menü zu animieren, wenn man nach unten scrollt?

Ich habe mit:

position: sticky;
top: 0;

zwar erreicht, dass das obere Menü erst etwas mit nach oben rutscht und dann am oberen Rand stehen bleibt.

Ich würde jedoch gern die Schriftgröße und die Lage in der Position

top: 0;

verändern und animieren. Gibt es da eine Möglichkeit nur in CSS?

...zur Frage

Wordpress - Weiterleitung wenn man bereits eingeloggt ist?

Hi Com,

ich brauch da mal nen technischen Rat: Ich möchte, dass ein User, der bereits eingeloggt ist, auf eine bestimmte Seite weitergeleitet wird. Er ist eingeloggt, klickt trotzdem auf Log-In im Menü und gelangt somit automatisch (als Weiterleitung) in den internen Bereich.

Wie kann ich das managen?

Lieben Gruß und danke für die Hilfe!

...zur Frage

Werbebalken am unteren Bildschirmrand des Fernsehers...

Ich hatte in den letzten Tagen jedesmal einen Werbebalken am unteren Rand des Fernsehers. Dieser stammt vom Teletext und taucht jedesmal auf sobald ich den Fernseher einschalte, obwohl ich garnicht im Teletext drin war oder bin. Sobald ich das Menü aufrufe oder irgendetwas anderes verändere verschwindet der Balken, taucht aber nach ca. 5 Sekunden wieder auf. Kann mir jemand sagen wie ich den ganz wegbekomme? Falls es hilft, ich habe einen Toshiba Fernseher.

...zur Frage

Kann ich als Webentwickler?

Hallo Leute ich würde mich gerne zum Webentwickler fortbilden und ich habe fragen ob ich so auch gute Möglichkeiten habe so einen Nebenjob als Webentwickler starten kann

...zur Frage

Kann man ein Shopify Theme kopieren?

Hallo Leute,

ich wollte fragen, ob es möglich ist ein Shopify Theme von einer anderen Website für meinen eigenen Store zu verwenden?

Es ist ein Custom Theme wie z.B. das hier :https://seventhstores.com/

...zur Frage

Wie kann man ein festes Bild über einem div oder header in css anzeigen lassen ohne, dass es sich in diesem Container befindet?

Hallo,

ich bin aktuell dabei meine eigene kleine Website mit HTML und CSS zu gestalten und bin auf ein Problem gestoßen. Ich möchte mein Logo über einem Header oder Div anzeigen wie es unten auf dem Bild auch gezeigt ist. Ich habe versucht das Bild in den Container zu verschieben und dann versucht es mit den Display Typen flex und grid zu positionieren. Leider wird entweder das Bild an eine falsche stelle verschoben oder meine Links werden falsch positioniert (Siehe Bild 2). Hat jemand eventuell eine Lösung wie ich das mache ohne das Bild in den Container zu verschieben oder das Bild obwohl es in dem Container ist statisch zu positionieren, ohne dass es von den Positionen der Links beeinflusst wird.

...zur Frage

Wieso ändern sich die Position der Elemente am Handy?

Hey Leute,

ich habe ein kleines Preoblem und zwar die Positionen der Elemente im Android Studio enspricht nicht der am Handy also am Handy werden sie komplett anders angeordernt und nicht wie ich sie im Android Studio positioniert hatte.

Z.B. der Button sollte oben sein und nicht unten!

Hat jemand vielleicht eine Idee voran es liegen könnte?

Danke im Voraus

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="158dp"
        android:layout_marginBottom="274dp"
        android:text="@string/button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>



---------------------------manifest------------------
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.test">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Test">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>


-----------------gradle-------------------------
plugins {
    id 'com.android.application'
}

android {
    compileSdk 31

    defaultConfig {
        applicationId "com.example.test"
        minSdk 21
        targetSdk 31
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {

    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.android.material:material:1.3.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
}

...zur Frage

Tags / Schlagwort "Links" bei Wordpress entfernen/abschalten?

Kann ich Links von Schlagworten / Tags irgendwie per CSS oder ähnlichem deaktieren? Ich nutze ein Plugin wo die Schlagworte als Vorschau genutzt werden, aber die haben leere Links drauf URL/#.

Sieht nich nur doof aus, ist auch irreführend! Kann ich Tag Links per CSS deaktivieren? Oder geht das nur im Theme? Wenn ja wie genau? Gibts ggf. nen Plugin womit ich das alternativ regeln kann?

Danke im Vorraus

...zur Frage

Kann man bei seiner Strato Webseite eine Suchfunktion (Suchleiste) einfügen?

Die Frage kommt von einem Kollegen. Dieser möchte dort gerne eine haben. Geht sowas? Oder muss er ein bestimmtes Paket erwerben?

...zur Frage

Wie kann ich bei WordPress Themes die Farbe ändern?

Hallo, ich baue gerade gerade mithilfe von WordPress eine Webseite auf. Ein Theme, dass mir gefällt hab ich, aber aus irgendeinen Grund kann ich die Farbe nicht ändern. Ich hab es mit Plugins, mithilfe der man das CSS verändern kann versucht, aber das hat nicht geklappt. Gibt es irgendein Plugin mit dem man ein Theme dazu bringen oder zwingen kann die Farbe zu ändern?

...zur Frage

Wordpress-Theme - Sidebar entfernen

Hallo ihr Lieben, Ich habe leider ueberhaupt keine Ahnung von CSS und Co, aber vielleicht koennt ihr mir ja weiterhelfen. Und zwar moechte ich fuer meinen Blog gerne folgendes Theme verwenden:

https://selademo.wordpress.com/blog/

Allerdings wuerde ich gerne die rechte Sidebar komplett verschwinden lassen, was leider ueber die Anpassungsmoeglichkeiten, die gegeben sind, nicht funktioniert (dabei bleiben immer search, meta, categories etc. bestehen). Habt ihr vielleicht eine Idee, wie man das retten koennte - am besten auf einfach? :D

Hier der Link zum zip-Download: http : // design311 . com / wpthemes / theme / sela

Viele Gruesse

...zur Frage

Wordpress Elementor Problem mit Texteditor?

Hallo,

Ich erstelle zurzeit mit Wordpress und Elementor eine Webseite.

Jedoch habe ich das Problem, dass mir die Textinhalte auf der Mobilgeräteansicht meiner Webseite fehlerhaft angezeigt werden (siehe Fotos).

Hat Ihr eine Idee, wie man das Problem lösen kann?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen