Beiträge von Aaron_HTML

Aaron_HTML · 10. Juli 2017

Zitat von Axel

siehe https://www.HTML-Seminar.de zum Lernen von HTML5 und CSS, CSS3 und mehr

ups da hätte ich auch selber drauf kommen können

Aaron_HTML · 9. Juli 2017

Zitat von MrMurphy

Hallo

Die Seite ist leider sehr unsinnig erstellt worden. Dass der Doctype fehlt ist noch das geringste Problem.

Eine Webseite sollte zunächst mit passenden HTML-Elementen erstellt werden.

Dann wird die Webseite mit CSS gestaltet.

Zum Schluß werden mittels JavaScript noch fehlende Funktionen hinzugefügt und ausnahmsweise CSS-Anweisungen überschrieben, falls die Darstellung sich dadurch entscheidend verbessern lässt. Bei dem gezeigten Layout sehe ich keinen Grund für solche Ausnahme.

Bei der aktuellen Webseite ist das CSS-Layout Schrott und wird mittels JavaScript wieder halbwegs zurechtgerückt. Das funktioniert in der Praxis jedoch nicht und bereitet bei jeder Änderung Probleme.

Ansicht mit JavaScript:

Mit JavaScript

Ansicht ohne JavaScript:

Ohne JavaScript

Deshalb sollte die Seite komplett neu erstellt werden. Das Layout sollte nur mittels CSS gestaltet werden.

Auf position-Angaben sollte dabei verzichtet werden, speziell position: absolute. Gleiches gilt für height-Angaben. Regel: Die Höhe von Elementen richtet sich nach ihrem Inhalt.

Gruss

MrMurphy

Alles anzeigen

Erstmal vielen Dank für ihre schnelle Antwort, ich möchte sie allerdings fragen ob sie mir vieleicht einen tipp für einen guten Html5 und css3 Kurs geben können da ich mich bisher nur durch google html lehrte ,und die Webseiten eher unschön durchmogelte.Nun möchte ich aber mal ernsthaft html4 oder 5 und css3 lernen fals sie mir helfen können einen passenden Vidoekurs oder ein Buch zu finden wäre ich ihnen sehr dankbar.

LG Aaron

Aaron_HTML · 9. Juli 2017

Ich habe auf meiner seite eine Navigation estellt die aus vier reitern bzw. icons besteht die je 64x64 px entsprechen diese icons Habe ich natürlich via <a> als text diffieniert und den jeweiligen pfart zugewiesen <a href="index.html"><img src="bilder/home"></a>diese reiter waren zuerst alle in einem container verpackt und durch letter spacing getrent so war aber nur das erste und letzte icon klickbar als ich dann in einem forum fragte bekahm ich keine antwort und dachte es könnte am letter spacing liegen also wies ich jedem icon einen eigenen container zu(reiter1;2;3;4) und positionierte sie einzelnd doch das problem hat sich dadurch nicht gelöst und ich kann mir nicht erklären warum die navigation nicht funktionier vileicht könnt ihr mir helfen danke im voraus (und entschuldigt rechtschreib fehler habe es sehr eilig

index.html:

HTML

<html>
<head>
    <title>xy</title>
    <script language="javascript" type="text/javascript" src="handy.js"></script>  
       <link href="style.css" type="text/css" rel="stylesheet">
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     
</head>
     
<body>
    
<div class="bg-element">
    
</div>
<div id="inhalt">
<div class="logo">
    <img src="logo.png">  
</div>   
<div class="bg2">
 
 
    
    
    
    
    
    
</div>   
<div class="navigation">
   <img src="balken.png"> 
</div>    
<div class="reiter1">
    <a href="index.html"><img src="home.png"></a></div>
    <div class="reiter2"><a href="shop.html"><img src="shopping-basket%20.png"></a></div>
    <div class="reiter3"><a href="#"><img src="mail.png"></a></div>
    <div class="reiter4"><a href="#"><img src="picture.png"></a>
</div>
<div class="wilkommen">
  <h3>Wilkommen</h3>  
    
    
</div>
<div class="text">
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
    
    
</div>
<div class="footer">
    <a href="https://www.facebook.com/neues.label/"><img src="Facebook.png"></a><br>
 <a href="#">Impressum;</a>
 <a href="#">Agb;</a>
 <a href="admin.html">Adminpanel;</a>
    
    
</div>
<div class="kommentare">
   <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/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
        <div id=fb class="fb-comments" data-href="http://xy.de/" data-numposts="5"></div> 
    
    
    
</div>   
</div>    
    
    
    
    
</body>    
    
 
    
    
    
    
</html>

Alles anzeigen

style.css:

Code

a:link{text-decoration: none;color: 747474}
a:visited{text-decoration: none;color: 747474}
a:hover{text-decoration: none;background-color: azure}
@font-face {
    font-family: 'alex_brushregular';
    src: url('alexbrush-regular-webfont.woff2') format('woff2'),
         url('alexbrush-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
body
.bg2{;width: 900;margin-left: 800;height: 1500;background-color: #f2f2f2;position: absolute;
width: 900px;
height: 1500px;margin-left: -450px;
left: 50%;}
.bg-element{background-image: url(backround.png);width: 110%;height: 1780;margin-left: -32;margin-top: -42;background-attachment: fixed;position: fixed;}
.logo{z-index: 2;position: absolute;
width: 900px;
height: 250px;margin-left: -450px;
left: 50%;}
.navigation{position: absolute;
width: 900px;
height: 83px;margin-left: -450px;
left: 50%;margin-top: 250}
.wilkommen{position: absolute;left: 50%;width: 520;height: 250;margin-left: -260 ;margin-top: 250;font-size: 90;font-family: "alex_brushregular";}
.text{position: absolute;
width: 600px;
height:300px;margin-left: -450px;
left: 65%;margin-top: 500;font-size: 18}
.footer2{position: absolute;
width: 900px;
height: 100px;margin-left: -450px;
left: 50%;margin-top: 3900;text-align: center}
.kommentare{position: absolute;
width: 600px;
height: 500px;margin-left: -450px;
left: 65%;margin-top: 950 }
#inhalt{position: absolute;
width: 980px;
height: 1500px;margin-left: -490px;
left: 50%;}
.shoptext{position: absolute;width: 800;margin-left: -400;margin-top: 450;left: 50%;font-family:;font-size: 20;}
.h2shop{position: absolute;width: 200;margin-left: -100;left: 50%;margin-top: 240;font-size: 72;font-family:"alex_brushregular"}
.bildershop{position: absolute;margin-top: 600;font-size: 40;font-family: sans-serif;width: 720;margin-left: -360;left: 50%;letter-spacing: 1}
.bg2shop{width: 900;margin-left: 800;height: 1500;background-color: #f2f2f2;position: absolute;
width: 900px;
height: 4000px;margin-left: -450px;
left: 50%;}
.platzhalter{font-family: alex_brushregular;color: white;background-color: #484848;text-align: center}
.bestellformular{position: absolute;width:480px;height:800px;margin-left: -240;left: 50%;margin-top: 3000}
.footer{position: absolute;
width: 900px;
height: 100px;margin-left: -450px;
left: 50%;margin-top: 850;text-align: center}
.reiter1{position: absolute;margin-top: 260;height: 64;width: 64;left: 25%;margin-left: -128}
.reiter2{position: absolute;margin-top: 260;height: 64;width: 64;left: 50%;margin-left: -128}
.reiter3{position: absolute;margin-top: 260;height: 64;width: 64;left: 75%;margin-left: -128}
.reiter4{position: absolute;margin-top: 260;height: 64;width: 64;left: 100%;margin-left: -128}

Alles anzeigen

Aaron_HTML · 2. Juli 2017

Zitat von JR Cologne
CSS
.bg-element {
    background-attachment: fixed;
}
Einfache Google-Suche (Hintergrund fixieren css) hätte es übrigens auch getan.

Trotzdem Danke

Aaron_HTML · 1. Juli 2017

html-seminar.de/woltlab/attachment/1140/meine frage ist wie ich einen Hintergrund fixiere (das er nicht mit scrollt )hier ein Bild vom Entwurf der website

Aaron_HTML · 30. Juni 2017

Meine frage ist wie ich einen link für eine navigation auf einem bild platziere das bild müste als backround festgelegt sein und trotzdem klappt es nicht!

Hier der code:

Html:

HTML

<html>
<head>
    <title>bla</title>
    
    <link href="style.css" type="text/css" rel="stylesheet">
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>
 <body>
    <body bgcolor="#292929">
    
        <div id=inhalt>
          <div id=logo>
             
              </div> 
           
            
            
            
        
        <div id=text>
        
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   
</p>
        
 
        
        
        
        
        
        
        </div>
        
            
            
            
            
            
           <div id="navigation">
        
             <a>Shop</a>  
            
            
            
        </div>
            
            
            
            
            
       
            
            
            
        </div>
     
        
    
</body>
    
    

</html>

Alles anzeigen

css:

Code

a:link{text-decoration: none;color: #4b4b4b};
a:hover{text-decoration: none;color: black};
a:visted{text-decoration: none;color: #4b4b4b};
a:{background-image: url(black.jpg)}
body
#inhalt{width: 900px;margin-left: auto;margin-right: auto}
#logo{background-image: url(blalogo.png);width: 900px;height: 250px;
  top:      8px;
    width: 900px;
    height: 250px;
    position: absolute;
    left: 3r0%;
    top: %;}
#text{text-align: center;color: white;padding-top: 120}
#navigation{color: rgb(255, 245, 0)}

Alles anzeigen

Ps: bin noch anfänger

Schonmal Danke

Beiträge von Aaron_HTML

Navigation funktioniert unerklärlicher weise nicht.

Navigation funktioniert unerklärlicher weise nicht.

Navigation funktioniert unerklärlicher weise nicht.

bild als hintergrund fixieren

bild als hintergrund fixieren

Link auf bild positionieren