Automatische Webseitenanpassung im Browser

voda · 4 Januar 2008

Hallo Leute!

Ich habe seit einiger Zeit mir eine Homepage gebastelt. Benutzt habe ich eine OpenSource-Vorlage. Nun habe ich mit dem Kompozer Texte und Grafiken eingefügt. Nun habe ich ein großes Problem und ich weiss echt nicht mehr weiter. Die Seite ist optimiert für 1280 x 1024. Da ist alles perfekt

Wenn ich jetzt aber auf 1024 x 768 (und auf Breitbild 1680 x 1050) umstelle sind die Grafiken versetzt. Ich habe es auch schon mit prozentualen Werten gearbeitet, aber die Grafiken sind dann nicht mittig. Wie bekomme ich das hin das die Grafiken bei jeder Auflösung genau mittig sind? Auch sind die Schriften teilweise versetzt (Auch die Tabelle habe ich prozentual erstellt)

PS: Leider habe ich von CSS (denke doch das eveltuell es damit geht...) überhaupt kein Schimmer... :cry:

Ich weiss echt kein Rat mehr...

acidmat · 4 Januar 2008

kannst vielleich mal ein bisschen Code posten von dem Element das nicht zentriert ist ? thx ;)

voda · 4 Januar 2008

Kein Problem. Aber das Mit den Bilder habe ich soweit hinbekommen.

Mit den

Code:

<DIV align = "center">- Befehl.

Nun habe ich das Problem mit einer Tabelle. Die lässt sich nicht zentrieren, bzw. beim Browser stehen die Buchstaben über ( bei 1024 x 768 )

Hier der Code:

Code:

 style="text-align: left; width: 528px; height: 22px;" border="1"
 cellpadding="2" cellspacing="2"><tbody><tr><td
 style="width: 216px;"><img
 style="width: 182px; height: 300px;" alt=""
 src="Bilder/DNA_orbit_animated_small.gif" /> &nbsp;
&nbsp; &nbsp; &nbsp; <br /></td><td
 style="vertical-align: top; width: 306px;"><div
 style="text-align: justify; width: 440px;">Der betreffende Text<br /></div><br /><br /><br /><br /><br /><br />&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;&nbsp;<div align="center"><div
 class="img_left"><a href="Der Link.html><img
 style="border: 0px solid ; width: 147px; height: 44px;" alt=""
 src="Bilder/Bild.png" /></a></div> <br /></div></td></tr>

Sieht ein bisschen wüst aus, weil eine fertige OpenSouce-Vorlage.

Hier ist auch die Homepage

Seht selber.

Vielen Dank im Vorraus.

nichtsgeht · 4 Januar 2008

benutze margin: auto;

Code:

<div style="margin: 0 auto; text-align: center">
<table>
...
</table>
</div>

Dann müßte es gehen

acidmat · 4 Januar 2008

das wort Suchmaschinenanmeldung ist zu lang und umgebrochen wird es auch nicht. du kannst mit overflow:hidden; machen dass es das was übersteht nicht anzeigt, ist aber sicher nicht die beste lösung.

voda · 4 Januar 2008

acidmat schrieb:
das wort Suchmaschinenanmeldung ist zu lang und umgebrochen wird es auch nicht. du kannst mit overflow:hidden; machen dass es das was übersteht nicht anzeigt, ist aber sicher nicht die beste lösung.

Ja der ganze Link ist Unsinn. Ist eine angebliche kostenlose Suchmaschinenanmeldung ...:???:. Ist ein Backlink...

Und angemeldet haben die auch nix....:twisted:

benutze margin: auto;
Code:
<div style="margin: 0 auto; text-align: center">
<table>
...
</table>
</div>
Dann müßte es gehen

Wo muss ich das denn einsetzen.... Jetzt bin ich total verwirrt.... :roll:

Muss dazusagen, das die Grafik links und der Text rechts sein soll...

acidmat · 4 Januar 2008

dann würd ich ihn ganz weg lassen ist ja das einzige was übersteht, oder ?

voda · 4 Januar 2008

Ist das einzigste was übersteht. War ein fertiger Code den man nur eintragen musste. Aber weglassen hmm ich weiss nicht, nachher kucken die nach ob der da ist, wenn nicht, dann eventuell eine Strafe bezahlen...

acidmat · 4 Januar 2008

ja ist das einzige was übersteht. hmm ja dann, kannst ja einfach ein Leerzeichen rein schreiben a lá 'Suchmaschinen anmeldung' dann würde er umbrechen. ( nicht sehr schön ;) )
Oder mit einem display wert ( CSS ) einen umbruch erzwingen, weiss aber nicht welcher das macht und ob es geht.

nichtsgeht · 4 Januar 2008

Ich glaube, ich hatte da was falsch verstanden. Einen bedingten Zeilenumbruch kann man mit  oder <wbr> einstellen.
SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Zeilenumbruch

voda · 4 Januar 2008

nichtsgeht schrieb:
Ich glaube, ich hatte da was falsch verstanden. Einen bedingten Zeilenumbruch kann man mit  oder <wbr> einstellen.
SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Zeilenumbruch

THX, aber mein Hauptproblem beibt die Tabelle. Ich habe ja eine zweispaltige Tabelle gemacht, Links das Bild und rechts der Text. Bei 1024x768 steht dieser über. Wie mache ich, das der Text "mitgeht" wie bei den anderen Texten auch? Das Bild vllt über CSS einfügen, wenn ja wie?

(Leider absolut keine Ahnung von CSS.)

PS. Cooles Forum ;-)

voda · 4 Januar 2008

Habs hinbekommen, habe die Startseite hochgeladen.

Könnt mir ja bescheidsagen ob's gut ist.

THX

acidmat · 4 Januar 2008

also das was du mit dem bild gemeint hast weiss ich immer noch nicht ( sehs nicht ).

aber der text mit der suchmaschine und der Biologietext sind immer noch überm Rand.

voda · 4 Januar 2008

Ich hab die eben erst hochgeladen, Vllt mal auf Browser aktualisieren gehen.

Mein Problem war, dass der Bio-Text überstand und sich nicht angepasst hat. Ich hatte eine Tabelle gemacht damit ich neben den Bild ein Text schreiben konnte. Ich habe es jetzt mit CSS gelöst.

Aber ein Problem besteht noch und zwar, ich habe ganz oben eine gif-Datei eingefügt. Wie bekomme ich das hin das die bei jeder Auflösung zentriert wird und bei der Flashuhr ist bei 1024 x 768 der Balken dick und bei normaler Auflösung halt normal. Wie bekomme ich das hin? Geht leider nicht mit dem DIV-Befehl.

Hier mal der Code fürs Gif-Bild und Flash-Uhr

Code:

<body><div
 id="page"> <div
 style="margin-top: 0px; margin-left: 223px; width: 640px; height: 44px;"
 id="header"><big><a href="index.html"><img
 style="border: 0px solid ; width: 550px; height: 50px;" alt=""
 src="Bilder/Banner1.gif" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></big></div><div
 id="wrapper"> <div id="content"><!-- Flash-Uhr Beginn--><object
 classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
 id="digitaluhr" align="right" height="25"
 width="85"><param name="movie"
 value="http://www.e-reveal.de/uhr/digitaluhr.swf" /> <param
 name="menu" value="false" /> <param name="quality"
 value="high" /> <param name="bgcolor"
 value="#51AAFF" /> <param name="wmode"
 value="transparent" /><embed
 src="http://www.e-reveal.de/uhr/digitaluhr.swf" menu="false"
 quality="high" bgcolor="#D0E7f4" name="digitaluhr"
 type="application/x-shockwave-flash"
 pluginspage="http://www.macromedia.com/go/getflashplayer"
 align="" height="25" width="75"></object><!-- Flash-Uhr Ende--><div
 id="path"> Du bist hier:
Home
&nbsp;

[...]

</div>

THX im Voraus!!:razz:

acidmat · 4 Januar 2008

hast dust mit

Code:

<div id="page" align="center">

scho probiert, die ID´s und klassen sollten das natürlich nicht überschreiben.

Das mit dem Balken liegt an den ganzen $nbsp; die du drinnen hast, nach Home

EDIT : meine auflösung 1920 x 1200 am Laptop
die flashuhr ist trotzdem ganz rechts, falls die $nbsp; ( Leerzeichen ) dafür da sein sollten sie rüberzuschieben. und die reichen nur ca. bis in die mitte

voda · 4 Januar 2008

Wo meinst Du? Bei dem gif-Bild oder Flash-Uhr?

Stelle ich bei der Flash-Uhr den Parameter auf center stelle

etwa so:

Code:

id="digitaluhr" align="center" height="25"
width="85"><param name="movie"

Dann sieht das so aus:

Die Uhr sollte aber möglichst rechts bleiben, bleibt sie auch, nur der Balken wird bei falscher Auflösung dick.

Bei der gif-Datei tut sich gar nix wenn ich den Code so umändere:

Code:

</head>
<body><div id="page" aglin="Center"><div
 style="margin-top: 0px; margin-left: 223px; width: 640px; height: 44px;"
 id="header"><big><a href="index.html"><img
 style="border: 0px solid ; width: 550px; height: 50px;" alt=""
 src="Bilder/Banner1.gif" /></a><br />

Ich weiss ich weiss, Fragen über Fragen :roll:

acidmat · 5 Januar 2008

dachte letzteres, also bei der gif.
hast du ein CSS hinterlegt mit #page, würd mit mal den code ansehen.

Das mit der Uhr und mit deam Balken ist das was ich gesagt habe mit den vielen $nbsp;

voda · 5 Januar 2008

acidmat schrieb:
dachte letzteres, also bei der gif.
hast du ein CSS hinterlegt mit #page, würd mit mal den code ansehen.

Hier der Code:

Code:

#page { 
    width: 70%; 
    text-align: left;  
    margin-left: auto; 
    margin-right: auto;  
}

Das mit der Uhr und mit deam Balken ist das was ich gesagt habe mit den vielen $nbsp;

Sry, überlesen....

acidmat · 5 Januar 2008

hmm, wieso margin-left/right: auto; ?

glaub hier liegt der hund

Code:

<div
 style="margin-top: 0px; margin-left: 223px; width: 640px; height: 44px;"
 id="header">

margin: 0px; würd ich setzen, ist warsch auf eine feste pixelbreite berechnet ( 996 px ? )

dann müsste das mit center wieder klappen

voda · 5 Januar 2008

margin: 0px; würd ich setzen, ist warsch auf eine feste pixelbreite berechnet ( 996 px ? )

dann müsste das mit center wieder klappen

996 px? Ich stehe grad mal aufn Schlauch? Wieso 996 px?

Das Bild ist ja das hier

Code:

<img
 style="border: 0px solid ; width: 550px; height: 50px;" alt=""
 src="Bilder/Banner1.gif" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></big></div><div
 id="wrapper"> <div id="content">

Oder verstehe ich da was nicht?

EDIT : meine auflösung 1920 x 1200 am Laptop
die flashuhr ist trotzdem ganz rechts, falls die $nbsp; ( Leerzeichen ) dafür da sein sollten sie rüberzuschieben. und die reichen nur ca. bis in die mitte

Korrigiert.

Automatische Webseitenanpassung im Browser

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied