• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Scrollbares <td>

Status
Für weitere Antworten geschlossen.
Es gibt kein Tag namens <image>, das heißt <img>. Außerdem ist das Tag inhaltsleer, d.h. es gibt kein schließendes Tag. In XHTML werden Inhaltsleere Elemente überdies so geschrieben: <img ... />. Außerdem hat das img-Tag ein Pflicht-Attribut, nämlich "alt", mit dem ein Alternativtext angegeben werden muss, wenn das Image nicht geladen werden kann.

Des weiteren fehlt Dir ein DOCTYPE und die Definition eines Zeichensatzes.

In Deinem Stylesheet sehe ich ein overflow:hidden. Von sowas würde ich generell abraten, wenn Scrollbalken versteckt werden, kann man u.U. nicht mehr den gesamten Inhalt eines Elements einsehen und das wäre ziemlich schlecht! Insbesondere, wenn Du die Höhe Deines <h1> auf 80px beschränkt hast, das Image nicht geladen werden kann, dann der Alternativtext angezeigt wird, der Text vom Anwender vergrößert wird und der Text dann nicht mehr ins Element passt - schwupp. Weg.

Dann sind da noch ein paar Feinheiten in Deinem Stylesheet...
 
Die hatte ich übersehen. float ist Dein Freund.
Code: 
ul { float:left; }
Das ist die Kurzantwort. Die Langantwort wurde jetzt den "Textfluss" erklären, auf "Block-Elemente" und "Inline-Elemente" eingehen, Dir erklären, warum mit dem float Dein Content vom Menu überlappt wird und dass Du das mit nem margin-left lösen kannst, wenn Du willst. :-)
Ach ja, und "wer float sagt, muss auch clear sagen" käme noch hinzu.
 
ok, die <ul> und das (der/die was weiß ich :-D) <div> habe ich jetzt immerhin schonmal nebeneinander.
jetzt habe ich noch folgendes problem:

mein menü ist 151px breit. die div rechts daneben soll den rest des bilschirms einnehmen. wenn ich im style-sheet jetzt bei dem div width:100%; angebe rutscht das div wieder unter das menü. wenn ich width:auto angebe zeigt es keine wirkung
hast du eine Idee wie ich das hinbekomme?

Gruß
Simon

p.s. ich hoff ich geh dir nicht zu sehr auf die nerven...
 
Ja, die Idee hab ich ansatzweise schon beschrieben. Du brauchst einen Abstand auf der linken Seite. margin-left:160px; oder so. Dann wird das div entsprechend kleiner.

P.S.: Wir haben Dich doch dazu genötigt, HTML&CSS richtig zu lernen, das hat jetzt nichts mit nerven zu tun, wenn dann sollst Dus richtig lernen, also frag nur :-)
 
also, hier ist mal ein screenshot im anhang. so soll das am ende etwa aussehen, das menü rechts bekommt natürlich noch andere buttons. und das div unten (TEST) soll quasi zwischen die beiden menüs.

ich bekomms nicht hin...
 

Anhänge

  • screenshot1.jpg
    screenshot1.jpg
    42,5 KB · Aufrufe: 5
Wieso muss das eigentlich immer in 5 Minuten alles fertig sein? :-)

HTML und CSS sind vielleicht leicht, aber nicht trivial. Ohne die Basics geht das nunmal nicht, und Du willst doch auch verstehen, was Du da tust und nicht die selben Fehler immer und immer wieder machen, oder?

Also nach wie vor mein Tipp zur Vorgehensweise:
Schritt 1: Inhalt schreiben
Schritt 2: Inhalt durch semantisches HTML auszeichnen
Schritt 3: HTML validieren, bis es fehlerfrei ist.

Spricht was gegen diese Vorgehensweise?

Nachtrag: Du hast doch das Menü links auch schon hinbekommen. Da ist es nun wirklich nicht schwer, das andere Menü auf die andere Seite zu bekommen. Du hast schon viele Stichpunkte, nach denen Du googlen kannst, kennst sicher SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) oder auch CSS 4 You - The Finest in Stylesheets oder andere, ähnliche Seiten.

Selber essen oder vorkauen? :-)
 
das zweite menü auf der rechten seite habe ich schon. das ist ein screenshot aus dem browser, hab ich also nicht mit paint gebastelt :-)

ok, ich werd selber nochmal bißchen rumschauen.

Danke!
 
Efchen schrieb:
Und was passt dann nicht?
Zum Vergrößern anklicken....

Er schafft es anscheinend nicht, dieses weiße breite Kistchen mit dem Farbverlauf im Hintergrund, das man in seinem Screenshot ganz unten sieht, zwischen die Navigationen zu manövrieren.
Hier den Fehler zu erraten, fällt mir allerdings ohne Code im Moment nicht leicht.
 
Ach das. Das muss ich übersehen haben, ich hab das für einen Rand gehalten.

Eine Möglichkeit wäre, dass das Element zu breit ist, um zwischen die beiden Menüs gequetscht zu werden. Möglicherweise mangelndes Wissen um das Box Model und wahrscheinlich immer noch fehlender Doctype. Nicht umsonst sage ich, man soll mit dem Inhalt und mit HTML anfangen und nicht ständig hin und her hüpfen.
 
ingoS schrieb:
Er schafft es anscheinend nicht, dieses weiße breite Kistchen mit dem Farbverlauf im Hintergrund, das man in seinem Screenshot ganz unten sieht, zwischen die Navigationen zu manövrieren.
Zum Vergrößern anklicken....

ganz genau das ist mein Problem. immernoch...

es soll wie im bild oben gezeigt jeweils ein Menü-Block links und rechts sein. Bei beiden ist unter width ein fester Pixelwert angegeben. zwischen den beiden soll ein <div> platziert werden, welches automatisch den freiraum zwischen den beiden Menüs einnimmt.

eine relativ einfache Lösung meines Problems wäre ein Frameset. Spricht etwas dagegen ein solches zu benutzen?

Gruß
Simon

edit:
wie ich gerade gelesen habe ist die Frameset-Methode wohl auch nicht optimal...
 
Zuletzt bearbeitet:
Serious schrieb:
ganz genau das ist mein Problem. immernoch.
Zum Vergrößern anklicken....
Warum? Habe ich mit meinen Vermutungen daneben gelegen? Jetzt sind wir an der Stelle angekommen, wo wir einen Link brauchen und ein Screenshot nicht mehr reicht.

zwischen den beiden soll ein <div> platziert werden, welches automatisch den freiraum zwischen den beiden Menüs einnimmt.
Zum Vergrößern anklicken....
Im HTML-Code zuerst die beiden Menüs, dann Dein <div>. Die Menüs left und right floaten. Fertig.

eine relativ einfache Lösung meines Problems wäre ein Frameset. Spricht etwas dagegen ein solches zu benutzen?
Zum Vergrößern anklicken....
Ja, etliches! Frames haben keine Vorteile, sondern nur Nachteile, insbesondere für die Nutzer. Lass da lieber die Finger davon!
 
also, ich konnte das Problem lösen. ich musste nur die Angaben für width, und margin für die drei elemente in em und nicht in px und % angeben.


hier trotzdem mal mein Code. Ich bin sicher da gibts immernoch genug zu meckern, also her damit :-D

Code: 
body
{
    background-color:     #000000;
    padding:            0px;
    margin:                0px;
}

h1
{
    height:                auto;
    text-align:            center;
    border:                0px;            
    padding:            0px;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#ffffff;
    margin-left:        5em;
    margin-right:        5em;
    margin-bottom:        0px;
    margin-top:            0px;
}

ul#links
{
    border-right-style:    solid;
    border-right-width:    1px;
    border-right-color:    #ffffff;
    width:                10em;
    height:                100%;
    padding-top:        30px;
    padding-bottom:        0;
    padding-left:        0;
    padding-right:        0;
    list-style-type:     none;
    margin:                0;
    float:                left;
}

ul#rechts
{
    border-left-style:    solid;
    border-left-width:    1px;
    border-left-color:    #ffffff;
    width:                10em;
    height:                100%;
    padding-top:        30px;
    padding-bottom:        0;
    padding-left:        0;
    padding-right:        0;
    list-style-type:     none;
    margin:                0;
    float:                right;
}


#content
{

    color:                #000000;
    background-image:    url(./background/content.jpg);
    background-repeat:    repeat-y;
    background-position:center;   
    text-align:            center;
    margin-left:        10em;
    margin-right:        10em;
}



img
{
    color:                #ffffff;
}

Code: 
<!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"
  lang="de" xml:lang="de">

    <head>
        <title>test</title>
        <link "style=text/css" href="Style.css" rel="stylesheet"/>
    </head>
    
    <body>
        <h1>
            <img src="./background/logo_header.jpg" alt="LOGO" />
        </h1>
        
        <ul id=links>
            <li>
                <img src="./background/btn_team_black.jpg" alt="Button Team"/>
            </li>
            
            <li>
                <img src="./background/btn_music_black.jpg" alt="Button Music"/>
            </li>
            
            <li>
                <img src="./background/btn_graphics_black.jpg" alt="Button Graphics"/>
            </li>
            
            <li>
                <img src="./background/btn_walls_black.jpg" alt="Button Walls"/>
            </li>
            
            <li>
                <img src="./background/btn_kontakt_black.jpg" alt="Button Kontakt"/>
            </li>
            
            <li>
                <img src="./background/oma-logo-menue.jpg" alt="LOGO"/>
            </li>
        </ul>
        
        <ul id=rechts>
            <li>
                <img src="./background/btn_team_black.jpg" alt="Button Team"/>
            </li>
            
            <li>
                <img src="./background/btn_music_black.jpg" alt="Button Music"/>
            </li>
            
            <li>
                <img src="./background/btn_graphics_black.jpg" alt="Button Graphics"/>
            </li>
            
            <li>
                <img src="./background/btn_walls_black.jpg" alt="Button Walls"/>
            </li>
            
            <li>
                <img src="./background/btn_kontakt_black.jpg" alt="Button Kontakt"/>
            </li>
            
            <li>
                <img src="./background/oma-logo-menue.jpg" alt="LOGO"/>
            </li>
        </ul>
        

        

        <div id=content>
            test
            <br />
            test
            <br />
            test
            <br />
            test
            <br />
            test
            <br />
        </div>

        
    </body>

</html>


Gruß
Simon
 
Deine alt-Texte sind Mist.
Niemanden interessiert "LOGO" oder dass es ein Button ist.
Deaktiviere mal die Images in Deinem Browser, damit Du siehst, wie das sich auswirkt. Dann merkst Du auch, wie Du die Texte dafür am besten wählen solltest. In ein normales Menü schreibst Du ja auch nicht rein "Button Walls". :-)

Alle Werte der Attribute müssen in Anfürhungszeichen geschrieben werden (z.B. id).

In bezug auf die Trennung von Inhalt und Layout würde ich empfehlen, IDs und Klassennamen niemals einen Namen zu verpassen, der aufs Layout hin deutet (rechts). Denn wenn Du das Layout mal ändern willst, hast Du plötzlich ein Element mit Namen "rechts", das auf der linken Seite steht. Dann musst Du damit leben, oder änderst doch wieder alle HTML-Files, obwohl das bei einem CSS-Layout nicht nötig wäre.
Außerdem soll ja HTML nur die Struktur des Inhalts festlegen, gib den Elementen also auch hier semantisch sinnvolle Namen, und wenn es hier nur "menu1" und "menu2" ist.

Das mal so in aller Kürze.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben