|
Hi all!
I'm relatively new to CSS programming and stuck with some problem. I searched the web and found nothing that could help me.
I have an element that contains both text and an image *.png. I want to transform the element a little bit to make the text and its flow diagonal but I do NOT want to rotate picture.
What I have is something like this
myelement{width:132px; height:100px; padding:24px 0 0 48px; vertical-align:bottom; background:url(images/pic.png) no-repeat 0 100%;}
If I add
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg);
-moz-transform:skew(-20deg,0deg);
to it, it rotates as a whole! I don't need it.
If you want to put all the properties inside one element, don't bother answering. The web is overfilled with this kind of advice and is intended to rotate images.
Thanks to all who replies!
|
|
|
|
|
MajinSaha wrote: If you want to put all the properties inside one element, don't bother answering.
Please never restrict people from giving an answer closer to their understanding, if i were me i would simply get put off in answering this question!
Anyway, one known way to add different styling to elements is basically to use different class names on such elements or carefully put inline styling on the element itself.
I'm assuming that you have:
<div class="myelement">
<p class="txtTransform">This is the text you would like to transform!</p>
</div>
Above you have a "div" with a background image and a "p" inside a "div". To transform the text inside the "p" alone, simply add your transformation css effects to the extra class i put in place on the "p" which is: "txtTransform" like so:
.txtTransform
{
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg);
-moz-transform:skew(-20deg,0deg);
}
That's the basic way to separate css effects, using different class names for general and specific elements.
Happy coding,
Morgs
|
|
|
|
|
hi <b>(SORRY FOR MY BAD ENGLISH )</b>i have build a body container
like <div id="body"> </div>
i put in it this :
<div id="body">
<div id="search"></div>
<div id="descretpion"></div>
</div>
the search and the descretpion is :
#descretpion{
width: 30%;
height: 200px;
margin-left: 69%;
background-color:#ccccff;
border-bottom: 5px solid #000000;
border-top: 5px solid #000000;
border-right: 5px solid #000000;
border-left: 5px solid #000000;
}
#search{
width: 40%;
height: 200px;
background-color: red;
}
when i run the code the don't be inside each other , the descretpion be above the search , look i close the div tag for every tag ,where is the wrong
ty
<b>(SORRY FOR MY BAD ENGLISH)</b>
|
|
|
|
|
I can not understand clearly. Is it "description" in "search" and "search" in "body"? Or just "search" and "description" both in "body"?
Good day,Good job,Good life
|
|
|
|
|
Hi,
I don't understand clearly. But i would like to explain some thing.
If you need to have the "description" inside "Search", it should be like this,
<div id="body">
<div id="search">
<div id="description">
enclose the contents of description here..
</div>
</div>
</div>
then you should apply style for the containers as you need..
|
|
|
|
|
The problem is you </DIV>'s
You are closing one div before opening the next.
Try this format:
<div>
Container1
<div>
Container2
</div>
</div>
------------------------------------
I will never again mention that I was the poster of the One Millionth Lounge Post, nor that it was complete drivel. Dalek Dave
CCC Link[ ^]
Trolls[ ^]
|
|
|
|
|
Hi,
According to my understanding you want Search and Description in the main Body Div tag.So that Search and Description be on one another.But when you run the code, they are one below the other.
Try giving the Z index values to the search and Description divs.This will make the divs to over lap.
-Manognya
__________________________________________________
$ God gives what is best.Not what all you wish
|
|
|
|
|
Have you looked for other css rules that may affect your divs..?
like
body div{
}
or
div div{
}
maybe with a float value?
Chris J
www.redash.org
|
|
|
|
|
in some website, they will required a verification to complete your registration such as Google Places, Google Gmail, etc. They will send an automatic phone call to your mobile which tells you the code..
how can I do that?
|
|
|
|
|
I don't recall gmail ever ringing my phone. What you may mean is sending a txt message to the phone. There are a number of resources that cover sending sms from various systems. All you need to do is look.
No comment
|
|
|
|
|
that was before, now they have two options, either send the activation code by text message or by phone call
|
|
|
|
|
I suggest looking for automated dialer software. I don't recommend trying to create and host one though as the cost/benefit ratio isn't great, last time we analyzed it some years ago it was cheaper to go with an agency.
|
|
|
|
|
I wanted to validate my HTMl so I went to the site: http://validator.w3.org.
The top line of my html is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or
g/TR/html4/loose.dtd">
The message I am getting from the validator is:
Byte-Order Mark found in UTF-8 File.
The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.
As far as I can tell, I have no special characters in the file. I would like to fix this error but I have no idea how to do so. I am hoping somebody here can help.
Thanks
Bob
|
|
|
|
|
1. What editor (or IDE or whatever) did you create the HTML with?
2. What are you looking at it with?
If you have a hex editor, have a look at the start of the file. Many "smart" editors don't show you the BOM, and some might even use it intelligently.
Cheers,
Peter
Software rusts. Simon Stephenson, ca 1994.
|
|
|
|
|
Peter,
Thanks for the response.
I am on a Windows machine. I am using the version of VI that comes with cygwin. I have also looked at the file by dumping it out with od (also part of cygwin). Neither tool shows and funny characters.
I am also wondering, if my HTML goes through the validator with out any errors, does it really matter? Will it improve my search engine ranking?
Bob
|
|
|
|
|
No errors from the validator is good, but not essential by any means. I would guess that a majority of good working web pages would fail 'strict' validation in some way. Browsers are much more forgiving. (Just try one with unterminated lists, badly formed tables, etc. The browser makes a pretty good guess.)
Validation and search engine rankings are orthogonal - they have no correlation at all. I'm guessing the search ending scrapers are just as tolerant of malformed HTML.
Cheers,
Peter
Software rusts. Simon Stephenson, ca 1994.
|
|
|
|
|
Did you type the message in using Dreamweaver, or did you write the content in another app and paste it in? I ask because if you used a word processor sometimes it's hard to tell a special character from a similar regular character. For example, double and single curly quotation marks can look just like straight quotations marks when pasted into another app, but they'll mess things up every time.
Have you considered using the HTML 5 DOCTYPE? Might still give you the problem, but if you're making new pages why not make the break?
|
|
|
|
|
Hi,
Why I am getting this:
No Character encoding declared at document level
when validating my php file in dreamweaver?
Thanks,
Jassim
|
|
|
|
|
|
hey!!!
I know that!
I already have the:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
but it is populating from include.
I am only asking to check if it's something to do with lang type or if I have to add something to the DOCTYPE because when double clicking the warning in dreamwaver it goes to the DOCTYPE line
|
|
|
|
|
Hi,
Please declare this on top of the page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
|
|
|
|
|
I'm developing a website for my company and have run into a formatting issue that I cannot resolve. I know different browser's can format the same page different ways, so from the start I had two different CSS files; one for Chrome and one for IE8. The webpage displays correctly on all the computers my office in Chrome. However on some computer the webpage is not displaying correctly in IE8.
All the computers are Windows XP SP2 running IE8. All the browsers are running in the same mode (Standards Mode). Some of the computer are running in different resolutions, however I tried all the resolution settings on each of the computer and the page still displays the same way.
The problem is I have a section of HTML wrapped in a tag called "page". In the CSS file for IE8 I have the following code:
#page
{
min-height: 100%;
margin-top: -388px;
left: 191px;
width: 1051px;
position: relative;
padding-left: 5px;
border: none 1px red;
z-index: 5;
}
Now on the computer where the page is not displaying properly, the "page" element in shifted upwards and I need to change the margin-top: -388px; to margin-top: -310px; . I can't figure out what the position is 70px different between computers with the same OS, browsers, and resolution. I was hoping that I can auto detect something and change the CSS in my code-behind, however they are all running the exact same version of IE, so I don't know what I could detect.
Any help with this would be greatly appreciated. We are supposed to go live the weekend, but my company wants this fixed and I just don't have an answer to why this is occur. Thanks in advance for any help.
Dominick
P.S. I only have the border element so that way I could track the element during testing. When the site goes live the border will be removed.
|
|
|
|
|
Ensure that compatibility button in the address bar is not activated so that the page is render for IE 8 and not a previous version.
Philippe Mori
|
|
|
|
|
Hi,
please avoid setting negative values to margin attributes...
|
|
|
|
|