Balken nur auf der rechten Seite

Cascading Style Sheets (CSS ist eine praktische Code-Sprache, die einmal erstellt für das Aussehen der ganzen Seite gilt. So können z. B. Schriftattribute wie Farbe, Schriftart und Link-Farben und Formatierung bequem eingestellt werden.) - Fragen - Antworten - Tipps dazu hier ..

Moderator: lauras

Beiträge bitte im neuen Forum

Balken nur auf der rechten Seite

Beitragvon neuling11 » Montag 1. August 2011, 11:39

Hallo,

ich möchte einen Blauen Balken, der nur auf der Rechten Seite neben der Navigation zu sehen ist, aber nicht auf der linken.
Ich habe mal ein Bild hochgeladen, damit ihr wisst, was ich meine. Die Lücke auf dem Bild ist extra, damit man sieht, wo mein Container mit der festen Breite aufhört.
Unbenannt-2.jpg


Allerdings habe ich keinen Schimmer, wie ich das anstelle.
neuling11
HTML-Freund
 
Beiträge: 128
Registriert: Freitag 17. Dezember 2010, 19:08
Wohnort: Deutschland

Re: Balken nur auf der rechten Seite

Beitragvon lauras » Montag 1. August 2011, 11:50

Ich versteh nicht ganz was du meinst - aber wie wäre es mit border-right?
Benutzeravatar
lauras
Moderator
 
Beiträge: 2114
Registriert: Samstag 3. November 2007, 22:08

Re: Balken nur auf der rechten Seite

Beitragvon neuling11 » Montag 1. August 2011, 12:04

Hallo,

warum verstehen mich bloß immer alle falsch :roll:.

Ich möchte, dass es so aussieht, wie in dem hier angefügten bild.
Ich habe mal die Container beschriftet.
Also der mittelhellblaue Balken, der unter dem Header aus dem Umschlusscontainer geht, den möchte ich so haben, wie auf dem Bild.
Das Problem ist, gebe ich Html so ein Hintergrundbild und lasse es wiederholen, dann ist es auf beiden Seiten, links und rechts, es soll aber nur rechts sein.
Dateianhänge
asf.jpg
neuling11
HTML-Freund
 
Beiträge: 128
Registriert: Freitag 17. Dezember 2010, 19:08
Wohnort: Deutschland

Re: Balken nur auf der rechten Seite

Beitragvon Sarkkan » Montag 1. August 2011, 12:30

neuling11 hat geschrieben:Hallo,

warum verstehen mich bloß immer alle falsch :roll:.
Weil du dich nicht richtig oder ungenau ausdrückst :)

Kennst du background-position? :]
Benutzeravatar
Sarkkan
HTML-Acrobat
 
Beiträge: 1557
Registriert: Montag 5. April 2010, 01:46
Wohnort: Bei Köln

Re: Balken nur auf der rechten Seite

Beitragvon lauras » Montag 1. August 2011, 13:14

neuling11 hat geschrieben: ...lasse es wiederholen...

Du, das ist der Sinn vom Wiederholen. Dass es dann mehr als einmal auftaucht.. ;)
Benutzeravatar
lauras
Moderator
 
Beiträge: 2114
Registriert: Samstag 3. November 2007, 22:08

Re: Balken nur auf der rechten Seite

Beitragvon neuling11 » Montag 1. August 2011, 14:01

Hallo,

naja, aber wiederholen lassen muss ich es ja auch, ich kann ja keine 100px Breite Grafik nehmen, wenn jemand bei einem breiten Bildschirm dann noch 500px
frei hat...

Sarkkan, ohne wiederholen klappt es, so aber nicht.
Ich bin mal so frei und poste meinen Code
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" xml:lang="de" lang="de">

<head>
    <title>Dominik's-Fotos|Startseite</title>
<?php
include ('./meta.php')
?>
</head>

<body>
<div id="balken">
<div id="header">
<div id="imheader">
<p>
Dominik's Fotos
</p>
</div>
</div>

<div id="umschluss">

<!-- <div id="header">

<p>
Dominik's Fotos
</p>

</div> -->
<!--header ende-->
<div id="nav">

  <ul>
   <li> <a class="hier" href="../index.php">Startseite</a></li>
    <li> <a href="../sites/ueber.php">&Uuml;ber mich</a></li>
    <li> <a href="../sites/galerie.php">Bildergalerie</a></li>
    <li> <a href="../sites/kontakt.php">Kontakt</a></li>
    <li> <a href="../sites/gaestebuch.php">G&auml;stebuch</a></li>
    <li> <a href="../sites/links.php">Links</a></li>
    <li> <a href="../sites/impr.php">Impressum</a></li>
  </ul>
</div><!--nav ende-->

<div id="inhalt">

<h1>Herzlich Wilkommen auf meiner Website!</h1>
Bitte beachten Sie, dass diese Seite momentan noch nicht vollst&auml;ndig ist.



</div>
<!--inhalt ende-->
<div id="bottom">
</div>
<?php
include ("./footer.php")
?>

</div><!--umschluss ende-->
</div>




</body>
</html>


Code: Alles auswählen

..................................................

html {
   /*background-color: #6C8BAA *//*#EDCD83*//*#ffcc99*//*e3f0f5*/ /* #f3e095*/
   /* background-image: url(/design/verlaufhinten1.jpg);
   background-repeat: repeat-x; */
   background-image: url(/backgroundheader.png);
   background-repeat: repeat-x;
   background-color:/*#778899*//*#708090*/ #f8f8f8/* 576464 *//* 37484e *//* 272b37 *//* 879292 */ /* 708090 */ /*#999999*/;
    min-height: 101%;}
body {
   width: 100%;
   background-image: url(/backgroundbody.png);
   background-repeat: repeat-x;


   }
/*ggf müssen noch breiten von border und paddings abgezogen weren*/
#umschluss {
   position: relative;
/*   background-color: #e6f5c6;*/
   /* background-image: url(../hintergrund.gif);*/
   background-color: transparent;
   height: auto;
   width: 950px;
   /* border: 1px solid #aaaaaa; */
    margin: 0 auto;
   /*padding-top: 5px;*/
   /*padding-bottom: 5px;*/

   /* margin-top: 20px; */
   }
#header {
   width: 100%;
   /* background-image: url(../header.jpg); */
   height: 140px;
   background-color: transparent /* #30395C */;
   position: relative;
/*    border-bottom: 1px solid #aaaaaa; */


   }
#strgbg{
    height: 30px;
    float: right;
    width: 50%;
    background-color: #0b465e;
}
#imheader {
    width: 950px;
    margin: 0 auto 0 auto;
}
#header p {
   font-size: 30px;
   color:#fff;
   font-family: cambria;
     float: left;
     margin-left: 20px;
    margin-top:   80px;
   text-shadow: 5px 5px 3px #1a1a1a;
    filter: dropshadow(color=#1a1a1a, offx=5, offy=5);

   }


#nav {

   float: right;
   width: auto;
   height: 30px;

   /*background-color: #c3de88;*/
   /*border: 2px solid #bde56e;*/
   /* background-image: url(../strgg.gif); */
   color: white;
   text-align: center;
   /* border-bottom: 1px solid #aaaaaa;  */
    background: url(/backgroundnav.png) repeat-x;
    -moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;

   }

.... ... ... ... ... .. ..
neuling11
HTML-Freund
 
Beiträge: 128
Registriert: Freitag 17. Dezember 2010, 19:08
Wohnort: Deutschland

Re: Balken nur auf der rechten Seite

Beitragvon Sarkkan » Montag 1. August 2011, 19:05

Ohman.. da muss man ja Kryptologe sein o.O
Und mein Kollege regt sich schon über Code von mir á la
Code: Alles auswählen
/******************************************\
*  Codierung:                            *
*/ @charset "UTF-8";                    /*
*  LEMM CSS Reset:                       *
*/ @import "../../css/reset.css";       /*
*  Nützliche Klassen                     *
*/ @import "../../css/niceClasses.css"; /*
\******************************************/
auf.. xD
Sarkkan, ohne wiederholen klappt es, so aber nicht.
..hä?^^

Sicher das es mit background-position nicht klappt?
Haste des iwo mal online zum testen? Keine Lust mir hier jetzt ne Datei zu erstellen und so
Benutzeravatar
Sarkkan
HTML-Acrobat
 
Beiträge: 1557
Registriert: Montag 5. April 2010, 01:46
Wohnort: Bei Köln

Re: Balken nur auf der rechten Seite

Beitragvon neuling11 » Dienstag 2. August 2011, 13:04

Hallo Sarkkan,

hier (http://dominiks-fotos.de/test/test.htm) ist es mal hochgeladen.
Im style.css soll im body (da ich für html schon ein Hintergrundbild habe) das "backgroundbody.png" auf der rechten Bildschirmseite sichtbar sein.
Irgendwie habe ich gestern noch etwas angestellt, sodass man die Grafik gar nicht mehr sieht :roll: ...
neuling11
HTML-Freund
 
Beiträge: 128
Registriert: Freitag 17. Dezember 2010, 19:08
Wohnort: Deutschland

Re: Balken nur auf der rechten Seite

Beitragvon Sarkkan » Dienstag 2. August 2011, 18:40

Dir ist bewusst, dass es einfach nicht noch weiter nach Rechts geht, weil da einfach die Navi zu ende ist? o.O
Warum willst das überhaupt bis da hinten haben? Stell ich mir irgendwie (vom Aussehen her) billig vor :/
so ist das schon ganz in Ordnung :)

Ansonsten, wenn es umbedingt sein muss, dann musst du den Hintergrund dem Header geben und entsprechend positionieren und repeaten lassen.. :/
Benutzeravatar
Sarkkan
HTML-Acrobat
 
Beiträge: 1557
Registriert: Montag 5. April 2010, 01:46
Wohnort: Bei Köln


Beiträge bitte im neuen Forum

Zurück zu CSS

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

cron