Header Positioning Consistency issues

  • website: friday.statecollegefarmers.com

    So I am trying to position the elements in the header to A) be relative to one another and B) stay ‘centered’ regardless of resolution or browser(as close as possible, anyway)

    CSS for the elements is as follows:

    #hdrlogo {
	position:relative;
	left:380px;
	top: 20px;

}
#timehdrtop:first-letter {
	text-transform: uppercase;
}
#timehdrtop {
	color: #424242;
        font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
	letter-spacing:0.1em;
	text-align:center;
	margin: 1px auto;
	text-transform: lowercase;
	line-height: 10%;
	font-size: 28pt;
	font-variant: small-caps;
	float:right;
        margin-right: 30px;
	margin-top: -100px;

}
#timehdr:first-letter {
	text-transform: uppercase;
}
#timehdr {
	color: #424242;
        font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
	letter-spacing:0.1em;
	text-align:center;
	margin: 40px auto;
	text-transform: lowercase;
	line-height: 10%;
	font-size: 26pt;
	font-variant: small-caps;
	float:right;
        margin-right: 50px;
	margin-top: -60px;
}

#timesmlhdr:first-letter {
	text-transform: uppercase;
}
#timesmlhdr {
	color: #424242;
        font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
	letter-spacing:0.1em;
	text-align:center;
	margin: 40px auto;
	text-transform: lowercase;
	line-height: 10%;
	font-size: 16pt;
	font-variant: small-caps;
	float:right;
        margin-right: -310px;
	margin-top: -20px;
}
#lrghdr:first-letter {
        text-transform: uppercase;
}
#lrghdr {
        color: #424242;
        font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
	letter-spacing:0.1em;
	text-align:center;
	margin: 40px auto;
	text-transform: lowercase;
	line-height: 10%;
	font-size: 37pt;
	font-variant: small-caps;
	float:left;
	margin-top: -100px;
	margin-left:10px;
}
#smlhdr:first-letter {
        text-transform: uppercase;
}
#smlhdr {
        color: #424242;
        font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
	letter-spacing:0.1em;
	text-align:center;
	margin: 40px auto;
	text-transform: lowercase;
	line-height: 100%;
	font-size: 14pt;
	font-variant: small-caps;
	float:left;
	margin-top:-85px;
	margin-left:60px;
}

    As it exists now, I am unable to figure out how to get the text on either side to stay floating on the right and left, and get the logo to stay centered regardless of resolution.

    EDIT: Using relative positioning creates a ton of white space in the header – so I moved away from that.

Viewing 1 replies (of 1 total)
  • Thread Starter Tee_Yum

    (@tee_yum)

    The closest solution I have found so far is to make all of the positioning relative – which adds a metric ton of white space to the header.

    Logically this makes sense, as the objects are positioned relative to where they would have been, so that space is left open.

    Halps D:

Viewing 1 replies (of 1 total)
  • The topic ‘Header Positioning Consistency issues’ is closed to new replies.