nicht angemeldet
Hallo,
In HTML habe sich bestimmte Vorgehensweisen bewährt und werden deshalb empfohlen.
Abstände werden in HTML mit CSS erstellt. Abstände zwischen Elementen mit dem margin-Attribut.
Positioniert werden nur einzelne Elemente, bei denen Abstände nicht verwendet werden können. Das kann sein weil sie auf anderen Elemente erscheinen sollen, wie zum Beispiel wenn Text auf einem Bild erscheinen soll.
Deine Angaben sind leider nicht sehr aussagekräftig. Ich habe mal eine Beispielseite nach den Informationen aus deinen bisherigen Beiträgen erstellt. Da die Bilder mir nicht vorliegen habe ich einfach die Pfade von dir übernommen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Positionieren 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Um alte IE HTML5-tauglich zu machen -->
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
/*Grundeinstellungen*/
@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
margin: 0;
}
a {
color: black;
text-decoration: none;
outline: none;
}
a:hover {
color: black;
}
}
/*Spezielle Einstellungen*/
@media all {
body {
width: 1000px;
height: 1000px;
padding: 0 auto;
padding-bottom: auto;
border: 1px solid white;
margin: 0 auto;
}
div:nth-child(1) {
background-color: #adadad;
font-size: 0.8rem;
width: 245px;
height: 100px;
margin: 5px 0 0 5px;
}
body > div:nth-child(2) {
display: block;
overflow: hidden;
width: 250px;
padding: 0;
margin: 0 0 0 5px;
}
body > div:nth-child(2) a {
background-color: #adadad;
float: left;
display: block;
width: 45px;
height: 30px;
border: 1px solid green;
margin: 10px 0 0 5px;
}
body > div:nth-child(2) a:hover {
margin-top: 5px;
}
body > div:nth-child(2) a:nth-child(1) {
background-image: url(../pics/cn.jpg);
margin-left: 0;
}
body > div:nth-child(2) a:nth-child(2) {
background-image: url(../pics/en.jpg);
}
body > div:nth-child(2) a:nth-child(3) {
background-image: url(../pics/de.jpg);
}
body > div:nth-child(2) a:nth-child(4) {
background-image: url(../pics/hk.jpg);
}
body > div:nth-child(2) a:nth-child(5) {
background-image: url(../pics/tw.jpg);
}
body > div:nth-child(3) {
display: block;
width: 100px;
margin: 10px 0 0 5px;
}
body > div:nth-child(3) a {
background-color: #adadad;
text-align: center;
display: block;
width: 100px;
height: 25px;
margin: 0 0 10px 0;
}
}
</style>
</head>
<body>
<div>
</div>
<div>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</body>
</html>
Gruss
MrMurphy
Der Martin
Gunnar Bittersmann
Camping_RIDER
Orlok