CSS Positioning

  • sbronson
  • Student
  • Student
  • sbronson
  • Posts: 66
  • Loc: Arkansas

Post 3+ Months Ago

Here was want I'm trying to accomplish, In the headerbar I have Razorback Design, to the right of that I want to put Let the web work for you. Every way I did so far it goes below the Razorback Design. If anyone understands what I'm trying to get, can you help me.

Code: [ Select ]
#header{background-image:url(header_bar.gif); background-repeat: both; }
#header h1{width: 40%;padding-top: 10px;font-size: 40px;font-family:papyrus;color:#990000;margin-left: 40px;}
#header h2{width:40%; font-size: 40px;font-family:papyrus;color:#990000;margin-left: 150px;}
#header_text{width:40%;font-size: 32px; font-family:papyrus; color:#990000; margin-left:550px;margin-bottom: 50px;}
  1. #header{background-image:url(header_bar.gif); background-repeat: both; }
  2. #header h1{width: 40%;padding-top: 10px;font-size: 40px;font-family:papyrus;color:#990000;margin-left: 40px;}
  3. #header h2{width:40%; font-size: 40px;font-family:papyrus;color:#990000;margin-left: 150px;}
  4. #header_text{width:40%;font-size: 32px; font-family:papyrus; color:#990000; margin-left:550px;margin-bottom: 50px;}


Code: [ Select ]
<body>
        <div id="header">
            <h1>RazorBack</h1>
            <h2>Design</h2>
                <div id="header_text">
                    <p>Let the web work for you</p>
                </div>
        </div>
  1. <body>
  2.         <div id="header">
  3.             <h1>RazorBack</h1>
  4.             <h2>Design</h2>
  5.                 <div id="header_text">
  6.                     <p>Let the web work for you</p>
  7.                 </div>
  8.         </div>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Code: [ Select ]
#header h2 div {
position: absolute;
top: 0px;
left: 0px;
}
  1. #header h2 div {
  2. position: absolute;
  3. top: 0px;
  4. left: 0px;
  5. }


Adjust top and left until it is where you want it. I would suggest giving the div an id to shorten the css markup.
  • sbronson
  • Student
  • Student
  • sbronson
  • Posts: 66
  • Loc: Arkansas

Post 3+ Months Ago

Cool Beans,, thanks for the help.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Why not just float that right or left and then adjust it with margins and padding? Keeps the design more fluid.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 72 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.