Hoffy
Threadersteller
Dabei seit: 29.04.2012
Ort: Niederwerrn
Alter: 36
Geschlecht: 
|
Verfasst Di 22.05.2012 20:02
Titel Padding + Float-Befehl = Verrutschen in ZWEI Richtungen? |
  |
|
Hi ihr
ich kenn mich mittlerweile schon recht gut in HTML ud CSS aus
(behaupte ich mal von mir selber einfach so^^)
so heute bin ich mal wieder am HP basteln
aber heute ist mir ein "Problem" aufgefallen, dass ich in dieser Art und weise noch nie gehabt habe.
Mein Grundgedanke damit Ihr versteht was ich haben will:
also ich will einen footer bei dem der text un ein anchor in der selben Zeile stehen.
Text links, anchor rechts.
und auch noch einen Padding im footer damit das nicht ganz am Rand dranklebt (is ja klar^^).
soweit der gundgedanke
ich denke mal jeder wird mir aufanhieb raten nimm float.
so das hab ich mir auch gedacht.
So ich habe also meinen text mit float:left
und meinen anchor mit float:right
klappt auch wunderbar, bis dahin^^
so wenn ich jetzt aber dem footer einen padding von 15px gebe.
(1000px breit und 50px hoch, code und link poste ich gleich noch),
passiert folgendes:
der linke text wird 15px nach rechts und nach unten verschoben,
das ist ja gewollt.
ABER
der anchor richtet sich rechts aus ABER
verschiebt sich selber auch nach rechts und unten :O
1. Woran liegt das?
2. wie "umgehe" ich das am besten??
3. Wäre hier einen margin von 30px vom anchor aus nach rechts (mein nächster gedanke) eine sinnvolle Lösung?
so hier der link zu der seite:
http://massivbau-schweinfurt.de/ttm/html/media/index.html
hier der code:
| Code: | <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Fresh Entertainment</title>
<link rel="stylesheet" type="text/css" href="style/reset.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<div id="alles">
<header>
</header>
<section id="inhalt">
<nav class="floatl">
<ul>
<li><a href="indexalt.html">Home</a></li>
<li><a href="#.html">Leistungen</a></li>
<li><a href="#.html">Referenzen</a></li>
<li><a href="#.html">Kontakt</a></li>
<li><a href="#.html">Mediadaten</a></li>
<li><a href="#.html">Links</a></li>
<li><a href="index.html">Productions</a></li>
</ul>
</nav>
<section id="content" class="floatl">
</section>
</section>
<footer class="clearfix">
<p class="floatl">Fresh Entertainment ©2012</p><a href="#.html" class="floatr">Impressum</a>
</footer>
</div>
</body>
</html>
|
| Code: |
@charset "utf-8";
/* CSS Document */
html {
background:url(../bilder/hintergrund/Leinen2.png) repeat-x;
}
/*
====================================================================
Abstände auf 0
====================================================================
*/
* {
margin:0;
padding:0;
}
/*
====================================================================
Float Klassen
====================================================================
*/
.floatr {
float:right;
}
.floatl {
float:left;
}
.clearfix {
clear:both;
}
/*
====================================================================
Trennstrich
====================================================================
*/
.trennstrich {
}
/*
====================================================================
Body Einstellungen
===================================================================
*/
body {
}
/*
====================================================================
Site Einstellungen
====================================================================
*/
#alles {
margin:0 auto;
width:1000px;
height:700px;
/* background:rgba(204,204,204,1);*/
-webkit-box-shadow:rgba(255,255,255,.5) 5px 5px 10px;
-moz-box-shadow:rgba(255,255,255,.5) 5px 5px 10px;
-ms-box-shadow:rgba(255,255,255,.5) 5px 5px 10px;
-o-box-shadow:rgba(255,255,255,.5) 5px 5px 10px;
box-shadow:rgba(255,255,255,.5) 5px 5px 10px;
}
/*
====================================================================
Header Einstellungen
====================================================================
*/
header {
width:100%;
height:50px;
}
/*
====================================================================
Inhalts Box
====================================================================
*/
#inhalt {
width:100%;
height:600px;
}
/*
====================================================================
Navi Einstellungen
====================================================================
*/
nav {
width:20%;
height:600px;
}
nav ul {
}
nav li {
}
nav a {
}
nav a:hover {
}
/*
====================================================================
Inhalts Einstellungen
====================================================================
*/
#content {
width:79%;
heigth:600px;
}
/*
====================================================================
Footer Einstellungen
====================================================================
*/
footer {
width:100%;
height:50px;
padding:15px;
}
footer p {
}
/*
====================================================================
Restliche Einstellungen - Seiten / Inhaltsspezifisch
====================================================================
*/
|
code ist ein bischen auführlicher gehalten, da ein kollege der noch nicht so viel ahnung von html hat, davon ein bsichen lernen will und mir beim aufbau mal ein bsichen zuschauen möchte und ich ihn auch mal ein bischen mitarbeiten lassen will learning by doing eben^^
ja nur peinlich dass mir dieser "fehler" bisher noch nicht begegnet ist ^^
ich weiß man baut auch nich von unten her auf
aber er wollte unbedingt von anfang an wissen wie man anchor und text nebeneinander platziert
Zuletzt bearbeitet von Hoffy am Di 22.05.2012 20:04, insgesamt 1-mal bearbeitet
|
|
Willkommen auf dem Portal für Mediengestalter
