Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster

möchte rechts eine sidebare einfügen

Antwort erstellen

möchte rechts eine sidebare einfügen

Beitragvon mol38 » 12.12.2006, 11:41

hallo leute ich verzweifel fast,

habe das layout gemacht und möchte nun eine sibare rechts einfügen und es klappt nicht . Der inhalt der sitebare ist immer unter dem inhalt.
was mache ich verkehrt?

danke mol38
mol38
neu hier
 
Beiträge: 10
Registriert: 07.12.2006, 12:34
Nach oben

Beitragvon Laus » 12.12.2006, 11:58

ein Link oder der vollständige Code wären nicht schlecht ansonsten kann man nur vermuten dass du irgendwo einen Fehler im Code hast. 8) :wink:
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben

ene sitbare rechts einfügen

Beitragvon mol38 » 12.12.2006, 12:06

hallo laus
hier ist der code
Code: Alles auswählen
<DOCTYPE>
<html>
<head>
<meta>
<title>Unbenanntes Dokument</title>
<link>
<style>
/*
----------Allgemeine Einstellungen----------
*/
*
{
padding:10;
margin:0;
}     
body
{
   font: 14px "Trebuchet MS", verdana, arials, sans-serif;
   color: #000;
   background: #ccc;
   background-color: #C1DAE3;
   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 */
height: 1px; /* in Opera f&uuml;r die Anzeige n&ouml;tig, in Mozilla f&uuml;r die einheitliche H&ouml;he */
margin: 0 0 30px 0;
}
h2
{
font-size: 40px;
}
/*
----------Header-----------------------------
*/
#header
{
height: 138px;
line-height: 85px;
background: #0099ff;
font-size: 18px;
color: #eaeaea;
padding-left: 45px;
list-style:url(logo1.png);
background-image:url(logo1.png);}
#header span
{
font-weight: normal;
color: #000;
}
/*
----------Navigation-------------------------
*/
ul#navigation
{
float: left;
margin: 65px 0 0 30px;
width: 200px;
list-style: none;
border-top: 1px solid #333;
background-image:url(Unbenannt-8.png);
border-style:none;

}
ul#navigation li
{
text-align: center;
}
ul#navigation li a
{
display: block;
height: 27px;
width: 200px;
line-height: 27px;
text-decoration: none;
color: #333;

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----------
*/
#content
{
padding: 15px;
margin: 0px 0 0px 200px;
}
#sibare {
padding:15px;
margin:auto
float:right;
}
#content2
{
float:auto;
padding:10px;
margin: 0px 10px 0px 250px;
list-style:none;

}
#content3
{

padding:0px;
margin: 0px 10px 0px 250px;
float:right
}
#fusszeile {
position:inherit;
   width: 100%;
   float:left;
   height: 50px;
   padding:0px;
   color: #fff;
   text-align: center;
   font-size: 0.7em;
   background-color: #6aa7bd;
   
}

/*
----------Footer------------
*/
p#footer
{
widht:350;
height: 400px;
line-height: 20px;
background: #ffffff;
text-align: center;
}
#Layer1 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:1;
   left: 414px;
   top: 92px;
}
#Layer2 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:2;
   left: -2px;
   top: 80px;
}
#Layer3 {
   position:left;
   width:200px;
   height:115px;
   z-index:1;
   left: 3px;
   top: 21px;
   visibility: visible;
}
#Layer4 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:1;
}
#Layer5 {
   position:left;
   width:200px;
   height:115px;
   z-index:3;
   left: 696px;
   top: 123px;
}
#Layer6 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:1;
   background-image: url(su.jpg);
}
#Layer7 {
   position:absolute;
   width:197px;
   height:115px;
   z-index:3;
   left: 7px;
   top: 403px;
}
#Layer8 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:1;
   left: 30px;
   top: 153px;
}
#Layer9 {
   position:absolute;
   width:128px;
   height:115px;
   z-index:1;
   left: 755px;
   top: 37px;
}
#Layer10 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:3;
   left: 771px;
   top: 48px;
}
#Layer11 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:1;
   left: 605px;
   top: 147px;
}
.Stil1 {color: #000066}
.Stil3 {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 18px;
}
</style>
<if>
<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>&nbsp;</h1>
          
<div>
  <ul>
    <li><a>Home</a></li>
    <li><a>hallo</a></li>
    <li><a>hallo1</a></li>
    <li><a>hallo2</a></li>
   <li><a>hallo3</a></li>
    <li><a>hallo4</a></li>
    <li><a>hallo5</a></li>
    <li><a>hallo6</a></li>
  </ul>
</div>
<div>
  <div>            Willkomen auf unserer Internetpr&auml;senz</div>
</div>
     <div>
 
    <p>&nbsp;</p>
    <p><div>
    <div>
      <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div> 
<div>
sdggfd
</div>
    <p>
    <p>

    <p>
<p>&nbsp;</p>
</body>
</html>
und hier style.css
*
{
  padding: 0;
  margin: 0;
}

body
{
  font: 14px "Trebuchet MS", verdana, arials, sans-serif;
  color:#000;
  background: #ccc;
  border-left:#000000;
}

H1,H2,H3 {
color : #000;
font: 1.2em "Arial","Verdana",sans-serif;
}

H2 {
font-size : 1.1em;
}

H3 {
font-size : 1.0em;
}


p
{
  margin: 1em 0;
}
#header
{
height:0px;
width:958;
background: #0099ff;
font-size: 18px;

color: #0099ff;
padding-left:0px;list-style:url(logo1.png)
}
ul#navigation
{
float: left;
margin:0px 0 0 0px;
width: 150px;
list-style: none;
border-top: 1px solid #333;

background-image:url(Unbenannt-8.png)
}
          
ul#navigation li
{
text-align: center;
}
          
ul#navigation li a
{
display: inline;
height: 27px;
width: 150px;
line-height: 27px;
text-decoration: none;
color: #333;



background-image:url(Unbenannt-5.png)


}
          
ul#navigation li a:hover
{
background: #bbb;
color: #6aa7bd;
background-image:url(Unbenannt-6.png)
}
#content
{
padding: 0px;
margin: 400px 0 15px 500px;
border-left:#000000;
}

#content2{
list-style:none;
margin:left;
width:540px;
height:300px;
}
#content3{
list-style:none;
margin:auto;






p#footer
{
height: 0px;
line-height: 1px;
background: #ffffff;
text-align: center;
}
#right content3{
background:#ffffff;
margin:0 10px 0 20px;
width:540px;
float:right;
}
#fusszeile {

width:958;
background: #0099ff;

line-height: 85px;
color: #0099ff;
background-image:url(Unbenannt-7.png)
}

mol38
neu hier
 
Beiträge: 10
Registriert: 07.12.2006, 12:34
Nach oben

Beitragvon Laus » 12.12.2006, 12:21

der Quelltext ist leider nicht vollständig es fehlen die bezeichnungen im html
Setze mal einen haken bei HTML in diesem Beitrag deaktivieren.
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben

Beitragvon mol38 » 12.12.2006, 12:26

hallo laus hier nochmal der code hoffe es klppt diesmal
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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">
/*
----------Allgemeine Einstellungen----------
*/
*
{
padding:10;
margin:0;
}     
body
{
   font: 14px "Trebuchet MS", verdana, arials, sans-serif;
   color: #000;
   background: #ccc;
   background-color: #C1DAE3;
   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 */
height: 1px; /* in Opera f&uuml;r die Anzeige n&ouml;tig, in Mozilla f&uuml;r die einheitliche H&ouml;he */
margin: 0 0 30px 0;
}
h2
{
font-size: 40px;
}
/*
----------Header-----------------------------
*/
#header
{
height: 138px;
line-height: 85px;
background: #0099ff;
font-size: 18px;
color: #eaeaea;
padding-left: 45px;
list-style:url(logo1.png);
background-image:url(logo1.png);}
#header span
{
font-weight: normal;
color: #000;
}
/*
----------Navigation-------------------------
*/
ul#navigation
{
float: left;
margin: 65px 0 0 30px;
width: 200px;
list-style: none;
border-top: 1px solid #333;
background-image:url(Unbenannt-8.png);
border-style:none;

}
ul#navigation li
{
text-align: center;
}
ul#navigation li a
{
display: block;
height: 27px;
width: 200px;
line-height: 27px;
text-decoration: none;
color: #333;

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----------
*/
#content
{
padding: 15px;
margin: 0px 0 0px 200px;
}
#sibare {
padding:15px;
margin:auto
float:right;
}
#content2
{
float:auto;
padding:10px;
margin: 0px 10px 0px 250px;
list-style:none;

}
#content3
{

padding:0px;
margin: 0px 10px 0px 250px;
float:right
}
#fusszeile {
position:inherit;
   width: 100%;
   float:left;
   height: 50px;
   padding:0px;
   color: #fff;
   text-align: center;
   font-size: 0.7em;
   background-color: #6aa7bd;
   
}

/*
----------Footer------------
*/
p#footer
{
widht:350;
height: 400px;
line-height: 20px;
background: #ffffff;
text-align: center;
}
#Layer1 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:1;
   left: 414px;
   top: 92px;
}
#Layer2 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:2;
   left: -2px;
   top: 80px;
}
#Layer3 {
   position:left;
   width:200px;
   height:115px;
   z-index:1;
   left: 3px;
   top: 21px;
   visibility: visible;
}
#Layer4 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:1;
}
#Layer5 {
   position:left;
   width:200px;
   height:115px;
   z-index:3;
   left: 696px;
   top: 123px;
}
#Layer6 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:1;
   background-image: url(su.jpg);
}
#Layer7 {
   position:absolute;
   width:197px;
   height:115px;
   z-index:3;
   left: 7px;
   top: 403px;
}
#Layer8 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:1;
   left: 30px;
   top: 153px;
}
#Layer9 {
   position:absolute;
   width:128px;
   height:115px;
   z-index:1;
   left: 755px;
   top: 37px;
}
#Layer10 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:3;
   left: 771px;
   top: 48px;
}
#Layer11 {
   position:absolute;
   width:200px;
   height:115px;
   z-index:1;
   left: 605px;
   top: 147px;
}
.Stil1 {color: #000066}
.Stil3 {
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 18px;
}
</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>
          
<div align="left">
  <ul class="Stil1" id="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">hallo</a></li>
    <li><a href="#">hallo1</a></li>
    <li><a href="#">hallo2</a></li>
   <li><a href="#">hallo3</a></li>
    <li><a href="#">hallo4</a></li>
    <li><a href="#">hallo5</a></li>
    <li><a href="#">hallo6</a></li>
  </ul>
</div>
<div id="content">
  <div align="left" class="Stil3">            Willkomen auf unserer Internetpr&auml;senz</div>
</div>
     <div id="content2">
 
    <p align="justify">jthkrtgkjjhjkhjkl</p>
    <p><div align="left">
    <div align="left">
      <p align="left" class="Stil1">&nbsp;</p>
    <p align="left">&nbsp;</p>
    <p align="left">&nbsp;</p>
    <p align="left">&nbsp;</p>
    <p align="left">&nbsp;</p>
</div> 
<div id="content3">
sdggfd
</div>
    <p align="auto">
    <p align="left">

    <p>
<p>&nbsp;</p>
</body>
</html>

und hier der css
Code: Alles auswählen
*
{
  padding: 0;
  margin: 0;
}

body
{
  font: 14px "Trebuchet MS", verdana, arials, sans-serif;
  color:#000;
  background: #ccc;
  border-left:#000000;
}

H1,H2,H3 {
color : #000;
font: 1.2em "Arial","Verdana",sans-serif;
}

H2 {
font-size : 1.1em;
}

H3 {
font-size : 1.0em;
}


p
{
  margin: 1em 0;
}
#header
{
height:0px;
width:958;
background: #0099ff;
font-size: 18px;

color: #0099ff;
padding-left:0px;list-style:url(logo1.png)
}
ul#navigation
{
float: left;
margin:0px 0 0 0px;
width: 150px;
list-style: none;
border-top: 1px solid #333;

background-image:url(Unbenannt-8.png)
}
          
ul#navigation li
{
text-align: center;
}
          
ul#navigation li a
{
display: inline;
height: 27px;
width: 150px;
line-height: 27px;
text-decoration: none;
color: #333;



background-image:url(Unbenannt-5.png)


}
          
ul#navigation li a:hover
{
background: #bbb;
color: #6aa7bd;
background-image:url(Unbenannt-6.png)
}
#content
{
padding: 0px;
margin: 400px 0 15px 500px;
border-left:#000000;
}

#content2{
list-style:none;
margin:left;
width:540px;
height:300px;
}
#content3{
list-style:none;
margin:auto;






p#footer
{
height: 0px;
line-height: 1px;
background: #ffffff;
text-align: center;
}
#right content3{
background:#ffffff;
margin:0 10px 0 20px;
width:540px;
float:right;
}
#fusszeile {

width:958;
background: #0099ff;

line-height: 85px;
color: #0099ff;
background-image:url(Unbenannt-7.png)
}

hoffe kannst mir helfen :cry:
mol38
neu hier
 
Beiträge: 10
Registriert: 07.12.2006, 12:34
Nach oben

Beitragvon Laus » 12.12.2006, 13:12

Also was mir als erstes auffällt ist, du benutzt xhtml als Docktype hältst dich aber nicht an den xhtml Standard. dabei sind Dinge wie <div align="left"> nicht mehr erlaubt auch müssen alle Tags geschlossen werden usw. Setze das konsequent um oder benutze dies als Docktype
Code: Alles auswählen
 
entweder:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
oder:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">


Weiter hast du <body><body> im Quelltext nimm bitte ein body raus.

Zu deinem CSS:
Du benutzt zwei verschiedene CSS Dateien die sich teilweise in ihren Anweisungen gegenseitig aufheben
Code: Alles auswählen
Beispiel:*
{
  padding: 0;
  margin: 0;
}
in der Datei style.css
und
*
{
padding:10;
margin:0;
}
im eingebetteten Style

Dies geht über das ganze Style so. Benutze also entweder nur ein Style was die Sache für noch nicht so versierte in css sehr vereinfacht, oder stimme die Angaben beider css Dateien exakt aufeinander ab so das du keine Konflikte damit erzeugst. wobei ich dir zu ersterem raten würde.
Nimm mal die Zeile <link rel="stylesheet" href="style.css"> aus deinem Quelltext, dann hast du nämlich dein gewünschtes Ergebnis schon fast.

So ich hoffe ich konnte dir für den Anfang ein wenig weiterhelfen. Versuche die aufgezeigten Punkte umzusetzen dann hast du eine sehr gute Basis für eine Top Seite.

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben

Beitragvon mol38 » 12.12.2006, 13:50

hallo xaver, vielen vielen dank,

habe nun den text rechts, aber leider unten wie bekomme ich ihn nun noch ober ausgerichtet?


gruß mol3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>

<style type="text/css">
/*
----------Allgemeine Einstellungen----------
*/
*
{
padding:10;
margin:0;
}
body
{
font: 14px "Trebuchet MS", verdana, arials, sans-serif;
color: #000;
background: #ccc;
background-color: #C1DAE3;
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 */
height: 1px; /* in Opera f&uuml;r die Anzeige n&ouml;tig, in Mozilla f&uuml;r die einheitliche H&ouml;he */
margin: 0 0 30px 0;
}
h2
{
font-size: 40px;
}
/*
----------Header-----------------------------
*/
#header
{
height: 138px;
line-height: 85px;
background: #0099ff;
font-size: 18px;
color: #eaeaea;
padding-left: 45px;
list-style:url(logo1.png);
background-image:url(logo1.png);}
#header span
{
font-weight: normal;
color: #000;
}
/*
----------Navigation-------------------------
*/
ul#navigation
{
float: left;
margin: 65px 0 0 30px;
width: 200px;
list-style: none;
border-top: 1px solid #333;
background-image:url(Unbenannt-8.png);
border-style:none;

}
ul#navigation li
{
text-align: center;
}
ul#navigation li a
{
display: block;
height: 27px;
width: 200px;
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----------
*/
#content
{
padding: 15px;
margin: 0px 0 0px 200px;
}
#sibare {
padding:15px;
margin:auto
float:right;
}
#content2
{
float:auto;
padding:10px;
margin: 0px 10px 0px 250px;
list-style:none;

}
#content3
{

padding:0px;
margin: 0px 10px 0px 0px;
float:right
}
#footer{
position:inherit;
width: 100%;
float:left;
height: 50px;
padding:0px;
color: #fff;
text-align: center;
font-size: 0.7em;
background-color: #6aa7bd;

}

/*
----------Footer------------
*/
p#footer
{
widht:350;
height: 400px;
line-height: 20px;
background: #000000;
text-align: center;
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 414px;
top: 92px;
}
#Layer2 {
position:absolute;
width:200px;
height:115px;
z-index:2;
left: -2px;
top: 80px;
}
#Layer3 {
position:left;
width:200px;
height:115px;
z-index:1;
left: 3px;
top: 21px;
visibility: visible;
}
#Layer4 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
#Layer5 {
position:left;
width:200px;
height:115px;
z-index:3;
left: 696px;
top: 123px;
}
#Layer6 {
position:absolute;
width:200px;
height:115px;
z-index:1;
background-image: url(su.jpg);
}
#Layer7 {
position:absolute;
width:197px;
height:115px;
z-index:3;
left: 7px;
top: 403px;
}
#Layer8 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 30px;
top: 153px;
}
#Layer9 {
position:absolute;
width:128px;
height:115px;
z-index:1;
left: 755px;
top: 37px;
}
#Layer10 {
position:absolute;
width:200px;
height:115px;
z-index:3;
left: 771px;
top: 48px;
}
#Layer11 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 605px;
top: 147px;
}
.Stil1 {color: #000066}
.Stil5 {font-size: 12px}
.Stil6 {color: #000066; font-size: 12px; }
</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>
<h1 id="header">&nbsp;</h1>

<p align="left">
<ul class="Stil1" id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">hallo</a></li>
<li><a href="#">hallo1</a></li>
<li><a href="#">hallo2</a></li>
<li><a href="#">hallo3</a></li>
<li><a href="#">hallo4</a></li>
<li><a href="#">hallo5</a></li>
<li><a href="#">hallo6</a></li>
</ul>
</p>
<p id="content">
<div align="left" class="Stil3" id="content" dir="ltr">
<div align="left" class="colum" id="center"></div>
<div id="left" class="colum"></div>
Willkomen auf unserer Internetpr&auml;senz
</p>
</p>
</p>
<p id="center">
<p></p>
<p align="justify" class="Stil5">&nbsp;</p>
<p class="Stil5">
<p align="left" class="Stil5">
<p align="left" class="Stil5">
<p align="left" class="Stil5">
<p align="left" class="Stil5">Machen Sie Ihr Problem zu unserem......
<p align="left" class="Stil5">
<p align="left" class="Stil6">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
<p align="left">&nbsp;</p>
</p>
<p align="right">der rechte text </p>
</p>
<p align="auto">
<p align="left">
<p>
<p>&nbsp;</p>
</body>
</html>8[code][/code]
mol38
neu hier
 
Beiträge: 10
Registriert: 07.12.2006, 12:34
Nach oben

Beitragvon Laus » 12.12.2006, 16:45

Hab dir hier mal ein Flexibles Layout mit 3 Spalten zusammengestellt das deinen wünschen entsprechen dürfte. Du kannst es beliebig verändern. Achte allerdings darauf die Reihenfolge im Quelltext nicht zu verändern.
Wenn du die linke und die rechte Spalte andersfarbig als den content willst so mache dir zwei Bilder mit der breite der Spalten und ca 2px Höhe und binde diese an die vorgegebenen Stellen im CSS ein. Der Rest dürfte eigentlich Selbsterklärend sein. Viel Spass beim Probieren.

Gruß Xaver

Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<title>Titel der Seite</title>

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#wrapper {word-wrap: break-word;}
</style>
<![endif]-->
<style type="text/css" media="screen">
/* Hautteil und Grungsatzvormatierung von Header Footer und den 3 Spalten*/
* {margin: 0; padding: 0; border: 0;} /*Alles auf Null setzen*/

body {
text-align: center;
background: #C1DAE3;
color: #000;
min-width: 800px;
}
#wrapper {
text-align: left;
width: 100%;
margin: 0 auto;
/*Hintergrundbild der linken Spalte*/
background: #C1DAE3 url(Linke Seite Hintergrund Bild.png) repeat-y 0px 0;
}
#header, #footer {
clear: both;
width: 100%;
}
#header {background: #0099ff; color: #000; height: 138px;}

#footer {background: #0099ff; padding: 1px 0;height: 50px;}

#contentfloatcontainer {
float: left;
width: 100%;
/* Hintergrundbild der rechten Spalte */
background: url(Rechte Seite Hintergrund Bild.png) repeat-y 100% 0;
}
#contentfloatcontainer:after {
/* zum clearen der floats */
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
}

#center {
/* Hier die Breiten der rechten und linken Spalte + 5px eintragen*/
margin: 0 155px 0 255px;
background-color: #C1DAE3;
}

#centerwrap {
  float:left;
  width: 100%;
   margin: 0 -95% 0 0;
}

#left {
  float:left;
  width: 250px;
  margin: 0 0 0 -5%;

}

#right {
  float:right;
  width: 150px;
  margin: 0;
}
/* ----- IE5,5.5,6 Mac und Win ------ */
* html div#centerwrap {margin: 0 -100% 0 0;}
* html div#left {margin: 0;}

/*----------Navigation-------------------------*/
ul#navigation
{

width: 200px;
list-style: none;
border-top: 1px solid #333;
background-image:url(Unbenannt-8.png);
border-style:none;

}
ul#navigation li
{
text-align: center;
}
ul#navigation li a
{
display: block;
height: 27px;
width: 200px;
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)
}


</style>
</head>
<body>
<div id="wrapper"><!--Umschliesender Container-->

<div id="header">header</div>

<div id="contentfloatcontainer"><!--Container für die 3 Spalten-->

<div id="centerwrap"><!--Hilfscontainer zum zentrieren des mittleren Containers (center)-->
<div id="center">
<h3>Mittlere Spalte</h3>
</div>
</div><!--Hilfscontainer Ende-->

<div id="right"> <!--Rechte Spalte-->
<h3>Rechte Spalte</h3>
</div><!--Rechte Spalte Ende-->

<div id="left"><!--Linke Spalte-->
<h3>Linke Spalte</h3>
<ul class="Stil1" id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">hallo</a></li>
<li><a href="#">hallo1</a></li>
<li><a href="#">hallo2</a></li>
<li><a href="#">hallo3</a></li>
<li><a href="#">hallo4</a></li>
<li><a href="#">hallo5</a></li>
<li><a href="#">hallo6</a></li>
</ul>
</div><!--Linke Spalte Ende-->

</div><!--Container für die 3 Spalten Ende-->

<div id="footer"><p>Footer</p></div>
</div><!--Umschliesender Container Ende-->
</body>
</html>
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald
Nach oben
Antwort erstellen

Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "möchte rechts eine sidebare einfügen"

Zurück zu: CSS für Anfänger

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 8 Gäste

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Optimized by SEO phpBB, Deutsche Übersetzung durch phpBB.de