Benötige Hilfe :( Html / Css Problem?

Stefanie · #1 (**permalink**) 16.05.2011, 19:50

Hallo zusammen,

ich benötige mal eure Hilfe

Ich hab mir eine Homepage Gebastelt auf der Index Seite sind nur 3 Bilder.

1. Bild Links , 2. Bild Center, 3. Bild Rechts

In meinem Firefox Browser mit der Auflösung 1600x900 wird nun alles so angezeigt wie ich wollte. Das linke Bild ganz Links am Rand, das mittlere in der Mitte und das Rechte Bild am Rechten rand. Die Bilder sind am Ende des Browsers ( unten ).

Öffne ich jetzt aber mit meinem anderen Rechner die Seite stimmt die größe nicht mehr das heisst ich kann nach Rechts Scrollen.

Ich hätte das es bei jedem Browser aber gleich ist, also 1. Bild Links unten, 2. Bild Center unten, und drittes Bild Rechts unten.

Wie kann ich das den am besten machen ?

Mein CSS Code dafür sieht so aus

HTML-Code:

html, body {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	font-size: 20px;
	background-color: #000000;
	color: #FFFFFF;
	min-width: 1500px;
	overflow-y: hidden;
}

.clear { clear: both; }
.container { position: absolute; left: 0px; bottom: 0px; width: 100%; min-width: 1501px; height: 500px; overflow: hidden; }
.inner { margin-top: 100px; }
.img1 { float: left; background: url(img1.png) no-repeat; width: 798px; height: 494px; }
.img2 { float: right; background: url(img2.png) no-repeat; width: 702px; height: 497px; }
.link { text-align: center; position: relative; top: -270px; left: 50px; }

Bin über jede Hilfe dankbar, und hoffe mir kann hier jemand helfen.

philosapiens · #2 (**permalink**) 16.05.2011, 20:16

Hallo,

ein Link zur Testseite wäre hier sehr hilfreich.

Stefanie · #3 (**permalink**) 16.05.2011, 20:27

Hallo,

sorry hab ich vergessen Homepage

lg Steffi

cebito · #4 (**permalink**) 16.05.2011, 21:09

Zitat:

Zitat von Stefanie

Öffne ich jetzt aber mit meinem anderen Rechner die Seite stimmt die größe nicht mehr das heisst ich kann nach Rechts Scrollen.

Irgendwann ist jedes Browserfenster zu klein, auch deines bei ner 1600er-Auflösung, nämlich dann, wenn du den Browser verkleinerst. Mit "min-width: 1501px;" sagst du nun mal, daß (letzendlich der Viewport) mindestens 1501px breit sein muss, ist er das nicht, wird gescrollt. Mit "overflow-y:hidden;" für den body verhinderst du das nicht, y ist für die Vertikale zuständig, x für die Horizontale.

Edith sagt - die Gif-Animation geht ihr ziemlich auf den Sack, kein Wunder, das die Typen sich die Knarren an den Kopf halten

Stefanie · #5 (**permalink**) 16.05.2011, 21:14

Ok ich hab das jetzt geändert. Danke

Wie mache ich das den am besten das es bei jeden Browser so angezeigt wird? Ggf. soll sich der Abstand zwischen den Bildern zusammenschrieben

Das Linke Bild sollte halt links unten sein, das rechte rechts..

Stefanie · #6 (**permalink**) 17.05.2011, 14:56

Kann mir niemand helfen ?

zeji · #7 (**permalink**) 17.05.2011, 15:04

Möglichkeit a):

mit Javascript Bildgröße, sowie Containergröße etc. je nach Browsergröße dynamisch anpassen.

Möglichkeit b):
über CSS-Media-Queries je nach vordefinierter Max-Browsergröße ein anderes Stylesheet laden (vorzugsweise für mobile-devices, aber auch für solche Fälle einsetzbar).

Stefanie · #8 (**permalink**) 17.05.2011, 15:05

Da hört mein wissen leider auf, kannst du mir dabei evtl Helfen?

zeji · #9 (**permalink**) 17.05.2011, 16:27

Benutz jQuery.

Da ich heute gute Laune habe und dazu noch ein bischen Leerlauf:

Zitat:

jQuery Bibliothek einbinden:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

Zitat:

Custom jQuery - dynamic Width:

* Wenn Seite geladen

Code:

<script type="text/javascript">
$(function(){

* Lese aktuelle Browsergröße aus, und setzte entsprechend die Größe der Elemente. ( "10" kann verändert werden, je nach dem wie das Verhältnis der Elemente ist).

Code:

var elemWidth = $('#element').width();
var elemHeight = $('#element').height();
var docWidth = $(document).width() / 10;
var docHeight = $(document).height() / 10;
$('#elementl').css({'width':docWidth,'height':docHeight});
$('#elementr').css({'width':docWidth,'height':docHeight});
$('#elementm').css({'width':(docWidth * 10) - (docWidth * 2),'height':docHeight});
});

* Wenn Browser vergrößert/verkleinert wird, rechne aus der jeweils aktuellen Browsergröße die Größe für die einzelnen Elemente und setze sie.

Code:

$(window).resize(function(){
	var docWidth = $(document).width() / 10;
	var docHeight = $(document).height() / 10;
	$('#elementl').css({'width':docWidth,'height':docHeight});
	$('#elementr').css({'width':docWidth,'height':docHeight});
	$('#elementm').css({'width':(docWidth * 10) - (docWidth * 2),'height':docHeight});
})
</script>

Zitat:

CSS

Code:

<style>
body{
margin:0;
padding:0;	
}
#elementl, #elementr{background:red; width:100px; height:100px;}
#elementm{float:left; background:red; height:100px;display:block;}
#elementl{float:left}
#elementr{float:right}
</style>

Zitat:

HTML

Code:

<div id="elementl">left</div>
<div id="elementm">middle</div>
<div id="elementr">right</div>

Größen, CSS, HTML musst du natürlich anpassen....!!!

philosapiens · #10 (**permalink**) 17.05.2011, 18:12

Hallo,

ich würde ein wenig mit derGrößenangabe % im CSS rumspielen. In etwa so:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Homepage</title>
    <style>
html, body {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	font-size: 20px;
	background-color: #000;
	color: #FFFFFF;
}
.clear {
	clear: both;
}
.container {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.inner {
	margin-top: 100px;
}
.img1 {
	float: left;
}
.img2 {
	float: right;
}
.link {
	text-align: center;
	position: relative;
	bottom: 0;
	width: 100%;
}
a img {
	border: 0;
}

    </style>
  </head>
  <body>
    <div class="container">
      <div class="inner">
        <div class="img1">
          <img src="http://stefanie85.st.funpic.de/img1.png" width="45%" height="100%" />
        </div>
        <div class="img2">
          <img src="http://stefanie85.st.funpic.de/img2.png" width="80%" height="100%" />
        </div>
        <h1 class="link">
          <a href="http://www.domain.de" class="Stil1">
            <img src="http://stefanie85.st.funpic.de/enter.gif" width="10%" height="100%" /></a></h1>
      </div>
    </div>
  </body>
</html>

Gefällt es Dir so?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Einbindung von frei erhältlichen Scripten - CSS Problem	DonL	CSS	1	22.01.2011 16:09
Hilfe bei CSS Navigation	trimalchio	CSS	7	10.01.2011 13:13
Benötige dringend Hilfe mit CSS in Firefox & IE :(	r4m0n	CSS	3	20.03.2009 11:12
CSS verständniss Problem - Brauche Hilfe :)	homeedition	CSS	3	07.12.2008 19:04
CSS in HTML - Hintergrundbild wird nicht angezeigt	fossy	CSS	7	11.10.2007 17:17