SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question 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.

    Thanks in Advance and Best Regards,
    Team 1504
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    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 )

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

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    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?

  4. #4
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    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.

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

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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"

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by team1504 View Post
    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.
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
        <div style="width:320px; background-color:#fff; height:20px;position:absolute;right:0;top:0">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.

  8. #8
    SitePoint Zealot
    Join Date
    Nov 2008
    Location
    Germany
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This code is really a no go. But moving that div is just:
    Code CSS:
    {
    background-color:#FFFFFF;
    height:20px;
    position:absolute;
    right:0;
    top:0;
    width:320px;
    }

    Edit:
    ups, Paul O'B was faster

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'm feeling generous so here is a basic template to get you started.

    Code:
    <!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.

  10. #10
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Smile

    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

  11. #11
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    I am still puzzled at post #3. Your client told you to use specific tags? Please tell me i read that wrong.
    Ryan B | My Blog | Twitter

  12. #12
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Smile

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

    This is what I have so far:
    Code HTML4Strict:
    <!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: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

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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&#37; 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.

    Code:
    <!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*/
    text-align:center;
    }
    #main, #footer {
        clear:both;
    }
    #logoContainer {
        height:171px;
        padding-top:22px;
    }
    #logo {
        padding-top:26px;
        border:none;
        width:364px;
        height:144px;
    }
    #slogan {
        width:642px;
        margin:auto;
        text-align:center;
    }
    #copyright {
        color:#fff;
        font-size:9pt;
    }
    #copyright a, #copyright a:visited {
     color:#fff;
     text-decoration:none;
    }
    #copyright  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>
    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.

  14. #14
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Smile

    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.

  15. #15
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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/show...71#post4703871

    Thank you and Regards,
    Irfan Mir.

  16. #16
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I found out for some reason the page is not parsing anything past the line after the PHP include

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Glad you got it sorted out all apparently (taht PHP debugging you did was quite nice in the other thread )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •