benötige Hilfe - Rahmen um Bilder / CSS bearbeiten

usa_björn

Hallo Leute,

bitte schaut euch mein Blog an, ich brauch dringend Hilfe! http://www.big-bt.de

Ich möchte gern um die Bilder ein weißen Rahmen (ca5px) und dann nochmal einen schwarzen Rahmen (ca.1px). Finde leider nicht die richte css und auch nicht die richtige stelle die ich editieren muß. Das alles bitte auch für Thumbs.

Danke für eure Hilfe!

Gruß
Björn

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Iunius

Hi,

Du hast in der CSS: wp-content/plugins/mygallery/css/mygallery.css
folgende Angaben/Varianten um einen passenden Rahmen zu definieren, oder auch ein Hintergrundbild.

HTML

.mypicsgalleryentry a img {
    border: 2px solid  #ffffff;
    padding: 1px;
}


.mypicsgalleryentry a:hover img {
    border: 2px solid  #333333;
    padding: 1px;
}

Gruß Iu

usa_björn

Bis auf das #333333 ist schon alles so wie du es geschrieben hast. Oder soll ich den Code ändern? Bin ein ziemlicher Laie, bitte um Hilfe.

Olafb

Besser kann mans eigentlich nicht beschreiben ;)
Da musst du anpassen, Vorschlag:

HTML

.mypicsgalleryentry a img {
    border: 5px solid  #cccccc;
    padding: 1px;
}


.mypicsgalleryentry a:hover img {
    border: 5px solid  #eeeeee;
    padding: 1px;
}
.mypicsgalleryentry a{
    border: 1px solid  #ff0000;
}

Alles anzeigen

Was letzteres Betrifft, gründlich prüfen auf Nebenwirkungen :)

usa_björn

Guten Abend,

so, mein Rand hab ich jetzt, könnt ja mal schauen http://www.big-bt.de

Neues Problem, das Große Bild in der Gallery sitzt nicht in der Mitte zu den kleinen Thumbs, ich finde aber einfach nicht den Fehler. Bitte helft mir!

Gruß und schönen Abend noch
Björn

Olafb

So richtig steig ich da nicht durch auf die Schnelle, da sind so viel center und margin versteckt....
Ergebnisse erzielte ich hiermit:

HTML

.mypictureentry {
	margin: 0 0 0 4px;
}

Ob's hilft ....!?

usa_björn

Hat leider nix gebracht, noch ne Idee? :confused:

Gruß
Björn

Olafb

Dann hast du es an der falschen Stelle gemacht, die wp-content/plugins/mygallery/css/mygallery_default.css ist die richtige Stelle, dort deine jetziges entfernen, meins reinschieben!

usa_björn

nee nee, habs schon an der richtigen stelle

Code

/* default style for myGallery  */
.mypicbox {
 margin-top: 10px;
 margin-bottom: 30px;
}
.mypicup {
}
.mygalleryup {
 padding-top: 10px; 
}
.mypicture {
 text-align: center;
 margin: auto;
}
.myfooter {
 text-align: center;
}
.mypicback {
 float: left;
}
.mypicfor {
 float: right;
}
.mypicsgallery {
 text-align: center;
 margin-top: 10px;
}
.mygallpic {
 margin-bottom:0px;
}
.mypicsgallery a img {
 border: 2px solid  #ffffff;
 padding: 1px;
}
.mypicsgallery a:hover img {
 border: 2px solid  #CC0000;
 padding: 1px;
}
 
.myrandompic img {
 padding:5px;
 border: 1px solid #666666;
 background: #ffffff;
}
.mygalleryoverview {
 margin-top: 10px;
}
.mygallerygallery {
 height: 130px;
 padding: 5px;
 margin-bottom: 5px;
 border: 1px solid #cccccc;
}
.mygallerynames {
 text-align: left;
  font-family: "Century Gothic",Verdana;
  font-weight: bold;
 margin:0px;
 padding:0px;
 font-size: 1.4em;
 margin-bottom: 10px;
}
.mygallerypreviewpics {
 float: left;
 margin-right: 12px;
}
.mygallerydescription {
 text-align: left;
 font-size: 1em;
}
.mypicboxentry {
 margin-top: 10px;
 margin-bottom: 10px;
 
}
.mypictureentry {
 text-align: center;
 margin: auto;
}
.mypicsgalleryentry {
 text-align: center;
}
.mygallpicentry {
 margin-bottom:0px;
}
.mypicsgalleryentry a img {
 padding: 2px;
             border: 1px solid #000000;
}
.mypicsgalleryentry a:hover img {
 padding: 2px;
 border: 1px solid  #CC0000;
}
.myinlinepicture {
 text-align:center;
 margin:auto;
 margin-top:10px;
}
.myinlinepictureleft {
 border:1px solid #000000;
 float:left;
 margin-right:10px;
 margin-top:23px;
}
.myinlinepictureright {
             border:1px solid #000000; 
             float:right;
 margin-left:10px;
 margin-top:23px;
}
.myinlinepictureleftclear {
 float:left;
 padding-right:10px;
 padding-top: 10px;
}
.myinlinepicturerightclear {
 float:right;
 padding-left:10px;
 padding-top: 10px;
}
.myinlinepicdescription {
 text-align:center;
 font-size: 0.8em;
 margin-bottom: 0.2em;
}
.myinlinepictureimg {
 border:0px;
}
.mypictureentryimg {
[B]margin: 0 0 0 4px;[/B]
 padding: 2px;
             border: 1px solid #000000;
}
.mygallerypreviewpics img {
 border:0px;
}
.gallerynav {
 
}
.galleryfor {
 float: right;
}
.galleryback {
 float: left;
}
.exifmetalabel {
 font-family: Verdana;
 font-size: 1em;
}
.exifbox {
 border: 1px solid #cccccc;
 font-family: Verdana;
 font-size: 0.85em;
}
.exiflabelone {
 background: #eeeeee;
 font-weight:bold;
 padding-left: 10px;
 padding-right: 10px;
}
.exiflabeltwo {
 font-weight:bold;
 padding-left: 10px;
 padding-right: 10px;
 
}
.exifdataone {
 font-weight:lighter;
 
}
.exifdatatwo {
 font-weight:lighter;
}
 
.thumbsnav {
 
}
.thumbsfor {
 float: right;
}
.thumbsback {
 float: left;
}
.thumbscounter {
 color: #666666;
 text-align: center;
 font-size: 0.7em;
 font-family: 'Verdana', 'Geneva', sans-serif;
}
.mypiccounter {
 color: #666666;
 text-align: center;
 font-size: 0.7em;
 font-family: 'Verdana', 'Geneva', sans-serif;
}
.galcounter {
 color: #666666;
 text-align: center;
 font-size: 0.7em;
 font-family: 'Verdana', 'Geneva', sans-serif;
}
.transparent {
 color: #ffffff; 
}

Alles anzeigen

Olafb

Ich kopier dir jetzt mal einiges hier hin, dann vergleichst du mal

1. ich
.mypictureentry {
margin: 0 0 0 4px;
}

2. das bei dir
.mypictureentry {
text-align: center;
margin: auto;
}

3. wo du versuchst
.mypictureentryimg {
margin: 0 0 0 4px;
padding: 2px;
border: 1px solid #000000;
}

wenn du's nu nicht siehst....

usa_björn

Scheinbar hab ich mir das selber verbaut, nach dem ich meinen falschen Eintrag gelöscht hab, hats schon gepasst. Wenn du noch Lust hast, kannst du mir evtl. noch weiter Helfen:

ich würde gerne das die Bildunterschrift mit in den Rahmen fällt, so wie die kleinen Bilder am Ende der Seite.
bei den kleinen Bildern am Ende der Seite, macht er mir immer Am Bild einen häßlich Absatz, trotz "float" Befehl. Hab das jetzt erstmal notdürftig verschönert und über " margin-top:23px;" es auf die gleiche Höhe gebracht wie die erste Textzeile, wenn nötig nehme ich es raus, um es dir zu verdeutlichen. Möchte das der Text schön um meine Bild drumrumfließt.

Danke!

Code

/* default style for myGallery  */
.mypicbox {
 margin-top: 10px;
 margin-bottom: 30px;
}
.mypicup {
}
.mygalleryup {
 padding-top: 10px; 
}
.mypicture {
 text-align: center;
 margin: auto;
}
.myfooter {
 text-align: center;
}
.mypicback {
 float: left;
}
.mypicfor {
 float: right;
}
.mypicsgallery {
 text-align: center;
 margin-top: 10px;
}
.mygallpic {
 margin-bottom:0px;
}
.mypicsgallery a img {
 border: 2px solid  #ffffff;
 padding: 1px;
}
.mypicsgallery a:hover img {
 border: 2px solid  #CC0000;
 padding: 1px;
}
 
.myrandompic img {
 padding:5px;
 border: 1px solid #666666;
 background: #ffffff;
}
.mygalleryoverview {
 margin-top: 10px;
}
.mygallerygallery {
 height: 130px;
 padding: 5px;
 margin-bottom: 5px;
 border: 1px solid #cccccc;
}
.mygallerynames {
 text-align: left;
  font-family: "Century Gothic",Verdana;
  font-weight: bold;
 margin:0px;
 padding:0px;
 font-size: 1.4em;
 margin-bottom: 10px;
}
.mygallerypreviewpics {
 float: left;
 margin-right: 12px;
}
.mygallerydescription {
 text-align: left;
 font-size: 1em;
}
.mypicboxentry {
 margin-top: 10px;
 margin-bottom: 10px;
 
}
.mypictureentry {
 text-align: center;
}
.mypicsgalleryentry {
 text-align: center;
}
.mygallpicentry {
 margin-bottom:0px;
}
.mypicsgalleryentry a img {
 padding: 2px;
             border: 1px solid #000000;
}
.mypicsgalleryentry a:hover img {
 padding: 2px;
 border: 1px solid  #CC0000;
}
.myinlinepicture {
 text-align:center;
 margin:auto;
 margin-top:10px;
}
.myinlinepictureleft {
 border:1px solid #000000;
 float:left;
 margin-right:10px;
 margin-top:23px;
}
.myinlinepictureright {
             border:1px solid #000000; 
             float:right;
 margin-left:10px;
 margin-top:23px;
}
.myinlinepictureleftclear {
 float:left;
 padding-right:10px;
 padding-top: 10px;
}
.myinlinepicturerightclear {
 float:right;
 padding-left:10px;
 padding-top: 10px;
}
.myinlinepicdescription {
 text-align:center;
 font-size: 0.8em;
 margin-bottom: 0.2em;
}
.myinlinepictureimg {
 border:0px;
}
.mypictureentryimg {
 padding: 2px;
             border: 1px solid #000000;
}
.mygallerypreviewpics img {
 border:0px;
}
.gallerynav {
 
}
.galleryfor {
 float: right;
}
.galleryback {
 float: left;
}
.exifmetalabel {
 font-family: Verdana;
 font-size: 1em;
}
.exifbox {
 border: 1px solid #cccccc;
 font-family: Verdana;
 font-size: 0.85em;
}
.exiflabelone {
 background: #eeeeee;
 font-weight:bold;
 padding-left: 10px;
 padding-right: 10px;
}
.exiflabeltwo {
 font-weight:bold;
 padding-left: 10px;
 padding-right: 10px;
 
}
.exifdataone {
 font-weight:lighter;
 
}
.exifdatatwo {
 font-weight:lighter;
}
 
.thumbsnav {
 
}
.thumbsfor {
 float: right;
}
.thumbsback {
 float: left;
}
.thumbscounter {
 color: #666666;
 text-align: center;
 font-size: 0.7em;
 font-family: 'Verdana', 'Geneva', sans-serif;
}
.mypiccounter {
 color: #666666;
 text-align: center;
 font-size: 0.7em;
 font-family: 'Verdana', 'Geneva', sans-serif;
}
.galcounter {
 color: #666666;
 text-align: center;
 font-size: 0.7em;
 font-family: 'Verdana', 'Geneva', sans-serif;
}
.transparent {
 color: #ffffff; 
}

Alles anzeigen

P.S. sorry das ich grad so blind war :oops:

Olafb

1. hat sich wohl erledigt?
2. versteh ich nicht, du schreibst doch was du zu machen hast.

Du brauchst deine CSS nicht posten, ich find die schon ;)

usa_björn

zu1: ich hätte gerne, das bei dem großen Bild in der Gallery im ersten Beitrag, der Text "test1" mit im schwarzen 1px Rahmen vom Bild erscheint, so wie beim zweiten Beitrag bei dem kleinen Bild "Sonnenuntergang im Naturbad" mit im Rahmen drin steht.

zu2: hab den Beitrag jetzt nochmal in den fast Urzustand der css zurückgesetzt, jetzt kann man gut sehen das der Text beim umfluß des Bildes eine Unterbrechung hat, wie kann ich das beseitigen? Sollte dieses Bild jetzt am Textanfang sein, steht es viel höher als der Text, das könnte man mit "margin-top:23px;" beseitigen, aber dann reist es mir den Text beim Bild in der Mitte ganz auseinander.

http://www.big-bt.de

Willkommen! Melden Sie sich an oder registrieren Sie sich.

benötige Hilfe - Rahmen um Bilder / CSS bearbeiten

Jetzt mitmachen!