+ Antworten
Ergebnis 1 bis 7 von 7

CSS / HTML

Eine Diskussion über CSS / HTML im Forum Technik Ecke. Teil des Off Topic-Bereichs; Hallo, habe folgendes Problem. Habe einen div container mit der Größe 1000. Dort drin befindet sich noch ein Div container ...

  1. #1
    Oberfeldwebel
    Avatar von OG Loc
    Registriert seit
    21.04.2007
    Ort
    Düsseldorf
    Alter
    24
    Beiträge
    2.585
    Name
    Theo

    CSS / HTML

    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?! >.<
    Alles mitnehm', viel zu wenig Kraft haben
    Doch vor dem Tod meinen Wunschzettel abhaken
    Und ohne Wünsche sterben, scheiß auf fünfzig werden
    Ist mir egal, wann, Hauptsache, glücklich sterben

  2. #2
    Oberstabsfeldwebel
    Avatar von .deviant
    Registriert seit
    01.06.2004
    Alter
    29
    Beiträge
    5.663
    Weil div-Container Block-Level-Elemente sind, die immer einen Zeilenumbruch mit sich bringen. Gib den beiden Schlingeln mal "float: left;".
    The poetry that comes from the squarin' off between
    And the circling is worth it, finding beauty in the dissonance

  3. #3
    Oberfeldwebel
    Avatar von OG Loc
    Registriert seit
    21.04.2007
    Ort
    Düsseldorf
    Alter
    24
    Beiträge
    2.585
    Name
    Theo
    Ah, danke perfekt. Kannst du vllt. PHP auch noch? Dann hätte ich noch ne Frage.

    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 >.<
    Alles mitnehm', viel zu wenig Kraft haben
    Doch vor dem Tod meinen Wunschzettel abhaken
    Und ohne Wünsche sterben, scheiß auf fünfzig werden
    Ist mir egal, wann, Hauptsache, glücklich sterben

  4. #4
    ist wieder da :D
    Avatar von $martey Delux
    Registriert seit
    18.12.2005
    Beiträge
    7.689
    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






    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;
    }
    niesen ist der orgasmus des kleinen mannes

  5. #5
    ♥ Yoshi ♥
    Avatar von Toad
    Registriert seit
    17.04.2009
    Ort
    Pandora
    Alter
    24
    Beiträge
    9.979
    Name
    Glutexo
    Clans
    MCG
    Zitat Zitat von $martey Delux Beitrag anzeigen

    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 {
      position: absolute;
      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.


  6. #6
    ist wieder da :D
    Avatar von $martey Delux
    Registriert seit
    18.12.2005
    Beiträge
    7.689
    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?
    niesen ist der orgasmus des kleinen mannes

  7. #7
    ♥ Yoshi ♥
    Avatar von Toad
    Registriert seit
    17.04.2009
    Ort
    Pandora
    Alter
    24
    Beiträge
    9.979
    Name
    Glutexo
    Clans
    MCG
    Code:
    .submenu a { 
      position: relative; 
      top: 28px;
      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.


+ Antworten

Ähnliche Themen

  1. Loginscreen mit Photoshop - jetzt in HTML und CSS
    Von OG Loc im Forum Technik Ecke
    Antworten: 5
    Letzter Beitrag: 05.04.2011, 15:56
  2. Bestes HTML Prog
    Von FLoorfiLLa im Forum Technik Ecke
    Antworten: 61
    Letzter Beitrag: 26.06.2002, 17:18
  3. HTML & Photoshop Tutorials und Tricks
    Von TraXX im Forum Technik Ecke
    Antworten: 10
    Letzter Beitrag: 07.02.2002, 16:55
  4. 100 Goldene Regeln für schlechtes HTML
    Von TraXX im Forum Technik Ecke
    Antworten: 0
    Letzter Beitrag: 10.11.2001, 19:00
  5. Grafik & HTML Anwendungen
    Von TraXX im Forum Technik Ecke
    Antworten: 0
    Letzter Beitrag: 07.11.2001, 23:27

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •