Text mittig rechts neben Bild zentrieren

martin3171 · 16 Februar 2010

Hallo,

gleich vorweg ich bin neu hier im Forum und habe ein, für euch wahrscheinlich einfaches, Problem mit meiner Webseite.
Die Suchfunktion hab ich schon gequält, brachte nur sehr viele spezielle Einträge. :???:

Zum Problem:
Und zwar möchte ich einen 2-zeiligen Text vertikal rechts neben einem Bild zentrieren. Noch dazu soll der Text einen kleinen Abstand (20px) rechts vom Bild einhalten sollte der Betrachter eine kleine Bildschirmauflösung haben.

Konkret handelt es sich um den Top-Frame, der mittlerweile so aussieht:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>top</title>
	
	<style type="text/css">
    body {
	background-image: url(topbckgrd.jpg);
	background-repeat: repeat-x;
	text-align:center
    }
    </style>
    
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>

<a href="index.html"><img src="top.jpg" width="500" height="150" align="left" border="0" alt="start" title="zur Startseite"></a>
<span class="ueberschrift_top">Zeile 1<br>Zeile 2</span>

Andere Frage: wie könnte ich diesen

HTML:

body {
	background-image: url(topbckgrd.jpg);
	background-repeat: repeat-x;
	text-align:center

in meine externe CSS-Datei bringen?

hoffe ihr könnt mir helfen!
mfg Martin

vitus37 · 16 Februar 2010

Bitte benutze KEINE Frames! Sie sind schlecht einfach schlecht und benutzerunfreundlich! Das Layout macht man komplatte mit CSS!

Zu deiner ersten Frage wie du den Text rechts neben das Bild bekommst:
Versuche mal diesen HTML-Code:

HTML:

<div id="header">
<a href="index.html"><img src="top.jpg" width="500" height="150"border="0" alt="start" title="zur Startseite"id="header"></a>
<span class="ueberschrift_top">Zeile 1<br>Zeile 2</span>
</div>

und dazu diesen CSS-Code:

Code:

div#header{
  padding: 0;
  margin: 0;
  height:150px;
  width: 750px;
}
img#header{
  float: left;
}
.ueberschrift_top{
  margin-left: 520px;
}

[Ich habe den code nicht ausprobiert, hoffe aber mal es klappt so.]

Zu deiner zweitern Frage wie du dein CSS-Code in eine externe Datei bringst:
Die Lösung steht doch schon im Script. :-o

<link href="style.css" rel="stylesheet" type="text/css"

Deinen CSS-Code kannst du demnach einfach in die Datei style.css schreiben.

martin3171 · 17 Februar 2010

Danke für den Code, werd ich am Abend ausprobieren und berichten ob das so klappt!

Das Frames schlecht sind hör ich jetzt schon des öfteren aber irgendwie hab ich noch nicht geschnallt, wie ich eine Webseite ohne Frames/mit CSS aufbaue wo sich nur der Inhalt des "main frame" ändert? Sprich die linke Spalte (Menü) und der Kopfbereich sollen immer gleich bleiben.
Der einzige Nachteil von Frames den ich kenne, ist der, dass man über eine Suchmaschine immer nur den main-Frame angezeigt bekommt. Könnte man aber allerdings mit einem kleinen Scrit kompensieren.

Noch ma zur zweiten Frage: Wenn ich den Code in die style.css schreibe wird er auf allen Seiten angewendet die mit der CSS-Datei verknüpft sind...möchte es aber nur auf einer bestimmten. Ist das möglich?

Efchen · 17 Februar 2010

martin3171 schrieb:
hab ich noch nicht geschnallt, wie ich eine Webseite ohne Frames/mit CSS aufbaue wo sich nur der Inhalt des "main frame" ändert?

Mit "serverseitiem include" geht das ganz einfach.

Der einzige Nachteil von Frames den ich kenne, ist der, dass man über eine Suchmaschine immer nur den main-Frame angezeigt bekommt. Könnte man aber allerdings mit einem kleinen Scrit kompensieren.

Das kann man mit einem JavaScript kompensieren, ja, aber was, wenn JavaScript abgeschaltet ist?
Was, wenn der Browser Frames gar nicht oder nur unzureichend (Lynx) unterstützt?
Was, wenn Du ein Bookmark auf eine Unterseite setzen oder diese verlinken willst?
Subotnik: Warum Frames out sind (und es schon immer waren...)

Noch ma zur zweiten Frage: Wenn ich den Code in die style.css schreibe wird er auf allen Seiten angewendet die mit der CSS-Datei verknüpft sind...möchte es aber nur auf einer bestimmten. Ist das möglich?

Klar, durch einen geeigneten Selektor geht das problemlos. Entweder identifizierst Du Dein Element oder im Zweifelsfall gibst Du dem body eine besondere id.

martin3171 · 17 Februar 2010

Puh, ok langsam sehe ich ein warum Frames nicht das beste sind. Wobei ich davon ausgehe, dass 99% aller Internetnutzer einen "Frame-fähigen" Browser verwenden. Gut, Java muss man nicht aktivieren, bringt aber keine Vorteile wenn nicht aktiviert.
Ein guter Kritikpunkt sind wirklich Bookmarks, wird mir erst jetzt bewusst.:shock:

Mit CSS bin ich noch nicht so bewandert. Mit Include zb fange ich (noch) nicht viel an. :neutral: Könnt ihr mir vl ein gutes Buch dazu empfehlen?

Wie vergebe ich eine besondere id für eine bestimmt Seite? Ich vermute hier

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>top</title>
 
    <style type="text/css">
    body {
    background-image: url(topbckgrd.jpg);
    background-repeat: repeat-x;
    text-align:center
    }
    </style>
 
<link href="style.css" rel="stylesheet" type="text/css">
</head>

muss etwas verändert werden?

Efchen · 17 Februar 2010

martin3171 schrieb:
Wobei ich davon ausgehe, dass 99% aller Internetnutzer einen "Frame-fähigen" Browser verwenden.

Wenn es wirklich so wäre, wären die 1% Nutzer trotzdem stinkesauer auf Dich! Und sie würden Dich ZU RECHT fragen, warum ausgerechnet sie Deine Site nicht nutzen dürfen!
Bei 100.000 Besuchern wären 1% immerhin sogar 1.000 Nutzer. Bei 100.000.000 sogar 1.000.000.

Gut, Java muss man nicht aktivieren, bringt aber keine Vorteile wenn nicht aktiviert.

Java muss man installieren. Du meinst vermutlich JavaScript?
Wenn JavaScript nicht aktiviert, bringt das die Vorteile, dass kein schadhafter Code ausgeführt werden kann. Gerade der IE ist in der Hinsicht etwas anfälliger als andere Browser.

Mit CSS bin ich noch nicht so bewandert.

Was nicht ist, kann ja noch werden.

Mit Include zb fange ich (noch) nicht viel an.

Dann aber los. Ich könnte ohne keine Websites erstellen.

Könnt ihr mir vl ein gutes Buch dazu empfehlen?

Ich hätte einen Link für Dich: Einführung | Webdesign mit XHTML und CSS

Wie vergebe ich eine besondere id für eine bestimmt Seite?

Indem Du dem body-Tag mit Hilfe des Attributs "id" eine selbige vergibst.
Und, obwohl das eigentlich selbsterklärend ist, hier nochmal der Hinweis: IDs dürfen nur einmal auf einer Seite vorkommen, Klassen beliebig oft.

vitus37 · 17 Februar 2010

Und, obwohl das eigentlich selbsterklärend ist, hier nochmal der Hinweis: IDs dürfen nur einmal auf einer Seite vorkommen, Klassen beliebig oft.

Oh tatsächlich? :S
Dann wäre ja der Code den ich oben gepostet habe falsch, denn ich habe <img> und das alles umschliessende <div> mit der selben ID ("header") bezeichnet, diese aber mit img#header und div#header im Stylesheet angesprochen...
Ist das so zulässig?

Efchen · 17 Februar 2010

vitus37 schrieb:
Dann wäre ja der Code den ich oben gepostet habe falsch

Ja, Du hast recht. Nein, so ist das natürlich nicht zulässig.

vitus37 · 17 Februar 2010

Ok, sorry. Hier der verbesserte Code.
HTML-Code:

HTML:

<div id="header">
<a href="index.html"><img src="top.jpg" width="500" height="150" border="0" alt="start" title="zur Startseite" class="header"></a>
<span class="ueberschrift_top">Zeile 1<br>Zeile 2</span>
</div>

und CSS:

Code:

div#header{
  padding: 0;
  margin: 0;
  height:150px;
  width: 750px;
}
.header{
  float: left;
}
.ueberschrift_top{
  margin-left: 520px;
}

Efchen · 17 Februar 2010

Ich würde dem Bild weder Klasse noch ID geben, wenn Du schon so fragst...Du kannst es im Stylesheet doch so referenzieren:

div#header a img

(oder gültige Varianten davon).

Zu viele Klassen werden nur unübersichtlich. Das span wäre z.B. div#header span, bzw. div#header span:first-line. Mit den Selektoren kann man schon tolle Sachen machen :-)

martin3171 · 17 Februar 2010

Der Code von vitus37 funktioniert leider nicht so wie ich mir das vorstelle

Sieht so aus.

In Opera und FF genau gleich, so sollte es aber sein klick (hab das jetzt irgendwie hingepfuscht)

Hat vl noch jemand einen Vorschlag wie es klappen könnte?

Efchen · 18 Februar 2010

Ja, ich hätte noch einen Vorschlag: Gib uns einen Link, dann können wir Dir auch anständig helfen!

martin3171 · 18 Februar 2010

Wofür einen Link? Die HP ist noch nicht online, der Quellcode sollte ja reichen? Bitte nicht falsch verstehen aber ich dachte nicht, dass das "kleine" Problem so schwer zu lösen ist -.-

Efchen · 18 Februar 2010

Wofür? Ich glaub, ich schriebn "dann können wir Dir auch anständig helfen". Reicht das nicht als Grund? Ist Dir das Problem so unwichtig, dass Du die Mühe, die Seite hochzuladen, nicht auf Dich nehmen willst?

Niemand sagt, dass das Problem schwer zu lösen sei, aber es ist für die Helfenden schlicht deutlich einfacher, wenn sie sich keine Mühe machen müssen. Dann helfen mehr und die helfen schneller. Code lesen ist doch viel zu anstrengend, wenn man Firebug auf die Seite jagen kann. Das ist ungefähr das selbe, wie kein anständiger C++-Programmierer ohne einen anständigen Debugger arbeiten kann.

Außerdem kannst Du ja viel erzählen, dass der Code, den Du hier postest, mit dem Deiner Seite überein stimmt. Wäre nicht das erste Mal, dass jemand einen Fehler eingebaut hat. Den kann ich in einem Screenshot nicht finden.

Ohne Link klinke ich mich aus.

Text mittig rechts neben Bild zentrieren

martin3171

Neues Mitglied

vitus37

Senior HTML'ler

martin3171

Neues Mitglied

Efchen

Guest

martin3171

Neues Mitglied

Efchen

Guest

vitus37

Senior HTML'ler

Efchen

Guest

vitus37

Senior HTML'ler

Efchen

Guest

martin3171

Neues Mitglied

Efchen

Guest

martin3171

Neues Mitglied

Efchen

Guest

Neueste Beiträge