• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Website verschiebt sich

P

peyman

Mitglied
Hi ich hab folgendes Problem.

Ich bin gerade dabei eine website zu erstellen und musste nun feststellen das die einzelnen bereiche aufm anderen bildschirm verrutscht angezeigt werden.

Bei der Arbeit hab ich ein 24" Zoll benutzt und da war alles so wie es sein sollte ( zb header zentriert) . Zuhause hab ich ein 32" Zoll und hier ist bsp. der header weiter nach rechts gerutscht. Woran liegt das ? Was muss ich den angeben das es auf allen größen richtig angezeigt wird.

Danke schonmal im vorraus.

HTML: 
<!DOCTYPE html><html lang="de"><head>	<link rel="stylesheet" type="text/css" href="style.css">	<meta charset="utf-8"/>	<script src="C:\Users\AD2.0\Desktop\Orange^\Hyphenator.js" type="text/javascript">	<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>	<link href='http://fonts.googleapis.com/css?family=Cabin+Condensed' rel='stylesheet' type='text/css'>	<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'></script><script type="text/javascript">	Hyphenator.run();</script>	<title>Orange Ventures</title>		<script type="text/javascript"> 				$(document).ready(function() {			// Alle internen Links auswählen			$('a[href*=#]').bind("click", function(event) {			// Standard Verhalten unterdrücken			event.preventDefault();			// Linkziel in Variable schreiben			var ziel = $(this).attr("href");			//Scrollen der Seite animieren, body benötigt für Safari			$('html,body,').animate({				//Zum Ziel scrollen (Variable)				scrollTop: $(ziel).offset().top			// Dauer der Animation und Callbackfunktion die nach der Animation aufgerufen wird, sie stellt das Standardverhalten wieder her und ergänzt die URL			}, 2000 , function (){location.hash = ziel;});			});			return false;			});		</script></head><body>	<!--Header Start--><header><div class="logo"><a href="#start"><img src="image/logo_orangeventures.png"></a></div><div id="navigation"> <li><a href="#aboutus">Über uns</a></li> <li><a href="#Kontakt">Historie</a></li> <li><a href="#Portfolio">Portfolio</a></li> <li><a href="#Portale">Portale</a></li> <li><a href="#Kontakt">Kontakt</a></li></div></header>	<!--Header End-->	<!--Inhalt Start-->		<div class="orange">	<img src="image/logo_orangeventures_big.png" />	<p id="text1"><b>Beteiligung an internetbasierten </b></p> <p id="text2"> <b>Geschäftsmodellen</b></p></div><div class="shadow"></div><div id="aboutus">	<h1>Über uns</h1>	<div class="kolumne">		<p> Orange Ventures&shy; ist eine Beteiligungsgesellschaft des Medienunternehmers Jens Kunath. Focus sind Beteiligungen  an internetbasierten Geschäftsmodellen,insbesondere im digitalen Verlagswesen, dem Online-Marketing und der Vertrieb von Onlinediestleistungen.<br>		<br>Orange Ventures geht in der Regel Mehrheitsbeteiligungen ein, oder gründet selbst. Der Sitz des Unternehmens ist im szenigen Hamburger Schanzenviertel.</p>	</div>	<div class="kolumne2">		<p>In den Beteiligungen von Orange Ventures arbeiten mehr als 100 Mitarbeiter und es werden mehr als 10 Millionen Euro pro Jahr umgesetzt.<br><br>Die älteste Beteiligung, der Care Verlag, wurde 1993 gegründet und feiert dieses Jahr sein 20jähriges Bestehen.</p>	</div></div><div class="orange2">dw</div ></body>		</body></html>

CSS.

html, body {
height:100%;


}

body { display:block;
margin:0 ;
padding:0 ;
background:rgb(255,255,255);
border:none; /*keine umrandung*/
line-height:20px;

}






header {
background-color:rgb(255,255,255);
width:100%;
height:60px;
box-shadow: 7px 3px 10px #5E5E5E; /*box-shadow: 0px 1px 5px #5E5E5E;*/
box-shadow: 6px 4px 6px #5E5E5E;
position:fixed;
top:0px;
z-index: 1000;
}


div {
margin:0;
padding:0;
display:block;
border:none;
text-decoration:none;

}


.logo {

font-family:verdana;
font-size:20px;
width:350px;
margin-top:2px;
margin-left:480px;
font-weight:none;
float:left;
padding-bottom:0px;


}






#navigation {
list-style-type:none;
padding-top:20px;
font-size:17px;
}


li {
display:inline;
padding:10px;

}


header a {
font-family:verdana;
text-decoration:none;
color:rgb(177,177,177);
font-family: 'Cabin Condensed';
font-size:21px;
}




header a:hover {


border-bottom: 4px solid rgb(232, 105, 8);
}


.orange {
background-image:url(image/orange_header.jpg);
background-repeat:no-repeat;
background-position:090px -120%;
background-size:670px 370px;/* versuchen was besser aussieht*/
width: 1316px;
margin: 0 auto;
margin-top:60px;/*abstand vom oberen*/
-margin-left:0px;
padding-top:370px;/*größe des containers*/
display:block;
position: relative;
/*border: 1px solid #666;*/
}

.orange img {
position: absolute;
top: 150px;
left: 620px;
width:400px;

}

.orange p, #text1 {
position: absolute;
top: 200px;
left: 633px;
font-size:25px;
font-family: 'Cabin', sans-serif;
}


.orange p, #text2 {
position:absolute;
top:230px;
left:63px;
font-size:24px;
left:794px;
font-family: 'Cabin', sans-serif;
}


#aboutus {
width: 960px;
margin: 0 auto;
height:450px;
}

.shadow {
margin-top:0;
border: 0;
height: 1px;
box-shadow: 6px 3px 6px 1px #000000;
}

#aboutus h1 { color:rgb(226,71,20);
padding-top:40px;
padding-left:40px;
font-size:41px;
font-family: 'Cabin Condensed', sans-serif;
}



#aboutus h1:before {
content:"☰";
padding-right: .25em;
color:rgb(226,71,20);
}

.kolumne {
width: 960px;
margin: 0 auto;
}

#aboutus .kolumne p {
padding-left:37px;
float:left;
width: 290px;
margin: 0;
text-align:justify;
height:330px;
font-size:19px;
font-family: 'Cabin', Medium;


}

#aboutus .kolumne2 p {
padding-left:180px;
float:left;
width: 290px;
margin: 0;
text-align:justify;
height:330px;
font-size:19px;
font-family: 'Cabin', Medium;
}


div
 
Ein Link zur betroffenen Seite wäre hilfreicher.

Außerdem spielt die Auflösung keine Rolle. Du kannst genauso auf einem riesigen Bildschirm das Browserfenster kleiner ziehen um das zu testen. Das ist der Viewport des Browser, der hierfür relevant ist.

Moderation: Verschoben von HTML zu CSS, da es um Gestaltung geht.
 
Hallo peyman

Ein Link zur Seite, wie threadi bereits sagte, wäre von Vorteil.

Du hast bei der Klasse orange einen Wert mit 090px angegeben? Nimm da mal dieses eine 0 weg.



Grüsse
 
Hallo,

zwei schliesende body und rest kann man ja kaum anschauen.

Beim css auf die schnelle würde ich sagen dein orang ist width: 1316px;, sehr optimistisch und der rest halt nicht da kann keine gleichmäßige Positionierung raus kommen, das past so echt nur bei dir.

Cheffchen
 
moin leute ich hab die seite mal auf ne test seite hochgeladen.

Ich hab folgende probleme aktuell. Undzwar ist der abstand zwischen den überschriften ( die mit den balken davor) zu groß zum darüber liegenden text. Desweiteren möchte ich das im header unterm orange logo das hover weg geht.
Das Problem das sich der header verschiebt habe ich leider immer noch :( Orange Ventures
 
Mal anders gefragt.

Wenn ich sagen wir mal neu anfang. und erst den inhalt mache und als letztes den Header einbaue. Würde das klappen oder muss erst der header gemacht werden ?
 
peyman schrieb:
moin leute ich hab die seite mal auf ne test seite hochgeladen.

Ich hab folgende probleme aktuell. Undzwar ist der abstand zwischen den überschriften ( die mit den balken davor) zu groß zum darüber liegenden text. Desweiteren möchte ich das im header unterm orange logo das hover weg geht.
Das Problem das sich der header verschiebt habe ich leider immer noch :( Orange Ventures
Zum Vergrößern anklicken....

Das beim Logo hover der Strich nicht mehr da ist, erreichst du mit:

.logo a:hover {
border-bottom: 0!important;


}


Bei mir verschiebt sich nur die Navigation im Header. Meinst du das?
Falls ja, kannst du das umgehen indem du in den <header> noch eine div legst, welche eine feste Breite hat und zentriert ist.
Dann kannst du die Navigation (übrigens kommen <li> Elemente immer in eine <ul> (in diesem Fal ul), und nicht in eine einzelne div) mit float: right; rechts positionieren.


Gruß
 
peyman schrieb:
Mal anders gefragt.

Wenn ich sagen wir mal neu anfang. und erst den inhalt mache und als letztes den Header einbaue. Würde das klappen oder muss erst der header gemacht werden ?
Zum Vergrößern anklicken....

Natürlich kann man das machen.

Allerdings solltest du dann darauf achten das dein Quellcode und dein CSS valide sind sonst brauchst du dich über Probleme nicht zu wundern.

Gruss
Elroy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben