Gå til innhold

Text-floating i wordpress, hjelp!

_nomad

Av _nomad
i Programmering og webutvikling

Anbefalte innlegg

_nomad

_nomad

Skrevet
Skrevet

Jeg setter for tiden opp en wordpress-blog for et band jeg kjenner, og jobber akkurat nå med en side som inneholder info om bandet osv. Ønsker da å få samme oppsett som dette.

 

Har prøvd å google litt, men ting ender bare opp i kaos.. Er det i det hele tatt mulig å fikse dette i wordpress? Må jeg ha en ekstern CSS-fil til dette? Jeg har jobbet veldig lite med css før, takker på forhånd for all input :)

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Gjest

Gjest

Skrevet
Skrevet

Dette er hva jeg ville gjort:

 

I css dokumentet(samme om du har css`en i samme dokument om html koden eller ikke)

 

Lag en divisjon du kaller f.eks: "BandInfo"

 

#BandInfo p <-- dette er <p> tagen -->

{

text-align: right;

float: left;

padding-left: 5px;

padding-right: 5px;

text-size: 12;

text-family: Arial, helvetica;

}

 

#BandInfo img <-- dette er for <img> tagen -->

{

align: left;

border: 1px solid black;

}

 

 

Så oppretter du i html koden divisjonen BandInfo:

 

<div id="BandInfo">

<img src="Sanger.jpg" alt="Jonas" width="180" height="115" />

<p> Sanger: Jonas Tullemann , Alder: 25, osv osv osv</p>

</div>

 

 

Mvh

Antonmannen

Lenke til kommentar
_nomad

_nomad

Skrevet
  • Forfatter
Skrevet (endret)

Hm, okei, hvis jeg vil ha CSS i samme dokument som html-koden (redigerer i WP), hvor skal dette i såfall, og hvordan?

 

Takk for raskt svar :)

 

Edit: Dette skal vel kanskje i <head>-taggen? Da har jeg vel muligens et problem siden jeg redigerer i WP..

Endret av _nomad
Lenke til kommentar
Gjest

Gjest

Skrevet
Skrevet

<!-- Slik som dette skal det se ut da :) -->

 

<html>

<head>

<title></title>

<style type="text/css">

 

#BandInfo p

{

 

}

 

#BandInfo img

{

 

}

</style>

</head>

 

<body>

 

<div id="BandInfo">

<div>

 

</body>

</html>

 

Har du noe erfaring i html/css fra tidligere? Eller er du helt på scratch?

Lenke til kommentar
_nomad

_nomad

Skrevet
  • Forfatter
Skrevet

Ja, jeg fant ut det etter hvert :)

Men det blir jo verre, ettersom jeg redigerer en WP-side, eller?

Jeg har knotet litt med CSS fra før, tweaket temaet på min egen blogg noe, men veldig begrenset kunnskap, ja.

Grunnleggende html-kunnskap må jeg vel kunne skryte på meg :p

 

Men dette kan kanskje bare puttes inn i style.css for wp-temaet(default)?

Har det i såfall noe å si hvor og hvordan..?

Lenke til kommentar
Gjest

Gjest

Skrevet
Skrevet

Jeg har aldri brukt WP. Jeg kan ikke helt si at jeg

liker ferdig mikser.. Det er faktisk lettere å kode slike

ting selv fra scratch.. Men har man ikke kunnskapen så kan

det fort bli litt for komplisert :S

 

Hvis WP tillater redigering i css`en dems så skal ikke det være

noe problem :) Da er det bare å kaste det inn slik jeg skrev

det, samme f.. hvor i css`en det ligger så lenge navnene

stemmer overens.

 

Slik i Css:

#BandInfo

{

}

 

Slik i Html:

<div id="BandInfo">

</div>

 

BandInfo må skrives likt!! Hvis ikke så forstår ikke html`en hvor

den skal finne svaret på hvordan divisjonen skal se ut slik du har

satt det opp i css`en.

 

Sjekk ut denne hvis du sitter fast:

 

http://www.w3schools.com/

 

Meget god side for å lære seg dette :)

 

God Natt sa fålk!

Lenke til kommentar
_nomad

_nomad

Skrevet
  • Forfatter
Skrevet (endret)

Har selv-hostet Wordpress på eget domene, så CSS-redigering går greit.

Prøvde å legge in dette slik:

 

*/



/* Begin Typography & Colors */

#BandInfo p <!-- dette er <p> tagen -->
{
text-align: right;
float: left;
padding-left: 5px;
padding-right: 5px;
text-size: 12;
text-family: Arial, helvetica;
}

#BandInfo img <!-- dette er for <img> tagen -->
{
align: left;
border: 1px solid black;
}

body {
font-size: 10px;; /* Resets 1em to 10px */
font-family: 'Verdana', Lucida Grande, Arial, Sans-Serif;
background: #d5d6d7 url('images/kubrickbgcolor.jpg');
/*color: #333;*/
color: #000;
text-align: center;
}

 

..Altså rett og slett øverst i dokumentet. Lastet det opp, men så ingen effekt av det; ingen border, teksten havnet under bildet osv..

Er sikker på at infoen er skrevet likt. Underlig. Får spekulere litt mer på det.

 

God natt og takk for all hjelp :)

 

Edit: Nå funker det stort sett, men jeg får ikke teksten venstrestilt av en eller annen grunn. Virker ikke som browseren plukker opp text-align: left;..

Endret av _nomad
Lenke til kommentar
Gjest

Gjest

Skrevet
Skrevet

Edit: Nå funker det stort sett, men jeg får ikke teksten venstrestilt av en eller annen grunn. Virker ikke som browseren plukker opp text-align: left;..

 

 

Har du husket å sette teksten inne i en paragraf tag, slik:

 

<p> Tekst tekst tekst </p>

 

?

Lenke til kommentar
_nomad

_nomad

Skrevet
  • Forfatter
Skrevet

Hei!

Ja, men jeg tror html-editoren i WordPress var det som ødela litt for meg en stund, ved å fjerne div-tagger osv.. Fikk skiftet ut den, da ble det meste greit :)

 

Jeg hadde dog litt problemer med ålage linjeskift mellom divene; dvs de endte opp bortenfor hverandre hele tiden. Løste dette med <br clear="all">. Vet ikke om det er helt etter boka, men det funket i hvertfall :)

Lenke til kommentar
Gjest

Gjest

Skrevet
Skrevet
Hei!

Ja, men jeg tror html-editoren i WordPress var det som ødela litt for meg en stund, ved å fjerne div-tagger osv.. Fikk skiftet ut den, da ble det meste greit :)

 

Jeg hadde dog litt problemer med ålage linjeskift mellom divene; dvs de endte opp bortenfor hverandre hele tiden. Løste dette med <br clear="all">. Vet ikke om det er helt etter boka, men det funket i hvertfall :)

 

 

Blir noe vanskelig å si hva som funker og ikke funker når jeg ikke kan

se koden ;) Men funker det så kjør på :)

God Hælg, nå er det klart for Julebord på Grand Hotell Obama Style ^^

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...