Darstellungsproblem bei neuer Seite...

eBase2009 · 26 Juni 2009

ich versuche gerade mein erlerntes wissen umzusetzten und wollte mit css eine html seite erstellen.
Laut meinen Vorstellungen ist die Seite wie folgt aufgebaut.
Footerberreiche:
Einen Linken headerbereich mit höhe 50px
Zwei rechte headerbereiche mit höhe 25px
ein mainbereich
und einen footerbereich.
Leider wird mir aber nichts angezeigt, was habe ich falsch gemacht?
html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">

<html xmlns="[url=http://www.w3.org/1999/xhtml]XHTML namespace[/url]">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
function drucken() {
 window.print();
}
</script>
//-->
</head>
 
<body>
<div id="header_left">Hier kommt die Überschrift</div>
<div id="header_rigth_top">Ein kleines Logo</div>
<div id="header_rigth_down"><b><a href="#" onclick="window.print();">drucken</a></b></div>
<div id="main">
Sehr Sehr Viel Text wird hier stehen. Sehr Sehr Viel Text wird hier stehen. 
Sehr Sehr Viel Text wird hier stehen. Sehr Sehr Viel Text wird hier stehen. 
Sehr Sehr Viel Text wird hier stehen. Sehr Sehr Viel Text wird hier stehen. 
Sehr Sehr Viel Text wird hier stehen. Sehr Sehr Viel Text wird hier stehen. 
Sehr Sehr Viel Text wird hier stehen. Sehr Sehr Viel Text wird hier stehen.
</div>
<div id="footer">2009@copyrigth</div>

</body>
</html>

style.css:

body {
padding:0;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color: #ffffff;
width:750px;
margin:0 auto;
background:#000000
}
a:link { color: #FF6A00; }
a:visited { color: #FFD800; }
a:hover, a:active { color: #FEF01E;
}
#header_left {
background-image: #000000;
width:570px;
height:50px;
}
#header_rigth_top {
background-image: url(http://www.wetter.at/wetter/template/graphics/traffic24_v2.gif);
background-repeat: no-repeat;
background-position: center center;
width:180px;
height:25px;
}
#header_rigth_down {
width:180px;
height:25px;
#main {
width:750px;
height:400px;
float:left;
text-align: center;
}
#footer {
background: #000000;
width:750px;
height:50px;
float:left;
text-align:center;
}

BITTE UM HILFE

_Thor_ · 26 Juni 2009

Du öffnest im <head> ein <style>, schließt dann aber ein </script> und das auch noch innerhalb eines Kommentars, das kann nicht klappen.

Ausserdem fehlt es deiner Seite an der Semantik!

HTML:

<div id="header_left">Hier kommt die Überschrift</div>

So zeichnet man keine Überschrift aus. Überschirften zeichnet man mit <h1> bis <h6> aus. <div> wird nur zum gruppieren mehrerer Elemente verwendet.

Ein Logo ist ein <img>, oder ein Hintergrundbild, aber kein <div>, Text gehört in ein <p>, ebenfalls nicht in ein <div>.

eBase2009 · 26 Juni 2009

_Thor_ schrieb:
Du öffnest im <head> ein <style>, schließt dann aber ein </script> und das auch noch innerhalb eines Kommentars, das kann nicht klappen.

Ausserdem fehlt es deiner Seite an der Semantik!

HTML:

<div id="header_left">Hier kommt die Überschrift</div>

So zeichnet man keine Überschrift aus. Überschirften zeichnet man mit <h1> bis <h6> aus. <div> wird nur zum gruppieren mehrerer Elemente verwendet.

Ein Logo ist ein <img>, oder ein Hintergrundbild, aber kein <div>, Text gehört in ein <p>, ebenfalls nicht in ein <div>.

Danke für deine erklärung! Soweit habe ich Sie verstanden - jedoch wie setzte ich deine guten Tips nun um, wenn ich bedenke wenn ich das Layout wie oben beschrieben habe, haben möchte?

_Thor_ · 26 Juni 2009

Das <div> mit deiner Überschrift ersetzt du durch ein <h1>, das Logo kannst du als Hintergrundbild mit in die <h1> einbinden.

Das <div> mit deinem Text ersetzt du durch ein <p>. Formatieren kannst du diese Elemente ebenso wie ein <div>, da es sich auch um Blockelemente handelt.

eBase2009 · 27 Juni 2009

Hallo,
habe schon wieder ein wenig verbessert und komme meinen Wünschen immer näher:
hier meine meine neuen Code:
index.html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]XHTML namespace[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testseite die zum lernen dient</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
function drucken() {
 window.print();
}
</script>
</head>
<body>
   <div id="wrapper">
   
         
   <div id="leftheader">
         
           <h1>Allgemeine Geschäftsbedingungen</h1>   
   
   </div>

   <div id="rigthheader_top">
   
         <img src="legally_logo.png">
   
   </div>

   <div id="rightheader_down">
   
         <b><a href="#" onclick="window.print();">drucken</a></b>
   
   </div>

   <div id="content">
   
         Hier kommen die Informationen rein.
   
   </div>
   
   
   <div id="footer">
         
      This is the Footer  
       
      </div>
   
   </div>
   
</body>
</html>

und hier die style.css:

Code:

* { padding: 0; margin: 0; }
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
h1 { font-size:14pt; }
h2 { font-size:8pt; margin:15px 0 10px 0; }
li { margin-bottom:10px; }
}
a:link { color: #FF6A00; }
a:visited { color: #FFD800; }
a:hover, a:active { color: #FEF01E; }
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#leftheader { 
 float: left;
 color: #333;
 background: #BD9C8C;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 60px;
 width: 680px;
 display: inline;
}
#rigthheader_top { 
 color: #333;
 background: #000000;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 30px;
 width: 200px;
 float: left;
}
#rightheader_down { 
 color: #333;
 background: #000000;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 10px;
 width: 200px;
 float: left;
}
#content { 
 float: left;
 color: #333;
 background: #F2F2E6;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 350px;
 width: 900px;
 display: inline;
}
#footer { 
 width: 900px;
 clear: both;
 color: #333;
 background: #BD9C8C;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

nun möchte ich die Überschrift. Allgemeine Geschäftsbedingungen vertikal zentrieren? Welche Möglichkeiten habe ich da! Über google habe ich viele gefunden die mir nicht weiter geholfen haben!

_Thor_ · 27 Juni 2009

Vertikal? Bist du sicher, dass du nicht horizontal meinst?

Vertikal kannst du es mit line-height versuchen, horizontal wird text in Blockelementen mit text-align: center zentriert.

Du hast jetzt zwar deine Überschrift als <h1> ausgezeichnet, aber das <div> umzu ist unnötig, du gruppierst ja nichts. Lass das <div> weg.

eBase2009 · 27 Juni 2009

_Thor_ schrieb:
Vertikal? Bist du sicher, dass du nicht horizontal meinst?

Vertikal kannst du es mit line-height versuchen, horizontal wird text in Blockelementen mit text-align: center zentriert.

Du hast jetzt zwar deine Überschrift als <h1> ausgezeichnet, aber das <div> umzu ist unnötig, du gruppierst ja nichts. Lass das <div> weg.

Du hast schon recht das das leftheader div noch da ist, denn wenn ich dieses weggebe rutschten mir die leftheader divs nach links!

eBase2009 · 27 Juni 2009

Danke für den Tipp nochmals,

ich lass mal ein screen da, vll. weiss ja jemand wie ich das umsetzte:

_Thor_ · 27 Juni 2009

eBase2009 schrieb:
Du hast schon recht das das leftheader div noch da ist, denn wenn ich dieses weggebe rutschten mir die leftheader divs nach links!

Dann formatier die Überschrift und nicht das div.

eBase2009 schrieb:
Danke für den Tipp nochmals,

ich lass mal ein screen da, vll. weiss ja jemand wie ich das umsetzte:

HTML:

<h1>Allgemeine Geschäftsbedingungen</h1>

Code:

h1 {
  line-height: 3em;
  background-image: url('image.png');
  background-color: #xyz;
}

eBase2009 · 27 Juni 2009

_Thor_ schrieb:
Dann formatier die Überschrift und nicht das div.

HTML:

<h1>Allgemeine Geschäftsbedingungen</h1>

Code:

h1 { line-height: 3em; background-image: url('image.png'); background-color: #xyz; }

he super hat funktioniert!

Code:

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
h1 { font-size:14pt; line-height: 3em; background-image: url('image.png'); background-color: #xyz;}
h2 { font-size:8pt; margin:15px 0 10px 0; }
li { margin-bottom:10px; }
}
a:link { color: #FF6A00; }
a:visited { color: #FFD800; }
a:hover, a:active { color: #FEF01E; }
}
#wrapper { .................

hoffe ich habe den Code so richtig eingefügt!
Auf jedenfall wird es nun vertikal zentriert angezeigt!

Darf ich nur wissen wieso hier die background angaben wichtig sind?

_Thor_ · 27 Juni 2009

eBase2009 schrieb:
Darf ich nur wissen wieso hier die background angaben wichtig sind?

Die sind eigentlich dafür gedacht, dass du das Bild, welches sich rechts neben deiner Überschirft befindet, als Hintergrundgrafik einbinden kannst, so hast du alles in der <h1> und brauchst nicht mehrere Elemente.

eBase2009 · 27 Juni 2009

@_Thor_
Danke für die Aufklärung, wieder etwas gelernt!
Ich werde das ändern wenn ich das Inhaltproblem gelöst habe das ich angehängt habe.:

_Thor_ · 28 Juni 2009

Abstände regelst du mit margin oder padding, margin für den Aussenabstand, padding für den Innehabstand.

Die Farbe ändern ist die leichteste Übung

Code:

{selector} {color: red;}

Wenn es eine nummerierte Aufzählung sein soll, verwende <ol> statt <ul>

eBase2009 · 28 Juni 2009

um einen Anfänger das ein wenig näher zu bringen:

Abstand zwischen Text und Block-Bereich:
Soll ich hier eine eigene defination im css machen, damit ich dem Text zum Blockbereich einen Abstand zuweisen kann?
Also zum Beispiel:

css:

Code:

h2 { font-size:8pt; margin:15px 0 10px 0; }

html:

Code:

<h2>Nachstehend finde Sie die Informationen über gesetzliche Grundlagen und deren Auswirkungen bei Missbrauch.</h2>

Farbe und Aussehen der Überschriften im Blockbereich:
Hier würde ich bitte eine genaue Erklärung benötigen wie ich die Farbe der Überschrift geändert wird aber die Nummerung auch vorhanden ist.

Nummerung einfügen:
Also war ich schon auf dem richtigen weg mit folgender defination:
<ol type="1">
Jedoch hat dies bei mir nicht funktioniert als ich es eingefügt habe!

_Thor_ · 28 Juni 2009

eBase2009 schrieb:
Soll ich hier eine eigene defination im css machen, damit ich dem Text zum Blockbereich einen Abstand zuweisen kann?

Ja, so kann man es machen.

Farbe und Aussehen der Überschriften im Blockbereich:
Hier würde ich bitte eine genaue Erklärung benötigen wie ich die Farbe der Überschrift geändert wird aber die Nummerung auch vorhanden ist.

Code:

h2 {color: red;}

Nummerung einfügen:
Also war ich schon auf dem richtigen weg mit folgender defination:
<ol type="1">
Jedoch hat dies bei mir nicht funktioniert als ich es eingefügt habe!

list-style-type: Aufzählungszeichen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

eBase2009 · 28 Juni 2009

..........

Code:

<ul style="list-style-type:square;">
  <li>Zeile 1</li>
  <li>Zeile 2</li>
</ul>

Wenn ich das so eingebe funktioniert dies bei mir leider nicht!! Why?

_Thor_ · 28 Juni 2009

Hast du vorher in einem Stylesheet schon andere Aufzählungszeichen gesetzt? Die werden nicht überschrieben, was mich gerade auch etwas wundert.

eBase2009 · 28 Juni 2009

das wäre meine Aktuelle css:

Code:

* { padding: 0; margin: 0; }
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #000000;
 background: #000000;
}
h1 { color: #B22C2B; font-size:15pt; line-height: 3em; }
ct { font-size: 11px; margin-bottom:10px; text-decoration: none; }
li { margin-bottom:10px; }
}
a:link { color: #FF6A00; }
a:visited { color: #FFD800; }
a:hover, a:active { color: #FEF01E; }
}
#wrapper { 
 margin: 0 auto;
 width: 922px;
}
#leftheader { 
 float: left;
 color: #333;
 background: #FEF01E;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 60px;
 width: 680px;
 display: inline;
}
#rigthheader_top { 
 color: #333;
 background: #FF6A00;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 30px;
 width: 200px;
 float: left;
}
#rightheader_down { 
 color: #333;
 background: #005000;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: 10px;
 width: 200px;
 float: left;
}
#content1 { 
 float: left;
 background: #BD9C8C;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: auto;
 width: 900px;
 display: inline;
}
#content2 { 
 float: left;
 background: #F2F270;
 margin: 0px 0px 0px 0px;
 padding: 10px;
 height: auto;
 width: 900px;
 display: inline;
}
#footer { 
 width: 900px;
 clear: both;
 color: #333;
 background: #BD9C8C;
 margin: 0px 0px 10px 0px;
 padding: 10px;
 text-align:center;
}

eBase2009 · 28 Juni 2009

Guten Morgen Leute ;-)
habe nun fast das Layout fertig, jedoch stehe ich gerade ein wenig an. Entweder sehe ich den Wald vor lauter Bäume nicht mehr oder ich konnte die Informationen die ich brauche noch nicht finden auf css4you & co.
Ich habe nur noch zwei Aufgaben zu Lösen um mein Layout fertig zu bekommen.
1. Habe ich zwei Screenshots angehängt um zu zeigen was ich gerne haben möchte.
In meinen Hauptbereich (content) einen Auflistung von Informationen mit Nummerung und Farblichen unterchied.
2. Habe ich oberhalb des Contet eine weitere Zeile wo Informationen drinnen stehen! Dört möchte ich den Abstand zu den Rändern - Links, Oben, Unten verkleinern. Derzeit ist mein padding auf 10 px eingestellt. Wenn ich dies auf 2px verkleiner, schiebt mir auf der Rechten Seite der gelbe balken nach links und ich habe dort keine gerade linie mit den Farben sonder eine schwarze unterbrechung!
Wie verringere ich den Abstand zu den Rändern ohne einbusen des Design!
DANKE für Eure Hilfe

_Thor_ · 28 Juni 2009

Für die unterschiedlichen Farben der Listeneinträge gibst du den Listenelementen einfach eine eigene ID oder Klasse und definierst dafür jeweils unterschiedliche Farben.

Wenn du das Padding verringerst, musst du die Breite um die verringerten Pixel erhöhen, ebenso die Höhe.

Darstellungsproblem bei neuer Seite...

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Anhänge

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Anhänge

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Anhänge

Aktives Mitglied