CSS Editoren und generell ;-)

[/dev/NULL]

Mal ne Frage: Benutzt ihr nen CSS Editor, wenn ja welchen? Ich hab es bisher mit Selfhtml, css4you und Textpad gemacht, probiere grade Rapid CSS und das ist schon angenehm.. allerdings nach 30 Tagen kostenpflichtig.. wie macht ihr das? Welche Tolls sind frei/gut, welche eher schlecht?

Was mir an Rapid CSS gefällt:
- CSS-Reference
- Autocomplete
- Anzeige was in welchen Browsern Probleme macht
- eingebautes html tidy

Dazu noch ein paar Allgemeine Fragen (bin kein Webdesigner, sondern mach das mehr aus Spaß.. oder Zwang):

Wie würdet ihr designen?
Alle Blöcke in Divs packen und dem dann im CSS eigenschaften geben?
Tabellen nutzen?
Optimieren auf Browser oder auf valides (X)Html?

Ich hab da z.B. folgendes:


---------------------------------------------------
|Überschrift auf Untergrund | Titel |
| | |
| | |
| | |
------------------------------------| |
|Andere Überschrift auf untergrund | |
| ---------------
| |andereTitel |
| | |
| | |
| | |
| ---------------
| |
|-----------------------------------


Mach ich das mit Tabellen (geht ja aber nicht ohne weiteres da die Blöcke auf der rechten Seite unterschiedlich hoch sind) oder mach ich mir da dann einfach textblock-divs die aud nem Header Teil bestehen (für Untergrund) und Text (das drunter?). Dann könnte ich ja bei Bedarf relativ einfach neue Blöck einbauen.

Ich werd meine Seite erstmal so bauen das sie Valides XHTML und CSS enthält und dann schauen, wie sie mit den (anderen) Browsern ausschaut..

[Marscel]

Ich nutze gar keine CSS-Editoren, die Dateien schreibe ich in irgendnem Text-Editor.

Wenn ich nicht irgendwelche Javascript-Layer-Spielereien einbaue, verzichte ich gerne auf <div>s und erstelle Tabellen, die sich mit den richtigen Kniffen ebenfalls recht frei (nagut nicht über und untereinander, jedenfalls ist mir nichts derartiges bekannt) schieben lassen. Und ich schreibe lieber auf XHTML-Validierung als für irgendwelche Browser.

Was dein Problem angeht, das kannst du natürlich mit Tabelle lösen.

Du erstellst eine Tabelle mit zwei unterschiedlich breiten Spalten. In jede der beiden Spalten kommt eine Tabelle, die du wiederum unabhängig voneinander zuschneiden kannst.

[/dev/NULL]

Naja und ich hab gelernt Tabellen sind für Tabellerische Daten und div mit css fürs Design.. ich will ja nicht unbedingt mit Tabellen designen (zumal die Linien oben auch noch schicke gepunktete Rahmen sein sollen..).

Jetzt verzweifel ich grade an diesen Scheiss schatten und 1 Pixel Linien.. ich hasse Webdesigner :-)

[Gast]

Der CSS-Editor schlechthin ist Topstyle. Es gibt davon eine kostenlose Light-Version: http://www.bradsoft.com/download/index.asp

[Marscel]

Naja und ich hab gelernt Tabellen sind für Tabellerische Daten und div mit css fürs Design.. ich will ja nicht unbedingt mit Tabellen designen (zumal die Linien oben auch noch schicke gepunktete Rahmen sein sollen..).

Jetzt verzweifel ich grade an diesen Scheiss schatten und 1 Pixel Linien.. ich hasse Webdesigner :-)

Du kannst Borders schon recht fix weg hauen bzw. ändern (CSS):

border:1px dotted blue ;

[/dev/NULL]

Soweit bin ich auch schon.. aber z.B. zwischen den Textboxen (siehe oben) sind es border:dashed lightgray 1px; die wiederrum in der drüberliegenden Navigation Pixelgenau übergehen sollen..

Und untern ist nen Footer mit oben und unten je einem 2 farbigen Border -> 1px schwarz, 1 px blau hab das dann jetzt mit div in div und jedes hat halt nen border-top und border-bottom mit je 1 px in andere Farbe..

naja ich werd mal weitermachen und bei Zeiten nochmal fragen ;-)

[Gohan]

Ich arbeite ebenfalls mit Text-Editor, bin gerade erst vom Tabellen layout zum Box-Modell geswitched, sehr angenehm.

[PuppetMaster]

Wenn ich nicht irgendwelche Javascript-Layer-Spielereien einbaue, verzichte ich gerne auf <div>s und erstelle Tabellen, die sich mit den richtigen Kniffen ebenfalls recht frei (nagut nicht über und untereinander, jedenfalls ist mir nichts derartiges bekannt) schieben lassen. Und ich schreibe lieber auf XHTML-Validierung als für irgendwelche Browser.
Sry, aber XHTML und Tabellenlayout widerspricht sich. Okay, der Validator zeigt keine Fehler an. Aber das Konzept von XHTML ist definitiv, den Inhalt komplett von der Gestaltung zu trennen, und das ist mit Tabellenlayout nicht möglich.
Tabellenwebsites mit XHTML-Doctype sind daher in etwa so wie ein VW Golf mit Porscheaufkleber vorne drauf. ;)

[Marscel]

Mich stört bei <div> Elementen, dass wenn man die Größe fest angibt, die Schrift aber vergrößert und über den Bereich hinausgehen lässt, sich der Abschnit - im Gegensatz zu einer Tabelle - nicht anpasst.

Wenn du mir einen CSS-Tag nennst, wie man das umgehen kann, bin ich bereit, darüber nachzudenken. ;)

[Gast]

Gib die Größe von Schrift und Div in relativen Einheiten an. Da gibts einige, das gebräuchlichste ist aber die Einheit 'em'. Wenn du ein Div 2em hoch machst ist es so hoch wie zwei große M's (orientiert sich an der Schriftgröße des Elternelements). Die Größe ändert sich dann, je nachdem wie groß die Schrift des Elternelementes eben ist.

[mictasm]

Ich habe auch immer alles mit Tabellen gemacht. Durch ein kleines Projekt am Arbeitsplatz, bei dem ich mich zu (X)HTML und CSS gezwungen habe, habe ich mich daran gewöhnt und finde es einfach grandios. Die Trennung von Inhalt und Layout ist viel besser zu durchschauen.

Ich benutze auch seit ewigen Zeiten nur verschiedene Texteditoren, momentan Edit+. Den kann ich empfehlen, auch wenn er etwas kostet.

Gruß,

MIC

[tomtom]

Verwende auch nur Texteditoren, hab bisher auch noch nie daran gedacht, einen CSS-Editor zu verwenden. Klingt zwar ganz praktisch, ist für mich aber glaub ich nix!

MfG

[[LOG]Skar]

Also als Editor für die Arbeit, wo man selber nur sagt was man braucht und
nicht bezahlen muss, ist Topstyle schon genial. Hier zu Hause nehme ich
Jedit mit einem css Plugin, da kann man auch einen Farbwähler als Plugin
installieren. Und er hat einen Splitview.

Oder die schnelle kleine variante Scite! Den mag ich auch sehr gerne.

Hier mal meine Config, welche ich auch irgendwoher habe und modifziert habe.

# Global initialisation file for SciTE
# For Linux, place in $prefix/share/scite
# For Windows, place in same directory as SciTE.EXE (or Sc1.EXE)
# Documentation at http://www.scintilla.org/SciTEDoc.html

# Globals

# Window sizes and visibility
if PLAT_WIN
position.left=0
position.top=0
if PLAT_GTK
position.left=5
position.top=22

position.width=576
position.height=740

position.tile=1
#full.screen.hides.menu=1
#minimize.to.tray=1
#split.vertical=1
#output.horizontal.size=200
#output.vertical.size=60
#horizontal.scrollbar=0
#horizontal.scroll.width=10000
#output.horizontal.scrollbar=0
#output.horizontal.scroll.width=10000
#output.scroll=0
#end.at.last.line=0
tabbar.visible=1
tabbar.hide.one=1
tabbar.multiline=1
#toolbar.visible=1
#undo.redo.lazy=1
statusbar.visible=1
#fileselector.width=800
#fileselector.height=600
#magnification=-1
#output.magnification=-1

# Sizes and visibility in edit pane
line.margin.visible=1
line.margin.width=4
margin.width=16
#fold.margin.width=16
#fold.margin.colour=#FF0000
#fold.margin.highlight.colour=#0000FF
blank.margin.left=4
#blank.margin.right=4
buffered.draw=1
#two.phase.draw=0
use.palette=0

# Element styles
#view.eol=1
#control.char.symbol=.
caret.period=500
view.whitespace=1
view.indentation.whitespace=1
view.indentation.guides=1
highlight.indentation.guides=1
caret.fore=#FF0000
caret.width=2
caret.line.back=#FFFED8
calltip.back=#FFF0FE
edge.column=200
edge.mode=0
edge.colour=#C0DCC0
braces.check=1
braces.sloppy=1
selection.fore=#006000
# DADADA used as background because it yields standard silver C0C0C0
# on low colour displays and a reasonable light grey on higher bit depths
selection.back=#DADADA
whitespace.fore=#FF0000
whitespace.back=#FFF0F0
#error.marker.fore=#0000A0
#error.marker.back=#DADAFF
#bookmark.fore=#808000
#bookmark.back=#FFFFA0
#use.monospaced=1

# Checking
are.you.sure=1
#are.you.sure.for.build=1
#quit.on.close.last=1
load.on.activate=1
#save.on.deactivate=1
are.you.sure.on.reload=1
reload.preserves.undo=1
#check.if.already.open=1
default.file.ext=.php
title.full.path=1
title.show.buffers=1
save.recent=1
save.session=1
open.dialog.in.file.directory=1
#strip.trailing.spaces=1
#ensure.final.line.end=1
#ensure.consistent.line.ends=1
#save.deletes.first=1
buffers=50
buffers.zorder.switching=1
#win95.death.delay=1000
#translation.missing=***
#read.only=1

# Indentation
tabsize=4
indent.size=4
use.tabs=0
indent.automatic=1
indent.opening=0
indent.closing=0
#tab.indents=0
#backspace.unindents=0
wrap=1
#cache.layout=3
#output.wrap=1
#output.cache.layout=3

# Folding
# enable folding, and show lines below when collapsed.
fold=1
fold.compact=1
fold.flags=16
fold.symbols=1
#fold.on.open=1

# Find and Replace
#escapes.in.find.replace=1
# findstr is available on recent versions of Windows including 2000
if PLAT_WIN
#find.command=findstr /n /s $(find.what) $(find.files)
find.command=grep --line-number "$(find.what)" $(find.files)
#find.input=$(find.what)
if PLAT_GTK
find.command=grep --line-number "$(find.what)" $(find.files)
find.files=*.c *.cxx *.h
#find.replace.matchcase=1
find.replace.escapes=1
#find.replace.regexp=1
#find.replace.regexp.posix=1
#find.replace.wrap=0
#find.replacewith.focus=0

# Behaviour
eol.mode=LF
#eol.auto=1
clear.before.execute=0
#vc.home.key=1
wrap.aware.home.end.keys=1
autocompleteword.automatic=1
autocomplete.choose.single=0
caret.policy.xslop=1
caret.policy.width=20
caret.policy.xstrict=0
caret.policy.xeven=0
caret.policy.xjumps=0
caret.policy.yslop=1
caret.policy.lines=1
caret.policy.ystrict=1
caret.policy.yeven=1
caret.policy.yjumps=0
#visible.policy.strict=1
#visible.policy.slop=1
#visible.policy.lines=4
#time.commands=1

# Status Bar
statusbar.number=4
statusbar.text.1=\
li=$(LineNumber) co=$(ColumnNumber) $(OverType) ($(EOLMode)) $(FileAttr)
statusbar.text.2=\
$(BufferLength) chars in $(NbOfLines) lines. Sel: $(SelLength) chars.
statusbar.text.3=\
Now is: Date=$(CurrentDate) Time=$(CurrentTime)
statusbar.text.4=\
$(FileNameExt) : $(FileDate) — $(FileTime) | $(FileAttr)

if PLAT_WIN
command.scite.help="file://$(SciteDefaultHome)\SciTEDoc.html"
command.scite.help.subsystem=2
if PLAT_GTK
command.print.*=a2ps $(FileNameExt)
command.scite.help=netscape "file://$(SciteDefaultHome)/SciTEDoc.html"

*command.help.*.php=$(CurrentWord)!$(SciteDefaultHome)\help\php\php_manual_en.ch m*
*command.help.subsystem.*.php=4*

# Internationalisation
# Japanese input code page 932 and ShiftJIS character set 128
#code.page=932
#character.set=128
# Unicode
#code.page=65001
code.page=0
#character.set=204
# Required for Unicode to work on GTK+:
#LC_CTYPE=en_US.UTF-8

# Export
#export.keep.ext=1
export.html.wysiwyg=1
#export.html.tabs=1
#export.html.folding=1
export.html.styleused=1
#export.html.title.fullpath=1
#export.rtf.tabs=1
#export.rtf.font.face=Arial
#export.rtf.font.size=9
#export.rtf.tabsize=8
# Magnification (added to default screen font size)
export.pdf.magnification=0
# Font: Courier, Helvetica or Times (Courier line-wraps)
export.pdf.font=Helvetica
# Page size (in points): width, height
# E.g. Letter 612,792; A4 595,842; maximum 14400,14400
export.pdf.pagesize=595,842
# Margins (in points): left, right, top, bottom
export.pdf.margins=72,72,72,72
export.xml.collapse.spaces=1
export.xml.collapse.lines=1

# Define values for use in the imported properties files
chars.alpha=abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
chars.numeric=0123456789
chars.accented=ŠšŒœŸÿÀàÁáÂâÃãÄäÅåÆæÇçÈèÉéÊêËëÌìÍíÎîÏïÐðÑñÒòÓóÔôÕõÖØøÙùÚúÛûÜüÝýÞþ ßö
# This is a better set for Russian:
#chars.accented=ÀàÁáÂâÃãÄäÅ娸ÆæÇçÈèÉéÊêËëÌìÍíÎîÏïÐðÑñÒòÓóÔôÕõÖö×÷ØøÙùÚúÛûÜüÝýÞþ ßÿ

# The open.filter setting is only used on Windows where the file selector has a menu of filters to apply
# to the types of files seen when opening.
# There is a limit (possibly 256 characters) to the length of a filter,
# so not all source extensions can be in this setting.
source.files=*.asm;*.c;*.cc;*.cpp;*.cxx;*.cs;*.css;*.h;*.hh;*.htm;*.html;*.hxx;* .hpp;\
*.idl;*.odl;*.rc;*.rc2;*.dlg;*.def;\
*.vb;*.vbs;*.bas;*.frm;*.cls;*.ctl;\
*.java;*.js;*.php;*.py;*.pl;*.pm;*.rb;*.cgi;*.lua;*.conf;\
make*;*.mak;\
*.properties;*.xml;*.iface;*.bat;*.e

open.filter=\
All Source|$(source.files)|\
All Files (*.*)|*.*|\
$(filter.ada)\
$(filter.conf)\
$(filter.asm)\
$(filter.ave)\
$(filter.cpp)\
$(filter.css)\
$(filter.eiffel)\
$(filter.erlang)\
$(filter.fortran)\
$(filter.html)\
$(filter.idl)\
$(filter.java)\
$(filter.js)\
$(filter.lout)\
$(filter.lua)\
$(filter.matlab)\
$(filter.metapost)\
$(filter.mmixal)\
$(filter.nncrontab)\
$(filter.nsis)\
$(filter.pascal)\
$(filter.perl)\
$(filter.php)\
$(filter.pov)\
$(filter.properties)\
$(filter.ps)\
$(filter.python)\
$(filter.ruby)\
$(filter.sql)\
$(filter.tcl)\
$(filter.tex)\
$(filter.text)\
$(filter.vb)\
$(filter.web)\
$(filter.yaml)

# Give symbolic names to the set of fonts used in the standard styles.
if PLAT_WIN
font.base=font:Verdana,size:10
font.small=font:Verdana,size:8
font.comment=font:Comic Sans MS,size:9
font.code.comment.box=$(font.comment)
font.code.comment.line=$(font.comment)
font.code.comment.doc=$(font.comment)
font.text=font:Times New Roman,size:11
font.text.comment=font:Verdana,size:9
font.embedded.base=font:Verdana,size:9
font.embedded.comment=font:Comic Sans MS,size:8
font.monospace=font:Courier New,size:10
font.vbs=font:Lucida Sans Unicode,size:10
if PLAT_GTK
font.base=font:lucidatypewriter,size:12
font.small=font:lucidatypewriter,size:10
font.comment=font:new century schoolbook,size:12
font.code.comment.box=$(font.comment)
font.code.comment.line=$(font.comment)
font.code.comment.doc=$(font.comment)
font.text=font:times,size:14
font.text.comment=font:lucidatypewriter,size:10
font.embedded.base=font:lucidatypewriter,size:12
font.embedded.comment=font:lucidatypewriter,size:12
font.monospace=font:courier,size:12
font.vbs=font:new century schoolbook,size:12
font.js=$(font.comment)

# Give symbolic names to the set of colours used in the standard styles.
colour.code.comment.box=fore:#007F00
colour.code.comment.line=fore:#007F00
colour.code.comment.doc=fore:#3F703F
colour.text.comment=fore:#0000FF,back:#D0F0D0
colour.other.comment=fore:#007F00
colour.embedded.comment=back:#E0EEFF
colour.embedded.js=back:#F0F0FF
colour.notused=back:#FF0000

colour.number=fore:#007F7F
colour.keyword=fore:#00007F
colour.string=fore:#7F007F
colour.char=fore:#7F007F
colour.operator=fore:#000000
colour.preproc=fore:#7F7F00
colour.error=fore:#FFFF00,back:#FF0000

# Global default styles for all languages
# Default
style.*.32=$(font.base)
# Line number
style.*.33=back:#C0C0C0,$(font.base)
# Brace highlight
style.*.34=fore:#0000FF,bold
# Brace incomplete highlight
style.*.35=fore:#FF0000,bold
# Control characters
style.*.36=
# Indentation guides
style.*.37=fore:#C0C0C0,back:#FFFFFF

# Printing - only works on Windows
if PLAT_WIN
#print.colour.mode=1
print.magnification=-1
# Setup: left, right, top, bottom margins, in local units:
# hundredths of millimeters or thousandths of inches
print.margins=1500,1000,1000,1500
# Header/footer:
# && = &; &p = current page
# &f = file name; &F = full path
# &d = file date; &D = current date
# &t = file time; &T = full time
print.header.format=$(FileNameExt) — Printed on $(CurrentDate), $(CurrentTime) — Page $(CurrentPage)
print.footer.format=$(FilePath) — File date: $(FileDate) — File time: $(FileTime)
# Header/footer style
print.header.style=font:Arial,size:12,bold
print.footer.style=font:Arial Narrow,size:10,italics

# Warnings - only works on Windows and needs to be pointed at files on machine
#if PLAT_WIN
#warning.findwrapped=100,E:\Windows\Media\SFX\Boing.wav
#warning.notfound=0,Effect.wav
#warning.wrongfile=0,Glass.wav
#warning.executeok=0,Fanfare.wav
#warning.executeko=100,GlassBreak.wav
#warning.nootherbookmark=100,Boing2.wav

# Define the Lexer menu,
# Each item contains three parts: menu string | file extension | key
# The only keys allowed currently are based on F-keys and alphabetic keys and look like
# [Ctrl+][Shift+][Fn|a] such as F12 or Ctrl+Shift+D.
# A '&' may be placed before a letter to be used as an accelerator. This does not work on GTK+.
menu.language=\
Text|txt|Shift+F11|\
Apache Confi&g|conf||\
&Batch|bat||\
&C / C++|c||\
C&#|cs||\
CSS|css||\
&Difference|diff||\
&Errorlist|err||\
H&ypertext|html|F12|\
&Java|java||\
Java&Script|js||\
Lisp|lisp||\
&Makefile|mak|Ctrl+Shift+F11|\
&nnCron crontab|tab||\
Pascal|pas||\
Pe&rl|pl||\
P&HP|php||\
P&LSQL|spec||\
&Properties|properties||\
P&ostScript|ps||\
Pytho&n|py||\
Reso&urce|rc||\
Ruby|rb||\
Shell|sh||\
S&QL|sql||\
&TCL|tcl||\
&VB|vb||\
VBScr&ipt|vbs||\
&XML|xml|Shift+F12|\
&YAML|yaml||

# User defined key commands
user.shortcuts=\
Ctrl+PageUp|IDM_PREVFILE|\
Ctrl+PageDown|IDM_NEXTFILE|
#KeypadPlus|IDM_EXPAND|\
#KeypadMinus|IDM_BLOCK_COMMENT|

# Import all the language specific properties files
import conf
import cpp
import css
import html
import lisp
import nncrontab
import others
import pascal
import perl
import php
import ps
import python
import ruby
import sql
import tcl
import tex
import vb
import yaml

[/dev/NULL]

Nutze jetzt weiterhin erstmal RapidCSS, topstyle Lite hat mich garnicht überzeugt..

mal ne andere Frage:

Ich möchte meine Seite immer zentriert haben und der Mittelteil soll 780 px groß sein.. wie mach ich das?
Ich kann ja nem Div eine Breite geben, aber wie geb ich rechts und Links die gleiche?

[Kinman]

gar nicht, du gibst dem darüberliegenden element (parentelement - div oder body) die CSS Eigenschaft text-align: center

mfg Kinman

[ravage]

Oder:

div.mittelteil{
margin:0 auto;
width:760px;
}

/EDIT: Erster X-D

[Gohan]

Nutze jetzt weiterhin erstmal RapidCSS, topstyle Lite hat mich garnicht überzeugt..

mal ne andere Frage:

Ich möchte meine Seite immer zentriert haben und der Mittelteil soll 780 px groß sein.. wie mach ich das?
Ich kann ja nem Div eine Breite geben, aber wie geb ich rechts und Links die gleiche?

#beispiel {
margin:auto;
width:760px;
}

EDIT: Mist, da war wer schneller!

[/dev/NULL]

Hmm ok.. das werd ich mal testen.. da sieht man ja vor Bäumen den Wald nichtmehr. :-)

[death@nologin]

gar nicht, du gibst dem darüberliegenden element (parentelement - div oder body) die CSS Eigenschaft text-align: center

mfg Kinman
Das funktioniert aber nur in aelteren IEs obs bei IE6 auch noch so ist, k.a.. Bei Mozilla jedenfalls, kommst du damit nicht weit.

[Kinman]

ok thx, ja im IE6 & Opera funktionierts.

mfg Kinman

[/dev/NULL]

Ich recycle einfach mal meinen Thread: jetzt hab ich ganz konkret das Problem, das sich die boxen nicht neben einander anzeigen lassen wollen (siehe erstes Post):

NACHTRAG: geht doch, hatte nur meine Größen verhunzt.. bleibt nur noch das der IE das nicht vernünftig zeigt und mein css file ein heilloses Chaos ist.. ich mach mal weiter stell dann mal nen Link rein und vielleicht findet sich ja ein CSS Optimierer unter euch *g*

Wo ist mein Fehler?

html snip
<!-- Textteil unten -->
<div class="text_body">
<div class="text_container floatleft">
<div class="text_box_container"><span>Computerliebe</span>
<div class="text_box">Sie nahm das Textwerkzeug, platzierte es über dem Rahmen, lies den Finger lasziv auf die Maus tropfen. Herzrasen. Sie will es heute zu Ende bringen. Eine blinkende Linie erscheint. Pulsierend. Takt um Takt. Das musste der Curser sein, das Phallussymbol der schreibenden Zunft. Begierig von ihr etwas zu empfangen. Fordernd. Nicht einmal pausierend. Alsdann. Jetzt war es soweit. Es gab kein Entkommen. Oder? Doch, dachte sie, da war doch der AnyKey, den sie vor kurzem noch verzweifelt suchte und endlich triumphierend am Gehäuse ihres Rechners fand. Fett, rund, ein echter Buddha unter den Knöpfen, mit magischer Wirkung.
Vielleicht besuche ich Dich morgen wieder, warte auf mich.Ich traue mich.Irgendwann.Vertraue Du mir.
Deine ergebene Tastatur-Sklavin</div>
</div>
<div class="text_box_container"><span>Liebeslettern</span>
<div class="text_box">Wie beiläufig, beim Umblättern der Buchseiten, habe ich Dein B berührt. Man hatte Dich mir als Type geschildert, der man in allen Bibliotheken begegnet: sehr belesen, doch eher unscheinbar, von etwas altmodelnder Art. Mir aber gefiel Deine Anmutung, kleine Antiqua. Nicht zu verschweigen Deine weiblichen Rundungen, Deine Os und Dein verlockendes V, das sich mit deutlichem Duktus durch das feine Dünndruckpapier wie in seidenen Dessous abdrückte. Mein Puls beschleunigte seine Frequenz. Wieder wollte ich Dich berühren. Und konnte kaum den Windstoss erwarten, der meine Textseite zu Dir zurückblies. Was nur sollte ich sagen, während Du mich mit Deinen ausdrucksvollen As ansahst? Vielleicht zunächst ein sachliches Gespräch über die Vorzüge der Links- oder Rechtsbündigkeit mit Dir beginnen. Ganz unauffällig konnte ich so Deine schlanken Ober- und Unterlängen studieren und den Anblick Deiner zierlichen Füsschen und Serifen geniessen. Nach einer gewissen Laufweite fasste ich mir ein Herz, Dich zu einem Zwiebelfisch-Imbiss einzuladen. Wir schlürften alten Linotype-Wein aus schlanken Versalien. Und unsere Gefühle wurden tiefer, unsere Haltung kursiver. "Ach, ich wünsche mir", hauchtest Du, "einen süssen, kleinen Schusterjungen von Dir." "Hoffentlich", dachte ich, "wird es kein Hurenkind!"</div>
</div>
</div>

<!-- Rechte Seite -->

<div class="text_container floatr">
<div class="text_box_container1"><span>Computerliebe</span>
<div class="text_box">Sie nahm das Textwerkzeug, platzierte es über dem Rahmen, lies den Finger lasziv auf die Maus tropfen.
Vielleicht besuche ich Dich morgen wieder, warte auf mich.Ich traue mich.Irgendwann.Vertraue Du mir.
Deine ergebene Tastatur-Sklavin</div>
</div>
<div class="text_box_container1"><span>Liebeslettern</span>
<div class="text_box">Wir schlürften alten Linotype-Wein aus schlanken Versalien. Und unsere Gefühle wurden tiefer, unsere Haltung kursiver. "Ach, ich wünsche mir", hauchtest Du, "einen süssen, kleinen Schusterjungen von Dir." "Hoffentlich", dachte ich, "wird es kein Hurenkind!"</div>
</div>
</div>

<!-- remove float attribute -->

<div class="clear"></div>
</div>


CSS

div.text_body{
background:white;
color:black;
border: solid blue 3px;
}

div.text_container{
padding:0;
margin:0;
border: solid yellow 2px;
}

div.text_box_container{
width: 477px;
padding:0;
margin:0;
border-right: dashed #b9bab9 2px;
}

div.text_box_container span{
display:block;
color: white;
background: #42566E;
padding-left: 22px;
height:18px;
margin:0;
}
div.text_box{
padding: 10px 22px 18px 22px;
margin:0;
}
div.text_box_container1{
border: solid green 2px;
padding:0;
margin:0;
}
div.text_box_container1 span{
display:block;
color: white;
background: #4D4DB2;
padding-left:18px;
height:18px;
margin:0;
}


Ich hab also einen container text_body, in dem ist alles drinnen, dadrinnen sind zwei text_container die mal links mal rechts floaten und halt je eine Spalte repräsentieren sollen,
Die enthalten dann je zwei text_box_container wo text-überschrift mittels span und text in einer textbox exitsiteren.

Aber die scheiss dinger sind drunter statt daneben.. warum?

Rahmen sind nur zur verdeutlichung und der IE scheint da einige Container in Containern nicht zu erkennen.. scheiss Ding!

Außerdem glaube ich ist das ganze Ding zu kompliziert, mag jemand tips geben?

[ravage]

Uhm...
Bist du dir sicher, dass du so ein float:left; hin bekommst:
<div class="text_container floatleft">

Solltest du nicht lieber
<div class="text_container" style="float:left;">
nehmen?
---------------------------------------------------
Das gleiche bei:
<div class="text_container floatr">
Daraus machen wir:
<div class="text_container" style="float:right;">
---------------------------------------------------
Dann sollte das:
<div class="clear"></div>
Doch sicher so:
<div style="clear:both;"></div>
heissen, oder?
---------------------------------------------------
Und zu guter letzt hat das:
div.text_box_container1{
border: solid green 2px;
padding:0;
margin:0;
}
keine feste Breite und passt somit nicht neben die anderen Boxen.

[/dev/NULL]

Uhm...
Bist du dir sicher, dass du so ein float:left; hin bekommst:
<div class="text_container floatleft">

Solltest du nicht lieber
<div class="text_container" style="float:left;">
nehmen?
---------------------------------------------------
Das gleiche bei:
<div class="text_container floatr">
Daraus machen wir:
<div class="text_container" style="float:right;">
---------------------------------------------------

floatleft und floatr (jaja namens inkonsitenz) sind im css file als
.floatr { float:right;} definiert.

Deshalb das stimmt schon so.. man kann elementen 2 classen geben (bis auf beim IE 5 und Netscape4 aber da scheiss ich drauf *sorry* über deinen Weg hätte ich ja wieder style elemente in der HTMl was ich nicht will..


Dann sollte das:
<div class="clear"></div>
Doch sicher so:
<div style="clear:both;"></div>
heissen, oder?

s.o. meine css die ich gepostet hab war wohl nicht ganz vollständig auch hier clear ist mit clear:both; in der css.


Und zu guter letzt hat das:
div.text_box_container1{
border: solid green 2px;
padding:0;
margin:0;
}
keine feste Breite und passt somit nicht neben die anderen Boxen.
Jep Du hattest recht, hab das auch mit dem 'Nachtrag' gemeint jetzt geht es der Quelltext oben ist allerdings jetzt out of date.

Also hier mal meine Page, wie sie jetzt ist.. Textgrößen und Navigation sind noch Baustellen, von dem Pixelgenauen Design dem ich folgen sollte geht nur etwa die Hälfte Rahmen die ich definiert habe gehen mal, mal gehen sie nur teilweise mal garnicht. Und warum der IE bei dem Angebotsbild unten ein paar Pixel (etwa 20) abschneidet ist mir auch schleierhaft.. links gehen auch noch nicht, aber wer schauen will..

http://rootsvr.de/neueSite

[ravage]

Mh ok, wenn ich nur den halben Quelltext hab, ist die Fehlersuche etwas schwer ;)

Sieht aber, bis auf die Navi, schon recht gut aus.

[/dev/NULL]

Jep.. sorry.. hatte das oben nicht realisiert das welche fehlen.

Navi ist wie gesagt noch Baustelle und wird erst in nächster Zeit geändert.
Dieses IE schneidet Bild ab Feature nervt, ich mein sonst ist mal nen Rahmen verschoben, das geht schon aber so.. das schaut unprofessionell aus.

[ravage]

Mh du hast im Angebot Container das Angebot auf float:left und das Serverbild auf float:right und darunter kein clear:both

/EDIT: das scheint aber nichts zu ändern...

/EDIT2: Wenn du im div.angebot die Höhe auf 100% stellst (width:100%) ist der balken unten wenigstens weg, aber bei meiner Testpage hier verschiebt sich die Schrift im Firefox auch nach unten...

/Noch ein Edit: Dein Text im div.angebot scheint im Firefox generell nicht in die 110px hohe Box zu passen. Ich glaub FF und IE stellen deine Überschrift <h1> nicht gleich dar. Vielleicht solltest du die mit CSS klar definieren.

[Gast]

Kleiner Tipp: Unterstriche (_) haben im CSS nichts zu suchen. Könnte Probleme mit manchen Browser geben und sind in der Spezifikation von CSS ausdrücklich als nicht zu verwenden beschrieben.

[alkorithmus]

Ich selber nutze den internen Editor von Dreamweaver, der zwar an vielen Stellen zu wünschen übrig lässt, aber es für meine Anforderungen völlig ausreichend ist.

Kleiner Tipp: Unterstriche (_) haben im CSS nichts zu suchen. Könnte Probleme mit manchen Browser geben und sind in der Spezifikation von CSS ausdrücklich als nicht zu verwenden beschrieben.

Das ist einer der Gründe warum ich CSS eigentlich gebrauche :rolleyes:

[/dev/NULL]

Mh du hast im Angebot Container das Angebot auf float:left und das Serverbild auf float:right und darunter kein clear:both

/EDIT: das scheint aber nichts zu ändern...

/EDIT2: Wenn du im div.angebot die Höhe auf 100% stellst (width:100%) ist der balken unten wenigstens weg, aber bei meiner Testpage hier verschiebt sich die Schrift im Firefox auch nach unten...

/Noch ein Edit: Dein Text im div.angebot scheint im Firefox generell nicht in die 110px hohe Box zu passen. Ich glaub FF und IE stellen deine Überschrift <h1> nicht gleich dar. Vielleicht solltest du die mit CSS klar definieren.


Ok.. da werd ich nochmal schauen, danke auf jedenfalls mal.. ich hab erstmal height auf 100% gesetzt und guck mal warum das bisher nicht gepaßt hat..

Überschrift definiere ich dann auch noch neu.. Opera scheint jetzt das mit dem Hover bei den Links nicht zu schnallen.. *kotz* naja soll ja nachher nur ähnlich aussehen *g*

Unterstriche werd ich dann aus den CSS Descriptoren auch rausnehmen, nur warum sagt der w3c Validator nix?

[/dev/NULL]

So ich nochmal.. ähnliche Baustelle:

Die Navigation.. beim IE schauts eigentlich so aus wie es soll, bei Opera und Firefox nicht.
--> der erste Punkt soll 22 px eingerückt werden, geht weder mit line-ident noch padding (O8.5 FF1.07)
--> Ich möchte um die gesammte Navigation einen grauen pixelbalekn oben und unten haben.. machen alle (um hab den um den container div.navigation) allerdings bekommt beim Opera und Firefox auch jeder Link nochmal nen extra Rand (häh?) das will ich eigentlich nicht..

Dann soll der gesammte link -block so hoch sein wie möglich(also bis zu m rand der beschränkenden Box) mit height=100% geht das nicht.. zu sehen im Opera und Firefox am grauen rand rechts

Gebe ich den dingern im CSS nen anderen namen z.B. a.navi ist kein hintergrund zu sehen kopiere ich die ganzen daten und füge backgound:transparent; ein verschwindet beim FF alles, beim Opera nur das underline.

Und: Firefox: wie kann ich da unten rechts die Ecke auch weiß machen?

Und: wo kommt der blaue Rahmen im IE und Forefox um die banner unten rechts (Validcss/ValidXHTML) her?