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

2 Divs nebeneinander

T

Tukurashi

Neues Mitglied
Hallo,
ich arbeite gerade an meiner Facharbeit,die ich morgen abgeben muss!
Ich schreibe über den Anime:Chihiro´s Reise in Zauberland

Einer der Vorgaben ist:
Es gibt 2 Spalten,wobei in der linken Spalte ein Menü mit Hover-Effekt ist!

Das Menü habe ich schon hinbekommen.Dort stehen die Namen der Charaktere drin.
Ich möchte aber neben dem Menü einen div block setzen,weil ich dort noch Informationen über den jeweiligen Charakter platieren möchte!

Die CSS-Datei wirkt ein bisschen voll,aber ich soll 6 Seiten in eine css-Datei schreiben,aber das ist unwichtig!

Meine Fragen:
Was habe ich falsch gemacht?
Wie ist es richtig?

CSS:

body
{
background-image:url(http://wallpapers-3d.ru/sstorage/53/2011/06/image_531006111113213188026.jpg);
font-family: cursive;
font-size:20px;
background-size: 100%;

}

#navibereich li {
display: inline;
list-style-type: none;
}

#navibereich {
background-color: #F7FFC3;
padding: 4px 0;
border-top: 3px solid #6688BC;
border-bottom: 3px solid #6688BC;
margin: 0;
}

#navibereich a {
color: black;
text-decoration:none;
padding: 4px 8px;
}

#navibereich a:hover {
background-color: #EDEDF8;
}



}
#Bg
{
width: 100px
}


#cha_menu {
background-color:azure;
width: 140px;
height: auto;

}

#cha_navi li {
list-style-type: none;
}

#cha_menu a {
text-decoration: none;
color: black;
}

#cha_menu a:hover {
background-color: #EDEDF8;
}

#cha_navi {
background-color: #F7FFC3;
padding: 4px 0;
border-left: 3px solid #668BCC;
border-right: 3px solid #668BCC;
margin: 0;

}
#rez_body
{
background-image:url(ghibli-gangHD.jpg);
font-family: cursive;
font-size:20px;
background-size: 100% !important;
}
#_h1
{
font-family:cursive;
font-size:50px;
text-align:center
}

div.therez
{
text-align: center;
border-style: solid;
border-width:medium;
font-size: 31px;
background-image: url(platzhalter.jpg);
text-align: center
}

div.critics {
height: auto;
width: auto;
background-color: rgba(0, 0, 0, 0.3);
font-size: 30px;
z-index: 1;
}


a.rez_links {
color:lightblue;
text-decoration: none;
}

p.rez_txt {
color: white
}
}
#impbody
{
background-image:url(tin.jpg);
font-family:cursive;
font-size:20px;
background-size: 100%;
text-align: center
}

#impinhalt {
background-color: black;
width: auto;
height: auto;
border-radius: 18px;
text-align: center
}

h2.imph2
{
color:lightblue
}
h3
{
font-family:cursive;
font-size:50px;
color: lightblue
}

p.impp
{
color:blue;
}

img.imp_pics_r
{
float: left;
width: auto;
height: auto;

}

img.imp_pics_c
{
width: 150px;
height: 150px;

}

HTML:

<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="ChihirosReisenMain.css">
<title>Chihiro`s Reise ins Zauberland</title>
</head>
<body>
<h1 id="_h1">Chihiro´s Reise ins Zauberland</h1>

<ul id="navibereich">
<li id="navi01"><a href="ChihirosReisen.html">Startseite</a></li>
<li id="navi02"><a href="ChihirosReisenHandlung.html">Handlung</a></li>
<li id="navi03"><a href="ChihirosReisenCha.html">Charaktere</a></li>
<li id="navi04"><a href="ChihirosReisenRez.html">Rezensionen</a></li>
<li id="navi05"><a href="ChihirosReisenReview.html">Review</a></li>
<li id="navi06"><a href="ChihirosReisenImp.html">Impressum</a></li>
</ul>

<div id="cha_main">
<br>
<div id="cha_menu">
<ul id="cha_navi">
<li id="cha00"><a href="ChihirosReisenCha.html">Übersicht</a></li>
<li id="cha01"><a href="Chihiro.html">Chihiro Ogino</a></li>
<li id="cha02"><a href="Haku.html">Haku</a></li>
<li id="cha03"><a href="Yubaba.html">Yubaba</a></li>
<li id="cha04"><a href="Akio.html">Akio Ogino</a></li>
<li id="cha05"><a href="Aniyaku.html">Aniyaku</a></li>
<li id="cha06"><a href="Bou.html">Bou</a></li>
<li id="cha07"><a href="Chichiyaku.html">Chichiyaku</a></li>
<li id="cha08"><a href="Faulgott.html">Faulgott</a></li>
<li id="cha09"><a href="Flussgott.html">Flussgott</a></li>
<li id="cha10"><a href="Froschmann.html">Froschmann</a></li>
<li id="cha11"><a href="Kamaji.html">Kamaji</a></li>
<li id="cha12"><a href="Kashira.html">Kashira</a></li>
<li id="cha13"><a href="Lin.html">Lin</a></li>
<li id="cha14"><a href="Ohngesicht.html">Ohngesicht</a></li>
<li id="cha15"><a href="Ryuu.html">Ryuu</a></li>
<li id="cha16"><a href="Yu.html">Yu</a></li>
<li id="cha17"><a href="Yuna.html.html">Yuna</a></li>
<li id="cha18"><a href="Yuuko.html">Yuuko Ogino</a></li>
<li id="cha19"><a href="Zeniba.html">Zeniba</a></li>
<li id="cha20"><a href="Elevator.html">Elevator</a></li>
<li id="cha21"><a href="Kuken.html">Küken</a></li>
<li id="cha22"><a href="Papiervogel.html">Papiervogel</a></li>
<li id="cha23"><a href="Russmannchen.html">Rußmännchen</a></li>
<li id="cha24"><a href="Ushioni.html">Ushioni</a></li>
<li id="cha25"><a href="Kasuga.html">Kasuga</a></li>
<li id="cha26"><a href="Onama.html">Onama</a></li>
</ul>
</div>
<div id="cha_info">


<p>jjeje</p>






</div>

</div>
 
Hallo.

Warum diese vielen iD's.
Ist da wirklich jeder Link anders formatiert oder wäre es da nicht sinnvoller mit Klassen zu arbeiten was die CSS Datei erheblich verkleinern würde.

Ich würde dir ausserdem noch empfehlen den HTML5 Doctype zu verwenden und dann die HTML5 Tags wie <header> oder <nav> zu benutzen.

Gruss
Elroy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben