finnstone
asked on
turn html + css into just css
i think its called inline but i need these two things combined please!
IE remove the class stuff
html
<div class="speechBubble">
<div class="pointer"></div>
<div class="bubble">
<div class="topLine">PAY WITH A</div>
<div class="botLine">TWEET</div >
</div>
</div>
css
.speechBubble {
position:relative
}
.pointer {
width: 0;
height: 0;
border-top: 25px solid rgb(16,125,195);
border-left: 25px solid transparent;
float:left;
margin-top:50px
}
.bubble {
width:300px;
height:110px;
border-radius:15px;
background-color:rgb(16,12 5,195);
margin-left:25px;
text-align:center;
padding:20px 0;
color:rgb(23,178,136);
font-family:arial;
}
.topLine {
font-size:2.8em;
line-height:1em
}
.botLine {
font-size:4.6em;
font-weight:bold;
line-height:.8em
}
IE remove the class stuff
html
<div class="speechBubble">
<div class="pointer"></div>
<div class="bubble">
<div class="topLine">PAY WITH A</div>
<div class="botLine">TWEET</div
</div>
</div>
css
.speechBubble {
position:relative
}
.pointer {
width: 0;
height: 0;
border-top: 25px solid rgb(16,125,195);
border-left: 25px solid transparent;
float:left;
margin-top:50px
}
.bubble {
width:300px;
height:110px;
border-radius:15px;
background-color:rgb(16,12
margin-left:25px;
text-align:center;
padding:20px 0;
color:rgb(23,178,136);
font-family:arial;
}
.topLine {
font-size:2.8em;
line-height:1em
}
.botLine {
font-size:4.6em;
font-weight:bold;
line-height:.8em
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
can you help out with my new one? here is the file where i tried to add your code
https://www.dropbox.com/s/726fheax4m4wp3w/hmmm.html?dl=0
https://www.dropbox.com/s/726fheax4m4wp3w/hmmm.html?dl=0
Just add text-decoration:none to the anchor tag. Don't forget the closing > on the anchor tag:
<a style="position: relative; text-decoration: none;" > <div="" href="mini.EDITEDOUT.co">
...
<a style="position: relative; text-decoration: none;" > <div="" href="mini.EDITEDOUT.co">
...
ASKER
can you include the first few lines cant reconcile that..
ASKER
where does the closing </a go?
ASKER
this part doesnt seem right
<div="" href="mini.xxx.co">
<div="" href="mini.xxx.co">
You are right, that's a complete mess too. Here's the markup you posted to Dropbox.
<div="" href="mini.EDITEDOUT.co">
The missing > in the anchor tag is in the first code block posted.
<a href="mini.EDITEDOUT.co"
<td style="text-align:center;"><a href="mini.EDITEDOUT.co"<div style="position:relative">
<div style="width: 0;height: 0; border-top:30px solid rgb(16,125,195); border-left:30px solid transparent; float:left; margin-top:50px"></div>
<div style="width:337px;height:114px;border-radius:15px; background-color:rgb(16,125,195);margin-left:30px;text-align:center;padding:33px 0;color:rgb(23,178,136);font-family:arial;">
<div style="font-size:3.4em;line-height:.7em">PAY WITH A</div>
<div style="font-size:5.5em;font-weight:bold;line-height:1em">TWEET</div>
</div>
</div></a></td>
And here is how the browser is interpreting the markup.<td style="text-align:center;"><a style="position:relative" <div="" href="mini.EDITEDOUT.co">
<div style="width: 0;height: 0; border-top:30px solid rgb(16,125,195); border-left:30px solid transparent; float:left; margin-top:50px"></div>
<div style="width:337px;height:114px;border-radius:15px; background-color:rgb(16,125,195);margin-left:30px;text-align:center;padding:33px 0;color:rgb(23,178,136);font-family:arial;">
<div style="font-size:3.4em;line-height:.7em">PAY WITH A</div>
<div style="font-size:5.5em;font-weight:bold;line-height:1em">TWEET</div>
</div>
</a></td>
That's where I got this piece:<div="" href="mini.EDITEDOUT.co">
The missing > in the anchor tag is in the first code block posted.
<a href="mini.EDITEDOUT.co"
ASKER
can you tell me how to make the button that link ? sorry. if you can fix that code, much appreciated!
Add the stuff in bold to your markup.
<a href="mini.EDITEDOUT.co" style="text-decoration:non e">
<a href="mini.EDITEDOUT.co" style="text-decoration:non
ASKER
thank!
ASKER
thx
ASKER