Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 13

Thema: Hintergrundbox für Text

  1. #1
    JFaron
    Gast

    Frage Hintergrundbox für Text

    Hallo zusammen!

    Ich habe auf meinem Copmuter ein paar HTML-Dateien für eine Homepage... Bin eigentlich ein Neuling und komme nun an einer Stelle nicht weiter!

    Und zwar:

    Ich habe über ein verknüpftes CSS-Dokument alle möglichen Dinge, auch eigene Klassen, festgelegt. So auch ein Hintergrundbild, welches ich anschließend noch zentriert habe. So, nun zum wichtigen Teil!

    Meine Überschriften und Absätze haben an den Rändern jeweils einen Freiraum von 20% (über den "margin-[...]"-Befehl) sowie eine Textausrichtung. Das ganze habe ich farblich hinterlegt, so wollte ich eine Box für den Text erschaffen, doch das Ganze schlug fehl!

    Zwischen jeder Überschrift und jedem neuen Absatz ist nun ein Leerraum. Also meine Frage:

    Wie kann ich eine Box um sämtliche Texte ziehen?

    MfG
    Gast JFaron
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Unregistriert
    Gast

    Standard AW: Hintergrundbox für Text

    Ein Link zur Seite? Oder mindestes der HTML/CSS Code. Besser wäre ein Link

  3. #3
    Samurai
    Registriert seit
    21.08.2011
    Beiträge
    233
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Hintergrundbox für Text

    zB einen div-Tag um allle Texte herum machen, diesem eine Id geben und diese Id dann im css ansprechen und entsprechend deiner Vorstellung gestalten

  4. #4
    JFaron
    Gast

    Standard AW: Hintergrundbox für Text

    Zitat Zitat von Unregistriert Beitrag anzeigen
    Ein Link zur Seite? Oder mindestes der HTML/CSS Code. Besser wäre ein Link
    Tut mir Leid, das ganze ist intern!

    Hier ein Screen: *klick*

    Hier der Code der HTML-Datei:
    Code:
    <html>
    <head>
    	<title>Jonathan Weber - Home</title>
    	<link href="style.css" type="text/css" rel="stylesheet">
    	<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
    </head>
    <body>
    	<header><img src="Grafiken/HeaderV2.png" alt="Herzlich Willkommen!" width="720" height="200" style="border: 0px;" /></header>
    	<h1>Startseite</h1>
    	<p>ouml;n, dass du hier her gefunden hast... Vielleicht kann ich dich dazu bewegen etwas hier zu bleiben? Wenn dir die Seite gef&auml;llt schreibe doch bitte eine R&uuml;ckmeldung, ggf. mit Verbesserungsvorschl&auml;gen, sodass ich sie weiter verbessern kann...</p>
    	<span style="display:block" class="warning">[Platzhalter]</span>
    	<h2>News</h2>
    	<span style="display:block" class="news">
    		<h3>TT:MM:JJJJ: [Art] Titel</h3>
    		<span class="ntext">Beispieltext</span>
    </span>
    </body>
    </html>
    Und der aus der CSS:

    Code:
    body {
    	background-image: url('BG_Main.gif');
    	background-position: center
    }
    header {
    	text-align: center;
    }
    h1 {
    	font-family: "Cambria", "serif";
    	font-size: 35pt;
    	text-align: center;
    	background-color: #C0C0C0;
    	margin-left: 20%;
    	margin-right: 20%;
    }
    h2 {
    	font-family: "Cambria", "serif";
    	font-size: 20pt;
    	text-align: center;
    	background-color: #C0C0C0;
    	margin-left: 20%;
    	margin-right: 20%;
    }
    h3 {
    	font-family: "Cambria", "serif";
    	font-size: 15pt;
    	color: #ffffff;
    	text-align: left;
    	background-color: #000000;
    	padding-top: 0px;
    }
    p {
    	font-family: "Arial", "sans-serif";
    	font-size: 11pt;
    	text-align: justify;
    	background-color: #C0C0C0;
    	margin-left: 20%;
    	margin-right: 20%;
    }
    .news {
    	background: #C0C0C0;
    	margin-left: 30%;
    	margin-right: 30%;
    	border-style: solid;
    	border-top-width: thin;
    	border-bottom-width: thin;
    	border-left-width: thin;
    	border-right-width: thin;
    	border-color: #000000;
    	padding-top: 0px;
    	padding-right: 10px;
    	padding-left: 10px;
    	padding-bottom: 10px;
    }
    .warning {
    	text-align: center;
    	margin-left: 40%;
    	margin-right: 40%;
    	border-style: solid;
    	border-top-width: medium;
    	border-bottom-width: medium;
    	border-left-width: medium;
    	border-right-width: medium;
    	border-color: #FF0000;
    	background: #000000;
    	color: #ffffff;
    	padding-right: 10px;
    	padding-left: 10px;
    	padding-top: 10px;
    	padding-bottom: 10px;
    }
    .ntext {
    	text-align: justify;
    	font-family: "Arial", "sans-serif";
    	font-size: 11pt;
    	}

  5. #5
    JFaron
    Gast

    Standard AW: Hintergrundbox für Text

    Zitat Zitat von alxy Beitrag anzeigen
    zB einen div-Tag um allle Texte herum machen, diesem eine Id geben und diese Id dann im css ansprechen und entsprechend deiner Vorstellung gestalten
    Tut mir Leid, bin absoluter Neuling und weiß darüber gar nix!

    Muss das ungefähr folgendermaßen aussehen?

    Code:
    ...
    <body>
    <div ID=Beispiel-ID>MEIN TEXT</div>
    </body>
    ...
    Und im CSS-Document z. B. eine Hintergrundfarbe verpassen? Was gebe ich dann da ein?

    Code:
    .div ID }
    background-color:#ffffff
    }

  6. #6
    Unregistriert
    Gast

    Standard AW: Hintergrundbox für Text

    Zitat Zitat von JFaron Beitrag anzeigen
    Tut mir Leid, bin absoluter Neuling und weiß darüber gar nix!
    Dann empfehle ich mal

    http://de.selfhtml.org/
    http://www.css4you.de/index.html
    http://www.ohne-css.gehts-gar.net/

  7. #7
    JFaron
    Gast

    Standard AW: Hintergrundbox für Text

    Zitat Zitat von JFaron Beitrag anzeigen
    Tut mir Leid, bin absoluter Neuling und weiß darüber gar nix!

    Muss das ungefähr folgendermaßen aussehen?

    Code:
    ...
    <body>
    <div ID=Beispiel-ID>MEIN TEXT</div>
    </body>
    ...
    Und im CSS-Document z. B. eine Hintergrundfarbe verpassen? Was gebe ich dann da ein?

    Code:
    .div ID }
    background-color:#ffffff
    }
    Die Seiten kenne ich, ich finde aber nix über eine "div ID"!

  8. #8
    Samurai
    Registriert seit
    21.08.2011
    Beiträge
    233
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Hintergrundbox für Text

    Nein, das müsste ungefähr so aussehen:
    HTML-Code:
    <div id="content">Deine Texte, hier können auch weiter divs folgen!
    ....
    </div>
    css:
    HTML-Code:
    #content {
    background-color:#fffff
    }
    Übrigens, ids werden in css mit # eingeleitet; class mit .

  9. #9
    JFaron
    Gast

    Standard AW: Hintergrundbox für Text

    Zitat Zitat von alxy Beitrag anzeigen
    Nein, das müsste ungefähr so aussehen:
    HTML-Code:
    <div id="content">Deine Texte, hier können auch weiter divs folgen!
    ....
    </div>
    css:
    HTML-Code:
    #content {
    background-color:#fffff
    }
    Übrigens, ids werden in css mit # eingeleitet; class mit .
    Danke.. Im Ansatz habe ich ja schon richtig gedacht

  10. #10
    JFaron
    Gast

    Standard AW: Hintergrundbox für Text

    Ich habe nochmal eine Frage!

    Mein Doc. wird von einem Header geschmückt.
    HTML:
    Code:
    <header><img src="Grafiken/HeaderV2.png" alt="Herzlich Willkommen!" width="720" height="200" style="border: 0px;" /></header>
    CSS:
    Code:
    header {
    	text-align: center;
    }
    Meine #content-Box ist folgendermaßen definiert:
    Code:
    #content {
    	margin-left: 20%;
    	margin-right: 20%;
    	background: #C0C0C0;
    	padding-right: 10px;
    	padding-left: 10px;
    	padding-top: 10px;
    	padding-bottom: 10px;
    }
    Wenn ich nun aber mein Fenster verkleinere, wird entsprechend die gesamte Seite skaliert, aber an den Seiten bleiben immer meine 20% Freiraum bestehen, ist ja klar! Nun schießt der Header aber, bei kleinen Fenstern, über die Box hinaus.

    Ich meine mit Befehlen (die ich mir leicht auf selfhtml raussuchen könnte) den Header einfach abschneiden zu können, dass will ich aber nicht!

    Lässt sich irgendwie der Header relativ zur Fenstergröße des Browsers minimieren? Wie z. B. bei der Firefox-Startseite?

    Oder, optimal wäre hier ein und, ist es möglich, den Seitenrand bei einer zu kleinen Fensterauflösung verschwinden zu lassen?

    Hoffe ihr wisst wieder Atnworten...

    MfG
    JFaron

Ähnliche Themen

  1. Text -> textfeld -> text
    Von Tejo1986 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 8
    Letzter Beitrag: 14.12.2010, 01:18
  2. Script "Klick auf Text und langer Text öffnet sich"
    Von enidan24 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 21.05.2007, 02:23
  3. in tabelle text farbe und text grösse ädnern
    Von im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 06.06.2006, 15:41
  4. Text aus Passwort Textfeld in normalen Text
    Von Steven im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 12.06.2005, 17:51
  5. Text aus Passwort Textfeld in normalen Text
    Von Steven im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 12.06.2005, 16:22

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •