zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bestimmten Bereich eines Bildes anzeigen lassen (Fenstermodus)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.04.2015, 02:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.04.2015
Beiträge: 12
Thorxel befindet sich auf einem aufstrebenden Ast
Standard Bestimmten Bereich eines Bildes anzeigen lassen (Fenstermodus)

Hallo Community,

ich möchte folgendes mit einer Programmierung erreichen und hoffe, dass ihr mir dabei helfen könnt:

Und zwar möchte ich (eine Grafik wird das nochmal verdeutlichen) ein Bild im vollen Modus des Browsers komplett anzeigen lassen und wenn man den Browser kleiner zieht (Fenstermodus) das praktisch links und rechts sich da bild so anpasst, dass rechts und links etwas fehlt und man nur die Mitte des Bildes angezeigt bekommt.

Diese Grafik verdeutlicht das nochmal: http://reyplayxs.de/Test/

Danke jetzt schonmal für eure Antworten ich bin mir sicher ihr könnt mir weiterhelfen.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.04.2015, 08:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

Zitat:
ich bin mir sicher ihr könnt mir weiterhelfen
Dazu fehlen leider noch einige Informationen von dir.

Handelt es sich um ein Hintergrundbild (background-image) oder befindet es sich als Vordergrundbild (img src="") im HTML-Quelltext?

Und wie sieht dein bisheriger HTML/CSS-Quelltext aus? Am besten ein Link zu deiner Seite.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.04.2015, 00:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.04.2015
Beiträge: 12
Thorxel befindet sich auf einem aufstrebenden Ast
Standard

Hey

- zur Zeit ist es mit <img src=""> gelöst (gerne bereit für andere Lösungswege)



---- HTML Code ----

HTML-Code:
<!DOCTYPE html>
<html lang="de">

<head>

    <title>Titel</title>
    
    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

    <div id="wapper">
        
        
        <div id="headline">

            <div id="netbar">
                <img alt="Networklogo" src="http://xhtmlforum.de/images/network-logo.png" id="networklogo">
            </div> <!-- netbar -->

            <div id="login">
                <img alt="Login" src="http://xhtmlforum.de/images/login.png" id="loginbild">
            </div> <!-- login -->

        </div> <!-- headline -->


        <div id="header">
            <img alt="Headerbild" src="http://xhtmlforum.de/images/IMG_5854.JPG" id="headerbild">
        </div> <!-- header -->



        <div id="navi">

            <div id="menu1">
            </div> <!-- menu1 -->

            <div id="sozibox">
            </div> <!-- sozibox -->

        </div> <!-- navi -->



        <div id="content">

            <div id="in-content">                
            </div> <!-- in-content -->

        </div> <!-- content -->
        
    </div> <!-- wapper -->

</body>
    
</html>

---- CSS Code ----

HTML-Code:
body {
    margin: 0px; 
    padding: 0px;
}

div#headline {
    display: block;
    position: fixed;
    width: 100%;
    height: 4%;
    min-height: 30px;
    top: 0%;
    left: 50%;
    margin-left: -50%;
    background-color: #313131;
    box-shadow: 1px 1px 6px #000; 
    -moz-box-shadow: 1px 1px 6px #000;
    -webkit-box-shadow: 1px 1px 6px #000;
    -khtml-box-shadow: 1px 1px 6px #000;
    -o-box-shadow: 1px 1px 6px #000;
    z-index: 48;
    
}

div#netbar {
    display: block;
    width: 100%;
    height: 4%;
    min-height: 25px;
    top: 0%;
    position: fixed;
}

img#networklogo {
    width: auto;
    height: 100%;
    min-height: 30px;
    display: block;
    top: 0%;
    z-index: 50;
}

div#login {
    display: block;
    width: 100%;
    height: 4%;
    min-height: 30px;
    top: 0%;
    position: fixed;
}

img#loginbild {
    width: auto;
    height: 100%;
    min-height: 30px;
    float: right;
    display: block;
    top: 0%;
    z-index: 49;
}

/* Ende Headline */

div#header {
    width: auto;
    height: 30%;
    background-position: center;
}

img#headerbild {
	height: 35%;
	top: 4%;
	width: auto;
	position: fixed;
	background-color: transparent;
	background-size: cover;
	background-image: url(images/IMG_5854.JPG)
    
}

div#content {
    display: block;
	width: 100%;
    height: 2000px;
    left: 50%;
    margin-left: -50%;
	position: relative;
	margin-top: 25%;
	background: #ebebeb;
}

Geändert von Thorxel (12.04.2015 um 00:13 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 12.04.2015, 17:55
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von Thorxel Beitrag anzeigen
Hey
- zur Zeit ist es mit <img src=""> gelöst (gerne bereit für andere Lösungswege)
Hallo Thorxel

Nicht sehr hilfreich was du zeigst auch noch mit Position fixed.

Als Hintergrundbild siehe Beispiel: Edit fiddle - JSFiddle

HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"> 
   <title>Titel der Webseite</title>
  
<style type="text/css">
html { 
  background-color: #fff;
  font-size: 100%;
}
body { 
  background-color: #EEC580;
  color: black;
  margin: 0;
  text-align: center;
}
header { 
  background-image: url(http://www.psdgraphics.com/wp-content/uploads/2014/10/summer-landscape.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  border: 1px dotted #000;
  display: block;
  padding: 0 0 30% 0;
  margin: 0;
}
header h1 { 
  background-color: #EEC580;
}
nav { 
  display: block; 
  margin: 0;
}
main { 
  border: 1px dotted #000;
  display: block; 
  margin: 0;
}
footer { 
  display: block;
}
h1, h2, h3, h4, h5, h6 { 
  margin: 0; 
  color: maroon;
}
p {
  padding: 1%;
  margin: 0; 
}
</style>

</head>
<body>

<header>
  <h1>Header</h1>
</header>

<nav>
  <h3>Nav</h3>
</nav>

<main>
  <h2>Main</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</main>

<footer>
 <h4>Footer</h4>
</footer>

</body>
</html>
_________________
MfG Roland
Mit Zitat antworten
  #5 (permalink)  
Alt 13.04.2015, 16:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.04.2015
Beiträge: 12
Thorxel befindet sich auf einem aufstrebenden Ast
Standard

Hilft uns leider auch nicht, wenn der Code was komplett anderes ist als wir wollten und nicht funktioniert!
Mit Zitat antworten
  #6 (permalink)  
Alt 13.04.2015, 21:16
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

OK. Ich lass es so, wie du es hast.

Dan vielleicht so:

Code:
div#header {
    width: auto;
}
   img#headerbild {
   background-image: url(http://www.psdgraphics.com/wp-content/uploads/2014/10/grass-illustration.jpg);
   background-color: transparent;
   background-position: center bottom;
   padding-bottom: 30%;
   width: 25px;
   height: 25px;
   padding-right: 98%;
   position: fixed;
   top: 4%;   
}
HTML-Code:
<div id="header">
<img id="headerbild" src="http://placehold.it/25x25/555555/555555.png" alt="headerbild">
</div> <!-- header -->
_____________
MfG Roland
Mit Zitat antworten
  #7 (permalink)  
Alt 13.04.2015, 21:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.04.2015
Beiträge: 12
Thorxel befindet sich auf einem aufstrebenden Ast
Standard

Okay sieht schon gut aus die Grafik bleibt in der Mitte wie es sein soll aber die Höhe soll bei 30% bleiben hast du eine Idee wie man das noch hin bekommt?
Die Website soll responsive sein

MFG Thorxel
Mit Zitat antworten
  #8 (permalink)  
Alt 13.04.2015, 22:40
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von Thorxel Beitrag anzeigen
Okay sieht schon gut aus die Grafik bleibt in der Mitte wie es sein soll aber die Höhe soll bei 30% bleiben hast du eine Idee wie man das noch hin bekommt?
O. k. also Feste höhe hier anpassen.

Code:
div#header { 
    height: 340px;
}
img#headerbild {
    padding-bottom: 300px;
}
______________
MfG Roland
Mit Zitat antworten
  #9 (permalink)  
Alt 14.04.2015, 10:40
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

So habe ich es derzeit nur zum Testen.

HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"> 
   <title>Titel der Webseite</title>
  
<style type="text/css">
* { margin: 0; padding: 0;
}
div#wrapper {   
}
div#headline {
   background-color: #313131;
   color: white;
   position: fixed;
   width: 100%;
   height: 30px;
   top: 0;
   left: 0;
   z-index: 48;   
}
div#header { 
    background-color: fuchsia; 
    height: 355px;
}
div#header img {
   background-image: url(http://www.psdgraphics.com/wp-content/uploads/2014/10/grass-illustration.jpg);
   background-position: center bottom;
   background-repeat: no-repeat;
   background-color: aqua;
   height: 25px;
   padding: 0 98% 300px 0;
   position: fixed; 
   top: 30px;
   width: 25px; 
}
div#content {
   height: 2000px;
   position: relative;
   margin-top: 25%;
   background: #ebebeb;
}
</style>

</head>
<body>

<div>

<div id="headline"> 
<p>Lorem ipsum.</p>
</div>

<div id="header">
<img src="http://placehold.it/25x25/555555/555555.png" alt="">
</div>

<div id="navi">
<p>Lorem ipsum.</p> 
</div>

<div id="content">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>

</div>

</body>
</html>
Also das IMG + Hintergrundbild sol nun feste höhe haben, richtig?.

_______________
MfG Roland

Geändert von K.Roland (14.04.2015 um 15:20 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.05.2015, 14:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.04.2015
Beiträge: 12
Thorxel befindet sich auf einem aufstrebenden Ast
Standard

Ja so mein ich das und wie ist das in Prozentwerten weißt du das zufällig?
MFG
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
bild, bildanpassung, css, fenstermodus, html, vollbildmodus

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
class hinzufügen und entfernen wenn man bestimmten Bereich erreicht hat zubl Javascript & Ajax 1 04.04.2012 17:42
externe website, auf nur bestimmten bereich anzeigen lassen HansDerHans CSS 2 07.01.2012 00:11
CSS Stylesheet in bestimmten Bereich deaktivieren ar36 CSS 1 11.08.2011 14:31
linkziel in einem bestimmten bereich anzeigen?? css + 1&1 warenkorbfunktion noahline CSS 1 09.10.2006 13:44
print css (nur bestimmten Bereich anzeigen) freddy CSS 4 16.03.2004 17:38


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:46 Uhr.