SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Help with CSS

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with CSS

    I have to create a fluid 100% width HTML banner. Can you guys look at the code and let me know how I can center vertically the text and if it works in IE6?

    Is there a way to auto resize text (font size) when resizing window that works in older browsers?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title></title>
    <style type="text/css">
    body{
    margin:0;
    padding:0;
    }
    #maincontainer{
    width:100%;
    display:block;
    }
    #greytext{font-size: 110%; color: #cccccc;}
    #greentext{color: #84b740;}
    #topsection{
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-color:#ccc;
    border-bottom: 7px solid #000;
    line-height: 1.8em;
    height: 100px; /*Height of top section*/
    }
    #topsection h1{
    margin: 0;
    padding-top: 20px;
    }
    .innertube{
    height: 100px;
    margin: 10px; 
    margin-top: 0px; 
    text-align: center;
    }
    #whitetext{
    color:#fff !important;
    -webkit-transition-duration:0.3s;
    -moz-transition-duration:0.3s;
    -ms-transition-duration:0.3s;
    -o-transition-duration:0.3s;
    text-shadow: 2px 2px #333333;
    </style>
    </head>
    <body>
    
    <div id="maincontainer">
    <div id="topsection">
    <div class="innertube">
    <h1 id="whitetext">TEXT TEXT TEXT</h1>
    <b id="greytext">dfgdfgdfgdfg</b>
    </div>
    </div>
    </div>
    
    </body>
    </html>
    Thanks!
    Looking for partners/sales people advertising & content deals

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    We'd need to know a little bit more about what you are trying to do here as there could be a number of options. You also seem to have grey text on a grey background so it is invisible!

    Usually you would not use a height and just add padding top and bottom to the container and the text will always be vertical.

    If it was just one line of text that was not going to wrap then you could just set the line-height to the same size as the height and the text will stay in the vertical middle as long as the text doesn't wrap.

    Alternatively you could use the display:table-cell properties for IE8 and vertically align multiple rows vertically quite easily ( there are hacks for IE7 and under in there).

    It al depends on what happens next

    You could use media queries to change the text size at smaller screen widths but you would need to use a polyfill for ie8 and under.

  3. #3
    SitePoint Enthusiast knojiyak's Avatar
    Join Date
    Oct 2013
    Posts
    73
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hello Friend,

    Please check this code. This code contain your requirement.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Kewal Knojiya</title>
    <style>
    body{
    margin:0;
    padding:0;
    background-color:#99CCCC;
    }
    #header{
    background-color:#00CCFF;
    width:100%;
    height:auto;
    }
    #header .in{
    width:1000px;
    height:150px;
    background-color:#CCCCCC;
    margin:auto;
    }
    #header .text{
    font-size:48px;
    padding:30px 0 0 0;
    text-align:center;
    }
    </style>
    </head>
    
    <body>
    <div id="header">
    <div class="in">
    <div class="text">Kewal Knojiya</div>
    </div>
    </div>
    </body>
    </html>
    Thank you Dalv.

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2005
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul!

    Quote Originally Posted by knojiyak View Post

    Please check this code. This code contain your requirement.
    Thanks, knojiyak: I checked your code, but unfortunately it doesn't seem to resize the text, and it is not fluid.
    Looking for partners/sales people advertising & content deals

  5. #5
    SitePoint Enthusiast knojiyak's Avatar
    Join Date
    Oct 2013
    Posts
    73
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    sorry brow I hope Next Time i will help you..



    Thanks, knojiyak: I checked your code, but unfortunately it doesn't seem to resize the text, and it is not fluid.[/QUOTE]

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I would just d something like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .header {
    	height:120px;
    	width:100%;
    	display:table;
    	border-top:5px solid #000;
    	border-bottom:5px solid #000;
    	text-align:center;
    	background:#666;
    }
    *+html .header{height:auto;min-height:120px;}/* ie7*/
    *+html .header h1{padding:20px 0 0}/* ie7*/
    * html .header h1{padding:20px 0 0}/* ie6*/
    h1 {
    	margin:0;
    	padding:0 10px;
    	color:#fff;
    	font-size:120%;
    	display:table-cell;
    	vertical-align:middle;
    }
    </style>
    </head>
    
    <body>
    <div class="header">
    		<h1>This is the fluid text that will wrap and stay vertically centred</h1>
    </div>
    </body>
    </html>
    IE8+ (and all other browsers get the perfect vertical centring and IE7 and under just get a rough padding top). There are hacks for IE7 and under but you have to add extra elements so is not worth sullying the html for minor browsers.


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
  •