-
Position text with div, table or tags
I having seriuos trouble adding text to webpage. The site is css – divs build in dw cs4.
For adding text im using p- and headingtags inside the divs in the htmlcode. Im making CSS rules for each tag (
etc) and placing them in same style sheet as the divs.
The result when tested in different browsers, is that the text jumps around taking very different positions.However if i use “CSS Rule Definition” box in DW and apply font-family, font-size etc from there, my text stays at the same place in every browser. But not using heading tags will reduce SEO yes?
Is using a table inside the div a better option? Or making a compound CSS rule like this #div #p?
Im desperate now. Any help or link showing me how to place text on a website will be appreciated.
-
9 Replies
-
Many times a compound rule is the way to go. Hard to tell you how to organize your rules, cos everyone has his own way.
Understanding inheritance in CSS is the key for this kind of problems.
I hope this helps
-
i think you might find though, the trouble with the Heading tags is they standardise with certain settings.
You can alter the font size of course, but you also need to define padding and margins for the Heading tag. If you add the rule padding 0 and margin 0 then this aught to prevent the moving around you are talking about. (whenever i start a new rule in Dreamweaver i always now, as a standard, put 0 in both of these settings until i get back to those rules and need to define specific settings on the paddings. It saves alot of confusion which i think might be what you are struggling with.
Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o) -
Hello Richard and Fernando. Thx for replies. However neither answers solves my problem. Adding “0” to margin and padding just pushes the line of text a bit further up i the div, but the problem remains the same: The line of text shows differently depending which browser i use.
I’ve tried changing font-size from px to ems or %. No result
Tried removing line-height: 0px; with no resultHeres some code:
#mainwrap {
background-color: #999;
height: 670px;
width: 950px;
margin-right: auto;
margin-left: auto;
overflow: visible;
position: relative;
visibility: visible;
z-index: 1;
top: 10px;
}
#header {
float: left;
height: 60px;
width: 950px;
overflow: hidden;
position: relative;
visibility: visible;
z-index: 2;
border-top-width: 5px;
border-top-style: solid;
background-color: #333;
border-top-color: #FFF;
}
#logowrap {
float: left;
height: 52px;
width: 240px;
overflow: hidden;
position: relative;
visibility: visible;
z-index: 3;
background-color: transparent;
clip: rect(-4px,auto,auto,auto);
}
#headertxt {
background-color: #FFF;
float: left;
height: 22px;
width: 710px;
overflow: hidden;
position: relative;
visibility: visible;
z-index: 3;
line-height: 0px;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ive uploaded two screenshots. The correct position in Safari and wrong position in IE
-
paste all the code here please not just a snippet, we cant see whats where the way you did it, but meanwhile take lineheight 0px out as a rule #headertxt
Richard Williams
p.s. Please remember to rate our post replies and tick if solved. Also, please remember that we here are NOT employed by Adobe, we do this out of love and fun, so its always nice to recieve a Please and Thank You! :o) -
Hello Richard. The code posted is what causes the problem. The photos illustrates the posted code in firefox and IE. As you can see the line of text
h1changes position depending on browser.I have tried removing line-height with the result that h1 is ok in IE, but is hardly visible in firefox and safari.
Also ive tried adding “0” to margin and padding with the same result; still different positions depending which browser is used.When im using the “Rule Definitions” in the div to apply the values for font, fontsize, color etc everything is fine in all browsers. The disadvantage of this is that i cant use
pandh1h2etc. Thats reduces SEO availability.I should be able to use the tags and still maintain control over positioning regardless browser choice right?
-
Changing fontsize from pixels to ems or % hasnt solved the positioning issue either. I am getting frustrated..
-
As Richard says, we need to see it all. Have you uploaded it? Can you share a link?
-
Ive found out what causes the trouble:
When applying the values float:left or float:right to a div, the p- and h tags inside the div jumps out of vertical position!
Very strange. Any ideas?
-
OK i think got it now. Spend all day experimenting with css values to solve the issue. Probably not the only way but works for now. Here goes:
When using a p- or heading css rule wrapped by a div – container with position:relative and float:left/right the text wont stay in place vertically.
To maintain correct position of the text inside the div these two values must be added to the p- or heading rule (along with general values for font-family, font-size etc):
Type: line-height:100%
Block: display:inlineCould look like this:
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 100%;
color: #C00;
display: inline;
}Centering or capitalizing the text can be done by adjusting the values in the div – container that holds the p- or heading rule.
text-align: center;
text-transform: uppercase;Could look like this:
#lineoftext {
background-color: #CCC;
float: left;
height: 30px;
width: 550px;
overflow: hidden;
position: relative;
visibility: visible;
z-index: 1;
text-align: center;
text-transform: uppercase;
}
Reply to this Discussion! Login or Sign Up