4. CSS-Probleme

CSS-Probleme

  • ?

    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.

    0
  • S

    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

    0
  • N

    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!

    0
  • S
    Mod

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

    0
  • S

    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

    0
  • N

    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 )..

    0
  • N

    @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!

    0
  • N

    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

    0
  • S

    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

    0
  • N

    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!

    0
  • S

    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. ]

    0
  • N

    😮 *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... 🙂 )

    0
  • S
    Mod

    *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...

    0
  • S

    @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

    0
  • S

    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

    0
  • S
    Mod

    Original erstellt von SideWinder:
    Bin gerade drauf gekommen, dass der IE da mehr Verständnis für meinen Code zeigt.

    Mach da mal valides HTML draus, dann zeigen es die Browser auch besser an. Und dann mach valides CSS (ein paar konstrukte schaun da sehr komisch aus), dann schauts wahrscheinlich was gleich.

    0
  • S

    Wo soll ich das einstellen? Beim Opera oder im IE? Und wo vor allem?

    Seht euch mal die Unterschiede an 😮:

    sidewinder.chicago224.server4free.de/templateimie.jpg

    MfG SideWinder

    0
  • N

    Original erstellt von SideWinder:
    Wo soll ich das einstellen? Beim Opera oder im IE? Und wo vor allem?

    Das kann man nicht einstellen, Shade meinte einfach, dass Du richtiges HTML selbst schreiben sollst, das der HTML-Validator vom W3C auch schluckt! 🙂

    0
  • S

    Oh...ne will aber den DW benützen, wenn der das net kann dann lass ich sie eben so wie sie ist...besser als jeder hat dann eine andere Version der Page vorliegen...

    Irgendwie aber schade :(, ich biete dann eben eine Non-Flash-Variante an und Frames müssen die halt verstehen können...

    MfG SideWinder

    0
Anmelden zum Antworten