Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question have I forgotten how to code? #wrap not extending?!

    hi,

    on my site: http://www.sellmy-story.com/

    I have put id="wrap" around my whole site but it's not extending over the #header, please help!

    html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta name="Description" content="Sell My Story to the Press, Magazine, Newspaper and make money" />
    <meta name="Keywords" content="story, sell, press, magazine, newspaper, news, latest, stories, money, local" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Distribution" content="Global" />
    <meta name="Author" content="John Biddulph - john.mbiddulph@gmail.com" />
    <meta name="Robots" content="index,follow" />
    <title>SELL MY STORY - Sell My Story to Magazines and Newspapers and make money!</title>
    <link href='http://fonts.googleapis.com/css?family=Varela+Round&v2' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/reset.css" type="text/css" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
    <script type="text/javascript">
    /* <![CDATA[ */$(function() {
            
        $('#slideshow').after('<div id="nav1" class="nav">').cycle({
            fx:     'fade',
            speed:  'slow',
            timeout: 15000,
            pager:  '#nav1',
            before: onBefore,
    next: $('#slideshow img')
        });
    function onBefore() {
        $('#title').html(this.alt);
    }
    
    });/* ]]> */
    </script>
    </head>
    
    <body>
    <!-- wrap starts here -->
    <div id="wrap">
    	<div id="header">
    	<div class="logo"><img src="images/logo.png" alt="logo" /></div>
    	<p class="text">SELLMY-STORY will be opening soon.<br /> In the meantime, if you have a story to submit to us to review<br /> please call us on: 07776 197732.</p>
    	<div id="slideshow">
    		<img src="images/header1.jpg" alt="1"/>
    		<img src="images/header2.jpg" alt="2"/>
    		<img src="images/header3.jpg" alt="3"/>
    		<img src="images/header4.jpg" alt="4"/>
    		<img src="images/header5.jpg" alt="5"/>
    		<img src="images/header6.jpg" alt="6"/>
    		<img src="images/header7.jpg" alt="7"/>
    		<img src="images/header8.jpg" alt="8"/>
    		<img src="images/header9.jpg" alt="9"/>
    		<img src="images/header10.jpg" alt="10"/>
    		<img src="images/header11.jpg" alt="11"/>
    	</div>
    	<div id="navigation">
    		<ul>
    			<li><a href="#"><span>01</span>Home</a></li>
    			<li><a href="#"><span>02</span>About Us</a></li>
    			<li><a href="#"><span>03</span>Submit Story</a></li>
    			<li><a href="#"><span>04</span>How It Works</a></li>
    			<li><a href="#"><span>05</span>Contact</a></li>
    		</ul>
    	</div>
    	</div>
    	<div id="content">
    	<div id="left">
    		<h1>Sell My Story</h1>
    		<form action="#" method="post" name="f1">
    			<table>
    				<tr>
    					<td>Name</td>
    					<td><input name="AuthorName" class="textbox" type="text" /></td>
    				</tr>
    				<tr>
    					<td>Email</td>
    					<td><input name="AuthorEmail" class="textbox" type="text" /></td>
    				</tr>
    				<tr>
    					<td>Number</td>
    					<td><input name="AuthorNumber" class="textbox" type="text" /></td>
    				</tr>
    				<tr>
    					<td>Story Title</td>
    					<td><input name="StoryTitle" class="textbox" type="text" /></td>
    				</tr>
    				<tr>
    					<td>Story Category</td>
    					<td>
    						<select name="StoryCategory">
    							<option value="1">1</option>
    							<option value="1">1</option>
    							<option value="1">1</option>
    						</select>
    					</td>
    				</tr>
    				<tr>
    					<td>Story Description</td>
    					<td><input name="StoryContent" type="text" /></td>
    				</tr>
    				<tr>
    					<td></td>
    					<td></td>
    				</tr>
    			</table>
    		</form>
    	</div>
    	<div id="right">
    		Right
    	</div>
    	</div>
    </div>
    
    </body>
    </html>
    css
    Code:
    html { background-color: #666666; }
    body { background-color: #666666; }
    h1 { font-size: 22px; }
    #wrap { margin: 40px auto; width:980px; background-color: #ffffff; border:1px solid #e2e2e2; font-family: 'Varela Round', sans-serif; }
    #wrap .text{ font-size: 20px; margin-top: 20px; margin-right: 20px; float:right;}
    
    #header { width: 980px; height: 460px; position: relative;}
    #header .logo{ position:absolute; left:40px; top:20px; }
    #slideshow { height:350px; width:680px; position: absolute; top:110px; left:0px; }
    #navigation { height:350px; width:299px; border-left: 1px solid #999999; position: absolute; top:110px; right:0px; background-color: #336699; color: #333;}
    #navigation ul { list-style: none; margin: 0; padding: 0; border: none; text-align: left; }
    #navigation li { margin: 0; height:70px; margin-left: 10px; }
    #navigation li a { display: block; border-right: 10px solid #508fc4; background-color: #336699; color: #fff; text-decoration: none; height:69px; border-bottom: 1px solid #508fc4; padding-left: 10px; }
    #navigation li a span { color: #508fc4; font-weight: bold; }
    html>body #navigation li a { width: auto; font-size: 26px; line-height: 68px; }
    #navigation li a:hover { border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }
    #nav1 { visibility: hidden; display: none;}
    
    /* CONTENT */
    #content { background-color: #ffffff; }
    #left { width:680px; background-color: blue; float:left; }
    #right { width:300px; background-color: fuchsia; float:left; }

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    you have to clear your content

    either use:

    Code:
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    Code:
    <div class="content clearfix">
     <div class="left"></div>
     <div class="right"></div>
    </div>
    or

    Code:
    <div class="content">
     <div class="left"></div>
     <div class="right"></div>
     <div style="clear:both;"></div>
    </div>
    or set a height to the content

    since your floating the elements, the parent becomes height: 0; therefore a height or a clear needs to be made
    Last edited by Sammy12; 07-18-2011 at 02:06 AM.

  • #3
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,724
    Thanks
    41
    Thanked 191 Times in 190 Posts
    it is most likely due to your position:relative; applied to the #header... do not use positioning to lay out a site

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #4
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    thanks, why don't use positioning to lay out a site, it's quite good if you need things moved into exact places?!

  • #5
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    ignored my post why? keep the position: relative; to the header. position: relative; itself makes your header a separate section of a page, in which you can absolute elements within it.

    varela is not a web-safe font. you would have to set a backup to the font:

    varela, Arial, sans-serif; I wouldn't rely on sans-serif; choosing the right font for you.
    You would want to use font-face: ; with a custom font installed

    Last edited by Sammy12; 07-18-2011 at 06:26 PM.


  •  

    Posting Permissions

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