zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS anfänger will nen paar Tips / Antworten :>

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.09.2004, 12:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2004
Beiträge: 35
koDiacc befindet sich auf einem aufstrebenden Ast
Standard CSS anfänger will nen paar Tips / Antworten :>

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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.09.2004, 12:23
Benutzer
neuer user
 
Registriert seit: 29.08.2004
Beiträge: 38
Hunter S.Thompson befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.09.2004, 12:29
Benutzer
neuer user
 
Registriert seit: 29.08.2004
Beiträge: 38
Hunter S.Thompson befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 14.09.2004, 13:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 14.09.2004, 13:39
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2004
Beiträge: 35
koDiacc befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 14.09.2004, 13:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #7 (permalink)  
Alt 14.09.2004, 13:58
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2004
Beiträge: 35
koDiacc befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 14.09.2004, 14:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.....
__________________
</ulle>
Mit Zitat antworten
  #9 (permalink)  
Alt 14.09.2004, 14:15
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2004
Beiträge: 35
koDiacc befindet sich auf einem aufstrebenden Ast
Standard

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 ..
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 14.09.2004, 14:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:41 Uhr.