Hilfe Css

pepe_C · 4. Oktober 2006

hallo an alledie mir helfen können / wollen.

ich möchte mitels css mehrere div container plazieren und ausrichten und ich bekomme es einfach nicht hin

ich möchte einen frame nachbauen

container

head head ende

navi main

navi ende main ende

container ende

es sollte sich der wechselnden auflösung anpassen aber wie mache ich das?

helft mir bitte

toppy · 4. Oktober 2006

container

head head ende
navi main

navi ende main ende

container ende

Versteh nicht wirklich was du damit meinst...

Vielleicht hilft dir aber schon mein N00b-Thread etwas weiter --> Link

geloescht_JesterDay · 5. Oktober 2006

container

head head ende
navi main

navi ende main ende

container ende
...

helft mir bitte

:confused:

Hilf du uns erstmal und sag uns wie das Ding genau aussehen soll.

Ah, hier im Quote kann man es erahnen... Du hättest das in ein Code-Tage packen sollen:


container


head          head ende

navi           main


navi ende    main ende


container ende

Also mal aus dem Kopf (die CSS Angaben mach ich in die Tags, besser isses natürlich anders...):


<div id="head">

  Head

</div>

<div id="navi" style="float: left; width: 15%;">

  <ul>

    <li>Link1</li>

    <li>Link2</li>

  </ul>

</div>

<div id="main" style="width: 80%; margin-left: 20%;">

  Main

</div>

Und wenn du meinst mit "es sollte sich der wechselnden auflösung anpassen", dass es die ganze Höhe des Fensters nutzen sollte: vergiss es Das bekommst du so nicht hin, nur im Quirks-Mode im IE. Hatte darüber schon lange Diskussionen mit Aiun hier im Forum Such zur Not mal danach.

pepe_C · 5. Oktober 2006

okay ich sehe ein das man aus dem post nichts nehmen kann also hier der code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Unbenanntes Dokument</title>

</head>

<body>

</div>

Hausverwaltung<br />Wohnungsbörse

</div>

</ul>

<li><div id="inmenue"><a href="#" onclick="javascript:zeigen('submenue2')">Leistungen</a></div></li>

<li><div id="inmenue"><a href="#" onclick="javascript:zeigen('submenue3')">Verwaltungen</a></div></li>

<li><div id="inmenue"><a href="#" onclick="javascript:zeigen('submenue4')">Top-Angebote</a></div></li>

<li><div id="inmenue"><a href="#" onclick="javascript:zeigen('submenue5')">Verkauf</a></div></li>

<li><div id="inmenue"><a href="#">Häuser</a></div></li>

<li><div id="inmenue"><a href="#" >Wohnungen</a></div></li>

<li><div id="inmenue"><a href="#">Grundstücke</a></div></li>

<li><div id="inmenue"><a href="#">Gewerbe</a></div></li>

</ul>

<li><div id="inmenue"><a href="#" onclick="javascript:zeigen('submenue6')">Vermietung</a></div>

<li><div id="inmenue"><a href="#">1 Raum Wohnungen</a></div></li>

<li><div id="inmenue"><a href="#">2 Raum Wohnungen</a></div></li>

<li><div id="inmenue"><a href="#" >3 Raum Wohnungen</a></div></li>

<li><div id="inmenue"><a href="#">4 Raum Wohnungen</a></div></li>

<li><div id="inmenue"><a href="#">5 Raum Wohnungen</a></div></li>

<li><div id="inmenue"><a href="#">möblierte Wohnungen</a></div></li>

<li><div id="inmenue"><a href="#">Häuser</a></div></li>

<li><div id="inmenue"><a href="#">Gewerbe</a></div></li>

</ul>

</li>

<li><div id="inmenue"><a href="#" onclick="javascript:zeigen('submenue7')">Kontakt</a></div>

<li><div id="inmenue"><a href="#">eMail</a></div></li>

<li><div id="inmenue"><a href="#">Kontaktformular</a></div></li>

<li><div id="inmenue"><a href="#">So finden Sie uns</a></div></li>

</ul>

</li>

<li><div id="inmenue"><a href="#" onclick="javascript:zeigen('submenue8')">Impressum</a></div></li>

</ul>

</div>

<tr>

<p>Wenn jetzt hier natürlich eine Überschrift steht siehts echt dünne aus!!!!!!</p>

</td>

</tr>

<tr>

<td>

text

text

text

text

text

</td>

</tr>

</table>

</div>

</body>

</html>

==================================================================================================================

===============================Hier die ausgelagerte CSS Datei============================================================

===================================================================================================================

/* CSS Document */

html, body, textarea {

background-color:#8C8CC6;

color:#FFFFFF;

scrollbar-base-color:#8C8CC6;

scrollbar-3d-light-color:#FFFFFF;

scrollbar-arrow-color:#FFFFFF;

scrollbar-darkshadow-color:#000000;

scrollbar-face-color:#8C8CC6;

scrollbar-highlight-color:#FFFFFF;

scrollbar-shadow-color:#000000;

scrollbar-track-color:#ACACE6;margin:0;

}

/*.gesamt{ top:0px; left:0px; vertical-align:middle; max-height:100%; max-width:100%; }*/

.kopfbild{ position:absolute; top:0px; left:0px; width:160px; height:120px;}

.inhaltkopfbild{ position:absolute; top:3px; left:3px;}

.kopftext{ position:absolute; top:0px; left:160px; height:120px; width:844px;}

.inhaltkopftext{ position:absolute; left:4px; top:4px; width:836px; height:116px; font:Arial, Helvetica, sans-serif; font-size:36px; font-weight:bolder; text-align:center;}

/*================================================================================================*/

.anzeige

{ position:relative;

left: 160px;

top: 120px; width:844px; height:493px; overflow:auto;

}

.anzeige p{text-align:center; font:Arial, Helvetica, sans-serif; font-size:14px;}

/*================================================================================================*/

.navigation

{

position:absolute;

top: 120px; width:160px;

left:0px;

}

.inhaltnavigation{ position:absolute; top:20px; left:3px; width:154;}

/*======= Anfang Formatierung Menü =============================*/

ul, li

{

margin:0px;

padding:0px;

list-style-type: none; /*Dafür das keine vorzeichen da stehen*/

}

ul#menue {

width: 155px;

}

ul#menue li a

{

margin:1px 0;

line-height:25px;

text-align:center;

border-style:none;

display:block;

text-decoration:none;

}

ul#menue li a + ul.submenue

{

display:none;

}

ul#menue li a:focus + ul.submenue

{

display:block;

}

ul#submenue1 li a, ul#submenue2 li a, ul#submenue3 li a, ul#submenue4 li a, ul#submenue5 li a, ul#submenue6 li a, ul#submenue7 li a, ul#submenue8 li a, ul#submenue9 li a{background:none; background-image:url(../bilder/button/subhover.gif); background-repeat:no-repeat;/* IE */}

/*======= Ende Formatierung Menü =============================*/

/*================= Formatierung fuer die Menuepunkte ===========================*/

#inmenue{ background-image:url(../bilder/button/hauptvorhover.gif); background-repeat:no-repeat; font-weight:bold; font-family:Arial, Helvetica, sans-serif; font-size:12px; }

#inmenue a:link{ color:#FFFFFF;}/*===hier stehen die untermenue sachen jetzt die schriftfarbe ====*/

#inmenue a:visited{ color:#FFFFFF;}/*=== hier steht die grundeinstellung der link beschriftung hier farbe ===*/

#inmenue a:hover{ background-image:url(../bilder/button/subvorhover.gif); background-repeat:no-repeat; /*color:red;*/}/*==das ist beim überfahren des links schriftfarbe

und hintergrundfarbe aendern sich ===*/

#inmenue a:active{border:0px;border-style:none;} /* das geschieht wenn ich den link klicke schriftfarbe aendert sich =====*/

/*================================================================================================*/

links steht ein klappmenü mit JS geklärt funktioniert auch alles

jetzt würde ich halt 3 div machen

einen head

einen navi

und

ein content wenn man so will

mein problem ist halt das ich nicht damit zu rande komme die DIV's auszurichten

pepe_C · 5. Oktober 2006

<div id="head">
Head
</div>
<div id="navi" style="float: left; width: 15%;">
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
<div id="main" style="width: 80%; margin-left: 20%;">
Main
</div>

soll es den so einfach ssein?

geloescht_JesterDay · 6. Oktober 2006

soll es den so einfach ssein?

Die Grundform bekommst du so einfach hin, ja. Natürlich sieht es damit noch nicht unbeding gut aus (padding würd ich z.B. noch setzen u.ä.), aber das kannst du ja allein probieren

EDIT:

Ach ja, hab deinen Quelltext mal kurz angesehen.


<div class="kopfbild">

<div class="inhaltkopfbild">

<img src="bilder/logos/ScherzerLogoWEB_150_mal_117.jpg" align="middle" />

</div>

</div>

Du kannst nicht nur divs per CSS formatieren. Ddas div um das Bild (inhaltkopfbild) kannst du also weglassen. Gib dem img eine id (kopfbild oder so) und formatier das. Ob du das div Kopfbild ganz außen brauchst... also ich würde sagen nein. Außerdem würde ich bei "kopfbild" keine Klasse sondern eine id nehmen. Eine id ist dokumentenweit eindeutig (bzw. sollte es sein) und eine class kann mehrfach vorkommen. Das ist der einzige Unterschied. Und dein Kopfbild wird es ja nur einmal geben.

Anmelden

Hilfe Css

Empfohlene Beiträge

pepe_C

Link zu diesem Kommentar

Auf anderen Seiten teilen

toppy

Link zu diesem Kommentar

Auf anderen Seiten teilen

geloescht_JesterDay

Link zu diesem Kommentar

Auf anderen Seiten teilen

pepe_C

Link zu diesem Kommentar

Auf anderen Seiten teilen

pepe_C

Link zu diesem Kommentar

Auf anderen Seiten teilen

geloescht_JesterDay

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

Umsehen

Aktivitäten

Stellenanzeigen

Blog

Über Fachinformatiker.de