• Wir werden in den nächsten Tagen verschiedene Wartungsoperationen und Optimierungen am Server durchführen. Es wird zu mehreren Ausfällen kommen, die teilweise auch mehrere Stunden umfassen können.

gelöst CSS / HTML

Joined
Apr 21, 2007
Messages
2,585
Points
0
Hallo,

habe folgendes Problem.

Habe einen div container mit der Größe 1000. Dort drin befindet sich noch ein Div container mit der größe 800px breit und 400px hoch. Jetzt möcht ich daneben einen Div-Container anzeigen lassen mit 100px breit und 400 px hoch. Allerdings macht er ihn nicht daneben, sondern darunter... weiß jemand vllt wieso das so ist?! >.<
 
Weil div-Container Block-Level-Elemente sind, die immer einen Zeilenumbruch mit sich bringen. Gib den beiden Schlingeln mal "float: left;".
 
Ah, danke perfekt. Kannst du vllt. PHP auch noch? Dann hätte ich noch ne Frage. :D

Hab jetzt meine Userlist. Hab in der Datenbank ne neue Spalte (status).

WÄre das dann so nach dem Login:

PHP
Code:
if(isset($_POST['submit'])){
$sql = mysql_query("UPDATE Benutzer SET status = 1 WHERE username = $username");   
}

<div id="userlist">
<b><u>Userlist</u></b>
<br>

<?

$abfrage = mysql_query("SELECT username FROM benutzer");
while($row = mysql_fetch_array($abfrage))
{
    echo $row['username'];
}

</div>


Kann es leider gerad noch nicht testen. Hab mein Xampp nämlich noch nicht >.<
 
na da schon ein html und css topic offen ist mache ich mal weiter ;)
und zwar möchte ich gern eine website für unseren studentischen verein erstellen nachdem ich eine woche lang nen crashkurs html und css mit dem editor kompozer hatte...

ich möchte gerne auf der seite ein horizontales aufklappmenü einbauen - soweit so gut - das mit dem aufklappen beim hovern klappt, aber der menübalken war im endeffekt kürzer als die restlichen div-bereiche. um das problem irgendwie in den griff zu bekommen habe ich das menü so gestaltet, dass es dicker eingerahmt ist als der rest der seite, sodass es symmetrisch aussieht. vielleicht weiß da jemand ne bessere lösung.

ein größeres problem ist folgendes: statt den main-bereich (der gelbe bereich) unterhalb des menübereiches zu überdecken dehnen die menüunterpunkte das menü (orangener bereich) aus --> siehe dazu die angehängten bilder
kann mir da jemand nen rat geben was ich verändern muss?
vielen dank bereits im voraus


mpoo3mim.png


yljti4ta.png


hier noch die html-quelltext und css-code:
Code:
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>SKH Mainz e.V.</title>
  <link rel="stylesheet" href="skh.css" type="text/css">
</head>
<body>
<div id="aussen">
<div id="header">heaader
</div>
<!--end header -->
<div id="menu">
<ul>
<!--start menue -->
  <li class="topmenu"><a href="#">Home</a></li>
  <li class="topmenu"><a href="#">Der SKH</a>
    <ul>
<!--start submenue skh -->
      <li class="submenu"><a href="#">Tätigkeit des SKH</a> </li>
      <li class="submenu"><a href="#">Mitgliedschaft</a> </li>
      <li class="submenu"><a href="#">Der Vorstand</a> </li>
      <li class="submenu"><a href="#">Die Vereinssatzung</a> </li>
      <li class="submenu"><a href="#">Termine</a> </li>
    </ul>
  </li>
<!--end submenue skh -->
  <li class="topmenu"><a href="#">Die Referate</a>
    <ul>
<!--start submenue referate -->
      <li class="submenu"><a href="#">Kulturreferat</a> </li>
      <li class="submenu"><a href="#">Männerreferat</a> </li>
      <li class="submenu"><a href="#">Öffentlichkeitsreferat</a> </li>
      <li class="submenu"><a href="#">Partyreferat</a> </li>
      <li class="submenu"><a href="#">Politisches Referat</a> </li>
      <li class="submenu"><a href="#">Verkehrsreferat</a> </li>
    </ul>
  </li>
<!--end submenue referate -->
  <li class="topmenu"><a href="#">Aktuelles</a>
    <ul>
<!--start submenue aktuelles -->
      <li class="submenu"><a href="#">Hochschulpolitik</a> </li>
      <li class="submenu"><a href="#">Veranstaltungen</a> </li>
      <li class="submenu"><a href="#">Parties</a> </li>
    </ul>
  </li>
<!--end submenue aktuelles -->
  <li class="topmenu"><a href="#">Studentenleben</a>
    <ul>
<!--start submenue studentenleben -->
      <li class="submenu"><a href="#">Mitmachen</a> </li>
      <li class="submenu"><a href="#">Kneipenguide</a> </li>
      <li class="submenu"><a href="#">Links</a> </li>
    </ul>
  </li>
<!--end submenue studentenleben -->
  <li class="topmenu"><a href="#">Fotos</a>
    <ul>
<!--start submenue fotos -->
      <li class="submenu"><a href="#">Veranstaltungen</a> </li>
      <li class="submenu"><a href="#">Parties</a> </li>
    </ul>
  </li>
<!--end submenue fotos -->
  <li class="topmenu"><a href="#">Feedback</a>
    <ul>
<!--start submenue feedback -->
      <li class="submenu"><a href="#">Kontakt</a> </li>
      <li class="submenu"><a href="#">Gästebuch</a> </li>
    </ul>
  </li>
<!--end submenue feedback -->
</ul>
</div>
<!--end menue -->
<div id="main">main
</div>
<!--end main -->
<div id="footer">footer
</div>
<!--end footer --></div>
<!--end aussen -->
</body>
</html>

Code:
#aussen {  margin-right: auto;
  margin-left: auto;
  width: 1000px;
}
#header {
  border: 1px solid white;
  display: block;
  width: 98%;
  margin-left: 1%;
  margin-top: 5%;
  background-color: black;
  float: left;
  margin-right: 1%;
}
#menu {
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-right: 1px solid white;
  background-color: #ff9900;
  width: 98%;
  margin-right: 1%;
  margin-left: 1%;
  display: block;
  float: left;
}
#main {
  border: 1px solid white;
  overflow: hidden;
  background-color: yellow;
  width: 98%;
  display: block;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  visibility: visible;
}
#footer {
  border: 1px solid white;
  background-color: black;
  width: 98%;
  margin-right: 1%;
  margin-left: 1%;
  float: left;
  display: block;
}
body {
  background-color: #ffcc00;
}
#menu ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  list-style-image: none;
}
#menu li.topmenu {
  float: left;
}
.topmenu a {
  border-style: solid;
  border-color: white;
  border-width: 1px 1px 2px;
  float: left;
  width: 128px;
  text-align: center;
  font-size: 16px;
  visibility: visible;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
}
.topmenu ul {
  display: none;
}
.topmenu a, .submenu a {
  margin: 0;
  padding: 3px 5px;
  border-top-style: none;
  border-collapse: collapse;
  color: white;
  font-weight: bold;
  text-decoration: none;
  background-color: #ff6600;
  font-family: Arial,Helvetica,sans-serif;
}
.submenu a {
  border-left: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  font-size: 12px;
  width: 128px;
}
#menu a:hover, .topmenu.on a {
  color: #4c4c4c;
  background-color: #ff9900 ! important;
}
.topmenu:hover ul {
  display: block;
}
 
Code:
#aussen {  margin-right: auto;
  margin-left: auto;
  width: 1000px;
}
#header {
  border: 1px solid white;
  display: block;
  width: 98%;
  margin-left: 1%;
  margin-top: 5%;
  background-color: black;
  float: left;
  margin-right: 1%;
}
#menu {
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-right: 1px solid white;
  background-color: #ff9900;
  width: 98%;
  margin-right: 1%;
  margin-left: 1%;
  display: block;
  float: left;
}
#main {
  border: 1px solid white;
  overflow: hidden;
  background-color: yellow;
  width: 98%;
  display: block;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  visibility: visible;
}
#footer {
  border: 1px solid white;
  background-color: black;
  width: 98%;
  margin-right: 1%;
  margin-left: 1%;
  float: left;
  display: block;
}
body {
  background-color: #ffcc00;
}
#menu ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  list-style-image: none;
}
#menu li.topmenu {
  float: left;
}
.topmenu a {
  border-style: solid;
  border-color: white;
  border-width: 1px 1px 2px;
  float: left;
  width: 128px;
  text-align: center;
  font-size: 16px;
  visibility: visible;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
}
.topmenu ul {
  [COLOR=#ff0000]position: absolute;[/COLOR]
  display: none;
}
.topmenu a, .submenu a {
  margin: 0;
  padding: 3px 5px;
  border-top-style: none;
  border-collapse: collapse;
  color: white;
  font-weight: bold;
  text-decoration: none;
  background-color: #ff6600;
  font-family: Arial,Helvetica,sans-serif;
}
.submenu a {
  border-left: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  font-size: 12px;
  width: 128px;
}
#menu a:hover, .topmenu.on a {
  color: #4c4c4c;
  background-color: #ff9900 ! important;
}
.topmenu:hover ul {
  display: block;
}

Ich denke so müsste es gehen, kann aber sein, dass du noch mit top anpassen musst.
 
danke für die antwort :)
es klappt nun, dass das menü den mainbereich überdeckt, allerdings rutschen die untermenüpunkte beim hovern noch über den jeweiligen menüpunkt zu dem sie gehören... bezog sich die aussage mit dem ggf. top anpassen darauf?
 
Code:
.submenu a { 
[COLOR=#ff0000]  position: relative;[/COLOR][COLOR=#ff0000] 
  top: 28px;[/COLOR]
  border-left: 1px solid white; 
  border-right: 1px solid white;
  border-bottom: 1px solid white; 
  font-size: 12px; width: 128px;
}

Ich hab es jetzt kurz probiert und denke so wünschst du dir es.
 
Back
Top Bottom