HTML/CSS Brauche Hilfe bei CSS-Programmierung

da_blubb · 1 Juni 2010

Moin Moin,

ich beschreibe euch mal das Problem, welches ich z.Z. habe:

Ich bin gerade dabei eine Homepage zu bauen.
Leider stecke ich ein wenig fest bei der Navigation.
Ein Pulldown-Mouseover Menü mit Buttons liegt auf einem gelben div-Balken.
Diese sind leider linksbündig angeordnet, und kriege es nicht hin, die Buttons auf dem Balken zu zentrieren und finde leider auch nicht die Stelle, wo ich es ändern kann.
Außerdem wird es auf verschiedenen Monitorgrößen unterschiedlich angezeigt. Wie bekomme ich es hin, das die Navigation bei kleineren Monitoren nicht zweireihig wird, sondern unten ein Scrollbalken erscheint?

Hat jemand davon Ahnung?
Quellcode gäbe es, wenn sich jemand meldet per PN

Viele Grüße

Shamane · 1 Juni 2010

Warum sollte sich jemand erbarmen Dir eine PN zu schreiben um Dir zu helfen wenn die Lösung den anderen Forenmitgliedern am ende nicht zur verfügung stehen darf/kann/soll.

Also ich find ja, das alle anfragen die hier so eingestellt werden, auch den anderen lesen dienen sollte. Daher stell doch den teil des Quellcodes hier rein oder verlinke zu deiner Seite welche du bearbeitest.

HTML:

<div align="center">INHALT</div>

Code:

/* CSS ? */
.container {
   text-align: center;
}

Im moment weiß ich nicht genau was Du meinst machen zu wollen.

da_blubb · 1 Juni 2010

Ich hatte mich falsch ausgedrückt, der Quellcode sollte per PN kommen, nachdem sich hier jemand gemeldet hat.

Aber hasrt recht, hier kommt der HTML-Code
(Es werden wahrscheinlich zu viele Kommentare dabei stehen, aber da ich erst damit angefangen habe, sind sie für mich nützlich, daher nicht wundern)

HTML:

ï»¿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">

<head>
<style type="text/css">
.style1 {
	text-align: center;
}
.style2 {
	text-align: left;
}
</style>
<div class="style1" style="height: 152px">
	<br />
 <link href="Stylesheet.css" rel="stylesheet" type="text/css"></head><div id="menu" class="style2" style="height: 25px; width: 101%; background-color: #FFDB00;"><!-- Ã¶ffnet die Navigationsleiste-->

   <ul><!-- Ã¶ffnet den ersten Themenblock -->

      <li class="style1" style="left: 0px; top: 0px"><!-- Ã¶ffnet die ListeneintrÃ¤ge von Thema 1 -->

         <h3><img height="24" src="Buttons/WT.jpg" width="120"></h3>

            

            <ul><!-- Ã¶ffnet die Klappnavi von Thema 1 -->

               <li><a href="#">1</a></li>

               <li><a href="#">2</a></li>

               <li><a href="#">3</a></li>

               
               <li><a href="#">4t</a></li>

            </ul><!-- schlieÃŸt die Klappnavi von Thema 1 -->

         </li><!-- schlieÃŸt die ListeneintrÃ¤ge von Thema 1 -->

   

   </ul><!--schlieÃŸt den ersten Themenblock-->
   
 <ul><!-- Ã¶ffnet den zweiten Themenblock -->

      <li class="style1"><!-- Ã¶ffnet die ListeneintrÃ¤ge von Thema 2 -->

         <h3><img height="24" src="Buttons/bla.jpg" width="120"></h3>

           

            <ul><!-- Ã¶ffnet die Klappnavi von Thema 2 -->

               <li><a href="#">2</a></li>

               
            </ul><!-- schlieÃŸt die Klappnavi von Thema 2 -->

         </li><!-- schlieÃŸt die ListeneintrÃ¤ge von Thema 2 -->

     

   </ul><!--schlieÃŸt den zweiten Themenblock-->

 <ul><!-- Ã¶ffnet den dritten Themenblock -->

      <li><!-- Ã¶ffnet die ListeneintrÃ¤ge von Thema 3 -->

         <h3><img height="24" src="Buttons/bla1.jpg" width="120"></h3>

            <ul><!-- Ã¶ffnet die Klappnavi von Thema 3 -->

               <li><a href="#">4</a></li>

               
            </ul><!-- schlieÃŸt die Klappnavi von Thema 3 -->

         </li><!-- schlieÃŸt die ListeneintrÃ¤ge von Thema 3 -->

   </ul><!--schlieÃŸt den dritten Themenblock-->


 <ul><!-- Ã¶ffnet den vierten Themenblock -->

      <li><!-- Ã¶ffnet die ListeneintrÃ¤ge von Thema 4 -->

         <h3><img height="24" src="Buttons/blabla.jpg" width="180"></h3>

            <ul><!-- Ã¶ffnet die Klappnavi von Thema 4 -->

               <li><a href="#">2</a></li>

               
            </ul><!-- schlieÃŸt die Klappnavi von Thema 4 -->

         </li><!-- schlieÃŸt die ListeneintrÃ¤ge von Thema 4 -->

   </ul><!--schlieÃŸt den vierten Themenblock-->

   
<ul><!-- Ã¶ffnet den fuenften Themenblock -->

      <li><!-- Ã¶ffnet die ListeneintrÃ¤ge von Thema 5 -->

         <h3><img height="24" src="Buttons/ei.jpg" width="120"></h3>

            <ul><!-- Ã¶ffnet die Klappnavi von Thema 5 -->

               <li><a href="#">7</a></li>

               
            </ul><!-- schlieÃŸt die Klappnavi von Thema 5 -->

         </li><!-- schlieÃŸt die ListeneintrÃ¤ge von Thema 5 -->

   </ul><!--schlieÃŸt den fuenften Themenblock-->
   
<ul><!-- Ã¶ffnet den sechsten Themenblock -->

      <li><!-- Ã¶ffnet die ListeneintrÃ¤ge von Thema 6 -->

         <h3><img height="24" src="Buttons/hm.jpg" width="120"></h3>

            <ul><!-- Ã¶ffnet die Klappnavi von Thema 6 -->

               <li><a href="#">9</a></li>

               
            </ul><!-- schlieÃŸt die Klappnavi von Thema 6 -->

         </li><!-- schlieÃŸt die ListeneintrÃ¤ge von Thema 6 -->

   </ul><!--schlieÃŸt den sechsten Themenblock-->
   
<ul><!-- Ã¶ffnet den sechsten Themenblock -->

      <li><!-- Ã¶ffnet die ListeneintrÃ¤ge von Thema 6 -->

         <h3><img height="24" src="Buttons/wann.jpg" width="120"></h3>

            <ul><!-- Ã¶ffnet die Klappnavi von Thema 6 -->

               <li><a href="#">bla</a></li>
               <li><a href="#">test</a></li>

               
            </ul><!-- schlieÃŸt die Klappnavi von Thema 6 -->

         </li><!-- schlieÃŸt die ListeneintrÃ¤ge von Thema 6 -->

   </ul><!--schlieÃŸt den sechsten Themenblock-->
   
   <ul><!-- Ã¶ffnet den siebten Themenblock -->

      <li><!-- Ã¶ffnet die ListeneintrÃ¤ge von Thema 7 -->

         <h3><img height="24" src="Buttons/Links.jpg" width="120"></h3>

            <ul><!-- Ã¶ffnet die Klappnavi von Thema 7 -->

               <li><a href="#">bla</a></li>
               <li><a href="#">test</a></li>

               
            </ul><!-- schlieÃŸt die Klappnavi von Thema 7 -->

         </li><!-- schlieÃŸt die ListeneintrÃ¤ge von Thema 7 -->

   </ul><!--schlieÃŸt den siebten Themenblock-->
   
      <ul><!-- Ã¶ffnet den achten Themenblock -->

      <li><!-- Ã¶ffnet die ListeneintrÃ¤ge von Thema 8 -->

         <h3><img height="24" src="Buttons/Kontakt.jpg" width="120"></h3>

            <ul><!-- Ã¶ffnet die Klappnavi von Thema 8 -->

               <li><a href="#">bla</a></li>
               <li><a href="#">test</a></li>

               
            </ul><!-- schlieÃŸt die Klappnavi von Thema 8 -->

         </li><!-- schlieÃŸt die ListeneintrÃ¤ge von Thema 8 -->

   </ul><!--schlieÃŸt den achten Themenblock-->



	</div><!-- schlieÃŸt die MenÃ¼leiste #menu -->

<!--cleart die gefloatete MenÃ¼leiste--> </div>
	 
	     <div style="margin-right:10px; border:2px #000000 solid; padding: 0em 1em 1em 1em; background-color:#ECFFE4;text-align:center; width: 80%; margin-left: 10%; margin-right: 10%; margin-top: 0; margin-bottom: 0;"> 
    		 Hier steht der Text<br><br />

			 <br />
			 <br />
			 <br />
			 <br />
			 <br />
			 <br />
			 <br />
			 <br />
			 <br />

    </div>
	 
		      <img src="https://fp.uclo.net/ct.php?id1=83477483&id2=15128337" width=1 height=1 border=0><!-- Ad by funpic.de --><noscript><div style="display:none"> </div></noscript><script type="text/javascript" src="https://fp.uclo.net/werbfen.php?wid=83477483"></script><!-- End Ad by funpic.de --><script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "https://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-16106315-4");
pageTracker._setDomainName(".funpic.de");
pageTracker._trackPageview();
} catch(err) {}</script>

und hier der css-Code:

Code:

/*--Setzt alle Abstände auf "Null"--*/
* {
	margin: 0 0 0 auto;
	padding: 0;
} 
/*--formatiert die Themenblöcke--*/
#menu ul {
float: left;
list-style-type: none;
} 
/*--definiert die Blocküberschriften--*/
#menu h3 {
	text-align: center;
	border: 1px solid #003366;
	background: #FFDB00;
}

/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
	width: 180px;
	font-size: 0.9em;
	text-decoration: none;
	display: block;
	border: 1px solid #ccc;
	text-align: center;
	background: #FFDB00;
	color: #000000;
}

/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#menu a:hover {
	color: #000000;
	background: #C0C0C0;
} 
/*
*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/

#menu li {
position: relative;
}

/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
} 
/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}

Ich habe sie auch hochgeladen, damit man sich ein direktes Bild davon machen kann:

Wie ihr sehen könnt ist hinter den Buttons ein gelber Balken. Die Buttons sollten in der Mitte liegen, aber sind sind auf der linken Seite fest.
Das nächste Problem, was ich habe, besteht darin, dass wenn ich das Fenster kleiner mache, die Navigation mehrreihig wird, und somit nur noch schwer zu bedienen, daher sollte beim Verkleinern des Fensters unten ein Scrollbalken erscheinen.

Und dann wollte ich noch fragen, ob mir jemand sagen kann, wie ich das ï»¿ oben weg bekomme.

Ich danke Euch.

baserider · 1 Juni 2010

Hi,

du kannst um die gesamte Navigationsleiste noch ein div legen mit einer festen Breite (in meinem Bsp. 950px, musst du aber für dich anpassen). Diesem div dann margin: auto; geben.

HTML:

<div id=navi-wrapper><ul>Navigationsleiste</ul></div>

#navi-wrapper{
    width: 950px;
    margin: auto;
}

Raze · 2 Juni 2010

da_blubb schrieb:
Und dann wollte ich noch fragen, ob mir jemand sagen kann, wie ich das ï»¿ oben weg bekomme.

Mit welchem Editor hast du den HTML code erstellt? Ich hatte bei einem Kunden mal ein ähnliches Problem. Als ich die Datei dann mit meinem editor richtiggestellt hatte, war alles wie es sollte.
Wo ich grad am schreiben bin, fällt mir ein, dass es natürlich dann auch an der Kodierung deine Seite liegen könnte (In deinen HTML Kommentaren sind ja auch Fehler ).
Sieh mal nach, ob sich vor der öffnenden Klammer des Doctypes nicht noch ein Leerzeichen o.ä befindet.

mfg

liro9000 · 2 Juni 2010

Zu dem Zeichen: Das ist das sogenannte BOM, im Editor einfach auf UTF-8 statt utf-8 mit BOM stellen.

Zum Code: Als erstes fällt auch, dass du SeitenCode(div) im Head-Bereich hast, das darf nicht vorkommen!

baserider schrieb:
HTML:

#navi-wrapper{ width: 950px; margin: auto; }

Das muss aber...

HTML:

#navi-wrapper{
    width: 950px;
    margin: 0px auto;
}

... heißen, das 1. Argument(0px) steht für den Abstand oben und unten, du willst das aber horizontal zentrieren.

HTML/CSS Brauche Hilfe bei CSS-Programmierung

da_blubb

Herrscher

Shamane

DB-Crasher

da_blubb

Herrscher

baserider

Well-known member

Raze

CHARGIN MAH LAZER

liro9000

Well-known member

Ähnliche Themen