Permalänk
Medlem

Myspace hjälp, CSS

Hejsan alla glada!

Sitter med en liten uppgift just nu till en grupp - The Brimstone Days. Ska göra om deras gamla Myspace sida till en snyggare och mer passande till deras nya EP.

Har börjat en del men har lite saker som jag skulle behöva lite hjälp med, sidan ser just nu ut såhär: http://www.myspace.com/thetestbrim
Har använt mig av en myspace generator, men har lyckats rensa bort en del smuts i koden.

Har lite problem med headern och dess placering, den ska ligga helt centrerad, dvs precis i det mörkbruna vertikala strecket, koden ser ut som följer:

<style> body { background-position:top center; margin-top: 342; } div.topbanner { top: 0; right: 0%; width: 100%; height: 100%; position: absolute; } </style> <div class="topbanner"><img src="http://wb655917.one.se/tbd_top.png" /></div>

Hjälp till exakt centrering hade alltså uppskattats väldigt mycket!

Sen undrar jag om någon vet hur man ändrar saker som "thetest: Vänners kommentarer" hur man får bort texten och istället ersätter den med bilder som finns tex här: http://www.myspace.com/everytimeidie här har dom bland annat ersatt sin allmänna information mot en bild. Hur hittar man bland alla dessa?

Min css kod ser ut som följer:

<style> .pimp_my_profile { Generated at Pimp My Profile www.pimp-my-profile.com } table, tr, td { background-color:transparent; } table, tr, td { background-color:transparent; border:none; border-width:0px; } table table table { width:100%; max-width: 800px; } table table table table { width:100%;; } body, .bodyContent { background-image:url(http://wb655917.one.se/tbd_myspacebg2.jpg); background-position:Center Center; background-attachment:fixed; border-width:0px; border-style:Solid; } table table { border:0px; } table table table table { border:0px; background-image:none; background-color:transparent; } table table table { border-style:Solid; border-width:0px; background-attachment:fixed; } table, tr, td, li, p, div { color:bba97e; } .btext { color:bba97e; } .blacktext10 { color:bba97e; } .blacktext12 { color:bba97e; } .lightbluetext8 { color:bba97e; } .orangetext15 { color:bba97e; } .redtext { color:bba97e; } .redbtext { color:bba97e; } .text { color:bba97e; } .whitetext12 { color:bba97e; } a:active, a:visited, a:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:link { color:bba97e; } a:hover, a.searchlinksmall:hover { color:bba97e; } a.navbar:active, a.navbar:visited, a.navbar:link { color:bba97e; } a.navbar:hover { color:bba97e; } a.redlink:active, a.redlink:visited, a.redlink:link { color:bba97e; } a.redlink:hover { color:bba97e; } .nametext { color:bba97e; } .contactTable { width:300px!important; height:150px!important; padding:0px!important; background-image:url(http://wb655917.one.se/tbd_contact.png); background-attachment:scroll; background-position:center center; background-repeat:no-repeat; background-color:transparent;} .contactTable table, table.contactTable td {padding:0px !important; border:0px; background-color:transparent; background-image:none;} .contactTable a img {visibility:hidden; border:0px!important;}.contactTable a {display:block; height:28px; width:115px;background-color:transparent!important;} .contactTable .text {font-size:1px!important;}.contactTable .text, .contactTable a, .contactTable img {filter:none!important;background-color:none!important;} .contactTable .whitetext12 {display:none;; } </style> <img src="http://wb655917.one.se/tbd_biography.png" /> <br /><br /> <p> The Brimstone Days aim to be the liveband with enough energy to get the listener and the audience caught up in an euphoric thrill. With clear influences from the 70s and with catchy tunes, they deliver retro-rock with a modern twist to dance to. <br /><br /> On the road of becoming The Brimstone Days many genres, plectrum and sticks have been worn out, and this not without result. The two original members, Håkan and Johannes, both feel they are heading towards something big. <br /><br /> After the recordings of the EP “Flowers and Rainbows” during spring 2009 bass player Elias Dellow decided to leave the band. In the beginning this drop-out was tough for the remaining bandmembers since the band now wasn't the powertrio they used to be. Shortly thereafter there was a new spark when bass player Hampus Hallgard joined and again the powertrio was ready to deliver. <br /><br /> With the EP recorded and a liveshow that will take you to the flowers and the rainbows, The Brimstone Days has their minds set for bringing you tons of energy next time you catch them at a show, they now stand ready to conquer the stage. </p> <br /> <img src="http://wb655917.one.se/tbd_pastevents2009.png" />
 <br /><br /> <p> 30 aug 2009 - Gardenparty [Staffanstorp] <br /> 27 jun 2009 - Maglehemsfestivalen [Maglehem] <br /> 21 jun 2009 - Stora Herrestad Gästgifvaregård [Ystad] <br /> 30 maj 2009 - Lommadagen [Lomma] 
 <br /> 23 maj 2009 - Hemvärnsgården [Lund] <br /> 13 maj 2009 - Krischansta nation [Lund] 
 <br /> 9 maj 2009 - KB (Emergenza) [Malmö] <br /> 6 maj 2009 - Malmö högskola (Charity concert) [Malmö] 
 <br /> 16 apr 2009 - Malmö högskola (Kölsvinet) [Malmö] 
 <br /> 17 mar 2009 - Debaser (Emergenza) [Malmö] <br /> 11 feb 2009 - Krischansta Nation [Lund] <br /> 29 jan 2009 - Bodoni (Emergenza) [Malmö] 
 <br /> 8 jan 2009 - Vinylbaren, KB [Malmö] 


 </p> <br /> <p><b> Photo in profil: David Olhed <br /> Photos in slideshow: Martin Lang and Andreas Ljung <br /> Myspace layout: Danny Pedersen <br /> The video "New EP out now": Martin Lang <br /> <br /> <br /> Booking & Contacts: brimstonedays@hotmail.com </p></b>

Hjälp uppskattas och jag tackar på förhand!

Med vänlig hälsning Danny Pedersen

Permalänk
Medlem

Om jag förstår vad du vill.. testa att sätta "text-align: center" på .topbanner.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av Teknocide
Om jag förstår vad du vill.. testa att sätta "text-align: center" på .topbanner.

Skrev även in ett "left: 0%;" och fick den nu helt centrerad.

Tack så mycket!

EDIT: Det ser bra ut i safari och firefox, men helt åt skogen i IE, där ligger den helt åt höger, hur kan man fixa något sånt här?

Permalänk
Medlem

Kan bara testa IE8 här.

Du behöver inte ha left: 0% och inte enhet över huvud taget på 0. 0% = 0px = 0em = 0km.
Det ska räcka med om du sätter

.topbanner { left: 0; top: 0; width: 100%; position: absolute; text-align: center;

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

För mig själv ser det galet ut i IE 8... den ligger fastklistrad till vänster.

Finns det något sätt att lösa detta på? Är det css som klyddar?

Återigen, väldigt tacksam för all hjälp jag får!
Än har det hjälpt mig mycket

Med vänlig hälsning, Danny Pedersen

Permalänk
Medlem

Du kan ju testa det här (funkar bra på mina sidor oavsett browser), la till lite extra skräp där i koden, men det viktigaste i exemplet är margin: 0 auto;

{position: relative; top: 0px; margin: 0 auto; height: 125px; width: 600px; background-image: url(tbd_top.png);}

Visa signatur

AMD Ryzen 9 5900x| Asus ROG Crosshair VIII Dark Hero X570 | G-Skill 32GB DDR4 3600Mhz CL16 Trident | MSI Geforce RTX 3080 10GB Gaming X Trio | Phantek P600S | Creative Sound BlasterX AE-5 Plus | Corsair RM850X 850W | Samsung 980 Pro 1TB M.2 NVME | Kingston A2000 1TB M2. NVME | Corsair H150i Pro XT | Win 10 Home 64
LG 38GN950 | LG Oled 65C1, 65C7 och 55C9
Xbox Series X | Playstation 5 | PSVR 2 | Oculus Quest 2

Permalänk
Medlem

Egenskapen text-align ska endast centrera text, och ska därmed inte fungera i någon webbläsare. Är överraskad att det gör det i just Safari och Firefox. Använd margin: 0 auto; istället.

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av You
Egenskapen text-align ska endast centrera text, och ska därmed inte fungera i någon webbläsare. Är överraskad att det gör det i just Safari och Firefox. Använd margin: 0 auto; istället.

Det är en image i en div. Image är ett inline-element.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Har nu provat det som ni skrev som svar men har ej fått det att funka, tror det har att göra med "position:absolute;" den måste ha det värdet för att hamna högst upp på sidan, då myspace använder sig utav "moduler". Ändrar jag värdet till relativ hamnar då bilden i rutan som håller informationen om bandmedlemmarna...

Tar jag bort "text-align:center;" och istället har "margin:auto;" hamnar den åter igen till vänster (safari för tillfället)

Permalänk
Medlem

Hur mycket kontroll har du över CSS:en? Du skulle kunna göra något sånt här

.topbanner { position: absolute; top: 0; left: 0; width: 100%; } .topbanner img { display: block; margin: 0 auto; }

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Jag har faktiskt inte riktigt koll på det, men det bör vara en del, med tanke på vad andra lyckas göra med sina myspace sidor...

Provade även klistra in den senaste koden, funkade i FF och safari, fortfarande samma problem i IE...

Permalänk
Medlem
Citat:

Ursprungligen inskrivet av FSAS
Jag har faktiskt inte riktigt koll på det, men det bör vara en del, med tanke på vad andra lyckas göra med sina myspace sidor...

Provade även klistra in den senaste koden, funkade i FF och safari, fortfarande samma problem i IE...

Myspace är verkligen ett enda stort hack..
Sitter och gissar mest nu. En anledning till att det strular kan vara att stilarna är definierade mitt i <body>-tagen. Om du kan köra stilarna inline istället så testa det.

En annan sak du kan testa är att behålla .topbanner som den är just nu och lägga till width: 800px; height: 351px i .topbanner img {}

Vidare kan du testa att temporärt sätta en bakgrundsfärg eller ram på .topbanner för att se hur stor den blir. i FF går den rakt över hela sidan, men jag har ingen aning om ifall den är 100% bred i IE. Är den inte det så kan det vara det som är problemet. (Det borde räckt med text-align: center som jag skrev från början..)

Förresten, kan du bryta den ruskigt långa raden i ditt första inlägg?
Den jävlas med forumbredden

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Har nu skrivit in de korrekta värdena på bildstorleken, dvs 800x351px.
Jag har även tagit bort "left" värdet helt, ger detta då bilden sitt utgångsläge? Eller vad man kan kalla det. Ni förstår säkert vad jag menar, hehe

Tänk att något så lätt ska behöva vara så svårt...

Permalänk
Medlem

Left-värdet anges för att sätta din <div> längst till vänster i det element den står relativt till: Närmsta parent-element med position: relative, eller body om inget sådant finns.

Med left: 0 och width 100% BORDE din <img> ligga centrerat efter alla konstens regler eftersom

1) om .topbanner är relativ till body så är width 100% lika med hela fönstrets bredd. text-align: center sätter då bilden i mitten.

2) om .topbanner är relativt till ett annat centrerat element blir width 100% lika brett som detta. left: 0 ser då till att vi placerar <div>-en längst till vänster i detta element. Eftersom vidden är lika stor på de båda elementen placeras alltså .topbanner i mitten.

Nu fungerar det ju uppenbarligen inte på detta vis just i detta fall.. >:\

edit: ny idé, nya grepp. Testa

.topbanner { left: 50%; margin-left: -400px; position: absolute; text-align: center; top: 0; width: 800px; }

ta bort .topbanner img {}-satsen

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Hmm tror jag händer med!

Men om man placerar in bilden med hjälp utav % värde, är det något att rekommendera?

Edit: Verkar som om du hann före med det svaret, testar!

Fungerade i alla nu! Tack tack tack och åter tack ska du ha! Detta har hjälp otroligt mycket!

Permalänk
Medlem

Skönt, då kan jag sova inatt Kul att det fungerade till sist!

Visa signatur

Kom-pa-TI-bilitet

Permalänk

Jag undrar om det är någon här som vet hur man stylar sin myspace sida? jag har en artist profil, har försökt länge med att ändra den från standard men jag förstår inte hur man ska göra.

vad är det som krävs? Jag skulle vilja ha en enkel bakrund med någon logo i hörnet längs ner, är det svårt?

EDIT: som det första inlägget kanske, väldigt fin sida måste jag säga, en bild som täcker hela utrymmet.