Delphi-PRAXiS - CSS Container

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - CSS Container (https://www.delphipraxis.net/127228-css-container.html)

Christian18

9. Jan 2009 14:47

CSS Container

Hallo,

ich möchte mir eine kleine Internetseite bauen. Kann man mit CSS einen Container frei positionieren und wenn ich dort mit der Maus drüberfahre, dass dann ein neuer Container direkt daneben auf geht? Geht sowas? In den Containern würde ich dann gerne beliebig mit HTML Tax arbeiten. Kann mir jemand helfen?

LG Chris

fkerber

9. Jan 2009 14:49

Re: CSS Container

Hi!

Ja, sowas sollte gehen. Positionieren kannst du absolut oder relativ. Zum Ausblenden/Anzeigen eines anderen Containers gibt es "visible".

Infos solltest du unter

http://de.selfhtml.org/css/index.htm finden.

Ciao, Frederic

Christian18

9. Jan 2009 14:59

Re: CSS Container

Hallo,

vielen dank für die seite. die ist echt super. wie kann ich prüfen, ob ich mit der mouse auf einen container bin oder nicht?

lg chris

fkerber

9. Jan 2009 15:05

Re: CSS Container

Hi!

hover ist das Stichwort

Auch wenn das Beispiel jetzt etwas einfallslos erscheint, zeigt es hoffentlich, was ich meine.
menu ist dabei ein div (also es gibt ein div, dass als class menu hat), insgesamt zeigt der Code, wie man Links, je nach Situation anders darstellen kann.

Code:

			.menu a:link {color:black;text-decoration:none;}

.menu a:visited {color:black;text-decoration:none;}

.menu a:active {color:black;text-decoration:none;}

.menu a:hover {color:black;text-decoration:none;}

Ciao, Frederic

jfheins

9. Jan 2009 16:03

Re: CSS Container

Das geht in halbwegs aktuellen Browsern aucvh direkt mit divs.

Beispiel:

Code:

			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">

#first

{

  background: #000080;

  padding: 5px;

  height: 250px;

  width: 350px;

}

#first:hover #second

{

  visibility: visible;

}

#second

{

  background: #008000;

  padding: 5px;

  visibility:hidden;

  height: 200px;

  width: 250px;

}

</style>

</head>

<body>

  <div id="first">Hallo<div id="second">Welt</div></div>

</body>

</html>

Statt visibility kannst du natürlich auch display nehmen, dann wird vorher kein Platz reserviert aber u.U. springt das Layout hin und her ...

Alle Zeitangaben in WEZ +1. Es ist jetzt 22:34 Uhr.