CSS Design Probleme...

Hi,
also ich kämpfe gerade ein wenig mit CSS und zwar hab ich den Grundaufbau fast fertig allerdings gibt es einige Dinge die mich stören und die ich nicht "repariert" bekomme. Es reicht mir, wenn das Design fehlerfrei im Firefox und Internet Explorer angezeigt wird allerdings ist das z.Z. auch so eine Sache...
Ich hab vorher schon einige Tage rumprobiert um euch diesen Thread zu ersparen, aber irgendwie bin ich kein Stück weitergekommen...

Wo ich gerade schon dabei bin. Habt ihr evtl. noch Ideen welche Farben ich nochbenutzen könnte die gut zusammenpassen oder überhaupt ein paar Ideen das ganze ansehlicher zu machen. Sowas ist leider nicht so meine Stärke und wäre da über rat sehr erfreut

Index.html

<html>
    <head>
        <title>Neuer Eintrag</title>
    </head>
    <link rel="stylesheet" href="style.css" media="screen">
    <body>
            <div id="header">Header</div>
            <div id="main_nav">Main.Nav - 1 | Main.Nav - 2 | Main.Nav - 3</div>
            <div id="content"><h1>Head</h1><br />Hallo, Welt!<br /></div>
            <div id="second_nav"><b>Navigation</b></p>Second.Nav - 1 <br /> Second.Nav - 2
            <br />Second.Nav - 3<br /></div>
            <div id="footer">Footer</div>
    </body>
</html>

style.css

body
{
	background-color: #FFC770;
	text-align: center;
	height: auto;
}

#header
{
	height: 45px;
	width: 100%;
	background-image: url(header.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
	position: relative;
}

#main_nav
{
	height: 30px;
	background-color: #FF9000;
	float: center;
}

#second_nav
{
	background-color: #FFE3BF;
	float: right;
	width: 15%;
	height: 768;
	border-left: 1px solid #FF9000;
}

#footer
{
	border-top: 1px solid #FFC770;
	clear: both;
	text-align: center;
	background-color: #5D7CBA;
        width: 84%;
}

#content 
{
	background-color: #5D7CBA;
	padding-left: 15%;
	text-align: left;
	float: left;
	width: 69%;
	height: 768;
	display: inline-block;
}

Vielen Dank im Voraus

Gruß

Airdamn

Wo genau ist das Problem?
Was wird nicht so angezeigt, wie Du es gerne hättest?
Wenn ich es richtig sehe fehlt da außerdem ein <p> Tag.

Hi,
also hier liegt das Problem:
http://img100.imageshack.us/my.php?image=helpvr4.jpg
Da ist eine Lücke die ist unter dem Internet Explorer jedoch noch viel größer ich möchte allerdings das diese unter beiden Browser geschlossen ist

Und ansonsten würde mich noch interessieren, ob ihr Ideen habt wie ich das Design noch anschaulicher machen könnte? Farben, ...

Vielen Dank jedenfalls schonmal

Gruß

Reyx

Erstmal validen Code schreiben; dein </p> wird nirgends geöffnet

Andy2006

Auch auf die Gefahr hin das mich einige dafür vielleicht steinigen werden, wieso machst Du das nicht mit Tabellen?
Nur mit DIV-Tags arbeiten macht es nur schwerer, finde ich.
Du hast sowieso immer das Problem dass es der eine oder andere Browser anders anzeigt.

Reyx

Andy2006 schrieb:

Du hast sowieso immer das Problem dass es der eine oder andere Browser anders anzeigt.

Nö, genau das kann man mit <div>s - so man sie korrekt verwendet! - gekonnt umgehen! Kein zerschossenes Boxmodell, keine Frickeleien, einfach nur sauberes CSS. Sofern man keine exotischen Sachen verwendet, die für ein seriöses, ansprechendes Design ohnehin unerheblich sind, lässt sich so wesentlich besser und dann auch flüssiger arbeiten, als mit Tabellen

@offtopic
Ich würde bei dem Stylesheet noch "projection" und "print" ergänzen, sofern dafür keine eigenen Stylesheets vorliegen. Sonst wundert sich jemand, der die Seite drucken oder an die Wand projizieren wollte (warum auch immer :p ) ganz gewaltig!

Hi, und auf mein Problem/Frage bezogen? --- Ideen?

Danke

Rhombicosidodecahedron

*  ```
CSS: float: center; /* geht meines wissens nicht! */

Warning (also kein Fehler): Einheiten angeben (z.B. px em ...);

hight:auto /* ist überflüssig / automatisch */

*  Ist dein Quellcode auch wirklich der den wir sehen? Denn es sieht danach aus, dass du dort einen Zeilenumbruch oder Tab oder Leerzeichen zwischen dem Testanfang und "<br/>" gemacht hast.

Danke an alle,
wobei mein eigentliches Problem leider immer noch bestehen... Noch Ideen?

Gruß

*D*Evil

Und so wie man es aus dem Code den man sieht hier entnehmen kann hast du garkeine Ordnerstruktur ... empfehlenswert ist sowas wie:

-website
   -images
   -css
   -(pages)
index.php

cheopz

Folgendes erspart einem das ständige Fragen:

http://validator.w3.org

http://jigsaw.w3.org/css-validator/

Linnea

die Lücke liegt wahrscheinlich daran:

#second_nav 
{ 
    background-color: #FFE3BF; 
    float: right; 
    /*width: 15%; */    [b]<-- das kann raus[/b]    
    height: 768; 
    border-left: 1px solid #FF9000; 
}

ausserdem fehlt bei height immer die Einheit, 768 Brautwüste? oder Autos?
und ich hoffe mal dass du den DOCTYPE nicht vergessen hast
"float: center;" gibt es nicht
...

Auch sehr zu empfehlen ist SELFHTML

cheopz

(offtopic)

Zitat von Joe_M. "... DAS WORT LINNEAS: Und es stand geschrieben in der Hilfe zum BCB soll er suchen, bis er fündig ward, oder dem Greisentum anheim fiel."

Wir diskutieren ja gerade über richtiges Deutsch (http://www.c-plusplus.net/forum/viewtopic-var-t-is-174980-and-highlight-is-.html).

Sollte das nicht heissen: würde statt ward, fiele statt fiel?

Linnea

[OT]
mal davon abgesehen, daß man Zitate nicht ändern darf/sollte:
es ist eher "wird" und "fällt" und das Komma hinter dem ward ist auch falsch