Beiträge von djheke

djheke

Das bekommst du mit einer verschachtelten Liste hin.Der Rest ist CSS.

djheke

Auf das LI-Element float:left anwenden.

djheke

Vielleicht ist das hier das falsche Forum. Oder beschäftige dich mal mit JS.

djheke

Ich hab mir mal alles runtergeladen und bei mir funktionier'ts auch im FF. Aber ich glaube du möchtest eine Navigation. Die kannst du auch ohne JS umsetzen. Aber vor Allem ohne Tabelle.
Guck mal hier http://www.gipspferd.de/css/anleitung/a16/a16.php#about

djheke

Ich sehe gerade, dass du die Tags "</head><body>" vergessen hast.

djheke

Ja, leider ist deine vorgestellte Version invalide. Bitte halte dich an die HTML-Syntax.
calc() funktioniert nicht in älteren Browsern. Es gibt aber eine Alternative mit inneren Elementen(div). Bitte lerne erst die Grundlagen, bevor du weiter arbeitest.

djheke

Hier mal eine aufgeräumte Version.

HTML

<!DOCTYPE HTML> 
 
<html> 
<head>
<title>Testseite</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<style>  
* {
 margin:0;
 padding:0;
 box-sizing:border-box;
 list-style:none;
 text-decoration:none;
}


header  {
 padding:20px;
 background:#ff0;
 text-align:right;
}


nav {
 background:#ada;
 float:left;
 width:100%;
}


nav li {
 float:left;
}


nav a {
 display:block;
 padding:10px;
 margin-right:5px;
 background:#ede;
 color:#000;
}


#section1 p {
 display:inline-block;
 margin-right:50px;
 padding:10px;
}
form {
 width:80%;
 margin:10px auto;
 font-size:.75em;
}


.spalte {
 margin:30px;
 float:left;
 width:calc(50% - 2*30px);
 border:none;
} 


form #text {
 clear:both;
 float:left;
 margin-left:30px;
 margin-bottom:20px;
 border:none;
}


form textarea {
 width:100%;
}


form p , form label {
 padding:10px 0;
}


form p input , form p select {
 float:right;
}


form legend {
 font-weight:bold;
}


footer {
 clear:both;
 padding:10px;
 margin-top:20px;
 background:#ede;
} 
</style> 
</head> 
 
<body> 
<header> 
<h1> HHRd | Fac </h1>
</header>     
 
<nav>
<ul>     
<li><a href="">Home</a></li>     
<li><a href="">Create</a></li> 
<li><a href="">Change</a></li> 
<li><a href="">Delete</a></li> 
<li><a href="">Logout</a></li>     
</ul> 
</nav> 
 
<div id="section1"> 
<p>  Company Nr: </p> 
<p>  User : </p>     
</div> 
 
 
<form action="action_page.php" method="POST"> 
<fieldset class="spalte">
<legend> Create Customer</legend> 
<p><label for="name"> Name:</label><input type="text" id="name" name="cstrm_1_Name" PLACEHOLDER="" REQUIRED></p> 
<p><label for="typeof">Type of Company(SA/GmbH):</label> <input id="typeof" type="text" name="cstrm_1_Gesellschaftsart" PLACEHOLDER="" REQUIRED></p> 
<p><label for="address">Address:</label><input type="text" id="address" name="cstrm_1_Adresse" PLACEHOLDER="address" REQUIRED></p> 
<p><label for="postcode">PostCode:</label><input type="text" id="postcode" name="cstrm_1_Postleitzahl" PLACEHOLDER="" REQUIRED></p> 
<p><label for="town">Town:</label><input type="text" id="town" name="cstrm_1_Ort" PLACEHOLDER="" REQUIRED><br> 
<p><label for="country">Country:</label> 
<SELECT id="country"> 
 <OPTION Value="Luxembourg">Luxembourg</OPTION> 
 <OPTION Value="Deutschland">Deutschland</OPTION> 
 <OPTION Value="France">France</OPTION> 
 <OPTION Value="UnitedKingdom">UnitedKingdom</OPTION> 
 <OPTION Value="Schweiz">Schweiz</OPTION> 
</SELECT>
</p> 
<p><label for="vat"> VAT-Nr:</label><input type="text" id="vat" name="cstrm_1_MwStNummer" PLACEHOLDER="" REQUIRED></p> 
<p><label for="reg"> Registration Nr:</label><input type="text" id="reg" name="cstrm_1_Handelsgericht_Nr" PLACEHOLDER="" REQUIRED></p> 
<p><label for="phone">Phone (incl.pre-select):</label><input type="text" id="phone" name="Telefon" PLACEHOLDER="" REQUIRED></p> 
<p><label for="fax"> Fax (inkl.pre-select):</label><input type="text" id="fax" name="cstrm_1_Fax" PLACEHOLDER="" REQUIRED></p>
</fieldset>


<fieldset class="spalte">
<legend>Banking</legend> 
<p>
<label for="mailing">Mailing language :</label> 
<SELECT id="mailing"> 
 <OPTION Value="Luxembourg">Deutsch</OPTION> 
 <OPTION Value="Deutschland">Französisch</OPTION> 
 <OPTION Value="France">Englisch</OPTION> 
</SELECT>
</p> 
<p><label for="office">Office openhours:</label><input type="text" id="office" name="cstrm_1_Bürozeiten" value=""></p> 
<p><label for="person1">eMailContact person1:</label><input type="email" id="person1" name="cstrm_1_Ansprechpartner1" PLACEHOLDER="" REQUIRED></p> 
<p><label for="person2">eMailContact person2:</label><input type="email" id="person2" name="cstrm_1_Ansprechpartner2" value=""></p> 
<p><label for="dep">eMailContact finance dep:</label><input type="email" id="dep" name="cstrm_1_Buchhaltung" value=""></p> 
<p><label for="bank">Bankreference/SWIFT:</label><input type="text" id="bank" name="cstrm_1_Bankreferenz_SWIFT" PLACEHOLDER="" REQUIRED></p> 
<p><label for="iban">IBAN:</label><input type="text" id="iban" name="cstrm_1_IBAN" PLACEHOLDER="" REQUIRED></p> 
<p><label for="sepa">SEPA Mandat:</label><input type="text" id="sepa" name="cstrm_1_SEPA_Mandate" PLACEHOLDER="" REQUIRED></p> 
</fieldset>


<fieldset id="text">
<legend>History</legend> 
<p><textarea id="history" rows="10" cols="100" name="cstrm_1_History_Text" ></textarea></p>
<p><input type="submit" value="Speichern"></p>
</fieldset> 


</form> 
 
 
<footer>Footer</footer> 
 
 
</body> 
</html>

Alles anzeigen

Kopieren und Probieren.

djheke

Das Problem dürfte wohl an das mangelhafte HTML liegen.

djheke

Mal so als Beispiel.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<title>Hover</title>
<meta charset="UTF-8">
<style>


* {
 margin:0;
 padding:0;
 list-style:none;
 border:none;
 outline:none;
 box-sizing:border-box;
}
header {
 position:fixed;
 height:70px;
 width:80%;
 top:0;
 left:0;
 right:0;
 margin:auto;
 background: #aaa;
}


nav ul {
 position:relative;
 float:left;
 width:100%;
}


nav li {
 float: left;   
 width:25%;
}


nav li a {
 background:url(deinbild.jpg) no-repeat center #ada;
 height:70px;
 display: block;
 text-align:center;
}


#text_middle_eckig {
 background:#ada;
 width:80%;
 margin:100px auto 0 auto;
}
</style>
</head>
<body>
 <header>   
    <nav>
    <ul>
        <li><a class="home" href="index.html">Home</a></li>
        <li><a class="about" href="about.html">Ich</a></li>
        <li><a class="shop" href="shop.html">Shop</a></li>
        <li><a class="blog" href="blog.html">Blog</a></li>
    </ul>
    </nav>      
 </header>                     
<div id="text_middle_eckig">Lorem ipsum dolor sit amet, .....
</div>
</body>
</html>

Alles anzeigen

djheke

Guck mal hier ob du das gebrauchen kannst. Sind 2 Teile
http://www.gipspferd.de/css/anleitung/a20/a20.php

djheke

Zitat

<div class="fb-like" data-href="http://www.trockenbaukomplett.de" data-width="20" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>

Was erwartest du von einem leeren Element. Ich glaube da fehlt noch etwas JavaScript. Der dein Button generiert.

djheke

Upps! Mach mal aus <head></head> innerhalb von body ein <header></header> und im css auch.

djheke

PHP

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Teccistopia</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="js/snow.js"></script>


<style>
* {
 margin:0;
 padding:0;
}


html,body {
 height:100%;
}


html {
 background:#333;
}


body {
 width:90%;
 margin:0 auto;
 position:relative;
 background:#000;
}


header {
 overflow:hidden;
 }


#logo {
 float:left;
}
nav {
 text-align:right;
}
nav a {
 color:#F50; 
 display:-inline-block; 
 font-size:22px; 
 padding:5px 5px 5px 0;
 font-weight:bold;
 text-decoration:none;
 vertical-align:top;
 
}


#footer {
 position:absolute;
 bottom:10px;
 padding:10px 0;
 background-color:#00a; 
 color:#F50; 
 width:100%;
 font-weight:bold;
} 


#footer a , #footer p {
 float:left; 
  padding:5px;
 font-weight:bold;
 font-size:75%;
 text-decoration:none;
 vertical-align:top; 
 color:#F50; 
}


#footer p { 
 margin-right:20px;
}
#footer :nth-child(4) { 
 margin-left:40px; 
}
</style>
</head>
<body>
<header>
<div id="logo"><a href="index.php?page=home" class="logo"><img src="" width="300" height="60"alt=""></a></div>
<nav>
<a href="#">Startseite |</a>
<a href="#">Server |</a>
<a href="#">Team |</a>
<a href="#">Finanzierung |</a>
<a href="/forum/">Projekte</a>
</nav>
</header>
<div id="includearea" >
<?php 
?>
</div>
<div id="footer">
<p>Copyright (C) 2014-2015 Domenik Landgraf. All rights reserved.</p>
<a href="#">Impressum |</a>
<a href="#">Datenschutzerklärung</a>
<a href="#">Partner |</a>
<a href="#">Sponsoren</a>
</div>


</body>
</html>

Alles anzeigen

djheke

Wer hat dir denn den Trick mit der Navigation gezeigt? Also, eine UL-Liste ist hier besser und verzichte auf absolute Positionierungen. Egal.
Du musst im Selektorblock #menu noch ein { position:relative; ... } notieren. Z-Index-Angabenkannst du dir schenken.

djheke

Zitat von willytyp

Natürlich habe ich mich auch mit Fachliteratur eingedeckt.

LG und ein schönes Weihnachtsfest
willytyp

Dann solltest du irgendwann auf das Listenelement UL stoßen.

HTML

<!doctype html>
<html>
<head>
<title>Navigation</title>
<meta charset="UTF-8">
<style>
* {
 margin:0;
 padding:0;
 text-decoration:none;
 list-style:none;
 border:0;
}


body {
 background: #080;
}


img {
 margin:10px;
}


#navi {
 margin:10px;
 float:left;
 background:#000;
}


#navi li {
 position:relative;
 float:left;
 margin-right:2px;
 background:#ce9;
}


#navi li:last-child {
 margin:0;
}


#navi a , #navi strong {
 display:block;
 padding:5px 10px;
 color:#000;
 font-weight:bold;
 text-align:center;
}


#navi li:hover  {
 background:#9a6;
}


#navi ul {
 position:absolute;
 left:-9999em;
 top:-9999em;
 padding:10px;
 background:#9a6;
}


#navi ul li {
 float:none;
 white-space: nowrap;
 background:#ce9;
}


#navi li:hover ul {
 left:0;
 top:auto; 
 background:#9a6;
}


#navi ul a:hover {
 background:#ff9;
 color:#f00;
}


#navi strong { 
 background:#9a6;
}
</style>
</head>
<body>
    <img src="/Images/kopfzeile.jeg" width="1000" height="100" style="border: 0px;" alt="bild">
    <ul id="navi">
      <li><strong>Home</strong>
         <ul>
          <li><a href="#">Kontakte</a></li>
          <li><a href="#">Vorstand</a></li>
          <li><a href="#">Kontakt</a></li>
          <li><a href="#">Anfahrt</a></li>
         </ul>
      </li>
      <li><a href="#">Aktuelles</a></li>
      <li><a href="#">Wissenswertes</a>
         <ul>
           <li><a href="#">Freie Parzellen</a></li>
           <li><a href="#">Der Rest einer Tanne</a></li>
           <li><a href="#">Sommerfest 2014 l</a></li>
           <li><a href="#">Sommerfest 2014 ll</a></li>
           <li><a href="#">Sommerfest 2014 lll</a></li>
           <li><a href="#">Besucherliste</a></li>
           <li><a href="#">Chronik</a></li>
         </ul>
      </li>
     <li><a href="#">Vereinshaus</a></li>
     <li><a href="#">Intern</a></li>
     <li><a href="#">Sponsoren</a></li>
     <li><a href="#">Impressum</a></li>
   </ul><!-- ende navi-->
</body>
</html>

Alles anzeigen

djheke

Übrigens habe ich gerade in ca 5 Minuten deine Seite Fehlerfrei bekommen. Und ja prüfe deine ebenfalls fragwürdigen CSS-Anweisungen. So klappt es auch mit dein Spoiler. Denn er geht auf, nur ist er genau 0 Pixel hoch.

djheke

Ja, lerne lieber HTML und mach alles neu.Ist einfacher.
HTML5 Vorlage

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Wölfe der Nacht - Index</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="/style.css" media="screen"> 
</head>
<body>
</body>
</html>

Alles anzeigen

djheke

Vielleicht bin ich ja blind, aber wi ist auf deiner Datei ein iFrame?

djheke

HTML

<!doctype html>
<html>
<head>
<title>Lenovo</title>
<meta charset="UTF-8">
<style>
.beitrag { 
 border:1px solid #000;
 float:left;
 width:100%;
}


.beitrag img { 
 float:right;
}
</style>
</head>
<body>
 <div class="beitrag">
  <img src="bild2.jpg" width="700">
    <p>Lorem ipsum... </p>
  </div>
</body>
</html>

Alles anzeigen

djheke

Versuch's mal so

HTML

<!doctype html>
<html>
<head>
<title>Formular</title>
<meta charset="UTF-8">
<style>


* {
 margin:0;
 padding:0;
}


form {
 background:#eee;
 border:1px solid #999;
 margin:10px;
 padding:10px;
 float:left;
}


fieldset {
 padding:10px 10px 20px 10px;
}


input , label , select {
 padding:1px;
 border:1px solid #999;
 font:caption;
 display:inline-block;
 vertical-align:bottom;
}


label {
 border:none;
 vertical-align:top;
}
</style>
</head>


<body id="inhalt">
<form action="">
<fieldset>
    <legend>Witchcraft Alchemy Calculator</legend>
  <label for="vorname">Select Charm:</label>
    <select name="top5" size="1">
      <option>Speed Charm</option>
    </select>


 <input type="button" name="Button 1" value="Quantity">
 <input type="button" name="Button 2" value="Calc">
</fieldset>
</form>




</body>
</html>

Alles anzeigen

Beiträge von djheke

2 Listenelemente im Li-tag neben- der Rest untereinander

Horizontales Dropdownmenü, Display=Inline und Float funktioniert nicht

Variable auslesen

erster Button erscheint erst nach mouseover

erster Button erscheint erst nach mouseover

HTML/ Browser Problem

HTML/ Browser Problem

HTML/ Browser Problem

Hilfe bein Menü

Menü mit Untermenüs klappt nicht

Like-Button einbinden

Wie passe ich meine Seite an?

Wie passe ich meine Seite an?

z-Index

Problem beim verlinken

Spoiler-Inhalt wird zwischen anderen Div-Behältern nicht angezeigt

Spoiler-Inhalt wird zwischen anderen Div-Behältern nicht angezeigt

ifram wird falsch dargestellt

Fliestext um ein Bild herumfliessen lassen

Formular anpassen