SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can I get some text below this header?? Argghhh

    Hey,

    I have a css template which I like very much, however I cant find a way to get any text below my main header page that says "Soccer League". I would like smaller text there with a slogan or something. A snapshot is attached.

    Here is the code that generates the "Soccer League" text.
    HTML Code:
    <h1><span class="gray"><img src="images/usilsmall.gif" align="center"> Soccer League</span></h1>
    The css stylesheet is also attached. I tried creating my own slogan div but couldnt get it to work.

    Any help is GREATLY appreciated.

    Thanks
    Attached Images Attached Images
    Attached Files Attached Files

  2. #2
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After fiddling around some more still no lick, hopefully a sitepoint mind can help me out!

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Besides the fact that the attachments may take a while to be approved, a link to a tempory live version of this would make things easier.

  4. #4
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, the site is not live right now, only in a production enviroment. I can post the css code here if you still cant see them? I just assmumed when it accepted the attachments people could see them.

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Will need to see both the html and css - paste it between the code tags available from the "Go Advanced" button.

  6. #6
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the HTML:
    Code:
    <div class="nifty">
    <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
    
    <div class="nifty2">
    <b class="rtop2"><b class="r12"></b><b class="r22"></b><b class="r32"></b><b class="r42"></b></b>
    <!-- EDIT ONLY THE TEXT HERE -->
    <h1><span class="gray"><img src="images/usilsmall.gif" align="center"> U-Sector Indoor League</span></h1>
    <div id="menu">
    Links and stuff are here...
    Here is the CSS:
    Code:
    body {
    	padding: 20px;
    	background-color: #666;
    	font: 100.01&#37; "Trebuchet MS",Verdana,Arial,sans-serif;
    }
    div.nifty { 
      margin: 0 10%;
      background: white;
    }
    b.rtop, b.rbottom {
    display:block;
    background: #666;
    }
    b.rtop b, b.rbottom b {
    display:block;
    height: 1px;
    overflow: hidden;
    background: white;
    }
    b.r1 {
    margin: 0 5px;
    }
    b.r2 {
    margin: 0 3px;
    }
    b.r3 {
    margin: 0 2px;
    }
    b.rtop b.r4, b.rbottom b.r4 {
    margin: 0 1px;
    height: 2px;
    }
    h1,h2,p {
    margin: 0 10px;
    }
    h1 {
    font-size: 250%;
    color: #333;
    }
    h2 {
    font-size: 200%;
    color: 333;
    }
    p {
    padding-bottom:1em;
    }
    h2 {
    padding-top: 0.3em;
    }
    div.slogan {
      font-size: 80%;
      color: black;
      position: absolute;
      top: 80px; left: 50px;
    }
    div.nifty2 { 
      margin: 0 0.5%;
      background: #cccccc;
    }
    #main_text {
      height: 470px;
      overflow: auto;
    }
    b.rtop2, b.rbottom2 {
    display:block;
    background: white;
    }
    b.rtop2 b, b.rbottom2 b {
    display:block;
    height: 1px;
    overflow: hidden;
    background: #cccccc;
    }
    b.r12 {
    margin: 0 5px;
    }
    b.r22 {
    margin: 0 3px;
    }
    b.r32 {
    margin: 0 2px;
    }
    b.rtop2 b.r42, b.rbottom2 b.r42 {
    margin: 0 1px;
    height: 2px;
    }
    .gray {
      color: #666;
    }
    #menu {
    	clear: both;	
    	margin: 0; padding: 0 40px 0 0;
    	background: url(menu.jpg) repeat-y center top;	
    	font: bold 12px/26px Verdana, Arial, Tahoma, Sans-serif;
    	height: 26px;
    	background: white;
    }
    #menu ul {
    	float: right;
    	list-style: none;
    	margin:0; padding: 0;
    }
    #menu ul li {
    	display: inline;
    }
    #menu ul li a {
    	display: block;
    	float: left;
    	padding: 0 8px;
    	color: black;	
    	text-decoration: none;
    }
    #menu ul li a:hover {
    	background-color: #666;
    	color: #cccccc;	
    }
    #menu ul li#current a {	
    	background-color: #eee;
    	color: #333;
    }
    form {
      background: #eee;
      border: 1px solid black;
      margin: 5px;
      font-weight: bold;
      width: 650px;
      text-align: left;
    }
    input {
      color: #666;
      border: 1px solid #999;
    }
    textarea {
      color: #666;
      border: 1px solid #999;
    }
    input.submit {
      background: #cccccc;
      color: #333;
      font-weight: bold;
      width: 50px;
    }

  7. #7
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone with a slight idea?

  8. #8
    SitePoint Zealot mcahill's Avatar
    Join Date
    May 2002
    Location
    Manchaug, MA, USA
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hmmm....

    First off, I'd position the text separately from the image. Right now, you are using an align=center on the image and that's going to cause problems with locating the text.
    PHP Code:



    <div id="logo">
       <
    img src="images/usilsmall.gif" /> 
    </
    div>
    <
    div id="logo_text">
       <
    h1>U-Sector Indoor League</h1>
    </
    div
    Then you should be able to manipulate the positions and styles accordingly.
    mcahill
    Reel-Time.com - Saltwater Fly Fishing
    The Vario Blog
    VarioCreative.com 1 2 3 4 5 6 7

  9. #9
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there anyharm in using something like this? (It puts the text where I want it)
    <div style="position: absolute; width: 458px; height: 32px; left: 238px; top: 117px" id="layer1">

    Will this work with all browsers/resolutions?

  10. #10
    SitePoint Zealot mcahill's Avatar
    Join Date
    May 2002
    Location
    Manchaug, MA, USA
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    You'll have to test.

    I generally just go ahead and give it a try, then testing the major flavors of browser. You're always going to need to finesse things anyways.

    If you don't have IE7, IE6, Firefox and a friend to check the mac, then use one of the browser cam sites to check. That's the absolute least I'll check for compatibility.
    mcahill
    Reel-Time.com - Saltwater Fly Fishing
    The Vario Blog
    VarioCreative.com 1 2 3 4 5 6 7

  11. #11
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesnt work, if there are higher resolutions (or lower) it doesnt display in the correct location..

  12. #12
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firstly, as the logo image is presentation, it should be in the css and not the html. I would create a separate header div with the logo as a background, and include the heading texts within this like so :
    Code:
    <div class="nifty2">
    <b class="rtop2"><b class="r12"></b><b class="r22"></b><b class="r32"></b><b class="r42"></b></b>
    <div id="header">
      <h1> U-Sector Indoor League</h1>
      <h2>Other text here</h2>
    </div>
    <div id="menu">
    Links and stuff are here...
    The css to style this can be :
    Code:
    #header {
    	padding: 0 0 0 120px;
    	height: 130px;
    	color: #666666;
    	background-image: url(images/usilsmall.gif);
    	background-repeat: no-repeat;
    	background-position: 10px 0;
    }
    #header h1 {
    	color: #666666;
    	font-size: 250&#37;;
    	margin: 0;
    	padding: 20px 0 10px;
    	text-align: center;
    }
    #header h2 {
    	color: #666666;
    	font-size: 180%;
    	margin: 0;
    	padding: 0;
    	text-align: center;
    }
    This spaces the text to avoid the logo image, and the text size and positioning (alter the padding values and text align) can be easily manipulated in this css.

  13. #13
    SitePoint Addict
    Join Date
    Nov 2004
    Location
    Canada
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    Firstly, as the logo image is presentation, it should be in the css and not the html. I would create a separate header div with the logo as a background, and include the heading texts within this like so :
    Code:
    <div class="nifty2">
    <b class="rtop2"><b class="r12"></b><b class="r22"></b><b class="r32"></b><b class="r42"></b></b>
    <div id="header">
      <h1> U-Sector Indoor League</h1>
      <h2>Other text here</h2>
    </div>
    <div id="menu">
    Links and stuff are here...
    The css to style this can be :
    Code:
    #header {
    	padding: 0 0 0 120px;
    	height: 130px;
    	color: #666666;
    	background-image: url(images/usilsmall.gif);
    	background-repeat: no-repeat;
    	background-position: 10px 0;
    }
    #header h1 {
    	color: #666666;
    	font-size: 250%;
    	margin: 0;
    	padding: 20px 0 10px;
    	text-align: center;
    }
    #header h2 {
    	color: #666666;
    	font-size: 180%;
    	margin: 0;
    	padding: 0;
    	text-align: center;
    }
    This spaces the text to avoid the logo image, and the text size and positioning (alter the padding values and text align) can be easily manipulated in this css.
    Fantastic, thank you so much.


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
  •