Seite passt sich nicht an Explorer an

iceee · 20.04.2010

Text und Header Center,

Neues Problem,

Ich hab mich jetzt ein Stück in CSS eingearbeitet und auch Verstanden.
Aber ich weis nicht wie ich den Header und den Text in die Mitte bekomme :S

Hier der CSS:

Code:

#header {
	position:absolute;
	left:200px;
	bottom:auto;
}

t {
	text-align: center;
	position:relative;
	top: 300px;
	left: auto;
}

und HTML:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Stylesheet</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
   
   <div id="header">
     <img src="Images/Header.png" alt="Header" />
</div>

</head>
<body>
<!-- Sichtbarer Teil der Webseite, noch leer -->

<t>Wilkommen bei Berry Unlimited</t>


</body>

Code.

Ich weis nicht wie ich das in die Mitte bekomme, der header ist zwar auf meinem Bildschirm in der Mitte, jedoch wenn ich das fenster größer über den Zweiten Bildschirm ziehe bleibt der Header ja auch 200px stehen.

Und der Text ist zwar in Dreamweaver in der Mitte, jedoch im Browser (Chrome) und der Liveansicht hängt er am Linken Rand fest.

...Léon

Salibar · 20.04.2010

AW: Seite passt sich nicht an Explorer an

Hallöchen,
ohne Code kann man schlecht etwas dazu sagen. Poste den doch bitte mal.

Llynyania · 20.04.2010

AW: Seite passt sich nicht an Explorer an

Da brauchts den Quellcode bzw. das css, sonst kann ja keiner gucken.

Grüßle

PS: ist hoffentlich kein Tabellenlayout wie im Tut

NSGFR · 20.04.2010

AW: Seite passt sich nicht an Explorer an

das ist richtig und hat auch einen guten grund.
erstmal gehe ichd avon aus das du den von photoshop erstellten html-code genommen hast. leider macht dieser nur tabellen. sachen die sich anpassen sind div-container. allerdings können sich auch nur 2 sachen an die fenstergröße anpassen. das ist 1. reine farbe und 2. text. der text in der website die du mit photoshop erstellt hat, zeigt folgenden unterschied. der text ist im bild mit drinne, also der text ist selbst ein bild. so und ein bild kann sich auch nicht anpassen, weil es sonst zugeschnitten werden würde.

mein tipp an dich:
erstelle 3 dieser websiten allerdings alle in verschiedenen größen bzw auflösungen. zum beispiel eine in 800x600pc die andere in 1024x768 und villeicht noch eine dritte in 1280x1024.
weiterer tipp: dein header ist viel zu groß, sowie die navigationsleiste. eine normale auflösung für eine website ist 1024x768 oder kleiner.

der rest ist HTML-arbeit schau mal bei SELFHTML da werden sie geholfen!
lerne richtig html websiten mit phtoshop sind schwachhsinn,d as einzige wofür PS gut ist in diesem falle ist nur das Layout sonst nüscht.

naja vielleicht hat dir das ja geholfen.

vG

iceee · 20.04.2010

AW: Seite passt sich nicht an Explorer an

Ja okay, ich hab eben mit diesem Tutorial angefangen, da ich Photoshop schon beherrsche.

Dann les ich mir mal da das SelfHTML durch, aber das is rein HTML, also nich auf Dreamweaver abgestimmt?

Was ist denn schlimm wenn ich Tabellen nutze?

Naja ich werde morgen mal versuchen nur mal Hintergrund mit Scanline zu erstellen und ne Navigationsleiste.

...Léon

Salibar · 20.04.2010

AW: Seite passt sich nicht an Explorer an

am besten beschäftigst du dich erstmal mit html wie NSGFR bereits geschrieben hat und danach bietet sich auf jedenfall css an um deine Webseiten dann richtig gestalten zu können.
CSS 4 You - The Finest in Stylesheets ist eine nützliche Seite um es zu lernen.

Helrunar74 · 21.04.2010

AW: Seite passt sich nicht an Explorer an

Und bei solchen Fragen, wie schon angesprochen, immer einen Link zur Seite. Nur so kann man z.B. mittels Firebug (welchen ich Dir nur ans Herz legen kann) für den FF direkt in Deine Css schauen und Dir eine hilfreiche Antwort geben

Llynyania · 21.04.2010

AW: Seite passt sich nicht an Explorer an

Auch wenn man Dreamweaver hat, muß man das Grundgerüst schonmal kapiert haben. Sofort in css einzusteigen ist nicht leicht, dazu muß man schon die Syntax verstehen.

Selfhtml ist ein Nachschlagewerk, das für Anfänger auch nicht unbedingt sehr gut geeignet ist.

Mein Vorschlag wäre: suche mittels Sumaschine nach css Templates und such Dir eins aus, dass von der Navigation her schonmal passt. Freie Templates gibts zu Hauf.

Mit diesem Template durchschaust Du eventuell schneller, wie das ganze funktioniert.
Das bisschen html was darin steckt, erklärt sich ein wenig schneller, als die css-Anweisungen. Da mußt Dich wirklich hinsetzen und hier rate ich zur schnelleren Übersicht, auf eine Kurzreferenz für css.

Firefox und Firebug als Plugin ist tatsächlich eine Hilfe, Firebug belegt die div-Boxen mit einem Farbfeld und so kannst du etwas schneller heruasfinden, welches div wie heißt und somit dich schneller in der css zurechtfinden.

Grüßle - alle meinens hier gut.

Pixelverwender · 21.04.2010

AW: Seite passt sich nicht an Explorer an

Ich gebe Llynyania recht, SelfHTML ist in erster Linie ein Nachschlagewerk und für Einstiger evtl. verwirrend zu Beginn.
Was Dir vielleicht besser hilft, ist Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS

Dort findest Du sowohl HTML-Grundlagen als auch CSS aus einer Hand.

iceee · 21.04.2010

AW: Seite passt sich nicht an Explorer an

Okay dankeschön für die Antworten.

Ich werd mal alles durchlesen und schauen.

Das problem liegt ja nicht bei html, die Begriffe habe ich schnell kapiert, aber das CSS Sheet...

Das stellt ein kleines Problem dar.

iceee · 08.05.2010

AW: Seite passt sich nicht an Explorer an

Neues Problem,

Ich hab mich jetzt ein Stück in CSS eingearbeitet und auch Verstanden.
Aber ich weis nicht wie ich den Header und den Text in die Mitte bekomme :S

Hier der CSS:

Code:

#header {
    position:absolute;
    left:200px;
    bottom:auto;
}

t {
    text-align: center;
    position:relative;
    top: 300px;
    left: auto;
}

und HTML:

HTML:

     <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Stylesheet</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
   
   <div id="header">
     <img src="Images/Header.png" alt="Header" />
</div>

</head>
<body>
<!-- Sichtbarer Teil der Webseite, noch leer -->

<t>Wilkommen bei Berry Unlimited</t>


</body>

Ich weis nicht wie ich das in die Mitte bekomme, der header ist zwar auf meinem Bildschirm in der Mitte, jedoch wenn ich das fenster größer über den Zweiten Bildschirm ziehe bleibt der Header ja auch 200px stehen.

Und der Text ist zwar in Dreamweaver in der Mitte, jedoch im Browser (Chrome) und der Liveansicht hängt er am Linken Rand fest.

...Léon

cebito · 08.05.2010

AW: Seite passt sich nicht an Explorer an

Was macht dein div im Head der Seite?

HTML:

     <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Stylesheet</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header"></div>



</body>

Code:

#header {
 width:/*breite des Headerbildes*/;
 height:/*höhe des Headerbildes*/;
 margin:0 auto;
 background:url([COLOR=#800080][COLOR=#0000ff]Images/Header.png[/COLOR][/COLOR]);
}

Und was ist "t"? Wenn du text formatieren willst, benutze bspw. <p>, das die Dreamweaveransicht keine Browseransicht ersetzt, sollte dir klar sein. Teste deine Seite lieber gleich in richtigen Browsern - kein Mensch surft mit Dreamweaver.

Helrunar74 · 08.05.2010

AW: Seite passt sich nicht an Explorer an

Und wenn Du schon mit auto zentrieren möchtest, dann auch bitte so

Code:

margin-left: auto;
margin-right: auto;

... dann klappt es auch mit dem Header

iceee · 08.05.2010

AW: Seite passt sich nicht an Explorer an

oh das kann ich dir leider nicht sagen :eek:

ja schon, ich sage ja dass es im Browser (Google Chrome) genauso aussieht wie in der Liveansicht, jedoch im Entwurf alles wie es sollte.

Dankeschön erstmal, das mit dem Text sollte ich nun auch hinbekommen =)

...léon

edit//

Text habe ich nun auch, Dankeschön.
Ich bin leider im Moment etwas unbegabt, das *Klick* kam einfach noch nicht richtig.

iceee · 09.05.2010

MouseOver Button

Ich hab wieder ne Frage, is ja fast schon Peinlich so viel in einem Thread

Ich will für meine HP 3 Buttons unter dem header haben.
Schön, dachte ich machen wir hald 3 Hyperlinks und fügen per CSS ne Hintergrundgrafik ein.
Naja, Pustekuchen !

HTML:

Code:

<div id="header"></div>
<br/>
<br/>
<a href="Index.html" id="Browse">Browse</a>  <a href="Index.html" id="Support">Support</a>   <a href="Index.html" id="Help">Help</a>
<br/>
<br/>

CSS:

Code:

#Browse:link {
	margin:0 auto;
	width:270;
	height:124;
	background:url(Images/Browse.png);
	z-index:4;
}

#Browse:visited {
	margin:0 auto;
	width:270;
	height:124;
	background:url(Images/Browse.png);
	z-index:4;
}

#Browse:active {
	margin:0 auto;
	width:270;
	height:124;
	background:url(Images/Browse.png);
	z-index:4;
}

#Browse:hover {
	margin:0 auto;
	width:270;
	height:124;
	background:url(Images/Browse_rollover.png);
	z-index:4;
}

Es geht jetzt mal nur um den Browse Button.
Der Button wird nur dort angezeigt wo der Text ist, also nur die Ecke oben Links. Hover geht, zumindest in der ecke^^

Zumindest dachte ich das alles vom Prinzip her so läuft, ander könnte ich es mir im Moment nicht vorstellen.

Kann mir hier jemand Helfen?
Das wäre sehr Lieb.

...Léon

Pelzner · 12.06.2010

AW: Seite passt sich nicht an Explorer an

Hallo iceee,
um Header, Body, Footer oder irgendwas auf dem Desktop zu zentrieren,
muss Du nur einen Wert angeben:
margin: 0 auto;
und nichts mehr.
Selbstverständlich in der *.css Datei.
Viel Spaß, Ulli.