Text über ein Bild
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anklicken
beispiel
bild
button
code
container
dank
element
hintergrund
hintergrundbild
image
layout
machen
position
problem
produkt
rahmen
span
text
url
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Natürlich geht das auch. Aber am besten erläuterst du genauer was du willst. Als Beispiel ist der Banner von Lima-City, oben in grün auch ein Bild. Im Bild ist sogar noch ein Bild, das lima-city Logo und auch noch die Navigation usw.
Für einen Header machst du das am besten mit css background. Dabei kannst du auch ein Bild setzen. Das Hintergrundbild von Lima-City findest du hier. Es ist nur 1px Breit, aber geht über die ganze Länge. Es wurde bei einem div als Hintergrund gesetzt:
background: url(/images/layout/top/nav/nav_bg.png) repeat-x bottom;
mit repeat-x wiederholt es sich nur auf der Breite.
Wenn du das wie gesagt aber einfach übereinander willst, nicht als Hintergrund, kannst du das mit Positionen lösen. Als Beispiel:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <style> div.container{ position: relative; top: 200px; left: 500px; } div.container > img{ position: absolute; } div.container > span{ position: absolute; } </style> </head> <body> <div class="container"> <img src="https://www.lima-city.de/images/community_logo.png"> <span>Text Text Text Text Text Text</span> </div> </body> </html>
Der Container bestimmt die Tatsächliche position. Ich habe top und left gesetzt, einfach damit dus besser siehst. Im container setze ich dann das Bild und der Text auf absolut, aber der container sollte einfach da positioniert sein, wo ansonsten dein Bild wäre.
EDIT: Wenn es um die Buttons auf deiner Webseite geht, machst du das am besten mit background.
Beitrag zuletzt geändert: 8.10.2014 21:47:21 von c143 -
Ok also danke erstmal aber ich habe es leider nicht ganz verstanden!
Ich schreibe es jetzt direkt mit auf das Bild das geht irgendwie besser! -
Ist aber keine gute Lösung. Du machst das doch um was zu lernen, oder nicht? Habs auch nur wage erklärt, klemm dich doch ein wenig dahinter:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script> <style> div.button{ position: relative; width: 100px; /* Höhe und Breite deines Bildes. height: 25px; background: url('http://brainstation-produkts.lima-city.de/images/buttonLeer.png') no-repeat; /* URL deines Bildes */ text-align: center; /* Text mittig*/ } </style> </head> <body> <div class="button">Home</div> </body> </html>
Das Bild ist im Hintergrund und du kannst normal in das Element schreiben. Natürlich kannst du das auch noch anpassen, dass es wirklich schön in der Mitte ist, so wie dein bearbeitetes Bild.
Normalerweise macht man das auch nicht so mit einer fixen Breite und Höhe. Sondern so wie bei Lima-City mit Wiederholung. Du kannst das aber auch mit reinem CSS gestalten, da gibts viele Möglichkeiten.
Einfacher ist deine Methode, ja, aber ehrlich gesagt völliger quatsch. Zu Beginn war ich übrigens gleich. Ist auch gut wenn du ein wenig rumprobierst und einfach mal was machst, muss ja nicht perfekt sein. Aber wenn du etwas erfährst so wie jetzt solltest du es wenigstens versuchen. So lernst du was dazu. :-)
Also wenn du was lernen willst vergiss mein Beispiel und google einfach mal:
- CSS background image
- CSS gradient
- CSS border
Und wenn es was neues gibt, auch einfach googeln oder hier fragen.
Beitrag zuletzt geändert: 8.10.2014 22:43:00 von c143 -
Dieses mal hat es mir schon gereicht auch nur den Code anzugucken das ich es verstanden habe ;)
Danke für deine Hilfe! :D
EDIT:
Kleines Problem: Ich habe es Sofort mal getestet und der link wird auch gezeigt und man kann ihn anklicken... das Bild aber nicht!
Beitrag zuletzt geändert: 9.10.2014 1:48:49 von brainstation-produkts -
hallo brainstation-produkts,
also am besten benutzt du gerade für buttons gar keine bilder.
schließlich benötigt jedes bild, egal ob als img oder als background jeweils eine weitere verbindungsherstellung was die lade- und aufbauzeiten deiner seite beträchtlich verschlimmert - vor allem wenn man auch noch mehrere bildressourcen zu einem bildchen überlagert ! (stell dir vor du machst pro button 1 hintergrundbild und 1 vordergrundbild mit text und hast 6 buttons auf der seite - das macht schwups 12 unnötig herzustellende verbindungen und auch unnötige datenlast - suchmaschinen werdens dir übel nehmen)
zwar kann man mit image-sprites dagegen arbeiten aber ich rate dir dringend an der grundsatz zu verfolgen das alles was ohne extra-bildfiles geht auch ohne diese gemacht werden sollte.
konstruiere deine grafik doch lieber mittels css direkt am element, denn rahmen, farbverläufe, schatten, rundungen, drehungen etc kannst du auch so hinbekommen.
und was "text über einem button" angeht - warum benutzt du dafür nicht das button-element ? das ist der text doch schon vorgesehen....
kleines beispiel:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Button</title> <style type="text/css"> #knopf { margin:30px 0px 0px 20px; border:1px solid #036; padding:10px; border-radius:8px; transform:rotate(10deg); background:linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); box-shadow:2px 2px 6px 2px #ccc, inset 0 0 8px rgba(0,0,0,0.75); color:#FFFFCC; font-family:"Comic Sans MS", cursive; font-size:14px; font-weight:bold; cursor:pointer; } #knopf:hover { background:linear-gradient(to bottom, rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%); box-shadow:3px 3px 7px 3px #bbb, inset 0 0 6px rgba(0,0,0,0.5); color:#FFFFFF; } </style> </head> <body> <button type="button" id="knopf" onClick="alert('du hast mich gedrückt')">ich bin ein button<br>ganz ohne bild</button> </body> </html>
lg hechma -
Ok also erstmal:
@c143
Statt div habe ich jetzt Span genommen weil die Buttons ja neben und nicht untereinander sein sollen und eigentlich geht es auch mit nur 1 Problem:
Es wird nur so viel vom Button gezeigt wie die länge vom Text ist!
@hechma
Das ist auch gut und ich werde es fürs erste auch so machen!
Nur... sieht langweilig aus... Und ich weiß nicht wie ich es ohne image verschönern kann...
Aber danke an beide! -
hallo
wenn du mal sehen willst was mit reinem css alles an bildern möglich ist, hier eine beispielseite: http://www.detailverliebt.de/wie-man-mit-css-code-ein-komplexes-bild-malt/
lg hechma -
brainstation-produkts schrieb:
Er hat doch ein perfektes Beispiel. Der Button ist sogar noch besser als deiner und das ohne Bilddatei. Überhaupt nicht langweilig. Ausser du öffnest das ganze im Internet Explorer einer älteren Generation, der kommt damit nämlich nicht klar.
@hechma
Nur... sieht langweilig aus... Und ich weiß nicht wie ich es ohne image verschönern kann...
Und das ist auch das Problem.
brainstation-produkts schrieb:
Soll man das Bild anklicken können? Das ist ein Hintergrundbild, damit kannst du nicht interagieren. Wenn du damit meinst, dass du den Link über den ganzen Button hin weg machen willst, musst du den <a> Tag vor das Button Element machen, nicht darin.
Kleines Problem: Ich habe es Sofort mal getestet und der link wird auch gezeigt und man kann ihn anklicken... das Bild aber nicht!
brainstation-produkts schrieb:
Es wird nur so viel vom Button gezeigt wie die länge vom Text ist!
Das liegt am span. Entweder änderst du die divs, damit sie nebeneinander sind, oder du setzt den span Tag als block Element.
Alles in Allem hat hechma Recht, das ist keine gute Lösung. Aber ich denke hier geht es nicht um eine professionelle Seite für was weiss ich nicht wen. Es ist gut, wenn du ausprobierst und da muss auch nicht alles perfekt sein, es geht ja um den Lerneffekt und das geht so ganz gut.
Aber versuch doch mal nur den Gradient mit 1px Breite zu speichern und den Rahmen eigenständig zu machen. Das ist um einiges effizienter. -
Ich dachte Span und Div hätten nur diesen 1 unterschied das nach Div immer in der nächsten zeile geschrieben wird und nach Span nicht...
War das
position: relative;
dafür das es nicht in die nächste zeile kommt? -
Nein, das kannst du zum Beispiel mit float: left; machen:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Button</title> <style type="text/css"> div{ position: relative; float: left; background: #ccc; text-align: center; margin: 0px 10px; } </style> </head> <body> <div>Div 1</div><div>Div 2</div><div>Div 3</div><div>Div 4</div> </body> </html>
Aber muss auch kein div Element sein, kann auch ein Listenelement oder direkt das a element sein.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Button</title> <style type="text/css"> a{ position: relative; background: #ccc; text-align: center; margin: 0px 10px; padding: 5px; 20px; text-decoration: none; color: #000; } </style> </head> <body> <a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a> </body> </html>
Beitrag zuletzt geändert: 9.10.2014 11:41:07 von c143 -
Oh ok danke! :)
Das habe ich schonmal gesehen aber ich wusste einfach nicht wofür es ist! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
