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

Problem mit Ausrichtung

Status
Für weitere Antworten geschlossen.
V

VirusX

Neues Mitglied
Hey,

Ich habe folgende Seite gecodet Homepage (wird später noch an Joomla angepasst) und ich habe noch Probleme, die Bilder für die Eingabefelder richtig zu positionieren.

HTML:
PHP: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Homepage</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">
    
    <ul>
        <li id="home"><a href=""></a></li>
        <li id="about"><a href=""></a></li>
        <li id="design"><a href=""></a></li>
        <li id="forum"><a href=""></a></li>
        <li id="tutorials"><a href=""></a></li>
        <li id="gaestebuch"><a href=""></a></li>
        <li id="kontakt"><a href=""></a></li>
    </ul>
    
    <div id="navi">
        <div id="login"><p id="login-text">Login</p><div id="login_feld"></div>
        <p id="passwort">Passwort</p><div id="passwort_feld"></div></div>
        <div id="umfrage"><p id="umfrage-text">Umfrage</p></div>
        <div id="shoutbox"><p id="shoutbox-text">Shoutbox</p></div>
        <div id="statistik"><p id="statistik-text">Statistik</p></div>
    
    </div>
    
    
    <div id="inhalt">
        <div id="inhalt-innen"></div>
    </div>





</div>


</body>
</html>
CSS:

PHP: 
@charset "utf-8";
/* CSS Document */

html,body, ul, li {
    background-color: #454545;
    margin: 0;
    padding: 0;
    
}

li {
    list-style: none;
}


#wrapper {
    
    width: 900px;
    height: 900px;
}

#home a {
    background-image: url(Bilder/Home.jpg);
    width: 132px;
    height: 132px;
    float: left;
}

#home a:hover {
    background-image: url(Bilder/Home%20Hoover.jpg);
    width: 132px;
    height: 132px;
    float: left;
}

#about a {
    background-image: url(Bilder/about.jpg);
    width: 127px;
    height: 132px;
    float: left;
}

#about a:hover {
    background-image: url(Bilder/about%20Hoover.jpg);
    width: 127px;
    height: 132px;
    float: left;
}


#design a  {
    background-image: url(Bilder/Design.jpg);
    width: 127px;
    height: 132px;
    float: left;
}

#design a:hover  {
    background-image: url(Bilder/Design%20Hoover.jpg);
    width: 127px;
    height: 132px;
    float: left;
}

#forum a {
    background-image: url(Bilder/Forum.jpg);
    width: 127px;
    height: 132px;
    float: left;
}

#forum a:hover {
    background-image: url(Bilder/Forum%20Hoover.jpg);
    width: 127px;
    height: 132px;
    float: left;
}

#tutorials a {
    background-image: url(Bilder/Tutorials.jpg);
    width: 127px;
    height: 132px;
    float: left;
}

#tutorials a:hover {
    background-image: url(Bilder/Tutorials%20Hoover.jpg);
    width: 127px;
    height: 132px;
    float: left;
}

#gaestebuch a {
    background-image: url(Bilder/Gaestebuch.jpg);
    width: 127px;
    height: 132px;
    float: left;
}

#gaestebuch a:hover {
    background-image: url(Bilder/Gaestebuch%20Hoover.jpg);
    width: 127px;
    height: 132px;
    float: left;
}

#kontakt a {
    background-image: url(Bilder/Kontakt.jpg);
    width: 133px;
    height: 132px;
    float: left;
}

#kontakt a:hover {
    background-image: url(Bilder/Kontakt%20Hoover.jpg);
    width: 133px;
    height: 132px;
    float: left;
}

#navi {
    background-image:url(Bilder/Navigation.jpg);
    width: 203px;
    height: 768px;
    float: left;
}

#inhalt {
    background-image: url(Bilder/Inhalt.jpg);
    width: 697px;
    height: 768px;
    float: left;
}

#login {
    width: 175px;
    height: 100px;
    margin: 28px 14px 0 14px;
}

#umfrage {
    width: 175px;
    height: 160px;
    margin: 0 14px 0 14px;
}

#shoutbox {
    width: 175px;
    height: 160px;
    margin: 0 14px 0 14px;
}

#statistik {
    width: 175px;
    height: 160px;
    margin: 0 14px 0 14px;
}

#login-text {
    font-size: 14px;
    color: #14abdd;
    font-family: arial;

}

#login_feld {
    background-image: url(Bilder/Login.jpg);
    width: 100px;
    height: 15px;
    float: left;

}
    
#passwort {
    font-size: 14px;
    font: Arial, Helvetica, sans-serif;
    color: #14abdd;

}

passwort_feld {
    background-image: url(Bilder/Passwort.jpg);
    width: 100px;
    height: 15px;
    float: left;
}
    
#umfrage-text {
    font-size: 14px;
    font: Arial, Helvetica, sans-serif;
    color: #14abdd;
}

#shoutbox-text {
    font-size: 14px;
    font: Arial, Helvetica, sans-serif;
    color: #14abdd;
}
    
#statistik-text {
    font-size: 14px;
    font: Arial, Helvetica, sans-serif;
    color: #14abdd;
}

#inhalt-innen {
    width: 677px;
    height: 738px;
    margin: 20px 10px 10px 10px;
}
1) Die Bilder werden irgendwie gar nicht angezeigt.

2) Wie kann ich die beiden Bilder für die Eingabe neben Login und Passwort setzen? (Irgendwie haut das bis jetzt noch nicht so hin.)

So sehen die Bilder für die Eingabefelder aus:

 
Zu 1.: vermutlich liegt es daran, dass Du die Groß-/Kleinschreibung der Dateinamen nicht beachtet hast. Ist der häufigste Fehler. Kann man hier aber (wiedermal) nur raten.

Zu 2.: du willst Login und Passwort in einem div eingeben? Irgendwie sinnfrei. ;ugl Das du neben "Login" kein Element setzen kannst liegt aber daran, dass Du das Blockelement <p> um den Text gesetzt hast. Dieses nutzt die volle zur Verfügung stehende Breite, weshalb kein anderes Blockelement daneben gefloatet werden kann.
 
threadi schrieb:
Zu 2.: du willst Login und Passwort in einem div eingeben? Irgendwie sinnfrei. ;ugl
Zum Vergrößern anklicken....

Mhm kann ich die Eingabe eigentlich so erstellen, dass die eingegebenen Buchstaben nur über dem Eingabefensterbild zu sehen sind? (Also die eingegeben Buchstaben dürfen sich nur auf dem Bildchen befinden, nicht darüber hinaus.) Wenn ja, wie? Muss das Bild nochmal in ein Extra Div?

Und welches Element, dass nicht den ganzen verfügabren Platz verschwendet, muss ich für den Text benutzen?
 
Um etwas eingeben zu können musst Du das input-Element verwenden. Und dem kann man per CSS ganz einfach jedes beliebige Hintergrundbild geben. Border und Hintergrundfarbe entfernen. Fertig. Ohne so ein Eingabefeld innerhalb eines Formulars wirst Du garantiert kein funktionierendes Login-Formular hinbekommen.
 
Ich danke dir schonmal für deine Hilfe!

Und welches Element muss ich benutzen, damit der Text "Login" oder "Passwort" nicht den gesamten verfügbaren Platz nimmt?
 
Informier dich am Besten über den grundsätzlichen Aufbau von Formularen. Da solltest Du dann von selbst drauf kommen ;)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben