✔ CSS Layout erstellung

[alex130]

Das hab ich gar nicht bemerkt
Thx habs schon geändert

 

[Maik]

Und wofür verwendest Du überhaupt ein Frameset , wenn darin nur ein einziger Frame mit dem Dokument http://board.pcmasters.at/homepage/test/test/home.php enthalten ist?

 

[alex130]

Ich verwende die Frames nur damit immer nur die normale Domain in der Adressleiste steht.
lg. Alex

 

[alex130]

Hi
Ich bins wieder mal
Ich hab schon wieder ein Problem, ich hab gerade ein Layout fertig gemacht, aber es wird nur in Firefox richtig dargestellt, im Internet EXplorer wird es ein bissl falsch dargestellt. Ich hoffe ihr könnt mir helfen. Hier der LINK
Thx Alex

 

[Maik]

Entferne zunächst mal in den folgenden CSS-Selektoren das rotmarkierte Semikolon aus der Regel:

#container {
width: 780px;
margin: 0 auto;
background-image: ;url(images/container.jpg);
border: 0px;
padding: 0px;
}

#container1 {
width: 800px;
height: 570px;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
background-color: #FFFFFF;
background-image: ;url(images/container.jpg);
border: 1px solid black;
border-top: 1px solid black;
padding: 15px 5px 5px 10px;
}

#menu1 {
width: 780px;
background-color: #FFFFFF;
background-image: ;url(images/bg.gif);
font-family:Tahoma,Arial, Helvetica, sans-serif;
font-size: 12px;
height: 20px;
padding: 0px;
margin: 0px;
border: 0px;
}

und übernehme die fettgedruckten Eigenschaften für die beiden Selektoren #menu und #footer:

#menu {
width: 780px;
height: 20px;
background-color: #CCCCCC;
border: 0px;
padding: 0px;
margin: 0px;
overflow: hidden;
}

#footer {
width: 770px;
height: 15px;
border-top: 1px solid #CCCCCC;
font-size: 11px;
background-color: #FFFFFF;
padding: 5px; 5px 0px 5px;
margin: 0px;
}

Zu guter letzt solltest Du im HTML-Code das DIV #main aus dem DIV #menu herausnehmen.

Hier die korrigierte Fassung des Quelltextes:

<div id="container1">
     <div id="container">
          <div id="menu1">
               <a href="#">| Home</a>&nbsp;<a href="#">| Kontakt</a>
          </div>
          <div id="header"></div>
          <div id="menu">
               <div align="center">
                    <img src="images/menu.gif" /><a href="#">&nbsp;Link</a>&nbsp;&nbsp;&nbsp;
                    <img src="images/menu.gif" /><a href="#">&nbsp;Link</a>&nbsp;&nbsp;&nbsp;
                    <img src="images/menu.gif" /><a href="#">&nbsp;Link</a>&nbsp;&nbsp;&nbsp;
                    <img src="images/menu.gif" /><a href="#">&nbsp;Link</a>&nbsp;&nbsp;&nbsp;
                    <img src="images/menu.gif" /><a href="#">&nbsp;Link</a>&nbsp;&nbsp;&nbsp;
                    <img src="images/menu.gif" /><a href="#">&nbsp;Link</a>&nbsp;&nbsp;&nbsp;
               </div>
          </div>
          <div id="main"></div>
          <div class="Stil1" id="footer">
               <div align="center">Copyright by Alexander B. &nbsp;<a href="#">| Impressum</a>&nbsp;<a href="#">| Kontakt</a></div>
          </div>
     </div>
</div>

 

[alex130]

Hi
Thx für die schnelle Antowort nun es.
Schönen Sonntag noch.
Alex

EDIT:
Kann ichauch ein Bild für den Hover Effekt verwenden?
Hab auch ein Bild dazu gegeben: http://www.filecast.de/k.php?i=0gjek4ea32.jpg
Thx

 

[Maik]

• Link mit variabler Breite

a.bgImage:link, a.bgImage:visited {
background: url(pfad/zur/grafik_1.jpg) repeat-x;
}

a.bgImage:hover {
background: url(pfad/zur/grafik_2.jpg) repeat-x;
}

• Link mit fester Breite:

a.bgImage:link, a.bgImage:visited {
display: block;
width: 100px; /* entspricht Grafikbreite */
height: 20px; /* entspricht Grafikhöhe */
background: url(pfad/zur/grafik_1.jpg);
}

a.bgImage:hover {
background: url(pfad/zur/grafik_2.jpg);
}

• HTML-Code:

<a class="bgImage" href="#">test</a>

 

[alex130]

Hi
Einmal muss ich leider noch stören, ich hab das jetzt so gemacht, aber es nicht richtig.
In Firefox wird es richtig angezeigt, aber wenn ich mehrere Links ins Menü1 mach, dann werden sie unter einander angeordnet.
Kannst du mir bitte nochmal helfen?
Thx

 

[Maik]

Erweiter mal die CSS-Regel für die Links mit der float-Eigenschaft:

a.bgImage:link, a.bgImage:visited {
display: block;
width: 50px; /* entspricht Grafikbreite */
height: 30px; /* entspricht Grafikhöhe */
background: url(images/menu1.gif);
float: left;
}

 

[alex130]

Hi
Thx ich habe jetzt float: left; hinzugefügt und die Abstände entfernt und nun es.
Thx