Delphi-PRAXiS

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 04:00 Uhr.

Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024-2025 by Thomas Breitkreuz