 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
LioGetz
Threadersteller
Dabei seit: 24.03.2003
Ort: Aachen
Alter: 44
Geschlecht: 
|
Verfasst Fr 23.03.2007 14:32
Titel [CSS] Positionierungshilfe |
  |
|
Hallo allerseits,
ich weiß, von diesen CSS-Help-Threads gibts schon ungefähr 2 Trillionen, aber so "kurz" vor dem Wochenende benötige ich dennoch eure Hilfe bzw. euer Wissen.
Folgendes, ich versuche mich gerade an einer privaten Page für mich - diesmal ganz ohne Tabellen und schön valide. Soweit - so gut, leider komme ich noch aus dem <table>-Zeitalter, und diese ganze DIV/CSS-Positionierung ist mir noch ein kleines Rätsel...Ich hab mich dann mit SelfHTML mal schlau gemacht und mein Glück versucht. Anfangs ging es noch ganz gut, aber ich komm total mit den Verschachtelungen nicht zurecht und weiß langsam nicht mehr weiter.
So, damit ihr euch nen Einblick verschaffen könnt, erstmal ein paar Shots:
SO soll es aussehen  .
SO sieht es im Moment im FF aus (ich hab mal nen blauen Rahmen drum gemacht, damit ich mich besser zurecht finde, aber eigentlich garnicht mal so schlecht ).
SO siehts im Moment im IE 6 aus (total verschossen).
Und SO sieht mein Versuch mit ner eingefügten Subnavi aus...auch total vermurkst, weil immer wenn die die Subnavi irgenwie verschiebe sich der restliche Text auch mitschiebt...
Ich bin ratlos, und würde mich freuen wenn ihr mir bei ein paar Punkten auf die Sprünge helfen könntet.
1. Schön, mein FireBug zeigt ein Häkchen, also Valide, aber trotzdem ist alles schrott
2. Header und Hauptnavi sehen (im FF) ganz gut aus, aber was mache ich damits im IE passt??
3. Im IE macht der das DIV viel größer, es gibt Scrollbalken, mein Footer ist nicht mehr am Boden usw usw usw...warum?
4. Wie kriege ich die Subnavi da "vernünftig" positioniert.
5. Und generell - würd mich über Codeverbesserungen & Anregungen freuen - ich hab ne Menge gelesen und mir ne Menge zusammengepostet - aber so "richtig" scheint mir das nicht zu sein...(Verschachtelungen, Klassen, an welcher Stelle (also Hirarchie) die DIVS stehen müssen usw...
6. Wie gesagt, der erste Screenshot zeigt das "wie es aussehen soll", aber wie komme ich dahin???
7. Als kleine Schönheitskorrektur...Die Hauptnavi soll auch links und rechts durch ne gepunktete Linie abgegrenzt sein. Wie geht das? Muss ich da im CSS wieder was neu definieren?
Damit der Post nich noch länger wird, poste ich den Code mal nicht, aber die Page steht (im Momentanen Zustand) HIER und das CSS HIER
Vielen Dank im voraus!!!
CU
Lio 
Zuletzt bearbeitet von LioGetz am Fr 23.03.2007 16:00, insgesamt 1-mal bearbeitet
|
|
| |
   |
 |
LioGetz
Threadersteller
Dabei seit: 24.03.2003
Ort: Aachen
Alter: 44
Geschlecht:
|
Verfasst Sa 24.03.2007 13:06
Titel
|
|
|
Update:
Danke für die Hilfe 
Ich hab mich gestern abend nochmal hingesetzt, und wusste mir nicht anders zu helfen als aus dem einen Content-DIV zwei DIVS zu machen und die dann "irgendwie" zu positionieren...
Mittlerweile siehts (zumindest unter 1280 x 800) ganz "ok" aus, aber es gibt noch Probleme.
Könnt ihr mal bitte den Code checken und sagen was ich falsch mache?!
1. Im IE (6) rutscht meine border-bottom (graue Linie) vom Menü irgendwie ca 10px zu weit nach unten, wieso?
2. Im IE wird meine <hr> nicht 360px lang dargestellt - wie es in der CSS eigentlich angegeben ist.
3. Das Main-Menü sitzt irgendwie nicht "mittig" in der Spalte, genauso wie die gepunktete Linie nicht perfekt sitzt (auch unterschiedlich im FF und IE). Außerdem hab ich immer noch das Problem das links vom "home" und rechts vom "kontakt" ne Abschlusslinie sein soll...(im IE ist komischerweise links neben dem Home eine - im FF nicht).
4. Mein Footer ist immer noch nicht immer unten - es gibt hier zwar diverse Footer-Threads, aber daraus wurde ich nicht schlau...
Danke fürs Code checken, und hier kommt er :
(auch hier zum angucken...
Die Index:
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Titel</title>
</head>
<body>
<div id="container">
<div id="head">
</div>
<div id="logo">
</div>
<div id="mainnavi">
<ul>
<li><a class="inaktiv">Home</a></li>
<li><a class="inaktiv">Profil</a></li>
<li><a class="inaktiv">Angebot</a></li>
<li><a class="inaktiv">Referenzen</a></li>
<li><a class="inaktiv">Kontakt</a></li>
</ul>
</div>
<div id="left">
<h1>Angebot</h1>
<h3>"Eine gute Idee die man nicht kommunizieren kann ist keine gute Idee"</h3>
<hr />
</div>
<div id="right">
<h2>Das hier ist die Subheadline. Sie ist FETT geschrieben und gibt nen kleinen Teaser zum Thema. Mehr als 1-2 Sätze sollten es aber nicht sein, sonst sieht es nicht mehr schön aus.</h2>
<p>So, und hier kommt nun der normale Textteil...der Fließtext sozusagen. Ich hau dann mal was Blindtext rein :D.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
|
und die dazugehörige CSS:
| Code: |
body {
height: 100%;
margin: 0px;
padding: 0px;
font: 76.1%/1.3em Arial, Verdana, Helvetica, sans-serif;
/* font-weight: bold; */
}
div#container {
min-height: 100%;
position: relative;
}
* html #container {
height: 100%;
}
/* ---------------------------------------- DESIGN ---------------------------------------- */
div#head { /* OBERE GRAUE ZEILE */
width: 100%;
height: 130px;
background: url(gfx/bg_head.jpg) repeat-x;
border-bottom: 1px solid #828282;
margin: 0px;
padding: 0px;
}
div#logo { /* SCHRIFTZUG */
width: 220px;
height: 130px;
background: url(gfx/logo.jpg) no-repeat;
position: absolute;
margin-left : -110px; /* hälfte der Breite abziehen zur mittigen ausrichtung */
top: 0px;
left: 50%;
padding: 0px;
}
div#footer {
position: absolute;
bottom: 0px;
left: 0px;
clear: both;
width: 100%;
height: 20px;
border-top: 1px solid #828282;
background: url(gfx/bg_mainmenue.jpg) repeat-x;
margin: 0;
padding: 0;
}
/* ---------------------------------------- DESIGN ENDE ---------------------------------------- */
/* ---------------------------------------- NAVI ---------------------------------------- */
div#mainnavi{
position: relative;
height: 20px;
border-bottom: 1px solid #828282;
background: url(gfx/bg_mainmenue.jpg) repeat-x;
margin-top: 0px;
margin-bottom: 0px;
color: #828282;
font-variant: small-caps;
}
#mainnavi ul{
position: relative;
text-align: center;
margin-left: 0px;
margin-top: 0px;
}
#mainnavi li{
list-style-type: none;
padding: 0em 1em;
border-left: 1px dotted #828282;
display: inline;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
#mainnavi li:first-child {
border: none;
}
a.inaktiv { color:#828282; text-decoration:none;}
a.aktiv { color:white; text-decoration:none;}
/* ---------------------------------------- NAVI ENDE ---------------------------------------- */
/* ---------------------------------------- CONTENT ---------------------------------------- */
div#content {
width: 600px;
height: 360px;
position: absolute;
margin-left : -300px; /* hälfte der Breite abziehen zur mittigen ausrichtung */
top: 190px;
left: 50%;
padding: 0;
border-width:0px;
border-style:solid;
border-color:blue;
}
div#left {
width: 200px;
height: 360px;
position: absolute;
margin-left : -220px; /* hälfte der Breite abziehen zur mittigen ausrichtung */
top: 190px;
left: 50%;
padding: 0;
border-width:0px;
border-style:solid;
border-color:blue;
}
div#right {
width: 400px;
height: 360px;
position: absolute;
margin-left : 0px; /* hälfte der Breite abziehen zur mittigen ausrichtung */
top: 190px;
left: 50%;
padding: 0;
border-width:0px;
border-style:solid;
border-color:blue;
}
hr {
width: 1px;
height: 360px;
color:1E1E1E;
position: absolute;
top: 0px;
margin-left: 200px;
margin-top: 0px;
}
/* ---------------------------------------- CONTENT ENDE ---------------------------------------- */
/* ---------------------------------------- TYPO ---------------------------------------- */
h1 { /* HEADLINE */
font-family: Times New Roman;
color: #505050;
font-size: 30px;
font-variant:small-caps;
position: relative;
text-align: right;
margin-right: 20px;
margin-top: 50px;
}
h2 { /* SUBHEADLINE über Fließtext */
font-family: Verdana;
color: #1E1E1E;
font-size: 12px;
line-height: 18px;
text-align:left;
position: relative;
top: 0px;
margin-left:0px;
margin-top: 0px;
font-weight: bold;
}
h3 { /* ZITAT unten links */
font-family: Times New Roman;
color: #B4B4B4;
font-size: 12px;
line-height: 18px;
text-align:right;
position: absolute;
top: 0px;
font-style: italic;
margin-top: 250px;
margin-right: 20px;
}
p { /* FLIEßTEXT */
font-family: Verdana;
position: relative;
top: 0px;
color: #1E1E1E;
font-size: 12px;
line-height: 18px;
text-align:left;
margin-left:0px;
}
/* ---------------------------------------- TYPO ENDE ---------------------------------------- */
|
Danke im voraus...
CU
Lio
Zuletzt bearbeitet von LioGetz am Sa 24.03.2007 13:08, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
| |
|
|
| Ähnliche Themen |
[CSS] Bräuchte "Positionierungshilfe"...
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
