margin nicht anklickbar machen
-
-
Margin anklickbar? Das wäre mir neu.
Ich kann mir das gerade nicht näher anschauen, aber der Abstand ist dann sicherlich kein margin, sondern vielleicht padding o.ä.
-
Die Abstände sind dort anklickbar.
-
Hallo
ZitatDie Abstände sind dort anklickbar.
Nein, nicht die Abstände, sondern das a-Element.
ZitatWie kann ich es hier erreichen, dass die Abstände links und rechts nicht anklickbar sind
Verwende HTML5 und füge das Bild in einen geeigneten Container ein, also einem figure-Element.
Bei CSS solltest du zudem darauf achten keine unsinnigen Angaben zu machen und nur CSS-Eigenschaften verwenden, deren Auswirkungen du auch kennst.
Du gibt dem ul-Element zum Beispiel eine Höhe von 32px, den darin enthaltenen li-Elementen aber eine Höhe von 52px.
Zum Layouten ist Flexbox zudem geeigneter als float.
Zitatohne andere Funktionalitäten zu verlieren?
Was verstehst du unter anderen Funktionalitäten?
Gruss
MrMurphy
-
Nein, nicht die Abstände, sondern das a-Element.
Die Abstände vom a-Element sind anklickbar.
Verwende HTML5 und füge das Bild in einen geeigneten Container ein, also einem figure-Element.
Von einem figure-Element habe ich noch nie gehört. Meinst Du damit div, span, p etc.?
Bei CSS solltest du zudem darauf achten keine unsinnigen Angaben zu machen und nur CSS-Eigenschaften verwenden, deren Auswirkungen du auch kennst.
Darum kümmere ich mich immer, sobald ich eine Sache fertig habe. Während ich noch experimentiere, kommt es natürlich auch mal zu unnötigen CSS-Eigenschaften.
Du gibt dem ul-Element zum Beispiel eine Höhe von 32px, den darin enthaltenen li-Elementen aber eine Höhe von 52px.
Um das Menü oben geht es mit in diesem Thread eigentlich nicht. Dennoch vielen Dank für den Hinweis.
Zum Layouten ist Flexbox zudem geeigneter als float.
Davon habe ich auch noch nie etwas gehört. Ein paar weitere Hinweise wären freundlich.
Was verstehst du unter anderen Funktionalitäten?
Beispielsweise soll das Bild mittig auf der Seite angezeigt werden. Das geht mit a-, div-, span-, ul- und li-Elementen nicht.
-
Hallo
Ich habe mal einen Beispiel-Quelltext erstellt:
HTML
Alles anzeigen<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Layout 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="http://theuser1992.de/Shortcut_Icon.ico"> <style> @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; min-width: 0; } html { font-family: sans-serif; font-size: 120%; line-height: 1.3; } body { width: 96%; margin: 1rem auto; } } /*Grafiken*/ @media all { figure { min-width: 0; max-width: 100%; margin: 1rem auto; } img { min-width: 0; display: block; max-width: 100%; border: 0; } } /*Navigation*/ @media all { nav { display: flex; flex-wrap: wrap; justify-content: flex-end; } nav a { background-color: #4D3B1D; color: #D2AF8C; font-size: 0.6rem; box-shadow: 0px 0px 0.7rem 0.2rem rgba(77, 59, 29, .45); padding: 0 0.5rem; border-width: 2px; border-style: solid; border-color: #A75E16; border-radius: 0.2rem; flex-grow: 0; flex-shrink: 0; flex-basis: auto; margin-top: 0.3rem; } nav a:nth-child(1) { } nav a:nth-child(1n+2) { border-top-left-radius: 2.5rem 1rem; border-bottom-left-radius: 2.5rem 1rem; margin-left: 0.5rem; } nav a:nth-child(1n+2):hover { transform: scale(1.1); } } /*Spezielle Einstellungen*/ @media all { body { background-color: rgb(214, 178, 143); background-image: url(http://theuser1992.de/Hintergrund.png); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; background-size: cover; background-clip: border-box; background-origin: padding-box; } figure { display: flex; justify-content: center; max-width: 80%; } img { box-shadow: 0 0 0.7rem 0.2rem rgba(77, 59, 29, .45); border-radius: 0.3rem; } } </style> </head> <body> <header> </header> <nav> <a href="#">sechstes</a> <a href="/Fotografien/GoT3">Game of Thrones: Staffel 3 (Blu-Ray)</a> <a href="/Fotografien">meine Fotografien</a> <a href="/">TheUser1992s Webseite</a> </nav> <main> <figure> <a href="07.html"> <img src="http://theuser1992.de/Fotografien/GoT3/06.jpg" alt="Beispielbild"> </a> </figure> </main> <footer> </footer> </body> </html>
ZitatDavon habe ich auch noch nie etwas gehört. Ein paar weitere Hinweise wären freundlich.
Suchmaschine: css flexbox
ZitatDie Abstände vom a-Element sind anklickbar.
Keine Ahnung wie ich dir das erklären soll: Das a-Element ist transparent (= unsichtbar) und geht über die gesamte Fensterbreite. Das Bild innerhalb des a-Elements ist 80% breit. Für die Verlinkung ist das a-Element zuständig. Das hat aber keinen Abstand.
Edit: Quelltext korrigiert
Gruss
MrMurphy
-
Aah, das ist so ein riesiger Quelltext. Da muss ich doch erst meine Einzelteile raus suchen, die ich brauche.
Edit: Eigentlich wollte ich all solche Dinge selbst raus finden und nicht meine komplette Seite neu aufgesetzt bekommen.
-
Hallo
Entschuldigung, dass ich dir einen Quelltext zur Verfügung stelle, den du zum Testen einfach direkt komplett übernehmen kannst.
Gruss
MrMurphy
-
Das ist natürlich nicht schlecht. Ich war nur erst mal baff.
Allerdings sieht Dein Quelltext im Ergebnis nicht mal ansatzweise so aus, wie meiner. Mittig ist das Bild auch nicht.
Da muss also einiges geändert und geschafft werden.
-
Hallo
ZitatMittig ist das Bild auch nicht.
Stimmt, habe ich korrigiert.
Gruss
MrMurphy
-
Das mit der maximalen Breite von 80 % scheint hier nicht so gut zu funktionieren.
Edit: Ich musste den Bildern einfach wieder max-width:100% zuweisen. Das hatte ich unbedacht entfernt.
Jetzt sind die Probleme, vor denen ich bei der Webseite stand, vorerst gelöst.Vielen Dank!
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!