HTML - Objekte "Fixieren"?

Hallo Leute,

Wie macht man so was in HTML/CSS?:

http://beusterse.de

Also das die Seiten immer bleiben und sich nur der Mittelteil bewegt?? Hoffe auf Antworten, Carlo!

5 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

kuechentiger

29.04.2011, 05:36

Hat man früher mit Frames gemacht, das ist heute nicht mehr gern gesehen.

Es gibt verschiedene Möglichkeiten:

man kann das Menü, den Bannerbereich und alles was sich sonst nicht mitbewegen soll, wie roybohn11 schon sagte, mit position:fixed "festkleben".

http://de.selfhtml.org/css/layouts/fixbereiche.htm#definieren

kuechentiger

29.04.2011, 05:59

Ach, das was du da meinst auf dieser Seite ist ein festes (background-attachment:fixed) Hintergrundbild im Body, wo der ganze Seiteninhalt in einem etwas schmäleren div sitzt. Das hat auch wieder einen (halbdurchsitigen (*.png)) Hintergrund, der sich mit "background-attachment:scroll" drunter bewegt.
Beispiel wie man sowas macht:
http://www.webmasterpro.de/coding/article/css-bildeffekte-mit-background-attachment-fixed.html#goto-veranschaulichung

kuechentiger

29.04.2011, 05:40

Oder man macht eine Seite mit Menü, Banner etc. und setzt den (externen) Inhalt in eine Art Frame als "Object", was dann mit overflow:auto scrollt, also sich bewegen läßt.
http://www.mediaevent.de/2008/12/html-object-tag/

kuechentiger

29.04.2011, 05:37

Oder man macht ein scrollbares Div (meine Lieblingsmethode).
Dafür ist hier ein einfaches Beispiel:
http://www.flobox.de/scrollbares-div#more-194

roybohn11

28.04.2011, 20:28

mit css geht das

.element{

position:fixed;

left:0px;

top:0px;

width:100px;

height:100px;

}

und schon ist ein html-element mit dieser Klasse fixiert.

nur der IE bockt damit n bissl rum, der alte jedenfalls :-)

Beste Grüße

Carlo98

Beitragsersteller

28.04.2011, 20:35

Äh, irgendwie klappt es nicht, könntest du mal einen MINI(!!) Quelltext als beispiel zeigen?

Danke! (esse jetzt erstmal, also kann ich nicht direkt testen^^)

crashlady

28.04.2011, 21:02

@Carlo98

selfhtml.org!

crashlady

28.04.2011, 21:07

@crashlady

wirst damit echt schon von jeder Seite sprichwörtlich zugeschissen....

Liberatio

28.04.2011, 20:29

via HTML: machst du es mit Frames. Du teilst deine Website also in die Abschnitte "Navigation" und "Hauptteil" ein...

http://de.selfhtml.org/html/frames/definieren.htm

MEGACHELTERRAR

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Webseite

28.04.2011, 20:41

Man kann etwas neues in DIVs schreiben, aber einfacher aber auch älter sind iFrames:

http://de.selfhtml.org/html/frames/eingebettete.htm#definieren

Bei Fragen einfach schreiben ;)

crashlady

28.04.2011, 20:28

mit Frames zB

www.selfhtml.org

Ähnliche Beiträge

Wie kann man für ein HTML-Objekt 2 CSS-Keyframe-Animationen abspielen lassen?

Also ich möchte, dass das Objekt, bspw. ein Quadrat, das unsichtbar ist, zuerst langsam erscheint und in der nächsten Animation sich dann unaufhörlich bewegt. Das alles möchte mithilfe von CSS-Keyframes machen.

Wie geht das?

...zum Beitrag

CSS Eigenschaften mit Button verändern?

Hallo,

ist es irgendwie möglich durch einen Button (also wenn man drauf klickt) in HTML CSS Eigenschaften von anderen Objekten zu verändern?

...zum Beitrag

Bilder Untereinander HTML/CSS?

Wie kann ich die Bilder untereinander anzeigen lassen? bitte um Hilfe!

http://www.cssdesk.com/xebFv

...zum Beitrag

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zum Beitrag

Wie passe ich die Größe eines HTML-Objektes mit CSS dynamisch an?

Wenn ich die Seite also kleiner mache, sollte sich das Objekt, wie oben beschrieben, anpassen.

Wie mache ich das?

Danke im Voraus

...zum Beitrag

Camera shake CSS / JS?

Hallo. Gibt es eine möglichkeit, oder library, ein camera shake zu erzeugen in html / css / js? Also dass die ganze website wackelt, alswenn es ein erdbeben gibt oderso haha also hoffe ihr wisst was Ich meine und dass mir jmd weiterhelfen kann

...zum Beitrag

Wieso wird CSS nicht übernommen?

Ich habe gerade ein Problem, das soo frustrierend ist. Ich bin HTML & CSS Anfänger und wollte eine Webseite aus einem Tutorial Video nachbauen. Die Inhalte und Struktur im HTML habe ich hinbekommen. Nun scheitere ich aber am CSS. (Browser Chrome) Für mich sieht alles richtig aus. CSS ist eigentlich eingebunden, aber die Eigenschaften werden nicht übernommen. Ich habe schon etliche Seiten durchforstet und keine Lösung hat funktioniert. (Cache leeren brachte nichts, Bei den anderen Browsern Firefox, Explorer und Safari besteht das gleiche Problem( ich habe auch keine Schusselfehler entdeckt). Die beiden Dateien liegen auch im selben Ordner. Liegt es vielleicht an meinem Laptop oder an den Browsern? Ich bin ratlos. Ich hoffe jemand kann mir irgendwie helfen.

Ich habe screenshots von der HTML-Datei und CSS-Datei beigefügt.

...zum Beitrag

Wie kann ich mit HTML/ CSS DIV Tags bündig an den Rand anpassen?

Ich habe folgendes Problem mit Html/Css. Ich möchte gerne einen div tag auf einer Website ganz oben ansiedeln. Das einzige Problem was ich dabei habe ist, dass ich es nicht bündig hinbekomme. Zwar schließen die Div Tags untereinander bündig ab, aber jeweils am Rand der Website bleibt ein Spalt über. Mit Margin & Padding klappt es leider auch nicht. Ein Beispiel Quelltext habe ich hier:

<head>
<style type="text/css">
#do {
background-color:grey;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
#di {
background-color:red;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
</style>
</head>
<body>
<div id="do">
Hallo
</div>
<div id="di">
Hallo
</div>
</body>

PS: Das ist nur ein Beispiel, welches mein Problem verdeutlichen soll. Ich hoffe ihr könnt mir helfen.

...zum Beitrag

Wie bekomme ich das Bild runter (Html, css)?

Ich wollte bisschen mit html üben und wollte ein bild in die mitte des textrahemns in der mitte setzen doch egal wie ich es ändere es bewegt sich nicht drunter rein ^^ was hab ich falsch gemacht?

...zum Beitrag

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zum Beitrag

Fehler beim Einbinden von CSS in HTML Datei?

Hallo, ich bin noch Anfänger und habe folgendes Problem: die CSS-Codes funktionieren nicht in meiner HTML Datei obwohl es eingebunden sein sollte und im Browser wird ein Fehler angezeigt aber ich weiß nicht was ich machen soll (Hab schon einiges probiert) anbei Bilder dazu, ich hoffe, dass mir jemand helfen kann. Vielen Dank schon Mal!

...zum Beitrag

Website (HTML und CSS) Mehrere Bilder beim Scrollen sichtbar machen...

Hallo zusammen,

ich möchte gerne mit HTML und CSS eine Website erstellen. Ich habe auch schon das Grundgerüst. Jetzt möchte ich beim Scrollen Bilder sichtbar werden lassen. Das ist schwer auszudrücken...deswegen hier eine Beispielseite: http://nextcargame.com/

wenn man runterscrollt wird ein Bild sichtbar das scheinbar im Hintergrund ist und wird wieder vom Vordergrund verdeckt. Weiter unten kommt dasselbe mit einem anderen Bild. Weiß jemand zufällig wie man so etwas macht? Vielleicht kann mir ja jemand helfen;)

LG Calamann

...zum Beitrag

Wie erstelle ich einen coolen Header, bzw. ein cooles Menü bei CSS/HTML?

Hallo Community,

Ich habe momentan in der Schule das Thema CSS und HTML. Wir müssen nun alle eine eigene Website erstellen. Ich hab mich dann mal auf die Suche nach ein paar coolen Websites gemacht, um mich dabei inspirieren zu lassen. Eine bestimmte Seite hat es mir auch sehr angetan, vor allem der Header, bzw. das Menü oben. Nun wollte ich fragen, wie ich so ein Menü (muss nicht so krass sein) erstellen kann? Muss ich da schon mit Javascript arbeiten oder reicht CSS/HTML aus?

Hier der Link zu der Website: http://rosewatermv.com/

Vielen Dank schon im Voraus.

...zum Beitrag

text-align funktioniert nicht?

Hey Leute, ich versuche zurzeit eine Website mit Atom zu erstellen. HTML und CSS.

Ich brauch zurzeit den "Command" text-align. Aber irgendwie funktioniert dieser nicht. Und wir nicht mal aufgelistet. Woran liegt das?

http://prntscr.com/k67npb

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen