CSS anfänger will nen paar Tips / Antworten :>

koDiacc · #1 (**permalink**) 14.09.2004, 12:01

Hi alle!

Ich mach jetzt ca 1,5 Wochen CSS ... ich mein damit CSS Layouting also floats etc. ihr wisst was ich meine.
Habe dabei einige Probleme also aktuell bin ich hier beschäftigt:
www.lueber.info/zagon/
code sieht so aus:

Also naja ich hätte gerne die Spalte links immer 100% also so zB wie auf msn.de / t-online.de dass die immer so lang is wie inhalt.

Dann hab ich nen Problem und zwar den 3px bug .. hab nen paar links hier gefunden aber nich ganz gerafft.

Ausserdem sieht meine seite im IE anders aus wie im Firefox.
Ich weiss nicht aber ich fands mit Tabellen um einiges leichter :/ *rebell-ist*

*EDIT*
ich sehe in vielen Threads, das einfach Links von anderen threads gepostet werden, klar erspart das Tipp-Arbeit aber das ist dann wie bei der Telekom-Hotline wo man vom einen zum anderen Mitarbeiter weitergeleitet wird aber das bekommen was man will tut man nicht. Ich hab dann 5 Tabs offen mit irgendnem problem und raff garnixmehr wobei ich den wald wegen der vielen bäume schon jetzt nichtmehr sehe.

INDEX.HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
  <div id="container">
    <div id="logo">
      [img]gfx/zaro_01.jpg[/img]
    </div>
    <div id="header-left">
    </div>
    <div id="header-right">
    </div>
    <div id="left">
    </div>
     <div id="content">
    orem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sit amet urna sed nisl aliquet mattis. Aenean sit amet ante vitae risus sagittis auctor. Nunc malesuada est a diam. Vivamus vulputate imperdiet elit. Nulla iaculis, sapien vitae aliquet volutpat, enim ipsum blandit lectus, ut pretium dolor pede at quam. In aliquam consectetuer velit. Suspendisse potenti. Proin rhoncus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus ante metus, interdum non, consectetuer ac, vestibulum quis, neque. Praesent sed purus. Sed vitae enim vitae purus lacinia fringilla.

Pellentesque porta lectus molestie pede. Etiam vitae est in enim feugiat pharetra. Donec ultrices ipsum ut risus. Praesent dignissim nisl quis lacus. Ut lectus mauris, tincidunt non, congue non, rhoncus non, tellus. Nulla porta tortor eu sem. Ut consectetuer est nec nulla. Nullam gravida, tortor at rhoncus sagittis, augue arcu consequat massa, in fermentum justo lorem et sem. Vivamus non lacus ac ante fermentum laoreet. Donec eros. Donec et purus ut odio pulvinar rutrum. In hac habitasse platea dictumst. Integer faucibus venenatis eros. Pellentesque ac arcu in nulla varius semper. Fusce fringilla lobortis libero. In quis diam vitae mauris blandit convallis. Fusce tempus, odio id auctor egestas, sapien nisl venenatis quam, iaculis volutpat ante metus eu eros. Proin pretium condimentum lectus.

    </div>
    <div id="left-bottom">

    </div>

  </div>

</body>
</html>

CSS

Code:

* {
  border: 1 !IMPORTANT;
}

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}


#container {
border: 1px solid blue;
height: 100%;
}

#logo {
width: 100px;
height: 88px;
float: left;
}

#header-left {
border: 1px solid red;
width: 200px;
height: 88px;
background-image: url('gfx/zaro_02.jpg');
background-repeat: no-repeat;
float: left
}

#header-right {
border: 1px solid blue;
height: 88px;
background-image: url('gfx/zaro_03.jpg');
}

#left {
width: 100px;
height: 314px;
border: 1px solid black;
background-image: url('gfx/zaro_04.jpg');
}

#content {
overflow: scroll;
border: 1px dashed red;
margin-left: 100px;
height: 100%;"

}

#left-bottom {
width: 100px;
background-image: url('gfx/zaro_06.jpg');
clear: left;
}

Hunter S.Thompson · #2 (**permalink**) 14.09.2004, 12:23

am besten die suchfunktion nutzen und nach heitght:100% //edit: natürlich height// suchen!!!!!!

wurde shcon öfters durchgesprochen. kannst es ja erst mal mit height:100% probieren. wird aber wahrscheinlich acuh probleme geben.

aber so wie der code jetzt ist ist es klar das die linke box nie länger wird als 314px.

#left {
width: 100px;
height: 314px; <-----? height: 100%;
border: 1px solid black;
background-image: url('gfx/zaro_04.jpg');
}

sonst ne divverschachtelung wo die linke imme rmit nach unten gedrückt wird

Hunter S.Thompson · #3 (**permalink**) 14.09.2004, 12:29

gib am besten noch dem

#left {
width: 100px;
height: 314px;
border: 1px solid black;
background-image: url('gfx/zaro_04.jpg');
display: inline; <-----------------------------hier
}

wenns immernochnet klappt dann auch der content id display inline geben.

terrikay · #4 (**permalink**) 14.09.2004, 13:12

Zitat:

Zitat von Hunter S.Thompson

gib am besten noch dem

#left {
width: 100px;
height: 314px;
border: 1px solid black;
background-image: url('gfx/zaro_04.jpg');
display: inline; <-----------------------------hier
}

wenns immernochnet klappt dann auch der content id display inline geben.

@ Hunter: was bringt das display:inline hier?
Welcher Trick ist das?

@koDiacc: Du machst den gleichen Fehler wie die meisten. Du fängst an, CSS zu lernen, hast aber noch die Tabellen im Kopf und wie man Seiten mit Tabellen aufteilt. Und das versuchst Du 1:1 umzusetzen. Das funktioniert aber nicht. Ein 100%-hohes Design ist immer knifflig, dazu braucht man Erfahrung. Denn es soll ja auch mitwachsen, wenn es über die 100% hinausgeht. Da muß man mit min-height für vernünftige Browser und height für den IE spielen, und hat selbst dann noch Probleme.
Gutgemeinter Rat: verabschiede Dich gedanklich zunächst von height:100%!
Wenn Du CSS kannst, dann kannst Du es wieder probieren.

koDiacc · #5 (**permalink**) 14.09.2004, 13:39

hm :> sonst kann ich halt fast alles, das ist eigentlich das PRoblem was ich habe .. bis auf den 3 pixel bug etc. kann ich alles schon ein wenig .. HM und jetzt soll ich da sitzen und däumchen drehen ?! irgendwo muss ich ja weiter machen

terrikay · #6 (**permalink**) 14.09.2004, 13:47

3px-Bug: http://www.xhtmlforum.de/viewtopic.php?t=1770

Und für die 100% gabs auch schon Tipps - trenne die Angaben für den IE und vernünftige Browser und mach dann erstmal weiter.

Trennmöglichkeiten: http://home.arcor.de/terrikay/tutorials/ieweichen.html

Viel Spaß beim Ausprobieren!

koDiacc · #7 (**permalink**) 14.09.2004, 13:58

naja der thread ist wieder nen wald voller bäume .. aus so threads sollte nen moderator oder nen admin einfach mal 1 gegliederten Beitrag machen wo man es auch rafft .. dort stehen 32r3534z verschiedene posts und man rafft =0= .. ich hab jetzt durch glück entnehmen können das ich dem rechten einfach margin-left: -3px gebe dann geht es aber ob es immer geht .. naja nich wirklich was gelernt
Was haltet ihr davon wenn man sich nen Buch kauft ?! Rentiert das oder sind das auch nur so kiddie-beispiele wie auf allen tutorial seiten wo man ja auf anhieb sieht wie das gecodet wurde ?! Also dadrauf hab ich kein bock ich hätte schon gern nen buch wo komplexe beispiele erklärt werden eben sowas wie den bug oder hight 100% so zeug halt wo man wirklich braucht und nicht irgendwelche basics .. gruss *gereizt* koDi

ulle · #8 (**permalink**) 14.09.2004, 14:01

Zwischen dem vorletztem und letztem Post liegen nun ca. 10min, ich hätte den THREAD in dieser Zeit auch nicht verstanden.......

Und hier nochmal
height: 100%;

http://www.xhtmlforum.de/viewtopic.p...=voll+blau+100

Mit den Infos solltest Du jetzt locker 2 Stunden beschäftigt sein, evtl. auch mal lesen, verstehen wollen, kopieren und ausprobieren.....

Daumen drehen ist wohl nicht so förderlich.....

koDiacc · #9 (**permalink**) 14.09.2004, 14:15

Ok, Problem ist halt nach 2 Wochen und jeden tag (ich mach es ja beruflich) 8 Stunden ist halt auch bisschen blöd da ist man schnell gereizt.

Zwischenfrage: Gibts ne Seite mit ner kleinen Übersicht was der IE anders interpretiert wie der Mozilla ... Ich schaffs einfach nicht das die Seite auf beiden Platformen gleich aussieht.

Ulle... Das Beispiel von dir ist kein Problem .. Das "umgeben" Div hat ja eine Feste höhe (in deinem fall 500px glaub ich) .. das is ja leicht. Aber wenn ich es 100% zur Seite haben will .. dann sieht das anders aus ..

terrikay · #10 (**permalink**) 14.09.2004, 14:20

Ein paar grundlegende Tipps zum Anfang:

- nimm einen Browser zum Entwickeln, der CSS auch kann! (Mozilla oder Opera, entscheide nach Geschmack). Passe später für den IE an und kontrolliere dann noch auf anderen Browsern.
- nimm einen Doctype, bei dem die Browser im Standardmodus rendern (toscho, weglesen - für den Anfang ist das auf jeden Fall einfacher!), damit Du das Boxmodellproblem nicht schon im IE6 hast.

Und den Rest muß man lernen, ausprobieren usw...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
mein erstes css layout-dazu habe ich jetzt ein paar fragen:)	destroy90210	CSS	6	03.01.2005 22:37
XML -> HTML mit CSS, erweiterbares layout	tk	CSS	0	29.11.2004 08:41
anfänger braucht hilfe für css box	SiCK6SiX	CSS	1	12.08.2004 16:20
Im Opera tuts und im IE nicht <- CSS Anfänger	theSaintHell	CSS	13	13.07.2004 15:23
Anfänger in CSS	Tom	CSS	3	29.06.2004 21:44