tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
3
ZUGRIFFE
643
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 12.01.07 08:42 #1
    mo38 mo38 ist offline Rookie
    Registriert seit
    Jan 2007
    Beiträge
    5
    hallo leute, bin anfänger mit xhtm und css .
    Mein problem : im explorer supi ansicht in firefox verschiebt sich die ansicht. Kann mir einer helfen?

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

    <?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" href="style.css">
<style type="text/css">
.Stil4 {font-size: 12px}
.Stil6 {color: #2B5360; font-weight: bold; font-size: 12px; }
.Stil7 {color: #000000}
body {
    background-color: #FFFFFF;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
</style>
<!--[if IE]>
<style>
ul#navigation{
margin-left: 0px;
}
ul#navigation li a
{
margin-left: -20px;
voice-family:"\"}\""; 
voice-family:inherit;
margin: 0px;
}
</style>
<![endif]-->
</head>
 
<body>
<body>
<h1 id="header">&nbsp;</h1>
        
 
<ul class="Stil1" id="navigation">
     <li><a id="selected" href="index.html">Home</a></li>
     <li><a href="pcservice.html">PC-Service</a></li>
    <li><a href="datenrettung.html">Datenrettung</a></li>
    <li><a href="webdesign.html">Webdesign</a></li>
    <li><a href="#">Notdienst</a>
      <ul>
        <li><a href="kontakt.html">Kontakt</a></li>
      </ul>
    </li>
    <li><a href="#">Impressum</a></li>
    <li><a href="#">AGB</a></li>
</ul>
</p>
<div id="content">
&nbsp;&nbsp;
  <div align="left" class="Stil3"> &nbsp; &nbsp;  &nbsp;&nbsp; &nbsp;&nbsp;       Willkomen auf unserer Internetpr&auml;senz</div>
</div>
    <div id="content2">
  
<p align="justify">&nbsp;</p>
    <p>
    <div align="left">
   
      <p align="left" class="Stil1"><span class="Stil7 Stil4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Wir sind ein junges, dynamisches Team und bieten Ihnen schnelle,<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;zuverl&auml;ssige und 
professionelle Hilfe bei Ihren Computerproblemen<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jeglicher Art und das auch vor Ort.Des weiteren bieten wir einen<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Computer Service und Telefon-Support f&uuml;r gewerbliche
und private<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Nutzer. Wir tauschen einzelne Komponenten, erweitern oder<br /> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;konfigurieren 
komplette PC-Systeme individuell nach Ihren Be-<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d&uuml;rfnissen und W&uuml;nschen. 
Ihre Daten sind weg? Kein Problem, wir stellen Ihre Daten wieder her <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;und sichern sie.
F&uuml;r Ihre eigene Internetpr&auml;senz stehen wir Ihnen gerne mit Beratung und Realisierung <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;zur Seite.</span><br />
</p>
    <p align="left">&nbsp;</p>
    <p align="left">&nbsp;</p>
    <p align="left">&nbsp;</p>
    <p>&nbsp;</p>
</div>  
<div id="rightbox">
 
  
      
       
        <?php  
if (isset ($_REQUEST["fehler"]))  
{  
  echo "Die Zugangsdaten waren ungültig.";  
}  
?>  
<form action="login.php" method="post">  
  Name: <input type="text" name="name" size="16"><br>  
  Kennwort: <input type="password" name="pwd" size="16"><br>  
  <input type="submit" value="Login">  
</form>  
 
      </object>
      <br />
   </p>
    <p align="justify" style="text-decoration: underline; "class="Stil6">Wir sind Partner von:</p>
    <p align="justify" class="Stil4"><a href="http://www.unserefamilienkarte.de" class="Stil7">Familienkarte Rhein Kreis Neuss</a></p>
    <p align="justify" style="text-decoration: underline; "class="Stil6"> PC-Systeme finden Sie bei:</p>
    <p align="justify" class="Stil4"> <a href="http://www.pandaro.de" class="Stil7">Pandaro</a></p>
</div>
    <p align="auto">
    <p align="left">
 
    <p>
<p>&nbsp;</p>
</body>
</html>

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

    *
{
padding:0px;
margin:0;
}   
body
{
    font: 14px "Trebuchet MS", verdana, arials, sans-serif;
    color: #000;
    background: #ccc;
    
    background-image:url(Unbenannt-4.png);
        
}
p
{
margin: 1em 0;
}
a.anker
{
float: left;
text-decoration: none;
color: #fff;
}
hr
{
background: #aaa; /* Mozilla 1.4 */
color: #aaa; /* IE 6 */
border: #aaa; /* Opera 7.11 */
 
}
h2
{
font-size: 40px;
}
/*
----------Header-----------------------------
*/
#header
{
height: 135px;
line-height: 85px;
 
margin:-1px -1px -1px 0;
padding-left: 45px;
 
background-image:url(logodaten.png);}
#header span
{
font-weight: normal;
 
}
/*
----------Navigation-------------------------
*/
ul#navigation
{
float: left;
position:absolute;
margin: 65px 0 0 30px;
width: 147px;
list-style: none;
border-top: 1px solid #333;
background-image:url(Unbenannt-8.png);
border-style:none;
overflow:auto;
clear:none;
 
}
ul#navigation li
{
text-align: center;
}
ul#navigation li a
{
display: block;
height: 27px;
width: 147px;
line-height: 27px;
text-decoration: none;
color: #333;
background-image:url(Unbenannt-5.png);
background-style:none;
}
ul#navigation li a:hover
{
background: #5296b4;
color: #eaeaea;
background-image:url(Unbenannt-6.png)
}
ul#navigation li a:active
{
background: #5296b4;
color: #eaeaea;
background-image:url(Unbenannt-6.png)
}
/*
----------Inhalt----------
*/
p#content
{
padding: 15px;
margin: 0px 0 0px 200px;
float:none;
}
 
#content2
{
float:auto;
padding:10px;
margin: 0px 10px 0px 150px;
list-style:none;
width:
auto;
}
 
#rightbox {
  
  width: 147px;
  height:400px;
  float: right;
 list-style:none;
 
  
  margin-top:0px;
  margin:-410px -5px
   0px 0;;
  }
 
 
/*
----------Footer------------
*/
p#footer
{
widht:350;
height: 400px;
line-height: 20px;
background: #000000;
text-align: center;
}
.Stil1 {color: #000066}
.Stil3 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
}
     
  2. 12.01.07 12:27 #2
    Maik Tutorials.de Gastzugang
    Hi,

    wenn du das Einrücken der Navigation meinst, dann wende mal folgende CSS-Regel auf das Listenmenü an:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    ul#navigation
{
float: left;
position:absolute;
[b]margin: 65px 0 0 0;
padding: 0;[/b]
width: 147px;
list-style: none;
border-top: 1px solid #333;
background-image:url(Unbenannt-8.png);
border-style:none;
overflow:auto;
clear:none;
}

    Und bitte beachte beim Verfassen deiner Beiträge den Punkt 15 unserer Netiquette bzgl. der Groß- und Kleinschreibung. Vielen Dank.
     
  3. 12.01.07 18:38 #3
    mo38 mo38 ist offline Rookie
    Registriert seit
    Jan 2007
    Beiträge
    5
    Danke supi von dir es funktioniert nur eine Frage noch, wie bekomme ich es noch hin, das es die selbe Höhe behält die Navigation und rightbox , so das es nicht nach oben verschiebt?

    danke im Vorraus

    PS:habe mir nun das Buch bestellt Einführung in xhtml und css
     
  4. 12.01.07 19:01 #4
    Maik Tutorials.de Gastzugang
    Du musst für die rechte Box #rightbox den gleichen Außenabstand nach oben bestimmen, wie für die Listennavigation:

    Code :
    1
2
3
4
5
6

    #rightbox {
  width: 147px;
  height:400px;
  float: right;
  [b]margin-top:65px;[/b]
  }

    Und hier der überarbeitete HTML-Code, in dem ich die Reihenfolge der floatenden Boxen getauscht und einige "leere" Textabsätze entfernt habe:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

    <body>
 
<h1 id="header">&nbsp;</h1>
 
<ul class="Stil1" id="navigation">
     <li><a id="selected" href="index.html">Home</a></li>
     <li><a href="pcservice.html">PC-Service</a></li>
    <li><a href="datenrettung.html">Datenrettung</a></li>
    <li><a href="webdesign.html">Webdesign</a></li>
        <li><a href="#">Notdienst</a>
          <ul>
            <li><a href="kontakt.html">Kontakt</a></li>
      </ul>
        </li>
    <li><a href="#">Impressum</a></li>
    <li><a href="#">AGB</a></li>
</ul>
 
<div id="rightbox">
        <?php
if (isset ($_REQUEST["fehler"]))
{
  echo "Die Zugangsdaten waren ungültig.";
}
?>
<form action="login.php" method="post">
  Name: <input type="text" name="name" size="16"><br>
  Kennwort: <input type="password" name="pwd" size="16"><br>
  <input type="submit" value="Login">
</form>
 
      </object>
      <br />
 
    <p align="justify" style="text-decoration: underline; "class="Stil6">Wir sind Partner von:</p>
    <p align="justify" class="Stil4"><a href="http://www.unserefamilienkarte.de" class="Stil7">Familienkarte Rhein Kreis Neuss</a></p>
    <p align="justify" style="text-decoration: underline; "class="Stil6"> PC-Systeme finden Sie bei:</p>
        <p align="justify" class="Stil4"> <a href="http://www.pandaro.de" class="Stil7">Pandaro</a></p>
</div>
 
<div id="content">
&nbsp;&nbsp;
  <div align="left" class="Stil3"> &nbsp; &nbsp;  &nbsp;&nbsp; &nbsp;&nbsp;       Willkomen auf unserer Internetpräsenz</div>
</div>
 
<div id="content2">
<div align="left">
 
      <p align="left" class="Stil1"><span class="Stil7 Stil4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Wir sind ein junges, dynamisches Team und bieten Ihnen schnelle,<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;zuverlässige und
professionelle Hilfe bei Ihren Computerproblemen<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;jeglicher Art und das auch vor Ort.Des weiteren bieten wir einen<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Computer Service und Telefon-Support für gewerbliche
und private<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Nutzer. Wir tauschen einzelne Komponenten, erweitern oder<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;konfigurieren
komplette PC-Systeme individuell nach Ihren Be-<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dürfnissen und Wünschen.
Ihre Daten sind weg? Kein Problem, wir stellen Ihre Daten wieder her <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;und sichern sie.
Für Ihre eigene Internetpräsenz stehen wir Ihnen gerne mit Beratung und Realisierung <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;zur Seite.</span><br /></p>
 
</div>
</div>
 
</body>
     
« Nach width:100% wieder mit Auto-Wert arbeiten? | 'Trennstriche' in vertikalem Menu »

Ähnliche Themen

  1. Inhalt verschiebt sich im Firefox
    Von mennepaul im Forum CSS
    Antworten: 16
    Letzter Beitrag: 24.09.08, 07:23
  2. Div verschiebt sich in Firefox
    Von alex130 im Forum CSS
    Antworten: 17
    Letzter Beitrag: 14.02.08, 21:51
  3. Untere tabelle verschiebt sich bei Firefox
    Von babone im Forum CSS
    Antworten: 3
    Letzter Beitrag: 25.03.06, 14:05
  4. Design verschiebt sich beim verkleinern der Ansicht
    Von cssfieber im Forum CSS
    Antworten: 6
    Letzter Beitrag: 17.09.05, 21:47
  5. Ebene verschiebt sich im Firefox
    Von England im Forum HTML & XHTML
    Antworten: 6
    Letzter Beitrag: 15.03.05, 17:00