Beiträge von Dusan09

Dusan09 · 14. April 2010

Hallo noch einmal!

Ich habe mit Hilfe des Codes von Lauras eine Navi für meine Seite etwickelt.
Nun, ich habe ein kleines Problem. Ich möchte gerne die Abstände zwischen Buttons verkleinern, aber irgenwie schafe ich dass nicht. Meine Idee ist alle Buttons auf eine Breite von 750px zu platzieren, und die sollen alle in einer Linie sein. Wäre das mit diesem Code möglich?

Hier noch einmal der Code und die css datei dazu:

HTML

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




<head>
    <title>Navi</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="navi.css" type="text/css" rel="stylesheet" />




</head>




<body>
    <ul id="navi">
        <li class="punkte"><a href="">Startseite</a></li>
        <li class="punkte"><a href="">Eure Freunde</a>
            <ul class="unter_navi">
                <li class="unter_punkte"><a href="">Unsere Manschaft</a></li>
                <li class="unter_punkte"><a href="">Aktuelle Tabelle</a></li>
            </ul>
        </li>
        <li class="punkte"><a href="">Wo sind wir?</a></li>
        <li class="punkte"><a href="">Unsere Geschichte</a></li>
        <li class="punkte"><a href="">Spielberichte</a></li>
        <li class="punkte"><a href="">G&auml;stebuch</a></li>
        <li class="punkte"><a href="">Media</a>
            <ul class="unter_navi">
                <li class="unter_punkte"><a href="">AF und Turniere</a></li>
                <li class="unter_punkte"><a href="">Aus der Zeitung...</a></li>
                <li class="unter_punkte"><a href="">Galerie</a></li>
            </ul>
        </li>
        <li class="punkte"><a href="">Impressum</a></li>
        <li class="punkte"><a href="">AGB</a></li>
    </ul>




</body>
</html>

Alles anzeigen

css:

Code

* {
    padding: 0;
    margin: 0;
}




body {
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-size: small;
}




ul#navi
{
    width: auto;
    list-style: none;
    margin: 0.5em;
    height: 1.5em;
}




ul#navi li.punkte
{
    position: relative;
    line-height: 1.5em;
    float: left;
    width: auto;




}




ul#navi li a
{
    display: block;
    padding: 0.5em;
    width: 10em;
    w\idth: 10em;




}




li ul.unter_navi
{
    position: absolute;
    left: -999em;
    width: 10em;




}




ul.unter_navi li.unter_punkte
{
    list-style: none;
    line-height: 1.5em;
}




ul#navi li:hover ul.unter_navi,
ul#navi li:focus ul.unter_navi
{
    left: auto;
}

Alles anzeigen

Dusan09 · 14. April 2010

das wird mir sehr viel helfen. ich bedanke mich sehr.

Dusan09 · 13. April 2010

Hallo leute!

Ich habe eine Frage. Ich bin bei der Aufbau von einer Internetseite und bei dem Punkt: Navigation habe ich einige fragen. Kann mir jemand vielleicht sagen, wo ich mehr Infos über Aufbau von Navi bekommen kann?
Ich möchte eine Navi so aufbauen, dass bei einigen Punkten, wenn man mit den Punkt anklickt, oder über den Punkt mit dem Cursor ist, sich eine Liste öffnet mit mehreren links.

Danke im Voraus!

Dusan09 · 11. April 2010

Sarkkan

Viel dank!

Entlich funktioniert.

Dusan09 · 11. April 2010

Zitat von "Sarkkan"
Nimm das 'float'
Code
#erster_text
{
    width: 500px;
    height: 480px;
    font-family: Arial;
    font-size: 17px;
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-right: 2px;
    background: url(bilder/erster_text.gif) no-repeat;
    float: left; <-- Weg machen
}
Alles anzeigen
weg, dann klappt es :]
(Hab es ausprobiert, hab float weg gemacht und jetzt einfach schnell auf der Seite um die div's ein Center-Tag gemacht(um es einfach nur fix zu testen)
Code
<center><div id="erster_text"> ...

Die kommen auf die Mitte, aber die sollen auch neben einander stehen, nicht einer unter anderem... Deswegen habe ich den Float benutzt. Vielleicht gibt eine andere Möglichkeit divs neben einander zu stellen?

Dusan09 · 11. April 2010

Also, es fängt langsam zu nerven... :twisted: Ich habe alle mir kenntbare Möglichkeiten ausprobiert und es geht nicht....

Ich habe die zwei divs in einen hineingepackt aber trotzdem nicht....

Dusan09 · 11. April 2010

das habe ich schon probiert. Ich habe <div id="erster_text"> mit float: left ausgeschtattet, damit <div id="heimspiele"> neben den steht. Und jetzt möchte ich die zwei mittich positionieren. Aber mit dem margin: 0 auto; geht nicht.

Dusan09 · 11. April 2010

Hallo Leute!

Ich habe einen Problem. Also, ich kann irgenwie nicht zwei div´s mittich positionieren. Mit dem Kopfbereich und Navi funktioniert, aber die unteren zwei div´s gehen nicht. Wäe nett wenn jemand helfen könnte. Danke im Voraus!

Hier der Code und dazu css:

HTML

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




<head>
    <title>BK Alte Freunde Duesseldorf</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="Onlinepr&auml;sentation des Vereins Alte Freunde aus D&uuml;sseldorf" />
    <meta name="author" content="Dusan Djukic" />
    <meta name="keywords" content="alte, freunde, basketball, stari, prijatelji, kosarka, D&uuml;sseldorf, yugos" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="style.css" type="text/css" rel="stylesheet" />
</head>




<body>
      <div id="kopfbereich">
        <img id="amblem" src="bilder/grb.gif" alt="Amblem der Freunde" />
        <h1>ALTE FREUNDE D&Uuml;SSELDORF</h1>
      </div>




      <div id="navi">
        <ul>
            <li><a href="index.html">Startseite</a></li>
            <li><a href="team.html">Eure Freunde</a></li>
            <li><a href="weg.html">Wo sind wir?</a></li>
            <li><a href="geschichte.html">Unsere Geschichte</a></li>
            <li><a href="spielberichte.html">Spielberichte</a></li>
            <li><a href="gaestebuch.html">G&auml;stebuch</a></li>
            <li><a href="media.html">Media</a></li>
            <li><a href="impressum.html">Impressum</a></li>
            <li><a href="agb.html">AGB</a></li>
        </ul>
      </div>




              <div id="erster_text">
                <div id="erster_text1">
                    <p>Liebe Basketballfreunde, es ist endlich soweit - die "Alten
                    Freunde Düsseldorf" sind ab jetzt auch im Internet pr&auml;sent!</p>
                    <p>Nach mittlerweile 15-j&auml;hrigem Bestehen wollen wir euch nun einen tieferen
                    Einblick hinter die Kulissen der "Alten Freunde" gew&auml;hren. Ob Spieltermine
                    und -berichte, Hintergrundinformationen zu Spielern und Verein oder Kontaktm&ouml;glichkeiten
                    mit den Verantwortlichen - hier werdet ihr auf alles eine Antwort finden.</p>
                    <p>Diesen weiteren Meilenstein im Bestehen unseres Vereins m&ouml;chten wir an dieser
                    Stelle auch nutzen, um uns bei all den Freunden zu bedanken, die uns seit 1995 die Treue
                    gehalten haben und ohne deren Hilfe wir nicht dort w&auml;ren wo wir jetzt sind.</p>
                    <p>Wir hoffen euch bald begr&uuml;&szlig;en zu d&uuml;rfen, ob als Mitglieder, Spieler,
                    Zuschauer...oder einfach nur als Freunde!</p>
                    <p>Euer BK Alte Freunde</p>
                </div>
              </div>




            <div id="heimspiele">
                <img id="heimfoto" src="bilder/heimspiele.jpg" alt="Foto der Heimspiele" />
                <div id="heimspieletext">Alte Freunde D&uuml;sseldorf<br />vs.<br />Lions 2 MG<p>So.
                18.04.2010 15Uhr<br />Hansaallee 90, 40547 D&uuml;sseldorf</p></div>
            </div>




</body>
</html>

Alles anzeigen

und css

Code

html, body
{
    background-color: #FF9B60;
}




h1
{
    color: #FFFFFF;
    font-family: Monotype Corsiva;
    letter-spacing: 0.5em;
    font-size: 4em;
    text-align: center;
    line-height: 1em;
}




#navi
{
    text-align: center;
    background-color: #cc3300;
    height: 36px;
    width: 750px;
    margin: auto;




}




#navi ul
{
    list-style: none;
}




#navi li
{
    font-family: Arial;
    font-size: 12px;
    float: left;
    margin-left: 2px;
    width: auto;
    background-color: white;
    border-top: 1px orange solid;
    border-left: 1px orange solid;
    border-bottom: 1px orange solid;
    border-right: 1px orange solid;
    margin-top: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
}




#navi a:link    { color: #000000;   text-decoration: none; }
#navi a:visited { color: #000080;  text-decoration: none; }
#navi a:focus   { color: #EA5D11;  text-decoration: none; }
#navi a:hover   { color: #FF0000;    text-decoration: none; }
#navi a:active  { color: #00FF00; text-decoration: none; }




#amblem
{
    float: left;
    margin: 20px;
}




#kopfbereich
{
    background: url(bilder/schatten-kopf.png) repeat-x;
    height: 150px;
    width: 750px;
    margin: auto;
}




#erster_text
{
    width: 500px;
    height: 480px;
    font-family: Arial;
    font-size: 17px;
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    margin-right: 2px;
    background: url(bilder/erster_text.gif) no-repeat;
    float: left;
}




#erster_text1
{
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}




#heimspiele
{
    width: 248px;
    height: 300px;
    margin-top: 20px;
    background: url(bilder/heimspiele1.gif);
}




#heimfoto
{
    margin-left: 59px;
    margin-top: 60px;
}




#heimspieletext
{
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    text-align: center;
}




#tabelle
{
    width: 350px;
    height: 470px;
    text-align: center;
}

Alles anzeigen

Beiträge von Dusan09

Thema Navigation

Thema Navigation

Thema Navigation

Zentrierung - Problem

Zentrierung - Problem

Zentrierung - Problem

Zentrierung - Problem

Zentrierung - Problem