mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 09.12.2016 18:33 Benutzername: Passwort: Auto-Login

Thema: [css] 100%-Problem vom 25.10.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [css] 100%-Problem
Autor Nachricht
Ragnaroek
Account gelöscht Threadersteller


Ort: -

Verfasst Mi 25.10.2006 09:31
Titel

[css] 100%-Problem

Antworten mit Zitat Zum Seitenanfang

Guten Morgen allerseits...

Ich sitze gerade an dieser Webseite:

Entwurf

und habe damit foldendes Problem:

Die grauen "Rahmen" an den Seiten bestehen aus einem 1 Px hohen GIF, was immer wiederholt wird. Jetzt möchte ich das ganze gerne so machen dass je nach Browsergröße die Rahmen bis zum unteren Bildschirmrand gehen. Bei Tabellen brauchte ich die Höhe damals nur auf 100% setzen. Wie verhält sich das bei css?

Könnte mir da evt jemand einen Tipp geben?

Hier noch der Code der Seite:

Code:
<body>

   <div id="container_main">

      <div id="header">
      </div>
      
      <div id="content_main">
      
         <div id="nav_links">
            
            <div id="content_nav_leiste">
               Startseite
            </div>
            
            <div id="content_nav_leiste">
               Company
            </div>
            
            <div id="content_nav_leiste">
               Produkt
            </div>
            
            <div id="content_nav_leiste">
               Preise
            </div>
            
            <div id="content_nav_leiste">
               Referenzen
            </div>
            
            <div id="content_nav_leiste">
               Impressum
            </div>
            
            <div id="content_nav_leiste">
               Sitemap
            </div>
            
         </div>
         
         <div id="nav_rechts">
            
            <div id="login">
               <form>
               
                  <label for="benutzername">Benutzername:</label>
                  <input name="benutzername" id="benutzername" type="text" class="textfeld"/>
                  
                  <label for="kennwort">Kennwort:</label>
                  <input name="kennwort" id="kennwort" type="text" class="textfeld"/>
                  
                  <br />
                  
                  <input type="image" src="images/login.jpg" alt="Absenden" class="login">
                  
               </form>   
            </div>
         </div>
         
         <div id="content">
         
            <div id="content_box_header">
            <p class="schrift_content_header">TIM3m ist eine skalierbare eMail-Marketing-Software für den professionellen Einsatz.</p>
            </div>
            
            <div id="content_box_content">
            <p>Bei uns sind Sie richtig, egal ob Sie 3.000 oder 3.000.000 Maillings im Monat versenden möchten.
            
            <br /><br />
               
            <ul>
               <li class="circle">TIM3m verfügt über umfassende Features</li>
               <li class="circle">basiert auf modernste Technologien</li>
               <li class="circle">ist seit Jahren erfolgreich im Einsatz</li>
               <li class="circle">gestützt durch tiefgreifende Erfahrung im Online-Marketing</li>
               <li class="circle">und ist obendrein noch preisgünstig!</li>
            </ul>
            
            <br />
            
               Die eMail -Marketing- und Newsletter-SoftwareTIM3m kann entweder gekauft oder gemietet (ASP) werden.

             </p>
            </div>
            
            <div id="content_box_footer">
            <p class="schrift_content_footer">mehr...</p>
            </div>
            
            <br />
            
            <div id="content_box_content_no_border">
               <p><b>Update: Endlich Version 2.0 verfügbar!</b>
               
               <br /><br />
               
                  <b>Was ist neu in TIM3m?</b> <br /><br />
                  Machen Sie sich jetzt vertraut mit den neuen <b>Features</b> unserer erfolgreichen Marketing-Lösung...
               
               <br /><br />
               
               Hier die neuen Features im Überblick:
               
               <br /><br />
   
               <ul>
                  
                  <li class="circle"><b>Neu</b>: Administratorbenachrichtigungen</li>
                  <li class="circle"><b>Neu</b>: Spam-Filter-Check</li>
                  <li class="circle"><b>Neu:</b> Blacklist-Report</li>
                  <li class="circle"><b>Neu:</b> Online-Newsletter</li>
                  <li class="circle"><b>Neu:</b> Dublettenabgleich</li>
                  <li class="circle"><b>Neu:</b> Diagramme</li>
                  <li class="circle"><b>Neu:</b> Geographische Informationen</li>
                  <li class="circle"><b>Neu:</b> Multi-Part-eMails</li>
                  <li class="circle"><b>Update:</b> Löschen und Einfügen von Inhaltsblöcken</li>
                  
               </ul>
               
               <br />
               
               Alle Informationen jetzt > hier nachlesen!
   
               <br /><br /><br />
               
               <b>Neuigkeiten</b>
               
               <br /><br />
               
               <b>Mittelständische Unternehmen verschenken E-Mail-Marketing-Potenzial</b><br />
               Fast jedes dritte deutsche Mittelstands-Unternehmen nutzt Outlook als Werkzeug für E-Mail-Marketing-Aktionen – und
               lässt damit erfolgsentscheidende Möglichkeiten wie Follow-up, Controlling und Auswertung ungenutzt.<br />
               Das ist ein Ergebnise unserer aktuellen Studie, die im Februar 2006 veröffentlicht wurde. Im Rahmen der Untersuchung
               haben 162 (Online-)Marketingleiter deutscher Konzerne und Mittelstandsunternehmen Auskunft über ihre Erfahrungen mit
               Online-Marketing gegeben.
               
               <br /><br />
   
               Lesen Sie mehr zum Thema Studie E-Mail-Marketing.
   
               <br /><br />
               
               <b>Im Durchschnitt nutzt heute jeder Deutsche das Internet täglich 58 Minuten</b>,
               liest aber nur 26 Minuten Zeitungen und 18 Minuten Zeitschriften. <br />
               <i>(Quelle: TimeBudget 10 SevenOne Media)</i>
   
               <br /><br />
   
               Die <b>Verteilung des Werbebudgets</b>, also auch die <b>Umverteilung auf eMail- und Newsletter-Marketing</b>, wird
               diesem Nutzungsverhalten nicht gerecht, sondern orientiert sich noch immer an Werten der Vergangenheit:
   
               <br /><br />
               
               
               <ul>
                  
                  <li class="circle">Werbebudget Internet: <b>750 Mio. €</b></li>
                  <li class="circle">Werbebudget Zeitungen: <b>4.972 Millionen €</b></li>
                  <li class="circle">Werbebudget Fach- und Publikumszeitschriften: <b>4.224 Millionen €</b></li>
                  
               </ul>
                  
               <br />
               
               <i>(Quelle: Online-Vermarkterkreis im Bundesverband Digitale Wirtschaft e.V.)</i>
               
                </p>
            </div>
            
         </div>

         
         
      </div>
      
      
   </div>
</body>



und das CSS:
(Styles #nav_links und #nav_rechts stellen die Rahmen dar)

Code:

body,html
    {
    margin: 0;
    padding: 0;
    background: #ffffff;
   font: normal 90% Verdana, Arial, Helvetica, sans-serif;
    }

p,h1,h2,h3,ul,li,dl,dt,dd
    {
    margin: 0;
    padding: 0;
    border: 0;
    }
   

a
   {
   border: none;
   text-decoration: none;
   color: #706c67;
   }
   
a:hover
   {
   border: none;
   text-decoration: none;
   color: #ec5210;
   }
   
h1
    {
    position: absolute;
    top: 72px;
    left: 75px;
    font-size: 13px;
   text-align: right;
    }

h2
    {
    margin: 28px 0 16px 0;
    font-size: 11px;
    }

.schrift_content_header
   {
   color: #FFFFFF;
   }
   
#content_box_content p
   {
   padding: 4px;
   }

.schrift_content_footer
   {
   color: #FF9900;
   }

#container_main
    {
    width: 909px;
   min-height: 600px;
   margin: 0 auto;
    padding: 0;
    }
   
* html #container_main{height: 600px;}
   
#header
    {
    width: 909px;
   height: 157px;
    margin: 0 auto;
    padding: 0;
    background: #fff url(images/header.jpg) no-repeat;
   }
   
#content_main
    {
    width: 909px;
   color: #222;
    }

#nav_links{
    position: relative;
    width: 142px;
   min-height: 600px;
    background: #fff url(images/nav_links.gif) repeat-y;
   float: left;
   }
   
* html #nav_links{
   height: 600px;
   }
   
#nav_rechts
   {
    width: 151px;
   min-height: 600px;
    background: #fff url(images/nav_rechts.gif) repeat-y;
   float: right;
   }
   
* html #nav_rechts{height:600px;}
   
.clear{
   clear:both;
   }
   
#content{
   padding: 20px 0 0 162px;
   }

#content_box_header
   {
   width: 566px;
   max-height: 14px;
   margin: 0 0 0 -4px;
   padding: 2px 2px 2px 2px;
   border: 2px solid #FF9900;
   background: #FF9900;
   }

#content_box_content
   {
   width: 562px;
   margin: 0 0 0 -4px;
   padding: 4px 4px 4px 4px;
   border-left: 2px solid #FF9900;
   border-right: 2px solid #FF9900;
   }
   
#content_box_content_no_border
   {
   width: 566px;
   margin: 0 0 0 -4px;
   padding: 4px 4px 4px 4px;
   }
   

      
#content_box_footer
   {
   width: 566px;
   max-height: 20px;
   margin: 0px 0 0 -4px;
   padding: 2px 2px 2px 2px;
   border: 2px solid #FF9900;
   text-align: right;
   }
   
#content_nav_leiste
   {
   width: 114px;
   max-height: 10px;
   margin: 0 0 0 4px;
   padding: 5px 2px 10px 20px;
   border-bottom: 2px solid #C7C7C7;
   }

#form
   {
   border: 2px solid #C7C7C7;
   }
   
input.textfeld
   {
   width: 120px;
   border: 2px solid #C7C7C7;
   background-color: #FFFFFF;
   margin: -8px 0 0 10px;
   padding: 0 0 0 0;
   }
   
input.login
   {
   background-color: #FFFFFF;
   margin:  12px 0 0 10px;
   padding: 0 0 0 0;
   }
   
label
   {
   width: 5em;
   margin: 5px;
   padding: 5px;
   float: left;
   }
   
#login
   {
   width: 150px;
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   //border: 2px solid #000000;
   }
   
li.circle
   {
   margin: 0 0 0 40px;
   list-style: circle;
   }


P.S. Die Seite ist moment erst auf dem FF ausgelegt und noch nicht 100% optimiert.

Besten dank für die Hilfe

Ragna


Zuletzt bearbeitet von am Mi 25.10.2006 09:32, insgesamt 1-mal bearbeitet
 
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 35
Geschlecht: Männlich
Verfasst Mi 25.10.2006 09:38
Titel

Antworten mit Zitat Zum Seitenanfang

mach ein hintergrundbild in dem beide spalten (links und rechts) enthalten sind und leg den background auf den body.. so ist er immer so hoch wie das browserfenster Lächel



(natürlich nur 1px hoch.. hier nur zur verdeutlichung).

css:
Code:
body {
   background: url(background.gif) top center repeat-y #fff;
   }
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Ragnaroek
Account gelöscht Threadersteller


Ort: -

Verfasst Mi 25.10.2006 09:48
Titel

Antworten mit Zitat Zum Seitenanfang

Hey..das funzt soweit...klasse ansatz...nur eine Frage hätte ich noch wenns gestattet ist..*zwinker*

Kann ich auch 2 Bilder ins Body nehmen? Die Seite sollte nämlich dynamisch bleiben (Chef will das so)...könnte ich die auch verschieden im Body positionieren?

Wenn das funzt ist das prima..dann kann ich den Div mit dem Hintergrund rausnehmen und alles über BODY laufen lassen...

danke

Ragna


Zuletzt bearbeitet von am Mi 25.10.2006 09:50, insgesamt 1-mal bearbeitet
 
Ragnaroek
Account gelöscht Threadersteller


Ort: -

Verfasst Mi 25.10.2006 09:59
Titel

Antworten mit Zitat Zum Seitenanfang

Vergiss was ich geschrieben habe...funzt alles wunderbar...hab vergessen das der Header oben ja immer eine feste Größe hat..*zwinker*


besten dank für die Hilfe

Ragna
 
 
Ähnliche Themen [CSS] Div 100% Höhe und BG-Bild - Problem
[css] 50% + 50% > 100% ?
[css] width: 100%
CSS 100% width auch für IE
[CSS] 100% horizontal Scrollbar im FF?
CSS, height 100% und der Mist mit Browserverschiedenheiten
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.