✔ Div-Elemtente zentrieren bzw. Position geben

L

Lalelu-kind

Grünschnabel
Hallo, ich habe in einer recht einfachen HTML-Seite zwei Divs, die ich gerne unter einer großen Grafik mittig nebeneinander anordnen möchte.
Bisher stehen die zwei Divs untereinander und <center> etc funktionieren bei den Divs leider nicht.

Hier mal der Link zur Seite, um die es geht: http://www.failalotsoft.com/nihp/
Der Soundcloud und Youtubebutton sollen ungefähr mittig unter die große Grafik und sollen nebeneinander stehen.

Wie kann ich das mit den Divs machen?
 
Code selbst geschrieben?
Wenn ja dann solltest du dir mal anschauen wie man richtigen HTML und CSS Code schreibt. Schau dir die Grundlagen an oder beauftrage wenn anderen damit. Javascript braucht man für alles auf deiner Seite überhaupt nicht.

Ich möchte dir aber trotzdem helfen:

1. Füge den Klassen .soundcloud und .youtube folgendes hinzu: float: left;
Damit hättest du die div container nebeneinander.
2. Lege eine neue Klasse an: .wrapper{width: 250px; margin-left: auto; margin-right: auto}.
Dann machst du einen div container mit dieser Klasse und platzierst darin deinen soundcloud und youtube container.

Funktioniert im IE allerdings nicht. Wenn du das auch noch gefixed bekommen willst verwende doch mal Google!
 
Hallo,

da A- und auch IMG-Elemente Inline-Elemente sind, ist es eigentlich für eine Zentrierung unnötig sie noch mal einzeln mit einem DIV zu umhüllen. Ansonsten kann man sie wie Fließtext zentrieren. Beispielsweise so:

HTML: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <p>
      <a href="#">
        <img class="normal" src="icons/lit/soundcloudbw.png" alt="" title="">
        <img class="hover" src="icons/lit/soundcloud.png" alt="" title="">
      </a>
      <a href="#">
        <img class="normal" src="icons/lit/YouTube-icon-sw2.png" alt="" title="">
        <img class="hover" src="icons/lit/YouTube-icon.png" alt="" title="">
      </a>
    </p>
  </body>
</html>

Ich würde das Hintergrundbild im BODY unterbringen und dort zentrieren. Andererseits sind die Bilder für die beiden Links direkt im entsprechenden A-Element eingesetzt und mit der HOVER-Eigenschaft wird dann das richtige ausgewählt.
Wenn auf der Seite nichts anderes dargestellt werden soll, dann braucht man eigentlich nur noch Klassenattribute für diese Bilder im Link:
CSS: 
* {
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
}

/* Hintergrundbild im BODY zentriert: */
body {
  background-image: url(channels3_background.jpg);
  background-repeat: no-repeat;
  background-position: center top;
}

/* P-Element um die Höhe des Hintergrundbildes nach unten verschieben: */
p {
  position: relative;
  top: 525px; /* = Höhe des Hintergrundbildes */
  width: 100%;
  min-width: 700px;
  text-align: center;
}

/* Farbige Randmarkierungen entfernen: */
p a,
p a img {
  text-decoration: none;
  outline: none;
  border: 0;
}

/* Bildwechsel im HOVER-Zustand: */
p a img.normal {
  display: inline;
}
p a:hover img.normal,
p a:active img.normal,
p a:focus img.normal,
p a img.hover {
  display: none;
}
p a:hover img.hover,
p a:active img.hover,
p a:focus img.hover {
  display: inline;
}
Übrigens sollte man die Dokumenttypdeklaration nicht vergessen, damit das Dokument auch im Standardmodus angezeigt wird.
 
Zuletzt bearbeitet:
Hi,
was heißt du verstehst kein Wort mehr?
Wenn dem wirklich so ist dann soltest du dir unbedingt das gesagte von Christoph zu Herzen nehmen.
Ansonsten steht doch eigentlich alles beim letzten Beitrag.

Falls du was ganz bestimmtes nicht verstehst dann erklären wir es dir bestimmt :).

Grüße
 
Hier mal eine Alternative zu Divs zentrieren.
Das Hintergrund-Bild, ist viel zu groß!
Habe die Leinwand ( ist eh nur schwarz ) auf 750 X 300 pixel dezimiert!
Alles in Container gepackt und Fertig
Der Vorteil dieser Alternative ist egal welche Auflösung es ist immer alles Zentriert******

Hier der html-Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv ="content-type" content ="text/html; charset=iso-8859-1" />
<title>Website Titel</title>
<style type="text/css">@import url(style.css);</style>
<script typ="text/javascript">
<!--
function openWin(myWin)
{
myWin = open(myWin, "displayWindow", "width=770,height=510,scrollbars=yes,resi zable=no,status=no,toolbar=no,menubar=ye s");
}
//-->
</script>
</head> 
  </head>
  <body>
  	<div class="container1">
  		&nbsp;
  	</div>
    	<div class="container2">
      	<a href="#">
        	<img class="normal" src="soundcloudbw.png" alt="" title="">
        	<img class="hover" src="soundcloud.png" alt="" title="">
      	</a>
     	 <a href="#">
        	<img class="normal" src="YouTube-icon-sw2.png" alt="" title="">
        	<img class="hover" src="YouTube-icon.png" alt="" title="">
      	</a>
    	</div>
  	</body>
</html>

und hier das css:
HTML: 
html{
	background-color : #000;
	text-align : center; 
}
body {
	background-color: #000;
	color: #fff;
        text-align: center;
}
.container1 {
	background-image: url(channels3_background.jpg);
	background-repeat: no-repeat;
        text-align: center;
	margin:30px auto 0 auto;
	height: 300px;
	width: 750px;
}
.container2 {
	text-align: center;
	margin:0 auto 0 auto;
} 
/* Farbige Randmarkierungen entfernen: */
 a img {
  text-decoration: none;
  outline: none;
  border: 0;
}
 
/* Bildwechsel im HOVER-Zustand: */
 a img.normal {
  display: inline;
}
 a:hover img.normal,
 a:active img.normal,
 a:focus img.normal,
 a img.hover {
  display: none;
}
 a:hover img.hover,
 a:active img.hover,
 a:focus img.hover {
  display: inline;
}
Darf alles frei übernommen werden!
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück