XHTML Fragen von einem Anfänger

Naruto123 · 12 April 2010

Wollte mal ein Design umsetzen, das ich gestern für Lernzwecke gemacht habe.
Aber in der Navigationsleiste oben bekomme ich einfach die Links nicht auf die Leiste.
Die sind entweder links daneben oder dahinter.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" lang="de">
  
  <head>

    <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
    <title>Türkis Design - Übung</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
  
  </head>
  
  <body>

    <div id="header">
      <img src="Bilder/page-header.jpg" alt="Beispielname.de" width="370px" height="103px" />
    </div>  
    
    <div id="main-navi">
      <img src="Bilder/page-main-navigation.gif" alt="Navigation" width="1px" height="46px" />
    </div>      
    
    <div id="main-navi-links">
      <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
      </ul>
    </div>            
  
  </body>

</html>

Code:

/* CSS Document */

body, html {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #007A6D;
}

#header {
  position: relative;
  width: 370px;
  height: 103px;
  margin: 0px auto;
}

#main-navi img {
  position: absolute;
  width: 100%;
  height: 46px;
  background-repeat: repeat-x;
}


#main-navi-links li {
  list-style: none;
  float: left;
  padding: 10px;
}

Habe beide Codes validiert und sie müssten valide sein.

Leuchte84 · 12 April 2010

Also ich bin jetzt nicht wirklich der CSS-Kenner, aber denke es wäre sinnvoller die "main-navi-links" einfach mit einem "background-image" zu unterlegen und die Navigrafik aus dem HTML-Code zu streichen...

lg

Naruto123 · 12 April 2010

Leuchte84 schrieb:
Also ich bin jetzt nicht wirklich der CSS-Kenner, aber denke es wäre sinnvoller die "main-navi-links" einfach mit einem "background-image" zu unterlegen und die Navigrafik aus dem HTML-Code zu streichen...

lg

Ahh, vielen dank.
Habe es gestern oder so in einem Tutorial gesehen, aber vergessen wie man das macht.

Werde es später mal versuchen.

Naruto123 · 24 April 2010

Habe mich mal an die Umsetzung eines Designs gewagt, aber ich krieg die Contentbox rechts einfach nicht auf die gleiche Höhe wie die Navigationsbox links.
Hier mal die Codes:

Code:

<!DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0  Strict//EN" 
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html   xmlns="https://www.w3.org/1999/xhtml" lang="de">
  
    <head>

<meta http-equiv="content-type"   content="text/html; charset=windows-1250" />
<title>Türkis   Design - Übung</title>
<link href="style.css"   type="text/css" rel="stylesheet" />
  
  </head>
  
   <body>

<div id="header">
  <img   src="Bilder/page-header.jpg" alt="Beispielname.de" width="370px"   height="103px" />
</div>  

<div   id="main-navi">
  <ul>
    <li><a   href="#">Startseite</a></li>
    <li><a   href="#">Startseite</a></li>
    <li><a   href="#">Startseite</a></li>
    <li><a   href="#">Startseite</a></li>
  </ul>
  </div>
   
<div id="sub-navi">
  <div   id="sub-navi-header">
    <div id="sub-navi-ueberschrift">
       Navigation
      <div id="hyperlinks">
            <ul>
            <li><a   href="#">Hyperlink</a></li>
              <li><a href="#">Hyperlink</a></li>
              <li><a href="#">Hyperlink</a></li>
              <li><a href="#">Hyperlink</a></li>
              <li><a href="#">Hyperlink</a></li>
              <li><a href="#">Hyperlink</a></li>
             <li><a href="#">Hyperlink</a></li>
           </ul>
      </div>
  </div>
  
   <div id="content-box">
    <div   id="content-box-header">
      <div   id="content-box-ueberschrift">
      Navigation
        </div>
    </div>
  </div>
</div>
 
</div>

  </body>

</html>

Code:

/*  CSS  Document */

body, html {
  margin: 0px;
  padding:  0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

body  {
  background-color: #007A6D;
}

#header {
  position:   relative;
  width: 370px;
  height: 103px;
  margin: 0px auto;
}

#main-navi   {
  background-image: url(Bilder/page-main-navigation.gif);
    position: absolute;
  width: 100%;
  height: 46px;
    background-repeat: repeat-x;
}

#main-navi ul {
    margin-left: 100px;
}

#main-navi li {
  list-style: none;
   float: left;
  padding: 0px 0px 0px 10px;
  font-weight: bold;
   font-size: 0.8em;
}

#main-navi a:link, a:visited, a:active {
   text-decoration: none;
  color: #ffffff;
}

#sub-navi {
   float: left;
  margin-top: 103px;
  background-color: #39beb0;
   width: 175px;
  height: 300px;
  padding-top: 1px;
    margin-left: 150px;
}

#sub-navi-header {
    background-color: #168479;
  width: 173px;
  height: 32px;
    margin-left: 1px;
}

#sub-navi-ueberschrift {
  color:   #1fbead;
  font-size: 0.7em;
  font-family: Verdana, Arial,   Helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
   padding-top: 8px;
}

#hyperlinks {
  list-style: none;
   padding: 10px;
}

#hyperlinks a:link, a:visited, a:active {
   text-decoration: none;
  color: #ffffff;
}

#hyperlinks   a:hover {
  color: #000000;
}

#hyperlinks li {
    padding: 5px;
  margin-right: 66px;
}

#content-box {
    background-color: #39beb0;
  width: 600px;
  height: 300px;
    padding-top: 1px;
  margin-left: 300px;
}

Habe ich es überhaupt richtig gemacht mit den ganzen div-Tags oder ginge das auch einfacher und schlanker?
So sieht es aus, aber die Contentbox soll auf der gleichen Höhe wie die Navigationsbox links sein...

Darklord · 24 April 2010

Bei deinem eigentlichen Problem kann ich dir im Moment nicht helfen.
Ich möchte dir aber etwas anders sagen.

Habe ich es überhaupt richtig gemacht mit den ganzen div-Tags oder ginge das auch einfacher und schlanker?

Code:

<div id="content-box-ueberschrift"></div>

Du benutzt ein Div-Container für eine Überschrift. Das ist semantisch falsch, da es hierfür in HTML den h - Tag gibt. Dies spielt auch für SEO eine Rolle. Da Überschriften wichtiger gewertet werden.

Naruto123 · 24 April 2010

Vielen dank für den Tipp.
Werde es gleich umsetzen. Muss das irgendwie in dem Moment vergessen haben.

Jetzt habe ich, aber noch ein Problem undzwar:
Diesmal hat das "Navigation" nicht den gleichen Abstand von links/rechts und oben/unten.

Die Codes sehen jetzt wie folgt aus:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" lang="de">
  
  <head>

    <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
    <title>Türkis Design - Übung</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
  
  </head>
  
  <body>

    <div id="header">
      <img src="Bilder/page-header.jpg" alt="Beispielname.de" width="370px" height="103px" />
    </div>  
    
    <div id="main-navi">
      <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
      </ul>
    </div>
       
    <div id="sub-navi">
      <div id="sub-navi-header">
        <div id="sub-navi-ueberschrift">
          <h4>Navigation</h4>
          <div id="hyperlinks">
              <ul>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
              </ul>
          </div>
      </div>
      
      <div id="content-box">
        <div id="content-box-header">
          <div id="content-box-ueberschrift">
          Navigation
          </div>
        </div>
      </div>
    </div>
    
    </div>

  </body>

</html>

Code:

/* CSS Document */

body, html {
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

body {
  background-color: #007A6D;
}

#header {
  position: relative;
  width: 370px;
  height: 103px;
  margin: 0px auto;
}

#main-navi {
  background-image: url(Bilder/page-main-navigation.gif);
  position: absolute;
  width: 100%;
  height: 46px;
  background-repeat: repeat-x;
}

#main-navi ul {
  margin-left: 100px;
}

#main-navi li {
  list-style: none;
  float: left;
  padding: 0px 0px 0px 10px;
  font-weight: bold;
  font-size: 0.8em;
}

#main-navi a:link, a:visited, a:active {
  text-decoration: none;
  color: #ffffff;
}

#sub-navi {
  float: left;
  margin-top: 103px;
  background-color: #39beb0;
  width: 175px;
  height: 300px;
  padding-top: 1px;
  margin-left: 150px;
}

#sub-navi-ueberschrift {
  color: #1fbead;
  margin-left: 1px;
  padding-top: 1px;
  font-size: 0.7em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
  background-color: #168479;
  width: 173px;
  height: 32px;
}

#hyperlinks {
  list-style: none;
  padding: 10px;
}

#hyperlinks a:link, a:visited, a:active {
  text-decoration: none;
  color: #ffffff;
}

#hyperlinks a:hover {
  color: #000000;
}

#hyperlinks li {
  padding: 5px;
  margin-right: 66px;
}

#content-box {
  background-color: #39beb0;
  width: 600px;
  height: 300px;
  padding-top: 1px;
  margin-left: 300px;
}

Naruto123 · 29 April 2010

Umsetzung eines Designs

Hallo,

Hatte mal angefangen als Übung ein einfaches Webdesign umzusetzen und bin endlich damit fertig geworden.
Ich habe es auch funpic.de geladen, aber die einzelnen Boxen haben sich verschoben. In der Vorschau mit Firefox war alles noch in Ordnung...
https://deevil.de.funpic.de/

Hier auch mal die Codes:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" lang="de">
  
  <head>

    <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
    <title>Türkis Design - Übung</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
  
  </head>
  
  <body>

    <div id="header">
      <img src="Bilder/page-header.jpg" alt="Beispielname.de" width="370px" height="103px" />
    </div>  
    
    <div id="main-navi">
      <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
      </ul>
    </div>
       
    <div id="sub-navi">
      <div id="sub-navi-ueberschrift">
        <h4>Navigation</h4>
        <div id="hyperlinks">
           <ul>
              <li><a href="#">Hyperlink</a></li>
              <li><a href="#">Hyperlink</a></li>
              <li><a href="#">Hyperlink</a></li>
              <li><a href="#">Hyperlink</a></li>
              <li><a href="#">Hyperlink</a></li>
              <li><a href="#">Hyperlink</a></li>
              <li><a href="#">Hyperlink</a></li>
           </ul>
        </div>
      </div>
    </div>
    
      <div id="content-box">
          <div id="content-box-ueberschrift">
            <h4>Navigation</h4>
          </div>
            <div id="content-text">
              <p>
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
              nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
              sed diam voluptua. At vero eos et accusam et justo duo dolores et 
              ea rebum. 
              Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
              dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
              sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
              sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
              Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  
              </p>
            </div>
      </div>
    
    <div id="footer">
      <p>
      Copyright by Naruto123
      </p>
    </div>
      
  </body>

</html>

Code:

/* CSS Document */

body, html {
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

body {
  background-color: #007A6D;
}

#header {
  position: relative;
  width: 370px;
  height: 103px;
  margin: 0px auto;
}

#main-navi {
  background-image: url(Bilder/page-main-navigation.gif);
  position: absolute;
  width: 100%;
  height: 46px;
  background-repeat: repeat-x;
}

#main-navi ul {
  margin-left: 100px;
}

#main-navi li {
  list-style: none;
  float: left;
  padding: 0px 0px 0px 10px;
  font-weight: bold;
  font-size: 0.8em;
}

#main-navi a:link, a:visited, a:active {
  text-decoration: none;
  color: #ffffff;
}

#sub-navi {
  float: left;
  margin-top: 103px;
  background-color: #39beb0;
  width: 175px;
  height: 300px;
  padding-top: 1px;
  margin-left: 150px;
}

#sub-navi-ueberschrift {
  color: #1fbead;
  background-color: #168479;
  width: 173px;
  height: 32px;
  margin-left: 1px;
  padding-top: 1px;
  font-size: 0.7em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
}

#hyperlinks {
  list-style: none;
  padding: 0px 0px 0px 10px;
}

#hyperlinks a:link, a:visited, a:active {
  text-decoration: none;
  color: #ffffff;
}

#hyperlinks a:hover {
  color: #000000;
}

#hyperlinks li {
  padding: 5px;
  margin-right: 66px;
}

#content-box {
  background-color: #39beb0;
  width: 600px;
  height: 300px;
  padding-top: 1px;
  margin-top: -35px;
  margin-left: 300px;
}

#content-box-ueberschrift {
  color: #1fbead;
  background-color: #168479;
  width: 598px;
  height: 32px;
  margin-left: 1px;
  padding-top: 1px;
  font-size: 0.7em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
}

#content-text p {
  padding-top: 5px;
  color: white;
  font-size: 0.8em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  padding: 0px 10px 0px 30px;
}

#footer {
  background-image: url(Bilder/page-main-navigation.gif);
  position: absolute;
  width: 100%;
  height: 46px;
  background-repeat: repeat-x;
  margin-left: -150px;
  margin-top: 57px; 
}

#footer p {
  color: white;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.6em;
  text-align: center;
  padding: 7px 0px 0px 0px;
}

marac · 29 April 2010

Solange ich nicht weiß, wie es denn aussehen soll, kann ich dazu natürlich auch nicht viel sagen.
Nur ein kleiner Tipp:
Hol dir mal das FF-AddOn "WebDeveloper". Damit kannst du (unter anderem) auch live an Website-Styles spielen. Kein Speichern und neu laden oder gar auf einen Webserver hieven, sondern einfach aus -150px mache 0px und sofort siehst du, was sich ändert...

Ich hab gerade mal spaßeshalber einfach 4 margin-Werte in deinem Style geändert und bekam das hier:

Keine Ahnung, ob das etwa das war, was du haben wolltest...

Naruto123 · 29 April 2010

Hast natürlich recht. Habe wohl vergessen die *.png zu posten...

So sollte das Design vom Aufbau her ungefähr aussehen. Habe nur an ein paar Stellen die Schriftgröße und dicke verändert.

Renegade · 29 April 2010

So soll es wahrscheinlich nicht aussehen :-?

FF 3.6.3

Naruto123 · 29 April 2010

Renegade schrieb:
So soll es wahrscheinlich nicht aussehen FF 3.6.3

Genau.

So sieht es bei mir nämlich auch aus, obwohl es beim Coden nicht so aussah, auch wenn ich es direkt von der HTML-Datei im Ordner geöffnet habe und jetzt sieht es so aus...
Keine Ahnung, was da passiert ist. Werd da mal an den margins rum experimentieren.

tleilax · 29 April 2010

marac schrieb:
Hol dir mal das FF-AddOn "WebDeveloper". Damit kannst du (unter anderem) auch live an Website-Styles spielen. Kein Speichern und neu laden oder gar auf einen Webserver hieven, sondern einfach aus -150px mache 0px und sofort siehst du, was sich ändert...

Und direkt im Anschluss Firebug installieren und das meiste vom Webdeveloper nie wieder nutzen... :mrgreen:

Naruto123 · 29 April 2010

tleilax schrieb:
Und direkt im Anschluss Firebug installieren und das meiste vom Webdeveloper nie wieder nutzen...

Den Firebug hatte ich schon und mir ist gerade aufgefallen, dass beides grob gesehen den gleichen Zweck erfüllen, oder nicht?

So habe es geändert und hochgeladen. Jetzt sollte es eigentlich richtig sein und es wird unter ftp://deevil.de.funpic.de richtig angezeigt, aber unter deevil.de.funpic.de nicht.
Wo liegt mein Fehler? Habe davor auch alles gelöscht...

marac · 29 April 2010

Naruto123 schrieb:
Wo liegt mein Fehler?

Strg-F5

Also zumindest die Anordnung der Boxen passt jetzt bei mir...

Was sich mir nur nicht erschließen will, ist warum die Links im subnavi als Kinder der Überschrift angelegt sind...

theHacker · 29 April 2010

Naruto123 schrieb:
Den Firebug hatte ich schon und mir ist gerade aufgefallen, dass beides grob gesehen den gleichen Zweck erfüllen, oder nicht?

Mit Firebug kannst on-the-fly CSS-Eigenschaften ansehen, ändern und rausfinden, welche Codezeile für welches Verhalten verantwortlich ist.

Mit Web-Developer kann man allgemein an der Seite fummeln (Keks, Formular, Grafiken). Auch bietet sich der Web-Developer an, um sich diverse Boxen (z.B. alle Div-Elemente oder alle Ul-Elemente) hervorheben zu lassen.

Ronja · 29 April 2010

Im IE6 sieht es schrecklich aus .-(

Naruto123 · 29 April 2010

Ronja schrieb:
Im IE6 sieht es schrecklich aus .-(

Kannst du mir vielleicht einen Screenshot zeigen?
Bei mir sieht es unter der normalen URL, bei der jeder es sehen kann so aus:
https://www.myimg.de/?img=Unbenannt1f65b5.jpg
Aber unter meiner FTP-Adresse sieht es richtig aus...

marac · 29 April 2010

Naruto123 schrieb:
Bei mir sieht es unter der normalen URL, bei der jeder es sehen kann so aus

Bis zu deinem erneuten Upload war das bei mir auch so, jetzt ist es aber okay (IE8 und FF3.5):

Deswegen meinte ich ja: Strg-F5

Naruto123 · 29 April 2010

Oh, muss ich wohl übersehen haben. Jetzt ist alles einwandfrei bei mir.

Welchen Browser benutzt du? Denn bei mir ist das "Logo" ganz oben beim Browser, aber bei dir steht er etwas weiter unten...

marac · 29 April 2010

Naruto123 schrieb:
Welchen Browser benutzt du? Denn bei mir ist das "Logo" ganz oben beim Browser, aber bei dir steht er etwas weiter unten...

IE8 und FF3.5
Diese Verschiebung kommt durch die Werbe-Tags, die funpic einbindet...

XHTML Fragen von einem Anfänger

Naruto123

Leuchte84

Well-known member

Naruto123

Naruto123

Darklord

XHTML|PHP|SQL|C

Naruto123

Naruto123

marac

Well-known member

Naruto123

Renegade

Well-known member

Naruto123

tleilax

be forever curious

Naruto123

marac

Well-known member

theHacker

sieht vor lauter Ads den Content nicht mehr

Ronja

Räubertochter

Naruto123

marac

Well-known member

Naruto123

marac

Well-known member

Ähnliche Themen