Beiträge von rodaN

HeyHo liebe Community

Ich habe ein Formular erstellt und möchte das die Labels und Buttons usw. alle gleich groß sind bzw. die selbe Höhe haben.

Momentan sieht es so aus: Bild

Wie man sieht, ist das zweite Feld "Quantity" höher als das erste.

Ich möchte aber, dass alle die selbe Höhe haben und ich die Länge variieren kann.

Gelöst habe ich es momentan so:

.wc-alchemy fieldset {
  padding: 1em;
  width: 30em;
  border: 0.1em solid #000;
}




.wc-alchemy legend {
  font-size: 1.5em;
}




.wc-alchemy label {
  width: 5em;
  text-align: right;
  margin-right: 1em;
}




.wc-alchemy input {
  font-size: 1em;
  width: 5em;
  height: 26px;
  margin-right: 0.5em;
  border: 1px solid silver;
  box-sizing: border-box;
  padding: 0;
}




.wc-alchemy input[type=submit] {
  height: 26px;
}




.wc-alchemy select {
  width: 12em;
  height: 26px;
  margin-right: 0.5em;
}

Das hat das Problem mit der selben Höhe behoben aber nun folgendes:

Wie ich gelesen habe, ist es schwer die "option-list" mit CSS alleine zu stylen? Nun sind zwar alle auf der gleichen Höhe (denke ich mal [Blockierte Grafik: http://www.php.de/images/smilies/icon_biggrin.gif]) aber die zwei Felder sind nicht mit der "option-list" bündig und sind ein wenig Höher.

Wie löst man dieses Problem?

HeyHo,

ich habe ein Paar Fragen zu meiner Navbar.

Erst einmal mein Code: (Jede Seite ist unter dem Body-Tag mit einem wrapper versehen)

nav.html

<nav id="nav-top">
    <ul>
        <li><a href="index.php">News</a></li>
        <li><a href="tools.php">Tools</a></li>
            <ul>
                <li><a href="calc.php">Calculator</a></li>
            </ul>
    </ul>
</nav>

CSS

* {
  margin:   0;
  padding:  0;
}




#wrapper {
  width:    980px;
  position: relative;
  margin:   0 auto;
}




header, nav, footer, section {
  display: block;
}




/* NAV Top */




#nav-top {
  font-family: Bitter, serif;
  background: #00421c;
  height: 40px;
  line-height: 40px;
  border-bottom: solid 1px #003215;
  color: #FFF;
  font-size: 1.3em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  text-shadow: 0px 1px 2px rgba(0,0,0,0.6);
}




#nav-top ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}




#nav-top ul ul {
  display: none;
}




#nav-top ul li {
  position: relative;
  height: 40px;
  float: left;
  border-right: 2px solid #003215;
  width: 120px;
}




#nav-top ul li a {
  color: #FFF;
  text-decoration: none;
  display: block;
}




#nav-top li:hover {
  background: #003215;
}

Screen (display:none auskommentiert zum Verständnis): Bild

#1
Die einzelnen Nav-Punkte haben eine feste Breite von 120px. Wie bekomme ich es nun hin, dass wenn der Text länger ist (siehe Bild), sich der Text automatisch anpasst?

#2
Der Punkt "Calculator" soll ein Unterpunkt (drop-down Menü) von "Tools" sein.

Dazu habe ich über "#nav-top ul ul" das "display: none" gesetzt.

Aber egal wo ich nun ein "hover" setzte und den "display: block", es wird mir nichts angezeigt.

Wie bekomme ich nun ein drop-down Menü hin, welches sich direkt unter dem Hauptpunkt befindet und gleichgroß ist sowie das sich der Text anpasst (soll nicht aus den 120px herausragen)?

#3
Der Hauptpunkt "Tools" selber soll nicht anklickbar sein bzw. keine Funktion haben. Ist nicht anklickbar möglich, wenn ja wie?
Keine Funktion schätze ich mal einfach mit href="#" ?

Guten Abend,

ich bin momentan dabei HTML und CSS zu lernen. Dabei stehe ich nun vor einer Designfrage die ich nicht beantworten kann.

Ich möchte aus meiner Content Box

dieses hier machen:

HTML (umschlossen vom wrapper):

<section><h1>Willkommen!</h1>
<p>Hier entseht meine erste HTML-Seite zum lernen.</p></section>

CSS:

section {
  margin: 0px 300px 48px 300px;
  background-color: orange;
  height: 600px;
  width: 800px;
  border: 1px black solid;
  border-radius: 40px;
  box-shadow: 12px 12px 10px 0 #808080;
}




section h1 {
  padding: 30px 0px 15px 35px;
}




section p {
  padding: 0px 0px 0px 35px;
}

Ist dies mit CSS zu lösen? Muss eine eigene Grafik für die Box erstellt werden? Wenn ja, wie füge ich diese zusammen?

Mit freundlichen Grüßen
rodaN