HTML Liste wieder untereinander?

1 Antwort

@media (max-width: 480px) {

.footerlinks li {display:block}
}

Wobei du die 480px mit deiner gewuenschten Breite ersetzt.

Dankeschön!

0

Wie kann ich meine Subnavigation in CSS zentrieren?

Moin! :)

Ich würde gerne meine Subnavigation, die sich am linken Bildrand befindet, zentrieren. Leider klappt das bei mir nicht so wirklich und hoffe, dass mir jemand helfen kann.

Vielen Dank im Vorraus! :)

Mein HTML-Code: https://pastebin.com/e2zyBvyy

body, html {
    background: #F4A460;
    margin: 0;
    padding: 0;
    font-size: 62.5%;
}

div#subnavigation {
    background: #8A4B08;
    position: fixed;
    top: 0;
    width: 166px;
    text-align: center;
    transition: 200ms all;
    height: 100%;
}

div#subnavigation nav#sub {
    display: inline-block;
}

div#subnavigation nav#sub ul {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    position: relative;
    vertical-align: middle;
    transition: all 300ms;
}

div#subnavigation nav#sub ul li {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    position: relative;
    transition: all 300ms;
}

div#subnavigation nav#sub ul li a {
    display: inline-block;
    padding: 2.17rem;
    float: left;
    min-width: 12rem;
    text-align: center;
    font-size: 2rem;
    color: #000000;
    margin: 0 1px 0 0;
    text-decoration: none;
    background: #deb887;
    font-weight: 300;
    transition: all 300ms;
    font-family: 'Source Sans Pro', sans-serif;
    border-bottom: 1px solid #8A4B08;
}

div#subnavigation nav#sub ul li:hover > a {
    background: #FFD39B;
}
...zur Frage

HTML / CSS Div-Container bzw. ganze Seite horizontal zentrieren

Hallo...

ich hab ein größeres Problem mit meiner Website. Ich bin noch am Anfang und hab direkt zu Beginn festgestellt, dass viele Websiten zenriert ausgerichtet sind. Sowas wollte ich auch machen, hab gegoogelt, gf durchgeblättert aber noch nichts Brauchbares gefunden.

Ich hab eine Seite aufgeteilt in body und dann einen Div-Container, der alles umschließt (heißt bei mir id="drumrum"). So. Dann wollte ich da weitere Div-Container einfügen, die da heißen sollen kopf, navi, inhalt und footer. Soweit OK, alle möglichen Formatierungsoptionen mit CSS klappen soweit, aber mit der horizontalen Zentrierung komm ich garnicht weiter.

Ich hab schon ausprobiert, margin auf 0px auto zu setzen, text-align:center usw. zu benutzen, aber nichts funktioniert. Damit ihr wisst, wie mein Doctype aussieht:

Hab schon irgendwo gelesen, dass man da vielleicht noch was dran ändern muss, weiß aber nicht genau, was ;)

Hier ist meine CSS-Datei, als Code eingefügt:

/*formate.css*/

drumrum {

width:1000px;
float:left;
margin:0 auto;
text-align:left;

}

kopf {

border-top-left-radius:10px;
border-top-right-radius:10px;
float:left;
width:980px;
height:150px;
border-width:1px;
margin-left:auto;
margin-right:auto;
background-image:url('img/banner.png');
font-weight:bold;
font-size:30pt;
padding-left:10px;
padding-right:10px;

}

navi {

float:left;
width:980px;
border-width:1px;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#00CC00;
font-size:14pt;

}

inhalt {

width:980px;
float:left;
border-width:1px;
float:left;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#CCCCCC;
font-size:14pt;

}

footer {

width:980px;
border-width:1px;
float:left;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#FFFFFF;
text-align:center;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;

} body { background-color:#008800; text-align:center; } * { font-family:Times New Roman; } a:hover { text-color:#00DD66; font-weight:bold; } a:visited { text-color:#FF00EE; } a { text-color:#0022FF; }

Das wäre dann mein momentanes CSS für meine Seite. Wenn mal jemand drübergucken könnte und eine Idee kennt, wie ich "alles" waagerecht in die Mitte krieg, danke schonmal.

Und bitte verlinkt nicht auf eine gf-Seite, leider hat bislang von all den genannten Antworten keine Möglichkeit funktioniert. Vielleicht liegt es ja auch wirklich am Doctype.

Liebe Grüße, HugaTV

...zur Frage

css vertikales menü aufklappbar nach unten weg wie geht das?

hallo ich möchte gerne in css html und wenn es sein muss auch js ein menü programmieren.Das untermenü soll sich nicht nach rechts oder links wegklappen wie überall im internet beschrieben sondern nach unten. so weit so gut so weit binn ich auch schon aber jetz klapt sich das untermenü über die obermenüpunkte auf wie bekomme ich das hin , dass die nicht passirt und die obermenüpunkte nach unternrutschen ? mein 2 poblem ist das man nicht auf die untermenüpunkte darufdrücken kann were net wenn sich den code jemand mal ansehen kann ich schetze das ist wegen den hover aber ich weis auch nicht wie ich das anders machen soll

nav{
    position:fixed;
    position: absolute;
    top:10.5em;
    left:12em;    
    display:block;
    height:2.5em;
    text-align:left;
    
    
}     

nav li:hover #sub{
    display: block;  
    position:absolute;    
    
   }
   
  nav ul li:hover #sub{
    left:9.375em
    
  } 


nav ul {
    display:block;
    list-style: none;
    margin: 0em;
    padding: 0em;
}

nav ul li {
    position:relative;
    display:block;
    margin: auto;
    
}
nav ul li a {
    color:green;
    font-size: 1.125em;
    line-height:1.5em;
    margin: 0em;
    padding: 0em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
}

nav ul li a:hover {
    border-bottom: 0.15em solid #E7590B;
}
nav ul li a.active {
    border-bottom: 0.15em solid #E7590B;
}        

#sub{
position: absolute;
display: none;
    
}


#sub li a{
    display: block;
    
    
}
    
 
...zur Frage

CSS hilfe bei der position?

Hallo ich brauche unbedint eure Hilfe...

Ich versuche einen button genau an einer stelle zu positionieren, jedoch verschiebt sich die position immer bei einem anderen monitor.

Ich hoffe ihr versteht mein Problem und könnt mir helfen.

Hier nochmal mein Code von meinem Button...

MFG

CSS:

a.newsletter{

position: absolute;

top: 53%;

left: 70%;

transform: translate(-50%, -50%);

width: 100px;

height: 33px;

text-align: center;

line-height: 33px;

text-transform: uppercase;

color: #808080;

font-family: sans-serif;

text-decoration: none;

transition: 0.5s;

font-size: 15px;

transition: 0.5s;

overflow: hidden;

}

a.newsletter:hover{

color: #000;

}

a.newsletter:before{

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #0d0d0d;

z-index: -1;

transition: 0.5s;

box-sizing: border-box;

}

a.newsletter:hover:before{

top: calc(100% - 2px) ;

}

a.newsletter:after{

content: '';

position: absolute;

top: calc(-100% + 2px);

left: 100%;

width: 100%;

height: 100%;

background: #0d0d0d;

z-index: -1;

transition: 0.5s;

box-sizing: border-box;

}

a.newsletter:hover:after{

left: 0;

transition-delay: 0.5s;

}

a.newsletter:hover span{

transform: scaleY(1);

transition-delay: 1s; 

}

span.footerser{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border-left: 2px solid #0d0d0d;

border-right: 2px solid #0d0d0d;

box-sizing: border-box;

transform: scaleY(0);

transform-origin: top;

transition: 0.5s;

}

...zur Frage

Wie kann ich das Bild beim Überfahren mit der Maus ändern?

Hallo liebe Leute,

ich mache momentan ein Praktikum und habe eine Aufgabe bekommen, zu der ich zwar viel gegoogelt, aber leider keine Lösung hinbekommen habe.

Vielleicht könnt ihr mir dabei helfen?

Die Aufgabe lautet:

Beim Überfahren des Frosches mit dem Mauszeiger springt der Frosch auf den Boden. Wenn man auf das Podest klickt, dann sitzt er wieder oben auf seinem Podest.

Der HTML-Code:

<form>
  <div>
    <input id="podest" type="button" value="zurück"/>
  </div>
  <div id="frosch">
    <img alt="" border="0" height="136" src="frosch.png" width="150"/>
  </div>
</form>

Der CSS-Code:

body {
  background-color: white;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 15pt;
  color: green;
}

#frosch {
  position: absolute;
  bottom: 330px;
  left: 200px;
}

#podest {
  position: absolute;
  bottom: 0px;
  left: 200px;
  height: 350px;
  width: 150px;
  background-color: orange;
  color: white;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 20pt;
}

Das soll also mit JavaScript gemacht werden.

Vielen Dank im Voraus!

MfG

...zur Frage

Wie bekomme ich die rechte Box in den gelben Bereich?

<style>
.spiel {
    width: 100%;
    background-color: yellow;
    min-height: 300px;
    border: 4px solid black;
}
.spiel_links {
    width: 40px;
    background-color: grey;
    height: 100%;
    border: 0px;
}
.spiel_balken {
    width: 40px;
    background-color: green;
    height: 25%;
    position: absolute;
    bottom: 6px;
    border-bottom: 1px solid red;
}
.spiel_rechts {
    float: left;
    border: 2px solid blue;
}
.spiel_kopf {
    min-height: 30px;
    border-bottom: 1px solid red;
    float: none;
    position: relative;
    top: 0px;
}
.spiel_inhalt {
    clear: none;
    height: 100%;
    float: none;
}
.spiel_boden {
    position
    min-height: 30px;
    border-top: 1px solid red;
    float: none;
    position: relative;
    bottom: 0px;
}
</style>
<div class="spiel">   
  <div class="spiel_links">      
    <div class="spiel_balken">25%</div>   
  </div>   
  <div class="spiel_rechts">      
    <div class="spiel_kopf">         
      Heimmannschaft vs. Gastmannschaft am 01.01.1970 um 19 Uhr in Musterstadt.      
    </div>      
    <div class="spiel_inhalt"> Text</div>      
    <div class="spiel_boden">zugesagt: 2</div>   
  </div> 
</div>
...zur Frage

Was möchtest Du wissen?