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

Suchfeld rutscht rechts über Menüleiste hinaus

D

durdentyler

Neues Mitglied
Hallo,

ich bin blutiger Anfänger und habe folgendes Problem bei der Positionierung eines Suchfeldes:
Wenn man das Browserfenster aufzieht rutscht das Suchfeld über die Menüleiste hinaus.
Ich würde dieses "Verrutschen" aber gerne begrenzen.
Wenn ich das Browserfenster verkleinere stoppt das Suchfeld da wo ich will.
Hab das mit left:70% hinbekommen weiß aber beim besten Willen nicht ob das so auch korrekt ist.

Vielleicht kann mir jemand helfen?
Hab schon gesucht und probiert wie ein bekloppter, aber ich finde dafür keine Lösung.
Code bisher:

<div style="position:absolute; top:180px; left:70% ">

<table border="0" cellpadding="20" width="300">
<tr>
<form method="post" action="/isearch2/index.php">
<input class="searchfield" maxlength="255" name="s" value="Suchen"
autosave="start" results="10" onblur="if (this.value =='') {this.value ='Suchen';}" onfocus="if (this.value =='Suchen') {this.value ='';}" type="search">
<input value="Search Site" type="hidden">
<input name="action" value="search" type="hidden">
</form></td>
</tr>
</table>
</div>

Wäre nett, wenn mir einer unter die Arme greifen könnte.
Danke schon mal.
Tyler

Bild%201.png

Bild%202.png
 
Zuletzt bearbeitet:
Verzichte auf die absolute Positionierung. Dann verschiebt sich auch nichts über etwas anderes.
 
Das hat mein Problem leider nicht gelöst

Sorry aber das hat´s nicht gebracht.
Verkleinere ich das Browserfensetr rutscht das Suchfeld über die gesamte Menüleiste nach links ohne zu stoppen.
Vergrößere ich das Browserfenster ist es die selbe Schose nur, dass das Suchfeld nach rechts rutscht über die Menüleiste hinaus.

Wie kann ich das begrenzen für einen bestimmten Brereich???
Bitte dringend um Hilfe, hab schon das ganze Wochenende rumexperimentiert oder besser gesagt herumgestochert aber ich kriegs nicht hin.

Ich kenne ein paar html Befehle und auch ein wenig CSS.
danke.
tyler.
 
Hallo, eigentlich sollte das Suchfeld nach dem entfernen der absoluten Positionierung nicht mehr willkürlich rumrutschen.

Kannst du eventuell mal den ganzen Code der Seite zeigen, damit man das besser nachvollziehen kann?
Übrigens fehlt in deinem Code Fragment das öffnende <td> .
 
Hi Marv,
danke für die Rückmeldung!
Vielleicht sollte ich dazu sagen, dass die Seite in Rapidweaver gebastelt wurde:-)
Ich hab mal versucht den kompletten Code für den "head" zu "erwischen"- vielleicht kannst ja was damit anfangen-
VIELEN DANK für Deine Mühe!!!
So long Matze.



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="RapidWeaver" />
<link rel="icon" href="http://www.mjm-services.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.mjm-services.com/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="http://www.mjm-services.com/apple-touch-icon.png" />

<title>Start</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
<link rel="stylesheet" type="text/css" media="screen" href="colour_tags-page31.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<!--[if IE 6]><link rel="stylesheet" media="screen" href="ie6.css" type="text/css" /><![endif]-->
<link rel="stylesheet" type="text/css" media="screen" href="css/widths/1000.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/fonts/arial.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/kerning/1.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/logo/left.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/banners/none.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/menus/curve.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/sidebars/none.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/blog/24.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/album/0.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/movies/0.css" />

<style type="text/css" media="all">input.searchfield {
color: #666666;
border-bottom: 1px solid #e5e5e5;
font-size: 12px;
padding-bottom: 1px;
padding-left: 3px;
border-top: 2px groove #cccccc;
border-left: 1px solid #666666;
border-right: 1px solid #e5e5e5;
}

#sidebar-menu ul ul span span {
display: inline;
}


</style>
<script type="text/javascript" src="javascript.js"></script>
<!--[if lt IE 7]>
<script type="text/javascript">
if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", enableAlphaImages);
}

function enableAlphaImages(){
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
if (itsAllGood) {
for (var i=0; i<document.all.length; i++){
var obj = document.all;
var bg = obj.currentStyle.backgroundImage;
var img = document.images;
if (bg && bg.match(/\.png/i) != null) {
var img = bg.substring(5,bg.length-2);
var offset = obj.style["background-position"];
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
obj.style.backgroundImage = "url('blank.gif')";
obj.style["background-position"] = offset; // reapply
} else if (img && img.src.match(/\.png$/i) != null) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='crop')";
img.src = "blank.gif";
}

}
}
}
</script>
<![endif]-->


<link rel='stylesheet' type='text/css' media='all' href='files/stacks.css' />
<!--[if IE]>
<link rel='stylesheet' type='text/css' media='all' href='files/stacks_ie.css' />
<![endif]-->
<link rel='stylesheet' type='text/css' media='all' href='files/stacks_page_page31.css' />
<script type='text/javascript' charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' charset='utf-8' src='files/stacks_page_page31.js'></script>

<div style="position: fixed; widht:auto; overflow: auto; top:180px; left:70%; ">

<table border="0" cellpadding="20" width="300">
<tr>
</td>
<form method="post" action="/isearch2/index.php">
<input class="searchfield" maxlength="255" name="s" value="Suchen"
autosave="start" results="10" onblur="if (this.value =='') {this.value ='Suchen';}" onfocus="if (this.value =='Suchen') {this.value ='';}" type="search">
<input value="Search Site" type="hidden">
<input name="action" value="search" type="hidden">
</form></td>
</tr>
</table>
</div>



<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/testzone9/rw_common/themes/modernity/Iphone.css" type="text/css" />
<meta name = "viewport" content = "
width = 300, <!-- Skaliert die Seite auf 320px -->
user-scalable = 1, <!-- Soll der User zoomen könen? 1/0 -->
initial-scale = 0.4, <!-- Minimaler Skalierungsfaktor -->
maximum-scale = 1 <!-- Maximaler Skalierungsfaktor 100%-->
"/>

</head>
<body>
 
Hi,
wenn du Code hier im Forum postest, dann bitte immer mit BB-Code Beispiel: [NOPARSE]
HTML: 
 Hier kommt dein HTML Code rein.
[/NOPARSE]
sonst werden, wie oben schön zu sehen manche Zeichenfolgen z.B. in einen Smiley umgewandelt.

Zu deinem Code selbst:
Der Code mit dem div und der Tabelle gehört in den body-Bereich, also nicht wie bei dir zwischen den head sondern zwischen <body> und </body>

Ansonsten weist der Code noch fehler auf, mit denen eine richtige Darstellung nicht gewährleistet werden kann.
Überprüfen kannst du deinen Code z.B. beim W3C-Validator : The W3C Markup Validation Service

ps: Probier erst mal bei :

HTML: 
<div style="position:absolute; top:180px; left:70% ">

anstatt position:absolute; , oder fixed, so wie du es jetzt geändert hast, auf relative zu stellen:

HTML: 
<div style="position:relative; top:180px; left:70% ">
 
Zuletzt bearbeitet:
HI Marv,
hab das so gemacht wie Du gesagt hast.
HTML: 
<div style="position:relative; top:180px; left:70% ">
Komisch is , dass das Browserfenster nun jede Menge scrollbaren Platz nach rechts freigibt.

Das Suchfeld "scheuert" immernoch gnadenlos links und rechts übers Menü.
Ich möchte das Suchfeld ja nur in einem bestimmten Bereich "mitlaufen" lassen.
Vielleicht noch ne andere Idee?
Lieber Gruß Matze.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben