• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Externe CSS datei und Div Container

8

84R7

Neues Mitglied
Hallo zusammen !
ich bin neu hier und versuch gerade eine homepage mit externer css datei zu bauen.
Mein Problem ist, dass die werte der div container ( schriftfarbe weiß usw.) nicht übernommen werden.
Die schrift ist schwarz und oben links ausgerichtet und nicht im div container.

hier die html seite
<html>
<head>
<title> News </title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="menu"> Home Band Music Pix Gigs Shop Gäste Links Impressum</div>
<br>
<div id="inhalt">test</div>
</body>
</html>
Zum Vergrößern anklicken....
und hier die css datei:
*{
margin: 0;
padding: 0;
}

body {
background-color:black;
background-image: url(images/bg.jpg);
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center top;



a:hover {color:#CE0000}
a:visited {color:#CE0000}
a:active {color:red)

}

#menu
{
position:absolute;
width:200px; height:100px;
border:thin solid red;
font-family: arial;
color : #ffffff;


}

#inhalt
{
font-size: 12px;
font-family: Arial;
text-align: center;
color : #ffffff;


}


#wrapper {
}
Zum Vergrößern anklicken....

ich verstehe auch nicht warum man den roten div rahmen nicht sieht....

vielleicht kann mir jemand helfen.
wäre super !
danke
bart
 
Bei #menu und #inhalt darf zwischen color und dem Doppelpunkt kein Leerzeichen sein.

Ferner fehlt die schließende Klammer beim body.
edit 1: Diese ist zwar nach den Linkdefinitionen vorhanden, muss aber davor gesetzt werden.
edit 2: Bei a.active muss die schließende runde Klammer durch eine geschweifte ersetzt werden.

Wozu brauchst du überhaupt #menu? Dazu wäre doch h1 als Überschrift besser geeignet.
Auch den Zeilenwechsel zwischen beiden Elementen (<br>) solltest du entfernen. Abstände definiert man mit margin-Werten.
 
Zuletzt bearbeitet:
super, hat geklappt danke !
jetzt habe ich folgendes problem:
ich möchte, dass die Links weiß und nicht unterstrichen bleiben.
ledeglich wenn ich drübergehe soll der link rot werden.
der aktive link soll auch rot bleiben - der rest wieder weiß.

das klappt noch nicht, da diese rot bzw blau und unterstrichen sind.

hier nochmal die css datei
*{
margin: 0;
padding: 0;
}
/* body deklaration*/
body {
background-color:black;
background-image: url(images/bg.jpg);
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center top;

}

#menu
{
margin:78px 295px 0px 295px; /*aussenabstand oben rechts unten links */
padding:1px 5px 1px 5px; /*innenabstand oben rechts unten links */
border:thin solid red;
font-size: 16px;
font-family: Arial;
word-spacing:1.9em; /*wortabstand*/
a:link { text-decoration:none; font-weight:bold; color:#ffffff; }
a:visited { text-decoration:none; font-weight:bold; color:#ffffff; }
a:hover { text-decoration:none; font-weight:bold; color:#e00000; }
a:active { text-decoration:none; font-weight:bold; color:#e00000; }
a:focus { text-decoration:none; font-weight:bold; color:#e00000; }

}

#inhalt
{
margin:5px 295px 50px 295px;
padding:5px;
border:thin solid yellow;
font-size: 12px;
font-family: Arial;
text-align: left;
color:#ffffff;


}


#wrapper {
}
Zum Vergrößern anklicken....
und die html datei
<html>
<head>
<title> News </title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>

<div id="menu">
<a href="home.html">Home</a>
<a href="band.html">Band</a>
<a href="music.html">Music</a>
<a href="pix.html">Pix</a>
<a href="gigs.html">Gigs</a>
<a href="shop.html">Shop</a>
<a href="gaeste.html">Gäste</a>
<a href="links.html">Links</a>
<a href="impressum.html">Impressum</a>

</div>
<div id="inhalt">test 2 3 4 <br> sdf </div>




</body>

</html>
Zum Vergrößern anklicken....
 
hab es alleine geschafft.
a:link usw. darf nicht im div container stehen sondern im allene in der css datei.
für die unterstriche gibt es die funktion text-decoration:none ;

also
a:link { text-decoration:none; color:#ffffff; }
a:visited { text-decoration:none; color:#ffffff; }
a:hover { text-decoration:none; color:#e00000; }
a:active { text-decoration:none; color:#e00000; }
a:focus { text-decoration:none; color:#e00000; }
Zum Vergrößern anklicken....
ein problem habe ich allerdings.
habe die homepage in 1024x768 gemacht.
wenn ich die auflösung ändere sind meine div container an eine falschen stelle.
was kann ich da machen ?
habe schon versucht body mit weight und height 100 % zu deklarieren.
schlug bei einer anderen auflösung auch fehl.
Also ich habe ein Hintzergrundbild, wobei der erste divcontainer mein menu ist und der drunter ist der content. das hintergrundbild ist zentriert oben.

also es sollte wie bei www.carnalforge.com aussehen

gruß
bart
 
Zuletzt bearbeitet:
Hallo.

Du solltest ausserdem deiner HTML Seite einen Doctype geben und dein Menü als Liste auszeichnen.
Um dein CSS solltest du dich kümmern wenn du den Inhalt deiner Seite erstellt hast.

Gruss
Elroy
 
prm schrieb:
Packe den Inhalt am besten in einen #wrapper, gib diesem eine bestimmte Breite und zentriere ihn wie hier beschrieben: Horizontale Zentrierung mit CSS
Zum Vergrößern anklicken....

danke das hat schon mal geklappt !
allerdings ist alles was oberhalb des menu's ist schwarz, wenn ich den rahmen wegmache.
hier nochmal der aktuelle code
*{
margin: 0;
padding: 0;
}



a:link { text-decoration:none; color:#ffffff; }
a:visited { text-decoration:none; color:#ffffff; }
a:hover { text-decoration:none; color:#e00000; }
a:active { text-decoration:none; color:#e00000; }
a:focus { text-decoration:none; color:#e00000; }


/* body deklaration*/
body {
background-color:black;
margin: 0;
padding: 0;
width:100%;
height:100%;
}

#gesamt
{
margin: 0 auto;
width:1005px;height:768px;
border: 1px solid blue;
background-color:black;
background-image: url(images/bg.jpg);
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center top;





}

#menu
{
margin: 7.5% 15.5% 0% 15.5%; /*margin:78px 295px 0px 295px; */
padding:1px 5px 1px 5px; /*innenabstand oben rechts unten links */
/* border:thin solid red;*/
font-size: 16px;
font-family: Arial;
word-spacing:1.9em; /*wortabstand*/
font-weight:bold;
color:#ffffff;


}

#inhalt
{
margin:5px 15.5% 50px 15.5%;
padding:5px;
border:thin solid yellow;
font-size: 12px;
font-family: Arial;
text-align: left;
color:#ffffff;


}


#wrapper {
}
Zum Vergrößern anklicken....
Ein Doctype habe ich deklariert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


Was auch noch nicht stimmt, ist dass wenn ich nach unten scralle sich nur die inneren boxen verscheiben. Die sollten aber fix an den positionen sein und sich mit dem hintergrund nach unten bewegen, da dieser in schwarz endet ...

Vielen Dank !
bart
 
Zuletzt bearbeitet:
Dass es schwarz ist hängt wohl damit zusammen, dass du für body und #gesamt einen schwarzen Hintergrund definiert hast.
Ansonsten wäre mal ein Link zur Seite hilfreich.
 
Hi !
habs soweit hinbekommen.
wie kann ich eine div box schwarz halb transparent machen ?

background-color:black;
filter:alpha(opacity=80);

hat nix gebracht

ich meine diese newsboxen wie auf www.carnalforge.com (rechts)

vielen dank !
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben