Frage zum positionieren von Text und Überschrieft

Mani · 16. Juni 2010 um 08:13

[LEFT]HEy Leute,
Ich bin gerade dabei meine eigene Hompage zu programmieren, jedoch bin ich schon am verzweifeln weil ich es nicht hinbekomme die ganze Hompage so zu gestalten das Sie sich der Bildschirmauflösung anpass. Weiters verschiebt sie sich auch wenn ich sie mit dem I-Explorer öffne.
Auserdem möchte ich die Navigation fixieren, also wenn ich runterscrolle soll die Navigation fix bleiben. Ich würde mich sehr freun wenn Ihr mir helfen könnt!

Hier das Html:

<head>
    <titel lsdgsdg </titel>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>


<body>

    <div style="position: absolute; left: 20%; top: 2%px" id="Ebene1">    
    <img border="0" src="Bild.jpg" width="800" height="70"></div>
    
    <h1 id="k1">rdzthztrhzdh</h1>


    <ul id="Navigation">
            <li><a href="page2.html">Studien</a></li>
            <li><a href="nav_formatieren.htm">Shops</a></li>
            <li><a href="">Gästebuch </a></li>
      </ul>

    <h1 id="k2">hsddhshsghsdhsdg</h1>


    <p id="zwei">dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</p>

    <h1 id="k3"> sdgdsgsdgsdggddsgds:</h1>

    <p id="drei">dfsdfdsdsfsdfdsfdsfdsf </p>

Hier das Css:

body {
background-color: #FFFFF0;
}

#k1
{
font-family: arial, verdana, sans-serif;
font-size: 200%;

color: CC6600;
position: absolute; 
top:70px;
left:500px;
width: 380px;
heigh: auto;

  border-width: 1%;
 border-style: ridge;
 border-color: gold;

}

#k2

{ font-family: „Times New Roman“, serif;

font-size: 150%;

color: 000000;
position: relative;
top:-400px;
left:180px;

}

#k3

{ font-family: „Times New Roman“, serif;

font-size: 150%;

color: 000000;
position: relative;
top:-400px;
left:180px;

}

#k4
{ font-family: „Times New Roman“, serif;
font-size: 150%;
color:000000;
position:relative;
top:-12px;
left:180px;
}

#zwei {color:#000000;
position:relative;
top: -410px;
left: 180px;
}

#drei {color:#000000;
position:relative;
top: -400px;
left: 180px}

#vier {color:#000000;
position:relative;
top:-17px;
left:180px;}

ul#Navigation {
width: 11%;
height : 100%;
width: 10%;
margin: 0; padding: 0.8em;
border: 1px solid black;
background-color: goldenrod ;
}

html ul#Navigation { /* Korrekturen fuer IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#Navigation li {
list-style: none;
margin: 0.4em; padding: 0;
}

ul#Navigation a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #CC9966;
}

html ul#Navigation a { /* Breitenangaben nur fuer IE */
width: 100%;
w\idth: 8.8em;
}

ul#Navigation a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}

Mfg
[/LEFT]

Quabbe · 16. Juni 2010 um 09:20

Huhu,

versuchs doch mal mit position:fixed; left:0; top:0;. Dann richtet sich die Navi automatisch am Viewport aus und verbleibt auch beim Scrollen in der oberen linken Ecke.

Grüße,
Quabbe

Kornerbrotchen · 16. Juni 2010 um 09:59

Ansonsten wäre ein Link ganz schön.

…und die Verwendung der code-tags.

Mani · 17. Juni 2010 um 13:22

Also das mit dem fixed hat hingehauen.
Das mit der Auflösung habe ich jetzt hinbekommen, eigentlich ist das mit der absolute und relative Programmierung ja ganz simpl, wenn man es mal verstanden hat

Ich habe jedoch noch ein Problem, und zwar habe ich bei der Hompage unten den selben Balken mit den Pfeilen wie ich lrechts habe (ist schlecht ausgedrückt aber ich weiss nicht was ich sonst schreiben soll^^). Ich kann dann den Balcken nach rechts ziehn und meine Hompage rutscht eben rüber, obwohl ich rechts keinen Text habe.

Auf dem Rechner habe ich die Page leider nicht, aber wenn ich daheim bin kann ich den Quelltext posten.

Achja und noch etwas, die älteren Explorer können ja das mit dem relative noch nicht, gibts da eine Möglichkeit dass dann bei der Hompage ein Text ausgegenben wird wie z.B.: Sie benützen eine alte Version des IE bitte installieren Sie die neue um diese Hompage korrekt darzustellen?

mfg

mermshaus · 17. Juni 2010 um 13:29

Du kannst meines Wissens auch conditional comments in den einer HTML-Seite um weitere HTML-Elemente setzen:

Aber welcher IE kann da was genau nicht? Na ja, warten wir mal den Post mit dem aktuellen Quellcode ab.

Mani · 17. Juni 2010 um 20:16

So hier mal der Quellentext:

HTML:

[CODE]

<titel lsdgsdg

Studien
Shops
Gästebuch

Hompages:XXXXX

Überschrift1

dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh

                </p>

Überschrift2

dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh

                </p>

Überschrift2

dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh
dfhdhdfhdfhfdhfdhdfhfdhfdhfdh

                </p>

[/CODE]CSS: [CODE]

body {
background-color: #FFFFF0;
}

#bild1
{
position:relative;
top:20%; left: 0%; width=10px; height=10px;

}

#k1
{
font-family: arial, verdana, sans-serif;
font-size: 200%;

color: CC6600;
position: relative;
top:0px;
left:40%;
width: 380px;
heigh: auto;

border-width: 1%;
border-style: ridge;
border-color: gold;
}

#k2

{ font-family: „Times New Roman“, serif;

font-size: 150%;

color: 000000;
position: relative;
top:0%;
left:20%;

}

#k3

{ font-family: „Times New Roman“, serif;

font-size: 150%;

color: 000000;
position: relative;
top:0%;
left:20%;

}

#k4

{ font-family: „Times New Roman“, serif;

font-size: 150%;

color: 000000;
position: relative;
top:0%;
left:20%;

}

#text1 {color:#000000;
position:relative;
top: -10px;
left: 20%;
}

#text2 {color:#000000;
position:relative;
top: -10px;
left: 20%;
}

#text3 {color:#000000;
position:relative;
top: -10px;
left: 20%;
}

ul#Navigation { position:fixed; top:0px;
left:0px;
width: 15%;
height : 100%;
width: 12%;
margin: 0; padding: 0.8em;
border: 1px solid black;
background-color: goldenrod ;
}

html ul#Navigation { /* Korrekturen fuer IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#Navigation li {
list-style: none;
margin: 0.4em; padding: 0;
}

ul#Navigation a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #CC9966;
}

html ul#Navigation a { /* Breitenangaben nur fuer IE */
width: 100%;
w\idth: 8.8em;
}

ul#Navigation a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}

[/CODE]Mfg

mermshaus · 18. Juni 2010 um 13:53

Da hat’s in CSS und HTML noch einige „Fehler“:

„=“ statt Doppelpunkt: top:20%; left: 0%; width=10px; height=10px;
kein „#“ vor Farbangaben
statt
statt
weitere Tippfehler…

Am besten mal alles validieren: The W3C Markup Validation Service,
The W3C CSS Validation Service

Außerdem – das ist wichtig – fehlt dir ein DOCTYPE. DOCTYPE-Switch und seine Auswirkungen

Der Anfang der Datei könnte etwa so aussehen:

[code]

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>lsdgsdg</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>[/code]

Das löst etliche Darstellungsprobleme im IE, da dieser mit DOCTYPE im Standards-Mode rendert. (Das wird hoffentlich in der oben verlinkten Infoseite alles erklärt.)