größe festlegen..
manu
- css
Hallo,
kann mir jemand sagen wie ich eine bestimmte größe für mein css-design festlege?
in der mitte ist es schon, nun möchte ich aber das es nicht so groß ist und sich nicht in alle richtungen zieht!
hier der quelltext.ich arbeite mit einem wysiswg-editor.
wäre über hilfe dankbar!
Manu
<HTML><HEAD><TITLE>Test-2</TITLE><BASE href=http://service.innter.net/tmp/we/home721/>
<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY text=#000000 bgColor=#ffffff>
<STYLE type=text/css media=screen>HTML {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}
BODY {PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #564b47; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, SunSans-Regular, Sans-Serif; BACKGROUND-COLOR: #e1ddd9}P {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 10px}H2 {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 10px}PRE {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 10px}H1 {PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-SIZE: 11px; PADDING-BOTTOM: 5px; MARGIN: 0px; TEXT-TRANSFORM: uppercase; COLOR: #564b47; PADDING-TOP: 5px; BACKGROUND-COLOR: #00004d; TEXT-ALIGN: right}H2 {FONT-SIZE: 14px; TEXT-TRANSFORM: uppercase; COLOR: #564b47; PADDING-TOP: 10px; BACKGROUND-COLOR: transparent}A {FONT-SIZE: 11px; COLOR: #ff66cc; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none}PRE {FONT-SIZE: 11px; COLOR: #564b47; FONT-FAMILY: Courier, Monaco, Monospace; BACKGROUND-COLOR: transparent}#inhalt {BORDER-RIGHT: #00004d 1px solid; BORDER-TOP: #00004d 1px solid; BORDER-LEFT: #00004d 1px solid; BORDER-BOTTOM: #00004d 1px solid; BACKGROUND-COLOR: #fff}#inhalt #navi {
FLOAT: right; MARGIN: 0px 0px 20px 20px; BORDER-LEFT: #000 1px dotted; WIDTH: 250px; BORDER-BOTTOM: #000 1px dotted; BACKGROUND-COLOR: #d2e0ff}</STYLE><P align=right><BR></P>
<H1><FONT color=#ffffff>Homepage online seit: 5 juli 2004</FONT></H1>
<DIV id=inhalt>
<DIV id=navi style="WIDTH: 94px; HEIGHT: 109px">
<H2>
<STYLE type=text/css>A:link {
FONT-WEIGHT: bold; COLOR: #0000e0; TEXT-DECORATION: none
}
A:visited {
FONT-WEIGHT: bold; COLOR: #000080; TEXT-DECORATION: none
}
A:hover {
FONT-WEIGHT: bold; COLOR: #e00000; TEXT-DECORATION: none
}
A:active {
FONT-WEIGHT: bold; COLOR: #e00000; TEXT-DECORATION: underline
}
A:unknown {
FONT-WEIGHT: bold; COLOR: #00e000; TEXT-DECORATION: underline
}
</STYLE>
<A href="http://www.yahoo.de/"><FONT face=Tahoma size=1>index</FONT></A><BR><A href="http://www.google.de/"><FONT face=Tahoma size=1>sonstiges</FONT></A><BR><A href="http://web.de/"><FONT face=Tahoma size=1>Steckbrief</FONT></A><BR><A href="http://www.multimeta.de/"><FONT face=Tahoma size=1>über mich</FONT></A><FONT face=Tahoma size=1> <BR></FONT><A href="http://www.multimeta.de/"><FONT face=Tahoma size=1>Wassermann</FONT></A><FONT face=Tahoma size=1> <BR></FONT><A href="http://www.multimeta.de/"><FONT face=Tahoma size=1>eMail</FONT></A><FONT face=Tahoma size=1> <BR></FONT><A href="http://www.multimeta.de/"><FONT face=Tahoma size=1>Gästebuch</FONT></A><FONT face=Tahoma size=1> </FONT></H2></DIV>
<H2> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR></H2><BR></DIV></BODY></HTML>
Hi,
kann mir jemand sagen wie ich eine bestimmte größe für mein css-design festlege?
Ganz einfach über die CSS-Eigenschaft "width". Du kannst wie bei allen Maßangaben die Einheiten px, em oder % angeben...
ich arbeite mit einem wysiswg-editor.
Das sieht man, der Code ist ziemlich aufgebläht und von ziemlich schlechter Qualität. Für mich als Codepurist eine absolute Katastrophe. Wenn Du schon mit CSS arbeitest, warum dann nicht durchgehend, bzw. konsequent? Als "CSS"-Design würde ich die aktuelle "Code-Suppe" jedenfalls nicht bezeichnen! ;) An Deiner stelle würde ich schnell den Editor wechseln.
Details zum Quellcode:
Ein Doctype fehlt.
Die Tags sind groß geschrieben (korrekt und zukunftssicher: durchgehend Kleinschreibung). Außerdem fehlen die Anführungszeichen um die Attribute herum teilweise.
<BASE href=http://service.innter.net/tmp/we/home721/>
Das abschließende / im Tag ist XHTML-Syntax, der übrige Code validiert jedoch nicht nach XHTML.
<BODY text=#000000 bgColor=#ffffff>
<P align=right>
Alle oben angegebenen Attribute gehören durch CSS ersetzt.
<P align=right><BR></P>
Leere Absätze ergeben keinen Sinn. Leerraum erzeugt man durch margin, bzw. padding.
<FONT color=#ffffff>
Tag ist veraltet, durch CSS (z.B. span-Tag mit CSS-font-Eigenschaften) ersetzen.
<DIV id=navi style="WIDTH: 94px; HEIGHT: 109px">
Warum hier Inline-CSS? Besser auch in den Style-Breich auslagern.
<H2>
<STYLE type=text/css>A:link {
etc.
Was soll das denn? Warum in Stylebreich innerhalb eines Tags ???
<H2> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR></H2><BR></DIV></BODY></HTML>
Das ist ebenfalls schwachsinnig.
freundlichen Gruß
Danny
das der quelltext so schlecht ist, dafür kann ich nichts! ich bin kein profi und habe keine ahnung wo ich width einsetzten soll.
MFG!
Manu
Du bist gut. Und wie glaubst Du, sollen wir Dir dann helfen? ;)
Welchen Editor benutzt Du denn?
Da Du mit Ebenen arbeitest, mußt Du eigentlich nur die Eigenschaften der äußeren Ebene bearbeiten (im Zweifelsfall einfach eine umspannende Ebene drumsetzen). Im Editor muß es irgendwo auch ein Feld für die Breite geben... Wie bist Du denn bisher damit zurechtgekommen, ist es Dein erstes Projekt?
freundlichen Gruß
Danny
hallo danny,
meinen editor kann ich nicht wechseln. den habe ich automatisch bei meinem anbieter. ich kann die daten per ftp hochladen aber ich kann kaum eine seite ohne einen editor erstellen. es fällt mir schon so schwer genung.
und die ausdrucke die du obene benutzen hast: ich verstehe kein wort :)
nein, im editor gibt es kein feld wo ich die größe umändern kann.
Gruß!
Manu
Hi,
dann hast Du ein echtes Problem.
nein, im editor gibt es kein feld wo ich die größe umändern kann.
Und wie erstellt man damit Webseiten, wenn schon solche grundlegenden Dinge nicht möglich sind?
Klickst Du Dir einfach aus Vorlagen was zusammen?
Ist jetzt nicht negativ von mir gemeint, nur eine Frage. Bei welchem Anbieter bist Du denn? Ich habe mal sowas bei Puretec und 1und1 gesehen.
ich kann die daten per ftp hochladen aber ich kann kaum eine seite ohne einen editor erstellen.
Okay, kein Problem. Mach Dir bloß keinen Streß, das wird schon! Also, wenn FTP möglich ist, dann ist das schon mal ein Anfang und eine Grundlage für andere (auch einfache) Editoren.
Kennst Du den Mozilla-Browser? Der hat auch ein WYSIWYG-Modul, mit dem Du arbeiten kannst. Dann gibt es an einfachen Programmen noch Frontpage, Netobjects, usw.. also schon einige, die auch für Einsteiger gedacht sind und mit denen Du Dein Problem lösen kannst.
freundlichen Gruß
Danny
bin bei innter.net
also die css vorlage habe ich von einer hp die soetwas anbietet. dort kann man sich auch einfach den code kopieren...farben habe ich dann schon selsbt umgeändert :)
kann ich denn die größe nicht ändern? ich meine, jetzt in meinem Qeulltext?
nein, FTP ist mir zu aufwendig! ich baue an einer kleinen seite und ich möchte mir deswegen keinen aufwand machen sondern einfach nur die größe anpassen.
grüße!
manu
bin bei innter.net
Okay, habe das gerade gecheckt.
Dort gibts den "Innter.Generator" sowie "Innter.HTML". Ich tippe bei Dir mal auf den ersten.
also die css vorlage habe ich von einer hp die soetwas anbietet. dort kann man sich auch einfach den code kopieren...farben habe ich dann schon selsbt umgeändert :)
Gut. Kannst Du auch direkt den HTML-Quelltext verändern? Ich meine jetzt nicht vom Wissen her sondern nur von der Möglichkeit.
kann ich denn die größe nicht ändern? ich meine, jetzt in meinem Qeulltext?
Doch, das ist auch gar nicht so schwer, Beispiel zeige ich Dir gleich.
nein, FTP ist mir zu aufwendig!
Naja, wenn Du's ein paar Mal benutzt hast, ist es eigentlich nicht viel aufwändiger als E-Mail. Verbindung herstellen, Dateien auswählen, hochladen, fertig.
hallo,
ja, natürlich kann ich den quelltext ändern. also ich habe da eine schaltfläche...wenn ich drauf klicke sehe ich den ganzen quelltext und kann ihn dann verändern. und wenn ich dann wieder draufklicke sehe ich die veränderung.
ja, Innter.Generator.
habe eben nochmal nachgeschaut,
innter.generator ist etwas anderes...da bekommt man eine vorlage die man nur mit inhalten ausfüllen braucht.
ich habe den innter.html editor.
Hi,
ich habe den innter.html editor.
Prima, genau das was wir brachen.
Also, Du sucht die Zeile:
<DIV id=inhalt>
und änderst Sie wie folgt ab:
<DIV id=inhalt style="width:500px">
wobei 500 die Breite in Pixeln ist.
Wie siehts dann aus, besser?
ohhhh...eigentlich habe ich heute schon aufgehört an wunder zu glauben aber es funktioniert!!
da gibt es aber noch zwei kleine probleme...die leiste oben (mit der überschrift: homepage online seite 5.juli 2004) ist jetzt etwas größer...verständlich. ich habe schon versucht sie auch umzuändern aber es funkt. nicht.
dann sind die buchstaben fett und alle groß, das kommt wohl von dem qeulltext den ich kopiert habe. Wenn du mir den html code dafür verräts, wäre nett...dann könnte ich es vielleicht entfernen.
gruß und danke für die hilfe!!
ohhhh...eigentlich habe ich heute schon aufgehört an wunder zu glauben aber es funktioniert!!
Wunderbar, freut mich!
Nenne doch mal den Link zur Webseite, damit man sich ein aktuelles Bild machen kann.
freundlichen Gruß
Danny
kann ich leider nicht! tut mir leid...es ist eine private seite.
Schade.
So. Habe mir Deinen Code nochmal angesehen und weiß jetzt, warum der Balken mit der Überschrift sich nicht angepaßt.
Diese Zeile:
<H1><FONT color=#ffffff>Homepage online seit: 5 juli 2004</FONT></H1>
mußt einfach nur hinter diese Zeile gesetzt werden
<DIV id=inhalt style="width:500px">
d.h.
<DIV id=inhalt style="width:500px">
<H1><FONT color=#ffffff>Homepage online seit: 5 juli 2004</FONT></H1>
damit sie die Breite auch darauf auswirkt...
Schönen Abend noch!
Danny
hallo danny!
dieses problem habe ich gelöst aber da kommt gleich das nächste...ich werde langsam verrückt!
die zeilenabstände sind ziemlich größ! das sieht fürchterlich aus...habe schon alles versucht. es will einfach nicht...
dir auch einen schönen abend!!
Ps. danke für die hilfe!!
Mahlzeit!
Welche Zeilenabstände meinst Du genau, hast Du noch was anderes geändert oder hat das nichts damit zu tun, bzw. was schon vorher so?
Falls Du vorhast, noch mehr am Layout zu ändern, dann sollte der Code vorher mal aufgeräumt werden. Im Moment ist das alles ja ziemlich chaotisch und unübersichtlich. Verständlich, dass man davon verrückt werden kann... ;)
MfG
Danny
Hallo danny,
nein, ich habe nicht vor das layout nochmal umzuändern! das reicht mir soweit...und es hat mit deinen tipps sehr prima geklappt. alles sieht so aus wie ich es haben wollte :)
also die abstände sind ziemlich groß...am code habe ich nichts verändert, ich denke das kommt vom layout-qeullcode. das war schon so...
und zwar habe ich da in die mitte eine kleine tabelle eingefügt und nun wollte ich da paar daten reinschreiben. die zeilenabstände sind zu groß und es sieht nach nichts aus. es liegt aber nicht an der tabelle, vorher war es auch schon.
das kommt glaube ich davon das die buchstaben bei "homepage online seit...." ebenfalls groß und fett sind.
viele grüße!
Hallo,
nein, ich habe nicht vor das layout nochmal umzuändern! das reicht mir soweit...und es hat mit deinen tipps sehr prima geklappt. alles sieht so aus wie ich es haben wollte :)
stellt sich jetzt die Frage, ob das jeder Browser genauso sieht ;-)
HI,
ich hoffe doch!
ich nutze AOL und T-online. sieht überall gleich aus.
Grüße!
Manu
Hallo,
ich hoffe doch!
ich nutze AOL und T-online. sieht überall gleich aus.
na was denn nun? ;)
in einer Zeile steht -> hoffe ich doch
eine Zeile tiefer -> sieht überall gleich aus
hast du denn deine Seite mit
Netscape ab 4
Internet Explorer ab 4
Mozilla
Firefox
Opera ab 5
Konqueror
etc. getestet?
und dort sieht die Seite überall genauso aus?!
Kompliment ^^
Hi Manu,
die Punkte die Du augezählt hast, sollten sich selbst mit Grundkenntnissen in HTML und CSS lösen lassen, wenn man sich ein paar Stunden zeit und z.B. SelfHTML oder einen erfahrenen Bekannten zu Hilfe nimmt.
Ich kann Dich verstehen aber wenn Dein Editor nicht die Möglichkeit bietet, die gewünschten Änderungen im WYSIWYG-Modus durchzuführen, wirst Du nicht um das Erlernen von HTML und CSS herumkommen.
Wenn Du Dir das nicht vorstellen kannst, mußt Du mit den Schattenseiten von "copy & paste" leben und irgendwelche negativen Layout-Effekte akzeptieren.
Ohne die Zusammenhänge zu kennen, kannst Du kaum etwas selbst anpassen und mußt die Schwachpunkte der Vorlagen akzeptieren.
Webseiten basteln ist eben nicht trivial, auch wenn das viele glauben... Selbst mit einem WYSIWYG-Editor nicht, wenn ganz bestimmte Dinge umgesetzt werden sollen.
Hier eine aufgeräumte, für Menschen leichter verständliche (komplett neu formatierte) Version Deines ursprünglich geposteten Quellcodes inkl. einiger Modifikationen. Dafür habe ich eben gerade mal eine halbe Stunde gebraucht...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href="http://service.innter.net/tmp/we/home721/">
<style type="text/css" media="screen">
body {
margin: 0px;
padding: 20px;
font-family: verdana, arial, sunsans-regular, sans-serif;
font-size: 12px;
line-height: 1.5em;
text-align: center;
color: #564b47;
background-color: #e1ddd9;
}
h1 {
margin: 0px;
padding: 5px 15px 5px 15px;
font-size: 11px;
text-align: right;
color: #564b47;
background-color: #00004d;
}
h2 {
margin: 0px;
padding: 10px;
font-size: 14px;
color: #564b47;
}
p {
margin: 0px;
padding: 10px;
}
a {
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
a:link { color: #000080; }
a:visited { color: #0000e0; }
a:hover { color: #e00000; }
a:active { color: #e00000; text-decoration: underline; }
a:unknown { color: #00e000; text-decoration: underline; }
pre {
margin: 0px;
padding: 10px;
font-family: courier, monaco, monospace;
font-size: 11px;
color: #564b47;
}
#kopf h1 {
color: #fff;
}
#container {
width: 500px;
margin-left: auto;
margin-right: auto;
border: #00004d 1px solid;
text-align: left;
background-color: #fff;
}
#navi {
width: 110px;
margin: 0px 0px 20px 20px;
border-bottom: #000 1px dotted;
border-left: #000 1px dotted;
float: right;
background-color: #d2e0ff;
}
#navi ul {
list-style-type: none;
margin: 0px;
padding: 10px;
}
#inhalt {
padding: 20px;
min-height: 10em;
}
</style>
</head>
<body>
<div id="container">
<div id="kopf">
<h1>Homepage online seit: 5. Juli 2004</h1>
</div>
<div id="navi">
<ul>
<li><a href="#">Index</a></li>
<li><a href="#">Sonstiges</a></li>
<li><a href="#">Steckbrief</a></li>
<li><a href="#">Über mich</a></li>
<li><a href="#">Wassermann</a></li>
<li><a href="#">Email</a></li>
<li><a href="#">Gästebuch</a></li>
</ul>
</div>
<div id="inhalt">
<p>
Hier kommt der Inhalt rein...
</p>
</div>
</div>
</body>
</html>
Hallo,
ich hoffe doch, du hast mittlerweile ihre Internet-Adresse gemailt bekommen. Sonst: Respekt für deine Geduld, und noch viel Glück beim weiterrätseln ;)
mfg NAG
Hallo,
ich hoffe doch, du hast mittlerweile ihre Internet-Adresse gemailt bekommen. Sonst: Respekt für deine Geduld, und noch viel Glück beim weiterrätseln ;)
bei den Code hätte ich schon genervt aufgegeben
ich wünsch dir auch noch viel Glück bei den Code ^^
Danke für Eurer Mitgefühl.
Hallo,
kann ich leider nicht! tut mir leid...es ist eine private seite.
trotzdem kannst du doch den Link posten...
was spricht dagegen?
Tach,
<BASE href=http://service.innter.net/tmp/we/home721/>
Das abschließende / im Tag ist XHTML-Syntax, der übrige Code validiert jedoch nicht nach XHTML.
das abschließende / zeigt hier an, dass es sich hier um ein Verzeichnis handelt.
mfg
Woodfighter
Hast Recht, vielen Dank für den Hinweis!
Manchmal sieht man den Wald vor lauter Bäumen nicht mehr...