Header Problem wie ändere ich folgendesab

[mf24]

Hallo,

ich benütze phpb3 und habe folgende Problemstellung die ich leider bisher nicht lösen könnte!

[ externes Bild ][ externes Bild ]

Mein Header sieht derzeit so aus wie das Beispiel Bild(oberer Teil).
Ich möchte es so haben wie der untere Teil:

- Header Hinter die 4 Bottons(.gif)und ganz bis zum Rand nach unten
- Buttons sollen ganz am Rand anliegen

Ich denke ich muss dies in der overall_header.html oder css-codes lösen??

Kann mir jemand helfen, dieses Problem endlich zu beheben?

Danke Euch allen vorab

Edit ich denke das dass hier der abschnitt ist auf den es ankommt imoverall_header

Code: Alles auswählen

<div id="wrapheader">

	<div id="logodesc">
		<table width="100%" cellspacing="0">
		<tr>
			<td width="100%" style="text-align:center;"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></a><br><a href="http://www.meineseite.com/forum/" target="_self"><img src="http://www.meineseite.com/forum/images/videos_home.jpg" border="0">
</a><a href="http://www.meineseite.com" target="_blank"><img src="http://www.meineseite.com/forum/images/header_portal.jpg" border="0">
</a><a href="http://www.meineseite.com/videos/" target="_blank"><img src="http://www.meineseite.com/forum/images/forum_videos.jpg" border="0">
</a><a href="http://www.meineseite.com/videos/" target="_blank"><img src="http://www.meineseite.com/forum/images/shop.jpg" border="0">
</a></td>
                     
		</tr>
		</table>
	</div>
</div>

Template: subsilver2

[mf24]

Also habe mal versucht den obigen Code abzuändern aber ich gehe davon aus ich muss das in der css abändern hat keiner solch ein Problem?

[ushi]

hallo erstmal

zum einen ist dein quellcode ein riesen haufen mist. desweiteren wären etwas mehr infos nicht schlecht gewesen. ein link zum forum hätte tausendmal mehr gebracht, als diese bilder.

und wenn ich dich richtig verstehe, möchtest du die vier links über einen großen link (banner) legen. das halte ich für grob fahrlässig.

hier trotzdem ein vorschlag zur realisierung:

html:

Code: Alles auswählen

  <div id="header">
    <a id="banner" href="#"><img src="banner.png" alt="banner" /></a>

    <p id="nav"><a href="#">bild1</a><a href="#">bild2</a><a href="#">bild3</a><a href="#">bild4</a></p>
  </div>

beachte! wenn du schon bilder als links nimmst, musst du unbedingt das alt-attribut einfügen. was, wenn jemand die bilder nicht darstellen kann? dann hat er keine links.

css:

Code: Alles auswählen

    #header {
      width: 578px;                 /* an banner-breite anpassen */
      height: 125px;                /* an banner-höhe anpassen */
      margin: 10px auto 5px auto;
      position: relative;
    }

    * html #banner {                /* Fehler im Internet Explorer ausbügeln */
      position: absolute;
    }

    #banner img {
      border: 0;
    }

    #nav {
      width: 576px;                 /* auch anpassen */
      position: absolute;
      bottom: 0;
      text-align: center;
      padding: 0;
      margin: 0;
    }

    #nav a {
      margin: 0 10px;
    }

ich würde die navi eigentlich in eine liste packen, wollte mich aber halbwegs an deinen code halten.

grüße, ushi

[mf24]

Hallo,

danke so klappt es!

Jedoch noch ein Schönheitsfehler es liegt nicht ganz am Rand unten an:
Und im IUE sowie Firefox sind Abstände unterschiedlich.

Ziel ist es dan Banner direkt anlegen zu lassen ohne Abstand


[ externes Bild ][ externes Bild ]

[ushi]

ok, du vergessen den <p>-Tag zu öffnen. desweiteren musst du unbedingt die alt-attribue hinzufügen, wenn du bilder als links verwenden möchtest. versuche es so:

Code: Alles auswählen

<div id="header"> 
  <a id="banner" href="#"><img src="meinedomain.de/forum/styles/subsilver2/imageset/header.png" alt="banner" /></a> 

  <p id="nav"><a href="meinedomain.de/forum/" target="_self"><img src="meinedomain.de/forum/images/videos_home.jpg" alt="Home" /></a>
    <a href="meinedomain.de" target="_blank"><img src="meinedomain.de/forum/images/header_portal.jpg" alt="Portal" /></a>
    <a href="meinedomain.de/videos/" target="_blank"><img src="meinedomain.de/forum/images/forum_videos.jpg" alt="Videos" /></a>
    <a href="meinedomain.de/videos/" target="_blank"><img src="http://meinedomain.de/forum/images/shop.jpg" alt="Shop" /></a></p>
</div> 

desweiteren fügst du bei der css ein:

Code: Alles auswählen

#banner img, #nav a img {
  border: 0;
}

edit: ah ok, hattest du nicht eben noch enorme probleme geäußert?

zum abstandsproblem:

versuche ein wenig zu probieren. z.b.:

Code: Alles auswählen

#header {
  padding: 0;
}

einfügen. aber wie ganz am anfang schon erwähnt, ist es sehr schwer nur anhand dieser bilder zu helfen. blanke raterei!

grüße, ushi

[mf24]

Müsste es nicht so heissen?

Code: Alles auswählen

    #header { 
      width: 578px;                 /* an banner-breite anpassen */ 
      height: 125px;                /* an banner-höhe anpassen */ 
      margin: 10px auto 5px auto; 
      position: relative; 
     padding: 0; 

    } 

oder den rest raushauen?

[ushi]

ja so wie es ist, aber wie gesagt, ohne das drum herum ist es schwierig.