online 1
gast (50)

/ Forum / Webseiten/HTML

Webseiten/HTMLWebseiten/HTML

Fragevon Computerfreaki vom 02.10.2020, 17:09 Options

Problem bei einem Website-Template

Hallo alle zusammen,
ich habe mal wieder ein Problem mit einem neuem Website-Template.
Wenn ich das Browserfenster kleiner als den Content mache, ist oben rechts das Suchfeld immer abgeschnitten
Siehe hier:
http://www.computerjan.de/test/axis-04/screen1.jpg

Und hier die richtige Variante:
http://www.computerjan.de/test/axis-04/screen2.jpg

Wer sich nochmal die komplette Vorlage anschauen möchte:
http://www.computerjan.de/test/axis-04/index.html

Komischerweise ist im Internet Explorer 6 das Suchfeld nicht abgeschnitten.

Wäre dankbar für eure Hilfe
Gruß Computerfreaki


Antwort schreiben

Antwort 1 von katy vom 02.10.2020, 17:15 Options

Hallo Computerfreaki,

ich kann in meinem Opera dein Problem nicht nachvollziehen, aussagekräftiger als Bilder fände ich hier auch etwas Quellcode (HTML+CSS). Oder erwartest du, dass wir deine Seite durchwühlen?

katy

Antwort 2 von Computerfreaki vom 02.10.2020, 17:19 Options

Schau doch mal beim 3. Link.
Da is doch die komplette Vorlage. Oder hast du in deinem Opera keine Quellcode-Ansicht ?

Antwort 3 von katy vom 02.10.2020, 17:23 Options

sorry, ich dachte du solltest wissen, wie man die relevanten Codeteile separat postet. Ich habe keine Zeit, sie mir selbst rauszusuchen.

katy

Antwort 4 von Computerfreaki vom 02.10.2020, 17:30 Options

Also hier dann die entsprechenden CSS-Daten:

.main {position:relative; width:1024px; margin:0 auto; text-align:left;}

	#header {padding:30px 0;overflow:hidden}

        #logo {margin:0; margin-bottom:3px; font:normal 260%/1.2 "arial",sans-serif; letter-spacing:-1px;}
        #logo span {font-weight:bold;}
        #logo a {text-decoration:none;}

        #slogan {margin:0;}
    	
        #search {position:absolute; top:0; right:0;}
        #search #search-input {width:170px; padding:4px; font:normal 100%/1.2 "arial",sans-serif;}
        #search #search-submit {padding:3px 5px; font:bold 100%/1.2 "arial",sans-serif;}

    #nav {clear:both; background:url("../design/nav.gif") 0 0 repeat-x;}
    #nav ul {margin:0; padding:0; list-style:none;}
    #nav li {display:inline; margin:0; padding:0;}
    #nav li a {display:block; float:left; padding:10px 20px; text-decoration:underline; font-weight:bold;}
    #nav li#active a {font-weight:bold; text-decoration:none;}
	   
    #cols .main {padding-bottom:15px; background:url("../design/aside.gif") 100% 0 repeat-y;}

    	#content {float:left; width:700px;}
    	#content p {text-align:justify;}
    	
    	#content-in {padding-left:15px;}

            #content h1 {margin:0; margin-bottom:10px; font-size:160%; letter-spacing:-1px;}
            #content h2, #content h3, #content h4 {margin-bottom:0; margin-bottom:10px; font-size:140%; letter-spacing:-1px;}
            #content h3, #content h4 {letter-spacing:0; font-size:*Z*;}
                            
    	#aside {float:right; width:244px; padding-right:1px; overflow:hidden;}
    	
    	   #aside h3 {padding-right:15px; background:url("../design/arrow.gif") 100% 50% no-repeat; font-size:100%;}
    	   #aside ul {margin:5px 0 15px 0; padding:0; list-style:none;}
    	   #aside ul li {margin:0; padding:4px 10px 4px 0;}

	#footer {clear:both; padding:15px 0;}
    #footer p {margin:0;}



Und der entsprechende HTML-Abschnitt
<div id="header">
<div class="main">

<h3 id="logo"><a href="http://www.computerjan.de">Jans <span>Computerecke</span></a></h3>
<p id="slogan">Computers are the future</p>
<p class="noscreen noprint"><em>Quick links: <a href="#content">content</a>, <a href="#nav">navigation</a>, <a href="#search">search</a>.</em></p>
<div id="search">

<form action="" method="get">
<div>
<span class="noscreen">Fulltext:</span>
<input type="text" size="30" name="query" id="search-input" /><input type="submit" value="Suchen !" id="search-submit" />
</div>
</form>
</div> <!-- /search -->

</div> <!-- /main -->
</div>
<!-- /header -->
<!-- navigation -->
<div id="nav" class="box">
<div class="main">
<ul>
<li id="active"><a href="#">Home</a></li> <!-- Active page (highlighted) -->
<li><a href="#">&Uuml;ber mich</a></li>

<li><a href="#">Links</a></li>
<li><a href="#">Bildergalerie</a></li>
<li class="last"><a href="#">Statistik</a></li>
</ul>
</div> <!-- /main -->
</div> <!-- /nav -->

Antwort 5 von Computerfreaki vom 02.10.2020, 17:49 Options

Problem gelöst.
Ich hab einfach für die ID´s:

header
nav
footer

Die zusätzliche Eigenschaft min-width:1024px hinzugefügt.
Jetzt funktioniert alles

Ähnliche Themen

Passwortschutz der Website
fabi1991  26.03.2007 - 67 Hits - 4 Antworten

Formatübertragung bei Template
Oliver76  14.07.2007 - 29 Hits - 2 Antworten

Problem bei Website lokal speichern - mit IE und Mozilal
MaximT  17.10.2007 - 90 Hits - 4 Antworten

Website-Chat-Problem
Ananas  27.04.2008 - 8 Hits - 18 Antworten

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Version: supportware 1.9.150 / 10.06.2022, Startzeit:Mon Jan 26 16:59:01 2026