Jump to content

Somethings wrong with the float.


Recommended Posts

AND my entire site is weird. nothing Hover is working.. http://hajzer.info.com/ the nav has a hover state but it only shows when you click. and nothing is right in the sidebar (link hovers) nothing happens with the curser..its on wordpress. http://jsfiddle.net/...lahajzer/m9cpV/ theres the code for the sidebar, and css for sidebar. i think I'm doing the float wrong. ... nevermind i got it.

Edited by Attila2452
Link to post
Share on other sites

INSTEAD! i have a problem with my search page!. http://hajzer.info/?s=s the float THERE is messing up my sidebar. which leads me to think theres something wrong in my side bar. code for loop.php page :

<?php/*** The loop that displays posts.** The loop displays the posts and the post content.  See* http://codex.wordpress.org/The_Loop to understand it and* http://codex.wordpress.org/Template_Tags to understand* the tags used in it.** This can be overridden in child themes with loop.php or* loop-template.php, where 'template' is the loop context* requested by a template. For example, loop-index.php would* be used if it exists and we ask for the loop with:* <code>get_template_part( 'loop', 'index' );</code>** @package WordPress* @subpackage Starkers* @since Starkers 3.0*/?><?php/* Start the Loop.  *  * In Twenty Ten we use the same loop in multiple contexts.  * It is broken into three main parts: when we're displaying  * posts that are in the gallery category, when we're displaying  * posts in the asides category, and finally all other posts.  *  * Additionally, we sometimes check for whether we are on an  * archive page, a search page, etc., allowing for small differences  * in the loop on each template without actually duplicating  * the rest of the loop that is shared.  *  * Without further ado, the loop:  */ ?><?php while ( have_posts() ) : the_post(); ?><?php /* How to display posts in the Gallery category. */ ?><?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?>   <h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>   <?php twentyten_posted_on(); ?><?php if ( post_password_required() ) : ?>    <?php the_content(); ?><?php else : ?><?php$images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );$total_images = count( $images );$image = array_shift( $images );$image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' );?>	 <a href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a>    <p><?php printf( __( 'This gallery contains <a %1$s>%2$s photos</a>.', 'twentyten' ),	  'href="' . get_permalink() . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"',	  $total_images	 ); ?></p>    <?php the_excerpt(); ?><?php endif; ?>    <a href="<?php echo get_term_link( _x('gallery', 'gallery category slug', 'twentyten'), 'category' ); ?>" title="<?php esc_attr_e( 'View posts in the Gallery category', 'twentyten' ); ?>"><?php _e( 'More Galleries', 'twentyten' ); ?></a>    |    <?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?>    <?php edit_post_link( __( 'Edit', 'twentyten' ), '|', '' ); ?><?php /* How to display posts in the asides category */ ?><?php elseif ( in_category( _x('asides', 'asides category slug', 'twentyten') ) ) : ?>  <?php if ( is_archive() || is_search() ) : // Display excerpts for archives and search. ?>   <?php the_excerpt(); ?>  <?php else : ?>   <?php the_content( __( 'Continue reading →', 'twentyten' ) ); ?>  <?php endif; ?>    <?php twentyten_posted_on(); ?>    |    <?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?>    <?php edit_post_link( __( 'Edit', 'twentyten' ), '| ', '' ); ?><?php /* How to display all other posts. */ ?><?php else : ?><div id="default-container"><h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>   <?php twentyten_posted_on(); ?><?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>   <?php the_excerpt(); ?><?php else : ?>   <?php the_content( __( 'Continue reading →', 'twentyten' ) ); ?>   <?php wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?><?php endif; ?></div><!-- END DEFAULT CONTAINER -->    <?php	 $tags_list = get_the_tag_list( '', ', ' );	 if ( $tags_list ):    ?>	 <?php printf( __( 'Tagged %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>	 |    <?php endif; ?>  <?php comments_template( '', true ); ?><?php endif; // This was the if statement that broke the loop into three parts based on categories. ?><?php endwhile; // End the loop. Whew. ?> <?php /* Display navigation to next/previous pages when applicable */ ?><?php if (  $wp_query->max_num_pages > 1 ) : ?>    <?php //next_posts_link( __( '← Older posts', 'twentyten' ) ); ?>    <?php //previous_posts_link( __( 'Newer posts →', 'twentyten' ) ); ?><?php endif; ?> 

Actual HTML Output:

<body class="search search-results logged-in admin-bar"><div id="wrapper"><div id="header"><h1>  <a href="/">Attila Hajzer<br />   <span>Designs that inspire.</span>  </a></h1><div class="clear"></div><div id="navigation" >  <ul>   <li><a href="/">Home</a>   <li><a href="services/">Services</a>   <li><a href="portfolio/">Portfolio</a>   <li><a href="about/">About</a>   <li><a href="support/">Support</a>   <li><a href="contact/">Contact</a>  </ul></div><!-- navigation --></div><!-- end header--><div style="clear:left;"></div>    <h1>Search Results for: s</h1>   <div id="default-container"><h2><a href="http://hajzer.info/skills" title="Permalink to Skills" rel="bookmark">Skills</a></h2>   <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://hajzer.info/skills" title="4:30 am" rel="bookmark"><span class="entry-date">January 15, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://hajzer.info/author/attila" title="View all posts by Attila Hajzer">Attila Hajzer</a></span>    <p>Skills Web Design Skills: Graphical user interface (GUI) design using HTML/XHTML/CSS Web standards compliance and basic accessibility issues (as they pertain to XHTML and HTML5) Planning, designing, and implementing web site structure and navigation layout Designing and planning additions to … <a href="http://hajzer.info/skills">Continue reading <span class="meta-nav">→</span></a></p></div><!-- END DEFAULT CONTAINER -->	  <div id="default-container"><h2><a href="http://hajzer.info/resume" title="Permalink to Resume" rel="bookmark">Resume</a></h2>   <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://hajzer.info/resume" title="4:29 am" rel="bookmark"><span class="entry-date">January 15, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://hajzer.info/author/attila" title="View all posts by Attila Hajzer">Attila Hajzer</a></span>    <p>Resume Expert Knowledge of XHTML (standards compliance and basic accessibility) and Cascading Style Sheets (CSS). Good knowledge of Adobe Fireworks/ Photoshop/Dreamweaver/ Homesite, and Microsoft Office Windows environment. High level of knowledge of Macintosh environment. Experience Web Designer The Dot People, … <a href="http://hajzer.info/resume">Continue reading <span class="meta-nav">→</span></a></p></div><!-- END DEFAULT CONTAINER -->	 <div id="default-container"><h2><a href="http://hajzer.info/portfolio" title="Permalink to Portfolio" rel="bookmark">Portfolio</a></h2>   <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://hajzer.info/portfolio" title="3:36 am" rel="bookmark"><span class="entry-date">January 15, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://hajzer.info/author/attila" title="View all posts by Attila Hajzer">Attila Hajzer</a></span>    <p>Design Process When I get an idea, the first thing I do is grab paper and a pen, draw out what I’m thinking, what elements I want and where I want them. When I find something that is visually pleasing, … <a href="http://hajzer.info/portfolio">Continue reading <span class="meta-nav">→</span></a></p></div><!-- END DEFAULT CONTAINER -->	  <div id="default-container"><h2><a href="http://hajzer.info/about" title="Permalink to About" rel="bookmark">About</a></h2>   <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://hajzer.info/about" title="9:11 pm" rel="bookmark"><span class="entry-date">January 14, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://hajzer.info/author/attila" title="View all posts by Attila Hajzer">Attila Hajzer</a></span>    <p>About My name is Attila Hajzer and I am a Current student studying at Niagara College for General Arts. I have been doing website design for 4 years now and I enjoy every bit of it. I enjoy learning new … <a href="http://hajzer.info/about">Continue reading <span class="meta-nav">→</span></a></p></div><!-- END DEFAULT CONTAINER -->	 <div id="default-container"><h2><a href="http://hajzer.info/services" title="Permalink to Services" rel="bookmark">Services</a></h2>   <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://hajzer.info/services" title="9:11 pm" rel="bookmark"><span class="entry-date">January 14, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://hajzer.info/author/attila" title="View all posts by Attila Hajzer">Attila Hajzer</a></span>    <p>Services I provide website design service as well as web development services. I make the job easy for you because you can choose whether to have me just design a website, just develop or update a design you previously had … <a href="http://hajzer.info/services">Continue reading <span class="meta-nav">→</span></a></p></div><!-- END DEFAULT CONTAINER -->	  <div id="default-container"><h2><a href="http://hajzer.info/" title="Permalink to Home" rel="bookmark">Home</a></h2>   <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://hajzer.info/" title="6:50 am" rel="bookmark"><span class="entry-date">January 14, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://hajzer.info/author/attila" title="View all posts by Attila Hajzer">Attila Hajzer</a></span>    <p>Need A Website? You’ve come to the right place! Take a tour of our newly redesigned website we guarintee you’ll love it just as much as we do! Website Design Graphic Design WordPress Website Design Using HTML5 and valid CSS3 … <a href="http://hajzer.info/">Continue reading <span class="meta-nav">→</span></a></p></div><!-- END DEFAULT CONTAINER -->	 <div id="default-container"><h2><a href="http://hajzer.info/hello-world" title="Permalink to Hello world!" rel="bookmark">Hello world!</a></h2>   <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://hajzer.info/hello-world" title="2:59 am" rel="bookmark"><span class="entry-date">January 14, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://hajzer.info/author/attila" title="View all posts by Attila Hajzer">Attila Hajzer</a></span>    <p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p></div><!-- END DEFAULT CONTAINER -->	  <div id="default-container"><h2><a href="http://hajzer.info/support" title="Permalink to Support" rel="bookmark">Support</a></h2>   <span class="meta-prep meta-prep-author">Posted on</span> <a href="http://hajzer.info/support" title="2:59 am" rel="bookmark"><span class="entry-date">January 14, 2012</span></a> <span class="meta-sep">by</span> <span class="author vcard"><a class="url fn n" href="http://hajzer.info/author/attila" title="View all posts by Attila Hajzer">Attila Hajzer</a></span>    <p>Support This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them … <a href="http://hajzer.info/support">Continue reading <span class="meta-nav">→</span></a></p></div><!-- END DEFAULT CONTAINER -->	   <div id="sidebar"><div id="search">  <form role="search" method="get" id="searchform" action="http://hajzer.info/">	 <div><label class="screen-reader-text" for="s">Search for: </label>		 <input type="text" id="searchinput" placeholder="Search..." value="" name="s" id="s" />		 <input type="submit" id="searchsubmit" value="Search" />	 </div>  </form></div><br /><h3 id="title">Sidebar</h3> <div id="twitter-box"><h3>Twitter:</h3><div id="tweet">   <ul>	    <li>		    <div class="tweet-inner">			    <p>					 Super exited to Launch the new website hoping it will be done by the end of next week! Ive been working all week non stop on it! in bed soon					 <span class="tweet-time">7 hours ago</span>			    </p>		    </div><!-- /tweet-inner -->	    </li>    </ul><span><a href="http://twitter.com/#!/attilahajzer1">Follow me on Twitter</a></span></div></div><div id="social"><a href="https://www.facebook.com/pages/Attila-Hajzer-Designs/130098887017673" target="_Blank" class="box facebook"></a><a href="http://www.linkedin.com/profile/view?id=156704864" target="_Blank" class="box linkedin"></a><a href="http://www.flickr.com/photos/attilahajzer/" target="_Blank" class="box flickr"></a><a href="http://www.twitter.com/Attilahajzer1" target="_Blank" class="box twitter"></a><a href="https://plus.google.com/118442094377896970615/posts" target="_Blank" class="box google"></a><a href="http://wordpress.org/" target="_Blank" class="box wordpress"></a><div class="right"></div></div><br /><div id="sponsors"><p>Sponsors</p><a href="http://thedotpeople.com/" target="_Blank" class="sponsor-box tdp"></a><a href="http://thedotpeople.com/" target="_Blank" class="sponsor-box tdp"></a><a href="http://thedotpeople.com/" target="_Blank" class="sponsor-box tdp"></a><a href="http://thedotpeople.com/" target="_Blank" class="sponsor-box tdp"></a></div><div class="right"></div><br /></div><!-- END SIDEBAR --><div class="both"></div></div><!--WRAPPER--> <div id="footer"><div id="inside"><div class="navigation">  <h3>Navigation</h3>  <ul>   <li><a href="/">Home</a></li>   <li><a href="about/">About</a></li>   <li><a href="services/">Services</a></li>   <li><a href="contact/">Contact</a></li>   <li><a href="portfolio/">Portfolio</a></li>   <li><a href="resume">Resume</a></li>   <li><a href="support/">Support</a></li>   <li><a href="skills/">Skills</a></li>  </ul></div><!-- End navigation --><div class="websites">  <h3>Favorite Websites</h3>  <ul>   <li><a href="http://css-tricks.com/" target="_Blank">CSS-Tricks</a></li>   <li><a href="http://www.smashingmagazine.com/" target="_Blank">Smashing Magazine</a></li>   <li><a href="http://www.webdesignerdepot.com/" target="_Blank">Webdesigners Depot</a></li>   <li><a href="http://webdesignerwall.com/" target="_Blank">Webdesigners Wall</a></li>  </ul></div><!-- End websites --><div class="people">  <h3>People I Enjoy</h3>  <ul>   <li><a href="http://chriscoyier.net/" target="_Blank">Chris Coyier</a></li>   <li><a href="http://lea.verou.me/" target="_Blank">Lea Verou</a></li>   <li><a href="http://www.doncor.com/site/home" target="_Blank">Don Cormier</a></li>   <li><a href="http://squaredeye.com/" target="_Blank">Matthew Smith</a></li>   <li><a href="http://elliotjaystocks.com/" target="_Blank">Elliot Jay Stocks</a></li>   <li><a href="http://paulirish.com/" target="_Blank">Paul Irish</a></li>   <li><a href="http://www.kaylaellisdesign.com/" target="_Blank">Kayla Ellis</a></li>  </ul></div><!-- End people --><div class="both"></div></div>   <!-- END INSIDE --><div class="both"></div></div>    <!--END FOOTER -->

CSS:

/*  Main Content Wrap  */#default-container{width:550px;float:left;padding:10px;margin:0px;}#default-container h2,#default-container h3{font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;font-style: italic;color:#fcae00;margin-bottom:15px;font-weight: 100;margin-top:40px;}#default-container p{color:#505050;font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;font-size:16px;font-weight:lighter;}#default-container input{height:25px;line-height:25px;color:#666666;font-size:14px;}#default-container a {color:#fcae00;}#default-container a.button{padding:4px 12px 6px 12px;background-color:#fcae00;border-radius:6px;color:#FFFFFF;}#default-container h3.button{color:#505050; font-style:italic;}.search-result{width:550px;background-color:#EEEEEE; margin:10px 0; padding:10px 10px 5px 10px; border-radius:8px;}#wrap{width:550px; margin:0 auto;}#content-wrap{width:550px;padding:20px 0;color:#333333;float:left;margin-bottom:30px;}/*   Search Query   */#search-query{color:#666666;font-family: "Gill Sans / Gill Sans MT", sans-serif;font-weight:normal;font-size:20px;width:auto;margin:20px 0;}

Edited by Attila2452
Link to post
Share on other sites

yeah it was weird. for some reason only for the support page it was like that. i think it had something to do with <div id="default-container"> was spelt wrong. which would affect the padding, or possibly because i was missing the ">" in the code. but thanks . :) think you could help me with the search results page? I've had the same problem with another website (same code)

Link to post
Share on other sites

I think my weakest point right now with my current knowledge, is CSS Floats. it just doesn't stick, and i find myself guessing half the time. i know float left then margin anything left (the size + padding and margin of the floated item) but its the clearing, whether to clear left, right or both.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...