469,578 Members | 1,888 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,578 developers. It's quick & easy.

>.< How do i

How do i convert my HTML to a CSS format...i put this image sequence togther in HTML but i want to be able to post it right...but i dont know how to go about doing that. Some one please help

<html>
<head>
<style type="text/css">

p.ridge {border-color: #FFD700; position: absolute; top:690px; left: 260px; width: 100;
border-style: ridge;text-align: center;font-family: times; color: #00000}

b.ridge {border-color: #FFD700; position: absolute; top:740px; left: 215px; width: 190;
border-style: ridge;text-align: center;font-family: times; color: #00000}


</style>


</head>

<body>

<IMG STYLE="position:absolute; TOP:0px; Left: 70px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">


<IMG STYLE="position:absolute; TOP:0px; Left: 102px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:0px; Left: 132px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:0px; Left: 162px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:0px; Left: 192px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:0px; Left: 222px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:0px; Left: 252px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:0px; Left: 282px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:0px; Left: 312px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:0px; Left: 342px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:0px; Left: 372px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:0px; Left: 402px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:0px; Left: 432px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:0px; Left: 462px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:0px; Left: 492px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:0px; Left: 522px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">
<IMG STYLE="position:absolute; TOP:0px; Left: 552px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:660px; Left: 70px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">


<IMG STYLE="position:absolute; TOP:660px; Left: 102px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:660px; Left: 132px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:660px; Left: 162px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:660px; Left: 192px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:660px; Left: 222px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:660px; Left: 252px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:660px; Left: 282px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:660px; Left: 312px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:660px; Left: 342px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:660px; Left: 372px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:660px; Left: 402px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:660px; Left: 432px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:660px; Left: 462px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:660px; Left: 492px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:660px; Left: 522px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">
<IMG STYLE="position:absolute; TOP:660px; Left: 552px; WIDTH:30px; HEIGHT:30px" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG STYLE="position:absolute; TOP:35px; LEFT:100px; WIDTH:449px; HEIGHT:621px" SRC="http://i26.photobucket.com/albums/c142/Graywolf21/ge7h4h.png" alt="klematis"
style="-moz-opacity:0.4;filter:alpha(opacity=99)"
onmouseover="this.style.MozOpacity=1;this.filters. alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.4;this.filters .alpha.opacity=99" />


<IMG STYLE="position:absolute; TOP:450px; LEFT:350px; WIDTH:145px; HEIGHT:175px" SRC="http://avatar2.gaiaonline.com/gaia/members/ava/9a/97/2adbd7b21c979a_flip.png">

<p class="ridge">"STFU Becca"</p>
<b class="ridge">"My hero for all time"</p>

</body>

</html>
Jul 20 '07 #1
5 1306
Bah >.< i need help someone? anyone? >.<
Jul 20 '07 #2
anyone? anyone? please please help me >.<
Jul 20 '07 #3
What exactly are you dissatisfied with?
Are the images not displaying as you want?
If not, how would you like them to display?
Jul 22 '07 #4
If you just want to take your styles out of the HTML into the CSS, try this
(I've left the two larger images for you to work out from the example ;-) )

[HTML]<html>
<head>
<style type="text/css">

p.ridge {border-color: #FFD700; position: absolute; top:690px; left: 260px; width: 100;
border-style: ridge;text-align: center;font-family: times; color: #00000}

b.ridge {border-color: #FFD700; position: absolute; top:740px; left: 215px; width: 190;
border-style: ridge;text-align: center;font-family: times; color: #00000}

.all {
position: absolute;
top: 0;
Left: 70px;
float: left;
}

.topline {
top:0px;
float: left;

}

.bottomline {
position: relative;
top: 630px;
float: left;

}


.flasher {
width:30px;
height:30px;
float: left;
}


</style>


</head>

<body>
<div class="all">
<div class="topline">
<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

</div>



<IMG STYLE="position:absolute; TOP:35px; LEFT:30px; WIDTH:449px; HEIGHT:621px"

SRC="http://i26.photobucket.com/albums/c142/Graywolf21/ge7h4h.png" alt="klematis"
style="-moz-opacity:0.4;filter:alpha(opacity=99)"
onmouseover="this.style.MozOpacity=1;this.filters. alpha.opacity =100"
onmouseout="this.style.MozOpacity=0.4;this.filters .alpha.opaci ty=99" />


<IMG STYLE="position:absolute; TOP:450px; LEFT:280px; WIDTH:145px; HEIGHT:175px"

SRC="http://avatar2.gaiaonline.com/gaia/members/ava/9a/97/2adbd7b21c979a_flip.png">




<div class="bottomline">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

<IMG class="flasher" SRC="http://i146.photobucket.com/albums/r277/Leahxcore1/animated%20and%20flashy/thblue.gif">

</div>

</div>



<p class="ridge">"STFU Becca"</p>
<b class="ridge">"My hero for all time"</p>



</body>

</html>[/HTML]
Jul 22 '07 #5
You can remove all those repeating img elements (thblue.gif) from the HTML and replace them with CSS repeating background-image selectors in a couple of classes. (If you are up for a challenge, I'll give you some time to work that out for yourself before I post my suggested code).
By the way, you have let a couple of spaces slip into your mouse event opacity statements (or maybe that was to disable them on purpose?)
Jul 22 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

9 posts views Thread by Francesco Moi | last post: by
1 post views Thread by Christian Schmidbauer | last post: by
2 posts views Thread by Donald Firesmith | last post: by
2 posts views Thread by Francesco Moi | last post: by
34 posts views Thread by Mark Moore | last post: by
11 posts views Thread by Les Paul | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.