zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Warum Rand??

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.09.2016, 17:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.09.2016
Beiträge: 2
FoseFx befindet sich auf einem aufstrebenden Ast
Standard Warum Rand??

Mir ist gerade aufgefallen, dass ich bei meiner Website die ganze Zeit rechts einen Weißen Rand habe. Bin jetzt drei mal CSS durgegeangen, doch habe nichts gefunden.... Währe nett wen jemand der das hier sieht sich das man anschauen könnte

http://tut.fosefx.com/

Code:
@import url("https://fonts.googleapis.com/css?family=Lato:300,400");

body {
	margin: 0px; text-align:center;
	background-color:#EBEBEB;
		
}

h1,h2,h3,h4,h5,h6 {
	font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace	
}

/*Header and Menu*/

#header {
	border-radius: 4px;
	position:fixed;
	top:0;
	width:100%;
	background-color:#202222;
	height:120px;
/*	background: #0e0e0e;
background: -moz-linear-gradient(top, #0e0e0e 0%, #353535 100%);
background: -webkit-linear-gradient(top, #0e0e0e 0%,#353535 100%);
background: linear-gradient(to bottom, #0e0e0e 0%,#353535 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#353535',GradientType=0 );
*/
 padding-top: 20px;
 padding-bottom: 20px;
 transition: height 0.15s linear 0s, padding 0.3s linear 0s;
 overflow:hidden;
	
}

#header #menu {
	padding-top: 10px;
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

#header > #menu {
	position:absolute;
	width:100%;
	transition: height 0.15s linear 0s;
}
/*Ham Menu*/

#content{
	margin-top: 160px;
	margin-bottom: 50px;
}#HamButton {
	padding: 2px 5px;
	margin-top: 0px;
	position:fixed;
	top: 38px;
	right: 5px;
	opacity: 0;
	transition: opacity 0.3s linear 0.5s;
}
.bars {
	width: 20px;
	height: 4px;
	background: #FFFFFF;
	margin: 3px 0px;
	border-radius: 4px;
	transition: background 0.3s linear 0s;

}
#Ham {
	
	position: fixed;
	right: -350px;
	top: 65px;
	width: 260px;
	height: 250px;
	background: #DDD;
	opacity: 1 ;
	transition: opacity 0.3s linear 0s, right 0s linear 0s;
	cursor: pointer;
	background-color:#626262;
	border-radius: 10px;
	-webkit-box-shadow: -23px 28px 91px -4px rgba(0,0,0,0.76);
-moz-box-shadow: -23px 28px 91px -4px rgba(0,0,0,0.76);
box-shadow: -23px 28px 91px -4px rgba(0,0,0,0.76);
	
}
.menuul {
	margin-top: 29px;
	list-style:none;
	display:block;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	text-align:center;	
	color:#E5E5E5;
	
}
.menuul a {
	color:#D5D5D5;
	text-decoration: none
}
.menuul > a >li{
	position:relative;
	right: 19px;
	display:block;
	transition: background-color 0.2s linear 0s;
	transition: color 0.2s linear 0s;
	transition: font-size 0.3s linear 0s;
	padding: 6px;
}
.menuul > a > li:hover {
	
	color:#FCFCFC;
	font-size: 19px;

	
}
#menu {
    margin: 0 auto;	
	text-align: center;
}
#menu ul {
	margin: 0 auto;
	
}
#menu ul li{
	display: inline;
    width: 10px;
    padding: 5px;
	
	
	   		
}
.menu ul li:hover {
	color:#E3E3E3;
	background-color:#B8B8B8;
	
}

#menu a {
	color:#D5D5D5;
	text-decoration: none;
	
}
.banner {
	color:#DBDBDB;
	background-image:url(../images/banner.jpg);
	background-attachment:fixed;
	background-repeat:repeat;
	background-position:bottom;
	padding-top: 250px;
	padding-bottom: 250px;
}
.banner p {
	font-size:24px;
		font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
		opacity:0;
		-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
			opacity:1;
}
			@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }

}	
.banner h1 {
	opacity:0;
	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
			opacity:1;
	font-size:55px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif
}
.footer {
		background-color:#2B2B2B;
		padding-top:1px;
		padding-bottom:1px;
		opacity:0;
	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
			opacity:1;
		
		
}
.footer > ul {
	margin-top: 20px;
	list-style:none;
	display:block;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	text-align:center;	
	color:#C9C9C9;
}
.footer ul a li {
	
	display: inline;
    width: 10px;
    padding: 12px;
	
}
.footer a {
	color:#B4B4B4;
	text-decoration: none
}
.footer a li:hover {
		color:#F1F1F1;
}
.about {
padding-left:20%;
padding-right: 20%;
line-height: 25px;
background: #e2e2e2;
background: -moz-linear-gradient(-45deg, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
background: -webkit-linear-gradient(-45deg, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
background: linear-gradient(135deg, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );
padding-top: 50px;
padding-bottom: 60px;
}
.about p {
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
opacity:0;
	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
			opacity:1;

	
}
.shop ul{
	margin-top: 20px;
	list-style:none;
	display:block;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	text-align:center;	
	color:#C9C9C9;
	
}
.shop {
	padding-top:1px;
	padding-bottom:50px;
	background: #fdfffc;
background: -moz-linear-gradient(-45deg, #fdfffc 0%, #edf5f7 37%, #ced8db 100%);
background: -webkit-linear-gradient(-45deg, #fdfffc 0%,#edf5f7 37%,#ced8db 100%);
background: linear-gradient(135deg, #fdfffc 0%,#edf5f7 37%,#ced8db 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfffc', endColorstr='#ced8db',GradientType=1 );
		
}.shop ul li {
	margin-bottom:25px;	
	margin-top:25px;
	opacity:0;
	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
			opacity:1;
}
.btn {
	color:#E9E9E9;
	text-decoration: none;
	background-color:#6FB2D7;
	border-radius: 20px;
	padding:20px 40px;
	margin: auto;
	font-family: "Lato", Helvetica, sans-serif;
	font-size:18px;
	transition: color 0.2s linear 0s;
	transition: background-color 0.2s linear 0s;
	transition: font-size 0.1s linear 0s;
	opacity:0;
	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
			opacity:1;
}
.btn:hover {
		color:#FFFFFF;
		background-color:#51A2CE;
		font-size: 19px;
}
.filler {
	

	padding: 1px;
	margin:-26px;
}
.back-to-top {
	
	text-decoration:none;
	color:#E8E8E8;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	position:fixed;
	right:20px;
	bottom: 10px;
}
.back-to-top img {
	height:60px;
	width:60px;
}

Geändert von FoseFx (07.09.2016 um 17:52 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.09.2016, 18:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.075
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

In der Webseite befindet sich ein div mit der Klasse filler und folgendem CSS:

Code:
.filler {
	padding: 1px;
	margin:-26px;
}
Dort musst du das margin von -26px entfernen.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.09.2016, 19:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.09.2016
Beiträge: 2
FoseFx befindet sich auf einem aufstrebenden Ast
Standard

Ok danke Sollte margin-top sein
Mit Zitat antworten
  #4 (permalink)  
Alt 07.09.2016, 21:11
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von FoseFx Beitrag anzeigen
Sollte margin-top sein
Ach so

Leere Elemente wie DIV .filler als Abstandhalter besser gleich entfernen, sowas braucht man nicht.
Abstände zueinander hast du doch so wie hier:

Code:
#content {
    margin-bottom: 50px;
    margin-top: 160px;
}
einfach mal margin-bottom: 30px; Testen, oder ...

____________________
MfG Roland
Mit Zitat antworten
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
2 Boxen in einer, mit Rand anders als ohne Rand fritzje CSS 4 26.10.2010 00:31
Website Rand Viewport BertaBiene CSS 3 22.06.2010 22:28
Rechten Rand vom P in zentriertem DIV an rechtem Rand eines IMG ausrichten yeastie99 CSS 2 19.07.2008 16:02
100% Höhe, aber mit Rand wuschba CSS 14 23.10.2007 14:59
input-feld bei width=100% am rechten rand 4px breiter timex CSS 5 30.01.2007 17:42


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:38 Uhr.