Problem mit Navigation Menü per .css

Cifres

Hallo Com,

Ich arbeite derzeit an einer kleinen Homepage, leider bin ich kein HTML experte bzw
ich kenne mich nicht so aus ich bin eher ein VB suchty :D.

Nun zu meinem Problem!:

Ich habe eine Navigation die per .css Datei eingestellt ist also mit Mousover Effekt oder
so wie man das nennt aber ich bekomme die Navigation nicht "zentriert" naja es geht
aber es sieht schrecklich aus.

Screen 1:
myimg.de - screen1f476a.gif

Die HP war vorher "linksbündig" nun wollte ich diese "zentrieren" ich habe es
geschafft mit der "Box" und auch mit dem menü aber das hat sich wie soll man
das sagen hmm verzogen oder so!

Screen 2:
myimg.de - screen273c1d.jpg

Also die Buttons sind irgendwie im eimer wie kann ich das beheben ?

Hier noch der Inhalt aus der style.css:

Code

html body {
    font-size: 8pt;
    font-family: verdana, arial, sans-serif;
    color: #00AEFF;
    background-color: #232323;
}


.title {
    font-weight: bold;
    color: #16577E;
    border-bottom: 1px dotted #16577E;
}


.status_red {
    color: #C71C00;
}


.status_yellow {
    color: #EFE700
}


.status_green {
    color: #5AEF00
}


.tableinborder {
    background-color: #16577E;
}


.tablea {
    background-color: #232323;
}
.tableb {
    background-color: #131313;
}


input, textarea {
    color: #16577E;
    background-color: #131313;
    border: 1px dotted #16577E;
}


A:link, A:visited {
    color: #00DEFF;
    text-decoration: none;
}


A:hover, A:active {
    color: #16577E;
    text-decoration: none;
    border-bottom: 1px dotted #16577E;
}


#alert {
    padding: 10px;
    border: 1px solid #16577E;
    background-color: #131313;
    text-align: center;
    margin: 10px;
    font-weight: bold;
}


#news {
    border: 1px solid #00AEFF;
    color: #00DEFF;
    padding: 5px;
}


#header {
}


#navconatainer ul{
    list-style-type: none;
    display: inline;
    margin: 0.4em; padding: 0;
}


#navcontainer li {
    display: inline;
    margin: 20px;
}


#navcontainer li a {
    display: center;
    float: center;
    background-image: url('images/button.jpg');
    padding: 4px 0 0 0;
    margin: 0 10px 0 0;
    width: 81px;
    height: 19px;
    color: #00AEFF;
    text-decoration: none;
    text-align: center;
}


#navcontainer li a:hover {
    background-image: url('images/button_hover.jpg');
    color: #000000;
    text-decoration: none;
    border: 0px;
}


#spacer {
    clear: both;
}


#content {
    position: relative;
    background-image: url('images/content.jpg');
    background-repeat: no-repeat;
    padding: 10px 0 5px 0;
    height: 500px;
    width: 530px;
    left: 30px;
}


#comment {
    background-color: #000000;
    border: 1px solid #A3A3A3;
    margin: 10px;
    padding: 2px;
}

Alles anzeigen

Könnte bitte einer diesen Code ausbessern bzw so einstellen das es klappt
oder mir erklären was ich ändern muss ich komme damit nicht so wirklich kla.

Mfg Cifres

ulle

Poste doch mal bitte den HTML Code. Dann können wir das nämlich bei uns direkt mal testen ;)

Cifres

Bringt doch nix kopier einfach die .css datei und importier es in einer html/php datei so:

Zitat

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

mehr nicht :)

Assaki

Du musst den Text auch noch zentrieren. Oder sind das Buttons wo der Text in der Grafik ist?

dennisdra

Nope, der Text steht nicht in den Buttons.
Aber ich denke das hat nichts damit zu tun, denn die Seite, die atm offen ist, wird ja auch mit dem Grünen Bild hinterlegt, und dort sind beide Abrundungen da.

ichbinniemand

zentrier die container, und setzte beim menü den float, sodass es sich rechtsbündig hält... aber nicht vergessen beim menücontainer die gesammt größe dann anzugeben damit das teil auch richtig landet...

ulle

Zitat von Cifres;227551

Bringt doch nix kopier einfach die .css datei und importier es in einer html/php datei so:

mehr nicht :)

Was ist den das für eine Aussage? Willst du das man dir hilft? Dann poste doch einfach die benötigte HTML und gut ist.

Assaki

Du hast nur die Grafiken von den Buttons zentriert, aber nicht den Text. Den musst du auch noch mit mit "float: center" versehen.

Cifres

Wie ich bereits geschrieben habe, habe ich kp von HTML bzw .CSS oder sonstwas,

Hier die Codes

Index.php

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de" xml:lang="de">
    <head>
        <title>VB-Projekte</title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
        <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
        <!--[if lte IE 7]>
              <link href="style_fix.css" rel="stylesheet" type="text/css" media="screen" />
        <![endif]-->
        <script language="JavaScript" type="text/javascript">
        <!--
            function divToggle(obj) {
                var objDiv = document.getElementById(obj).style;


                if(objDiv.display == "inline")
                    objDiv.display = "none";
                else
                    objDiv.display = "inline";
            }
        //-->
        </script>


    </head>


    <body>
        <div id="header"><img src="images/header_new.jpg" /></div>


        <div id="navcontainer">
            <ul id="navi">
                <li><a href="index.php">Home</a></li>
                <li><a href="project.php">Project</a></li>
                <li><a href="features.php">Features</a></li>
                <li><a href="status.php">Status</a></li>
                <li><a href="media.php">Media</a></li>
                <li><a href="guestbook.php">Gästebuch</a></li>
            </ul>
        </div>


        <div id="spacer"></div>


        <div id="content">
            <h2>.: Willkommen</h2>


            <p>Auf dieser Seite findest du alle Informationen zu meinem neuen Projekt.<br />
            Unter Project ist eine Beschreibung, was ich mir bisher so überlegt habe.<br />


            <div id="news"><b>News:</b><br />
            <!-- News Bereich--></div>
        </div>


    </body>
</html>

Alles anzeigen

Style.css

Code

html body {
    font-size: 8pt;
    font-family: verdana, arial, sans-serif;
    color: #00AEFF;
    background-color: #232323;
}


.title {
    font-weight: bold;
    color: #16577E;
    border-bottom: 1px dotted #16577E;
}


.status_red {
    color: #C71C00;
}


.status_yellow {
    color: #EFE700
}


.status_green {
    color: #5AEF00
}


.tableinborder {
    background-color: #16577E;
}


.tablea {
    background-color: #232323;
}
.tableb {
    background-color: #131313;
}


input, textarea {
    color: #16577E;
    background-color: #131313;
    border: 1px dotted #16577E;
}


A:link, A:visited {
    color: #00DEFF;
    text-decoration: none;
}


A:hover, A:active {
    color: #16577E;
    text-decoration: none;
    border-bottom: 1px dotted #16577E;
}


#alert {
    padding: 10px;
    border: 1px solid #16577E;
    background-color: #131313;
    text-align: center;
    margin: 10px;
    font-weight: bold;
}


#news {
    border: 1px solid #00AEFF;
    color: #00DEFF;
    padding: 5px;
}


#header {
}


#navconatainer ul{
    list-style-type: none;
    display: inline;
    margin: 0.4em; padding: 0;
}


#navcontainer li {
    display: inline;
    margin: 20px;
}


#navcontainer li a {
    display: center;
    float: center;
    background-image: url('images/button.jpg');
    padding: 4px 0 0 0;
    margin: 0 10px 0 0;
    width: 81px;
    height: 19px;
    color: #00AEFF;
    text-decoration: none;
    text-align: center;
}


#navcontainer li a:hover {
    background-image: url('images/button_hover.jpg');
    color: #000000;
    text-decoration: none;
    border: 0px;
}


#spacer {
    clear: both;
}


#content {
    position: relative;
    background-image: url('images/content.jpg');
    background-repeat: no-repeat;
    padding: 10px 0 5px 0;
    height: 500px;
    width: 530px;
    left: 30px;
}


#comment {
    background-color: #000000;
    border: 1px solid #A3A3A3;
    margin: 10px;
    padding: 2px;
}

Alles anzeigen

Könnte einer die Inhalte so anpassen das es funktioniert ?

Cross

du hast doch die navi in einem div > navconainer.
Was passiert wenn du

PHP

#navcontainer { 
   text-align: center;
}

addest? (bei mir im schnellen test ging die navi sofort in die mitte)

//edid oder du amchst dies hier:

Code

#navcontainer{
   margin: auto;
}

ist auch zentriert^^

Cifres

Bei mir klappt es nicht ich habe kp was ich einstellen soll und was ich ändern muss hab jetzt die #navcontainer bearbeitet aber
es klappt nicht =(

Cross

was genau klappt denn nicht?
siehe VB-Projekte

Ist dein Code soweit nur das ich für #navcontainer und #content ein

Code

margin: auto;

dazugesetzt habe.

Cifres

Es klappt mit Zentrieren aber das mit den Grafiken ist irgendwie kaputt siehe Screen 2 (von oben)
myimg.de - screen273c1d.jpg
Es funtzt ned ;(

Also deine änderung funtzt aber es verhaut die Grafiken.

Cross

lade uns dochmal die grafiken hoch (:
dann hätte ich das sofort gesehn und evtl was anderes gepostet.

danke

Cifres

Okay:

Button1
myimg.de - button91871.jpg

Button2
myimg.de - buttonhover9241c.jpg

Assaki

Code

html body {
    font-size: 8pt;
    font-family: verdana, arial, sans-serif;
    color: #00AEFF;
    background-color: #232323;
}


.title {
    font-weight: bold;
    color: #16577E;
    border-bottom: 1px dotted #16577E;
}


.status_red {
    color: #C71C00;
}


.status_yellow {
    color: #EFE700
}


.status_green {
    color: #5AEF00
}


.tableinborder {
    background-color: #16577E;
}


.tablea {
    background-color: #232323;
}
.tableb {
    background-color: #131313;
}


input, textarea {
    color: #16577E;
    background-color: #131313;
    border: 1px dotted #16577E;
}


A:link, A:visited {
    color: #00DEFF;
    text-decoration: none;
}


A:hover, A:active {
    color: #16577E;
    text-decoration: none;
    border-bottom: 1px dotted #16577E;
}


#alert {
    padding: 10px;
    border: 1px solid #16577E;
    background-color: #131313;
    text-align: center;
    margin: 10px;
    font-weight: bold;
}


#news {
    border: 1px solid #00AEFF;
    color: #00DEFF;
    padding: 5px;
}


#header {
}


#navi {
float: center;
}


#navconatainer ul{
    list-style-type: none;
    display: inline;
    margin: 0.4em; padding: 0;
}


#navcontainer li {
    display: inline;
    margin: 20px;
}


#navcontainer li a {
    display: center;
    float: center;
    background-image: url('images/button.jpg');
    padding: 4px 0 0 0;
    margin: 0 10px 0 0;
    width: 81px;
    height: 19px;
    color: #00AEFF;
    text-decoration: none;
    text-align: center;
}


#navcontainer li a:hover {
    background-image: url('images/button_hover.jpg');
    color: #000000;
    text-decoration: none;
    border: 0px;
}


#spacer {
    clear: both;
}


#content {
    position: relative;
    background-image: url('images/content.jpg');
    background-repeat: no-repeat;
    padding: 10px 0 5px 0;
    height: 500px;
    width: 530px;
    left: 30px;
}


#comment {
    background-color: #000000;
    border: 1px solid #A3A3A3;
    margin: 10px;
    padding: 2px;
}

Alles anzeigen

So sollte es gehen.

Cifres

Leider funktioniert es nicht jetzt ist irgendwie nix "zentriert" und das Menü ist immer noch verschrammt wie auf Screen2
bloß "linksbündig"

Assaki

Zitat

html body {
font-size: 8pt;
font-family: verdana, arial, sans-serif;
color: #00AEFF;
background-color: #232323;
}
.title {
font-weight: bold;
color: #16577E;
border-bottom: 1px dotted #16577E;
}
.status_red {
color: #C71C00;
}
.status_yellow {
color: #EFE700
}
.status_green {
color: #5AEF00
}
.tableinborder {
background-color: #16577E;
}
.tablea {
background-color: #232323;
}
.tableb {
background-color: #131313;
}
input, textarea {
color: #16577E;
background-color: #131313;
border: 1px dotted #16577E;
}
A:link, A:visited {
color: #00DEFF;
text-decoration: none;
}
A:hover, A:active {
color: #16577E;
text-decoration: none;
border-bottom: 1px dotted #16577E;
}
#alert {
padding: 10px;
border: 1px solid #16577E;
background-color: #131313;
text-align: center;
margin: 10px;
font-weight: bold;
}
#news {
border: 1px solid #00AEFF;
color: #00DEFF;
padding: 5px;
}
#header {
}
#navi {
margin: auto;
}
#navconatainer ul{
list-style-type: none;
display: inline;
margin: 0.4em; padding: 0;
}
#navcontainer li {
display: inline;
margin: 20px;
}
#navcontainer li a {
display: center;
float: center;
background-image: url('images/button.jpg');
padding: 4px 0 0 0;
margin: 0 10px 0 0;
width: 81px;
height: 19px;
color: #00AEFF;
text-decoration: none;
text-align: center;
}
#navcontainer li a:hover {
background-image: url('images/button_hover.jpg');
color: #000000;
text-decoration: none;
border: 0px;
}
#spacer {
clear: both;
}
#content {
position: relative;
background-image: url('images/content.jpg');
background-repeat: no-repeat;
padding: 10px 0 5px 0;
height: 500px;
width: 530px;
left: 30px;
}
#comment {
background-color: #000000;
border: 1px solid #A3A3A3;
margin: 10px;
padding: 2px;
}

Alles anzeigen

Zitat

html body {
font-size: 8pt;
font-family: verdana, arial, sans-serif;
color: #00AEFF;
background-color: #232323;
}
.title {
font-weight: bold;
color: #16577E;
border-bottom: 1px dotted #16577E;
}
.status_red {
color: #C71C00;
}
.status_yellow {
color: #EFE700
}
.status_green {
color: #5AEF00
}
.tableinborder {
background-color: #16577E;
}
.tablea {
background-color: #232323;
}
.tableb {
background-color: #131313;
}
input, textarea {
color: #16577E;
background-color: #131313;
border: 1px dotted #16577E;
}
A:link, A:visited {
color: #00DEFF;
text-decoration: none;
}
A:hover, A:active {
color: #16577E;
text-decoration: none;
border-bottom: 1px dotted #16577E;
}
#alert {
padding: 10px;
border: 1px solid #16577E;
background-color: #131313;
text-align: center;
margin: 10px;
font-weight: bold;
}
#news {
border: 1px solid #00AEFF;
color: #00DEFF;
padding: 5px;
}
#header {
}
#navi {
text-align: center;
}
#navconatainer ul{
list-style-type: none;
display: inline;
margin: 0.4em; padding: 0;
}
#navcontainer li {
display: inline;
margin: 20px;
}
#navcontainer li a {
display: center;
float: center;
background-image: url('images/button.jpg');
padding: 4px 0 0 0;
margin: 0 10px 0 0;
width: 81px;
height: 19px;
color: #00AEFF;
text-decoration: none;
text-align: center;
}
#navcontainer li a:hover {
background-image: url('images/button_hover.jpg');
color: #000000;
text-decoration: none;
border: 0px;
}
#spacer {
clear: both;
}
#content {
position: relative;
background-image: url('images/content.jpg');
background-repeat: no-repeat;
padding: 10px 0 5px 0;
height: 500px;
width: 530px;
left: 30px;
}
#comment {
background-color: #000000;
border: 1px solid #A3A3A3;
margin: 10px;
padding: 2px;
}

Alles anzeigen

Von den eins? Ich bin selber noch kein Profi.

ulle

So und wenn du immer noch behauptest das es nicht geht, dann solltest du echt mal deine Kompetenz überprüfen.
Dies war eine Arbeit von nicht einmal 5 Minuten.

Desweiteren solltest du dich dringend mit CSS und (x)HTML befassen. float: center; ist mir neu und ich denke der restlichen CSS Welt ebenso.

Aber um nicht weiter zu quatschen hier der fertige Code schön serviert auf dem Silbertablett navi_problem.rar. Und nun lass uns damit bitte in Ruhe.

Cross

Zitat von ulle;227773

So und wenn du immer noch behauptest das es nicht geht, dann solltest du echt mal deine Kompetenz überprüfen.
Dies war eine Arbeit von nicht einmal 5 Minuten.
Desweiteren solltest du dich dringend mit CSS und (x)HTML befassen. float: center; ist mir neu und ich denke der restlichen CSS Welt ebenso.
Aber um nicht weiter zu quatschen hier der fertige Code schön serviert auf dem Silbertablett navi_problem.rar. Und nun lass uns damit bitte in Ruhe.

Hugh der meister hat gesprochen :)
Das float war mir zwar auch neu aber wollt nicht zuviel editieren das sein code bestehn bleibt usw^^

Werd mir auchmal ansehn was die lösung ist (theor könnte man auch alles via einem wrapper div zentrieren?).

@Te: Am besten du "codest" gerade am anfang NICHT mit Notepad! Webocton Scriply ist ein SEHR gutes anfängerprogramm :D (habe ich selbst genutzt)

Greetings

Problem mit Navigation Menü per .css

Jetzt mitmachen!

SCHNELLZUGRIFF

HILFE & COMMUNITY

RECHTLICHES