Frage zum positionieren von Text und Überschrieft

Mani · 16 Juni 2010

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:
<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>

</body>

</html>

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

Quabbe · 16 Juni 2010

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

Körnerbrötchen · 16 Juni 2010

Ansonsten wäre ein Link ganz schön. :)

…und die Verwendung der code-tags.

Mani · 17 Juni 2010

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

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

- CSS - Conditional comments
- SELFHTML: Stylesheets / CSS-basierte Layouts / Browserweichen

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

Mani · 17 Juni 2010

So hier mal der Quellentext:

HTML:

Code:

<html>

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


<body>

<div style="position: relative; left: 20%; top: 2%px" id="Ebene1">
<img border="0" src="Bild.jpg" width="77%" height="15%"></div>

<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="k1">Hompages:XXXXX</h1>

<h1 id="k2">Überschrift1</h1>

<p id="text1">dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>    


                    </p>

<h1 id="k3">Überschrift2</h1>

<p id="text2">dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>    


                    </p>
<h1 id="k4">Überschrift2</h1>

<p id="text3">dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>
        dfhdhdfhdfhfdhfdhdfhfdhfdhfdh</br>    


                    </p>

</body>


</html>

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;
}

Mfg

mermshaus · 18 Juni 2010

Da hat's in CSS und HTML noch einige "Fehler":

- "=" statt Doppelpunkt: top:20%; left: 0%; width=10px; height=10px;
- kein "#" vor Farbangaben
- <titel> statt <title>
- </br> statt <br />
- 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:

<!DOCTYPE html>

<html>

    <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>

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.)

Frage zum positionieren von Text und Überschrieft

Mani

Neues Mitglied

Quabbe

Mitglied

Körnerbrötchen

Aktives Mitglied

Mani

Neues Mitglied

mermshaus

Senior HTML'ler

Mani

Neues Mitglied

mermshaus

Senior HTML'ler

Neueste Beiträge