nicht angemeldet
Logo aus drei teilen saumlos verbinden
Hallo,
bin Anfänger im Thema CSS, merke aber auch, das man an diesem Thema nicht mehr vorbei kommt.
Jetzt möchte ich alle meine Seiten (und das sind viele, grummel) tabellen und framelos machen.
Hab schon etliches an CSS Tutorial durchgelesen, hänge aber immer wieder fest bzw. finde die "tuts" teilweise sehr kompliziert und umständlich geschrieben. Was soll da beiß ich mich jetzt durch.
Mein Problem. Ich habe ein Logo welches in der Mitte eine feste größe z.B. 400px hat, rechts und links mit 1 pixel Bild welches dann einfach mit "repeat" verlängert wird, dynamisch auf Bildschimgröße jeh nach Auflösung, gebracht wird.
Bisher so gelößt :
<table class=top border=0 width=100% cellpadding="0" cellspacing="0"><tr>
<td><p style="margin: 10px"></p>
<table class=top border=0 width=100% cellpadding="0" cellspacing="0"><tr><td style="background: url(logol.png); width:50%; background-repeat: repeat-x"></td>
<td><center><img src="logo.png" border=0></td>
<td style="background: url(logor.png); width:50%; background-repeat: repeat-x"></td>
</tr></table>
<p style="margin: 10px"></p>
</td></tr></table>
Jetzt würde ich das ganze gerne in "FULL CSS" ohne tabellen hinbekommen. Packe es aber nicht. Irgendwas klemmt immer.
Warscheinlich gehe ich viel zu kompliziert an die Sache ran.
Vielleicht könnt Ihr mir etwas helfen ... danke ...
-
Hallo Marcus,
es waere gut wenn du die Url nennen koenntest wo Du das Problem hast,
dann kann man genau auf das Problem einegehen und laeuft nicht Gefahr daran vorbei zu erklaeren.In diesem Fall finde ich es einfach hilfreich zu wissen wie Deine Grafiken aussehen.
Viele Grüße
Jochen
-
Das ganze in der "alten" Form ist auf www.skycore.de zu sehen.
-
Das ganze in der "alten" Form ist auf www.skycore.de zu sehen.
ok - dacht ich mir ;-)
Also das ist die Lösung
Mach die Streifen in Deiner Grafik so das Sie rechts und links passen.
Nur noch zwei Grafiken
1. das Logo - logo_new.png
2. die Streifen - logo_hg.pngjetzt brauchst Du nur noch zwei div-Container
einen fuers Logo und einen fuer die Streifen.der LogoContainer hat eine feste Breite, die des Logos und wird mit margin:0 auto 0 auto; in die Mitte gesetzt.
Der headerContainer nimmt die Streifen auf und kachelt die Grafik einfach als Hintergrund hinter dem Logo vorbei.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
body
{
margin:0;
padding:0;
}#header
{
margin:20px 0 0 0;
padding:0;
height:100px;
width:100%;
background: url(logo_hg.png);
background-repeat: repeat-x;
}#logo
{
margin:0 auto 0 auto;
padding:0;
height:100px;
width:419px;
background: url(logo_new.png);
background-repeat:no-repeat;
}
-->
</style>
</head>
<body>
<div id="header">
<div id="logo">
</div>
</div>
</body>
</html>-
Warum so? Ein einzelnes Div sollte doch auch reichen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> <!-- body { margin:0; padding:0; } #header { margin:20px 0 0 0; padding:0; height:100px; width:100%; background: url(logo_hg.png); background-repeat: repeat-x; text-align: center; } --> </style> </head> <body> <div id="header"> <img src="logo.png" alt="Mein Logo" /> </div> </body> </html>-
Warum so? Ein einzelnes Div sollte doch auch reichen.
Stimmt ist noch einfacher :-)
-
Danke euch beiden ...
Problem gelößt und wieder etwas mehr Licht ins dunkel gebracht !
-
-
-
-
-