PDA

View Full Version : Position text with div, table or tags?


henryhayes
02-17-2011, 12:48 PM
I having seriuos trouble adding and positioning text. The site is css - divs.


For adding text im using p- and headingtags inside the divs in the htmlcode. Im making CSS rules for each tag (<p> <h1> 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; sometimes not even visible because it doesnt stay inside the div.


However if i use "CSS Rule Definition" and apply font-family, font-size etc directly to the div, my text stays at the same place in every browser. Adding text this way i dont use p- and heading-tags. 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? And postion each p – and heading-tag?
Will applying display:inline or similar to the div do any good?
Maybe theres no point in using a div for text in the first place?


Im very confused. Any help or link showing me the right way to place text on a website will be appreciated.

domedia
02-17-2011, 01:41 PM
The answer to everything above is 'maybe' :)

Link?

henryhayes
02-17-2011, 03:15 PM
Thx for reply. Must admit that the answer "maybe" to all options sounds frightening!
Im working on a local site; unfortunately no link at present. But here is an outtake of code which describes the issue.



When loaded in FF and Safari position is ok. In Opera text disappears at top and in IE hardly visible. What am i doing wrong?

#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;
}


And the html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>lupatest</title>
<link href="../css/maincss.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
h1,h2,h3,h4,h5,h6 {
font-family: Arial, Helvetica, sans-serif;
}
h1 {
font-size: 16px;
color: #333;
}
-->
</style></head>

<body bgcolor="#FF9900">
<div id="mainwrap">
<div id="header">
<div id="logowrap"></div>
<div id="headertxt"><h1 align="center">MATTI HALLES - butik - galleri - værksted - LUPAZONE TLF 22 82 74 66</h1></div>
</div>
</div>
</body>
</html>

henryhayes
02-17-2011, 09:49 PM
I have tried removing line-height with the result that the line is in correct position 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 for p and headings which reduces SEO availability.

I should be able to use the tags and still maintain control over positioning regardless browser choice right?

henryhayes
02-17-2011, 09:50 PM
I have tried changing fontsize from pixels to both ems and %. Still the same problem.

johnMoss
02-18-2011, 12:52 AM
Try doing a master reset. If you're unfamiliar with this, a master reset is a rule declaration at the top of your css page which essentially zeros out (or replaces) any predefined defaults per browser. After this, you can leave as is or redefine them to your particular liking one at a time or enmasse within this definition.

Here's an example:


html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}


You can read more about master resets at: http://www.learn-css-tutorial.com/CSS-Page-Layout.cfm

Corrosive
02-18-2011, 07:08 AM
I think you have a bit of a case of divitis, i.e. wrapping things in a div that have no need. For example;

<div id="headertxt"><h1 align="center">MATTI HALLES - butik - galleri - værksted - LUPAZONE TLF 22 82 74 66</h1></div>
</div>

Could that not just be the h1 tag on it's own? Also you use z-index with relative positioning and it shouldn't really work.

henryhayes
02-19-2011, 10:10 AM
Thx for replies. Ill look into master reset later today.

Regarding the use of divs: I agree; the div "headertxt" is only there as a container for the line of text. Which shouldn't really be necessary. I can add the text directly in the "header" div instead, but it leaves me with the same question:
How can i control the vertical position and why is the vertical position not the same in all browsers?
How would you do it? Can you post some code?

johnMoss
02-19-2011, 01:43 PM
There are subtle differences among various browsers pertaining to how much margin & such is given to a particular tag. The way around it is CSS, and be it img, P, header, or div, all of these are still containers and therefore can be manipulated to a precise location by using a class or ID designation in CSS. Take your header and give it a class.


<h2 class="topHeader"> your text here </h2>


then assign CSS properties to it.


.topHeader{
margin-left:25px;
color:#3487bc;
etc.
}


In Dreamweaver if you triple click on the header, it will highlight the entire tag and the properties inspector will show your header as 'targeted rule'. Click on the edit rule button & go from there...

henryhayes
02-19-2011, 02:47 PM
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?

johnMoss
02-19-2011, 02:52 PM
Any time you apply a float property to a container, underlying objects want to rise up and wrap around it. Although a div is a container, it doesn't necessarily mean its a wall that nothing shall pass.

henryhayes
02-19-2011, 09:05 PM
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:inline

Could 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;
}