CSS-Probleme

SideWinder

Also, da mir so zu CSS geraten wurde, hab ich mich jetzt ein bisschen mit dem beschäftigt. Habe aber noch einige Fragen:

1. Wie schaffe ich es, dass der Rahmen nicht immer so am Objekt dran klebt?
2. Wie kann ich eine "Box" um den Text zeichnen?

Also das Menü soll dann ähnlich wie hier aussehen (gefällt mir, und ist ohne Flash): www.linuxfaqs.de.

BTW: Sind Einstellungen die ich z.b. für das Tag "a" eingebe auch bei "a:hover" eingestellt, oder muss ich da extra nochmal eingeben? Falls sie so bleiben, wie kann ich sie dann bei "a:hover" nicht mehr verwenden?

MfG SideWinder

PS: Ich weiß, gehört net her, aber: Wie kann ich beim DW diese grässlichen 3D-Rahmen durch 2D ersetzen?

nman

1. Hmm, so ganz habe ich leider die Frage nicht verstanden, aber ich denke, dass das auf alle Fälle mit margin oder padding gehen sollte!
2. Z.B. so:

border-width:4px; border-color:black;

3. Dann schau Dir doch einfach mal http://www.linuxfaqs.de/screen.css an!
4. a:hover "erbt" alle Eigenschaften von a - Wenn Du sie nicht mehr verwenden möchtest, musst du IMO explizit andere Werte angeben!

@PS: "DW"?

Shade Of Mine

rahmen geht ueber border und mehr abstand ueber padding

Box? ist nur ein border mit bestimmten styles nehm ich an.

wenn du sagst

a {
text-decoration:underline;
}

dann ist auch a:hover, a:visited und a:active underlined (sozusagen vererbt ;))

wenn beim hover das nicht sein soll:

a:hover {
text-decoration:none;
}

Eine gute Anlaufstelle ist www.w3schools.com oder www.w3.org/Style/CSS/

SideWinder

Eine gute Anlaufstelle ist www.w3schools.com oder www.w3.org/Style/CSS/

Wow, super Anlaufstelle thx!

MfG SideWinder

Netspider

vielleicht hilft auch SelfHTML weiter, da ist auch viel erklärt

Hallo !

du kannst z.B. bei <a>-Element das Padding einstellen, dann pickt der Rahmen nicht so, z.B.

a {
/*aufpassen width unbedingt notwendig anzugeben !*/
display: block;
margin:0px;
width: 100%;
color: rgb(0,202,121);
text-decoration:none;
border: 1px solid black;
padding: 5px;
}

du kannst die Links auch in ein div platzieren, dann ist die Eigenschaft display und width von Bedeutung.

SideWinder

Also hab mich mal eingearbeitet, das ganze nach DW (Macromedia Dreamweaver) übersetzt und bin ganz zufrieden damit. Aber:

Wie erreiche ich mit CSS, dass ich zwei verschiedene Styles nebeneinander benützen kann?

--------------------
|   Überschrift    |
--------------------

|----|  |----------|
|    |  |          |
|Menü|  | Inhalt   |     <<=== hier andere Styles nebeneinander
|    |  |          |
|----|  |----------|

Bei mir werden die dann immer untereinander angezeigt - will ich aber net :).

MfG SideWinder

nman

Mach ein div für die Navbar und eines für den Inhalt, dann kannst du das relativ leicht steuern!
Poste doch auch mal dein html/ css!

Shade Of Mine

mittels position kann man auf absolute oder relativ stellen. bei absolute kannst du ganz genau mit top und left deine divs positionieren

SideWinder

Aha, dann werd ich mal auf "absolute" stellen :).

@nman: Mein HTML/CSS kann ich gar net vernünftig posten, da ich dann alles im Dreamweaver gemacht habe.

MfG SideWinder

nb.Hannibal

du koenntest mit klassen arbeiten:

wenn du zb hast einen link bei der nav dann machst du einfach
/* html */
<a href="" class="nav">link</a>
/* css */
a.nav
{
/* css definitionen.. */
}

achja...class geht auch bei allen anderen elementen ( table,td,img,etc. )

das einzige prob was dann is: man kann keinen eigenen hover machen ( soviel ich weiss )..

nman

@SideWinder: Schreib lieber per Hand, das ist weit weniger Arbeit als man glauben könnte und sieht viel besser/ übersichtlicher aus. Ich mail Dir mal den URL von einer unfertigen Homepage, bei der das auf relativ einfache Art und Weise realisiert wurde!

@nb.Hannibal
Nein, Deine Lösung halte ich nicht für so clever, divs sind definitiv besser dazu geeignet, zB:

<div id="menu">
<a href="index.html">About</a><br />
<a href="faq.html">Faq</a><br />
<a href="shots.html">Shots</a><br />
<a href="download.html">Download</a><br />
</div>
<div id="main">
Das ist die Homepage eines ganz ausgezeichneten fiktiven Programms!</div>

Dann können die klassen #menu und #main ganz einfach im css definiert werden und man kann auch borders um den gesamten Text aufziehen!

nb.Hannibal

ja schon klar...fuer laengere textsegmente eignet sich natuerlich div auch gut

aber wenn man zb nur einen link in einem 20zeilen text hat wird man kaum div verwenden ( ich zumindest )

mfg hannibal

SideWinder

Soweit so gut sagt man glaub ich, dass mit dem rechts davon positionieren hat mit Hilfe von absolute und nmans Link geklappt :).

Aber nochwas:

1. Wie schaffe ich es, dass der Rahmen nicht immer so am Objekt dran klebt?

Irgendwie bringt padding gar nix, also bei nur Text schon, aber bei a:hover, ist das Objekt fast außerhalb des borders trotz padding! Was muss man da zusätzlich einstellen?

MfG SideWinder

nman

Original erstellt von SideWinder:
Irgendwie bringt padding gar nix, also bei nur Text schon, aber bei a:hover, ist das Objekt fast außerhalb des borders trotz padding!

Poste doch bitte mal den relevanten Teil Deines HTML-Codes, es macht nichts, wenn der hässlich ist, das Wesentliche wird schon rüberkommen!

SideWinder

Du hast es ja so gewollt, hier das CSS-Script ala Dreamweaver:

.cssmain { font: normal 10px/normal Arial, Helvetica, sans-serif; text-
transform: none; color: #000000; text-decoration: none; background: #666666 url
(none); text-align: left; vertical-align: text-top; white-space: normal; 
padding: 10px 10px; width: 690px; height: auto; border: 2px #000000 outset; 
clip: rect( ); margin: 0px 0px; letter-spacing: normal; word-spacing: normal; 
left: 210px; position: absolute; overflow: hidden; visibility: visible; top: 
140px} .cssnav { font: bold normal 10px/normal "Courier New", Courier, mono; 
text-transform: none; color: #000000; text-decoration: none; background: #
666666 url(none); text-align: left; vertical-align: text-top; white-space: 
normal; padding: 10px 10px; width: 150px; height: auto; border: 2px #000000 
outset; clip: rect( ); margin: 0px 0px; letter-spacing: normal; word-spacing: 
normal ; position: absolute; cursor: hand; overflow: hidden; top: 100px} 
.cssueber { font: bolder normal 24px/normal Arial, Helvetica, sans-serif; text-
transform: none; color: #000000; text-decoration: none; background: #666666 url
(none); text-align: center; vertical-align: middle; white-space: normal; 
padding: 10px 10px; width: 892px; height: auto; border: 2px #000000 outset; 
clip: rect( ); margin: 0px 0px; letter-spacing: normal; word-spacing: normal ; 
overflow: hidden} .cssueber2 { font: bold normal 10px/normal "Courier New", 
Courier, mono; text-transform: none; color: #000000; text-decoration: none; 
background: #666666 url(none); text-align: center; vertical-align: text-top; 
-space: normal; padding: 10px 10px; width: 690px; height: 20px; border: 2px #
000000 outset; clip: rect( ); margin: 0px 0px 20px; letter-spacing: normal; 
word-spacing: normal ; position: absolute; left: 210px; overflow: hidden; 
: visible; top: 100px} a:active { font: bold normal 10px/normal "Courier New"
, Courier, mono; text-transform: none; color: #000000; text-decoration: none;
 background: #666666 url(none); text-align: left; vertical-align: text-top; 
white-space: normal; padding: 10px 10px; width: 0px; height: 0px; border: 2px 
#000000 none; clip: rect( ); margin: 0px 0px; letter-spacing: normal; word-
spacing: normal ; position: absolute; cursor: hand; overflow: scroll; top: 
100px } a:link { font: bold normal 10px/normal "Courier New", Courier, mono;
 text-transform: none; color: #000000; text-decoration: none; background: 
#666666 url(none); text-align: left; vertical-align: text-top; white-space: 
normal; padding: 10px 10px; border: 2px #000000 none; clip: rect( ); margin:
 0px 0px; letter-spacing: normal; word-spacing: normal ; position: absolute;
 cursor: hand; overflow: visible} a:visited { font: bold normal 10px/normal 
Courier New", Courier, mono; text-transform: none; color: #000000; text-
decoration: none; background: #666666 url(none); text-align: left; vertical-
align: text-top; white-space: normal; padding: 10px 10px; width: 0px; height: 
0px; border: 2px #000000 none; clip: rect( ); margin: 0px 0px; letter-spacing:
 normal; word-spacing: normal ; position: absolute; cursor: hand; overflow: 
scroll; top: 100px } a:hover { font: bold normal 10px/normal "Courier New", 
Courier, mono; text-transform: none; color: #000000; text-decoration: none; 
background: #CCCCCC url(none); text-align: left; vertical-align: text-top; 
white-space: normal; padding: 10px 10px; width: 150px; height: auto; border:
 1px #000000 inset; clip: rect( ); margin: 10px 10px; letter-spacing: normal;
 word-spacing: normal ; position: absolute; cursor: hand; overflow: visible; 
top: 100px ; float: none; clear: none}

Hier mein Template(noch nicht fertig), dass ich später für die einzelnen Seiten einsetzen will:

<HTML>
<HEAD>
<TITLE>SideWinders Home</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK rel="stylesheet" href="../_css/main.css" type="text/css">
<script language="JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</HEAD>

<BODY bgcolor="#333333" text="#000000" link="#000000" vlink="#000000" alink="#000000">
<P class="cssueber">S  I  D  E  W  I  N  D 
   E  R  S     H  O  M  E</P>
<P> </P>
<P class="cssnav"><A href="./index.htm" target="_self">Startseite</A><BR>
  <BR>
  <A href="./cstrike.html" target="_self">Counter-Strike</A><BR>
  <A href="./mtg.html" target="_self">Magic - TG</A><BR>
  <A href="./proggen.html" target="_self">Proggrammieren</A><BR>
  <BR>
  <A href="./school.html" target="_self">Schule</A><BR>
  <A href="./server.html" target="_self">Server</A><BR>
  <BR>
  <A href="./links.html" target="_self">Links</A><BR>
  Gästebuch<BR>
  <A href="./impressum.html" target="_self">Impressum </A></P>
<DIV align="left"></DIV>
<P class="cssueber2">{Überschrift}</P> 
<P> </P>
<!-- #BeginEditable "Main" class="cssmain" style="left: 200px; top: 135; visibility: visible; width: 750px; height: auto; overflow: visible" id="Main" --> 
<P class="cssmain" style="top: 150px"> </P>
<!-- #EndEditable --> <!-- #BeginEditable "Ueberschrift" -->{Ueberschrift}<!-- #EndEditable --> 
<P> </P>
<DIV align="left"><BR>
</DIV>
</BODY>
</HTML>

MfG SideWinder

[ Dieser Beitrag wurde am 16.11.2002 um 14:00 Uhr von SideWinder editiert. ]

nman

*schluck*

Nun, ich glaube Du solltest statt dem <P class="cssnav"> ein div aufziehen, dann würde wohl padding auch verarbeitet werden. (Probier das einfach mal aus, Deinen ganzen Code habe ich mir nämlich nicht durchgelesen, das war einfach das Erste was mir aufgefallen ist... )

Shade Of Mine

*schluck*
Und der Dreamweaver ist der beste WYSIWYG-HTML-Editor, das macht mich traurig...

@Side:
setz dich mal einen Nachmittag hin und lern HTML, am Abend schaust du dir dann CSS an, und du brauchst nie wieder den Dreamweaver...

SideWinder

@Shade: Jo, der DW ist eindeutig das Beste was der Markt zu bieten hat, ich werde ihn auch weiterhin benützen, alleine das händische erstellen von tables dauert mir viel zu lange - da hilft auch kein Copy&Paste. Jo, HTML kann ich eh ein bisschen, und die Grundzüge von CSS hab ich jetzt auch schon verstanden, aber ich will schnell meine HP anpassen können, da hilft eben ein WYSIWYG-Editor sehr...

Also, ich werd mir bei w3g mal anschauen was anders ist an div im Gegensatz zu p...warum aber grade dann padding funktionieren sollte, versteh ich nicht. Immerhin klappt es ja überall, nur bei a:hover nicht...

MfG SideWinder

SideWinder

Bin gerade drauf gekommen, dass der IE da mehr Verständnis für meinen Code zeigt. So schlecht siehts ja auch im Opera nicht aus, nur halt dumm, dass die Box bei a:hover so dranklebt ... aber, naja.

Nur im IE bin ich auf etwas anderes gestoßen: Der zeigt mir die einzelnen Zeilen dann übereinander an - muss man bei margin leicht die eigene Höhe hinzurechnen?

MfG SideWinder