Hvordan få en Twitter-knapp til Float

Hvordan få en Twitter-knapp til Float


Flytende et element på websiden kan du bryte tekst rundt elementet på samme måte som teksten flyter ofte rundt et bilde i aviser eller blader. Flytende en grafisk knapp eller et bilde kan forbedre utseendet på en webside ved å eliminere store hull og tomrom mellom bilder og tekst. Flytende kan også bidra til å redusere den totale lengden på websiden, fordi teksten sitter ved siden av grafikk og bilder. For å få en Twitter-knappen for å flyte på en webside, må du lage en Cascading Style Sheet designelement, og innkalle denne kommandoen i Hypertext Markup Language koden for Twitter-knappen.

Bruksanvisning

1 Start din HTML-redigering program, Web-koding og design program eller vanlig tekstredigeringsverktøy, for eksempel Microsoft Notisblokk.

2 Åpne websiden som inneholder Twitter-knapp som du ønsker å flyte. Bla til sidens header delen, som er alt innhold og HTML-kode mellom <head> og </ head> taggene.

3 Kopier og lim inn følgende CSS kode i hodet delen av websiden:

<Style type = "text / css">

/

Fjerne standard marginer og padding /

{

padding: 0 0 0 0;

margin: 0 0 0 0

}

/ Set dimensjonene for hovedinndelingen /

hoved~~POS=TRUNC {

width: 100%;

float: left

}

/ * Sett dimensjonene for venstre divisjon.

Legg float * /

venstre {

width: 72%;

margin: 0 4% 0 4%;

float: left;

}

/ * Sett dimensjonene for retten divisjon.

Legg float * /

høyre {

width: 16%;

margin: 0 4% 0 0;

float: left;

}

</ Style>

Denne koden vil flyte elementer til venstre eller høyre i HTML-koden i hoveddelen av websiden.

4 Bla til plasseringen av Twitter-knappen i hoveddelen delen av websiden. Dette er alt innholdet mellom <body> og </ body> koder.

5 Lim eller skriv inn følgende kode rett før Twitter-knappen. Skriv "<div id =" left ">" å flyte på Twitter knappen til venstre på siden. Skriv "<div id =" right ">" å flyte på knappen til høyre på siden. Lim "</ div>" umiddelbart etter Twitter-knappen.

6 Lagre den redigerte webside og laste den opp til ditt nettsted server. Twitter-knappen vil nå flyte med all tekst pakket rundt grafikken.

Hint

  • Hvis nettstedet bruker en egen CSS stilark fil, legg til CSS-kode i trinn 4 til denne filen i stedet for overskriften delen av den aktuelle websiden.
  • Ikke endre noen av de tallverdier i CSS-koden eksempel. Alle verdier i venstre og høyre divisjon snitt må legge opp til 100 prosent for koden til å fungere korrekt.