Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag18.08.2011 um 00:42 (UTC)    
Titel: Headerbild für Designs OHNE Header

Hallo,

in Anlehnung an diesen Thread:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=53911
habe ich mir für die anderen Designs, welche keine Headerfunktion haben, mal was ausgedacht. Ich habe versucht, wo immer es ging CSS einzusetzen.


Design-Men:

Hier gibt es zwei Header. Header 1 (148 x 179) das kleine Bild, mit den zwei Männern und Header 2 (597 x 179) das große daneben. Bsp.: http://www.o-4-n-men.de.tl

Einfügen, bei Text über dem Design:
Zitat:
<style type="text/css">
/*Bild1(148 x 179)*/
img[src="http://theme.webme.com/designs/men/img/h1.jpg"]
{
display:none;
}

tr[height="179"]:first-child{
background-image:url(URL zu Header 1);
}

/*Bild2(597 x 179)*/
td[width="597"][height="179"][style]
{
background-image:url(URL zu Header 2)!important;
}
</style>

URL zu den jeweiligen Bildern



Design-Yellow:

Breite des Header 760px, Höhe variabel (siehe unten). Bsp.: http://www.o-4-n-yellow.de.tl

Einfügen, bei Text unter dem Design:
Zitat:
<script type="text/javascript">
//760 x X
//URL des Headers
var headerSrc = 'URL zum Header';

//Höhe des Headers
var headerHeight= 200;

//Rechte Boxen?
var boxes = X;


//Ab hier nichts mehr ändern
var done = false;
var i;
var allTables=document.getElementsByTagName('table');
var newTR=document.createElement('tr');
var newTD=document.createElement('td');
newTR.style.height = headerHeight + 'px';
newTR.style.backgroundImage= 'url(' + headerSrc + ')';

boxes ? newTD.colSpan = '3' : newTD.colSpan = '2';

newTR.appendChild(newTD);

for(i = 0; (i < allTables.length) && (!done); i++)
{
if((allTables[i].width == '760') && (allTables[i].border == '0') && (allTables[i].align == 'center'))
{
allTables[i].insertBefore(newTR, allTables[i].firstChild);

done = true;
}
}
</script>

URL zum Header
Höhe des Headers in pixel ohne px. Hier ist also eine Höhe von 200 Pixel definiert.
Habt ihr rechte Boxen? Wenn ja dann X mit true ersetzen, sonst X mit false ersetzen



Design-Games:

Breite des Header 762px, Höhe 127px. Bsp.: http://www.o-4-n-games.de.tl

Einfügen, bei Text über dem Design:
Zitat:
<style type="text/css">
/*762 x 127*/
/*Header*/
td[background="http://theme.webme.com/designs/gaming/Bilder/header.gif"]
{
background-image:url(URL zum Header)!important;
}

/*Heli teil in der Navi*/
td[background="http://theme.webme.com/designs/gaming/Bilder/navi.gif"]
{
background:none!important;
}

/*Heli teil im content*/
td[background="http://theme.webme.com/designs/gaming/Bilder/google.gif"]
{
background:none!important;
}
</style>

URL zum Header



Design-Music:

Breite des Header 798px, Höhe variabel (siehe unten). Bsp.: http://www.o-4-n-music.de.tl

Einfügen, bei Text unter dem Design:
Zitat:
<script type="text/javascript">
//798 x X
//URL des Headers
var headerSrc = 'URL zum Header';

//Höhe des Headers
var headerHeight= 200;



//Ab hier nichts mehr ändern
var done = false;
var i;
var trs = 0;
var element = document.getElementById('tablebody');
var newTR = document.createElement('tr');
var newTD = document.createElement('td');

newTD.colSpan = '2';

newTR.style.height = headerHeight + 'px';
newTR.style.backgroundImage = 'url(' + headerSrc +')';

newTR.appendChild(newTD);

for(i = 0; (i < element.childNodes.length) && (!done); i++)
{
if(element.childNodes[i].nodeName == 'TBODY')
{
while(trs != 3)
{
if(element.childNodes[i].firstChild.nodeName == 'TR')
trs++;

element.childNodes[i].removeChild(element.childNodes[i].firstChild);
}

element.childNodes[i].insertBefore(newTR, element.childNodes[i].firstChild);

done = true;
}
}
</script>

URL zum Header
Höhe des Headers in pixel ohne px. Hier ist also eine Höhe von 200 Pixel definiert.



Design-Football:

Breite des Header 699px, Höhe 171px. Bsp.: http://www.o-4-n-football.de.tl

Einfügen, bei Text über dem Design:
Zitat:
<style type="text/css">
/*699 x 171*/
td[background="http://theme.webme.com/designs/fussball/Bilder/header.gif"]
{
background-image:url(URL zum Header)!important;
}
</style>

URL zum Header



Design-Holidays:

Breite des Header 878px, Höhe 317px. Bsp.: http://www.o-4-n-holidays.de.tl

Einfügen, bei Text über dem Design:
Zitat:
<style type="text/css">
/*878 x 317*/
td[style="background-image: url(http://theme.webme.com/designs/urlaub/Bilder/hawaii-theme3_02.jpg); width: 878px; height: 317px;"]
{
background-image: url(URL zum Header
)!important;
}
</style>

URL zum Header



Design-Skater:

Breite des Header 1000px, Höhe 254px. Bsp.: http://www.o-4-n-skater.de.tl

Einfügen, bei Text unter dem Design:
Zitat:
<style type="text/css">
body > table[width="1000"] > tbody > tr > td[height="254"][colspan="2"] img, td[background="http://theme.webme.com/designs/skater/Bilder/5.gif"]{display:none;}
body > table[width="1000"] > tbody > tr > td[height="254"][colspan="2"] {background-image:url(http://img.webme.com/pic/o/o-4-n-skater/skater.png);}
</style>

URL zum Header



Design-Animals:

Breite des Header 788px, Höhe 202px. Bsp.: http://www.o-4-n-animals.de.tl

Einfügen, bei Text über dem Design:
Zitat:
<style type="text/css">
/*788 x 202*/
td[background="http://theme.webme.com/designs/tiere/Bilder/header_hunde.gif"]
{
background-image:url(URL zum Header);
}
</style>

URL zum Header



Design-Beige:

Breite des Header 459px, Höhe 95px. Bsp.: http://www.o-4-n-beige.de.tl

Einfügen, bei Text unter dem Design:
Zitat:
<script type="text/javascript">
//459 x 95
//URL des Headers
var headerSrc = 'URL zum Header';



//Ab hier nichts mehr ändern
var i;
var done = false;
var allImgs = document.getElementsByTagName('img');

for(i = 0; (i < allImgs.length) && (!done); i++)
{
if(allImgs[i].src == 'http://theme.webme.com/designs/beige/images/header_illustration.gif')
{
allImgs[i].src = headerSrc;

done = true;
}
}
</script>

URL zum Header



Design-Green:

Breite des Header 739px, Höhe 79px. Bsp.: http://www.o-4-n-green.de.tl

Einfügen, bei Text unter dem Design:
Zitat:
<script type="text/javascript">
//739 x 79
//URL des Headers
var headerSrc = 'URL zum Header';


//Ab hier nichts mehr ändern
var i;
var done = false;
var allImgs = document.getElementsByTagName('img');

for(i = 0; (i < allImgs.length) && (!done); i++)
{
if(allImgs[i].src == 'http://theme.webme.com/designs/green/images/header.jpg')
{
allImgs[i].src = headerSrc;

done = true;
}
}
</script>

URL zum Header


Design-Cars:
Breite des Header 925px, Höhe variabel (siehe unten). Bsp.: http://www.o-4-n-cars.de.tl
Einfügen, bei Text unter dem Design:
Zitat:
<script type="text/javascript">
//925 x X
//URL des Headers
var headerSrc = 'URL zum Header';

//Höhe des Headers
var headerHeight= 200;

//Ab hier nichts mehr ändern
var i, j;
var temp;
var done = false;
elements = document.getElementsByTagName('tbody');
var newTR = document.createElement('tr');
var newTD = document.createElement('td');

newTD.colSpan = 2;

newTR.style.height = headerHeight + 'px';
newTR.style.backgroundImage = 'url(' + headerSrc + ')';

newTR.appendChild(newTD);

for(i = 0; (i < elements.length) && (!done); i++)
{
if((elements[i].parentNode.width == '925') && (elements[i].parentNode.cellSpacing == '0') && (elements[i].parentNode.cellPadding == '0') && (elements[i].parentNode.border == '0') && (elements[i].parentNode.align == 'center'))
{
temp = elements[i].childNodes;

elements[i].removeChild(elements[i].firstChild);

for(j = 0; j < temp.length; j++)
{
if(temp[j].nodeName != 'TR' )
elements[i].removeChild(temp[j]);
}

for(j = 0; (j < elements.length) && (!done); j++)
{
if(elements[i].firstChild.childNodes[j].nodeName == 'TD')
{
elements[i].firstChild.childNodes[j].style.width = '172px';

done = true;
}
}

elements[i].insertBefore(newTR, elements[i].firstChild);
}
}
</script>

URL zum Header
Höhe des Headers in pixel ohne px. Hier ist also eine Höhe von 200 Pixel definiert.



Design-Anime:

Breite des Header 734px, Höhe variabel (siehe unten). Bsp.: http://www.o-4-n-anime.de.tl

Einfügen, bei Text unter dem Design:
Zitat:
<script type="text/javascript">
//734 x X
//URL des Headers
var headerSrc = 'URL zum Header';

//Höhe des Headers
var headerHeight= 200;

//Rechte Boxen?
var boxes = X;

//Ab hier nichts mehr ändern
var i, j;
var temp;
var done = false;
var trs = 0;
elements = document.getElementsByTagName('img');
var newTR = document.createElement('tr');
var newTD = document.createElement('td');

boxes ? newTD.colSpan = '3' : newTD.colSpan = '2';

newTR.style.height = headerHeight + 'px';
newTR.style.backgroundImage = 'url(' + headerSrc + ')';

newTR.appendChild(newTD);

for(i = 0; (i < elements.length) && (!done); i++)
{
if(elements[i].src == 'http://theme.webme.com/designs/anime/Bilder/h1.gif')
{
temp = elements[i].parentNode.parentNode.parentNode;

elements = temp.childNodes;

for(j = 0; (j < elements.length) && (!done); j++)
{
if(elements[j].nodeName = 'TR')
{
trs++;

temp.removeChild(elements[j]);

if(trs == 2)
{
temp.insertBefore(newTR, temp.firstChild);

done = true;
}
}
}
}
}
</script>

URL zum Header
Höhe des Headers in pixel ohne px. Hier ist also eine Höhe von 200 Pixel definiert.
Habt ihr rechte Boxen? Wenn ja dann X mit true ersetzen, sonst X mit false ersetzen



Design-Kaki:

Breite des Header 782px, Höhe variabel (siehe unten). Bsp.: http://www.o-4-n-kaki.de.tl

Einfügen, bei Text unter dem Design:
Zitat:
<script type="text/javascript">
//782 x X
//URL des Headers
var headerSrc = 'URL zum Header';

//Höhe des Headers
var headerHeight= 200;

//Ab hier nichts mehr ändern
var i, j;
var temp;
var done = false;
elements = document.getElementsByTagName('img');

for(i = 0; (i < elements.length) && (!done); i++)
{
if(elements[i].src == 'http://theme.webme.com/designs/kaki/images/header/header_cut.jpg')
{
temp = elements[i].parentNode.parentNode.parentNode.parentNode.parentNode;

while(temp.childNodes.length > 0)
{
temp.removeChild(temp.firstChild);
}

temp.style.height = headerHeight + 'px';
temp.style.backgroundImage = 'url(' + headerSrc + ')';
}
}
</script>

URL zum Header
Höhe des Headers in pixel ohne px. Hier ist also eine Höhe von 200 Pixel definiert.



Sämtliche Header auf meinen Beispielseiten dienen nur der Verdeutlichung. Ich hatte keine Lust, mir 13 richtige Header zumachen.


Zuletzt bearbeitet von o-4-n am 23.02.2015, 18:17, insgesamt 5-mal bearbeitet
Beitrag03.09.2011 um 18:16 (UTC)    
Titel: Danke

Hallöchen,

dank deiner lieben mithilfe hat es nun geklappt und meine HP ist so wie ich sie mir vorgestellt habe.

Mein Design ist Animals.

Vielen Dank nochmal

lg
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de