Verwandte Themen

Frage
von Sebopeng
24.03.2018, 12:33
Abstand zwischen zwei Tabellen über HTML/CSS?

table.border1 {

  width: 100%; height: 50%;

  border-collapse: collapse;

  text-align: center;

  vertical-align: middle;

  border: 2px solid #000000; }

caption {

  letter-spacing: 2em;

  border: 1px solid #000000;

  background-color: #008080;

  color: #FFFF00;

  font-size: xx-large; }

th, td {

  font-family: Arial;

  padding: 2px;}

th {

  background-color: #ccc;

  border: 1px solid #000000; }

th.WT {

  color: #3FFFFF; }

th.Woche {

 width: 3%; }

th.Block {

 width: 3%; }

th.Zeiten {

 width: 4%; }

td.Woche {

  font-size: 32pt;

  background-color: #FFFF00;

  border-bottom: 2px solid #000000;

  border-right: 1px solid #000000; }

td.Block {

  background-color: #ffff88;

  font-size: 16pt;

  border-bottom: 2px solid #000000;

  border-right: 1px solid #000000; }

td.AZeit {

  background-color: #ffffcc;

  border-bottom: 1px dotted #000000; }

td.EZeit {

  background-color: #ffffcc;

  border-bottom: 2px solid #000000; }

td.Fach {

  border-top: 2px solid #000000;

  border-left: 2px solid #000000;

  border-right: 2px solid #000000;

  border-bottom: 1px dashed #000000;

  background-color: #ffffe8;

  color: #800000;

  font-weight: bold;

  width: 16%; }

td.Lehrer {

  width: 10%;

  border-left: 2px solid #000000;

  border-bottom: 2px solid #000000;

  border-right: 1px dashed #000000;

  background-color: #ffffe8;

  font-size: 10pt; }

td.Raum {

  width: 6%;

  border-bottom: 2px solid #000000;

  border-right: 2px solid #000000;

  background-color: #ffffe8;

  font-size: 12pt; }

td.unten {

  border-bottom: 5px solid #000000;

}

td.Info {

  background-color: #abcdef;

}

td.Info1{

background-color: #FFFF00;

}

td.Info2{

  background-color: #008080;

}

td.Info3{

  background-color: #CCC;

}

td.Info4{

  background-color: #00FFFF;

}

td.Info5{

  background-color: #F5B3FF;

}

td.Info6{

  background-color: #FF00FF;

}

td.Info7{

  background-color: #808000;

}

td.Info8{

 background-color: #BDEDBA;

}

td.Info9{

  background-color: #FFB300;

}

td.Info10{

  background-color: #00FF25;

}

td.Info11{

  background-color: #FF0000;

}

td.Info12{

  background-color: #B18380;

}

td.BB{

  background-color: #FFFF00;

}

td.CC{

  background-color: #008080;

}

td.DD{

   background-color: #CCC;

}

td.EE{

   background-color: #00FFFF;

}

td.FF{

 background-color: #F5B3FF;

}

td.GG{

 background-color: #FF00FF;

}

td.HH{

   background-color: #808000;

}

td.II{

    background-color: #BDEDBA;

}

td.JJ{

   background-color: #FFB300;

}

td.KK{

    background-color: #00FF25;

}

td.LL {

     background-color: #FF0000;

}

td.MM{

    background-color: #B18380;

}

table.border2{

    width: 30%; height: 30%;

   border-collapse: collapse;

  text-align: center;

  vertical-align: middle;

  border: 2px solid #000000; }

Ich möchte gerne zwischen der oberen tabell und er tabell unten(2)einen Abstand haben. Könnt ihr mir bitte schreiben wie das geht.(Die Infos in der Mitte sind nicht wichtig.)

Danke!!!!

Schule, HTML, CSS, Informatik, itg, Tabelle
2 Antworten
Frage
von DarkNightmare
23.02.2018, 13:42
Bild in einem Parallax Container etwas abschneiden?

Moin,

ich habe eine Parallax Container direkt unter die Nav Bar eingefügt. Es sieht eigentlich recht hübsch aus, auch den Effekt mag ich.

Aber leider ist das Bild etwas hoch, so dass auf der Seite nur der obere Teil des Bildes angezeigt wird.

Kann man das Bild in einem Parallax beschneiden (also etwas vom oberen Teil des Bildes entfernen), oder das Bild zentrieren? Ich würde gerne die Mitte zu beginn sehen und dann diesen scroll Effekt haben. Das Bild sieht momentan wie mittig abgeschnitten aus. Der obere Teil wird angezeigt und der Untere ist nicht vorhanden.

Falls es hilft:

 <div class="parallax-container valign-wrapper">
      <div class="section no-pad-bot">
        <div class="container">
          <div class="row center">
            <h1 class="header col s12 light">TEST</h1>
          </div>
        </div>
      </div>
      <div class="parallax"><img src="img/pic.png"></div> 
    </div>  

Style: .parallax-container {     min-height: 380px;     line-height: 0;     height: auto;     color:  white; }

.parallax-container .section {     width: 100%; }

@media only screen and (max-width : 992px) {     .parallax-container .section {         position: absolute;         top: 40%;     }     #index-banner .section {         top: 10%;     } }

Es hat keinen tieferen Sinn, es ist grade nur eine Spielerei :)

Danke im Voraus.

Computer, Internet, HTML, CSS
1 Antwort
Frage
von LiamOlek123
30.01.2018, 18:57
Warum ist da ein weißer Rand?

Hey, ich habe eine Frage zu HTML.

Ich habe bis jetzt diese Navigationleiste erarbeitet, weiß jedoch nicht wieso dort ein weißer Rand ist?

Könnt ihr mir helfen?

Das ist der HTML Code:

<nav id="nav">
<ul>
<li class="current" style="white-space: nowrap;">
<a href="">Home</a>
</li>
<li style="white-space: nowrap;">
</li>
<li style="white-space: nowrap;">
<a href="">Neumöbellogistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Lager & Logistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Werkstatt</a>
</li>
<li style="white-space: nowrap;">
<a href="">Kontakte</a>
</li>
</ul>
</nav>

----------------------------------------------------------------------------------------------------------------------------------

Und das der CSS code:

#nav {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: rgba(255, 255, 255, 0.95);
background-image: url("C:\Users\liam\Desktop\CT\Headerline.png");
width: 100%;
height: 3.25em;
line-height: 3.25em;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
cursor: default;
}
#nav ul {
position: relative;
z-index: 1001;
}
#nav li {
display: inline-block;
top: 0;
position: relative;
-moz-transition: top .15s ease-in-out;
-webkit-transition: top .15s ease-in-out;
-o-transition: top .15s ease-in-out;
-ms-transition: top .15s ease-in-out;
transition: top .15s ease-in-out;
}
#nav li > ul {
display: none;
}
#nav li a, #nav li span {
-moz-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-webkit-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-ms-transition: background-color .075s ease-in-out, color .075s ease-in-out;
transition: background-color .075s ease-in-out, color .075s ease-in-out;
position: relative;
display: block;
text-decoration: none;
color: #6b7770;
top: -6px;
padding: 6px 1.5em 0.25em 1.5em;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
outline: 0;
}
#nav li:hover, #nav li.active {
top: 3px;
}
#nav li:hover a, #nav li:hover span {
background: #C1CAC5;
color: #fff;
}
#nav li.active a, #nav li.active span {
background: #C1CAC5;
color: #fff;
}
#nav li.current a {
background: #b1ddab;
color: #fff;
}

----------------------------------------------------------------------------------------------------------------------------------

Ich hoffe ihr könnt mir helfen!

CSS, HTML5
3 Antworten
Frage
von HamsterKnowHow
15.01.2018, 18:49
Mit Bildern
Mit Links
Wie gestalte ich "Wellen" nur mit CSS?

Moin,

ich frage mich, ob man diesen Übergang zwischen den Farben, sprich die Wellen, mit nur CSS nachbaun kann, bzw womit die das gemacht haben könnten:

https://images.gutefrage.net/media/fragen/bilder/wellen-mit-css-only-machen/0_big.png?v=1516038555252">

Damit meine ich den Übergang zwischen schwarz & weiß, bekommt man sowas mit nur CSS hin oder ist das ne Grafik, etc?

Hab schon gegoogelt aber nicht wirklich sowas in der Art gefunden.

Grüße

Bild zu Frage
Computer, HTML, Webseite, CSS, Entwicklung, Webdesign
2 Antworten
Frage
von Illusion1802
18.10.2017, 18:05
Mit Bildern
Größe des Eltern div-Container an die Größe der Kinder div-Container anpassen?

Hey Leute. Ich bin gerade dabei eine Seite zu erstellen und gleichzeitig CSS zu lernen.

Jetzt bin ich dabei eine Seite zu designen, die Einzelheiten eines Benutzers zeigen soll. Nur bekomme ich das mit den div-Containern einfach nicht hin.

Meinem Verständnis nach ist das so, dass wenn ich einen Container habe, in dem zwei weitere Container sind die nebeneinander angeordnet sind und ich dann beiden die Höhe 100% gebe, dann müssten beide doch die maximale Höhe des Eltern Containers annehmen, oder verstehe ich da was falsch? Weil ich bekomme das einfach nicht auf die Reihe. Ich hab mal ein Bild angehängt in dem der Eltern Container (grau) der erste Kind Container (grün) und der zweite Kind Container (gelb) eingefärbt sind. Und da sieht man gut dass der Kind Container einfach über dem Eltern Container hinausschießt..

Ich hänge nochmal den Code aus dem HTML und dem CSS an. Vielleicht habe ich ja auch einen Denkfehler oder kenne mich einfach nur noch nicht genug in CSS aus und jemand kann mir helfen :)

Hier die Container: (Ich hoffe der Code wird richtig eingefügt. Irgendwie ändert sich hier im gutefrage Editor nichts)

<div class="benutzerprofil">
<div class="anschrift">
    <div class="uberschrift">
        <a class="uberschrift">Anschrift</a>
    </div>
    <div class="inhalt">
        <a class="anschrift">
        <?= $user->vorname . " " . $user->nachname ?><br>
        <?= $user->strasse . ", " . $user->hausnummer ?><br>
        <?= $user->postleitzahl . " " . $user->wohnort ?><br>
        <?= $user->bundesland ?>
        </a>
    </div>
</div>

<div class="erreichbar">
    <div class="uberschrift">
        Partner erreichbar unter
    </div>
    <div class="inhalt">
        <span class="erreichbar">
        E-Mail Adresse: <a href="mailto:<?= $user->email ?>"><?= $user->email ?></a><br>
        Handynummer: <?= (($user->handynummer==null)?"Nicht angegeben":$user->handynummer) ?><br>
        Telefonnummer: <?= (($user->telefonnummer==null)?"Nicht angegeben":$user->telefonnummer) ?>
        </span>
    </div>  
</div>
</div>

Und hier der CSS Code dafür:

div.anschrift {
    height: 25%;
    background-color: gray;
}

div.anschrift > div.uberschrift {}
    float: left;
    background-color: green;
    height: 100%;
}

div.anschrift > div.inhalt {
    height: 100%;
    background-color: yellow;
}
Bild zu Frage
HTML, CSS, PHP, Webdesign
4 Antworten

Meistgelesene Fragen zum Thema CSS
Mehr meistgelesene Fragen zu CSS