Bilder mit php der größe anpassen

Unregistriert

Hallo ich meine vor kurzem gehört, also gelesen, zu haben das man mit php bilder dem hintergrundgröße anpassen kann. Wenn und wie ist das möglich. Oder war das mit Css?

Unregistriert

http://ohne-css.gehts-gar.net/0055.php

Unregistriert

Jetz brauch ich doch nochmal eure hilfe da ich schon mehrere positionsangaben seperat im header drin habe.

HTML

</head>
<body>
	<div id="head">
		<img id="hintergrund" src="img/head.gif" alt="" />
		<ul id="werbelink">
			<li><a href="">Werbelink</a></li>
		</ul>

		<ul id="headnavi">
			<li><a href="">Info's<img src="img/hak.png" alt="" /></a></li>
			<li><a href="">Kontakt<img src="img/hak.png" alt="" /></a></li>
		</ul>
	</div>


	<ul id="navi">
		<li id="active"><a href="index.php" id="current">Startseite</a></li>
		<li><a href="">Test</a></li>



	<div id="leftboard">

	</div>

	<div id="content">

	</div>

	<div id="rightboard"></div>

	<ul id="footer">
		<li><a>LINK</a></li>
		<li><a>LINK</a></li>
	</ul>


</body>

Alles anzeigen

HTML

* {margin: 0; padding: 0;}
img {border: none;}


a {color: #fff; text-decoration: none;}


a:hover {
color: #fff; 
text-decoration: underline;
}


body {
width: 100%;
margin: 0 auto;
background: #ff8844;
font-family: cambria;
color: #000;
}


#head {
height: 150px;
/* 
Wenn die unteren drei angaben weg sind 
und das bild mit background über css 
eingebaut ist . so ist es normal */


width: 100%;
position: relative;
z-index: 1;
}


#leftboard {
width: 150px;
float: left;
margin: 20px 0 0 0;
}


#content {
width: 550px;
float: left;
margin: 20px 0 0 0;
}


#rightboard {
width: 180px;
float: left;
padding: 25px 0 0 20px;
}


ul#footer {
width: 100%;
height: 30px;
clear: both;
text-align: right;
color: #02a3ff;
}
ul#footer li {
display: inline;
}
ul#footer li a {
color: #000;
text-decoration: none;
padding-right: 8px; 
}
ul#footer li a:hover {
color: #eee;
text-decoration: underline;
}




h1 {
font-size: 20px;
text-align: center;
color: #fff;
}


h2 {
font-size: 18px;
text-align: right;
color: #000;
padding: 8px 0 0 0;
font-family: calibri;
}




/* Headerwerbung Links */
ul#werbelink {
width: 280px;
height: 20px;
margin: 0 0 0 275px;
z-index: 1;
position: absolute;
font-size: 17px;
}


ul#werbelink li {
display: inline;
}


ul#werbelink li a {
color: #000;
}


ul#werbelink li a:hover {
color: #ff8844;
}


/* Headernavigation Rechts */
ul#headnavi {
width: 375px;
height: 20px;
margin: 17px 0 0 650px;
z-index: 2;
position: absolute;
color: #fff;
font-size: 12px;
}


ul#headnavi li {
display: inline;
margin-left: -4px;
}


ul#headnavi li a {
padding: 5px 10px;
color: #eee;
text-decoration: none;
}


ul#headnavi a:hover {
text-decoration: underline;
color: #ff8844;
}




/* Horizontale Hauptnavi */
ul#navi {
font-family: cambria;
font-weight: bold;
color: #fff;
text-align: center;
padding: 5px 0;
background: #0033ee;
border-top: solid 1px #ff8844;
font-size: 17px;
}


ul#navi li {
display: inline;
margin-left: -4px;
}


ul#navi li a {
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}


ul#navi li a:hover {
background-color: #ff8844;
color: #000088;
}

Alles anzeigen

Ich dachte ich hätte die Angaben von ohne gehts gar net übernommen

ludgerf321

Du machst 3 Beiträge hintereinander, statt zu editieren.
Ich habe immer noch nicht verstanden, was jetzt deine Frage ist...
Mach's doch einfach so, wie du es bereits gepostet hast (also auf ohne-css.gehts-gar.net)
Ansonsten bitte besser beschreiben!

LG Ludger

Unregistriert

zu 1. Ich bin unregistriert, editieren ist mir net möglich
zu 2. Mein Header soll sich mit dem Body div der breite von 100% anpassen also das Bild und Höhe 150px ist oki

synaptic

habs ma verschoben, denn hat ja nix mi php am hut hier...

Unregistriert

Danke fürs verschieben, gehört ja nu auch hier hinein!

Ich habe die Anleitung auch schon hinbekommen aber nur wie auf der Seite beschrieben, ich möchte aber das sich mein Header obigem eigenem Stylesheet anpasst.

Unregistriert

bitte zusammenführen:

HTML

<body>
<img id="head" src="img/head.gif" alt="" />
</body>
</html>

HTML

* {margin: 0; padding: 0;}


html, body {
width: 100%;
height: 100%;
}
#head {
width: 100%;
height: 150px;
}

Alles anzeigen

COOL

Unregistriert

Hallo @ALL

Ich habe bisher so gemacht:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link href="css.css" type="text/css" rel="stylesheet" />
    <link href="img/fav.ico" type="image/x-icon" rel="shortcut icon" />
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
	<div class="logo">
		<img class="logo" src="img/logo.gif" alt="" />
		<ul id="werbelink">
			<li><a href="">Werbelink</a></li>
		</ul>

		<ul id="headnavi">
			<li><a href="">Info's<img src="img/hak.png" alt="" /></a></li>
			<li><a href="">Kontakt<img src="img/hak.png" alt="" /></a></li>
			<li><a href="">Sonstiges</a></li>
		</ul>
	</div>
</body>
</html>

Alles anzeigen

HTML

* {margin: 0; padding: 0; border: none;}
a {color: #fff; text-decoration: none;}
a:hover {color: #fff; text-decoration: underline;}


html, body {
width: 100%;
height: 101%;
}
.logo {
width: 100%;
height: 150px;
}
ul.logo {
width: 280px;
height: 20px;
margin: 0 0 0 275px;
z-index: 1;
position: absolute;
font-size: 17px;
}


ul.logo li {
display: inline;
}


ul.logo li a {
color: #000;
}


ul.logo li a:hover {
color: #ff8844;
}


ul.logo {
width: 375px;
height: 20px;
margin: 17px 0 0 650px;
z-index: 2;
position: absolute;
color: #fff;
font-size: 12px;
}


ul.logo li {
display: inline;
margin-left: -4px;
}


ul.logo li a {
padding: 5px 10px;
color: #eee;
text-decoration: none;
}


ul.logo a:hover {
text-decoration: underline;
color: #ff8844;
}

Alles anzeigen

Wieso erscheinen die Listen jetzt nicht auf dem Bild. Gut es ist nicht mehr via Css eingebunden, aber kann ich das noch hinbekommen?

Ist wahrscheinlich meine Tagesaufgabe heute

BITTE UM HUILFE

Hallo ich habe soviele Möglichkeiten durchprobiert, bild via css . via img tag es geht nicht. Please. einen beitrag Oben mein bester erstellter code jetzt...

Unregistriert

Hallo geht das etwa nedde, also ich hab alles ausprobiert seit heute mittag und es stehen die Links die in dem Bild stehen sollen dann darunter

Unregistriert

:):):) Mein Beitrag wieder hochgeholt damit er besser gelesen werden kann, wenn es denn überhaupt einer liest. PLEASE

BÜÜÜÜÜÜÜÜÜÜÜÜÜDDDE

Ich mach die ganze Zeit rum, drei Varianten alle macht nicht das was ich will. selbst einzeln nacheinander scheiter ich bei der ersten verschalchtelung

Sweet_Angel

nicht nach 3 std pushen!! warte ab es wird dir schon jemand antworten.

ludgerf321

Zitat von Unregistriert

Mein Header soll sich mit dem Body div der breite von 100% anpassen also das Bild und Höhe 150px ist oki

Daraus erlese ich, dass du dein Header und Body Bild über die ganze Seite gestreckt haben willst, und 150px hoch.
Das wäre dann der Css Teil dazu:

PHP

.logo {
width: 100%;
height: 150px;
background-image: url(img/logo.gif);
background-repeat:no-repeat;
left: 0px;
}

Und das der Html Teil, der natürlich dann noch Header etc. enthalten muss:

PHP

<div class="logo"></div>

Dann muss das "logo.gif" im Ordner "img" auf deinem Webspace sein.

Falls das nicht war, was du wolltest, frag nochmal nach. Achja und mach mal jaaanz ruhig, Gott hatte auch 7 Tage ;D

LG Ludger

Hinzugefügt:
Jetzt lese ich, dass du auch noch was von Links darunter redest... (hatte die 2.Seite übersehn)
Dann versuch mal bei der class "logo" im Css noch "Z-index:0;" hinzuzufügen und erstell noch eine class und nen die meinetwegen "darueber" und geb der dann "Z-index:1".
Ansonsten wäre http://www.css4you.de echt ma ne große Hilfe für dich
Nochwas, registrier dich hier bitte, falls du noch mehr fragen hast, dann kannste auch editieren und ersparst dir Doppel(Dreifach)posts.
Und deine Threads müssen nicht an erster Stelle sein!

Unregistriert

Zitat von ludgerf321
Daraus erlese ich, dass du dein Header und Body Bild über die ganze Seite gestreckt haben willst, und 150px hoch.
Das wäre dann der Css Teil dazu:
PHP
.logo {
width: 100%;
height: 150px;
background-image: url(img/logo.gif);
background-repeat:no-repeat;
left: 0px;
}
Und das der Html Teil, der natürlich dann noch Header etc. enthalten muss:
PHP
<div class="logo"></div>
Dann muss das "logo.gif" im Ordner "img" auf deinem Webspace sein.

Falls das nicht war, was du wolltest, frag nochmal nach. Achja und mach mal jaaanz ruhig, Gott hatte auch 7 Tage ;D

LG Ludger

Hinzugefügt:
Jetzt lese ich, dass du auch noch was von Links darunter redest... (hatte die 2.Seite übersehn)
Dann versuch mal bei der class "logo" im Css noch "Z-index:0;" hinzuzufügen und erstell noch eine class und nen die meinetwegen "darueber" und geb der dann "Z-index:1".
Ansonsten wäre http://www.css4you.de echt ma ne große Hilfe für dich
Nochwas, registrier dich hier bitte, falls du noch mehr fragen hast, dann kannste auch editieren und ersparst dir Doppel(Dreifach)posts.
Und deine Threads müssen nicht an erster Stelle sein!
Alles anzeigen

Das was du in Css geschrieben hast, ich habe es nicht anders gemacht als du/Ihr. Sie dazu aber weiter oben. Schade das mir keiner helfen kann, ich versuche es weiter

Ansonsten ist das erklären ja schwerer als die Lösung wenn niemand genau liesst

ludgerf321

Zitat von Unregistriert

Das was du in Css geschrieben hast, ich habe es nicht anders gemacht als du/Ihr. Sie dazu aber weiter oben. Schade das mir keiner helfen kann, ich versuche es weiter

Ansonsten ist das erklären ja schwerer als die Lösung wenn niemand genau liesst

Schade, dass das nicht stimmt!
es kommt auf den

PHP

background-image: url(img/logo.gif);

drauf an, den du nirgends hingeschrieben hast!
Das weist der class/id ein Bild zu. So kann exakt Bilder positionieren.
Ich werde dir jetzt mal eine Probeseite hochladen, das wird ein paar Minuten dauern.

LG Ludger

Unregistriert

Hey ich kann mich gerne noch hier registrieren aber ich habe doch den Header schon nach (Anleitung von ohne-css.gehts-gar.net) hinbekommen. Also dass , das Headbild immer 100% Breite anpasst. Und wenn ich nu dann noch zwei Listen drüberlegen will mit z-index: 1; und 2 dann setzt sich das darunter.

P.S Auf der Anleitung mit der Grafik ist das Pic über dem img tag eingebunden, das ist ja genau mein Problem. Über Css funktioniert das mit der anpassbaren Grafik nicht

Quelle http://www.ohne-css.gehts-gar.net/0055.php

Zitat

Ein häufiges Problem vieler Webmaster: Wie kann eine Hintergrundgrafik unabhängig von der Fenstergröße immer bildschirmfüllend angezeigt werden.
Grundsätzliche Antwort: Überhaupt nicht, denn Hintergrundgrafiken lassen sich nicht skalieren.

Allerdings: Mit Hilfe von CSS lässt sich auch dieses Problem lösen: Wir müssen lediglich dafür sorgen, dass es sich bei der Grafik nicht um eine Hintergrundgrafik, sondern um ein skalierbares Image handelt. Hierzu verwenden wir folgenden Trick:

Wir definieren einen Div "#hintergrund", welchem wir 100% Höhe und 100% Breite zuweisen. Da sich diese Werte auf html und body beziehen, legen wir ebenso für html und body 100% Höhe und 100% Breite fest. Um Ränder zu vermeiden, setzen wir für html und body margin und padding auf "0".
Damit das "Hintergrundbild" auch bei längerem Inhalt bildschirmfüllend angezeigt wird, weisen wir "html und body" noch ein "overflow: hidden" zu.
Den "#hintergrund" positionieren wir relativ mit ebenfalls 100% Breite und 100% Höhe, um den folgenden Content darin entsprechend unterzubringen.
Der "#content" soll dagegen bei größerem Inhalt scrollbar sein. Deshalb erhält er ein "overflow: auto".
Schließlich sorgen wir noch mit entsprechenden z-Indizes dafür, dass sich #content vor #hintergrund befindet.
Daraus ergeben sich folgende CSS-Angaben:

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

#hintergrund {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}

#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
overflow: auto;
}
Im HTML-Quelltext wird nach dem Öffnen von <body> der img-Tag geöffnet, dem wir den zuvor definierten ID "#hintergrund" zuweisen.
Damit wird die verwendete Grafik auf jeweils 100% Höhe und 100% Breite skaliert.
Dem img-Tag wird als Source die verwendete Hintergrundgrafik zugewiesen; im Beispiel die Grafik "bg1.jpg".
Im Anschluss daran folgt unser #content, in den wir beliebigen Inhalt einfügen können. Daraus ergibt sich folgender HTML-Quelltext:

<body>
<img id="hintergrund" src="bg1.jpg" border="0" alt="Hintergrundbild">
<div id="content">
<h1>Inhalt</h1>
</div>
</body>

Alles anzeigen

Danke das du mir überhaupt hilfst.

ludgerf321

upps, ja merke gerade selber, dass die Grafik dann nur in 100% ihrer Pixel in der Breite angezeigt wird.
Ja dann befolg einach alles was auf http://www.ohne-css.gehts-gar.net/0055.php steht und schon kannste die Grafik strecken etc.. Ist das nicht genau das, dass du willst?

Was du machen könntest wäre, das Bild nach rechts hin zu wiederholen, aber das sieht bei Grafiken, die dafür nicht ausgelegt sind, meist nicht so pralle aus.

LG Ludger

p.s. hier zu meiner Verwunderung Klick Habe es so gemacht, wie ich gesacht hatte, aber dann verstand ich dein Problem und bei ohne-css.... steht ja die Erklärung
Siehst da ja im Quelltext (Firefox Strg+U) ganz klar, dass ich nur das verwendet habe, was ich oben geschrieben habe.

Unregistriert

Zitat von ludgerf321

upps, ja merke gerade selber, dass die Grafik dann nur in 100% ihrer Pixel in der Breite angezeigt wird.
Ja dann befolg einach alles was auf http://www.ohne-css.gehts-gar.net/0055.php steht und schon kannste die Grafik strecken etc.. Ist das nicht genau das, dass du willst?

LG Ludger

p.s. hier zu meiner Verwunderung Klick Habe es so gemacht, wie ich gesacht hatte, aber dann verstand ich dein Problem und bei ohne-css.... steht ja die Erklärung

Sorry nicht böse gemeint aber der streifen geht nicht über die ganze Seite. Sorry. Und in diesem Abschnitt sollen noch zwei Listen sein. Mom ich poste dir den Code nochmal wie ich es bisher gemacht habe. Ohne die Verbreiterung des Headerbildes über das ganze Bild auf 150px höhe

ludgerf321

Zitat von Unregistriert

Sorry nicht böse gemeint aber der streifen geht nicht über die ganze Seite.

Du schuldigst mich an, dass ich deine Posts nicht lese? Dann lies mal meinen...
Da im P.s. steht doch, das ich dann gemerkt habe, dass der nicht 100% ist, sondern nur 100% des Bildes!
Und zur tabelle, mach einfach eine in einem anderen div und geb dem ne class mit nem höheren z-index als das Bild... fertig

LG Ludger

-merke auch das ich mich oben verschirben habe statt "nur" sollte da "nicht hin"

Bilder mit php der größe anpassen

Tags

Benutzer online in diesem Thema