Results 1 to 9 of 9

Thread: Layout with floats

  1. #1
    Join Date
    Oct 2008
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Layout with floats

    Hi there,

    As per previous thread I have been advised to try using floats for my website.

    I have dont this and so far things are working well. Except my #navigation2. It doesn't appear to put the text in the middle (centred between top and bottom) of the 12px height box. I have put padding-bottom: 5px; to try and move the text up a little but no change. Any ideas?

    Here is the css code:

    Code:
    /* CSS Document */
    body {
    	background-image:url(background.gif);
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    a.nav1:link {color: #000000; text-decoration:none; font-size:16px;}
    a.nav1:visited {color: #000000; text-decoration:none;font-size:16px;}
    a.nav1:hover {color: #FFFFFF; text-decoration:none;font-size:16px;}
    
    a.nav2:link {color: #FFFFFF; text-decoration:none; font-size:12px;}
    a.nav2:visited {color: #FFFFFF; text-decoration:none;font-size:12px;}
    a.nav2:hover {color: #0099FF; text-decoration:none;font-size:12px;}
    
    p	{
    	padding: 5px 10px;
    	margin:0px;
    	font-size:13px;
    }
    h1 {
    	font-size: 11px;
    	text-transform:uppercase;
    	background-color: #0099FF;
    	color:#FFFFFF;
    	padding:5px 15px;
    	margin:0px 
    }
    
    h2 {
    	font-size:20px;
    	color:#0099FF;
    	font-weight:bold;
    	padding: 5px 10px;
    	margin:0px;
    }
    h3 {
    	font-size:15px;
    	padding: 5px 10px;
    	color:#0099FF;
    
    }
    h4 {
    	font-size:10px;
    	padding:5px;
    	color:#666666;
    
    }
    h5 {
    	font-size:12px;
    	padding:5px;
    	color:#000000;
    
    }
    #container {
    	width: 800px;
    	margin-bottom: 0px;
    	margin-left: auto;
    	margin-right: auto;
    }
    #banner {
    	float:left;
    	clear:left;
    	width:263px;
    	height:135px;
    	background-image:url(raglanfestlogo.gif);
    	background-color:#0099FF;
    }
    #navigation1 {
    	float: left;
    	width: 495px;
    	margin-top:102px;
    	padding: 4px 0 0 0;
    	height: 23px;
    	background-color:#0099FF;
    	text-align:center;
    	font-weight:bold;
    }
    #rightcornerbox {
    	float:left;
    	background-image:url(rightcorner.gif);
    	margin-top:102px;
    	width: 32px;
    	height: 33px;
    }
    #navigation2 {
    	clear:both;
    	float: left;
    	width: 505px;
    	height: 12px;
    	padding-bottom:8px;
    	margin-left:263px;
    	margin-bottom: 5px;
    	text-align:middle;
    	font-weight:bold;
    }
    #leftlinks {
    	float: left;
    	width: 233px;
    	text-align:center;
    	background-color:#CCCCCC;
    	margin: 30px 0 0 0;
    	padding: 0px 10px 0px 10px;
    }
    #content {
    	float: left;
    	width: 507px;
    	padding: 15px;
    }
    #bottomlinks {
    	clear: left;
    	float:left;
    	margin:auto;
    	padding: 5px;
    	width:790px;
    	background-color:#CCCCCC;
    	border:0.5px solid #000000;
    }
    #footer {
    	clear: left;
    	margin: 0px;
    	width:790px;
    	height:20px;
    	padding: 5px;
    	text-align: center;
    }
    Last edited by Snookerman; 04-22-2009 at 08:51 AM. Reason: added [code] tags

  2. #2
    Join Date
    Oct 2008
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    HTML 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" />
    <link type="text/css" href="test.css" rel="stylesheet" media="screen" />
    <title>Raglan Music Festival</title>
    </head>
    
    <body>
    <div id="container">
    	<div id="banner"></div>
      	<div id="navigation1">
    		<a class="nav1" href="http://www.raglan-festival.org">About</a>&nbsp;&nbsp;&nbsp;&nbsp;
    		<a class="nav1" href="http://www.raglan-festival.org">Contact</a>&nbsp;&nbsp;&nbsp;&nbsp;
    		<a class="nav1" href="http://www.raglan-festival.org">Schedule</a>&nbsp;&nbsp;&nbsp;&nbsp;
    		<a class="nav1" href="http://www.raglan-festival.org">Sponsors</a>&nbsp;&nbsp;&nbsp;&nbsp;
    		<a class="nav1" href="http://www.raglan-festival.org">Links</a>
    	</div>
    	<div id="rightcornerbox"></div>
    	<div id="navigation2">
    		<a class="nav2" href="http://www.raglan-festival.org">Tickets</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    		<a class="nav2" href="http://www.raglan-festival.org">Performers</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    		<a class="nav2" href="http://www.raglan-festival.org">Sessions</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    		<a class="nav2" href="http://www.raglan-festival.org">Workshops</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    		<a class="nav2" href="http://www.raglan-festival.org">Venues</a></div>
    	<div id="leftlinks"><br>
    	  <p>
    	    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=													"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="170" height="137">
    	      <param name="movie" value="http://lads.myspace.com/videos/vplayer.swf">
    	      <param name="quality" value="high">
    	      <embed src="http://lads.myspace.com/videos/vplayer.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="32" height="32"></embed>
            </object>
    	  </p>
    	  <h4>One Step Behind performed in 2008</h4>
    	  <p><img src="armitageskanks600_1-1-1.jpg" width="220" height="148" /></p>
    	  <h4>Armitage Skanks performed in 2008</h4>
    	  <p><img src="advert.jpg" width="170" height="250" /></p>
    	  </div>
    		<div id="content">
    	 		<h2>Raglan Music Festival</h2>
    	 		<h3>Bands Wishing to Perform in 2009 </h3>
    	  		<p>Any bands wishing to perform at the 2009 Raglan Music festival are invited to 						submitcapplications through this website. Please <a href="applications.html">click here</a> for further information. Record Crowds Flock to Raglan as the Sun Shines on award Winning Festival. A crowd, estimated at over 4000, descended on the sleepy country village of   Raglan as the village's three day Festival was blessed by the hottest weekend of the year.
    	  Record Crowds Flock to Raglan as the Sun Shines on award Winning Festival<br>
    	  <br>
    	  A crowd, estimated at over 4000, descended on the sleepy country village of Raglan as the village's three day Festival was blessed by the hottest weekend of the year.
    	    Just some of this year many highlights included the Children's workshops on the Saturday morning, Samba Galez, The Albino Frogs, The Devil's Violin, Owen Farr's classical concert, Bridgend Male Voice Choir & Monmouth Big Band at Raglan Castle and top class Madness tribute band One Step Behind.
    	    
    	    Over forty schedules performances plus countless informal jam sessions led to this years festival beginning the biggest and most successful yet.    
          <p>Over forty schedules performances plus countless informal jam   sessions led to this years festival beginning the biggest and most successful   yet. 
    	</div>
    	<div id="mailling"></div>
    	<div id="bottomlinks"></div>
    	<div id="footer"></div>
    </div>	
    </body>
    </html>
    Last edited by Snookerman; 04-22-2009 at 08:52 AM. Reason: fixed [html] tags

  3. #3
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"
    Lol, use the [CODE] tags next time, it's a button that looks like this "#", you can use "[HTML]" tags but make sure you do them correctly, not like I have them in this post, just put them in UPPER CASE and it should work

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Hehe, without the space in [/html], I just put that so you would see it.

    Edit:
    Quote Originally Posted by Schmoopy View Post
    ...just put them in UPPER CASE and it should work
    Uppercase or lowercase doesn't matter, it's that he used a space in the tag (which i put there cause i couldn't show it otherwise). Maybe if I write in the wrong order it will show, so this is the close tag: [/html] and this is the open tag: [html].
    For css and other code use this close tag: [/code] and this open tag [code]
    Quote Originally Posted by froggy View Post
    I know for next time. cheers
    It's not just for the next time, you can edit your post's (like I'm doing now)
    Last edited by Snookerman; 11-17-2008 at 03:32 PM.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  5. #5
    Join Date
    Oct 2008
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    hehehe yeah i thought that after. oops

    I know for next time. cheers

  6. #6
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    I'm just reposting your code so I can copy it without the smiley.
    Code:
    body {
    	background-image:url(background.gif);
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    a.nav1:link {
    	color: #000000;
    	text-decoration:none;
    	font-size:16px;
    }
    a.nav1:visited {
    	color: #000000;
    	text-decoration:none;
    	font-size:16px;
    }
    a.nav1:hover {
    	color: #FFFFFF;
    	text-decoration:none;
    	font-size:16px;
    }
    a.nav2:link {
    	color: #FFFFFF;
    	text-decoration:none;
    	font-size:12px;
    }
    a.nav2:visited {
    	color: #FFFFFF;
    	text-decoration:none;
    	font-size:12px;
    }
    a.nav2:hover {
    	color: #0099FF;
    	text-decoration:none;
    	font-size:12px;
    }
    p {
    	padding: 5px 10px;
    	margin:0px;
    	font-size:13px;
    }
    h1 {
    	font-size: 11px;
    	text-transform:uppercase;
    	background-color: #0099FF;
    	color:#FFFFFF;
    	padding:5px 15px;
    	margin:0px;
    }
    h2 {
    	font-size:20px;
    	color:#0099FF;
    	font-weight:bold;
    	padding: 5px 10px;
    	margin:0px;
    }
    h3 {
    	font-size:15px;
    	padding: 5px 10px;
    	color:#0099FF;
    }
    h4 {
    	font-size:10px;
    	padding:5px;
    	color:#666666;
    }
    h5 {
    	font-size:12px;
    	padding:5px;
    	color:#000000;
    }
    #container {
    	width: 800px;
    	margin-bottom: 0px;
    	margin-left: auto;
    	margin-right: auto;
    }
    #banner {
    	float:left;
    	clear:left;
    	width:263px;
    	height:135px;
    	background-image:url(raglanfestlogo.gif);
    	background-color:#0099FF;
    }
    #navigation1 {
    	float: left;
    	width: 495px;
    	margin-top:102px;
    	padding: 4px 0 0 0;
    	height: 23px;
    	background-color:#0099FF;
    	text-align:center;
    	font-weight:bold;
    }
    #rightcornerbox {
    	float:left;
    	background-image:url(rightcorner.gif);
    	margin-top:102px;
    	width: 32px;
    	height: 33px;
    }
    #navigation2 {
    	clear:both;
    	float: left;
    	width: 505px;
    	height: 12px;
    	padding-bottom:8px;
    	margin-left:263px;
    	margin-bottom: 5px;
    	text-align:middle;
    	font-weight:bold;
    }
    #leftlinks {
    	float: left;
    	width: 233px;
    	text-align:center;
    	background-color:#CCCCCC;
    	margin: 30px 0 0 0;
    	padding: 0px 10px 0px 10px;
    }
    #content {
    	float: left;
    	width: 507px;
    	padding: 15px;
    }
    #bottomlinks {
    	clear: left;
    	float:left;
    	margin:auto;
    	padding: 5px;
    	width:790px;
    	background-color:#CCCCCC;
    	border:0.5px solid #000000;
    }
    #footer {
    	clear: left;
    	margin: 0px;
    	width:790px;
    	height:20px;
    	padding: 5px;
    	text-align: center;
    }
    HTML 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" />
    <link type="text/css" href="test.css" rel="stylesheet" media="screen" />
    <title>Raglan Music Festival</title>
    </head>
    
    <body>
    <div id="container">
    	<div id="banner"></div>
      	<div id="navigation1">
    		<a class="nav1" href="http://www.raglan-festival.org">About</a>&nbsp;&nbsp;&nbsp;&nbsp;
    		<a class="nav1" href="http://www.raglan-festival.org">Contact</a>&nbsp;&nbsp;&nbsp;&nbsp;
    		<a class="nav1" href="http://www.raglan-festival.org">Schedule</a>&nbsp;&nbsp;&nbsp;&nbsp;
    		<a class="nav1" href="http://www.raglan-festival.org">Sponsors</a>&nbsp;&nbsp;&nbsp;&nbsp;
    		<a class="nav1" href="http://www.raglan-festival.org">Links</a>
    	</div>
    	<div id="rightcornerbox"></div>
    	<div id="navigation2">
    		<a class="nav2" href="http://www.raglan-festival.org">Tickets</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    		<a class="nav2" href="http://www.raglan-festival.org">Performers</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    		<a class="nav2" href="http://www.raglan-festival.org">Sessions</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    		<a class="nav2" href="http://www.raglan-festival.org">Workshops</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    		<a class="nav2" href="http://www.raglan-festival.org">Venues</a></div>
    	<div id="leftlinks"><br>
    	  <p>
    	    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=													"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="170" height="137">
    	      <param name="movie" value="http://lads.myspace.com/videos/vplayer.swf">
    	      <param name="quality" value="high">
    	      <embed src="http://lads.myspace.com/videos/vplayer.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="32" height="32"></embed>
            </object>
    	  </p>
    	  <h4>One Step Behind performed in 2008</h4>
    	  <p><img src="armitageskanks600_1-1-1.jpg" width="220" height="148" /></p>
    	  <h4>Armitage Skanks performed in 2008</h4>
    	  <p><img src="advert.jpg" width="170" height="250" /></p>
    	  </div>
    		<div id="content">
    	 		<h2>Raglan Music Festival</h2>
    	 		<h3>Bands Wishing to Perform in 2009 </h3>
    	  		<p>Any bands wishing to perform at the 2009 Raglan Music festival are invited to 						submitcapplications through this website. Please <a href="applications.html">click here</a> for further information. Record Crowds Flock to Raglan as the Sun Shines on award Winning Festival. A crowd, estimated at over 4000, descended on the sleepy country village of   Raglan as the village's three day Festival was blessed by the hottest weekend of the year.
    	  Record Crowds Flock to Raglan as the Sun Shines on award Winning Festival<br>
    	  <br>
    	  A crowd, estimated at over 4000, descended on the sleepy country village of Raglan as the village's three day Festival was blessed by the hottest weekend of the year.
    	    Just some of this year many highlights included the Children's workshops on the Saturday morning, Samba Galez, The Albino Frogs, The Devil's Violin, Owen Farr's classical concert, Bridgend Male Voice Choir & Monmouth Big Band at Raglan Castle and top class Madness tribute band One Step Behind.
    	    
    	    Over forty schedules performances plus countless informal jam sessions led to this years festival beginning the biggest and most successful yet.    
          <p>Over forty schedules performances plus countless informal jam   sessions led to this years festival beginning the biggest and most successful   yet. 
    	</div>
    	<div id="mailling"></div>
    	<div id="bottomlinks"></div>
    	<div id="footer"></div>
    </div>	
    </body>
    </html>
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  7. #7
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    If I use the code I copied from you, the second menu (navigation2) is vertically centered. However, I don't have the pictures and movie that you have, maybe you could post a link to your site?
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  8. #8
    Join Date
    Oct 2008
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hello,

    I am working offline so the site isnt active yet. Do you need the images or movies as its the menu im having most trouble with.

    Also where can i read about how to use this forum? You asked me to resolve a previous thread and i have no idea how!

    Thanks its all a little new to me.

  9. #9
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Here are some rules and instructions:
    http://www.dynamicdrive.com/forums/s...ad.php?t=24866

    But basically if you have a code, wrap it in code tags like so:
    [code]bla bla[/code ] (note I used a space at the end of the end tag because it will be rendered otherwise, don't use the space!). There's also a button for this that looks like this: #

    Example:
    Code:
    #nav {
    float:left;
    }
    If you have html code, wrap it in html tags like so:
    [html]bla bla bla[/html ] (note i used a space at the end of the end tag for the same reason as before but you of course don't use the space). There's also a button for this that looks like this: <>

    Example:
    HTML Code:
    <div id="nav"><ul>
    <li class="menu"><a href="google"><span id="link">broken google link</span></a></li>
    </ul></div>
    If you want to mark a part of the code inside the code use icode tags: [icode]bla bla[/icode ], button looks like this: #i

    Example:
    Code:
    #nav {
    float:right;
    }
    If you want to edit something just click the edit button bellow the post you want edit. When editing, if you ad new info that you want to mark, you can wrap it in edit tags: [edit]bla bla edit[/edit ] (same space thing).

    Example:
    Edit: bla bla edit


    When your issue or problem has been resolved, i.e. a solution has been found, go to the first post and edit it, you will then be able to ad a prefix to the title that says Resolved. That will show others that the problem has been fixed.

    Hope that is clear enough, if you have any questions just ask.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

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
  •