homepage Welcome to WebmasterWorld Guest from 54.161.133.166
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Vertically Line Up Elements
css, vertical, align
webstuck




msg:4579980
 5:17 pm on May 31, 2013 (gmt 0)

I am new to CSS and having an issue. You can see my sample page at <snip>. I am having a tough time getting the Google Plus Follow button and Google Search box on the top right of the page to vertically align with the top of the logo and site name on the top left of the page.

[edited by: bill at 2:54 am (utc) on Jun 1, 2013]
[edit reason] no links to your sites as per TOS [/edit]

 

webstuck




msg:4580048
 12:49 am on Jun 1, 2013 (gmt 0)

Thanks in advance for any help!

lucy24




msg:4580054
 1:27 am on Jun 1, 2013 (gmt 0)

You'll need to post the offending code-- NOT the whole thing! Only enough to demonstrate the error. People need to see the html and css as they existed at time of posting, not as they will exist next week or at some future time.

fwiw, I fed the URL to the w3 validator and got 75 errors and 9 warnings. Some warnings can be ignored, but I think this batch are genuine typos.

By constrast, the CSS comes through as squeaky-clean CSS3 with not so much as a warning.

So start by hammering the html into shape.

webstuck




msg:4580056
 1:43 am on Jun 1, 2013 (gmt 0)

Here is my CSS:

<style type="text/css" media="screen, print, projection">
a:link
{
color:#990000;
font-weight:bold;
}
a:visited
{
color:#990000;
}
body
{
background:white;
font-family:verdana, arial, helvetica, sans-serif;
font-size:12px;
}
html
{
margin:0;
padding:0;
}
#wrap
{
margin:0 auto;
width:980px;
}
#header
{
}
#logo
{
float:left;
}
#site-name
{
}
#social
{
}
#google-search-and-newsletter
{
float:right;
padding:0 0 0 5px;
}
#google-plus
{
float:right;
}
#social-buttons
{
clear:both;
float:right;
}
#feedburner
{
}
#pinterest
{
padding:0 0 0 5px;
vertical-align:top;
}
#facebook-like
{
padding:0 0 0 5px;
}
#twitter
{
padding:0 0 0 5px;
}
#nav
{
background:#ffcccc;
clear:both;
text-align:center;
}
#nav ul
{
list-style:none;
margin:0;
padding:0;
}
#nav li
{
display:inline;
margin:0;
padding:0;
}
#sidebar
{
float:left;
}
#main
{
float:left;
padding:10px;
width:400px;
}
h1
{
color: #CC6666;
font-weight:bold
}
#nav-category-links
{
float:right;
margin:0 0 0 5px;
}
#footer
{
clear:both;
text-align:center;
}
#footer p
{
margin:0;
}
* html #footer
{
height:1px;
}
#copyright
{
font-size:10px;
}
</style>

and here is the HTML that is not lining up correctly:

<div id="header">
<span id="logo">
<a href="http://www.example.com/"><img src="http://www.example.com/images/RSstickcouple.jpg" border="0" height="67" width="70"></a>
</span>
<span id="site-name">
<a href="http://www.example.com/"><img src="http://www.example.com/images/examplelogo-36pxh.png" alt="exampleck.com" border="0" height="30" width="297"></a><br>
The glue that holds your example together!
</span>
<div id="social">
<div id="google-search-and-newsletter">
<!-- GOOGLE SEARCH - START -->
<form action="http://www.google.com" id="cse-search-box" target="_blank">
<div>
<input type="hidden" name="cx" value="partner-pub-3412735816916817:xxxxxxxxxx" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" value="Search" size="21" onfocus="if(this.value=='Search')this.value='';" onblur="if(this.value=='')this.value='Search';" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>
<!-- GOOGLE SEARCH - END -->
<!-- GETRESPONSE SUBSCRIPTION FORM - START -->
<form action="http://www.getxxxxse.com/cgi-bin/add.cgi" method="post" id="GRSubscribeForm" accept-charset="UTF-8">
<label for="GRCategory3"></label>
<input type="text" name="category3" size="12" id="GRCategory3" value="Email Address" onfocus="if(this.value=='Email Address')this.value='';" onblur="if(this.value=='')this.value='Email Address';">
<input type="submit" value="Join Newsletter">
<input type="hidden" name="category1" value="examplenewsletter">
<input type="hidden" name="confirmation" value="http://www.example.com/newsletterresult.htm">
<input type="hidden" name="ref" value="000">
<input type="hidden" name="getpostdata" value="get">
</form>
<!-- GETRESPONSE SUBSCRIPTION FORM - END -->
</div>
<div id="google-plus">
<!-- GOOGLE PLUS BADGE - START -->
<div class="g-plus" data-width="170" data-height="69" data-href="//plus.google.com/xxx0759116433212593" data-rel="publisher"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- GOOGLE PLUS BADGE - END -->
</div>
<br>
<div id="social-buttons">
<span id="feedburner">
<!-- FEEDBURNER.COM - START -->
<a href="http://feeds2.feedburner.com/examplecomFeaturedContent"><img src="http://www.romancestuck.com/images/rss-hearticon.jpg" height="18" width="57" border="0"></a>
<!-- FEEDBURNER.COM - END -->
</span>
<span id="pinterest">
<!-- PINTEREST.COM - START -->
<a data-pin-do="buttonFollow" href="http://pinterest.com/example/">example</a>
<!-- PINTEREST.COM - END -->
</span>
<span id="facebook-like">
<!-- FACEBOOK LIKE - START -->
<div class="fb-like" data-href="http://www.facebook.com/example" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" ref="like_button"></div>
<!-- FACEBOOK LIKE - END -->
</span>
<span id="twitter">
<!-- TWITTER FOLLOW - START -->
<a href="https://twitter.com/example" class="twitter-follow-button" data-show-count="true" data-width="150px" data-show-screen-name="false">Follow </a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
<!-- TWITTER FOLLOW - END -->
</span>
</div>
</div>
</div>

Thanks!

[edited by: bill at 2:58 am (utc) on Jun 1, 2013]
[edit reason] use example.com for URLs [/edit]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved