Bild richtig einfügen bzw positionieren

DBlog · 16 Januar 2012

Hallo Leute bin seit einigen Woche an einer einfachen Website dran und alles klapt ziehmlich gut beschäftige mich auch schon mit javascript ( was bedeuten soll das ich schon ein wenig Erfahrung habe ) und jedoch versteh ich net wie ich es schaffe das dieses Bild "logopfeil" also das mit "click for blog" so einfüge das es auch wen jemand einen anderen Browser hat bzw eine andere Bildschirmgröße das Logo und der Hinweis auf den Blog immer gleich auf der Stelle bleibt auch beim verschieben bzw vergrößern des browser fensters . Bin auf dieses Problem erst seit kurzem draufgekommen da ich es immer nur in einer grösse stehen hatte und da es perfekt passte ( siehe am Bild) . Wie auch immer , ich möchte das die ganze Seite nicht verschiebbar ist. Komme nur nicht drauf wie irgendwas im div nur was hmmmmmmm. hoffe ihr könnt mir helfen. HTML und CSS von der Index Code hier :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Dominik's Blog</title>
<link rel="stylesheet" type="text/css" href="design.css">
<link rel="javascript" type="text/javascript" href="javascript.js">
<link rel="SHORTCUT ICON" href="http://dominiksblog.bplaced.net/icon.ico" type="image/x-icon">

<link href='http://fonts.googleapis.com/css?family=Monofett' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#333333">




<div id="logopfeil">
<img src="Bilder/logopfeil.png" alt="" />
</div>

<div id="logo" >

<center>
<a href="blog.html"><img align="center" src="Bilder/logo.png" ></a>
</center>

</div>



<div style="position: absolute;"><a id="f" target="_parent" href="http://www.facebook.com/profile.php?id=1844863797">f</a></div></center></body>



<center>
<div id="menu" >

<a id="tabs1" href="index.html">News</a>
<a id="tabs2" href="media.html">Media</a>
<a id="tabs3" href="#">Skate/Snow</a>
<a id="tabs4" href="#">Stuff</a>

</div>
</center>



<center>
<div id="hauptfenster" >

<h3 id="titel_news">News</h3>

<hr id="line_1">

<div id="newstext_1">

<p><font color="FF7F00" size="5pt">Willkommen auf meiner Webseite !</font></p>
<p>Schön,das du hier hergefunden hast.Im folgenden Text erläutere ich was ich</p>
<p>mit dieser Seite/Blog vorhabe und was mich dazu bewegt hat,einen Blog zu machen.</p>
<p>Als erstes möchte ich sagen,das diese Seite weder kommerziellen noch irgendeinen </p>
<p>wirklichen Zweck hat.Sie dient lediglich als Blog bzw. Seite wo ich Stuff von mir</p>
<p>oder auch von meinen Freunden teile.Primär habe ich diese Seite gemacht um meine </p>
<p>Html/CSS/Php und Javascript Fähigkeiten zur Grenze zu bringen.Natürlich ist mir </p>
<p>klar,das meine Seite nicht die Beste der Besten ist und sie es auch nicht sein wird.</p>
<p>Selbstverständlich wird sie auch noch optimiert bzw. überarbeitet.Vorerst bleibt </p>
<p>dieses Layout.Nicht unwichtig ist,das ich alles was ihr sehen könnt inkl. Bilder,selber gemacht</p>
<p>habe!Ich arbeite mit einem normalen Html/etc. Editor.Mehr dazu findest du in Über </p>
<p>diese Webseite.So,genug von dem.Weiter gehts mit,was willst du auf deiner Webseite</p>
<p>den alles machen/teilen Teil.</p>
<ul type="square">
<li>Snowboard Stuff</li>
<br>
<li>Skateboard Stuff</li>
<br>
<li>Website Stuff</li>
<br>
<li>Bilder/Videos/Animationen</li>
<br>
<li>Alltagssachen</li>
<br>
<li>Mein Getue</li>
<br>
<li>...</li>
</ul>
<p>Respect,ich hätte mir das alles nicht durchgelesen.Zurzeit befindet sich noch nicht</p>
<p>so viel auf der Seite,aber darum kümmer ich mich in den nächsten Wochen.Wie du</p>
<p>vielleicht mitbekommen hast,ist dieser Text sehr verwirrt und so wie ich mich kenne</p>
<p>habe ich sicher einiges vergessen.Daher folgen noch einige kürzere *hust* viel</p>
<p>kürzere Infotexte .So,das wärs fürs erste.Wie gesagt es wird noch viel</p>
<p>folgen.Also <font face="Orbitron">STAY TUNED !</font></p>
<p style="margin-right:5px;" align="right"><font face="Arial" size="1pt" color="grey">Verfasst von DominiksBlog Fr.20:05 16.12/11</font></p>

</div>

</div>
</center>

</body>

</html>

Css doc :

#logo {
border-style: groove;
width: 800px;
height: 150px;
margin:auto;

}

#menu {
width: 1000px;
height: 40px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
border-style: groove;
margin-top: 30px;
background-color: #333333;

}

#hauptfenster {
width: 800px;
height: 1000px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
border-style: groove;
margin-top: 20px;

}

#tabs1 {
font-family: Arial;
font-size: 25pt;
border-left-style: groove;
padding-left: 10px;
margin-left: 100px;
text-decoration: none;
color: grey;

}

#tabs2 {
font-family: Arial;
font-size: 25pt;
border-left-style: groove;
padding-left: 10px;
margin-left: 100px;
text-decoration: none;
color: grey;

}

#tabs3 {
font-family: Arial;
font-size: 25pt;
border-left-style: groove;
padding-left: 10px;
margin-left: 100px;
text-decoration: none;
color: grey;

}

#tabs4 {
font-family: Arial;
font-size: 25pt;
border-left-style: groove;
padding-left: 10px;
margin-left: 100px;
text-decoration: none;
color: grey;

}

#titel_news {
font-family: Orbitron;
font-size: 30pt;
margin-top: 15px;

}

#line_1 {
width: 600px;

}

#newstext_1 {
border-left-style: groove;
border-bottom-style: groove;
border-style: groove;
margin-top: 70px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
width: 700px;
font-family: Muli;
font-size: 10pt;
line-height: 7px;
color: #F2F2F2;

}

font-family:Montserrat;
#f {
font-size:25pt;
color: #4C4C4C;
margin-left:1000px;

}

#f:hover {
color: #F2F2F2

}

#blog {
border-left-style: groove;
border-bottom-style: groove;
border-style: groove;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
margin-top: 70px;
width: 700px;
height: 600px;
color: #F2F2F2;
background:url(Bilder/blogbackground.png);
font-family: Georgia;
font-style: italic;
font-size: 12pt;
color: #F2F2F2;

}

#blog_titel {
font-family: Muli;
text-align: left;
text-decoration: underline;
margin-left: 10px;
color: #FF7F00;

}

#logopfeil {
position: absolute;

}

a:visited { text-decoration:none; font-weight:bold; color:#B2B2B2; }
a:link { text-decoration:none; font-weight:bold; color:#B2B2B2; }

Bild von der perfekten Anpassung.

Bitte nicht kopieren.

Hier der Link zu meiner Seite : Dominik's Blog

maria1 · 16 Januar 2012

Bitte nutze die Code Tags.

Zuerst mal fehler beheben :)

Philastan · 16 Januar 2012

Ich würde um den Inhalt deiner Website einen Wrapper schreiben (<div class="wrapper"></div>) und dann deinen Link zum Blog INNERHALB des Wrappers per position:absolut und margin-left:-100px (100 als Beispiel) nach links verschieben. Dem Wrapper gibst du dann auch eine feste Breite und zentrierst ihn mit margin:auto.
Somit sparst du dir alle <center> - tags und kannst deine Inhalte sehr viel freier positionieren.
Falls du was nicht verstanden hast, kannst du gerne nachfragen. Vielleicht sogar mit etwas Rechtschreibung... ;)

LG

Phil

Wustersoss · 17 Januar 2012

Hallo,

am Besten fängst du noch mal neu an mit sauberem HTML, den du von mir erhälst. Du kannst alle Elemente aus dem HTML mit CSS referenzieren und somit dekorieren. Mehr brauchst du nicht an Html:

HTML:

<!DOCTYPE html>
<html>                   
    <head>                                   
        <meta charset="utf-8">                                      
        <title>Dominik's Blog                           
        </title>                          
        <link rel="stylesheet" type="text/css" href="design.css">                          
    </head>              
    
    <body>                          
        
        <img id="logopfeil" src="Bilder/logopfeil.png" alt="">                                     
        
        <a id="logo" href="blog.html"><img src="Bilder/logo.png" alt="Bild Logo"></a>                                  
        
        <!-- Facebook F -->                             
        <div style="position: absolute;">                                      
            <a id="f" target="_parent" href="http://www.facebook.com/profile.php?id=1844863797">f</a>                          
        </div>                                   
        
        <!-- Menüpunkte -->                                   
       <ul >                                      
            <li>            
            <a id="tabs1" href="index.html">News</a>            
            </li>                                      
            <li>            
            <a id="tabs2" href="media.html">Media</a>            
            </li>                                      
            <li>            
            <a id="tabs3" href="#">Skate/Snow</a>            
            </li>                                      
            <li>            
            <a id="tabs4" href="#">Stuff</a>            
            </li>                          
        </ul>                          
        
        <!-- Hauptfenster -->                                     
        <div id="hauptfenster" >                         
            
            <h3>News</h3>                                                               
            
            <div id="newstext_1">                                 
            
                <h4>Willkommen auf meiner Webseite!</h4>                                                  
                
                <p>Schön, das du hier her gefunden hast. Im folgenden Text erläutere ich was ich                                                                   mit dieser Seite/Blog vorhabe und was mich dazu bewegt hat, einen Blog zu machen.                                                                   Als erstes möchte ich sagen, dass diese Seite weder kommerziellen noch irgendeinen                                                                    wirklichen Zweck hat. Sie dient lediglich als Blog bzw. Seite wo ich Stuff von mir                                                                   oder auch von meinen Freunden teile. Primär habe ich diese Seite gemacht um meine                                                                    Html/CSS/Php und Javascript Fähigkeiten zur Grenze zu bringen. Natürlich ist mir                                                                    klar, dass meine Seite nicht die Beste der Besten ist und sie es auch nie sein wird.                                                                   Selbstverständlich wird sie auch noch optimiert bzw. überarbeitet. Vorerst bleibt                                                                    dieses Layout. Nicht unwichtig ist, dass ich alles was ihr sehen könnt inkl. Bilder, fast selber gemacht                                                                   habe! Ich arbeite mit einem normalen Html/etc. Editor. Mehr dazu findest du in Über                                                                    diese Webseite. So, genug von dem. Weiter geht´s mit, was willst du auf deiner Webseite                                                                   den alles machen/teilen Teil.                                                   
                </p>                                                  
                
                <ul>                                                              
                    <li>Snowboard Stuff                                                               
                    </li>                                                              
                    <li>Skateboard Stuff                                                               
                    </li>                                                              
                    <li>Website Stuff                                                               
                    </li>                                                              
                    <li>Bilder/Videos/Animationen                                                               
                    </li>                                                              
                    <li>Alltagssachen                                                               
                    </li>                                                              
                    <li>Mein Getue                                                               
                    </li>
                    <li>...                                                               
                    </li>                                                  
                </ul>                                                  
                
                <p>Respekt, ich hätte mir das alles nicht durchgelesen. Zur Zeit befindet sich noch nicht                                                                   so viel auf der Seite, aber darum kümmere ich mich in den nächsten Wochen. Wie du                                                                   vielleicht mitbekommen hast,  ist dieser Text sehr verwirrt und so wie ich mich kenne                                                                   habe ich sicher einiges vergessen. Daher folgen noch einige kürzere *hust* viel                                                                   kürzere Infotexte. So, das wär´s fürs Erste. Wie gesagt es wird noch viel                                                                   folgen. Also                                                                
                    <em>STAY TUNED!                                                               
                    </em>                                 
                </p>                                                                                   
                
                <p class="verfasst">Verfasst von DominiksBlog Fr.20:05 16.12/11                                                           
                </p>                                                                       
            
            </div>                          
        </div>                     
    </body>
</html>

Die Referenzen zur Google Api für die Fonts waren nicht richtig. Verwende Webfonts, wenn du andere Fonts einbinden willst und sorge für Ersatzfonts falls ein Browser das nicht kann.

Das Favicon musst du nur mit favicon.ico benennen und im untersten Verzeichnis ablegen, dann wird es automatisch genommen.

Zeichensatz ist UTF-8, das ist internatinaler Standard, siehe die ISO dazu.

Du hattest BR-Elemente in einer Liste, das ist nicht erlaubt.
Du hattest verbotene Tags verwendet, wie Font.
Du hattest verbotene Attribute verwendet wie align.

Das HTML ist valides Html5, du kannst es so verwenden ohne zusätzliche ids oder Klassen einzufügen. Lediglich das CSS muss angepasst werden.

Lese dazu: CSS 4 You - The Finest in Stylesheets: CSS-Referenz: Eigenschaften von A-Z
und
Selectors Level 3
sowie
HTML5 Doctor, helping you implement HTML5 today

DBlog · 17 Januar 2012

Vielen Dank für dein Antwort.Werde mich mal dahinter setzten und nochmal alles durchgehen ; D

DBlog · 18 Januar 2012

Du hattest BR-Elemente in einer Liste, das ist nicht erlaubt.

warum ist das verboten ? es geht ja ? (ich brauch ja einen Abstand dazwischen)

DylanP · 18 Januar 2012

Hab mal einen Hinweis:

Wenn du einen eigenen Blog für dich machen willst,
schau dir doch mal die Programmiersprachen PHP und MySQL an (Stichwort Datenbanken)

Nur mal so ein Tipp ;)

Wustersoss · 18 Januar 2012

warum ist das verboten ? es geht ja ? (ich brauch ja einen Abstand dazwischen)

Genau darum, weil du einen Abstand brauchst. Das ist Sache der Abstände der Listenelemente zueinander und gehört ins CSS.

Die Regeln besagen das in einem UL-Element nur Listenelemten, li, vorkommen dürfen, siehe 4.5 Grouping content — HTML5

Bild richtig einfügen bzw positionieren

DBlog

Mitglied

maria1

Mitglied

Philastan

Mitglied

Wustersoss

Guest

DBlog

Mitglied

DBlog

Mitglied

DylanP

Neues Mitglied

Wustersoss

Guest

Neueste Beiträge