Help with styling div to corner please asap!

Hello,
I apologise if my title was urgent; however, I need to get this issue solved so that I can sty on schedule. In this layout my, there is a white div that holds a line of text. I need it / want it to be in the upper left corner of the browser viewport as seen in this image, which is the image attachment.
In other words in the right corner as the links in the left corner are.

A copy of the page I am talking about is here: http://db.tt/3P1vZis
I tried using a margin as you can see in line 99. However, after a while no matter how large the padding is, the div tag is not pushed any farther right.

Please, I hope someone can help me fix this problem and please reply asap with any questions, comments, or suggestions; and of course, solutions. :slight_smile:

Thanks in Advance and Best Regards,
Team 1504

Hi guys, so I added some content and what I actually wanted in teh box was a rss feed headline news ticker I developed. I do not know if this is a problem with the styling you all helped me write, but when I include the php file all of a sudden pretty much everything on my site disappears.

I do not know if this is a php problem, but it should not be as the news ticker exists completely fine on its own. Or if it is an interference problem with my styling and the php?
I know this is not the PHP forum, but i started a thread there, if you want tot ake a look at that thread to see what I am talking about, I would appreciate it.
The thread is here: http://www.sitepoint.com/forums/showthread.php?p=4703871#post4703871

Thank you and Regards,
Irfan Mir.

Okay.
Thank you for the help and explanation.

I have a 27 inch iMac as well, finally after saving up for a long time, and I understand that the div in the corner is miles away form the links in the opposite corner. After I develop some more and add content, I wills how you what you what the site looks like thus far.

With the min / max width would that just have it so that when viewport is smaller than the min-width the white div in the corner drops to a new line?
and on the maximum width it would be in the far corner, which could be miles away on a huge viewport.

Again, thank you for your help and expect to hear form me soon regarding the finished or more completed product.

Sure, but have a go first yourself. As it stands, that layout it easy to code properly. You said you recognized which parts were poor code, so first whip up a better version as best you know how, and we can advise further if you are stuck. Otherwise, you are asking for free web design services, which is a little different. :wink:

O dear, nesting your site content inside <span>s. That’s terrible coding. Spans are inline elements, and must not contain block level elements (such as divs etc).

So I’m reluctant to suggest a quick fix, as it is really disasterous to stick with this layout. That said, one thing getting in the way is the right padding on the <center> element (an element that is also out of date and should no longer be used :eek: )

You might be better off placing the div inside the #ghead div, which is 100% wide.

Hi,

Elements need a width if you want them to be centred (unless it’s just text and then you can use text-align:center). You can’t center a 100% wide element because it is already centered i.e. it stretches all the way across so there is nothing to center.

In your footer you are targeting a list element that’s not there and you have spelled visited incorrectly.


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body {
    margin:0;
    padding:0
}
body {
    background: #000;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif
}
#header {
    width:100%;
    overflow:hidden;
    font-size:85%;
}
#gbar {
    float:left;
    margin:0;
    padding:2px;
    list-style:none;
    font-size:13px;
}
#gbar li {
    display:inline;
    margin:0 4px 0 0;
}
#gbar li a, #gbar li a:visited {
    color:#fff;
    text-decoration:none;
}
#gbar li a:hover {
    color:#fff;
    text-decoration:underline;
}
.cornerBox {
    float:right;
    width:320px;
    background:#fff;
    color:#000;
    padding:2px 5px;
    margin-right: 5px
}
#container {
    width:100%;
}
#container li a, #cotainer li, a:visited {
    color:#fff;
    text-decoration:none;
}
#container li a:hover {
    color:#fff;
    text-decoration:underline;
}
#main {
    margin:0 auto;
/* meed a specified width here if you have fixed width content to center*/
[B]text-align:center;[/B]
}
#main, #footer {
    clear:both;
}
#logoContainer {
    height:171px;
    padding-top:22px;
}
#logo {
    padding-top:26px;
    border:none;
    width:364px;
    height:144px;
}
#slogan {
    width:642px;
    [B]margin:auto;[/B]
   [B] text-align:center;[/B]
}
#copyright {
    color:#fff;
    font-size:9pt;
}
[B]#copyright a, #copyright a:visited {
 color:#fff;
 text-decoration:none;
}
#copyright  a:hover {
    text-decoration:underline;
}[/B]
</style>
</head>
<body>
<div id="container">
    <div id="header">
        <ul id="gbar">
            <li><a href="http://www.google.com/imghp?hl=en&tab=wi">About</a></li>
            <li><a href="http://video.google.com/?hl=en&tab=wv">Art</a></li>
            <li><a href="http://maps.google.com/maps?hl=en&tab=wl">Blog</a></li>
            <li><a href="http://mail.google.com/mail/?hl=en&tab=wm">Contact</a></li>
            <li><a href="http://mail.google.com/mail/?hl=en&tab=wm">Downloads</a></li>
            <li><a href="http://news.google.com/nwshp?hl=en&tab=wn">Media</a></li>
            <li><a href="http://news.google.com/nwshp?hl=en&tab=wn">Music</a></li>
            <li><a href="http://www.google.com/prdhp?hl=en&tab=wf">Store</a></li>
        </ul>
        <div class="cornerBox">Put ticker here</div>
    </div>
    <div id="main">
        <div id="logoContainer"><a href="assets/images/irfanGoogle.png"><img id="logo" alt="Irfan" src="assets/images/irfanGoogle.png"></a> </div>
        <div id="slogan"> slogan goes here </div>
        <div id="footer">
            <p id="copyright">&copy; 2010, Irfan Mir<br />
                <a href="#/">Copyright statement</a></p>
        </div>
    </div>
</div>
</body>
</html>


You’ll need to show us a picture of the finished design as you just seem to be randomly placing elements. You need some sort of container as you can’t really just put something on the right viewport edge because on my 27" mac monitor that will be miles away from the content on the left. You really need to set a min and max width container if you are developing a fluid site and keep things within a reasonable range.

Thank you guys kindly.
I appreciate the mechanic example Rayzur and you are right, I would never tell a mechanic that and he hire me to design his website well not prehistorically.
I apologise for asking for free design, ralph.m, it was late at night and I had just finished a php project I spent may hours on. It was my laziness and tiredness; however, thank you very much Paul for the help.

You posts reassured me.

I especially like the list

Remove inline styling and style with classes via the stylesheet.

Remove the span elements that are holding block elements and use divs instead.

Remove the center tag and center the page using margin:auto for fixed width elements or if it’s just text use text-align:center on the parent.

Make sure all your attributes are quoted (e.g. <div id=“main”>)

Use a list structure for the menu and not bare anchors next to each other.

Use html elements like h1,h2,h3 etc and not just divs. use p elements for text content and not divs and breaks.

That should get you on the right track and shouldn’t take more than half an hour to do

And i know inline styling is a horrible habit that I developed and I have been trying to break

Also, I put the div in the ghead give and it worked, but the code does need an upheaval.

Thank you again and I will let you know how it goes and ends.

Best Regards,
Team 1504

Hello,
I spent sometime changing somethings and using the better code. The template was very helpful Paul.

This is what I have so far:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">       
<style type="text/css">
html, body {
    margin:0;
    padding:0
}
body {
    background: #000;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif
}
#header {
    width:100&#37;;
    overflow:hidden;
    font-size:85%;
}
#gbar {
    float:left;
    margin:0;
    padding:2px;
    list-style:none;
	font-size:13px;
}
#gbar li {
    display:inline;
    margin:0 4px 0 0;
}
#gbar li a, #gbar li a:visited {
    color:#fff;
    text-decoration:none;
}
 #gbar li a:hover {
    color:#fff;
    text-decoration:underline;
}
.cornerBox {
    float:right;
    width:320px;
    background:#fff;
    color:#000;
    padding:2px 5px;
	margin-right: 5px
}
#container{
	width:100%;
}
#container li a, #cotainer li, a:visited {
	color:#fff;
	text-decoration:none;
}
#container li a:hover{
	color:#fff;
	text-decoration:underline;
}
#main{
	margin:auto 0px auto 0px;
}
#main, #footer {
    clear:both;
}
#logoContainer{
	height:171px;
	padding-top:22px;
}
#logo{
	padding-top:26px;
	border:none;
	width:364px;
	height:144px;
}
#slogan{
	width:642px;
}
#copyright{
	color:#fff;
	font-size:9pt;
}
#copyright li a, #copyright li a:visted{
	color:#fff;
	text-decoration:none;
}
#copyright li a:hover{
	text-decoration:underline;
}
</style>
</head>

<body>
<div id="container">
    <div id="header">
        <ul id="gbar">
            <li><a href="http://www.google.com/imghp?hl=en&tab=wi">About</a></li>
            <li><a href="http://video.google.com/?hl=en&tab=wv">Art</a></li>
            <li><a href="http://maps.google.com/maps?hl=en&tab=wl">Blog</a></li>
            <li><a href="http://mail.google.com/mail/?hl=en&tab=wm">Contact</a></li>
            <li><a href="http://mail.google.com/mail/?hl=en&tab=wm">Downloads</a></li>
            <li><a href="http://news.google.com/nwshp?hl=en&tab=wn">Media</a></li>
            <li><a href="http://news.google.com/nwshp?hl=en&tab=wn">Music</a></li>
            <li><a href="http://www.google.com/prdhp?hl=en&tab=wf">Store</a></li>
        </ul>
        <div class="cornerBox">Put ticker here</div>
    </div>
    <div id="main">
        <div id="logoContainer"><a href="assets/images/irfanGoogle.png"><img id="logo" alt="Irfan" src="assets/images/irfanGoogle.png"></a>
    	</div>
    	<div id="slogan">
			slogan goes here
		</div>
    	<div id="footer">
        	<p id="copyright">&copy; 2010, Irfan Mir<br /> <a href="#/">Copyright statement</a></p>
    	</div>
	</div>
</div>
</body>
</html>

However, for some reason I an encountering two issues
1.) I can not get the place-holder image (#logoContianer), slogan (#slogan), or footer (#footer) in the centre of the page as the ppor layout I linked to above had it.
In other words, I can not get the dic#main centred. I tried using margin:auto 0 auto 0 in lines 61-63 and then I even tried setting the main div;s width to 100% in lines 50-52, but that does not even work. I know centring involves zeroes and autos in margin, but I can not remember if the top & bottom are supposed to be auto or 0 and the opposite for right & left. However, I tried both and neither seems to centre the div.

2.) I can not get the text-decoration to none and the colour to zero for the link to the copyright statement in the paragaph #footer. I want it to remain white, but have an underline on hover as the links in the upper right corner, but my styling, as seen in lines 84 -90, do not seem to work.

Thank you for all your help tus far and I hope that you can help me with these two problems.

Also if there is anything I am doing that is outdated, improper, or bad in code then please let me know.

Thanks in Advance and I hope to hear form you soon,
Team 1504

I’m feeling generous so here is a basic template to get you started.


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body {
    margin:0;
    padding:0
}
body {
    background:#000;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif
}
#header {
    width:100&#37;;
    overflow:hidden;
    font-size:85%;
}
#gbar {
    float:left;
    margin:0;
    padding:0;
    list-style:none;
}
#gbar li {
    display:inline;
    margin:0 3px 0 0;
}
#gbar li a, #gbar li a:visited {
    color:#fff;
    text-decoration:none;
}
.headertxt {
    float:right;
    width:320px;
    background:#fff;
    color:#000;
    padding:2px 5px;
}
#main, #footer {
    clear:both
}
</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <ul id="gbar">
            <li><a href="http://www.google.com/imghp?hl=en&tab=wi">About</a></li>
            <li><a href="http://video.google.com/?hl=en&tab=wv">Art</a></li>
            <li><a href="http://maps.google.com/maps?hl=en&tab=wl">Blog</a></li>
            <li><a href="http://mail.google.com/mail/?hl=en&tab=wm">Contact</a></li>
            <li><a href="http://mail.google.com/mail/?hl=en&tab=wm">Downloads</a></li>
            <li><a href="http://news.google.com/nwshp?hl=en&tab=wn">Media</a></li>
            <li><a href="http://news.google.com/nwshp?hl=en&tab=wn">Music</a></li>
            <li><a href="http://www.google.com/prdhp?hl=en&tab=wf">Store</a></li>
        </ul>
        <div class="headertxt">Please move me to the right corner</div>
    </div>
    <div id="main">
        <h2>main content</h2>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</div>
</body>
</html>

The #header element isn’t really needed but I assume there was probably more to be added to the header and would serve as a structural aid.

This code is really a no go. But moving that div is just:

{
background-color:#FFFFFF;
height:20px;
position:absolute;
right:0;
top:0;
width:320px;
}

Edit:
ups, Paul O’B was faster

I am agreement with the others and you should have a go at tidying it up yourself first and then we will help with the revision once you have had a go.

For the time being you could just absolutely place that element in the corner but of course it will overlap any other elements when the window is made smaller.


    <div style="width:320px; background-color:#fff; height:20px;[B]position:absolute;right:0;top:0"[/B]>Please move me to the right corner</div>

To tidy the page up do these things.

Remove inline styling and style with classes via the stylesheet.

Remove the span elements that are holding block elements and use divs instead.

Remove the center tag and center the page using margin:auto for fixed width elements or if it’s just text use text-align:center on the parent.

Make sure all your attributes are quoted (e.g. <div id=“main”>)

Use a list structure for the menu and not bare anchors next to each other.

Use html elements like h1,h2,h3 etc and not just divs. use p elements for text content and not divs and breaks.

That should get you on the right track and shouldn’t take more than half an hour to do. :slight_smile:

Glad you got it sorted out all apparently (taht PHP debugging you did was quite nice in the other thread :tup: )

I found out for some reason the page is not parsing anything past the line after the PHP include

I am still puzzled at post #3. Your client told you to use specific tags? Please tell me i read that wrong.

hmm i have an idea…
if you would be willing or if anyone would be willing, I would greatly appreciate it, if you or someone could help me rewrite the layout so that it looks the same, but using proper and current tags.

Possibly I can impress the client and advertise using modern techniques while keeping the design he/she believes can only be done using the tags that he/she requested.

Again, that would be amazing if you or someone could help me do that. :slight_smile:

With all due Gratitude, Respect, and Thanks in Advance,
Team 1504

However, it is one thing when the think they understand web design and are forcing me to use those tags. I can not lose this job and I do not want to seem like quitter in the eyes of this client who could potentially effect new business for me.
Hi,
I am in total agreement with ralph, that code needs to be tossed and rebuilt.

It is more important to KNOW what you are doing rather than worrying about feeling like a quitter in the eyes of someone who does not have a clue if you plan on being successful in web design.

Part of your job will be to educate your customers and that goes for every business not just web design. Try to tell your mechanic that he want him to rebuild your engine without taking it out of the car and see what kind of answer you get! He is not going to say “OK I will do that because I don’t want to be a quitter”. He is going to say “Stand back and let me do my job since I am the expert here”

thank you for replying. The one problem is that using the <span> tag and <centre> or <center> sorry tag and designing the site layout in general was all requested by the client. I do not know fi you understand that clients can be frustrating sometimes and sometime us coders wish they could just understand :slight_smile:
However, it is one thing when the think they understand web design and are forcing me to use those tags. I can not lose this job and I do not want to seem like quitter in the eyes of this client who could potentially effect new business for me.

I completely agree, outdated tags should never be used like align or font. But again I am forced in this situation, which is really frustrating.

Just to make sure, besides changing the layout you suggested that I move the div into #ghead or i lessen the right-padding on the center tag, correct?