Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Webseite am oberen (Browser)rand“

ichwars83

Noch nicht viel geschrieben

Hi,

wiedermal habe ich eine Frage an euch, da ich hier immer zufriedenstellende Antworten bekam bisher.

Denke mal das Thema kam schon öfterst, aber die SuFu blieb ohne Erfolg und bei Google kommt nicht ganz das was ich brauch, bzw. funzt es nicht.

Ich taste mich gerade bissl an CSS heran...mehr gewollt als gekonnt ;-)

Die Seite soll am oberen und unteren Rand des Browser abschließen, dass heißt ich möchte dort keine Wiederholung bzw. die Hintergrundfarbe.

Ich habe die Seite mittels eines Divs zentriert und darin mit Tabellen gearbeitet. Der Content wiederholt sich auch nach unten. Aber wie gesagt, der Header und der Fußbereich sollen am oberen bzw. unteren Rand abschließen.
Zum besseren Verständnis folgt das Bild, nicht wunder ist noch ohne Inahlte, aber kann man im nachhinein noch ändern.



Hier noch der Code:

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>
<style type="text/css">
<!--
body {
 background-color: #024a5e;
 margin:0;
 padding:0
}
#bg { background-image:url(Bilder/home2_02.gif); background-repeat:repeat-y; background-position:50px 50%;
}
.Stil1 {font-family: Verdana, Arial, Helvetica, sans-serif}
#all {
 position:relative;
 margin:0 auto;
 width:1030px;
 height:auto;
 top: 0;
}
-->
</style></head>
<body><br />
<div id="all" position="absolute" top="0px">
<table width="1000" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div align="center"><img src="Bilder/home2_01.gif" width="900" height="137" /></div></td>
  </tr>
  <tr>
    <td id="bg" background="Bilder/home2_02.gif"><div align="left">
      <table width="1000" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="113">&nbsp;</td>
          <td width="553"><h3 class="Stil1">&nbsp;</h3>
            <h3 class="Stil1">HEADLINE</h3>
            <p class="Stil1">Fließtext</p></td>
          <td width="334">&nbsp;</td>
        </tr>
      </table>
    </div></td>
  </tr>
  <tr>
    <td><div align="center"><img src="Bilder/home2_04.gif" width="900" height="40" /></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
</body>
</html>

Hoffe ihr könnt mir Tipps oder Ratschläge geben.

Herzlichen Dank schonmal.

MFG IcHwArS
 

ichwars83

Noch nicht viel geschrieben

AW: Webseite am oberen (Browser)rand

Das ist mir auch bewusst...denke hab mich da falsch ausgedrückt. Der Header und der Fußbereich werden noch bearbeitet. Es ist eine geslicete PS-Grafik. Deswegen kann ich im nachgang die Headergrafik ja ersetzten.

Aber wie erwähnt soll des ganz oben am Rand sein und nicht mit abstand, so das ich meine dunkelblaue Hintergrundfarbe sehe.
 

pixelmaker

jeden Tag neu hier

AW: Webseite am oberen (Browser)rand

Geht ganz einfach, wenn ich die Frage richtig verstehe.
Container in kompletter Größe der Seite, Rand des Containers mit der fetten grünen Kontour belegen. z-index:2

Nächste Ebene die gelbe Linie aus einem kleinen Stück mit repeat-x zur linie zusammensetzen und an gewünschter Stelle ausrichten. z-index:1

Nächste Ebene die blaue Linie aus einem kleinen Stück mit repeat-y zur linie zusammensetzen und an gewünschter Stelle ausrichten.. z-index:3

Den Inhalt der Seiten in weitere Container und z-index:4 usw

CSS lernen bei css Zen Garden: Die Schönheit der CSS-Gestaltung

Mal da auf "Alle Designs" gehen und lass Dich begeistern, was alles geht.
Es ist immer die gleiche Seite nur mit unterschiedlichen Style Sheets.
Alle zu den Seiten gehörenden CSS kann man sich anschauen.
Vielleicht wird Dein "wollen" dann noch etwas fordernder.
 

ichwars83

Noch nicht viel geschrieben

Vielen Dank für die Tipps...ganz verstehen tu ich des leider noch nicht.

@leohh: wenn das alles auf deutsch wäre würde ich klar kommen, aber so fällt es mir schwer...

@pixelmaker: wie meinst du das alles genau? Soll ich des Bild neu slicen?
Momentan sinds 3 Teile: der Header, ein kleines stück von dem Contentbereich, dieser wird nach unten wiederholt und zu guter letzt hab ich noch einen Bild für den Fußbereich.

Update:

Also ich hab den Fehler grad selbst erkannt, warum die Seite nicht am oberen Rand "klebt"...es war ein Absatz drin...;-)

Jetzt hätt ich gern, das der Fußbereich halt immer am unteren Rand "Klebt", egal wie groß das Browserfenster ist bzw. wieviel Text im Content steht.

Danke schon mal

Update 2:

also ich hab ein Beispiel gefunden wie es im Browser aussehen sollte und auch von der Anpassung her. Werd mich da jetzt mal dran versuchen..learning by doing ebend...;-)

Hier der Link:

Vielleicht habt ihr ja tipps wie ich des umsetzen könnte...

Ich tätige mal nen neuen Beitrag.

Mittlerweile habe ich mein Rohdesign dem Beispiel aus meinem vorherigen Post angepasst. Leider passt mein Inhalt im Content nun nicht ganz in den Content-Bereich, denn mein Scrollbalken ist neben der Page, hätte es aber gern so abschließend wie in der Beispielseite.

Ich häng wieder nen Screenshot und den Code dran.

Danke für Tipps und Hilfe...




Code sieht vielleicht bissl Wild aus

HTML:
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer/ centred single column layout </title>
<style type="text/css">
html {
 height:100%; 
 max-height:100%; 
 padding:0; 
 margin:0; 
 border:0; 
 background:#024a5e;
 font-size:76%; 
 font-family:georgia, palatino linotype, times new roman, serif;
 /* hide overflow:hidden from IE5/Mac */ 
 /* \*/ 
 overflow: hidden; 
 /* */ 
 }
body {
 height:100%;
 max-height:100%;
 overflow:hidden;
 padding:0;
 margin:0;
 border:0;
 background:rgb(209,205,193);
 background-color: #024a5e;
 }
#content {
 display:block;
 overflow:auto;
 position:absolute;
 z-index:0;
 top:125px;
 bottom:52px;
 width:900px;
 margin-left:-460px;
 left:50%;
 background:;
 background-image: url(home2_02.gif);
 height: 1088px;
 }
* html #content {
 top:0; 
 bottom:0; 
 height:100%;
 width:900px;
 border-top:137px solid #fff; 
 border-bottom:50px solid #fff;
 }
#head {
 position:absolute; 
 margin-left:-460px; 
 left:50%; 
 top:0; 
 width:640px; 
 min-width:640px; 
 height:150px; 
 background:#fff; 
 font-size:1em; 
 z-index:5; 
 }
* html #head {
 top:0px; width:642px; height:137px;
 }
#foot {
 text-align:center;
 position:absolute;
 margin-left:-460px;
 left:50%;
 bottom:11px;
 width:640px;
 min-width:640px;
 height:50px;
 background:url(heading.jpg);
 background-position:0 100px;
 font-size:1em;
 z-index:5;
 font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
 font-weight:bold;
 color:#000;
 }
* html #foot {
 bottom:2px; width:642px; height:48px;
 }
 
#content p {
 padding:5px; text-align:justify;
 }
.boldhead {
 font-size:1.5em; 
 font-weight:bold;
 }
.bold {font-weight:bold;}
.left {float:left; margin:10px; border:1px solid #000;}
.right {float:right; margin:10px; border:1px solid #000;}
.lefttext {float:left; width:300px; text-align:justify;}
.righttext {float:right; width:300px; text-align:justify;}
* html .lefttext {float:left; width:310px; text-align:justify;}
* html .righttext {float:right; width:310px; text-align:justify;}
.Stil1 {
 font-family: Geneva, Arial, Helvetica, sans-serif;
 font-size: small;
}
</style>
</head>
<body>
<div id="head"><img src="home2_01.gif" alt="" width="900" height="137" /></div>
<div id="foot"><img src="home2_04.gif" alt="" width="900" height="55" /></div>
<div id="content">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="7%">&nbsp;</td>
    <td width="60%"><p>&nbsp;</p>
      <h3 class="Stil1">HEADLINE</h3>
      <p class="Stil1">Fließtext</p>
      <p class="Stil1">&nbsp;</p>
      <p class="Stil1">&nbsp;</p>
      <p class="Stil1">&nbsp;</p>
      <p class="Stil1">&nbsp;</p>
      <p class="Stil1">&nbsp;</p>
      <p class="Stil1">&nbsp;</p>
      <p class="Stil1">&nbsp;</p>
      <p class="Stil1">&nbsp;</p>
      <p class="Stil1">&nbsp;</p>
      <p class="Stil1">&nbsp;</p>
      <p class="Stil1">&nbsp;</p>
      <p class="Stil1">&nbsp;</p>
      <p class="Stil1">&nbsp;</p>
      <p class="Stil1">&nbsp;</p></td>
    <td width="33%">&nbsp;</td>
  </tr>
</table>
<p class="bold">&nbsp;</p>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-451410-1";
urchinTracker();
</script>
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:

pixelmaker

jeden Tag neu hier

AW: Webseite am oberen (Browser)rand

@ ichwars83
Ich möchte Dir nicht das Lernen verderben. Nur wenn Du selbst zum Ziel kommst wirst Du wissen was Du geschafft hast.

Das ist im Prinzip der Aufbau den Du möchtest:
css Zen Garden: The Beauty in CSS Design

und das ist das Cascading Style Sheet dazu:
http://www.csszengarden.com/202/202.css

Lerne das zu lesen.

Die Bilder sind über das Style Sheet in die Seite eingebunden.
Nur der Text ist in der HTML-Seite wird aber über das Style Sheet formatiert.
Du findest im CSS die Klassen für die Bilder und die Positionierung an der oberen Kante:
#extraDiv1 span
{
display:block;
position:absolute;
bottom:-198px;
left:0;
width:100%;
height:428px;
background:url('haut1.png') no-repeat 50% 100%;
}
#extraDiv2
{
position:fixed !important;
position:absolute;
top:0;
left:0;
width:100%;
height:23.2% !important;
height:102px;
min-height:102px;
max-height:230px;
background:url('haut2.png') no-repeat 50% 100%;
z-index:4;
}

Die Bilder sind unter http://www.csszengarden.com/202/haut1.png
bzw. http://www.csszengarden.com/202/haut2.png

So kannst Du das komplette CSS zerlegen und lernen wie es aufgebaut ist.
Und wenn Objekte übereinander liegen, werden sie auf unterschiedliche Layer gelegt.

Kurz zu Deiner Seite. Zumindestens der blaue Balken muss ja in der Größe variabel sein um auf unterschiedlichen Monitorgrößen zu funktionieren. Ob der Balken aus einem ganzen oder aus einem kleinen und zum ganzen Balken aneinandergereitem Bild besteht ist ja egal, denn er verzerrt sich nicht wenn man ihn mit einer Größenangabe von 100% angibt.

Du hast einen Container, der weiße Hintergrund.
Darauf auf dem nächsten Layer (
z-index:2; ) liegt der gelbe Balken, der über das CSS geladen wird.
Darauf auf dem nächsten Layer liegt die Schrift vor dem gelben Balken, die in einem Container auf der HTML liegt und nur im CSS formatiert wird.
Und auf dem dritten Layer liegt der blaue vertikale Balken.
Ich würde Dir raten von Anfang an mit externen Style Sheets zu arbeiten, die kannst Du dann für mehrere Seiten verwenden.
Ausser dem Text ist nichts direkt in der HTML-Datei.

 
Zuletzt bearbeitet:

leohh

CSS verliebt

AW: Webseite am oberen (Browser)rand

Ich wusste, dass ich noch ein Beispiel dazu hab.
Ich hab das gleich mal als uebungsdatei hergenommen um die cssstickyfooter-Methode etwas einzustudieren.
Bilder die dazu benoetigt werden, sind exakt 2:
Einmal der sich horizontal wiederholende header


Noch einmal die sich vertikal wiederholende Sidebar


Mehr Grafiken, brauchst du dafuer nicht!

Zum folgenden Codebeispiel, werde ich nicht viel sagen, da es sich von selbst erklaert.
HTML:
<!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" xml:lang="de" >
   <head>
      <meta http-equiv="content-type" content="text/html; UTF-8" />
      
      <title>index</title>

      <style type="text/css" media="screen, projection">
      
         /* reset 
         ----------------------------------------------------------------------------------------*/
         *        { margin: 0; padding: 0; }
         
         a        { text-decoration: none; outline: none; color: #000; }
         a img    { border: 0; }
          
         ol, ul   { list-style: none; }
         q:before, q:after, 
         blockquote:before, blockquote:after { content: ""; }
         
         /* footer stick-alt
         ----------------------------------------------------------------------------------------*/
         html, body, #page-wrap {height: 100%;}
         body > #page-wrap {height: auto; min-height: 100%;}

         /* CLEAR FIX*/
         .clearfix:after {content: ".";
         	display: block;
         	height: 0;
         	clear: both;
         	visibility: hidden;}
         .clearfix {display: inline-block;}
         /* Hides from IE-mac \*/
         * html .clearfix { height: 1%;}
         .clearfix {display: block;}
         /* End hide from IE-mac */
         
         
         /* rebuild
         ----------------------------------------------------------------------------------------*/
         body { 
             font: 62.5%/1.5  "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif; 
             background: #000 url() repeat;
             color: #333;     
             text-align:center; 
         }
         
         #page-wrap {
            background: #fff url(Bilder/bar.jpg) repeat-y 650px 0;
            width: 800px;
            margin: 0 auto;
            text-align: left;
            
         }
         
         #main {
            tet-align: left;
            padding-bottom: 150px;
            
         }
         
         /* header
         --------------------------------------------------------------------------------------- */
         #header {
            background: #fff url(Bilder/main_header.jpg) repeat-x 0 20px;
            height: 101px;
            text-align: right; /* overwriting the text orientation */
            
         }
         #header h1 {
            width: 629px;
            float: left;
            margin-top: 25px ;
            
         }
         #header strong {
            display: block;
            font-size: .8em;
            margin-top: -10px;
            
         }
         #header span {
            background: url(Bilder/bar.jpg) repeat-y;
            float: right;
            margin-right: 20px;
            width: 130px; height: 101px;
            
         }
         
         /* content
         --------------------------------------------------------------------------------------- */
         #content {
            width: 609px; /* width + padding-left + padding-right = absolute Breite */
            float: left;
            padding-bottom: 9em;
            padding: 10px 0 0;
            padding-left: 20px; 
            padding-right: 20px;
            
         }
         
         /* sidebar
         --------------------------------------------------------------------------------------- */
         #sidebar {
            width: 141px; /* width + padding-left = absolute Breite */
            float: right;
            padding-top: 10px;
            padding-left: 10px;
            
         }
         
         /* footer
         --------------------------------------------------------------------------------------- */
         #footer {
            position: relative;
            background: #000 url('Bilder/bar.jpg') repeat-y 650px 0;
            margin: -20px auto 0;
            width: 800px; height: 20px;
            text-align: left;
	         clear:both;
         } 
            
         }
         
         /* general classes
         ----------------------------------------------------------------------------------------*/
         .hide, .print-logo, .close-button{ display:none; }
         .clear { clear:both; } 
         .right { float: right; } 
         .left { float: left; }
         .preforient { text-align: left; } /* prefered orientation of the text */
         
      </style>
         
   </head>
   <body id="index">
   
      <div id="page-wrap">
         
         <div id="main" class="clearfix">
            <div id="header" class="clearfix">
               <h1>Header area<strong>subtext</strong></h1>
               <span></span>
               
            </div>
            
            <div id="content">
               <h3>Content area</h3>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
               </p>
               
            </div>
            <div id="sidebar" class="clearfix">
               <h3>Sidbar area</h3>
               <ul id="navi">
                  <li><a href="#" title="Menuepunkt1">Menuepunkte1</a></li>
                  <li><a href="#" title="Menuepunkt2">Menuepunkte2</a></li>
                  <li><a href="#" title="Menuepunkt3">Menuepunkte3</a></li>
                  <li><a href="#" title="Menuepunkt4">Menuepunkte4</a></li>
                  <li><a href="#" title="Menuepunkt5">Menuepunkte5</a></li>
                  <li><a href="#" title="Menuepunkt6">Menuepunkte6</a></li>
                  
               </ul>
                     
            </div>
            
         </div>
         
      </div>
         
      <div id="footer" class=""></div>
   
   </body>
</html>
[/html]
 
Zuletzt bearbeitet:

ichwars83

Noch nicht viel geschrieben

AW: Webseite am oberen (Browser)rand

@leohh: Vielen Dank für das Beispiel. Genau so wollt ich des haben...an dem Beispiel lässt sich es gut "lernen".

Herzlichen Dank für alle die geholfen haben. Ich werd mir mal noch das eine oder andere Buch besorgen und auch hier mit euren Beispielen experimentieren.

mfg ichwars
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.855
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben