zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Benötige Hilfe :( Html / Css Problem?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.05.2011, 19:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.05.2011
Beiträge: 5
Stefanie befindet sich auf einem aufstrebenden Ast
Standard Benötige Hilfe :( Html / Css Problem?

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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.05.2011, 20:16
Benutzerbild von philosapiens
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 08.05.2009
Ort: Berlin Südende
Beiträge: 297
philosapiens befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

ein Link zur Testseite wäre hier sehr hilfreich.
__________________
Der höchste Lohn für unsere Bemühungen ist nicht das, was wir dafür bekommen, sondern das, was wir dadurch werden.

Mein aktuelles Projekt bei idealseiten.de
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.05.2011, 20:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.05.2011
Beiträge: 5
Stefanie befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

sorry hab ich vergessen Homepage

lg Steffi
Mit Zitat antworten
  #4 (permalink)  
Alt 16.05.2011, 21:09
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Stefanie Beitrag anzeigen
Ö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

Geändert von cebito (16.05.2011 um 21:15 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 16.05.2011, 21:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.05.2011
Beiträge: 5
Stefanie befindet sich auf einem aufstrebenden Ast
Standard

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..
Mit Zitat antworten
  #6 (permalink)  
Alt 17.05.2011, 14:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.05.2011
Beiträge: 5
Stefanie befindet sich auf einem aufstrebenden Ast
Standard

Kann mir niemand helfen ?
Mit Zitat antworten
  #7 (permalink)  
Alt 17.05.2011, 15:04
$("#mettbröttchen");
XHTMLforum-Mitglied
 
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard

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).
Mit Zitat antworten
  #8 (permalink)  
Alt 17.05.2011, 15:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 16.05.2011
Beiträge: 5
Stefanie befindet sich auf einem aufstrebenden Ast
Standard

Da hört mein wissen leider auf, kannst du mir dabei evtl Helfen?
Mit Zitat antworten
  #9 (permalink)  
Alt 17.05.2011, 16:27
$("#mettbröttchen");
XHTMLforum-Mitglied
 
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard

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....!!!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 17.05.2011, 18:12
Benutzerbild von philosapiens
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 08.05.2009
Ort: Berlin Südende
Beiträge: 297
philosapiens befindet sich auf einem aufstrebenden Ast
Standard

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?
__________________
Der höchste Lohn für unsere Bemühungen ist nicht das, was wir dafür bekommen, sondern das, was wir dadurch werden.

Mein aktuelles Projekt bei idealseiten.de
Mit Zitat antworten
Sponsored Links
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:31 Uhr.