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

Frage Elemente passen sich nicht an Inhalt an etc.

Cosimoir

Cosimoir

Neues Mitglied
Hallo,
Ich habe gleich mit mehreren Problemen zu kämpfen die sich, zumindest von meiner Seite aus, einfach nicht lösen lassen (bin eher noch unsicher im Umgang mit HTML und CSS)
Zum einen passen sich Elemente nicht richtig an den Inhalt an und nehmen beliebige Größen an. Der Body passt sich egal was ich mache nur an die Navigation an, ebenso die liegt <html> als Fläche ebenso über der Navigation, das main feld breitet sich auch ohne eine Höhe zu haben unter der navi über die Seite.
Weiteren Inhalt nach dem Container mit den Thumbnails zu platzieren ist auch nicht möglich, dieser ordnet sich dann wieder am Oberen Rand des containers an.
Ich habe schon mitbekommen, dass das vermutlich etwas mit dem <clear> tag zu tun hat, da ich Elemente habe die gefloated sind, allerdings scheine ich das immer falsch einzusetzen, oder es liegt an etwas anderem.

Ein weiteres Problem ist auch, dass ich gerne über jedem Bild ein Textfeld platzieren würde, jedoch erstreckt sich die h1 über die ganze Breite, während sich der Text immer zwischen dem ersten und zweiten Bild anordnet. Ich schaffe es einfach nicht, den text auf das zugehörige Bild zu beschränken. Vermute, dass ich eventuell die Elemente falsch angesprochen habe oder so

Bin für jede Hilfe dankbar (:

https://jsfiddle.net/qmjLsejp/3/#&togetherjs=r0n8T2Nzti
 
Werbung:
Hab mir die Zeit genommen, den geschilderten Problemen auf den Grund zu gehen, und das gewünschte Seitenkonzept auf Vordermann zu bringen.
  1. HTML in <main></main> restrukturiert, um die Texte über den Bildern per CSS exakt positionieren zu können.
  2. <footer></footer> hinzugefügt.
  3. Im CSS die verstreuten Selektoren zur besseren Übersicht/Orientierung/Wartung in der Abfolge der HTML-Elemente gruppiert/sortiert.
  4. Schlußendlich das CSS fehlerbereinigt und auf das neue Markup abgestimmt.
https://jsfiddle.net/spicelab/4psLxqmv/
 
Zuletzt bearbeitet:
Spicelab schrieb:
Hab mir die Zeit genommen, den geschilderten Problemen auf den Grund zu gehen, und das gewünschte Seitenkonzept auf Vordermann zu bringen.
  1. HTML in <main></main> restrukturiert, um die Texte über den Bildern per CSS exakt positionieren zu können.
  2. <footer></footer> hinzugefügt.
  3. Im CSS die verstreuten Selektoren zur besseren Übersicht/Orientierung/Wartung in der Abfolge der HTML-Elemente gruppiert/sortiert.
  4. Schlußendlich das CSS fehlerbereinigt und auf das neue Markup abgestimmt.
https://jsfiddle.net/spicelab/4psLxqmv/
Zum Vergrößern anklicken....

Erstmal vielen, vielen Dank! Nicht nur, dass die Probleme gelöst sind, das Dokument ist auch jetzt viel schöner hehe.
Dass das Ansprechen der einzelnen Bilder erst durch den main möglich war leuchtet mir zwar nicht ganz ein, werds mir aber merken. Dachte nämlich immer footer und main würden keine bestimmte Funktion erfüllen außer semantische Einteilung.
Ich sehe du hast auch list items gemacht, wenns dich nicht stören würde, wärs toll wenn du mir erklären könntest wieso man das so macht, auch wenn das alles schon überaus hilfreich war! Wie du das clearfix gemacht hast ist mir auch nicht ganz klar, die Standardlösungen die ich so gesehen hab waren nämlich immer etwas anders und vereinfacht, haben ja auch nichts gebracht.
Nochmal Dankeschön für die großartige Hilfe (:
 
Werbung:
Cosimoir schrieb:
Dass das Ansprechen der einzelnen Bilder erst durch den main möglich war leuchtet mir zwar nicht ganz ein, werds mir aber merken.
Zum Vergrößern anklicken....
Ich habe lediglich die Selektoren etwas mehr spezifiziert :cool:
Cosimoir schrieb:
Ich sehe du hast auch list items gemacht, wenns dich nicht stören würde, wärs toll wenn du mir erklären könntest wieso man das so macht,
Zum Vergrößern anklicken....
Die Listenstruktur habe ich genutzt, um den Text über dem Bild sauber positionieren zu können. Mit Deiner HTML- u. CSS-Vorlage war das so leider nicht möglich.
Cosimoir schrieb:
Wie du das clearfix gemacht hast ist mir auch nicht ganz klar, die Standardlösungen die ich so gesehen hab waren nämlich immer etwas anders
Zum Vergrößern anklicken....
Es gibt da unterschiedliche Methoden: http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/
 
Werbung:
Spicelab schrieb:
Welche schmäleren Einzüge meinst Du?
Zum Vergrößern anklicken....
bei dir sind anscheinend die Einzüge um die Hälfte kleiner als mein standard Tabulator, was viel angenehmer aussieht. Ist vielleicht ein Voreinstellungsding oder so?
Aber wie dem auch sei, würdest du mir vielleicht nochmal zu Hilfe stehen? meine Bilder füllen nicht die volle Breite aus seit dem ich Innenabstände drin habe, muss irgendein total dummer Anfängerfehler sein, denn das Problem hatte ich früher schon und konnte es damals auch iirgendwie leicht lösen, aber jetzt keine Chance O:
Vielleicht siehst du auch eine Lösung, wie es möglich wäre die Transparenz über den Bildern zusammen mit dem mittigen Text zu hovern. Ursprünglich hatte ich ja den transparenten Hintergrund in der h1 drin, aber das funktionierte nur solange bis ich den Text nach unten auf die vertikale Mitte gesetzt hab, weil sich dann die gesamte transparente Fläche mit nach unten geschoben hat.
Und immer wenn ich denke, ich kann einfach ein weiteres Element drüber legen um so ein Problem zu lösen, geht das irgendwie nicht weil ich dann glaub ich den Überblick über die richtigen Selektoren verliere

Sorrey für die Belästigung, in Anbetracht dessen wie das sonst so mit den Neulingen abgeht schätze ich mich glücklich für die vorangegangene nette Hilfe ^^

hier ist der Problembär https://jsfiddle.net/#&togetherjs=z48xk5t8K1
 
Zuletzt bearbeitet:
Werbung:
Ohh i see, das ist vielleicht weil ich vergessen hab den Code mit "Run" einzuschalten

Kann's erst morgen nochmal versuchen, also bitte nicht wegrennen in der Zwischenzeit ha-ha
 
Werbung:
Ergänzungen und Änderungen:
CSS: 
main ul li a img {
  display:block;
  width:100%;
  padding:10px; /* Innenabstand */
  box-sizing:border-box /* Boxmodell-Konflikt (width + padding) vermeiden */
}
/* auskommentiert = entfällt */
/*main li {
   margin: 10px;
}*/
https://jsfiddle.net/spicelab/v31sfw7m/
 
uh aha ich glaub ich versteh schon was passiert ist, dass das äußerste Element deswegen auf die nächste Zeile rückt weil durch einen zusätzlichen margin oder padding der Prozentwert in der Zeile manipuliert wird, sodass es insgesamt dann mehr als 100% sind (wtf). Also border-box rechnet das padding in die Prozente rein, sodass die gleich bleiben nach meinem Verständnis
super dass es funktioniert, danke!

Was ich aber auch nicht hinbekomme ist, dass wenn man über ein Bild hovert, dass sich die transparente Fläche über das ganze Bild legt während die Bildbeschreibung horizontal und vertikal zentriert ist? Mein Problem ist nämlich, dass ich die span nicht unabhängig von der h1 bearbeiten kann, deswegen rutscht sie immer mit dem Text nach unten wenn dieser nicht am oberen Rand steht D:
ich wünscht es gäbe angesichts der vielen views auf diesem Eintrag mehr Leute die sich einmischen, schon langsam wirds unangenehm nach so viel Hilfe von dir als Einzelperson zu fragen mimimimi wo sind alle

https://jsfiddle.net/v31sfw7m/4/#&togetherjs=p22oyL9fhs
 
Werbung:
Ich wende den transparenten Hintergrund und die Sichtbarkeit direkt auf <span> an :cool:
CSS: 
main ul li a .outer {
  position:absolute;
  top: 0;
  width:100%;
  text-align:center;
  height:100%;
  background:rgba(250, 250, 250, 0.6)
}
/* auskommentiert = entfällt */
/*.outer h1 {
  background: rgba(250, 250, 250, 0.6);
  height: 100%;
}*/

/* hover text */
.outer {
  visibility:hidden
}
li:hover .outer {
  visibility:visible
}
https://jsfiddle.net/spicelab/0qa4zm4a/
 
Spicelab schrieb:
Ich wende den transparenten Hintergrund und die Sichtbarkeit direkt auf <span> an
Zum Vergrößern anklicken....

Was weder von der Semantik noch vom Styling her gut ist. Das Image gehört in ein Figure und anstatt des Span sollte ein Figcaption verwendet werden.

position: absolute ist selten eine gute Lösung. Um das Figcaption über das Bild zu schieben, würde es auch ein negatives margin tun.
 
@Tronjer Das mag alles zutreffen. Ich habe mich aber an den gegebenen Vorgaben orientiert, und die Problemstellung dementsprechend gelöst, ohne HTML und CSS von Grund auf umzustellen.

Dennoch danke für Deine Hinweise.
 
Werbung:
Spicelab schrieb:
Ich wende den transparenten Hintergrund und die Sichtbarkeit direkt auf <span> an :cool:
Zum Vergrößern anklicken....
ah ich hab die h1 damals immer versteckt gehabt deswegen gings nicht glaub ich. man man dankeschön

aber mit der border-box bin ich nicht ganz zufrieden, da sie kein seitliches margin zulässt, was notwendig wäre damit die transparente Fläche nicht über den eigentlichen Bildrand hinausreicht wenn man padding verwendet
Kannst du mir vielleicht nen Link dazu empfehlen oder so?
 
Vorschlag:
CSS: 
main ul li {
  float:left;
  position:relative;
  border:solid 10px rgba(250,250,250,1); /* mit Option für transparenten Rahmen */
  box-sizing:border-box
}
main ul li a img {
   display:block;
   width:100%;
   /*padding:10px;*/ /* entfällt */
   /*box-sizing:border-box*/ /* entfällt */
}

main a:hover .outer {
  visibility:visible
}
https://jsfiddle.net/spicelab/1ndubev4/
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben