ilch Forum » Allgemein » HTML, PHP, SQL,... » adobe dreamweaver cs4 ertselle seite

Geschlossen
  1. #1
    User Pic
    Vips Mitglied
    Registriert seit
    19.06.2008
    Beiträge
    238
    Beitragswertungen
    0 Beitragspunkte
    servus

    ich erstelle zurzeit eine neue seite mit adobe dreamweaver cs 4 , und da hab ich ein problem . ich hab den backround gefixed und und meine buttons auf den background mittel css ausgerichtet, aber wenn ich die index jetzt im browser aufrufe und die fenstergröße des browser ändere verschieben sich die buttons gegenüber dem background. woran kann das liegen.

    thx im vorraus

    <style type="text/css">
    <!--
    body,td,th {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 9px;
    }
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	background-image: url(Empous%20Records%20logo2vm.jpg);
    	background-repeat: no-repeat;
    	background-color: #DFE9AC;
    	background-position: center top;
    	background-attachment: fixed;
    }
    .button1 {
    	position: absolute;
    	top: 97px;
    	right: 468px;
    }
    .button2 {
    	position: absolute;
    	top: 148px;
    	right: 283px;
    }
    .button3 {
    	position: absolute;
    	top: 222px;
    	right: 174px;
    }
    .button4 {
    	position: absolute;
    	top: 547px;
    	right: 605px;
    }
    .button5 {
    	top: 529px;
    	right: 408px;
    	position: absolute;
    }
    .button6 {
    	position: absolute;
    	top: 503px;
    	right: 264px;
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
    
    <body position: fixed; onload="MM_preloadImages('release 2.gif','Label 2.gif','artists2.gif','link 2.gif','Kontakt2.gif','impressum2.gif')">
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('artists','','artists2.gif',1)"><img src="artists.gif" name="artists" width="100" height="50" border="0" class="button3" id="artists" /></a>
    
    <a href="lol" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Label','','Label 2.gif',1)"><img src="Label.gif" name="Label" width="100" height="50" border="0" class="button2" id="Label" /></a>
    
    
    <a href="lol" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('link','','link 2.gif',1)"><img src="link.gif" name="link" width="100" height="50" border="0" class="button4" id="link" /></a>
    
    <a href="lol" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('kontakt','','Kontakt2.gif',1)"><img src="Kontakt.gif" name="kontakt" width="100" height="50" border="0" class="button5" id="kontakt" /></a>
    
    <a href="lol" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('impressum','','impressum2.gif',1)"><img src="impressum1.gif" name="impressum" width="100" height="50" border="0" class="button6" id="impressum" /></a>
    
    <a href="lol" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('release','','release 2.gif',1)"><img src="release.gif" name="release" width="100" height="50" border="0" class="button1" id="release" /></a>
    
    </body>
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    annemarie gelöschter User
    lern bitte erstmal HTML =/
    danach reden wir über dein CSS problem ...
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Vips Mitglied
    Registriert seit
    19.06.2008
    Beiträge
    238
    Beitragswertungen
    0 Beitragspunkte
    wenn du die fehlente tabelenstruktur meinst das ist das problem es geht nicht mit einer tabele da die buttons in einer tabele nicht so ausgerichtet werden das es auf den background past

    ansonsten hätte ich warscheinlich auch kein problem


    Zuletzt modifiziert von Vips am 03.08.2009 - 18:44:30
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    annemarie gelöschter User
    HTML != Tabellen

    nein, ich rede nicht über tabellen! aber selbst die verhunzteste dreamweaver vorlage macht dir einen korrekten doctype und schliest auch das HTML tag wieder...
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Vips Mitglied
    Registriert seit
    19.06.2008
    Beiträge
    238
    Beitragswertungen
    0 Beitragspunkte
    das ist nicht die gesamte index wusste ja nicht das du die umbedingt brauchst das ist nur der wichtige code
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.646
    Beitragswertungen
    54 Beitragspunkte
    So werden die Buttons links oben ausgerichtet.
    Diese verschieben sich erst, wenn das Browser-Fenster kleiner, als die Aneinanderreihung der Buttons ist.

    Verhindern kannst du dies mit folgendem
    <div style="width:500px"> BUTTONS </div>

    Gruß
    Jan
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    Vips Mitglied
    Registriert seit
    19.06.2008
    Beiträge
    238
    Beitragswertungen
    0 Beitragspunkte
    ja aber das problem ist das die buttons über den ganzen background verteilt sind und nicht nur seitlich angeordnet sind
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.646
    Beitragswertungen
    54 Beitragspunkte
    Poste doch einfach mal den Link zur Seite.
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    annemarie gelöschter User
    ZitatZitat geschrieben von annemarie
    lern bitte erstmal HTML =/
    danach reden wir über dein CSS problem ...


    !!! darum gehts!

    1. ohne korrekten header behandelt der user agent (der browser) deine dokumentenformatierung immer etwas unterschiedlich!
    2."url(Empous%20Records%20logo2vm.jpg);" - aus kompatibilitätsgründen und der hohen fehlerrate dieser schreibweise gewöhnt man sich an leerzeichen dur "-" oder "_" zu ersetzen
    3. der ganze javascriptdreck zum wechseln eines images ist mit CSS wesentlich kompatibler und resourcenschonender
    4. "<body position: fixed; " position:fixed hat hier GARNICHTS zu suchen, wenn dann sollte es wenigstens im <body>-inline style stehen
    5. '<a href="lol" 'ist inkorrekt, ist dir kein pfad bekannt worauf der link verweisen soll, so benutze das raute zeichen "#" (auch hash im englischen genannt).
    benutzt du javascript frameworks wie jquery bei denen du links nachträglich eine onclick funktion oder andere funktionalität verleihst, so setze als href bitte "javascript:void(0);"
    6. deinem image attribut fehlt ein alt tag der das bild beschreibt

    sooooo und nu das wo sich jeder einmal an den kopf schlagen darf und dann darf er sich denken ouch oder wie doof.

    dein Background ist zwar gefixt, dennoch ist er mittig des browserfensters ausgerichtet. richte ihn doch einmal nach rechts aus, dann startet er dort, somit sollte deine angepeilte button position die ja anscheinend synchron mit dem hintergrund bleiben sollte wieder passen, bzw, sich jetzt so verhalten wie du es gewünscht hattest

    background-position: right top;


    oder

    background: url(Empous%20Records%20logo2vm.jpg) #DFE9AC no-repeat right top fixed


    alles in einer zeile ist auch praktisch zwinker

    also bitte einen der beiden codeblöcke bei dir anwenden dann sollte auch dein gewünschtes verhalten auftreten.


    Zuletzt modifiziert von annemarie am 04.08.2009 - 20:06:54
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    Vips Mitglied
    Registriert seit
    19.06.2008
    Beiträge
    238
    Beitragswertungen
    0 Beitragspunkte
    die seite liegt immoment noch local

    hier mal ein bild wie es aussehen soll und die background image soll mittig sein

    87.http.fs.ngz-server.de/7/8/00/00/87/Unbenannt-1.jpg
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    annemarie gelöschter User
    was du dir vorstellst wirst du so nicht erreichen!

    mach das hintergrundbild in ein wrapper div, danach in das wrapperdiv positionierst du die buttons absolut.

    aber der body wird seinen mittelpunkt immer nach der größe des browsers ermitteln.

    sprich, umso breiter der browser umso mehr abstand nach links und rechts!

    wo wir auch schon beim 2ten problem wären, deine buttons sind rechtsbündig positioniert, also werden sie auch nur in genau einer auflösung genau so liegen wie du es möchtest, in jeder anderen wird das hintergrundbild zuweit rechts oder links von den erdachten positionen sein!

    lies wenigstens hier die kleine CSS einführung!
    vielleicht zeigst du dann etwas mehr verständniss für die funktionsweise von CSS


    Zuletzt modifiziert von annemarie am 04.08.2009 - 20:37:45
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    Vips Mitglied
    Registriert seit
    19.06.2008
    Beiträge
    238
    Beitragswertungen
    0 Beitragspunkte
    danke euch erstmal

    werde mir deinen link mal durchlesen mal sehen wie es dann weiter geht
    0 Mitglieder finden den Beitrag gut.
  13. #13
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.646
    Beitragswertungen
    54 Beitragspunkte
    ZitatZitat geschrieben von annemarie
    was du dir vorstellst wirst du so nicht erreichen!

    mach das hintergrundbild in ein wrapper div, danach in das wrapperdiv positionierst du die buttons absolut.

    aber der body wird seinen mittelpunkt immer nach der größe des browsers ermitteln.

    sprich, umso breiter der browser umso mehr abstand nach links und rechts!

    wo wir auch schon beim 2ten problem wären, deine buttons sind rechtsbündig positioniert, also werden sie auch nur in genau einer auflösung genau so liegen wie du es möchtest, in jeder anderen wird das hintergrundbild zuweit rechts oder links von den erdachten positionen sein!

    lies wenigstens hier die kleine CSS einführung!
    vielleicht zeigst du dann etwas mehr verständniss für die funktionsweise von CSS
    Natürlich ist dies möglich.
    Vielleicht solltest du dir noch ein paar Tutorials durchlesen, liebe annemarie.

    Beispiel: myphptest.pytalhost.com/beispiel.html
    Funktioniert sogar einwandfrei im IE6.
    0 Mitglieder finden den Beitrag gut.
  14. #14
    User Pic
    annemarie gelöschter User
    lieber JanKrug,

    vielleicht solltest du dein wissen etwas auffrischen denn anscheinend hast du (achtung liste :D)

    1. seine gepostete struktur übersehen, mit dieser wäre das verhalten NICHT über CSS erzwingbar gewesen.
    2. ist dein beispiel sehr nett, dennoch semantisch unter aller sau und komplett an den von mir vorgeschriebenen lösungsweg vorbei , den du anscheinend einfach überlesen hast.
    3. bitte verwende, wenn du schon beispiele postest doch bitte einen richtigen doctype genauso wie die angabe eines character encodings.
    4. <center> ist eine schlechte angewohnheit (nein, argumente wie "aber es funktioniert doch" sind stumpfsinn)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>XHTML 1.0 Strict vorlage</title>
    <style type="text/css" media="screen">
        div#wrapper {height:200px; width:200px; background:#000; margin:0 auto; position:relative;}
        div#menupoint_1,
        div#menupoint_2,
        div#menupoint_3 {position:absolute; height:30px; width:30px; background:#FCC;}
        div#menupoint_1 {top:10px; left:10px;}
        div#menupoint_2 {top:50px; left:70px;}
        div#menupoint_3 {top:110px; left:120px;}
    </style>
    </head>
    
    <body>
        <div id="wrapper">
            <div id="menupoint_1">
                
            </div>
            <div id="menupoint_2">
                
            </div>
            <div id="menupoint_3">
                
            </div>
        </div>
    </body>
    </html>


    nur zum verständniss zwinker

    gruß annemarie`
    0 Mitglieder finden den Beitrag gut.
  15. #15
    User Pic
    Jan Hall Of Fame
    Registriert seit
    17.01.2007
    Beiträge
    3.646
    Beitragswertungen
    54 Beitragspunkte
    zu 1.: Meinst du diesen Link? 87.http.fs.ngz-server.de/7/8/00/00/87/Unbenannt-1.jpg
    Warum passt mein Beispiel deiner Meinung nach nicht?
    zu2.: Das Beispiel sollte nur zeigen, dass eine Umsetztung möglich ist, obwohl du dies verneint hast.
    Es bleibt ein simples Beispiel, dass deine Aussage widerlegen und nicht die bestmögliche Umsetzung präsentieren soll.
    zu 3.: siehe 2
    zu 4.: siehe 2
    0 Mitglieder finden den Beitrag gut.
  16. #16
    User Pic
    annemarie gelöschter User
    *kopfschüttel*

    hier ging es nie um optimalen lösungsweg, noch um ein aussage meinerseits das die genannte problemstellung überhaupt nicht in CSS realisierbar ist.

    les meinen posts einfach noch einmal, vielleicht verstehst du ja dann was ich sagen wollte, aber du versuchst mir gerade wörter in den mund zu legen.

    thema ist für mich gegessen.


    Zuletzt modifiziert von annemarie am 05.08.2009 - 08:42:43
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten