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

Hallo Bin neu und ich bekomme meine hp nicht center

Werbung:
Danke bdt600

muss ich das was rot ist löschen oder stimmt da der abstand ändern.

Ich bin ein noob wie meinst du das ich soll ein Container bauen wie mache ich das in die html seite so ist der code


Von oben
<!DOCTYPE html>
<html>
<head>
<title>Free HTML5 Templates</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="fb-root"</div>

und unten

</div><!--close content_container-->

</div><!--close content_item-->
</div><!--close content-->
</div><!--close site_content-->
</div><!--close main-->

<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/image_slide.js"></script>

</body>
</html>

Danke

lg Dragonfly
 
Werbung:
Werbung:
ok wie gebe ich das dann richtig ein bdt600

Danke für deine hilfe

lg Dragonfly

<!DOCTYPE html>
< html>
< head>
<title>Free HTML5 Templates</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- modernizr enables HTML5 elements and feature detects -->
< script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
< /head>
< body>
<div>
< div id="fb-root"</div>
und unten
</div><!--close content_container-->
</div><!--close content_item-->
</div><!--close content-->
</div><!--close site_content-->
</div><!--close main-->
<!-- javascript at the bottom for fast page loading -->
< script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/image_slide.js"></script>
</div>
< /body>
< /html>
 
Zuletzt bearbeitet:
Werbung:
Hier ist mein Stylesheet:

@font-face {
font-family: PacificoRegular;
src: url('../fonts/Pacifico-webfont.eot');
src: local("PacificoRegular"), url('../fonts/Pacifico-webfont.ttf');
}
html
{ height: 100%;}
*
{ margin: 0;
padding: 0;}

body
{ font: normal 80% Arial, Helvetica, sans-serif;
color: #000;
}
/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section {
display:block;
}
p
{ padding: 0 0 10px 0;
color: #FFF;
text-shadow: 1px 1px #000;
line-height: 1.7em;
font-size: 100% }
img
{ border: 0;}
h1, h2, h3, h4, h5, h6
{ font: normal 175% 'PacificoRegular', Arial, sans-serif;
color: #FFF;
text-shadow: 0px 1px 0px #000;
letter-spacing: -1px;
margin: 0 0 10px 0;}
h2
{ font: normal 165% Arial, Helvetica, sans-serif;}
h3
{ font: normal 130% Arial, Helvetica, sans-serif;}
h4, h5, h6
{ margin: 0;
padding: 0 0 0px 0;
font: normal 150% Arial, Helvetica, sans-serif;
color: #FFF;
line-height: 1.5em;}
h5, h6
{ font: normal 95% Arial, Helvetica, sans-serif;
color: #888;
padding-bottom: 15px;}

span
{ color: #43A9FF;
text-shadow: 0px 1px 0px #FFF;}
a, a:hover
{ color: #FFF;
background: transparent;
font-weight: bold;
outline: none;
text-decoration: underline;}
a:hover
{ text-decoration: none;}
ul
{ margin: 2px 0 22px 30px;
line-height: 1.7em;
font-style: normal;
font-size: 100%;}
ol
{ margin: 8px 0 22px 20px;}
ol li
{ margin: 0 0 11px 0;}
#main, header, #banner, #menubar, #site_content, footer, #content_grey, nav
{ margin-left: auto;
margin-right: auto;}
#main
{ padding: 30px 0px;
background: transparent url(../images/background.jpg) no-repeat;}

header
{ height: 120px;
width: 940px;
background: #0043A8;
background: -moz-linear-gradient(#43A9FF, #0043A8);
background: -o-linear-gradient(#43A9FF, #0043A8);
background: -webkit-linear-gradient(#43A9FF, #0043A8);
border-radius: 15px 15px 0px 0px;
-moz-border-radius: 15px 15px 0px 0px;
-webkit-border: 15px 15px 0px 0px; }

nav
{ height: 50px;}

#menubar
{ width: 940px;
height: 50px;
text-align: center;
margin: 0 auto;}

#strapline
{ width: 940px;
height: 60px;
padding-bottom: 10px;
text-align: center;
margin: 0 auto;}

#welcome_slogan
{ width: 940px;
float: left;
height: 50px;
margin: 0 auto;}

#welcome_slogan H3
{ font: normal 275% 'PacificoRegular', Arial, sans-serif;
letter-spacing: -2px;
text-shadow: 0px 1px 0px #FFF;
color: #0055D4;}

ul#nav
{ margin:0;}
ul#nav li
{ padding: 0 0 0 0px;
list-style: none;
margin: 2px 0 0 0;
display: inline;
background: transparent;}
ul#nav li a
{ float: left;
font: bold 130% 'PacificoRegular', Arial, sans-serif;
height: 24px;
margin: 8px 0 0 20px;
text-shadow: 0px 1px 0px #000;
padding: 0px 20px 10px 20px;
background: transparent;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
text-align: center;
color: #FFF;
text-decoration: none;}

ul#nav li.current a, ul#nav li:hover a
{ color: #FFF;
background: #0055D4;
background: -moz-linear-gradient(#43A9FF, #0043A8);
background: -o-linear-gradient(#43A9FF, #0043A8);
background: -webkit-linear-gradient(#43A9FF, #0043A8);
text-shadow: none;}
#site_content
{ width: 940px;
overflow: hidden;
margin-bottom: 30px;
background: transparent url(../images/transparent.png) repeat;
border-radius: 0px 0px 15px 15px;
-moz-border-radius: 0px 0px 15px 15px;
-webkit-border: 0px 0px 15px 15px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;}
.sidebar_container
{ float: right;
margin: 20px 10px 0 10px;
width: 210px;
padding: 0;}
.sidebar
{ float: left;
width: 190px;
padding-left: 10px;
margin-bottom: 10px;}
.sidebar_item
{ font: normal 100% Arial, Helvetica, sans-serif;
width: 190px;}
.sidebar h2
{ padding: 5px 0 0 0;
font: normal 140% 'PacificoRegular', Arial, sans-serif;
height: 30px;}
#content
{ width: 680px;
margin: 0 0 20px 20px;
float: left;}
.content_item
{ width: 680px;
margin-top: 20px;
margin-bottom: 20px;}

.content_container
{ width: 330px;
margin: 20px 10px 0 0;
float: left;}

footer
{ width: 940px;
height: 50px;
padding-top: 25px;
padding-bottom: 20px;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px #000;
color: #FFF;
background: #0043A8;
background: -moz-linear-gradient(#43A9FF, #0043A8);
background: -o-linear-gradient(#43A9FF, #0043A8);
background: -webkit-linear-gradient(#43A9FF, #0043A8);
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border: 15px 15px 15px 15px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;}
footer a, footer a:hover
{ text-shadow: 1px 1px #FFF;
color: #1D1D1D;
text-decoration: none;
padding-bottom: 20px;}
footer a:hover
{ text-decoration: underline;}
footer a, footer a:hover
{ text-shadow: 1px 1px #000;
color: #FFF;
text-decoration: none;}
footer a:hover
{ text-decoration: underline;}

.readmore a
{ color: #FFF;
text-shadow: 1px 1px #004C8C;}

.button_small
{ font: normal 110% Arial, Helvetica, sans-serif;
float: left;
height: 15px;
padding: 5px 10px 7px 8px;
background: #0043A8;
background: -moz-linear-gradient(#43A9FF, #0043A8);
background: -o-linear-gradient(#43A9FF, #0043A8);
background: -webkit-linear-gradient(#43A9FF, #0043A8);
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border: 15px 15px 15px 15px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;}

.button_small a
{ color: #FFF;
padding-left: 5px;
text-shadow: 1px 1px #000;}
.form_settings
{ margin: 15px 0 0 0;}
.form_settings p
{ padding: 0 0 4px 0;}
.form_settings span
{ float: left;
width: 280px;
text-align: left;
text-shadow: none;
color: #FFF;
text-shadow: 1px 1px #000;}

.form_settings input, .form_settings textarea
{ padding: 2px;
width: 299px;
font: 100% arial;
border: 1px solid #E5E5DB;
background: #FFF;
color: #47433F;}

.form_settings input[type="checkbox"]
{ padding: 2px 0;
width: 15px;
font: 100% arial;
border: 0;
background: #FFF;
color: #47433F;
margin: 28px 0;}
.form_settings .submit
{ font: 100% arial;
border: 1px solid;
width: 99px;
margin: 0 0 0 206px;
height: 26px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #0043A8;
background: -moz-linear-gradient(#43A9FF, #0043A8);
background: -o-linear-gradient(#43A9FF, #0043A8);
background: -webkit-linear-gradient(#43A9FF, #0043A8);
color: #FFF;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;}
.slideshow
{ width: 680px;
height: 250px;
margin-left: 20px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;}

/* styling for the slideshow on the homepage */
ul.slideshow {
list-style: none;
width: 680px;
height: 250px;
overflow: hidden;
position: relative;
margin: 20px 0 0 0;}

ul.slideshow li {
position: absolute;
margin: 0;
padding: 0;
left: 0;
right: 0;}

ul.slideshow li.show {
z-index: 500;}

ul img {
border: none;}

#slideshow-caption {
width: 680px;
height: 38px;
position: absolute;
bottom: 0;
left: 0;
z-index: 500;}

#slideshow-caption .slideshow-caption-container {
padding: 10px 25px 10px 25px;
background: transparent url(../images/transparent.png) repeat;
z-index: 1000;}

#slideshow-caption p {
padding: 0;
font: normal 130% arial, sans-serif;
color: #FFF;
text-shadow: 1px 1px #000;}
 
Definiere doch mal "geht nicht" genauer. Vlt. kann man dann zumindest erahnen woran es liegen könnte.
 
Werbung:
  1. Ich habe jetzt in die style.css den code eingetragen jetzt ist mein Hintergrund black das ist schonmal supie aber Center ist es leider noch nicht
  2. body { background-color: #0000ff; }
  3. #content { background-color: #ffffff; width:1000px; margin: 0 auto }
In die html Datei habe ich das gemacht <html>
  1. <head>
  2. <link href="style.css" rel="stylesheet">
  3. </head>
  4. <body>
  5. <div id='content'>
  6. Hier der Inhalt
  7. </div>
  8. </body>
  9. </html>
Lg Dragonfly

PS: ich möchte nur das die Webseite automatisch in der mitte steht.
 
Bei mir ist rechts ein schwarzer balken in allen Browsern Cache gelöscht diese fehler verstehe ich nicht muss ich das was rot ist löschen wie z.b <?

lg Dragonfly
 
Werbung:
Hallo threadi

ich habe z.b 3 Facebook boxen

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

und angeblich ist <div id="fb-root"></div> da ist nur der > rot aber was der fehler heist verstehe ich nicht..

lg Dragonfly
 
wie erstelle ich eine Class?

und wie ich sie seite mittig bekomme weis ich immer noch nicht der code passt nicht

style.css
  1. body { background-color: #0000ff; }
  2. #content { background-color: #ffffff; width:1000px; margin: 0 auto }
 
Werbung:
Lerne doch bitte mal die Grundlagen und versuche dich erst einmal an kleineren Sachen. Das Zentrieren einer HTML-Seite sind Grundlagen, und wenn du den Unterschied zwischen ID und Class nicht kennst, hapert es gewaltig an Grundlagen. Ich will dir nichts böses, aber so wird das nichts.
Außerdem
Allerdings sind immernoch die schon oben genannten HTML-Fehler enthalten die Du zuerst beseitigen solltest bevor Du irgendetwas anderes probierst.
Dem kann ich nur zustimmen.
 
Danke nochmal für die hilfe aber so bald ich die fehler versuche zu beheben verschiebt sich meine seite das macht echt kein spaß und auch wenn ich id in class ändere passiert das

ich dachte die seite Center wäre einfach für euch und die fehler können bleiben da sich die seite verschiebt wenn ich sie weg mache

lg Dragonfly
 
Zurück
Oben