Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: Anfänger braucht Hilfe für css und Div

  1. #1
    HTML Newbie
    Registriert seit
    18.11.2010
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Anfänger braucht Hilfe für css und Div

    Hallo Freunde. Ich bin ein absoluter Anfänger bzgl. css und html und habe mich durch die ersten Befehle "durchgewurschtelt".

    Ich bin nun dabei, mir eine Seite selbst aufzubauen und habe die ersten Schritte hinter mir.

    Ich habe mir vor der Erstellung einen Rohentwurf auf einem Blatt Papier gezeichnet und dann anhand von befehlsreferenzen und einigen Tutorials versucht, den Anfang zu machen.

    Allerdings stimmt da etwas nicht.

    Ich habe eigentlich folgendes vor:

    Ich möchte eine Seite haben, wo zunächst einmal 3 Divs nebeneinander sind.
    Das linke Div auf der Webseite mit dem Namen "mainnav", soll das Menü mit einem entsprechenden Hintergrund haben und immer ganz links oben im Div "container" beginnen und bis zum unteren Ende des Containerdivs reichen und dann 167 Pixel breit sein.

    Das zweite Div ist ein mittlerer Teil des oberen Webseitenbereiches, mit dem Namen "header2", der ebenfalls ganz oben, jedoch rechts vom 1. Div, also dem Menüdiv, anfangen soll.

    Das 3. und letzte Div ist ein reines Logodiv mit dem Namen "header1", indem sich das Grafiklogo befindet, welches rechts auf der Webseite erscheinen und welches nach unten in die Webseite hineinragen soll.

    Leider funktioniert es bisher nur fast.

    Die Problematik, die ich nun habe, ist die:

    Ich bekomme es nicht hin, dass das mittlere Div, also das Überschriftendiv, sich rechts vom Menüdiv anordnet. Obwohl ich mehrere Versuche gemacht habe, die Breite zu verändern, ändert sich nichts daran, dass das DIV immer noch bis an den linken Rand geht. Dabei verschwindet natürlich noch ein Teil der Überschrift unter dem Menü.


    Nun habe ich folgendes css dazu erstellt:

    EDIT:

    Um Euch unnötiges lesen zu ersparen, habe ich den Code hier gelöscht und in der veränderten Version weiter unten neu aufgeführt.

    EDIT ENDE:

    Wer kann mir da denn von Euch Experten helfen?

    Schöne Grüße und schon mal ein dickes Dankeschön.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von forum-hilfenutzer (19.11.2010 um 00:53 Uhr)

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Anfänger braucht Hilfe für css und Div

    Verzichte auf die absolute Positionierung von #mainnav und setzte #header2 auf "float: right;".

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    18.11.2010
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Anfänger braucht Hilfe für css und Div

    Das funktioniert leider nicht. Bei Deiner Variante wird der header 2 dann unterhalb von dem Div "Logo" platziert und nicht in der Mitte zwischen dem Menü und dem Logo.
    Oder kommt es auch noch darauf an, wo man den "float-Befehl" hinsetzt?

  4. #4
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Anfänger braucht Hilfe für css und Div

    Nein, die Reihenfolge der Eigenschaften innerhalb eines Selektors ist egal.

    Ich glaube ich habe deinen Text falsch verstehen. Mit float: left sollte es ggfs. passen. Probier es aus. Dein Hauptproblem oben war die absolute Positionierung. Dadurch hast Du das mainnav aus dem Fluss genommen und konntest es nicht mehr in Relation zu den anderen setzen. Verzichte auf sowas.

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    18.11.2010
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Anfänger braucht Hilfe für css und Div

    Geht auch nicht. Jetzt wird das Menüdiv unterhalb des Headerdivs angezeigt.

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    18.11.2010
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Anfänger braucht Hilfe für css und Div

    Ich habe den css Code und den html Code mal verändert. Es sieht nun so aus, dass rechts nun das Grafiklogo steht, links davon das Menüdiv und unter dem Grafiklogo nun das Headerdiv, welches noch zusätzlich vom Menüdiv überlagert wird.

    Anbei nun der css und der html Code.

    Hier der CSS Code:

    Code:
    body
    {
    margin: 0;
    padding: 0;
    font: 85% arial, hevetica, sans-serif;
    background-color: #000438;
    }
    
    #container
    {
    margin: 1em auto;
    width: 920px;
    height:740px;
    
    background-color: #000000;
    border: 5px solid #858585;
    }
    
    #mainnav
    {
    float:right;
    z-index: 3;
    left: 167px;
    top: 18px;
    height: 100%;
    width: 17%;
    background-image: url(Menuehintergrund.jpg);
    background-repeat: no-repeat;
    font-size: 15px;
    font-style: italic;
    color:#FFFF10;
    margin: 2px;
    padding: 2px;
    
    }
    
    #header1
    {
    float:right;
    z-index: 1;
    width: 217px;
    height: 456px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: #000000;
    
    
    }
    
    #header2
    {
    float:right;
    z-index: 2;
    height: 24%;
    background-color: #000000;
    font-size: 27px;
    font-style: italic;
    color: #FFFF10;
    margin: 0;
    padding: 0;
    clear:right;
    }
    Und nun der html Code:

    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta name="robots" content="index,follow">
    <meta name="language" content="deutsch, de">
    <title>Der zzzzzzzzzz</title>
    <meta name="keywords" content="a,b,c,d ">
    <meta name="description" content="testbeschreibung">
    <link rel="stylesheet" href="stylesheet1.css" media="screen">
    <meta name="msnbot" content="all">
    <meta name="city" content="xx">
    <meta name="country" content="Germany">
    <meta name="zipcode" content="55555"></head>
    <div id="container">
            <div id="header1">
    <img src="test.gif" width="100%" height="100%" alt="test" ></div>
    <div id="header2" title="Das ist eine Überschrift für die  Website" >
    Überschrift </div>
            <div id="mainnav">
    
    <li><a href="shows.html">Die Dienstleistung</a></li> <br> <br>
    <li><a href="referenzen_pdf.html">Referenzen</a></li>  <br><br>
    <li><a href="videos.html">Videos</a></li> <br> <br>
    <li><a href="pressefotos.html">Pressefotos</a></li> <br>   <br>
    <li><a href="pressemappe_pdf.html">Presseberichte</a></li> <br> <br>
    <li><a href="kundenstimmen.html">Kundenstimmen</a></li> <br> <br>
    <li><a href="kontaktformular.php">Kontakt</a></li> <br>   <br>
    <li><a href="newsletter_abonnieren.html">Newsletter</a></li>  <br>  <br>
    <li><a href="http://www.twitter.com/xx"TARGET="_blank">Auf Twitter folgen</a> </li> <br>  <br>
    <li><a href="kooperation.html">Kooperationspartner</a></li> <br>  <br>
    <li><a href="impressum.html">Impressum</a></li>  </div> <br>
    <!--<div id="footer">Test</div> -->
    </div>
    </body>
    </html>
    Ich komme einfach nicht weiter. Vielleicht sieht noch jemand einen Fehler im css Code oder im html Code. Bin für jeden Tipp dankbar.

  7. #7
    HTML Newbie
    Registriert seit
    21.11.2010
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Anfänger braucht Hilfe für css und Div

    Hallo.

    An deinem Code ist so einiges falsch.
    Ich habe mal einige Änderunden vorgenommen. Das dürfte deinen Wünschen am nächsten kommen.
    Falls noch Fragen sind Fragen.

    HTML
    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta name="robots" content="index,follow">
    <meta name="language" content="deutsch, de">
    <title>Der zzzzzzzzzz</title>
    <meta name="keywords" content="a,b,c,d ">
    <meta name="description" content="testbeschreibung">
    <link rel="stylesheet" href="stylesheet1.css" media="screen">
    <meta name="msnbot" content="all">
    <meta name="city" content="xx">
    <meta name="country" content="Germany">
    <meta name="zipcode" content="55555">
    </head>
    <body>
    <div id="container">
    
            <div id="mainnav">
    
    <li><a href="shows.html">Die Dienstleistung</a></li>
    <li><a href="referenzen_pdf.html">Referenzen</a></li>
    <li><a href="videos.html">Videos</a></li>
    <li><a href="pressefotos.html">Pressefotos</a></li>
    <li><a href="pressemappe_pdf.html">Presseberichte</a></li>
    <li><a href="kundenstimmen.html">Kundenstimmen</a></li>
    <li><a href="kontaktformular.php">Kontakt</a></li>
    <li><a href="newsletter_abonnieren.html">Newsletter</a></li>
    <li><a href="http://www.twitter.com/xx"TARGET="_blank">Auf Twitter folgen</a> </li>
    <li><a href="kooperation.html">Kooperationspartner</a></li>
    <li><a href="impressum.html">Impressum</a></li>  </div>
    <div id="header1">
    <img src="test.gif" width="100%" height="100%" alt="test" ></div>
    <div id="header2" title="Das ist eine Überschrift für die  Website" >
    Überschrift </div>
    <!--<div id="footer">Test</div> -->
    </div>
    </body>
    </html>
    CSS
    Code:
    body
    {
    margin: 0;
    padding: 0;
    font: 85% arial, hevetica, sans-serif;
    background-color: #000438;
    }
    
    #container
    {
    margin: 1em auto;
    width: 920px;
    height:740px;
    
    background-color: #000000;
    border: 5px solid #858585;
    }
    
    #mainnav
    {
    float:left;
    height: 100%;
    width: 167px;
    background-image: url(Menuehintergrund.jpg);
    background-repeat: no-repeat;
    font-size: 15px;
    font-style: italic;
    color:#FFFF10;
    margin: 2px;
    padding: 2px;
    
    }
    
    #header1
    {
    float: left;
    width: 217px;
    height: 456px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: #000000;
    
    
    }
    
    #header2
    {
    height: 24%;
    background-color: #000000;
    font-size: 27px;
    font-style: italic;
    color: #FFFF10;
    margin: 0;
    padding: 0;
    }
    Du musst natürlich noch die Grössen anpassen.

    Gruss
    Elroy

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    18.11.2010
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Anfänger braucht Hilfe für css und Div

    An deinem Code ist so einiges falsch.
    Ich habe mal einige Änderunden vorgenommen. Das dürfte deinen Wünschen am nächsten kommen.
    Falls noch Fragen sind Fragen.
    Merkwürdigerweise geht das so nicht. Ich muss aber gestehen, dass ich, da ich zwischenzeitlich noch nicht wieder hier hineingesehen habe, nach Recherchen den Code selbst noch einmal verändert. Ich denke, ich habe es mittlerweile ganz gut hinbekommen, dass ich die Seite so aufgebaut bekomme, wie ich es vom Design her möchte.

    Aber vielen lieben Dank für die Hilfe, die für mich schon jetzt mehr als wertvoll war.

    Der html code ist nun auch validiert und ist laut "validator.w3.org - Check" jetzt fehlerfrei und damit mit den aktuellen Standards konform.

    Ob der Stylsheet so ok ist, vermag ich nicht zu sagen, da ich dafür keinen Validator kenne.


    Anbei mal nun der komplett überarbeitete stylesheetcode und der dazugehörige html Code.

    Code:
    body
    {
    margin: 0;
    padding: 0;
    font: 85% arial, hevetica, sans-serif;
    background-color: #000000;
    }
    a:link {
      text-decoration: none;
      color: #FFFF10;
    
    }
    
    a:hover {
    background-color:#000000;
    font-color : #ffff00;
    }
    
    a:visited {
    color : #ffffff;
    }
    
    #container
    {
    margin: 1em auto;
    width: 920px;
    height:740px;
    
    background-color: #000000;
    border: 2px solid #A23626;
    }
    
    #menue
    {
    
    float:right;
    z-index: 4;
    height: 95%;
    width: 17%;
    background-image: url(Menuehintergrund.jpg);
    background-repeat: no-repeat;
    font-size: 15px;
    font-style: italic;
    color:#FFFF10;
    margin: 2px;
    padding: 2px;
    border: 2px solid #A23625;
    
    }
    
    #right
    {
    float:right;
    z-index: 2;
    width: 217px;
    height: 456px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: #000000;
    
    
    }
    
    #mitte
    {
    float:right;
    z-index: 4;
    height: 15%;
    width: 56%;
    background-color: #000000;
    font-size: 27px;
    font-style: italic;
    text-align:right;
    color: #FFFF10;
    margin: 0px;
    padding: 0px;
    border: 5px solid #000000;
    
    }
    
    #seiteninhalt
     {
    float:right;
    position:absolute;
    top:150px;
    left:330px;
    z-index: 0;
    height: 50%;
    width: 40%;
    background-color: #000000;
    font-size: 14px;
    font-style: italic;
    text-align: left;
    text-indent: 30px;
    line-height: 25px;
    overflow: scroll;
    color: #A23626;
    margin: 2px;
    padding: 2px;
    border: 5px solid #FFFFFF;
    clear:left;
    }
    
    #footer
    {
    
    height: 2%
    width: 100%;
    background-color: #A23626;
    text-align:center;
    
    }
    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta name="robots" content="index,follow">
    <meta name="language" content="deutsch, de">
    <title>Der Zauberkünstler Robert Marteau. Ein Meister perfekter Unterhaltung!</title>
    <meta name="keywords" content="Zauberkünstler, NRW, Entertainer, Tisch, Bühnen, Messe, Robert Marteau, Kulturevent, mental ">
    <meta name="description" content="Der Zauberkünstler Robert Marteau ist ein wahrer Meister perfekter zauberhafter und mentaler Unterhaltung.">
    <link rel="stylesheet" href="stylesheet3.css" media="screen">
    <meta name="msnbot" content="all">
    <meta name="city" content="Attendorn">
    <meta name="country" content="Germany">
    <meta name="zipcode" content="57439"></head>
    <div id="container">
            <div id="right">
    <img src="Zauberkuenstler_Robert_Marteau_mit_Glaskugel.gif" width="100%" height="100%" alt="Zauberkünstler Robert Marteau" ></div>
    
    <div id="seiteninhalt">
    Robert Marteau ist in der Tat ein wahrer Meister perfekter Unterhaltung. Von der ersten bis zur letzten Minute zelebriert er
    höchst interessant, unterhaltsam und fesselnd, seine äußerst verblüffenden und täuschenden Shows.<p>
    Der erstklassige und erfahrene Zauberkünstler aus NRW ist bestimmt auch für Sie garantiert der richtige Entertainer und ein
    äußerst kompetenter Partner für Ihr Anliegen, Ihre Veranstaltung professionell mit zu gestalten.<br>
    Ob am Tisch, auf Bühnen, während der Messe oder Hausmesse, für den besonderen Kulturevent, Firma oder einfach als...
    "Privatzauberkünstler"?!<p>
    Gerne wird Robert Marteau auch für Sie veranstaltungsspezifisch kreativ und effektiv tätig. So entwickelte er beispielsweise
    für die Leichtathletik EM spezielle Kunststücke, mit denen er die VIPs themenorientiert und glänzend unterhielt, unter
    anderem den Kugelstoßer Ralf Bartels.<p>
    Die erstklassigen Referenzen von Robert Marteau sprechen für sich selbst. Schauen Sie sich diese doch einmal im entsprechenden
    Menüpunkt an. Dort finden Sie entsprechende PDF Dateien zum Download. <br>
    Wenn Sie also mehr als unterhalten werden wollen, dann kommen Sie an Robert Marteau nicht vorbei.
    </div>
    <div id="mitte" title="Zauberkünstler Robert Marteau, Hauptseite." >
    &#160;&#160;Der Zauberkünstler Robert Marteau.<br>Ein Meister perfekter<br> Unterhaltung! </div>
    <div id="menue"> <br> <br><br> <br>
    <ul>
    <li><a href="shows.html">Die Shows</a><br><br></li>
    <li><a href="referenzen_pdf.html">Referenzen</a><br><br></li>
    <li><a href="videos.html">Videos</a><br><br></li>
    <li><a href="pressefotos.html">Pressefotos</a><br><br></li>
    <li><a href="pressemappe_pdf.html">Presseberichte</a><br><br></li>
    <li><a href="kundenstimmen.html">Kundenstimmen</a><br><br></li>
    <li><a href="kontaktformular.php">Kontakt</a><br><br></li>
    <li><a href="newsletter_abonnieren.html">Newsletter</a><br><br></li>
    <li><a href="http://www.twitter.com/ZaubererMarteau"TARGET="_blank">Auf Twitter folgen</a><br><br> </li>
    <li><a href="kooperation.html">Kooperationspartner</a><br><br></li>
    <li><a href="impressum.html">Impressum</a></li>
    </ul>
    
    </div>  <!--DIV Menü ende-->
     <div id="footer"></div>
    </div> <!-- Div Container ende-->
    
    
    </body>
    
    
    </html>
    Nun sind jedoch zwei weitere Probleme aufgetaucht, welche ich derzeit noch nicht bewältigt bekomme.

    1. In den 3 Browsern, opera 10.63, Firefox 3,6.12 und den IE 8,06, die ich als Testbrowser nutze, wird im Firefox und dem IE die Seite jeweils anders angezeigt. Nicht viel, nur eine Verschiebung des "Inhalts-Div" gegenüber dem Opera. Ich weiß aber nicht, woran das liegt und frage mich, wie kann ich die Formatierung so ändern, dass die Seite in allen 3 Browsern identisch aussieht.

    2. Ein Footer, der eigentlich, wie es der Name schon sagt, untern auf der Webseite erscheinen soll, erscheint gar nicht. Offenbar sehe ich den Wald vor lauter Bäumen nicht mehr.

    Ich hoffe, ich kann da wieder auf Euer Fachwissen zurückgreifen.

    Vielen lieben Dank.

    Robert

  9. #9
    HTML Newbie
    Registriert seit
    21.11.2010
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Anfänger braucht Hilfe für css und Div

    Zitat Zitat von forum-hilfenutzer Beitrag anzeigen
    Der html code ist nun auch validiert und ist laut "validator.w3.org - Check" jetzt fehlerfrei und damit mit den aktuellen Standards konform.
    Dann solltest du diesen Code auch hier posten.
    In dem Code denn du postest wird kein Body geöffnet und das wird vom Validator garantiert als Fehler angezeigt.

    Die restlichen Antworten hast du ja schon im anderen Forum erhalten.

    Gruss
    Elroy

  10. #10
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Anfänger braucht Hilfe für css und Div

    Nach HTML 4 hast Du aber mit Sicherheit keinen validen HTML-Code. Besonders das fehlende <body> dürfte ein eindeutiger Fehler sein.

    Was für eine "Verschiebung" gibt es denn in den Browsern? Kannst Du das bitte noch ergänzen?

    Und der Footer hat keinen Inhalt - wie sollte er dargestellt werden? Mach mal ein geschütztes Leerzeichen rein.

Ähnliche Themen

  1. anfänger braucht hilfe bei links,php,get
    Von The User im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 08.11.2007, 20:36
  2. Anfänger braucht Hilfe!
    Von Martin279 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 23
    Letzter Beitrag: 01.04.2007, 19:44
  3. Anfänger braucht hilfe mit Übergabe
    Von pipapo312 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 13.08.2006, 11:05
  4. Anfänger braucht mal Hilfe
    Von neelix im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 30.08.2005, 13:27

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •