Header mit Wiederholungen

von **deeda** » 30.07.2010, 15:33

Freunde, helft mir, ich bin blutige Anfängerin. Ich möchte nur einen Header, das Logo soll zentriert sein und rechts und links davon soll eine Hintergrundgrafik auf der x-Achse wiederholt werden. Darunter folgt dann ein iframe. Wat mach ich falsch, alles ne?

Code: Alles auswählen: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Julias Problem</title> <style type="text/css"> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .repeat {margin-top: 0px; margin-left: 0px; background-image: repeat.jpg; background-repeat: repeat-x;} .logo { margin: auto; padding: 0px; width:1160px; height:178px;} </style> </head> <body> <div class="repeat"> <img src="repeat.jpg" alt="repeat" width="9" height="178" /> </div> <div class="logo"> <img src="header.jpg" alt="Logo" width="1160" height="178"/> </div> <div id="iframe"> <iframe src="http://xxx.xxx.de" name="content" id="content" width="100%" height="1500" scrolling= "no" frameborder="0" align="center" allowtransparency="true"> </iframe> </div> </body> </html>

von **limenet** » 07.08.2010, 19:40

Hi deeda,

Da du einen Header willst mit einer Hintergrundgrafik und einem Logo (zentriert), bietet es sich an, einen div #header zu erstellen, der mit der Hintergrundgrafik hinterlegt wird und das Logo als weiteren div #logo enthält...
Doch zuerst einige wichtige Punkte:

Verwende wo möglich id's - nur sie sind eindeutig (und nicht Klassen).
Und für ein background-image musst du den Pfad mit url([PFAD]) umgeben.
Und für den background kannst du auch die shorthand verwenden: background: url(repeat.png) repeat-x;.
Und zu guter letzt die margin und padding reset's... 1. verwende doch einfach "margin:0;" (ist ebenfalls ein shorthand - Syntax: margin: [top] [right] [bottom] [left]; bzw: margin [top&bottom] [left&right])
und anstatt dies immer zu schreiben, kannst du einen CSS reset verwenden... einfachste Form: *{margin:0; padding:0;} (* = Universalselektor) oder den Eric Meyer Reset (ist in meinem Code drin)

Doch nun der Code

Code: Alles auswählen: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Julias Problem</title> <style type="text/css"> /* * reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */:focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* * styling */ #header { background: url(repeat.png) repeat-x; } #logo { margin: auto; /* wenn width gesetzt ist, bewirkt margin:auto; eine Zentrierung */ width: 200px; background: url(logo.png) no-repeat; height: 200px; text-indent: -9999px; /* für Suchmaschinen trotzdem noch lesbar */ } </style> </head> <body> <div id="header"> <div id="logo"> <h1>Logo Beschreib</h1> </div> </div> <div id="iframe"> <iframe src="http://nic.ch" name="content" id="content" width="100%" height="1500" scrolling= "no" frameborder="0" align="center" allowtransparency="true"> </iframe> </div> </body> </html>

Beachte die Kommentare!

Bei Fragen kannst du sie gerne stellen!,
Gruss,
Linus

Header mit Wiederholungen

Header mit Wiederholungen

Re: Header mit Wiederholungen

Ähnliche Beiträge zu "Header mit Wiederholungen"

Wer ist online?