Quote:
Originally Posted by florian0
Bis auf das Logo, den Hintergrund und diesen horizontalen Teiler sehe ich jetzt nix was nicht mit CSS zu lösen wäre. border-radius und box-shadow wären so die Schlüsselwörter.
Welche Font ist das? Sieht aus wie Bebas Neue, die gibts auch als [Only registered and activated users can see links. Click Here To Register...].
Den Hintergrund so zuschneiden, dass ein wiederholbares Stück dabei rauskommt. Dann brauchst du keine Giga-Hintergrund-Datei. Das Logo kannst du transparent ausschneiden, dann passt es problemlos auf den Hintergrund.
Dann noch den horizontalen Teiler, ebenfalls transparent. Den Rest würd ich mit CSS machen.
Alternativ kannst du auch die Randstückchen in jeweils 1 vertikales, 1 horizontales und 4 Ecken auftrennen und dann mit border-image einsetzen, dann sparst du dir das rumgeeire mit Schatten und Ecken. Die Kategorie-Links so knapp wie möglich transparent ausschneiden, dann kannst du damit besser in deiner Vorlage arbeiten.
Im Footer is ein Tippfehler, just sayin ;D |
Hab dir das folgende per PN zwar geschickt, aber vielleicht meldet sich noch jemand :)
Ich habe es mal so gemacht wie du es gesagt hast.
Hier siehst du die Bilder die ich ausgeschnitten habe. Wie du gesagt hast, jeweils 4 Ecken (oben rechts/links, unten rechts/links), dazu jeweils horizontale linke und rechte Seite, wie die vertikale linke und rechte Seite. Anschließend die Trenner in der Mitte, die Menüpunkte, das Logo und den BG erwischt.
Nun habe ich es alles in eine Datei gepackt und da ich auch garnicht so gut in Programmieren bin habe ich es bis jetzt so weit geschafft:
Wie du hier siehst, wiederholt sich das vertikale obere und unten links siehst du, dass es die obere rechte Ecke ist, die auch mehrmals angezeigt wird.
Aktuell sieht es bei mir so aus im Code:
HTML Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ELEKTECH.info</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="logo" onclick="window.location.href='index.html'">
<p></p>
</div>
<br>
<div class="content-top">
<p></p>
</div>
<div class="content-right">
</div>
<div class="content-left">
</div>
<div class="content-bot">
</div>
</body>
</html>
und im CSS:
Code:
/* CSS Document */
body {
background-image: url(bg.png);
background-repeat: repeat;
}
div.logo {
background-image: url(logo.png);
width:450px;
height:125px;
margin-left: auto;
margin-right: auto;
}
div.content-top {
border: 32px solid transparent;
border-image:url(vertikal_oben.png) 35;
width:734px;
height:32px;
margin-left: auto;
margin-right: auto;
}
div.content-right {
border:32px solid transparent;
border-image:url(oben_rechts.png);
}
Das mit dem Logo und dem BG ist ein Kinderspiel aber das mit der Box in der Mitte ist mir Spanisch. Du sagtest "border-image" wäre da die Lösung, habe gegooglet und dies und jenes habe dann daraus folgendes hingeschrieben:
Code:
div.content-top {
border: 32px solid transparent;
border-image:url(vertikal_oben.png) 35;
width:734px;
height:32px;
margin-left: auto;
margin-right: auto;
}
div.content-right {
border:32px solid transparent;
border-image:url(oben_rechts.png);
}
Wobei ich garnicht genau verstanden habe, ob dies überhaupt so richtig ist, passt oder gar falsch ist. "border-image-repeat" gibts kein "none" und wie ich die Ecken, dazu noch die horizontale und vertikale linke und rechte Seite einfügen soll, weiß ich auch gar nicht. Dann den Inhalt des Boxes befüllen und beschmücken..
Könntest du mir dabei helfen?
#EDIT:
Ich habe jetzt eine gemischte Suppe gemacht, ich weiß ist falsch aber anders blick ich einfach nicht durch - ich zerreiße mir mein Kopfffff gleich ....
Codeschnipseln:
HTML Code:
<body>
<div class="logo" onclick="window.location.href='index.html'">
<p></p>
</div>
<br>
<div class="c-top-ol"></div>
<div class="content-top">
<p></p>
</div>
<div class="c-top-or"></div><br><br>
<div class="content-left">
</div>
<div class="content">
testsetsettse
</div>
<div class="content-right">
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="c-top-ul"></div>
<div class="content-bot"></div>
<div class="c-top-ur"></div>
</body>
Code:
/* CSS Document */
body {
background-image: url(bg.png);
background-repeat: repeat;
}
div.logo {
background-image: url(logo.png);
width:450px;
height:125px;
margin-left: auto;
margin-right: auto;
}
div.c-top-ol {
float:left;
background-image:url(oben_links.png);
width:32px;;
height:32px;
margin-left:auto;
margin-right:auto;
}
div.c-top-or {
float:left;
background-image:url(oben_rechts.png);
width:32px;
height:32px;
margin-left:auto;
margin-right:auto;
}
div.content-top {
float:left;
background-image:url(vertikal_oben.png);
width:734px;
height:32px;
margin-left: auto;
margin-right: auto;
}
div.content-right {
float:left;
background-image:url(horizontal_rechts.png);
width:32px;
height:614px;
margin-left:auto;
margin-right:auto;
}
div.content-left {
float:left;
background-image:url(horizontal_links.png);
width:32px;
height:614px;
margin-left:auto;
margin-right:auto;
}
div.content {
float:left;
background-image:url(content.png);
width:734px;
height:614px;
margin-left:auto;
margin-right:auto;
}
div.c-top-ul {
float:left;
background-image:url(unten_links.png);
width:32px;
height:32px;
margin-left:auto;
margin-right:auto;
}
div.c-top-ur {
float:left;
background-image:url(unten_rechts.png);
width:32px;
height:32px;
margin-left:auto;
margin-right:auto;
}
div.content-bot {
float:left;
background-image:url(vertikal_unten.png);
width:734px;
height:32px;
margin-left:auto;
margin-right:auto;
}
.box {
float:left;
}
Ich hab richtig reingeschissen, wie komme ich darauuuuuuuusss :(
Es ist weder mittig angeordnet, wenn ich es bei float:left; lasse dann den jeweiligen margin-left angebe springt es aus der Reihe. Ich kann es einfach nicht ich habs immer mal versucht aber geht nichttt...