HTML und CSS

Hier kennen sich mindestens mal Holger und ich damit aus. electrofreak sagt in seiner Signatur auch, dass er davon Ahnung hat. Aber sein Fähigkeiten und sein Wissen kann ich nicht beurteilen.

Na dann zieht euch mal warm an - ich bin seeehr schwer von Begriff

LG

Installiere dir am besten das Firebug-Plugin für den Firefox. Damit kannst du die Webseiten analysieren und auch direkt abändern und sehen was passiert - also Learning by Doing.

HTML ist sehr einfach zu lernen. Bei CSS dagegen verliert man am Anfang schnell den Überblick, da sich die einzelnen Definitionen teilweise vererben. Es gibt also Eltern und Kinder

Ausserdem reagieren nicht alle Browser gleich. Was im Firefox funktioniert, kann im IE zu einer ganz anderen Darstellung führen.

Für eine neue Webseite sollte man daher als Basis immer ein fertiges Template nehmen (für 2 oder 3 Spalten) und dieses dann erweitern.

Hi,

na ja, rudimäntäre Kenntnisse in HTML und CSS hab ich schon, theoretisch weiß ich wie es geht, leider seh ich nie die Fehler im Code....

Firebug hab ich laufen, hilft auch, aber auch Firebug versteh ich nicht wirklich. Elemente suchen und mit was sie in der CSS-Datei stehen geht aber.

Da es um meine bestehende Webseite geht, ist das mit dem einfachen Layout nicht so ganz einfach, das Ding läuft auf Wordpress.

Find ich eigentlich sehr schön, weil problemlos anpassbar. Leider kommt da alles zusammen. php, wordpress eigenes php, CSS und HTML.

Und somit muss Learning by Doing am lebenden Objekt erfolgen. Mit meinen dusseligen CSS-Fragen bin ich im Wordpressforum schon angeeckt, das mögen die nicht so...

Aber ich seh grade das ich im falschen Unterforum rumposte, ich verschieb das Thema mal ins Webdesign.

LG

So, erste blöde Frage:

ich will eine Grafik auf die rechte Seite setzen.

HTML-Code:

#seitengrafik {
position:absolute;
left:50%;
margin-left:500px;
top:390px;
width:150px;
height:100px;
display:block;
background:url('images/jm-werbung.png') no-repeat;     }
#seitengrafik a {
width:150px;
height:100px;
display:block;
background:none;
}

Wenn sich "left:50%" auf das Browserfenster bezieht und die Grafik in die Mitte setzt, warum werden dann die anderen Werte in px angegeben? Müssen das logischer Weise nicht auch %-Angaben sein damit beim Ändern der Größe des Browserfensters sich die Grafik nicht verschiebt? Tut sie nämlich bei mir....

Und warum nehme ich eigentlich nicht gleich right:2%, dann bin ich doch schon rechts mit Rand?

Und warum wird mit margin-right und Minuswerten gearbeitet. (Das hab ich in margin-left gändert, weil ich es nicht anders hin bekommen hab.

LG

Den Code habe ich so noch nicht gesehen. Mit % zu arbeiten ist immer schwierig, da man auch das äussere DIV beachten muss. Je nach Browser ist die Darstellung auch anders und man muss mit Tricks arbeiten, die nachher keine versteht

Setze die Grafik doch einfach mit:

Code:

#seitengrafik {
 position: absolute;
 right: 20px;
}

an den rechten Rand.

Minuswerte nimmt man, um etwas ausserhalb eines Bereiches (z.B. DIV) zu positionieren.

Dann ist das eines meiner Probleme. Wordpress arbeitet ja mit Container und das ist ja wohl ein Div. Und meine Grafiken liegen außerhalb des Containers.

LG

Ich möchte dir gerne mal ein paar Sachen empfehlen :

Webocton - Programming - Scriptly - Download -Als Editor (sehr einfach )
HTML Crashkurs für Anfänger in 90 Min [1/8] | EINFÜHRUNG - YouTube -Als Tutorial (auch gut zu verstehen)

LG
electrofreak

PS: Nicht vergessen:
Bei Fragen immer fragen, deshalb gibt es sie .

EDIT:
Von Wordpress habe ich übrigens keine Ahnung, wollt ich mal erwähnt haben...

Dann müsstest du um alles noch einmal ein DIV setzen und darin die Grafiken und den Wordpress-Container positionieren.

@electrofreak: Die Videos schau ich mir an, keine Frage..

als Editor nutze ich Phase 5, da komm ich ganz gut mit klar, den gibts auch schon viele Jahre und der ist mit HTML mitgewachsen.

wordpress ist eigentlich eine schöne Sache, einerseits hast du ein vorgefertigtes Baukastensystem das du mit zigtausend Plugins aufbohren könntest, anderseits ist es durch PHP und HTML in jeder Hinsicht anpassbar. Es gibt eben nur gewissen Code den ich mal als wordpress-php bezeichnen möchte.

Grundsätzlich für jemanden der PHP und CSS beherrscht, kein Problem, denke ich. Wordpress ist jedenfalls um Längen besser wie Joomla und Co.

@Holger: du meinst um den eigentlichen Content-Container noch einen großen legen, der quasi identisch mit dem gesamten Body ist?

Ihr könnt ja mal schauen, es geht um die Werbung rechts. Im Firefox steht der Kopftext parallel zur Sidebar, im Opera und IE und auch auf dem Tablet ist das nach unten verschoben.

die Seite steht ja unten....

LG

Kannst du mal die ganze CSS-Datei Posten?

ich habs ja schon verschoben.
Das war voher in der Sidebar.

Style.css:

PHP-Code:

@import url('library/reset.css');  @import url('library/layout.css');    body{font:62.5%/1.3 'trebuchet ms',verdana,'Lucida Grande',arial,sans-serif;text-align:center;color:#111}
#page{width:962px;margin:10px auto;text-align:left;background:#FFF}


#seitentext {
position:absolute;
top:345px;
left:50%;
margin-left:500px;
padding: 5px,5px;
width:140px;
height:30px;
display:block;  }

h2.seitentext {
font-family:verdana,'Lucida Grande',arial,sans-serif;
font-size:1.5em;
line-height:1.3;
color:#F39404;
font-weight:bold;         }

#seitengrafik {
position:absolute;
left:50%;
margin-left:500px;
padding: 5px,5px;
top:390px;
width:150px;
height:100px;
display:block;
background:url('images/jm-werbung.png') no-repeat;     }

#seitengrafik a {
width:150px;
height:100px;
display:block;
background:none;
}
#seitengrafik_02 {
position:absolute;
left:50%;
margin-left:505px;
padding: 5px,5px;
top:500px;
width:150px;
height:100px;
display:block;
background:url('images/vdp2012-1.jpg') no-repeat;     }

#seitengrafik_02 a {
width:150px;
height:100px;
display:block;
background:none;
}
#container{width:920px;float:left;padding:0 20px}
#rotating{width:920px;float:left;padding:15px 0}
#primary{float:left;padding:0 18px 0 0}
#secondary,.alignleft,.sidebar{float:left}
.sidebar-items{padding:5px 5px 0 5px;background:#FFFFFF}
#footer{width:920px;float:left;clear:both}
.homelink{font-size:35px;line-height:1;font-weight:bold;letter-spacing:-0.5px;padding:30px 20px 10px 20px;font-variant:small-caps}
.homelink a{color:#F39404}
.homelink a:hover{color:#E2072D;text-decoration:none}
.description{color:#E2071D;margin-top:-10px;padding:0 0 10px 21px;font-size:13px;line-height:1;font-style:italic}
#skip a{padding:0.2em 0.3em;font-weight:bold;background:#1D75D1;color:#444;display:block;text-decoration:none;position:absolute;top:0.5em;right:999em}
#skip a:first-letter{text-decoration:underline}
#skip a:hover{background:#ddd}
#header .menu{float:left;margin-left:15px;padding:5px 5px 5px 5px}
#header .menu li{position:relative;float:left;margin:0 0 0 5px;font-weight:bold;font-size:11px;line-height:1.2}
#header .menu li a{display:block;padding:5px 10px;background:#4E9CE5;color:#fff}
#header .menu li:hover > a{background:#555;text-decoration:none}
#header .menu li.current-menu-ancestor > a,  #header .menu li.current-menu-parent > a,  #header .menu li.current-menu-item > a,  #header .menu li.current_page_item > a{background:#ccc;color:#444}
#header ul ul{display:none;position:absolute}
#header ul ul ul{left:100%;top:0}
#header .sub-menu li,  #header .children li{width:200px;margin-left:0}
#header li:hover > ul{display:block}
b,strong,#wp-calendar a,.entry-content dl dt,dfn{font-weight:bold}
i,em,dfn{font-style:italic}
abbr,acronym{border-bottom:1px solid #ddd}
sup,sub{font-size:0.7692em;line-height:1}
sup{vertical-align:super}
sub{vertical-align:sub}
del{text-decoration:line-through}
small{font-size:0.8em}
pre,code,tt{font:1em/1.5385 consolas,'Courier New',Courier,Monospace}
pre{margin:0 0 1.5385em;padding:0.7692em 10px;border:1px solid #ddd;overflow:auto}
hr{background:#ccc;color:#ccc;clear:both;float:none;width:100%;height:0.1em;margin:0 0 1.5385em;border:none}
blockquote{margin:0 0 1.5385em;padding:0 0 0 40px;color:#555;background:url('images/pp-quote.gif') no-repeat}
h1,h2,h3,h4,h5,h6,h7{font-weight:normal;font-family:'trebuchet MS',verdana,arial,sans-serif}
.entry-title,.page-title{font-size:2.2em;line-height:1;margin:0.9091em 0 0}
.page-title{margin-bottom:0.9091em;padding-bottom:5px}
.sidebar h2{font-size:1.5em}
.entry-content h1,.entry-content h2{font-size:1.5385em;line-height:1;margin:1.5em 0 0.5em}
.entry-content h3{font-size:1.3846em;line-height:1.1111;margin:1.66665em 0 0.55555em}
.entry-content h4{font-size:1.2308em;font-weight:bold;line-height:1.25;margin:1.875em 0 0.625em}
.entry-content h5,.entry-content h6{font-size:1em;font-weight:bold;margin:2.30775em 0 0.76925em}
.entry-content h7{font-size:1.5em;font-weight:bold;line-height:1.25;margin:1.875em 0 0.625em}
.entry-content{font-family:verdana,'Lucida Grande',arial,sans-serif;font-size:1.3em;line-height:1.5385;margin:1.5385em 0 0}
.entry-content p{margin:0 0 1.5385em}
.entry-content address{margin:0 0 1.5385em;font-style:italic}
.archive-info{margin-top:15px;padding:1px 5px;background:#FFE4B5} // Hintergrundfarbe geändert
.archive-info .page-title{margin-bottom:10px}
.archive-info p{font-size:1.3em;line-height:1.5385;margin:0 0 1.5385em}
.sticky{margin-top:18px;padding:10px;background:#F6F6F6}
.sticky .entry-title{margin-top:0}
.entry-byline{color:#777;font:italic 1.2em 'trebuchet ms',sans-serif}
.entry-byline address{display:inline}
.entry-meta{margin:2.4999em 0 0.8333em;font:italic 1.2em/1.6666 'trebuchet ms',sans-serif;color:#555}
.entry-content ul,.entry-content ol{margin:0 0 1.5385em 30px}
.entry-content li{margin-bottom:0.4615em;line-height:1.5385}
.entry-content li ul,.entry-content li ol{margin:0.4615em 0 1.077em 30px}
.entry-content ul{list-style-type:square}
.entry-content li ul{list-style-type:circle}
.entry-content ol{list-style-type:decimal}
.entry-content ol ol{list-style-type:upper-alpha}
.entry-content dd,.entry-content dl{margin:0 0 1.5385em}
.entry-content img{max-width:100%;height:auto}
img.alignleft,div.alignleft{margin:0 15px 3px 0;display:inline}
img.alignright,div.alignright{margin:0 0 3px 15px;display:inline}
.aligncenter,div.aligncenter{display:block;margin:0 auto 1.5385em}
img.border{padding:4px;border:1px solid #ccc;background:#eee}
.alignright{float:right}
.center,.attachment{text-align:center}
.wp-caption{text-align:center;padding-top:4px}
.wp-caption img{margin:0;padding:0;border:0px none}
.wp-caption p.wp-caption-text, .gallery-caption{color:#555;padding:4px;margin:0;font:italic 0.923em/1.6666 'trebuchet ms',verdana,sans-serif}
.wp-post-image{float:left;margin:0 15px 3px 0}
.archive .wp-post-image{margin-bottom:15px}
.entry-content .attachment a, .entry-content .gallery a, .entry-content .attachment a:hover, .entry-content .gallery a:hover{border:none}
.attachment img,.attachment-thumbnail,.entry-content .gallery img{padding:2px;border:1px solid #ccc}
.attachment img:hover,.attachment-thumbnail:hover,.entry-content .gallery img:hover{border:1px solid #888}
.entry-content table{margin:0 0 1.5385em;border-collapse:collapse;border:1px solid #ccc;color:#444}
.entry-content th{font-weight:bold;background:#FC9}
.entry-content th,.entry-content td{padding:0.2em 10px}
.entry-content tfoot{background:#F2F2F2}
#pp-subscribe{margin-bottom:10px}
#pp-subscribe ul{padding:5px}
#pp-subscribe li{display:block;float:left}
#pp-subscribe a{padding:5px 5px 5px 50px;font-weight:bold;font-size:14px;line-height:33px;display:block}
#pp-feed{background:url('images/pp-rss2.png') no-repeat 4px 4px}
#pp-email{background:url('images/pp-email.png') no-repeat 4px 4px}
#searchform #s,#s-input{border:1px solid #ccc;margin-bottom:5px;padding:2px;width:95%;color:#666}
#submit,#s-submit{border:1px solid #555;background:#555;color:#ddd;cursor:pointer;font-weight:bold}
#submit:hover,#s-submit:hover{color:#fff}
#s-input,#submit,#s-submit{font-family:'trebuchet ms',arial,sans-serif}
#searchform input{border:1px solid #bbb}
.widget{font-size:1.2em;line-height:1.4166;margin:0 0 1.25em;padding:0.4166em 5px 0.4166em 5px}
.widget li{margin:0.25em 0}
.widget li li{padding:0 0 0 15px}
.widgettitle{margin-bottom:3px;line-height:1.3;color:#F39404;font-weight:bold}
.widget_recent_entries li,.widget_recent_comments li{background:url('images/pp-bullet.gif') no-repeat 0 0.53em;padding:0 0 0 15px}
.postform{width:100%}
#calendar_wrap{margin:0.4166em auto 0}
#wp-calendar{width:94%;margin:0 auto}
#wp-calendar caption{background:#aaa;font-size:1.0833em;font-weight:bold}
#wp-calendar th,#wp-calendar td{text-align:center;padding:0.25em}
#wp-calendar td{font-size:0.9166em;color:#777}
#wp-calendar tfoot,#wp-calendar th{background:#ddd}
.navigation{font-size:1.2em;text-align:center;padding:1.8181em 0;border-bottom:1px dashed #ddd}
.navleft,.gnavleft{float:left;width:50%;text-align:left}
.navright,.gnavright{float:right;width:50%;text-align:right}
.gnavigation{padding:0 0 2em}
.looped .navigation{border-bottom:none}
.breadcrumb-nav{font-size:1.2em;line-height:20px;color:#333}
#footer{margin:0 0 0.8333em; background-color: #FFE4B5 ; padding:1.2666em 0;font-size:1.2em;line-height:1.6666} // Footerhintergrundfarbe
#footer .left{width:33%;float:left;text-align:left; padding:5px}
#footer .right{width:33%;float:right;text-align:right;padding:5px}
#footer .center{width:33%;float:right; font-size:1.2em; text-align:center}
.clear{margin:0;padding:0;clear:both}
.commentlist li{margin:0 0 1em;padding:0.5em 5px}
.comment-nav .page-numbers{margin:0 1px;padding:1px 6px;border:1px solid #EDEDED}
.comment-nav .page-numbers.current{background:#F6F6F6}
.comment-nav .prev{float:left;border:none}
.comment-nav .next{float:right;border:none}
.nocomments, .nopassword{text-align:center;padding:1.25em 0;font-size:1.6em}
.comments-number{margin:0 auto 1.5em;padding-top:1em;font-size:2em;line-height:1}
#respond #reply-title{font-size:2em;line-height:1;margin:0 0 0.5em;padding-top:20px}
.avatar{float:left;position:relative;padding-right:7px}
.comment-author{font-weight:bold;font-size:1.5em;line-height:1.1}
.comment-author cite{font-style:normal}
.comment-author .says{display:none}
.comment-meta{font-size:1.1em;font-style:italic;color:#777}
.comment-meta a{color:#777}
.commentlist p{margin:1.4545em 5px 1.4545em 0;font-size:1.1em;line-height:1.5454;font-family:verdana,'Lucida Grande',arial,sans-serif;color:#333}
.commentlist pre{background:#fff;margin:0;border:none}
.reply{font-size:12px;font-weight:bold}
.commentlist .children li{margin-left:10px;margin-top:10px}
.depth-1.parent{border:1px solid #EDEDED}
.commentlist .children li{border-left:1px solid #EDEDED}
.commentlist li{background-color:#F6F6F6}
.commentlist li.alt{background-color:#fff}
.commentlist li.bypostauthor{background-color:#E6E6E6}
#commentform{margin:0 0 4em 0}
#commentform p{margin:0 0 1em 0;font-size:12px}
.must-log-in{font-size:12px;margin-bottom:1.6666em}
#commentform textarea, #commentform input[type=text]{border:1px solid #ccc;padding:3px;font-family:verdana,Courier,Monospace;color:#444}
#commentform textarea:focus,#commentform input[type=text]:focus{color:#000;border-color:#888}
#commentform input[type=text],#commentform textarea{width:95%;font-size:12px}
#commentform #submit{height:30px;padding:3px 6px}
#page:after, .entry-content:after, .navigation:after, .clearfix:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}
#page, .entry-content, .navigation, .clearfix{display:inline-block}
* html .clearfix{height:1px}
#page, .entry-content, .navigation, .clearfix{display:block}
#rotating,#footer{border-top: none; //1px solid #ccc;border-bottom: none; //1px solid #ccc}
#pp-subscribe{border-right:none; //1px solid #ccc;border-bottom:none; //1px solid #ccc;border-left:none; //1px solid #ccc}
#pp-sidebars{border-top:none; //1px solid #ccc;border-left:none; //1px solid #ccc;border-right:none; //1px solid #ccc}
.looped .entry, .single .entry{border-bottom:1px dashed #ddd}
a{text-decoration:none;color:#0070C5}
.entry-content a{font-family:'trebuchet ms',verdana,sans-serif;text-decoration:underline}
.entry-content a:hover{background-color:#C1F0F1; text-decoration:none} //Hintergrundfarbe zu Links (bei hover) hinzugefügt
.entry-title a:hover,.entry-byline a:hover,.navigation a:hover{color:#000}
.entry-byline a{color:#777 }
.entry-byline a.entry-date:hover{text-decoration:none}
#primary.page-template .entry-content a{text-decoration:none;font-weight:normal}
#primary.page-template .entry-content a:hover,a:hover,u,ins{background-color:#C1F0F1;text-decoration:underline} //Hintergrundfarbe zum Titel (bei hover)hinzugefügt
.gnavigation a:hover{border-bottom:none} 


LG

Schau mal im Finanz-Forum auf einer Unterseite als Gast. Ich habe dort auch einen Banner rechts angeheftet.

Ich probiere das morgen mal mit eurer Seite aus.
Der Code sieht einfach aus, aber hat mich mehrere Stunden an "Ausprobieren" gekostet, gerade wegen dem Minus

Man kann das DIV einfach als erste Zeile in einen anderen Container einfügen, der die volle Breite hat.

Code:

<div style="height:620px;width:160px; position:absolute;right:-160px;top:28px;" class="ads">
xxxxx
</div>

Das Problem ist jetzt also nur noch die versch. Darstellung der Browser?

@electrofreak: jawoll und eben das sich das zusammenschiebt, aber das liegt ja wohl am Container, wahrscheinlich liegt das alles daran....

@Holger: Ich vermute an dem Punkt spielt wordpress nicht mehr mit. Das hat so ein merkwürdige Ladeverhalten der verschiedenen Container. Das fängt irgendwie in der Header.php an und wird in der Footer.php wieder geschlossen, abhängig davon ob eine Index.php existiert oder nicht....
aber testen werd ich das natürlich.

LG

Der Container ist ein bestimmter Bereich in Wordpress, richtig?

Ich habe inzwischen eine kleine Zwischenfrage:
Was macht man eigentlich, wenn man HTML-Code schreibt? Man programmiert ja nicht, sondern man ???

Der Container ist alles wo man Inhalte einfügen kann - ja.
Darin sind verschiedene andere Bereiche jeweils mit eigener php-Datei.

Header, Footer, Page, Sidebar, usw. und gesteuert durch eine einzige CSS-Datei. (Jedenfalls solange man nichts ändert). Dadurch kannst du dir zigtausende Themes runterladen und damit das Aussehen der Webseite ändern, ohne "Inhalt" zu verlieren

Das was ich jetzt gemacht liegt aber nun mal außerhalb des Containers.

LG

Wegen Wordpress:
Zum Ausprobieren erstelle im Webspace einfach eine Textdatei z.B. x1.html und kopiere dort den reinen HTML-Quelltext von irgendeiner Unterseite rein. Den Quelltext holst du dir fertig als HTML einfach über den Webbrowser.

Du kannst dann unabhängig von Wordpress erst einmal testen und störst auch den täglichen Betrieb nicht.

Für CSS fügst du den Code direkt über style="...." ein, also erstmal ohne Stylesheet. Du brauchst dann nicht immer 2 Dateien abändern.

Die Integration in den PHP-Code von Wordpress kommt dann später.

Wenn ich morgen am PC bin, guck ich mir das nochmal an, hier habe ich hält nur Safari...

Moin Q-Max,
ich habe mal ein wenig probiert.

Folgende Lösung würde funktionieren:

Bei Body noch 'margin: 5px 160px 5px 5px;' einfügen wegen der Abstände

Code:

body{
    margin: 5px 160px 5px 5px;
    font:62.5%/1.3 'trebuchet ms',verdana,'Lucida Grande',arial,sans-serif;
    text-align:center;
    color:#111
}

direkt nach '<div id="header">' oder einer anderen Stelle, wo es am einfachsten einzufügen ist:

Code:

....
<div id="header">
<div style="height:620px;width:160px; position:absolute;right:0;top:200px;">
<h2 style="font-family:verdana,'Lucida Grande',arial,sans-serif;font-size:1.5em;line-height:1.3;color:#F39404;font-weight:bold;">Unsere Partner</h2>
Bild 1<br />
Bild 2
</div>
....

Keine Ahnung, warum bei dir der Bezugspunkt anders ist.
'right:-160px;' musste ich in 'right:0;' ändern

Füge die Bilder von der Werbung doch als
<a href="xxx"><img id="yyy" src="zzz.jpg" border="0" alt="xxx" /></a>

ein, ist viel einfacher und übersichtlicher.

Ich habe inzwischen eine kleine Zwischenfrage:
Was macht man eigentlich, wenn man HTML-Code schreibt? Man programmiert ja nicht, sondern man ???

ich dachte das wüßte man wenn man so eine Signatur wie du hast

HTML nennt sich doch Seitenbeschreibungssprache und nicht Programmiersprache.

Du beschreibst doch mit dem Code nur "Aussehen", es gibt keine Interaktivität, beziehungsweise aus Code resultierende Berechnungen oder sonst was ausführbares.....das einzig Interaktive sind Hyperlinks.

Ich hoffe mal ich hab das jetzt einigermaßen so ausgedrückt wie ich das verstanden hab...

LG

@Holger: jetzt überforderst du mich

alles was ich gemacht hab löschen?

wo du Bild 1 und Bild 2 geschrieben hast, die Links zu den Bildern rein und das Ganze in die Php-Datei vom Header?


LG

@Q-Max:

Das ist nicht das, was ich meine. Mir ist klar, das die Hypertext Markup Language keine Programmiersprache sondern eine Seitenauszeichnungssprache ist, meine Frage war, was man denn dann macht. Da man HTML nicht programmieren kann, muss es ja anders heißen. Und wie es heißt, das war meine Frage!

Gegenfrage: programmierst du wirklich oder schreibst du nicht nur Code und der macht dann eben was?

Wenn man Code programmieren von "Programm" ableitet,

dann "designst" du vielleicht bei HTML

LG

Oder man auszeichnet bei HTML und stylt bei CSS...

Moin Q-Max,

alles was ich gemacht hab löschen?

Du kannst das DIV ja auch erst einmal zusätzlich einbauen, um zu sehen wo es auf dem Bildschirm landet
Leider weiss man bei so vielen Definitionen meistens nicht wo genau der Bezugspunkt ist. Testen solltest du immer auch mit allen möglichen Browsern wie IE 7-10, Firefox, Chrome, Safari, mit dem IPhone, unter Android, ...
Das Ding platziert sich manchmal ganz woanders.

wo du Bild 1 und Bild 2 geschrieben hast, die Links zu den Bildern rein und das Ganze in die Php-Datei vom Header?

genau

Falls du doch damit aufhören willst, HTML und CSS zu lernen, wäre das was für dich (nur für heute kostenlos):

Freeware.de - kostenlose Vollversion

-electrofreak

Also auch wenn ich mit 54 Jahren schon langsam an Gehirnverkalkung leide, da ist dann doch unter meinem Niveau.

Mein größtes Problem sind denke ich eh meine mangelnden Englischkenntnisse, sonst wäre wohl vieles wesentlich klarer und für mich verständlicher.

Außerdem kann ich euch doch hier löchern und eurer Gehirnverkalkung so vorbeugen, ich tue also noch was fürs Gesundheitswesen.

LG

Ich habe gesehen, du hast den Code bereits eingebaut

Probiere mal
right: -160px;

Das scheint doch besser zu passen.

Zitat von Q-Max

Also auch wenn ich mit 54 Jahren schon langsam an Gehirnverkalkung leide, da ist dann doch unter meinem Niveau.

Mein größtes Problem sind denke ich eh meine mangelnden Englischkenntnisse, sonst wäre wohl vieles wesentlich klarer und für mich verständlicher.

Außerdem kann ich euch doch hier löchern und eurer Gehirnverkalkung so vorbeugen, ich tue also noch was fürs Gesundheitswesen.

LG

Meine Englischkenntnisse sind wahrscheinlich schlimmer. Ich will dich auch nicht abhalten oder so, sondern wollte es nur sagen, weil es ja vielleicht bei Problemen helfen kann (du baust es erst so im Programm, guckst dann den Code an und findest dein Problem oder so...

Das war ne schwere Geburt, im Grunde alles irgendwie zusammengemischt....

ich habs jetzt so gemacht:

style.css

PHP-Code:

#seitengrafik {
//position:absolute;
//right:-110px;
//margin-left:40px;
padding: 5px,5px;
//top:100px;
width:150px;
height:100px;
display:block;
background:url('images/jm-werbung.png') no-repeat;     }

#seitengrafik a {
width:150px;
height:100px;
display:block;
background:none;
}
#seitengrafik_02 {
//position:absolute;
//left:50%;
//margin-left:105px;
padding: 5px,5px;
//top:280px;
width:150px;
height:100px;
display:block;
background:url('images/vdp2012-1.jpg') no-repeat;     }

#seitengrafik_02 a {
width:150px;
height:100px;
display:block;
background:none;
} 


header.php

PHP-Code:

<div style="height:620px;width:160px; position:absolute;right:-160px;top:310px;">
                         <h2 style="font-family:verdana,'Lucida Grande',arial,sans-serif;font-size:1.5em;line-height:1.3;color:#F39404;font-weight:bold;">Unsere Partner</h2>
                         <div id="seitengrafik"><a href="https://www.jmeissner.de" title="Sporbekleidung, T-Shirtdruck und mehr"></a></div>
                         <div id="seitengrafik_02"><a href="https://www.gvdp.net"  title="von der P&uuml;tten - Glas und Geb&auml;udereinigung - Hausmeisterdienste"></a></div>
                 </div> 


Im Firefox und im Opera ist alles fein, nur der IE zickt natürlich rum.

Könnt ihr mal mit Firebug schauen ob ich da noch was falsch hab?

LG

Ich glaube, du musst für wegen IE keine Sorgen machen. Den benutzt keiner mehr. Spätestens bei Win 8 merkt man, dass der ******* ist.

@electrofreak: schon richtig, aber das kann ich mit firebug auch machen.

Zumal ich immer Bedenken hab, das der Code von diesen Programmen nicht "sauber" ist und dann fängt das Theater wieder an.

LG