Webseite (Header) mit CSS

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
~~w*******s~~
21:42, 14.7.2010
Hallo,

habe eine Webseite und dort benötige ich noch einen Header. Der Header sollte folgendermaßen aussehen: http://picfront.de/d/7IKT

Vielleicht wäre dieser CSS Code sehr hilfreich:



Die mitte würde ich so machen:
```
left: 50%;
margin-left: -(HALBE_BREITE)px;
```
Aber wie kann ich das mit dem Design (Header) machen bzw. am besten & am einfachsten & professionell?

Gruß

Beitrag zuletzt geändert: 14.7.2010 21:43:38 von wakestars
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
thedarkside

thedarkside hat kostenlosen Webspace.

0:13, 15.7.2010

Gestalten kannst du Grafiken für Webseiten grundsätzlich mit Bildmanipulationsprogrammen wie Gimp oder dem kommerziellen "Bruder" Photoshop. Es handelt sich bei beiden Programmen jedoch um Software die auch im professionellen Bereich angewand wird und zum erzielen professioneller Ergebnisse entsprechende Einarbeitungszeit erfordert (das sind nicht unbedingt Jahre, aber ein wenig Geduld und vor allem Ruhe solltest du schon haben, wenn du schnell etwas erreichen willst). Für beide Programme findest du im Netz jedoch eine Menge Tutorials, aus denen du dir die Benötigten Techniken zur Realisierung deines Menüs zusammensuchen kannst.

In deinem Fall reichen vielleicht auch schon ein paar freie Icons und abgerundete Ecken für die Suchbox, einfach mal ein bisschen Googeln

23:26, 16.7.2010

Ich bin mir nicht sicher, ob Du Tips zur Erstellung der Grafiken gesucht hast, schließlich hast Du ja bereits eine vorgestellt. Hier wäre ein möglicher Aufbau mit CSS, der nach Deinen Vorstellungen optimiert werden könnte:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
/* new clearfix */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

#header { width: 500px; background-color: #000; padding: 2px; }
#navi_icons { width: 500px; text-align: right; }
#search { float: left; width: 180px; }
#keywords { width: 100px; }
#navi_text { float: right; width: 300px; text-align: right; }
</style>
</head>
<body>
<div id="header" class="clearfix">
<div id="navi_icons">
<a href="#">1</a> <a href="#">2</a> <a href="#">3</a>
</div>
<div id="search">
<form>
<input type="text" id="keywords" /> <input type="submit" value="Los" />
</form>
</div>
<div id="navi_text">
<a href="#">Link A</a> <a href="#">Link B</a> <a href="#">Link C</a>
</div>
</div>
</body>
</html>

Per Hintergrundbild kannst Du den einzelnen DIVs dann (Teil-) Grafiken zuweisen, um das gewünschte Layout zu realisieren.

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city