• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Problem

  • Ersteller Ersteller pallino
  • Erstellt am Erstellt am
P

pallino

Guest
Guten Abend,
ich habe ein paar Fragen bezüglich CSS. Ich möchte gerne eine Seite mit CSS Angaben erstellen.

-----
1. Wie kann ich einen Rahmen erstellen, der sich nur in der Mitte der Seite befinden, und der Text ebenfalls (der Text soll sich innerhalb des Rahmens befinden).
Beispiel: http://www.gaijin.at/images/scr_phpgbook1.png (So sollte es in etwa aussehen, natürlich mit anderen Farben, und dass sich der Rahmen mit dem Text darin, in der Mitte der Seite befindet.)

2. Wie kann ich einen "Farbverlauf-Button" erstellen (ich hoffe ihr wisst, was ich meine :D)?
Beispiel: Der "Suchen" Button auf dieser Seite: DB Bahn: bahn.de - Ihr Mobilittsportal fr Reisen, Bahn, Urlaub, Hotels, Stdtereisen und Mietwagen
-----


Vielen Dank für eure Hilfe!​
 
1) Was ein div ist weißt Du?
HTML:
HTML: 
<div id="box">Hier den Text rein</div>
css:
PHP: 
#box {
    width: 500px;
    height: 250px;
    margin: 0px auto;  /* Horizontal mittig stellen */
    border: 1px solid black; /* der Box nen Border geben */
}
2)
Wenn du Input Element mit dem Typ submit als Suchbutton verwendest, kannst du mit
input {

}
auf dieses Element zugreifen. Über background: url('farbverlauf.png'); weist du dem Button eine Hintergrundgrafik zu. Oder du gibst dem Button ne Id oder class...
 
Okay, also das mit dem Button habe ich verstanden! - Danke.
...aber das mit dem Rahmen noch nicht wirklich?!...und wenn ich ehrlich bin weiß ich auch nicht, was ein div ist...:oops:
 
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#boxMitRahmenUndText {
    width: 500px;
    height: 500px;
    margin: 0px auto;
    background: red;
    border: 3px solid black;
}
</style>
</head>
<body>
<div id="boxMitRahmenUndText">hier deinen Text rein schreiben</div>
</body>
<html>
Teste es mal :-)
 
Es funktioniert! Vielen, vielen Dank.
Wie hast du es geschafft, dass der Rahmen in der Mitte der Seite ist?
Danke.
 
Kein Ding.

Mit <div> leiten Sie ein allgemeines Block-Element ein, in das Sie mehrere andere Block-Elemente einschließen können (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden </div> steht, wird als Teil des Bereichs interpretiert.
Zum Vergrößern anklicken....
--- SELFHTML.de

Der Div bekommt eine eindeutige id, somit kannst du ihn mit CSS formatieren. Er bekommt eine feste width und height, damit das auto als "margin"-Wert auch greift. Die Border-Eigenschaften erhält ebenfalls der Div. Da wir den div mit dem "auto" mittig darstellen lassen, wird auch der Border mittig angezeigt, da dieser ja zum Div-Element gehört.


In diesen Div steckst du nun weitere HTML Elemente und Inhalt, was auch immer.
 
Vielen Dank!
Was kann ich alles zwischen <div> und </div> schreiben?
 
Alles ;)
Absolut jedes HTML Element kannst du da reinschreiben - (zB <form></form>, <pre></pre>, <p></p>, <img />, <a href="">Link</a> usw.)

Grüße
 
Wie kann ich nun noch die Schrift etwas von der "Rahmen-Kante" entfernen?
 
Habe es gerade selber gefunden: text-indent


Beispiel (CSS):
Code: 
text-indent: 3px;
 
Achte dabei aber auf die semantische Bedeutung. Ein

Code: 
<div id="boxMitRahmenUndText">hier deinen Text rein schreiben</div>

ist so nicht korrekt. Wenn es nur um einen Text bestehend aus einem Absatz geht, wäre

Code: 
<p id="boxMitRahmenUndText">hier deinen Text rein schreiben</p>

korrekt. Wenn Du ein <div> hast, dann kannst Du darin natürlich "alles" schreiben, aber ein

Code: 
<div id="boxMitRahmenUndText"><a href="">hier steht ein Link</a></div>

wäre auch nicht richtig. Eher:

Code: 
<div id="boxMitRahmenUndText"><p><a href="">hier steht ein Link</a></p></div>

Stylen kann man per CSS natürlich auch die semantisch falschen HTML-Strukturen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben