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

Anfängerfrage bezüglich Textausrichtung

K

Kevinb_91

Mitglied
Guten Tag,
ich fange gerade an mit HTML5/CSS3 und habe mich eben an einem Youtube Beispiel orientiert, indem es darum ging, eine responsive Seite zu programmieren. Da liegt garnicht das Problem, sondern dieses ergab sich, als ich eigenständig, aus Übungszwecken, beginnen wollte an der Seite zu basteln.
Im Footer der Seite befindet sich, links ausgerichtet, ein Beispieltext der sich auf das Copyright der Seite bezieht. So weit so gut.
Was ich nun wollte ist folgendes; Ich wollte ohne die Größe des Footers zu ändern, auf der rechten Seite so eine art "Back to top" Button einfügen. Das Problem ist ich weiß nicht wie ich das genau hinbekomme, das wäre ja quasi Textausrichtung links UND rechts in einer Zeile. Habs schon gegoogled, mit divs und spans probiert aber so richtig will das nicht klappen. Vielleicht kann mir hier jemand helfen.

Ich hänge mal die Codes der HTML Page und die CSS Datei an.
Mfg,
Kevin.

HTML: 
<!doctype html>
<html lang="en">
<head>
  <title>HTML/CSS Responsive Theme</title>
  <meta charset="utf-8" />
 
  <link rel="stylesheet" href="style.css" type="text/css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
  <header class="mainheader">
  <img src="image/logo.png">
 
  <nav><ul>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
  </ul></nav>
  </header>
  <div class="mainContent">
  <div class="content">
  <article class="topContent">
  <header>
  <h2><a href="#" title="first post">First Post</a></h2>
  </header>
 
  <footer>
  <p class="post-info">This post is written by Kevin</p>
  </footer>
 
  <content>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </content>
  </article>
  <article class="bottomContent">
  <header>
  <h2><a href="#" title="second post">Second Post</a></h2>
  </header>
 
  <footer>
  <p class="post-info">This post is written by Kevin</p>
  </footer>
 
  <content>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </content>
  </article>
  </div>
  </div>
 
  <aside class="top-sidebar">
  <article>
  <h2>Top Sidebar</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
  </article>
  </aside>
  <aside class="middle-sidebar">
  <article>
  <h2>Middle Sidebar</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
  </article>
  </aside>
 
  <aside class="bottom-sidebar">
  <article>
  <h2>Bottom Sidebar</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
  </article>
  </aside>
 
  <footer class="mainfooter">
  <p>Copyright &copy; <a href="#" title="Kevin">Kevin</a></p>
  </footer>
 
 
 
 
</body>
</html>

-----

HTML: 
@charset "utf-8";
/* CSS Document */
body {
  background-color: #D8D8D8;
  color: #000305;
  font-size: 87.5%; /* Base font size is 14px */
  font-family: Arial, "Lucida Sans Unicode";
  line-height: 1.5;
  text-align: left;
}
a {
  text-decoration: none;
}
a:link, a:visited {
color: #CF5C3F;
}
a:hover, a:active {
color: #FFF;
background-color: #CF5C3F;
}
.body {
  margin: 0 auto;
  width: 70%;
  clear: both;
}
.mainheader img {
width: 30%;
height: auto;
margin: 2% 0;
}
.mainheader nav {
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul {
list-style:none;
margin: 0 auto;
}
.mainheader nav ul li {
float: left;
display: inline;
}
.mainheader nav a:link, .mainheader nav a:visited {
color: #fff;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited {
background-color: #CF5C3F;
text-shadow: none;
}
.mainheader nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainContent {
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.content {
width: 70%;
float: left;
}
.topContent {
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.bottomContent {
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
}
.post-info {
font-style: italic;
color: #999;
font-size: 85%;
}
.top-sidebar {
width: 21%;
float: left;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 1.5% 0 2% 3%;
padding: 2% 3%;
}
.middle-sidebar {
width: 21%;
float: left;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
  margin: 0 0 2% 3%;
padding: 2% 3%;
}
.bottom-sidebar {
width: 21%;
float: left;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 0 0 2% 3%;
padding: 2% 3%;
}
.mainfooter {
width: 100%;
height: 40px;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #666;
  margin: 2% 0 2% 0;
}
.mainfooter p {
width: 100%;
margin: 10px;
color: #FFF;
}
@media only screen and (min-width: 150px) and (max-width: 600px)
{
  .body {
  width: 90%;
  font-size:95%;
  }
 
  .mainheader img {
  width: 100%;
  }
 
  .mainheader nav {
  height: 160px;
  }
  .mainheader nav ul {
  padding-left: 0;
  }
  .mainheader nav ul li {
  width: 100%;
  text-align: center
  }
  .mainheader nav a:link, .mainheader nav a:visited {
  padding: 10px 25px;
  height: 20px;
  display: block;
  }
.content {
  width: 100%;
  float: left;
  margin-top: 2%;
}
 
.post-info {
  display: none;
}
 
.topContent {
  margin-bottom: 4%;
}
 
.bottomContent {
  margin-top: 3%;
  margin-bottom: 2%;
}
.top-sidebar, .middle-sidebar, .bottom-sidebar {
  width: 94%;
  margin: 2% 0 2% 0;
  padding: 2% 3%;
}
}

EDIT: Ich sehe gerade meine Formatierung geht verloren, wenn ich das ganze hier als Code poste. Ich habe deshalb das ganze auch nochmal als .zip Datei angehangen, falls jemand etwas mehr Struktur in dem ganzen möchte.
 

Anhänge

Zuletzt bearbeitet:
Du fügst zwei Klassen ein.
Code: 
.left {
float:left;
}
.right {
float:right;
}


<div class="mainfooter">
<p class="left">Alle Rechte ...</p><p class="right">top</p>
</div>
 
Morgen,
habs jetzt mal so kopiert, allerdings muss sich das mit irgendeiner Einstellung beißen, da es so aussieht.

Hilfe1.png.html

http://www.pic-upload.de/view-22661043/Hilfe1.png.html
 
Es funktioniert jetzt bei mir, vielen dank :).
Rein aus Interesse, wie würde ich denn jetzt noch etwas in die Mitte bekommen? Ohne das alles andere den Bach runter geht?

Mfg,
Kevin.
 
Code: 
<div class="mainfooter">
<p class="left">Alle Rechte ...</p><p class="left">Mitte</p><p class="right">top</p>
</div>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben