Criminis: Seitenbreite durch Formular verbreitert ohne Nutzen

SELF-Forum

Seitenbreite durch Formular verbreitert ohne Nutzen

Criminis
– Informationen zu den Bewertungsregeln

Hallo Selfhtml'er.

Vorweg: Ich bin kein geübter Webdesigner, mache das privat und kenne mich nicht großartig aus. Darum bitte bei Erklärungen entweder gleich den neuen Quelltext (sehr praktisch für mich :) ) oder die Lösung mit den in SelfHTML benutzten Fachausdrücken posten, so dass ich alles schnell in SelfHTML finden kann. Danke sehr :)

Ich habe folgendes Formular zur Navigation:

<form><select name="menu" onChange="javascript:parent.location = this.form.menu.options[this.form.menu.selectedIndex].value;">
 <option>news</option>
    <option value="artists.html">artists</option>
    <option value="media.html">media</option>
    <option value="contact.html">contact</option>
    <option value="forum.html">forum</option>
</select></form>

Meine Seite wird mit diesem Formular aber breiter, so dass in meinem Browser (sowohl Firefox als auch Safari) unten ein unnötiger Scrollbalken erscheint. Ohne dieses Formular passt alles. Da ich aber keine Ansage zur Seitenverbreiterung in diesem Formular gemacht habe nehme ich an dass es am Zusammenspiel mit dem CSS liegt, darum poste ich nochmal den Rest der Seite:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>

<head>
<title>phatbeat.de - news</title>
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">@import("iemac-center.css");</style>
</head>
<body>
<div id="container">
<div id="distance"></div>
<div id="logo"></div>
<div id="menu">
<form><select name="menu" onChange="javascript:parent.location = this.form.menu.options[this.form.menu.selectedIndex].value;">
 <option>news</option>
    <option value="artists.html">artists</option>
    <option value="media.html">media</option>
    <option value="contact.html">contact</option>
    <option value="forum.html">forum</option>
</select></form>
</div>

<div id="footer"><br><br><br><br>
<img src="images/footer.png" align="center"></img><br><br>
</div>
<div>news<br><br>
</div>

<div id="footer"><br><br><img src="images/footer.png" align="center"></img>
<center><a href=".html">news</a> ::
<a href=".html">artists</a> ::
<a href=".html">media</a> ::
<a href=".html">contact</a> ::
<a href=".html">forum</a></center><br><br><br>
</div>

</div>
</body>
</html>

Hier die CSS-Datei style.css:

body {
 background-color: #999966;
 font-family: verdana, arial,tahoma;
 font-size: 8pt;
 text-align:center;
 color: #000000;
}

a:link {
 font-family: verdana, arial,tahoma;
 font-size: 8pt;
 color: #cccc99;
 text-decoration: none;
}

a:visited {
 font-family: verdana, arial,tahoma;
 font-size: 8pt;
 color: #cccc99;
 text-decoration: none;
}

a:hover {
 font-family: verdana, arial,tahoma;
 font-size: 8pt;
 color: #660000;
 text-decoration: none;
}

a:active {
 font-family: verdana, arial,tahoma;
 font-size: 8pt;
 color: #660000;
 text-decoration: none;
}

a:focus {
 font-family: verdana, arial,tahoma;
 font-size: 8pt;
 background: #660000;
 text-decoration: none;
}

#logo {
 position:absolute;
 left:0px;
 top:0px;
 width:514px;
 height:150px;
 z-index:1;
 background-image: url(images/logo_small.png);
 background-repeat: no-repeat;
}

* {
 margin:0;
 padding:0;
}

html, body {
 height:100%;
}

#distance {
 width:1px;
 height:180px;
 background-color:#999966;
 float:left;
}

#container {
 margin:0 auto;
 position:relative; /* puts container in front of distance */
 text-align:left;
 width:514px;
 clear:left;
 background-color:#999966;
}

#container div {
 width:514px;
 text-align:justify;
}

#menu {
 position:absolute;
 width:50px;
 top:100px;
 left:394px;
 z-index:2;
}

select {
 background-color: #cccc99;
 font-family: verdana, arial,tahoma;
 font-size: 8pt;
 text-align:left;
 color: #000000;
 width:100;
}

In der Datei iema-ccenter.css steht nur ein kurzer Text für die ältere IE-MAC-Version zur Zentrierung der <div>-Container:

html, body {
 height:auto;
 }

Falls noch irgendwelche Angaben fehlen, sagt mir Bescheid. Ich hoffe, jemand kann mir helfen.

Dank und Gruß
Nils

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Seitenbreite durch Formular verbreitert ohne Nutzen

    steckl
    – Informationen zu den Bewertungsregeln

    Hi,

    Ich habe folgendes Formular zur Navigation:

    Was zu dem Problem führt, dass es Besucher mit abgeschaltetem Javascript nicht nutzen können. Ich weiß nicht, wie man das am geschicktesten löst, aber eine Möglichkeit wäre es, die Links nochmal in einem noscript-Block anzuzeigen.

    Aber nun zu deinem eigentlichen Problem:

    <body>
    <div id="container">
    <div id="menu">
    <form><select name="menu" onChange="javascript:parent.location = this.form.menu.options[this.form.menu.selectedIndex].value;">
    <option>news</option>
        <option value="artists.html">artists</option>
        <option value="media.html">media</option>
        <option value="contact.html">contact</option>
        <option value="forum.html">forum</option>
    </select></form>
    </div>
    </div>
    </body>

    #container {
    margin:0 auto;
    position:relative; /* puts container in front of distance */
    text-align:left;
    width:514px;
    clear:left;
    background-color:#999966;
    }

    #container div {

    Hier sprichst du alle divs an, die innerhalb des Elements mit der ID container liegen und weist ihnen eine Breite von 514px zu. Wenn dir klar ist was du hier machst lösche einfach den ganzen Block, wenn nicht füge noch diese Zeile ein:
    border: 1px solid red;
    dann siehst du ganz genau, welche divs du hier ansprichst. Anschließend musst du das dann natürlich löschen.

    width:514px;
    text-align:justify;
    }

    #menu {

    Das Div könntest du dir wenn ich das richtig sehe sparen und direkt das darinliegende form- bzw. select-Element im CSS ansprechen.

    position:absolute;
    width:50px;

    Hier hast du 50px, das select ist aber breiter, falls die 100 unten 100px heißen sollte.

    top:100px;
    left:394px;
    z-index:2;
    }

    select {
    background-color: #cccc99;
    font-family: verdana, arial,tahoma;
    font-size: 8pt;
    text-align:left;
    color: #000000;
    width:100;

    Hier fehlt die Einheit.

    }

    mfG,
    steckl

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln