CSS Hilfe gesucht

[calli]

Ich alter Sack muss mich jetzt noch mit CSS beschäftigen

Aber es hat schon was so gegenüber reinem HTML oder Tabellenmonster wie früher.

Nur komm ich nich weiter grad, hab den halben Tag versucht das hinzubekommen.

Hier mal die Seite:

http://blenderbuch.de/css_test/CSS-Test.html

CSS:
http://blenderbuch.de/css_test/bbstyle.css


Ich packe es nicht das Menü nebeneinander zu formatieren, es ist eine Listenumgebung mit Hintergrundbildern (die noch "zappeln" sollen per hover). Entweder sie sind ok und untereinander oder nebeneinander und abgeschnitten....

Weiters soll der Copyright Footer unter den Inhalt sein (wenn ich ihn unter den conten-div packe ist er oben an der Seite...) am liebsten wäre mir wenn der Inhalt bis unten im Browserfenster ausgedehnt würde auch wenn nicht so viel Inhalt drinn ist, und dann unten im Browserfenster der Footer.


Wichtig ist mir das die Seite gut im Browserfenster skaliert.

Sonstige Hinweise nehm ich natürlich auch gerne.
Carsten

[schnucki]

hallo calli, ohne es richtig getestet zu haben, würde ich behaupten,dass:

<div id='menua'>
<a class='hmenu' href='index.php?article=welcome'>Welcome</a>
<a class='hmenu' href='index.php?article=history'>History</a>
<a class='hmenu' href='index.php?article=gallery'>Gallery</a>
<a class='hmenu' href='index.php?article=calendar'>Calendar</a>
</div>

/* style */
#menua {
background:#008020;
float: left;
border:1px solid black;
}

#menua a.hmenu, #menua a.hmenu:link,#menua a.hmenu:visited {
display:block;
width: 156px;
height:25px;
background: url(gfx/button_2.gif) no-repeat;
color:#000; text-decoration:none;
text-align:center;
line-height:25px;
}
#menua a.hmenu, #menua a.hmenu:link,#menua a.hmenu:visited {
float:left;
padding: 3px;
}

funktionieren sollte.

------------------------

<img src='gfx/Alien_Buch.png'>

ist nicht w3c konform, du solltest images immer mit dem alt attribut auszeichnen.

<img src='gfx/Alien_Buch.png' alt='Banner' />

und anschließend mit dem close tag '/>' wieder schließen :]

evt. hilft dir das ....


achso, der ganze Trick hinter dem Menü ist das float:left; . Allerdings solltest du besser listen also:
<ul>
<li>blabla</li>
</ul>
verwenden, da divs, für soetwas normalerweise nicht vorgesehen sind.

Bei dem Beispiel ist es jedoch legitim, da der Internet Explorer VersionX<Version7 die Liste in diesem Falle nicht richtig interpretieren würde und die Links dann zwar hintereinander anzeigt würden, jedoch auch in einzelnen Zeilen untereinander


Gruß Benni

[calli]

Ich wollte an sich Standardkonform bleiben und mich nicht um den IE scheren Daher habe ich Listen verwendet, die kann auch ein PDA/Handy gut darstellen zur Not.

Naja, dann muss ich wohl wie Du vorschlägst was basteln.

Danke,
Carsten

PS: Jemand einen Vorschlag zu dem Footer?

[glaus]

du kannst listenelemente mit der CSS-Eigenschaft "display: inline" nebeneinander anzeigen lassen. also
li.menu {display: inline;}

deinem Inhalt kannst du mit
#content {min-height: 380px;
max-height: 10200px;}

* html #content {
height: 380px;
}

auf eine Mindesthöhe bringen. (leider nur mit Pixelzahl, also halt für die 1024er Auflösung). Des mit min-height und so ist standardkonform, des mit * wird nur vom IE interpretiert. Des muss man so machen, weil die älteren IEs des mit min-height nicht kennen...

[calli]

du kannst listenelemente mit der CSS-Eigenschaft "display: inline" nebeneinander anzeigen lassen. also
li.menu {display: inline;}

Ja aber dann werden die Button-Bilder abgeschnitten... Und sämtliche Höhen/Breiten etc. Angaben werden anscheinend(?) ignoriert...

Carsten

[glaus]

stimmt, da ist was dran...
dann könnte es gehen wenn du die li auf display: block setzt, und dann noch ein float: left reinschreibst... wichtig ist dann höhe und breite mit anzugeben...

[calli]

stimmt, da ist was dran...
dann könnte es gehen wenn du die li auf display: block setzt, und dann noch ein float: left reinschreibst... wichtig ist dann höhe und breite mit anzugeben...

Der war jetzt richtig gut! Klappt so prima.

Danke!
Carsten

[calli]

Ich hab nochmal von NULL angefangen, es sah alles so gut aus bis ich die border (zur Orientierung) abgeschaltet habe:

Mit (rotem) Border: http://blenderbuch.de/css_test/Galerie_b.php

Ohne und flasch: http://blenderbuch.de/css_test/Galerie.php

Ohne Border ist oben das Bild nicht ganz oben (laut Firefox Web Developer "html") und unter dem Navigationsmenü ist ein Abstand (laut WD "body") der da nicht hingehört.

Ich brauch definitiv Hilfe...

Wenn das jemand von Euch sowas professionell oder nebenberuflich macht würde ich auch gegen Bezahlung Hilfe annehmen ->PN.

Gruß,
Carsten

[Doc Tom]

@Calli

Ruf mich an