2016-10-24 2 views
-6

In Ordnung, Entschuldigung für den vagen Titel, das Problem in Frage ist viel spezifischer. Ich versuche etwas sehr Einfaches: Einen Textabsatz ordentlich neben ein Bild zu legen. In here finden Sie eine PDF-Datei mit Screenshots, wie das fertige Produkt aussehen soll. This link können Sie eine Zip-Datei herunterladen, die alles zu diesem und mehr enthält, aber ich werde die Code-Snippets auch hier setzen.Stuck mit einer CSS-Zuweisung

HTML-Code

body 
 
{ 
 
    font-family: "Segoe", sans-serif; 
 
    font-size: 0.8125em; 
 
} 
 
    
 
h1 
 
{ 
 
    font-size: 3em; 
 
    color: #FF0000; 
 
} 
 
    
 
h2 
 
{ 
 
    font-size: 2em; 
 
    color: #575757; 
 
} 
 
    
 
h1+p 
 
{ 
 
    font-size: 1.5em; 
 
    color: #575757; 
 
    background-color: #C5C5C5; 
 
    border-color: #575757; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
} 
 
    
 
body, h1, h2, p 
 
{ 
 
    margin: 0; 
 
} 
 
    
 
img 
 
{ 
 
    float: left; 
 
    padding: 1em; 
 
    overflow: hidden; 
 
} 
 
    
 
.top 
 
{ 
 
    background-color: #D9D9D9; 
 
    border-bottom: solid 5px #FF0000; 
 
    padding: 1em; 
 
} 
 
    
 
.bot 
 
{ 
 
    border-bottom: solid #FF0000; 
 
} 
 
    
 
.footer 
 
{ 
 
    font-size: 1.2307692307692308em; 
 
    font-weight: bold; 
 
    color: #575757; 
 
    background-color: #D9D9D9; 
 
}
<div class="top"> 
 
    <img src="../../assets/logo.png" alt="logo"> 
 
    <h1>Main heading</h1> 
 
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div> 
 
    
 
<!-- alaosa --> 
 
<div class="bot"> 
 
    <h2>Subheading</h2> 
 
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> 
 
    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> 
 
</div> 
 
    
 
<!-- footer --> 
 
<p class="footer">ITIY3 | SIS | UTA</p>

Ich kann nicht mehr als zwei Links posten, aber ich hoffe, dass jeder das öffnen 7z bekommen kann. Nun, die Sache ist, ich glaube nicht, dass ich das HTML zu sehr ändern darf, da die Aufgabe sich auf CSS bezieht und eine HTML-Datei zusammen mit dem Bild bereitgestellt wurde. Das einzige, was ich getan habe, um die HTML-Datei zu ändern, war, das src-Attribut so zu machen, dass das Bild gefunden wird, da ich eine bestimmte Ordnerstruktur für diese Dinge habe, und ich habe auch die Klassen zu divs hinzugefügt. Ich glaube jedoch nicht, dass ich mehr Divs machen darf, und dies sollte machbar sein, nur durch Ändern der CSS-Datei. Um die HTML-Datei zu finden, entpacken Sie die 7z und gehen Sie zu "TestZone/code/tehtava-3/tehtava3.html", die CSS-Datei befindet sich im selben Ordner.

Ich werde für eine Weile AFK sein, aber ich werde versuchen, alles zu klären, worüber du dich vielleicht wundern würdest.

Und tut mir leid, dass so ein Chaos ist.

+1

Nein, wir werden keine Dateien herunterladen, um Ihren Auftrag für Sie zu erledigen, während Sie AFK sind ... – deceze

+1

Machen Sie Ihre eigenen Hausaufgaben. Und was bringt Sie dazu, dass wir alle plötzlich auf Finnisch geschriebene PDFs entziffern können? –

+1

Ich glaube nicht, dass das eigentliche Problem die Tatsache ist, dass der Benutzer "AFK" ist oder dass die Dateien auf Finnisch sind. Warum sollte sich jemand die Mühe machen, eine Datei von einer unbekannten Person/Benutzer herunterzuladen? –

Antwort

0

Wir werden keine Dateien herunterladen, um Ihren Auftrag für Sie zu erledigen, während Sie AFK sind.