Seite 1 von 1
Kleine unterstützung bei Neu Aufbau?!
Verfasst: Di 21. Mär 2006, 06:10
von blackelementz
Hallo,
mich hat mal wieder der Wurm gekniffen und ich bastel seit gestern Nachmittag nun an einer neuen und diesmal auch DIV/CSS Variante meiner Homepage.
Ich habe mich nun ... 15h mit CSS beschäftigt und bin schon einigermaßen weit gekommen mit der Startseite.
Hab da ne kleine frage zwischendurch. Und zwar möchte ich die gesamte Seite weiß darstellen lassen. Dann hab ich einen 2 bereich (DIV) definiert der einen schwarzen hintergrund haben soll.
Da ich in letzter Zeit immer mehr auf diese halben Seite (800px) stoße und die mir auch eigentlich sehr zusagen wollte ich nun auch umsteigen vor allem weil ich dann endlich mal schaun muss wo ich mit dem ganzen Content bleibe.
Dieser Bereich wo der Content ist also der Inhalt der Seite soll wie gesagt schwarzen hintergrund haben aber irgendwie möchte der DIV nicht wie ich möchte.
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>black</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_all"><------------------weißer HINTERGRUND
<div id="banner">
<div id="banner1">CMS_CONTAINER[1]</div>
<div id="banner2">CMS_CONTAINER[2]</div>
</div>
<div id="banner_left">
<div id="banner4">CMS_CONTAINER[14]</div>
</div>
<div id="main">
<div id="head">
<div id="logo"><a href="http://www.black-elementz.com/cms/front_content.php"><img src="images/logo/newbe_logo.jpg" alt="" border="0" /></a></div>
<div id="navigationsleiste">CMS_CONTAINER[3]</div>
</div>
<div id="content"><------------------schwarzer Hintergrund
<div id="content_left">
<div id="welcome">CMS_CONTAINER[4]</div>
<div id="flyerpreview">CMS_CONTAINER[5]</div>
</div>
<div id="content_center">
<div id="news">CMS_CONTAINER[6]</div>
<div id="banner3">CMS_CONTAINER[7]</div>
</div>
<div id="content_right">
<div id="pix_news">CMS_CONTAINER[8]</div>
<div id="kuenztler_news">CMS_CONTAINER[9]</div>
<div id="shop_news">CMS_CONTAINER[10]</div>
<div id="special_news">CMS_CONTAINER[11]</div>
<div id="newsletter">CMS_CONTAINER[12]</div>
</div>
</div>
<div id="subnavigation">
<div id="subnavigation_center">CMS_CONTAINER[13]</div>
</div>
</div>
</div>
</body>
</html>
Hier die noch inoffizielle Seite
hehe
http://www.black-elementz.com/cms/front ... p?idcat=16
Ich wurde letztens auch auf meine schlechte Navigation angesprochen und das man die auch am besten mit CSS machen kann. ( BIN DABEI
)
Würd mich mal interessieren wie es bisher gefällt. Hab mal beim Menu/Header bissel was anderes gemacht, damit man auch sofort weiß worum es auf meiner Seite geht.
Gruß Ryan
P.S. Ich geh jetzt mal schlafen
edit: der Hintergrund des Contents soll schwarz sein. Sprich da wo die Module dargestellt werden der rest soll halt drum herum weiß bleiben.
Hatte mich vor lauter müdigkeit vertan mit dem DIV. Hatte erst die id="main" makiert aber dann würde das Manu auch nen schwarzen hintergrund haben und das soll ja ned
Tschüüü
Verfasst: Di 21. Mär 2006, 09:53
von kloevekorn
Hi.
Code: Alles auswählen
body {background-color:white;}
#content {background-color:black;}
Dann ist die Contentspalte schwarz, aber links und rechts noch weiß. Diesen Bereichen musst du eben auch schwarz zuweisen. Aber den Hintergrund des Fensters kannst du nur über das body und nicht über ein div definieren.
Was die Navi angeht ... bei mir im FF ist die nicht mal richtig positioniert scheint mir. Und sonst: wie meistens: zu CSS gibt es naturgemäß tonnenweise Zeugs zu im Netz, z.B. für Listennavigationen in vorbildlichen Tutorials und mit massig Beispielen:
http://css.maxdesign.com.au/
Verfasst: Di 21. Mär 2006, 13:06
von mvf
und wenn man schon in css einsteigt sei abermals erwähnt, dass der FF und die extension web-developer-toolbar unerlässlich sind
try and you know why
Verfasst: Di 21. Mär 2006, 13:09
von blackelementz
Danke erstmal.
Was ich noch bemerkt habe und mich beschäftigt.
Geht das eigentlich das die Divs Variabel sind?
Weil ich musste dem #Content Div jetzt eine bestimmte height= geben damit mir überhaupt der schwarze hintergrund angezeigt wird. Muss man immer die breite und höhe angeben oder kann die höhe sich auch selber anpassen? z.B. wenn sich der inhalt im Content ändert und dort mehr steht dann muss das ja auch automatisch länger werden können.
Habe noch ein Submenu unter der Seite. Ich müsste das ja mit einer bestimmten höhe positionieren sonst komme ich ja garnicht da unten hin.
naja alles bissel komisch.
Wie wird denn die Navigation bei Dir angezeigt? wenn der Button unterhalb von dem großen (
www.black...) anfängt und ca. mittig auf dem weißen streifen ist dann ist das so gewollt.
Ich nutze jetzt auch endlich den FF und selbst dort wird es jetzt korrekt angezeigt bzw. genauso wie im IE.
Gruß
Verfasst: Di 21. Mär 2006, 13:32
von kloevekorn
blackelementz hat geschrieben:Danke erstmal.
Was ich noch bemerkt habe und mich beschäftigt.
Geht das eigentlich das die Divs Variabel sind?
Weil ich musste dem #Content Div jetzt eine bestimmte height= geben damit mir überhaupt der schwarze hintergrund angezeigt wird. Muss man immer die breite und höhe angeben oder kann die höhe sich auch selber anpassen? z.B. wenn sich der inhalt im Content ändert und dort mehr steht dann muss das ja auch automatisch länger werden können.
kann ich auf die schnelle nicht erklären. Muss man sich schlau machen bzw. mit experimentieren. Ich halte es aus leidiger Erfahrung für schlau, als Anfänger nicht selbst von Grund auf das Layout selbst zu machen, sondern eine fertige HTML/CSS-Layout zu verwenden bzw. anzupassen, die dann i.d.R. auf den allermeisten Browsern korrekt angezeigt werden. Mal die Suma deiner Wahl befragen.
Wie wird denn die Navigation bei Dir angezeigt? wenn der Button unterhalb von dem großen (
www.black...) anfängt und ca. mittig auf dem weißen streifen ist dann ist das so gewollt.
die idcat=16 sieht gut aus. bei den unterseiten, z.B. idcat=40 ist die Navi dann am linken Seitenrand im weißen Streifen über dem Logo-Schriftzug.
Verfasst: Di 21. Mär 2006, 14:12
von blackelementz
hmm.. welche Bildschirmgröße hast Du?
Ich habe 15" TFT sichtbar 17" CRT. Bei mir wird selbst wenn ich den Cache/Cookies lösche alles so angezeigt wie von mir gedacht.
Ist echt seltsam. Wird echt Zeit die Seite neu zu gestalten.
Hast Du denn verstanden was ich mit variablen meine? Hat eventuell jemand paar Minuten Zeit um mal einen Blick über meine Layout zu werfen?
Ja die idcat=16 ist die neue seite und die Navigation ist mit den momentanen Öffentlichen Seiten verknüpft.
Gruß Ryan
Verfasst: Di 21. Mär 2006, 14:33
von kloevekorn
blackelementz hat geschrieben:hmm.. welche Bildschirmgröße hast Du?
Ich habe 15" TFT sichtbar 17" CRT. Bei mir wird selbst wenn ich den Cache/Cookies lösche alles so angezeigt wie von mir gedacht.
Ist echt seltsam. Wird echt Zeit die Seite neu zu gestalten.
Hast Du denn verstanden was ich mit variablen meine? Hat eventuell jemand paar Minuten Zeit um mal einen Blick über meine Layout zu werfen?
Ja die idcat=16 ist die neue seite und die Navigation ist mit den momentanen Öffentlichen Seiten verknüpft.
Gruß Ryan
okay, dann ist deine Navi nur auf den alten Seiten nicht in Ordnung. Mit der Screengröße hat das auch nix zu tun, da wird nichts zusammengeschoben oder so.
Dann sind da jede Menge Code-Fehler drin (vgl.
http://validator.w3.org/), wenn die repariert sind, weiß man schon mal, dass die Fehler nicht an Code-Formalien liegen. (Die Meldungen von der Seite sind nicht immer einfach zu verstehen, aber da muss man durch)
An deiner Stelle würde ich nochmal von vorne mit einem vorgefertigten Layout anfangen (und nicht, weil das alles zu schlecht oder blöd ist, sondern weil von vorne anfangen bedeutet, eine saubere Basis herstellen zu können). Und ich bin sicher, es würde auch deine Zeit sparen.
Verfasst: Di 21. Mär 2006, 16:38
von blackelementz
Hallo Guido.
Die "web-developer-toolbar" habe ich mir letztens schon installiert auf deinem Ratschlag hin
hat bisher auch schon wirklich gut geholfen.
Mein Problem ist nur im moment die Logik der Webseiten erstellung mit DIV´s . Ich denke mal die Layout Datei ist nicht so fehlerhaft wie man denkt denn die wurde vor paar wochen in zusammen arbeit mit nem Kollegen hier aus dem Board erstellt bzw habe ich noch paar kleine Änderungen vorgenommen.
Bei Tabelle war es bisher so das man eine Tabelle erstellt und einfach Spalten und zellen einfügen kann. Selbst wenn man nicht alle Zellen befüllt sind sie dennoch da und zwar nicht irgendwo im Raum sondern da wo man sie eingebunden hat. Nicht so bei CSS wie ich bisher verstehe. Denn dort kann ich wohl Divs in Divs sozusagen auch eine HauptDiv und dann mehrere "innere Divs" in der HauptDiv. Diese inneren Divs sind aber trotzdem unabhängig von der HauptDiv. Denn diesen muss ich ja eine genaue position geben denn sonst schwirrt sie irgendwo im Raum rum
Ich bräuchte eventuell nur nochmal eine kleine Klarstellung denn ich habe schon wie gesagt 15h jetzt noch mehr
mit der Geschichte befasst in sämtlichen Foren und auch praktisch.
Bleibe halt jetzt irgendwie kleben mit der variablen höhe. Ich will das nicht zentrieren (vertikal) sondern ich möchte einfach das die Container auch so in der Reihenfolge wie ich sie definiert habe dargestellt werden und nicht kreuz und quer herumfliegen.
Gruß Ryan
Verfasst: Mi 22. Mär 2006, 11:44
von kloevekorn
Du willst deine Layout-Probleme im Contenido-Forum geklärt haben und schleppst hier Müllcode an.
Ich habe nicht gesagt, dass dein Layout schlecht oder fehlerhaft ist, sondern dass jede Menge Fehler im Code sind. Ob die aus dem Layout kommen oder von Modulen ... digger, krieg das selber raus oder frag den "Kollegen aus dem Board". Der sollte in geschätzten 3,5 Sek. was finden.
Verfasst: Mi 22. Mär 2006, 13:36
von rezeptionist
EDIT: wurde geklärt handshake kloevekorn
@blackelementz
mit deiner Navi ist so ne Sache,
ich würde eh eine andere Art der Navigation einsetzen die auf einblendungen etc. verzichtet. Hauptnavi oben und die Unterpunkte dann auf der linken seite untereinander. Würde es auch übersichtlicher machen.
So dann noch einige Dinge:
Auch wenn es schön ist anderen zu helfen, die gewisse Eigendynamik muss da sein, und dazu gibt es auch noch einige Gute Bücher die du lustigerweisse auch Privat von der Steuer absetzten könntest.
Wenn man dir Tipps gibt dann versuche sie zu befolgen, und zu hinterfragen zb. warum das eine div auf das andere div so reagiert .
15 Sunden css sind ein guter Anfang aber noch nicht genug bzw nicht richtig in die Materie gestiegen.
Sollten aus deiner Sicht einige Dinge nicht realisierbar sein so gibt es verschiedene Möglichkeiten:
+ Alternativen Überlegen
+ In speziellen Foren zu fragen zb selfhtml
http://forum.de.selfhtml.org/
und vieles anderes, ich kann kloevekorn nach einem privaten Austausch teilweise verstehen mit seiner Aussage.
so genug getrommelt such dir ne gute Buchhandlung in deiner Nähe gute css Bücher gibt es ab 30 Euro
http://www.addison-wesley.de/
Verfasst: Fr 24. Mär 2006, 21:14
von blackelementz
hallo alle zusammen.
Habe mich jetzt nochmal mit CSS beschäftigt.
Mittlerweile habe ich auch verstanden was der Valdiator mir für Fehler anzeigt (teilweise).
Ich hab nur ein kleines Problem mit der Hintergund Grafik. Hab gerade mal bissel gegoogelt jedoch nix gefunden was sich mit meiner Problematik beschäftigt.
Und zwar habe ich ein Eltern Div in dem 2 Divs gefloatet sind nebeneinander.
Sobald ich den Befehl zum floaten gebe wird die Hintergrundgrafik des Elterndivs ned mehr angezeigt.
Wisst Ihr woran sowas liegt?
Ich weiß das ist kein spezielles CSS XHTML Forum hier aber ich fühle mich hier einfach zu wohl und weiß das es hier Menschen gibt die viel Ahnung haben davon.
Sorry das ich mir kein Buch gekauft habe aber leider habe ich zur Zeit nicht das nötige Kleingeld dafür. Ich versuche meine Seite zu optimieren um etwas noch nie dagebotenes auf einer professionellen Website (dem anschein nach.. ich weiß QUellcode is mies
) zu bieten. Ich mache schon seit längerem Fotos und möchte jetzt versuchen dort ein wenig geld mit zu verdienen.
Ihr seht also das ist kein Auftrag oder so für eine Firma sondern ich mache das für mich selbst. Und versuche Kosten zu sparen in dem ich keine Professionelle Programmierer (Kosten mehrere 1000 EUR) beauftrage. Ich weiß man muss einiges lernen aber ich finde ich schlage mich, dafür das ich überhaupt nix mit Programmieren oder Webdesign am Hut habe, sehr gut.
Würde mich halt freuen wenn sich die jenigen die Lust haben Ihr wissen weiterzugeben und auch die Zeit dazu haben mir nur paar Tips geben. Ich will weißgott keinen hier belästigen aber ich hoffe es gibt noch hilfsbereite Menschen die spaß daran haben jemandem zu Helfen.
Soviel zum Thema ich setze mich nicht damit auseinander.
P.S. ich frage nicht bei Self Html weil zum Teil liegt es auch daran was ich im CMS angestellt habe und das is von Contenido.
Verfasst: Fr 24. Mär 2006, 21:31
von Maribeauli
blackelementz hat geschrieben:hallo alle zusammen.
Und zwar habe ich ein Eltern Div in dem 2 Divs gefloatet sind nebeneinander.
Sobald ich den Befehl zum floaten gebe wird die Hintergrundgrafik des Elterndivs ned mehr angezeigt.
Wisst Ihr woran sowas liegt?
Ich verstehe zwar nur die Hälfte von dem was du meinst,
und wenn ich diese verstandene Hälfte als HTML zusammen setzte - funktioniert nix
Poste doch einmal die Daten aus deiner CSS-Datei dieser 3 DIVs,
vielleicht wird dann klarer wo dein Problem liegt.
Verfasst: Sa 25. Mär 2006, 13:47
von blackelementz
Hallo,
ja sorry das habe ich ganz vergessen zu Posten.
Hier der Code von meiner Seite/Problem.
LAYOUT
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>black-elementz.com v.3.0</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banner">
<div id="banner1">CMS_CONTAINER[1]</div>
<div id="banner2">CMS_CONTAINER[2]</div>
</div>
<div id="banner_left">
<div id="banner3">CMS_CONTAINER[3]</div>
</div>
<div id="main">
<div id="head">
<div id="logo"></div>
<div id="headerflash">CMS_CONTAINER[4]</div>
<div id="navigationsleiste">CMS_CONTAINER[5]</div>
</div>
<div id="content">
<div id="content_left">
<div id="info">CMS_CONTAINER[6]</div>
<div id="flyerpreview">CMS_CONTAINER[7]</div>
<div id="newsletter">CMS_CONTAINER[8]</div>
</div>
<div id="content_right">
<div id="news">CMS_CONTAINER[9]</div>
</div>
</div>
<div id="subnavigation">CMS_CONTAINER[10]</div>
</div>
</body>
</html>
und die CSS Datei
Code: Alles auswählen
html {
width:100%;
height:100%;}
body {
background-color:#333333;
color:#ffffff;
font-family:Verdana, Tahoma, Arial, sans-serif;
font-size:11px;}
a, a:link, a:visited, a:active {
font-size:11px;
font-weight:bold;
text-decoration:none;
color:#ff9933;}
a, a:hover {
color:#ff6600;}
img {
border:none;}
#banner {
position:absolute;
top:5px;
width:700px;
height:90px;
left:50%;
margin-left:-370px;}
#banner1 {
position:relative;
top:0px;
left:0;
width:350px;
height:90px;
float:left;}
#banner2 {
position:relative;
top:13px;
left:2px;
width:350px;
height:90px;
float:right;}
#werbung {
background-color:#333333;
color:#ff9933;
font-family:Verdana, Tahoma, Arial, sans-serif;
font-size:8pt;
font-style:normal;
font-weight:bold;}
#main {
background-color:#333333;
border:1px solid #000000;
color:#ffffff;
width:850px;
position:absolute;
left:50%;
margin:105px 0px 0px -425px;}
#head {
background-image:url(../images/menu/headernavigation2.jpg);
background-repeat:no-repeat;
background-position:0px 5px;
position:relative;
top:0px;
left:5px;
width : 840px;
height : 251px;}
#content {
background-color:#000000;
color:#ffffff;
border-top-width : 1px;
border-top-style : solid;
border-top-color : #cccccc;
position:relative;
top:0px;
left:5px;
width:840px;}
#content_left {
border-right-width : 1px;
border-right-style : solid;
border-right-color : #cccccc;
position:relative;
top:0px;
left:0px;
float:left;
width:250px;
height:100%}
#content_right {
position:relative;
top:0px;
left:0px;
float:right;
width:589px;
height:100%}
Hoffe jetzt wirds klarer
Gruß