Beiträge von Catalina

Hallo, ich habe ein Hover Effekt bei innewrhalb einer Flexbox in flix-item gebaut - funktioniert auch alles aber ich würde gerne das der hover effekt immer dieselbe größe hat... leider bin ich bis jetzt noch auf keine lösung gekommen. Danke schon mal im voraus für eure Hilfe. Hier der Quelltext den ich erstellt habe:

.flex-container { display: flex; flex-wrap: wrap;
}

.flex-item { width: 160px; margin: 5px; text-align: center; line-height: 20px; /*Abstand innerhalb der Schrift*/ font-size: 14px; font-family: Verdana;
}
.flex-item :hover
{ background:#eee

}

-----

Mit width und height angaben komme ich da irgendwie nicht weiter......

Sailor -> klasse hat funktioniert !!! DANKE !!!!!

hallo,

ich habe eine navigation die ich am liebsten mit pixelangaben nach rechts drücken will

leider funktioniert das nicht mit den üblichen methoden padding 0 0 0 200px; oder padding-left

hier mal die url:

http://og-elbbruecke.de/testumgebung/index.html

hier der html code:

<label for='show-menu' class='show-menu'>Show Menu</label>
    <input type='checkbox' id='show-menu' role='button'>
<ul id='menu'>
        <li><a href="#">Über uns</a></li>
        <li><a href="#">Leistungen</a></li>
        <li><a href="#">Shop</a></li>    
    <li><a href="#">Impressum</a></li>
    <li><a href="#">Datenschutz</a></li>
    
    </ul>

und der css code:

ul  { 
 list-style-type: none;
 margin: 0;
 padding: 0;
 position: center;
  }

  li  { 
  display: inline-block;
  float: left;
  margin-left: 1px; /*abstand zwischen den button*/

   }
   li a  { 
display: block;
border-radius: 18px 0px 0px 0px;
min-width: 140px;
height: 30px;
text-align: center;
line-height: 30px; /*schrift höhe abstand von oben*/
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #fff;
background: #2f3036;
text-decoration: none;

    }
    li:hover a  { 
    background: #008dd2;
     }

li:hover ul li a  { 
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
      }
/*008dd2*/
li:hover ul li a:hover  { 
background: #008dd2;
color: #008dd2;
       }

li ul  { 
display: none; 
   }

li ul li  { 
display: block;
float: none;
    }

li ul li a  { 
width: auto;
min-width: 100px;
padding: 0 20 px;


     }

ul li a:hover + .hidden, .hidden:hover  { 
display: block; 

     }

input[type=checkbox]  { 
display: none;

 }

input[type=checkbox]:checked ~ #menu  { 


display: block; }

.show-menu  { 

font-family: Helvetica; Arial, sans-serif;
border-radius: 18px 0px 0px 0px;
text-decoration: none;
color: #fff;
background: #008dd2;
text-align: center;
padding: 10px 0;
display: none; 
}

@media screen and (max-width: 760px)  { 
ul  { 

position: static;
display: none;
 } 
 li  { 
 margin-bottom: 1px;

  }
  ul li, li a  { 
  width: 100%;
  border-radius: 0px 0px 0px 0px;
   }
   .show-menu  { 
   display: block;
    }
    body  { 
    background-image: none;
     }
}

sollte ich selber noch die lösung finden schreibe ich das natürlich selbstverständlicxh hier rein .... aber ich denk ich brauch eure Hilfe !

ok ich habs selber herausgefunden wie es geht:

.flexbox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    border: 0px solid #333;
}

#beispiel-25 .box-01 {
    -ms-flex: 0 0 150px;
    flex-basis: 150px;
}
#beispiel-25 .box-02 {
    -ms-flex: 0 0 300px;
    flex-basis: 300px;
}
#beispiel-25 .box-03 {
    -ms-flex: 0 0 150px;
    flex-basis: 150px;
}

ok trotzdem danke -> basti1012 !!!

basti1012 danke !!!

basti1012-> wenn du den beiden boxen auch nee feste größe gibst kann das ja auch nicht gehen ( width: 590px; )

die größe war ja eigentlich so gedacht das man sagen tut insgesamt sind beide flexboxen 590 px breit und davon

soll halt die erste flexbox 1/3 groß sein /// bzw noch besser wäre es die genau zu deklarieren also jede einzelne box mit width angeben.

Hallo,

ich wollte das die erste Breite der Flexbox 1/3 gross ist und die zweite breite daneben 2/3 gross ist

mein quelltext dazu in css:

.flex-container-referenzen {

display: flex;

flex-wrap: wrap;

justify-content: center;

-ms-flex-align: start;

align-items: flex-start;

}


.flex-container-referenzen > div {


-ms-flex: 1 2 auto;

width: 590px;


}

und html:

<div class="flex-container-referenzen">
  <div>
    1
  </div>
  <div>
    2
  </div>
</div>

Leider zeigt er das nicht so an wie beschrieben sondern jede box zu 50%

Kann mir einer von euch helfen ?

Danke im voraus!

hallo,

nach firefox update zeigt er im offline modus (file:///C:/1-www/project10/upgrade1.1/start.html) meine schrift nicht mehr an in verschiedenen webseiten.

davor ging alles ... hat einer ne ahnung wo ich das ändern kann das es wieder funktioniert ?

habe im offline modus mal google chrome aufgemacht - da funktioniert alles ....

wenn ich die seiten online über www abrufe mit firefox da haut auch alles hin ....

Sempervivum , basti1012 danke euch !!!!

cool hat geklappt !

DANKE - > Sailor

Hallo ich habe unter

http://og-elbbruecke.de/testumgebung/flexbloecke.html

2 Bereiche übereinander gelegt... ich wollte aber das diese sich in der mobilen Ansicht (mit flex-wrap) automatisch untereinander stehen und nicht zusammen bleiben.

Irgendwie klappt das nicht ....

URL: http://og-elbbruecke.de/testumgebung/flexbloecke.html

Code HTML:

  <div class="bot">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>  <div class="top"><img src="bild.jpg"></div>
</div>

Code CSS:

.top {  position: absolute;  margin-top: 30px;  background-color: white;  width: 173px;  height: 221px;  flex-wrap: wrap;
}

.bot {  position: absolute;  margin-top: 50px;  margin-left: 50px;  background-color: #f5f5f5;  width: 370px;  height: 232px;  padding: 0 0 0 200px;  flex-wrap: wrap;
}

Kann das sein das der Aufbau schon nicht sorecht gelungen ist oder habe ich irgendwas vergessen bzw nicht bedacht ?

so ich habe es jetzt gemacht jetzt überdeckt in der mobilen ansicht wenn mann auf den "unser nemu" (was ein untermenu punkt hat) punkt geht den nächsten hauptmenupunkt anstatt es weiter aufzuklappen so das alles runterrutscht () und alles sichtbar ist.

ps: kann auch screenshots hochladen zum besseren verständnis!

http://og-elbbruecke.de/testumgebung/menu.html

Hi,

ich möchte das sich das Logo in den verschiedensten Desktopgrößen

auch von der Größe ändert. Leider reagiert er darauf gar nicht.

Die verschiedenste positionierung reagiert super aber die Größe ändert sich leider nicht...

Hier mal die URL: http://og-elbbruecke.de/testumgebung/logo.html

#dlogo
{

position:absolute;
top:60px;
left:230px;
width: 240px;
z-index:2;
}



@media only screen and (max-width: 1440px)
{
#dlogo
{

position:absolute;
top:50px;
left:165px;
width:150px; 
z-index:2;


}

Sailor danke ... ich versuchs

so jetzt habe ich das mal alles angepasst und hier nochmal hochgeladen...

leider spinnt jetzt die desktop anzeige

da springt das menu jetzt hoch nachdem ich die

zeile /*float: left; */ auskommentiert habe....

http://og-elbbruecke.de/testumgebung/menu.html

danke hat geklappt!!!

so leider habe ich jetzt n weiteres problem wenn man auf den hamburger button raufdrückt springt dieser wieder nach links also verschiebt sich das wieder so wie davor... wollte das im toggle machen (in der menu.css) mit display : flex; doch da reagiert er nicht

also das das menu auch dort rechts aufklappt...

http://og-elbbruecke.de/testumgebung/menu.html

ja super .... hat geklappt !!!!

DANKE DIR !!!

NOCH NE SCHÖNE WOCHE !

danke, habe ich gemacht trotzdem bleibt es so wie es ist ....

habe ne neue css datei angelegt flexheader.css und darin dann

den inhalt geschrieben des containers:

.flexheader {  display: flex;  flex-wrap: wrap;  justify-content: space-between;  background-color: #fff;



}

.flexheader > div {  background-color: #fff;  width: 620px;
  }

http://og-elbbruecke.de/testumgebung/menu.html

Arne Drews -> also ich bekomme das nicht wirklich hin ... ich habe mal jetzt die datei hochgeladen

unter: http://og-elbbruecke.de/testumgebung/menu.html

Ich will das das Logo links in der mobilen ansicht angezeigt wird und rechts daneben dann der hamburger button.

Arne Drews - super danke dir hat geklappt !!!