|
HTML - Image And Text Slightly Misaligned On A Line. Ideas?
Hi guys,
I got a quick question. I can't for the life of me understand why the youtube, facebook and twitter images below absolutely insist on having a few pixels of space to the bottom of it's line. It makes it so the following link-text seem to be too low on the line in comparison to the image. If you see in the lower left corner of www.leveldance.com you can see what i mean. Any ideas? (I have no padding added in the css) Thanks a million in advance! HTML Code: <div class="left_col_container">
<div><img src="images/navigation/sociables_headline.png" alt="Join Our Community!"/></div>
<p style="margin-top: 5px; margin-bottom: 0px">Join the newsletter!</p>
<style type="text/css">.af-form {margin:0 !important;}</style>
<script type="text/javascript" src="http://forms.aweber.com/form/36/693624936.js"></script>
<div style="margin-top: 5px">
<a class="sociables" href="http://www.facebook.com/leveldance" target="_blank"><img src="images/sociables/faceBook-icon.png" class="no_border" alt="Find us on Facebook!"/></a><a class="sidebutton" href="http://www.facebook.com/leveldance" target="_blank"> Find us on Facebook!</a>
</div>
<div style="margin-top: 5px">
<a class="sociables" href="http://www.twitter.com/leveldance" target="_blank"><img src="images/sociables/twitter-icon.png" class="no_border" alt="Follow us on Twitter!"/></a><a class="sidebutton" href="http://www.twitter.com/leveldance" target="_blank"> Follow us on Twitter!</a>
</div>
<div style="margin-top: 5px">
<a class="sociables" href="http://www.youtube.com/user/leveldancenyc" target="_blank"><img src="images/sociables/youtube-icon.png" class="no_border" alt="See us on YouTube!"/></a><a class="sidebutton" href="http://www.twitter.com/leveldance" target="_blank"> See us on YouTube!</a>
</div><br/>
</div> <!-- left_col_container end -->
Similar TutorialsIt's a simple problem. I have a set of anchors that are the navigation for my site. They are very simply rendered as CSS-styled text with links. There's no Javascript (Not controlling the basic layout in any case). The issue is that the "link" (The clickable area) is displaced vertically from the associated text. I'm guessing that this is a rendering bug in Firefox, but I'd like to be sure that I've not just done something stupid first. In any case, the site in question is http://portfolio.hoovesofdestiny.co.uk. The links are those at the top of the page. The pages all validate according to the W3C, as does the CSS. Jon here is the (ineffective) code currently: <img style="float: left; width: 169px; height: 73px;" src="img/logo1.png" alt="" /> <h1 style="text-align: center;">random text</h1> the image shifts the left margin such that the text is centered as though the page width was 169px less than it really is. i'm not debating the code itself; the code above behaves as its meant to. aka no surprises. i just cant figure out the appropriate code to center the text across the entire real width of the page as though there was no image. i've tried div tags & all the things google hunting advised. no luck. other than finding this forum, which seems like it'll be a boon! thanx in advance for advise/comments/feedback/help. Can someone please help? I've spent hours of time trying to fix this tiny problem. It's not online yet, so you'll have to use the text. I attached them to this thread. The CSS belongs in a folder called "css_js". The "index" should be renamed html, and the osrfd should be renamed css. In short, the bar at the bottom of the page is the issue. It works fine in IE, but not in Firefox. Hello all, I'm a newb at html, just started some basic coding last week. I've made my first site, though as you can see, the images and text (even if it's a placeholder right now) aren't lined up, and I'm not sure how to tell it to do that. Anybody with more expertise understand my situation, and how to fix it? Thanks! http://elliottetzkorn.com Hey, I recently logged onto my old Piczo site which I used to store pictures on( The site domain being; http://www.badboypicturessss.piczo.com/?cr=1 ) . After logging in I discoverd no images show. Just a red cross upon the corner (I've tried to view on Firefox and Internet Explorer) When clicking propeties on the picture and entering into the Firefox html I am met with, This XML file does not appear to have any style information associated with it. The document tree is shown below. − <Error> <Code>AccessDenied</Code> <Message>Access Denied</Message> <RequestId>4B0C38630330B989</RequestId> − <HostId> 0hsgiTfM+6zl+X127uhukEZM6SYj0D+HCeYk113cG8ftnK0AM5 knte5VpiqDEKo4 </HostId> </Error> Am running out of ideas of how to get the images to show, I've tried numerous forums seeking the answer to how to display the images! Thanks for reading, be great if you could help! so i'm working on my new site and everything seemed to be working find until i got to the 8th image since the image is wide instead of a scroll arrow appearing to scroll the page over, the image just collapses below my other divs to fit. can anyone help me fix this? thanks in advance guys this is the website http://www.paulodourado.com/x_milk.html and this is the page where I encounter problems http://www.paulodourado.com/thrice.html http://credmond8.awardspace.com/home.phtml How can I get "Site Theme" and "Time" on the same line? Hey everyone and thanks ahead of time for takin a look see at this! I'm working on creating a headline for one of my pages that I want to have some sort of 'text' decoration on each side of it like this: -----[blah blah]------ Now I want the title ('blah blah' in this case) to be in a <h1> tag...but not the decoration on the outside. However when I set it up like: Code: ----[<h1>blah blah</h1>]---- As you would guess the result is: -----[ Blah Blah -----] Is there someway I can keep these inline, but still have an <h1> tag wrapped only around the title? THANKS!! Hi all, I have the following code... <BODY> <ul> <li><h3> hello world</h3> I love you </li> </ul> </BODY> Right now this comes out on two separate lines. Is it possible for both texts to be on the same line? Thanks. please, check http://members.dodo.com.au/~rouslan/...ite/index.html I need to know how to get rid off strange effect down the bottom and how do I make text and image aligned on the same "line", "level" e.g. image image text text text text text text text text image image text text text text text text text text image image text text text text text text text text image image text text text text text text text text Hi guys, can someone help me. I'm trying to get my text to sit like this: however it sits like this: www.studioeighty.co.uk thanks Steve Hi, I am writing various things on one line - such as Previous, Back to Main Menu and Next - but would like to align the differently e.g. I would like "previous" to be aligned to the left of the page, "back to Main Menu" in the middle and "Next" on the right side. I have tried pressing space bar - but am only able to do one space in Dreamweaver. Any ideas? Thanks. I am trying to do something pretty basic, but I dont understand the behavior or how to fix it. I want something to look like (where the '*' are centered): Code: *
*
test *
*
*
*
and am using the code: Code: <CENTER>*</CENTER> <CENTER>*</CENTER> test<CENTER>*</CENTER> <CENTER>*</CENTER> <CENTER>*</CENTER> <CENTER>*</CENTER> But the output looks like: Code: *
*
test
*
*
*
*
Hello, Trying to put together a portfolio site for an assignment. I've managed to hammer out most of the kinks (aside from some css formatting), but for some reason when the page reaches a length that requires vertical scrolling the entire site shifts slightly to the left. Here's the site right now as it is: http://kool-factor.com/index2.php I've added a few repeat posts on the Home page to get the desired effect (can also be seen on Curriculum Vitae). The Contact page is shorter, and shifts back to the right. Strangely, when the Home page only has one post, it is also shifted to the right. I don't think it's a PHP problem (though it could be, and I just don't know about it), so I've been trying to go through the HTML and CSS, but am coming up short. Anyway, here's the index2.php code: PHP Code: <?PHP $default = 'home.php'; $page_Title = $page_Content = ''; $page=$_GET['id']; function loadInclude($file, $default, $dir='') { global $page_Title, $page_Content; if(empty($file) || !$file) $file = $default; if(!file_exists($dir . $file . '.php')) $file = $default; /* echo 'Including: ' . $dir . $file . '.php<br />'; */ include($dir . $file . '.php'); } if(isset($_GET['id'])) loadInclude($_GET['id'], 'home', ''); else include $default; ?> <!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=utf-8" /> <title>Curtis Winger<?php echo $page_Title;?></title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main"> <table border="0" cellpadding="0" cellspacing="0" id="headertable"> <tr> <td class="titleleft"><img src="head.png" alt="" /></td> <td class="titleright"> <div id="navmenu"> <a <? if( ($page == 'home') || ($page == '')): ?> class="current" <? endif ?> class="navlink" href="index2.php">Home</a> <a <? if($page == 'projects'): ?> class="current" <? endif ?> class="navlink" href="index2.php?id=projects">Projects</a> <a <? if($page == 'cv'): ?> class="current" <? endif ?> class="navlink" href="index2.php?id=cv">Curriculum Vitae</a> <a <? if($page == 'contact'): ?> class="current" <? endif ?> class="navlink" href="index2.php?id=contact">Contact</a> </div> </td> </tr> </table> <?php echo $page_Content;?> <table border="0" cellpadding="0" cellspacing="0" id="footertable"> <tr> <td>© 2009 Curtis Winger</td> </tr> </table> </div> </body> </html> The CSS: Code: @charset "utf-8";
/* Layout Design */
body {
background-color: #E6E6E6;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#main {
background-color: #FFFFFF;
display: block;
width: 800px;
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
left: auto;
right: auto;
}
#headertable {
width: 100%;
text-align: center;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 13px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
#footertable {
width: 100%;
text-align: right;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #000000;
padding-top: 7px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 7px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.titleleft {
width: 80%;
}
.titleright {
width: 20%;
}
.align-right {
float:right; margin: 0 0 5px 5px;
}
.align-left {
float:left; margin: 0 5px 5px 0;
}
/* Text */
.h1 {
font-size: 17px;
font-weight: bold;
color: #5e89ae;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.titletext {
text-align: center;
}
.contenttext {
display: inline-block;
width: 92%;
clear: both;
float: right;
right: 0px;
}
.contenttext2 {
display: inline-block;
width: 84%;
clear: both;
float: right;
right: 0px;
}
/* Links */
a {
color: #000000;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
#navmenu a {
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
border: none;
height: auto;
width: auto;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
text-align: left;
background-position: right;
font-weight: bold;
background-image: url(bullet.png);
background-repeat: no-repeat;
}
#navmenu a.navlink:link, a.navlink:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
font-weight: bold;
background-position: right;
}
#navmenu a.navlink:hover, a.navlink:active {
background-color: #E6E6E6;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
font-weight: bold;
background-position: right;
}
#navmenu a.current {
background-color: #E6E6E6; !important
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
border: none;
height: auto;
width: auto;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
text-align: left;
background-position: right;
font-weight: bold;
background-image: url(bullet.png);
background-repeat: no-repeat;
text-decoration: none;
}
And a sample page, home.php: PHP Code: <?PHP $page_Title .= ''; $page_Content .= ' <img src="images/home_image.jpg" class="align-left" alt="" /> Hello, and welcome to the launch of my new website. <br /><br /> I\'m an aspiring graphic designer and filmmaker, and you\'ll find a collection of my work here, as well as information regarding my education, work experience, and technological experience with various applications. <br /><br /> Relevant news and updates concerning myself, or my work, will be posted on this page, so keep an eye out. <br /><br /> If there\'s anything I can do for you don\'t hesistate to contact me. <br /><br /> Enjoy. <br /><br /> <strong>Posted by Curtis | November 16, 2009</strong> <br /><br /> <img src="images/home_image.jpg" class="align-left" alt="" /> Hello, and welcome to the launch of my new website. <br /><br /> I\'m an aspiring graphic designer and filmmaker, and you\'ll find a collection of my work here, as well as information regarding my education, work experience, and technological experience with various applications. <br /><br /> Relevant news and updates concerning myself, or my work, will be posted on this page, so keep an eye out. <br /><br /> If there\'s anything I can do for you don\'t hesistate to contact me. <br /><br /> Enjoy. <br /><br /> <strong>Posted by Curtis | November 16, 2009</strong> <br /><br /> <img src="images/home_image.jpg" class="align-left" alt="" /> Hello, and welcome to the launch of my new website. <br /><br /> I\'m an aspiring graphic designer and filmmaker, and you\'ll find a collection of my work here, as well as information regarding my education, work experience, and technological experience with various applications. <br /><br /> Relevant news and updates concerning myself, or my work, will be posted on this page, so keep an eye out. <br /><br /> If there\'s anything I can do for you don\'t hesistate to contact me. <br /><br /> Enjoy. <br /><br /> <strong>Posted by Curtis | November 16, 2009</strong> '; ?> If you have any ideas, or need anything else, let me know. Thanks guys. Hi, I want to create a header (<h1>,<h2>,...) like on the picture (see attachment) with html and css. It is possible to create sth like that without using pictures? Thanks I was wondering if someone could point me in the right direction here. Given the following: <html><body><table border=1><tr> <td style='vertical-align: bottom;'><pre>Here is one line of preformatted text inside a td tag</pre></td> </tr></table></body></html> Firefox and Internet Explorer display the preformatted text with an extra blank line after the text. Safari seems to display this as I would expect (with no implicit blank line). I've tried playing around with the border, margin, and padding styles, but I can't seem to get rid of the extra blank line within the <td>. Anyone have any ideas ? Thanks, John Hi, I am doing a small project. In that I am displaying percentage visually with the help of horizontal line using width. when the user places cursor on that line, is there any chance to show percentage of that line. Eagerly waiting for your replies. Thanks in advance, Hi I am having trouble on this topic, can't think of a way to clearly explain this so i ll just throw an example: I'm aiming for this in a table: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXX______________________________ without the need to do line break or start a new <span><div>or<td>, so basicly the text content (the "X"s) is continuous and the underline needs to fill the whole horizontal width, making <u> an invalid solution. Does anyone know how to make this possible, Thanks in advance! P.S. I am using query to auto fill the text content so the length of the text is not fixed and will change base on the database record Dear all, currently i m having trouble centralizing my buttons in a horizontal line with my text above it. I m hosting my things on blogspot and on a html preview, my html code seems correct for ''my buttons in a horizontal line with my text above it''. But with blogspot, my buttons are vertical instead. My website is www.buttonsupcloset.blogspot.com Below is the sample of my image followed by the text and buttons. <img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/101.jpg" /> <table width="800"> <tr><td> <p style="text-align: center;">Sweet Bustier Top (White) <center> <a href="http://ww12.aitsafe.com/cf/add.cfm?userid=E7247990&product= Sweet+Bustier+Tube+(White) &price=22&return=www.buttonsupcloset.blogspot.com"> <img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/addcart.gif" border="0" /></a> <a href="http://ww12.aitsafe.com/cf/review.cfm?userid=E7247990&return=www.buttonsupcloset.blogspot.com"> <img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/preview.gif" border="0" /></a> <a href="http://ww12.aitsafe.com/cf/review.cfm?userid=E7247990&return=www.buttonsupcloset.blogspot.com"> <img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/checkout.gif" border="0" /></a> </center> </td> <td> <p style="text-align: center;">Sweet Bustier Tube (Purple) <center> <a href="http://ww12.aitsafe.com/cf/add.cfm?userid=E7247990&product= Sweet+Bustier+Tube+(Purple) &price=22&return=www.buttonsupcloset.blogspot.com"> <img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/addcart.gif" border="0" /></a> <a href="http://ww12.aitsafe.com/cf/review.cfm?userid=E7247990&return=www.buttonsupcloset.blogspot.com"> <img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/preview.gif" border="0" /></a> <a href="http://ww12.aitsafe.com/cf/review.cfm?userid=E7247990&return=www.buttonsupcloset.blogspot.com"> <img src="http://s570.photobucket.com/albums/ss147/buttonsupcloset/checkout.gif" border="0" /></a> </center> </td> </table> Hoping someone could help me solve this problem. regards, goddha I want to align some text on opposite sides of the same line, ie: (but obviously without the underscore) <<<previous_____________________________________________________________ next>>> and I'm not sure how as if I just use p align, the "next" will be one line below the "previous"... any suggestions? thank you! |
|||||||