Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag08.02.2013 um 08:45 (UTC)    
Titel: Clean-Design Footer

Hallo zusammen,
ich habe wieder einmal zwei Anliegen Wink
Das erste ist, ich habe bei der Seite Clean-test.de.tl gesehen, das man in den Footer z.B. Grafiken vergrößern lassen kann mit Mouse-Hover efekt.

http://img.webme.com/pic/s/schiedsrichterkreis7/unbenannt.png

Jedoch finde ich niergendswo diesen Code =( ist es nicht machbar, oder warum geht das nicht... Bei mir auf der Seite im Footer unten sieht das ziemlich doof aus daher wollte ich diese Animation einbinden. Könnt ihr mir helfen?

Das zweite Anliegen ist, ich wollte ebenfalls ein Copyright Links in den Footer setzen und dann rechtsbündig die Logos von unserer Seite, jedoch wenn ich mit dem Code arbeite, wird der Footer automatisch vergrößert und die Sachen sind zwar wie beschrieben (Linksbündig und rechtbündig) allerdings untereinander sodass es nicht auf einer Ebene ist! Auch hier die Frage, wie ist das Machbar alles in einer Reihe zubekommen - jedoch wie beschrieben -. Könnt Ihr helfen?


Lg.
Beitrag08.02.2013 um 10:38 (UTC)    
Titel:

Ich schätze mal auf absolute Positionierung wenn es mit float nicht funktioniert!
Beitrag08.02.2013 um 13:43 (UTC)    
Titel:

Also damit kann ich jetzt nichts anfangen! ;(
Beitrag08.02.2013 um 13:51 (UTC)    
Titel:

Wenn ich das richtig verstanden habe, dann möchtest du: einen Footer machen, bei dem die Icons, per Hover-Effekt vergrößert werden, und dabei verrutscht dir der ganze Footer?

Wenn du das nicht willst, dann versuch mal die Icons:
Code:
position:absolute;

zu machen![/code]
Beitrag08.02.2013 um 13:58 (UTC)    
Titel:

Okay, habe ich gerade mal ausprobiert, allerdings verschiebt sich dann der ganze Footer....

Ich darf kurz den Quellcode veröffentlichen:

text über dem Design

........
/* Aussehen Footer */
#new_footer {
width:970px;
min-height:1px;
padding: 15px;
margin: 15px auto 90px auto;
overflow: hidden;
border: 1px solid #c9c9c9;
background-color: #FFFFFF;
box-shadow: 1px 0px 20px 1px #777777;
.........


text unter dem Design

.........
</div>
<div id="new_footer">
<a href="https://www.facebook.com/pages/Schiedsrichterkreis7/136824136425611" target="_blank"><img width="37" height="37" border="0" alt="" src="http://img.webme.com/pic/s/schiedsrichterkreis7/facebook.png"/></a> | <a href="skype:ralle0602?chat"><img width="37" height="37" src="http://img.webme.com/pic/s/schiedsrichterkreis7/skype.jpg" alt="" /></a></a>
</div>
........


So wie Ihr halt bei http://www.clean-test.de.tl sehen könnt ist im Footer ein Hovereffekt eingetragen... Aber da ich dort im Gästebuch schon "tausendmal" was reingeschrieben habe, woltle ich da nicht schon wieder Fragen...
Hier ist es sicherlich auch für andere User interessant diesen Effekt einzubinden.

Jetzt die Frage, wo genau kommt diese Position:absolute; rein?
Beitrag08.02.2013 um 14:13 (UTC)    
Titel:

den Footer machst du noch:
Code:
position:relative;


danach musst die Icons absolute positionieren, dann liegen, sie mehr oder weniger über dem Footer und haben keinen Einfluss auf die Größe des Footers.
Wenn du dir eine andere HTML-Struktur für die Icons ausdenkst, dann musst du nicht jedes Icon manuell positionieren, sondern dann geschieht das automatisch!
Code:
position:absolute;
Beitrag08.02.2013 um 14:21 (UTC)    
Titel:

Sorry wenn ich damit wieder nerv Very Happy
Aber ich habe das jetzt geändert wie du sagtest mit text über

/* Aussehen Footer */
#new_footer {
width:970px;
min-height:1px;
padding: 15px;
margin: 15px auto 90px auto;
overflow: hidden;
position:relative;
border: 1px solid #c9c9c9;
background-color: #FFFFFF;
box-shadow: 1px 0px 20px 1px #777777;


Dann habe ich auf Iceblue usw. ein Code gefunden der mir das so schneidet wie ich das haben möchte bzgl . des Hovers:


</div>
<div id="new_footer">
Test
<div style="text-align: right;"><a target="_blank" href="https://www.facebook.com/pages/Schiedsrichterkreis7/136824136425611"><img width="36" height="36" border="0" alt="Bild" src="http://img.webme.com/pic/s/schiedsrichterkreis7/facebook.png" class="transparenz" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a target="_blank" href="skype:ralle0602?chat"><img width="36" height="36" border="0" alt="Bild" src="http://img.webme.com/pic/s/schiedsrichterkreis7/skype.jpg" class="transparenz" /></a>
</div>

-----



Test habe ich extra rein geschrieben, damit Ihr es euch anschauen könnt was ich vermeiden möchte... Das ist alles vergrößert und verschoben, die Icons rechts ist Optimals, nur jetzt wollte ich den Text auf selbiger Höhe setzen nur halt Links bündig.
Beitrag08.02.2013 um 14:32 (UTC)    
Titel:

Versuch mal, das DIV, indem die ICONS sind absolut zu positionieren
(eventuell die Größe des Footers dann manuell einstellen!)
Beitrag08.02.2013 um 15:20 (UTC)    
Titel:

Alles vergebens!!! =(

Naja, muss ich mit leben dass ich dort dann keine Sachen Linksbündig und die Logos rechtsbündig auf einer Höhe hinbekomme....
Trotzdem danke!

Thema kann geschlossen werden!
Beitrag08.02.2013 um 15:22 (UTC)    
Titel:

Hallo,

Die Grafiken im Footer haben dort die Klasse .icon (<img class="icon" src=".......)
Und damit u.a. eine Größe und Außenabstand (margin) bekommen.

Beim Hover werden lediglich Bildgröße und Abstand geändert.
Die Bilder vergrößern sich, der Außenabstand (margin) verringert sich um den gleichen Wert.

Gruß Wolle


Zuletzt bearbeitet von find-templates am 08.02.2013, 16:28, insgesamt 3-mal bearbeitet
Beitrag08.02.2013 um 16:03 (UTC)    
Titel:

Okay, danke wolle...
Das habe ich soweit gut verstanden, allerdings verstehe ich noch nicht ganz wie ich das dann Hinbekomme!?!
Beitrag08.02.2013 um 16:14 (UTC)    
Titel:

Wie du deinen Grafiken eine Klasse gibst, ist bekannt ?

<img class="super" src="Grafikadresse" alt="bild" />

Nun wird super mit CSS gestaltet:

Zitat:

.super {
border-radius: 8px;
border: 1px solid #C9C9C9;
float: right;
width: 30px;
height: 30px;
margin: 5px;
padding: 5px;
transition: all 0.5s linear;
}

.super:hover{
width: 37px !import;
height: 37px;
margin: 2px;
}


Wie du siehst, beim HOVER werden die Bilder 2 Pixel breiter.
Damit sie dabei nichts verschieben ... wird der Abstand (margin) 2 Pixel kleiner.
Damit sie im Footer rechts sitzen, haben sie ein float: right; bekommen.


Gruß Wolle


Zuletzt bearbeitet von find-templates am 08.02.2013, 17:16, insgesamt 2-mal bearbeitet
Beitrag08.02.2013 um 16:38 (UTC)    
Titel:

Ich versteh gerade nur Bahnhof!
Ich werde mich ggf. morgen dran setzen und mir nochmal genau überlegen wie ich das jetzt alles machen möchte.

Eins ist Klar, so wie es jetzt ist im Footer von diesem Effekt her !TOP!
Nur halt doof, das ich links nichts schreiben kann sodass der Footer nicht geändert wird sondern diese Größe beibehält.


Trotzdem ein Dank an alle die Geholfen haben!
Beitrag08.02.2013 um 16:51 (UTC)    
Titel:

so müsste er dann ausschauen:

Code:

<style type="text/css">
#new_footer {
width:970px;
min-height:1px;
padding: 15px;
margin: 15px auto 90px auto;
overflow: hidden;
border: 1px solid #c9c9c9;
background-color: #FFFFFF;
box-shadow: 1px 0px 20px 1px #777777;
}

#new_footer_links {
clear:both;
text-align:left;
float:left;
}

#new_footer_rechts {
text-align:right;
float:right;
}

.transparenz {
display: block;
float: right;
height: 30px;
margin: 4px;
padding: 4px;
width: 30px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
opacity: .6;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE8 */ filter: alpha(opacity=60); } /*IE7 und kleiner*/
}

.transparenz:hover{
width:37px!important;
height:37px!important;
margin:2px;
 opacity: 1.0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100); }
}
</style>
<div id="new_footer">
  <a target="_blank" href="https://www.facebook.com/pages/Schiedsrichterkreis7/136824136425611">
  <img width="36" height="36" border="0" alt="Bild" src="http://img.webme.com/pic/s/schiedsrichterkreis7/facebook.png" class="transparenz" />
  </a>
  <a target="_blank" href="skype:ralle0602?chat">
  <img width="36" height="36" border="0" alt="Bild" src="http://img.webme.com/pic/s/schiedsrichterkreis7/skype.jpg" class="transparenz" />
  </a>
 <div id="new_footer_links">
  <p>Copyright by....</p>
 </div>
 <div id="new_footer_rechts">
 <p> Logo | Logo | Logo</p>
 </div>
</div>


Zuletzt bearbeitet von scriptcloud am 08.02.2013, 18:01, insgesamt 2-mal bearbeitet
Beitrag08.02.2013 um 16:51 (UTC)    
Titel:

Ich dachte es ging dir um die Grafiken ?
Dann lautet die Frage jetzt : wie platziere ich links im Footer anderen Text ?
Schreibe den in einen <p> </p> , das bekommt ein float: left;
Also <p style="float:left;"> dein text oder link </p>
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de