SocialNet. - unmachbar!

Levi$ · 02/12/2012, 23:51

hey,

ok der titel ist dumm, sry aber mir fiel leider
nichts besseres ein! Dafür komm ich gleich zum thema

ich will auf meine seite eine kleine leiste haben die mitscrollt,
sie soll ganz links sein und ca 40x120px groß sein. Diese "Fläche" will ich
rot haben. Auf der fläche wiederrum, will ich 3-4 icons haben
die auf social networks hinweisen.

- naja hab grad irgendwie ne denkblockade -.- xD

Html:

PHP Code:


			
<div id="Social">

 <ul>

  <li><img src="images/facebook.png" /> </li>

  <li><img src="images/twitter.png" /> </li>

  <li><img src="images/youtube.png" /> </li>

 </ul>

</div>

Die Php, ist im ordner "xy". Der images ORDNER ist im ordner "xy". (xy=xy)

CSS

PHP Code:


			
#Social {

  position: fixed;

  float: left;

  margin-left:0px;

  margin-top:100px;

  background: red;

  width: 40px;

  height: 120px;

}

Jedoch bin ich grad völlig aus der sache und würde es schnell gerne fertig machen ^^

- Wie soll ich die bilder in diese rote BOX reihen (von oben nach unten)?

- DANKE =9

galaxyo · 02/13/2012, 14:25

Zunächst solltest du dem img-Tag die width, height und alt Attribute mit auf den weg geben, damits valid ist.

Wenn du die Bilder von oben nach unten dargestellt haben möchtest, frage ich mich, warum du float:left verwendest?

Edit:

Zur Not gibst du den list-items die breite der Box und centerst das image. Dann sollten sie ebenfalls untereinander angezeigt werden.

Edit 2:

Liste rausnehmen, images width und height verpassen und <br/>-Tag verwenden

Levi$ · 02/14/2012, 16:17

Quote:

Originally Posted by galaxyo

Zunächst solltest du dem img-Tag die width, height und alt Attribute mit auf den weg geben, damits valid ist.

Wenn du die Bilder von oben nach unten dargestellt haben möchtest, frage ich mich, warum du float:left verwendest?

Edit:

Zur Not gibst du den list-items die breite der Box und centerst das image. Dann sollten sie ebenfalls untereinander angezeigt werden.

Edit 2:

Liste rausnehmen, images width und height verpassen und <br/>-Tag verwenden

mehr oder weniger, noch schwachsinniger als meine vorherige idee..

PHP Code:


			
<div id="socialn">
    
    
    <a href="#">
    <img border="0" src="templates/natura/images/facebook.png" width="48" height="48" ></a>
    

    <a href="#">
    <img border="0" src="templates/natura/images/linkedin.png" width="48" height="48"></a>
    

    <a href="#">
    <img border="0" src="templates/natura/images/twitter.png" width="48" height="48"></a>
    

    <a href="#">
    <img border="0" src="templates/natura/images/googleplus.png" width="48" height="48"></a>
    

    <a href="#">
    <img border="0" src="templates/natura/images/youtube.png" width="48" height="48"></a>

    
    
    
    
    </div>

PHP Code:


			
#socialn {
    width: 54px;
    height: 330px;
    position:fixed;
    margin-left:0px;
    float: left;
    margin-top: 100px;
    z-index: 2000;
    background-color:red;
    
    
    
}

abstände zu den bilder bekomm ich eben nicht hin. da </br> nicht übernommen wird -.-

€: da dies eigentlich unmöglich mit </br> zu lösen wäre, hab ich "platzhalter" eingefügt. Und zwar so:

- Bild = 48x48px (png oder gif, aufgrund der transparenz)
- Photoshop aufmachen: abstände zu bildern ausrechnen (bei mir 4px)
- mein cs3 ist leider auf english, also jeder ders mir nachmacht, start brain.exe!
- images-> image size
- bild auf die werte vergrößern bis die abstände passen (bei mir: von 48 px auf 52 px = 4px abstand)

fertig.

ps.: danke epvp xD flaschen

galaxyo · 02/14/2012, 16:51

Quote:

Originally Posted by Levi$

ps.: danke epvp xD flaschen

Selber :*

Du Mathegenie ein kleiner Tipp:

HTML Code:

margin:0px 2px 0px 2px;

//Für nubs:

margin-right:2px;
margin-left:2px;

Nur so zur Info. Aber wir sind ja flaschen, wir können nichts.
Ich frag mich immer noch warum du float:left; anstatt einer absoluten positionierung verwendest.

Levi$ · 02/14/2012, 18:06

Quote:
Originally Posted by galaxyo
Selber :*

Du Mathegenie ein kleiner Tipp:
HTML Code:
margin:0px 2px 0px 2px;

//Für nubs:

margin-right:2px;
margin-left:2px;
Nur so zur Info. Aber wir sind ja flaschen, wir können nichts.
Ich frag mich immer noch warum du float:left; anstatt einer absoluten positionierung verwendest.

naja, du weist ja nur über diese eine box bescheid, aber nicht über die umliegenden elemente. Deshalb auch float:left. margin-left hat hier einen sinn, aber beide margins zu verwenden ist unlogisch, welche bezugspunkte hätte dann margin-right? Gut also, zur positionierung, absolute positionierung versuche ich zu vermeiden, da diese immer für probleme sorgen. Ahm hätte man meinen text wirklich gelesen, hätte man entdeckt das ich gesagt habe das dieses ding mitscrolen soll -> position: fixed;

von mir aus "closed"

lg niko

galaxyo · 02/14/2012, 19:04

Quote:

Originally Posted by Levi$

naja, du weist ja nur über diese eine box bescheid, aber nicht über die umliegenden elemente. Deshalb auch float:left. margin-left hat hier einen sinn, aber beide margins zu verwenden ist unlogisch, welche bezugspunkte hätte dann margin-right? Gut also, zur positionierung, absolute positionierung versuche ich zu vermeiden, da diese immer für probleme sorgen. Ahm hätte man meinen text wirklich gelesen, hätte man entdeckt das ich gesagt habe das dieses ding mitscrolen soll -> position: fixed;

von mir aus "closed"

lg niko

Gut erkannt. Wir werden deinerseits als Flaschen bezeichnet, weil wir aufgrund mangelnder Informationen deinerseits nicht richtig helfen können.

Lies deinen ersten Post und du entdeckst: "(von oben nach unten)".

ABSTAND - ICON - ABSTAND
ABSTAND - ICON - ABSTAND
ABSTAND - ICON - ABSTAND
ABSTAND - ICON - ABSTAND

Und natürlich reicht margin-left völlig aus. Ich habs nur gerne komplett verpackt, ohne Luft für anderes.

Wenn du Elemente mit fixed oder absolute ausstattest, entfernst du diese aus dem normalen Elementfluss, weshalb float:left; an dieser Stelle normalerweise überflüssig ist. Eben weil es aus dem Elementfluss gerissen wird, hat es keinen Einfluss auf nachfolgende Elemente.

Und jop, das mit dem mitscrollen hab ich überlesen.

Mashkin · 02/15/2012, 02:24

PHP Code:


			
<div id="socialn">
    
    
    <a href="#">
    <img border="0" src="templates/natura/images/facebook.png" width="48" height="48" ></a>
    

    <a href="#">
    <img border="0" src="templates/natura/images/linkedin.png" width="48" height="48"></a>
    

    <a href="#">
    <img border="0" src="templates/natura/images/twitter.png" width="48" height="48"></a>
    

    <a href="#">
    <img border="0" src="templates/natura/images/googleplus.png" width="48" height="48"></a>
    

    <a href="#">
    <img border="0" src="templates/natura/images/youtube.png" width="48" height="48"></a>

    
    
    
    
    </div>

PHP Code:


			
#socialn {
    width: 52px;
    height: 330px;
    position:fixed;
    margin-left:0px;
    margin-top: 100px;
    float: left;
    z-index: 2000;
    background-color:red;
}

#socialn > a {
    float: left;
    display: block;
    position: relative;
    margin: 11px 2px;
    width: 48px;
    height: 48px;
}

Die Links/Bilder sind zentriert und haben je 11px Abstand nach oben und unten (also Bild<->Bild = 22px, Element + Rand: 70x50px)