zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Border und fixiertem Footer

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.07.2013, 21:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.07.2013
Beiträge: 4
Benezi befindet sich auf einem aufstrebenden Ast
Standard Problem mit Border und fixiertem Footer

Hallo Forum!

Ich bin neu in CSS und bräuchte Hilfe bei angehängtem Code.
Mein Problem: meine ganze Seite befindet sich in #page und ist links und rechts mit einem Rahmen versehen. Jetzt wollte ich den Footer nach unten fixieren, da das gradient-Element als Hintergrund sonst den Farbverlauf beim Ende des Containers #content aufhört. Den Footer zu fixieren hat jetzt schon mal geklappt, aber der #content Container nimmt noch nicht den gesamten Platz bis an den Footer an. Und Rahmen, der eigentlich alles umschließt ist ab Bereich des #content auch verschwunden. Könnt ihr mir behilflich sein bei diesen beiden Problemen?

Code:
#page {
  background: #FFFFFF;
  border-left: 3px solid #87a619;
  border-right: 3px solid #87a619;
  text-align: left;
margin: 0 auto;
  width: 760px;


}
#header {	
  background: #FFFFFF;
  border-bottom: 3px solid #87a619;
  height: 280px;
  position: relative;
}
#nav {
  bottom: 0;
  font-size: 1.1em;
  position: absolute;
  left: 25px;	
}
#breadcrumb {
  background: #87a619;
  border-bottom: 2px solid #90C7E4;
  color: #87a619;
  font-size: 1.2em;
  height: 46px;
  position: relative;
}
#info {
  background: #FFFFFF; 
  border-bottom: 3px solid #93CCEA;
  color: #000000; 	
  font-size: 1.2em;
  line-height: 2.0em;	
  position: relative;
  padding: 20px 230px 20px 30px;
}
#content {
  float: left;
  font-size: 1.2em;
  line-height: 1.5em;
  padding: 30px 20px 30px 30px;
  width: 448px;

}
#sidebar {
  color: #000000;
  float: right;
  font-size: 1.1em;
  line-height: 1.4em;
  padding: 10px 30px 20px 20px;
  width: 206px;
}
#footer {
  border-top: 3px solid #87a619;
  clear: both;
  color: #aaa;
  font-size: 1.1em;
  height: 70px;

}
Ich entschuldige mich gleich mal für den Gepfuschten Code. Bin blutigster Anfänger.

Viele Grüße und vielen vielen Dank!!
Benedikt

Geändert von Benezi (20.07.2013 um 16:09 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.07.2013, 12:47
Benutzerbild von dercoe
Wissbegierig
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2010
Ort: NRW
Beiträge: 115
dercoe befindet sich auf einem aufstrebenden Ast
Standard

Hi und willkommen im Forum.

Bevor es jemand anderes macht, schlage ich Dir erstmal vor Deine Seite auf einem kostenlosen Webspaceanbieter hochzuladen, damit man CSS und HTML besser analysieren kann.

Musste ich mir zu meiner Newbie-Zeit auch oft anhören - stimmt aber!

Da Du schreibst Du wärst noch Frischling in CSS solltest Du Dich mit den Grundlagen vertraut machen, bevor Du weiter "Gepfuschten Code" anwendest.

Dazu gibt es eine sehr gute Seite: Little Boxes Teil 1 .

Es macht es Dir und uns anderen Usern einfacher, wenn wir über dieselben Begriffe/Definitionen sprechen.

Du bekommst hier wirklich sehr viel Hilfe, wenn Du bereit bist den Helfern mit diesen kleinen Regeln entgegen zu kommen.
__________________
Gruß
Marko


Habt Geduld mit den Anfängern, schließlich wurde niemand allwissend geboren!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.07.2013, 16:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.07.2013
Beiträge: 4
Benezi befindet sich auf einem aufstrebenden Ast
Standard

Hallo Marko!

Danke für das Tutorial. Sieht gut aus, werd ich mir mal anschaun. Die Seite ist von der Datenbank her etwas umfangreicher, ich würde hier mal nur den nötigen Code reinschreiben.

Vom Layout her ist das folgender HTML-Code:

HTML-Code:
<body>
<div id="page">
<?php $this->includeSnippet('header'); ?>
<div id="content">

  <h2><?php echo $this->title(); ?></h2>
  <?php echo $this->content(); ?> 
  <?php if ($this->hasContent('extended')) echo $this->content('extended'); ?> 

</div> <!-- end #content -->
<div id="sidebar">
<?php $this->includeSnippet('sidebar'); ?>

</div> <!-- end #sidebar -->
<?php $this->includeSnippet('footer'); ?>
</div> <!-- end #page -->
</body>
Dazu eben der zugehörige CSS Code.
Mein Ding ist eigentlich nur: Footer nach unten, Content so lang wie nötig um die Seite zu füllen. Backround im body als Gradient. Und der Farbverlauf muss eben bis Seitenende gehen und nicht nach dem Footer aufhören.

Danke für deine/eure Hilfe!
Grüße, Benedikt
Mit Zitat antworten
  #4 (permalink)  
Alt 20.07.2013, 16:13
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Vom Layout her ist das folgender HTML-Code:
das ist php! Was ist daran eigentlich so schwer, eine einfache lauffähige Demoseite online zu stellen??

bitte dies lesen: http://xhtmlforum.de/40080-f-r-frage...twortende.html
Mit Zitat antworten
  #5 (permalink)  
Alt 20.07.2013, 18:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.07.2013
Beiträge: 4
Benezi befindet sich auf einem aufstrebenden Ast
Standard

So, das ganz online nun:

frog.kilu.de

Grüße, danke für eure Mühe,
Benedikt
Mit Zitat antworten
  #6 (permalink)  
Alt 21.07.2013, 12:30
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Mit welchem Browser hast du denn die Probleme. Ich kann das nicht so ganz nachvollziehen, da der Hintergrundverlauf im FF22 und im Chrome bis nach unten reicht. Der Verlauf ist dagegen im IE8 nicht zu sehen. Da solltest du als Rückfallabsicherung eine feste Farbe bestimen oder die Filterfunktion von MS verwenden.

Gradients, die für die Mehrzahl der Browser funktionier, kannst du dir mit Ultimate CSS Gradient Generator - ColorZilla.com erstellen lassen.

Um deine Seite anzupassen empfiehlt es sich im Firefox erst mal zu schauen wie die Seite aussieht und dazu kann man das Addon Firebug hinzufügen. Mit rechte Taste auf ein Element und einem klick auf Element untersuchen(inspect) kann man sich die CSS Eigenschaften anzeigen lassen und auch direkt verändern um sich die Auswirkungen anzusehen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #7 (permalink)  
Alt 21.07.2013, 12:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.07.2013
Beiträge: 4
Benezi befindet sich auf einem aufstrebenden Ast
Standard

Ist soweit gelöst, danke euch!
Grüße, Benedikt
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
rätselhafter Leerraum zwischen Content und Footer im IE jhonnybravo CSS 5 04.03.2010 12:47
Problem bei Anordnung- footer nach div mit variabler Höhe gombi CSS 7 18.01.2010 19:14
Untermenü im IE nici CSS 10 22.06.2009 22:19
Problem mit CSS in Joomla 1.5 noobilicius CSS 6 25.09.2008 21:24
footer bottom problem im FF bei langer renderzeit ... misfit CSS 0 25.08.2005 16:43


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:57 Uhr.