Bilder werden unterstrichen

David1

Hallo,

ich weiß das Thema gib es schon oft und ich habe mich auch schon durch alle Themen, Lösung und lösungsansätze und Vorschläge gewälzt aber bin zu keinem Ergebnis gekommen.

Hier erstmal mein Blog: Blogalltag.de

Habe schon länger das Problem das Bilder unterstrichen werden.
Habe den CSS Code schon hunderte male durchgekämmt aber nichts brauchbares gefunden um das irgendwie in den Griff zu kriegen das die Bilder nicht mehr unterstrichen werden.

Was ich gerne hätte ist das die Bilder nicht mehr unterstrichen werden und das sie alle einen ganz einfachen Rahmen haben.

Hier mal mein CSS Code:

CSS

body {
font:75%/150% "Trebuchet MS", Tahoma, Arial;
color:#333;
background:#9ECEE4;
background-image:url("images/background.gif");
background-repeat:repeat-x;
margin:0;
padding:0;
}


#
.toggler {
color:#222;
background:#eee;
border-bottom:1px solid #ddd;
border-right:1px solid #ddd;
border-top:1px solid #f5f5f5;
border-left:1px solid #f5f5f5;
font-size:11px;
font-weight:400;
font-family:'Andale Mono', sans-serif;
margin:0;
padding:2px 5px;
}


.element p {
margin:0;
padding:4px;
}


.float-right {
float:right;
padding:10px 20px;
}


a:hover {
color:#A3D5EC;
border-bottom:1px dashed #A3D5EC;
}


p {
margin:0;
padding:0 0 15px;
}


h1 {
height:60px;
font:lighter 2.4em/1.2em Georgia,"Times New Roman",Times,serif;
color:#FFF;
margin:0;
}


.title a {
font:lighter 2.4em/1.2em verdana;
color:#FFF;
margin:0;
}


.title a:hover {
font:lighter 2.4em/1.2em verdana;
color:#E3F6FF;
background-color:none;
margin:0;
}


.slogan {
color:#FFF;
size:12px;
}


h1 a,h1 a:visited {
color:#FFF;
text-decoration:none;
}


h1 a:hover {
color:#FFF;
text-decoration:none;
border:none;
background:none;
}


h2 {
color:#0C72A2;
border-bottom:1px dotted #4395BC;
width:100%;
font:lighter 2em/1em Georgia,"Times New Roman",Times,serif;
padding-bottom:3px;
margin:0 0 2px;
}


h2 a:hover {
color:#8DC6E0;
text-decoration:none;
}


h4 {
font:normal 130%/100% "Trebuchet MS", Tahoma, Arial;
color:#758d38;
margin:10px 0 5px;
}


#wrapper {
background:#FFF url(images/content-background.gif) repeat-y;
margin-left:auto;
margin-right:auto;
width:800px;
}


#page {
width:768px;
background-image:url(images/content-background2.gif);
background-repeat:repeat-x;
margin:0 auto;
}


#header {
background-image:url(images/header.gif);
position:relative;
color:#D16683;
width:962px;
height:235px;
margin-left:auto;
margin-right:auto;
}


#headerimg {
position:relative;
height:60px;
width:760px;
margin:0 auto;
padding:135px 0 0 10px;
}


#headerimg .description {
color:#F6F5EE;
font-size:14px;
float:right;
}


#navi {
height:30px;
width:760px;
margin-top:0;
margin-left:115px;
text-align:center;
line-height:normal;
}


#nav {
list-style:none;
float:left;
margin:0 3px;
padding:0;
}


#nav li {
float:left;
height:30px;
white-space:nowrap;
margin:0 3px;
}


#nav .page_item a {
color:#2195CB;
display:block;
text-decoration:none;
font:bold 12px Arial, Helvetica, sans-serif;
line-height:30px;
padding:0 10px;
}


#nav li:hover {
border-bottom:1px dashed #E1EFF6;
}


#nav .page_item a:hover {
background-position:0 -36px;
border:none;
}


#nav li.current_page_item {
color:#198CBB;
text-decoration:none;
border-bottom:1px solid #E3F7FF;
}


#nav .current_page_item a,#nav .current_page_item a:visited {
color:#198CBB;
text-decoration:none;
}


#content {
float:left;
width:530px;
overflow:hidden;
margin-left:10px;
padding:0 0 30px 13px;
}


.post {
clear:both;
padding-top:15px;
text-decoration:none;
}


.post-date {
width:45px;
height:49px;
float:left;
background:url(images/date-bg.gif) no-repeat;
}


.post-month {
font-size:11px;
text-transform:uppercase;
color:#FFF;
text-align:center;
display:block;
line-height:11px;
padding-top:2px;
margin-left:-3px;
}


.post-day {
font-size:18px;
text-transform:uppercase;
color:#999;
text-align:center;
display:block;
line-height:18px;
padding-top:7px;
margin-left:-3px;
}


.post-cat {
background:url(images/mini-category.gif) no-repeat left center;
padding-left:20px;
float:left;
}


.post-comments {
background:url(images/mini-comments.gif) no-repeat left bottom;
padding-left:20px;
float:right;
}


.post-calendar {
background:url(images/mini-calendar.gif) no-repeat left center;
padding-left:20px;
float:right;
font-size:95%;
color:#999;
}


.post-content {
clear:both;
padding-top:10px;
text-decoration:none;
}


.post-info {
height:30px;
background:#FFF;
font-size:85%;
color:#999;
border:1px dashed #9ECEE4;
margin:0;
padding:5px 0;
}


.post-info a {
color:#9ECEE4;
}


.post-info a:hover {
color:#FF1F28;
text-decoration:none;
background:none;
}


.post-content blockquote {
background:#eee url(images/blockquote.gif) no-repeat 16px 8px;
border:1px solid #eee;
font-style:italic;
color:#777;
margin:0;
padding:0 25px 0 64px;
}


.navigation {
clear:both;
padding:10px 0;
}


.navigation a,.navigation a:visited {
color:#59770e;
}


.previous-entries a {
float:left;
padding-left:18px;
background:url(images/mini-nav-left.gif) no-repeat left center;
}


.next-entries a {
float:right;
padding-right:18px;
background:url(images/mini-nav-right.gif) no-repeat right center;
}


#comments,#respond {
border-bottom:1px dotted #4395BC;
clear:both;
padding:10px 0 5px;
}


.commentlist {
padding-left:20px;
line-height:130%;
list-style-type:none;
margin:10px 0;
}


.commentlist li {
background:#E6F0FC;
border:1px dotted #C1DDEF;
padding:10px 10px 0;
}


.commentlist .alt {
background:#E6F0FC;
border:1px dotted #C1DDEF;
}


.commentlist cite,.commentlist cite a,.commentlist cite a:visited {
font-weight:700;
font-style:normal;
font-size:120%;
}


.commentlist small {
margin-bottom:5px;
display:block;
font-size:87%;
}


#commentform {
margin-top:10px;
font:110% Arial, Helvetica, sans-serif;
}


#commentform p {
margin:0;
padding:6px 0;
}


#commentform label {
color:#787878;
font-size:87%;
}


#commentform input {
width:200px;
background:#E6F0FC;
border:1px dotted #D0D0BF;
margin-top:3px;
padding:3px;
}


#commentform textarea {
width:485px;
height:115px;
background:#E6F0FC;
border:1px solid #C1DDEF;
margin-top:3px;
padding:2px;
}


#commentform textarea:focus,#commentform input[type="text"]:focus {
background:#fff;
}


#commentform #submit {
background:url(images/btn-bg.gif) no-repeat;
border:1px solid #7FD4F4;
font:bold 12px Arial, Helvetica, sans-serif;
color:#0C72A2;
float:right;
width:144px;
height:28px;
cursor:pointer;
}


#sidebar {
float:right;
width:190px;
color:#666;
overflow:hidden;
padding:0 10px 20px 0;
}


#sidebar h2,#sidebar .sidebartitle {
font:1em Arial,Helvetica,FreeSans,clean,sans-serif;
color:#0C72A2;
border-bottom:1px solid #DBEFF6;
margin-bottom:5px;
font-size:14px;
}


#sidebar a,#sidebar a:visited {
color:#1888B8;
text-decoration:none;
}


#sidebar li a:hover {
color:#1888B8;
border-bottom:1px solid #789d47;
text-decoration:none;
}


.widget {
background:#FFF;
margin-bottom:10px;
border:2px solid #DBEFF6;
background-color:#F0F8FC;
padding:5px 10px 10px;
}


#sidebar ul li {
list-style:none;
border:none;
margin:0;
padding:0;
}


#sidebar ul li ul li {
border-bottom:1px solid #C1DDEF;
padding:2px 0;
}


#sidebar ul li ul li ul li {
border:none;
padding:1px 0 1px 10px;
}


ul.linkcat li,div.linkcat li {
background:url(images/mini-blogroll.gif) no-repeat left center !important;
padding-left:20px !important;
}


ul.list-cat li,div.widget_categories li {
background:url(images/mini-category.gif) no-repeat left center !important;
padding-left:20px !important;
}


ul.list-archives div,li.widget_archives li {
background:url(images/mini-monthly-archive.gif) no-repeat !important;
padding-left:20px !important;
}


ul.list-page li,div.widget_pages li,li.widget_recent_entries li {
background:url(images/mini-page.gif) no-repeat left center !important;
padding-left:20px !important;
}


ul.list-page li ul div,li.widget_pages li ul li {
background:url(images/mini-page-arrow.gif) no-repeat !important;
padding-left:10px !important;
}


div.widget_recent_comments li {
background:url(images/mini-recent-comments.gif) no-repeat !important;
padding-left:20px !important;
}


div.widget_calendar td {
padding:1px 5px;
}


.textwidget {
padding-top:5px;
}


#search {
float:right;
width:185px;
height:31px;
text-align:center;
background-image:url(images/search-background.png);
padding-left:5px;
padding-top:4px;
margin:-40px 15px 0 0;
}


#searchform {
margin:3px 0 0;
}


#searchform br {
display:none;
}


#searchform #s {
width:130px;
height:17px;
border:1px solid #4395BC;
background:#fff;
margin-right:2px;
color:#000;
font-weight:400;
padding:3px 5px 0;
}


.center {
text-align:center;
}


img.center,img[align="center"] {
display:block;
margin-left:auto;
margin-right:auto;
text-decoration:none;
}


.alignleft {
float:left;
}


img.alignleft,img[align="left"] {
float:left;
margin:2px 10px 5px 0;
text-decoration:none;
}


.alignright {
float:right;
}


img.alignright,img[align="right"] {
float:right;
margin:2px 0 5px 10px;
text-decoration:none;
}


.clear {
clear:both;
}


hr.clear {
clear:both;
visibility:hidden;
margin:0;
padding:0;
}


a,a:visited,h2 a,h2 a:visited {
color:#0C72A2;
text-decoration:none;
}


img,#sidebar a:hover {
border:none;
text-decoration:none;
}

Alles anzeigen

Habe ein paar unwichtige Sachen aus der CSS entfernt weil sonst ist der Beitrag zu lang

Vielleicht hat ja irgendeiner eine Idee.

Würd mich echt freuen.

Danke schonmal

David

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

jottlieb

Die Bilder werden unterstrichen, weil sie verlinkt werden.
Holzhammermethode: Das löschen:

Code

a:hover {
color:#A3D5EC;
border-bottom:1px dashed #A3D5EC;
}

Dann verschwindet aber auch die Unterstreichung bei normalen Links.

David1

Das ist nicht so schlimm das es bei normalen Links auch verschwindet weil ich dort ein Symbol hinter jedem Link habe, so erkennt man ja das es ein Link ist.

Tausend Dank, hat wunderbar geklappt.

Hast du nun noch eine Idee für den Rahmen ?
So wie in etwa hier:
Pocket PC Acer n311 mit WLAN, Bluetooth und ZubehÃ¶r - Gordo's Weblog

Wäre klasse !

LG

Sennix

Falls du deine normalen links doch unterstrichen haben willst kannst du auch einfach die CSS-Regel so notieren:

Code

a:hover img { border: 0; }

Dann gilt das nur für Links die Bilder sind.

Für den Rahmen wie auf der Webseite schreibst du das hier:

Code

img {
border: 1px solid grey:
padding: 5px;
}

Die Attribute kannst du natürlich nach deinem Belieben variieren.
Border sorgt halt für den Rand und padding für den Abstand zwischen Bild und Rand.

David1

Das mit den Links hat hingehauen aber das mit dem Rahmen leider nicht.
Muss ich das irgendwo in die CSS Datei einfügen oder an einer ganz bestimmten Stelle ?

Bisher ist kein Rahmen zu sehen.

lg

Edit: Einen Fehler habe ich bei dir gerade gefunden:

So muss es heißen

Code

img {
border: 1px solid grey;
padding: 5px;
}

Du hattest hinter dem Grey einen Doppelpunkt gesetzt.
Also den Abstand habe ich schonmal aber den Rand selber sehe ich leider noch nicht.

Sennix

Entschuldige bitte, da haben sich wohl zwei Tippfehler eingeschlichen:).
Also das mit dem Doppelpunkt ist klar, hinter CSS-Regeln gehört immer ein Semikolon und es muss natürlich gray statt grey heißen, dann müsstest du auch den Rahmen sehen.

David1

Danke dir aber leider funktioniert auch die 2. Tippfehleränderung (geiles Wort :D) nicht.

Sennix

Also die Syntax kann nicht mehr falsch sein.
Vll. klappt es wenn du das hier in dein stylesheet schreibst:

Code

.post img {
border: 1px solid gray;
padding: 5px;
}

Das müsste eigentlich für alle Bilder innherhalb deiner posts funktionieren die mit dem img-Tag eingebunden sind.

David1

Ich danke dir ! Das hat nun prima funktioniert und ich bin Glücklich.

Danke nochmal :)

David1

Nabend,

ich bin es nochmal.

Ich habe mir das jetzt nocheinmal genauer angesehen und habe festgestellt das ich leider sher viel mit img Tag eingebunden habe.

Jetzt weren bei den Smilies in den Kommentaren und auch bei sonstigen kleinen Bildchen überall Rahmen rumgemacht und so.

Das gefällt mir natürlich gar nicht. Gibt es die Möglichkeit es nur auf die Bilder einzugrenzen die ich per Upload Hochlade und dann in den Beitrag einbinden also ohne die Smilies und so ?

LG

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bilder werden unterstrichen

Jetzt mitmachen!