HTML/CSS :: Aufgabe #1
2 Lösungen
Positionieren zweier Bilder neben einem Text
Anfänger - HTML/CSS
von syneex
- 04.05.2018 um 14:02 Uhr
Hallo zusammen,
da es bei den HTML Aufgaben so gut wie nichts hat, dachte ich mir, ich lade ein paar hoch.
Nun zur Aufgabe:
Gegeben ist ein Platzhaltertext und zwei Bilder. Der Text und die Bilder sollen, wie in Abbildung "bilder", unter einem Strich stehen, über welchem sich die Überschrift wiederfindet. Hierbei ist die Schriftart egal. Jeweils rechts und links sollen sich die Bilder befinden. Was ebenfalls noch wichtig ist: Die Ecken der Bilder sollen rund sein.
Wichtiges:
- Es soll kein seperates CSS Dokument geben, lediglich Inline CSS bzw. im <style> Block über dem body.
Tipps:
- Falls ihr nicht weiter wisst, könnt ihr einfach die fett markierten Wörter googlen. Meistens kommt man dann auch gleich schon auf das gewünschte HTML Element.
Zum Probieren:
- Ihr könnt probieren die Bilder beide rechts bzw. beide links zu ,um ein bisschen zu üben mit dem Element umzugehen.
- Alles soll in einem div positioniert werden!
Platzhalter:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 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. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
Viele Grüße :)
da es bei den HTML Aufgaben so gut wie nichts hat, dachte ich mir, ich lade ein paar hoch.
Nun zur Aufgabe:
Gegeben ist ein Platzhaltertext und zwei Bilder. Der Text und die Bilder sollen, wie in Abbildung "bilder", unter einem Strich stehen, über welchem sich die Überschrift wiederfindet. Hierbei ist die Schriftart egal. Jeweils rechts und links sollen sich die Bilder befinden. Was ebenfalls noch wichtig ist: Die Ecken der Bilder sollen rund sein.
Wichtiges:
- Es soll kein seperates CSS Dokument geben, lediglich Inline CSS bzw. im <style> Block über dem body.
Tipps:
- Falls ihr nicht weiter wisst, könnt ihr einfach die fett markierten Wörter googlen. Meistens kommt man dann auch gleich schon auf das gewünschte HTML Element.
Zum Probieren:
- Ihr könnt probieren die Bilder beide rechts bzw. beide links zu ,um ein bisschen zu üben mit dem Element umzugehen.
- Alles soll in einem div positioniert werden!
Platzhalter:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 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. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
Viele Grüße :)
Lösungen:
HTML-Code
<html>
<head>
<style type="text/css">
*{
font-family: Tahoma, Arial;
}
h1{
text-align: center;
}
p{
text-align: justify;
}
img {
border-radius: 25px;
}
#blue{
float:left;
}
#red{
float:right;
}
</style>
</head>
<body>
<div id="wrap">
<h1>HTML Aufgabe #1</h1>
<hr />
<p>
<img src="blue.png" id="blue">
<img src="red.png" id="red">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 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. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
</p>
</div>
</body>
</html>
HTML-Code
<!DOCTYPE html>
<head>
<title>001_BilderNebenText</title>
<meta charset=utf-8>
</head>
<style>
html{
background-color: lightgrey;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.links{
float: left;
margin-right: 10px;
}
.rechts{
float: right;
margin-left: 10px;
}
img{
border-radius: 10px;
}
p{
margin-left: 10px;
margin-right: 10px;
}
h1{
text-decoration: underline;
}
</style>
<html>
<body>
<div class="container">
<h1>Bildpositionierung</h1><hr/>
<p>
<img class="links" src="links.png">
<img class="rechts" src="rechts.png">
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>
</body>
</html>