|
HTML - Quick Text Alignment Problem
Just a small problem I hope someone can help me out with.
New to Dreamweaver since week and been constructing a website for a client. One issue so far: Trying to align the header and text field shown in the image with the edge of the image on the left in the table below. Is this easily adjusted? Many thanks in advance. Similar TutorialsI am currently designing my first website as a personal one I can improve as I get better. I currently have a background that has a black border with a gray box in the middle. I want my text start at the side of the gray box but if I use the is leaves alot of spaces and does not look good. I do not want to use the <center> text </ center> because I wants it to be left aligned (starting at the gray box), Is there a code I could use to indent the text about 160px? -Shano p.s my site is www.shanehiggs.co.uk if you want to know what I mean by the black border with a gray box. I know this should be relatively easy, but for some reason I cannot get this to line up write. This is the page I am using as an example: http://gamingunwrapped.com/game/kirby-mass-attack/ Where I have the information listed such as Genre and Release, I have more than one item to list. But it keeps centering it, instead of listing it I am doing this manually to show how I want it Code: MSRP: $39.99
Amazon: $29.99
Gamestop: $34.99
Support GU
Amazon, Gamestop and Support GU should be aligned the same as to where the "$" is. I cant even get it to show up right here!! this is the code i have at the moment Code: <tr> <td class="gameinfotd"><b>MSRP:</td> <td class="gameinfotd black">$39.99 Amazon:<a href="http://amzn.to/ohDQ9t" target="_blank"> $29.99</a> Gamestop:<a href="http://tinyurl.com/3caf8vs" target="_blank"> $34.99</a> <b>Support GU</b></td> </tr> Please help!! I made this table but I don't know how to move the text away from the table 'wall'. I would like it to be about two or three spaces away. I also just noticed the bullets are outside the table in Firefox. I played with making another table inside the table but couldn't get it right. You can see the example here. Thank you. Adam Here is the code: <center><table border="2" cellpadding="2" cellspacing="2" width="61%"> <tr> <td align="left"> <br> <center><a href="http://jimdouglasautosales.com" target="_blank" rel="nofollow"><img src="http://jimdouglasautosales.com/images/Craigslist/CraigslistVehicleListingLogo.jpg" width="400" height="115.4" border="0"></a></center> <hr> <br> <b><font size="5"> <br> <br> <font size="4"> Miles: <br> Options: <font size="3"> <LI type="disc"> <LI type="disc"> <LI type="disc"> <LI type="disc"> <LI type="disc"> <LI type="disc"> </MENU> VIN: <br> <font size="3"> (Ask for a free vehicle history report) <br> <br> Visit our <A HREF="http://www.jimdouglasautosales.com" TARGET="new"> website </A> . Financing and warranties available. We also buy vehicles. </td> </tr> </table> <br> I've read all over various ways of making the image and the text align horizontally, yet somehow I can't get the darn thing to work in my website. I'm thinking it maybe because of DIV tags I have the following code: <div class="column1"> <div class="column2"><img src="images/logo_sm.png" border=0 height=97 align="bottom"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of </div> <div class="clear"></div> </div> The text is still aligning to the top of the image even though I've indicated bottom alignment. What am I doing wrong or what don't I know? Please help. thanks Navs I've got a line of text that includes some IMG tags. The images are 23 pixels high and the text is about 16 pixels high. So the IMGs increase the height of the line. Normally, Text and IMGs are aligned to "the bottom", so that the IMGs are much taller than the text. I could increase the size of the text so that it was as tall as the IMGs, but I'd rather not. I want the text to be vertically aligned to the "middle", so that the line looks better. Is that possible? Hi there, I need some help with this page: I can't get the "In this section:" link list to go to the right of the body text of the page and have the body text wrap around it. I'm also having trouble getting all the different headings and paragraphs to work right -- even if I set the CSS to display:block; the different headings display as inline elements. To get around this I've had to assign them all a width of 860 px -- which I think might be contributing to the problem getting the link list to go to the right of the body text, but horizontally aligned with the top heading. Thanks for any help you can give! Michael Hello, I am having a problem with Dreamweaver. Whenever I write on a page the area next to the box I'm writing in wont go down so it looks stupid, and I can't manually move it down because I need it to be in a template as I have multiple pages. Yes, it does this on other pages. Here is a picture of whats going on... The arrow in black is where the blue background on the box should follow with the content of the page. This is what I want the final picture to look like. As you can see the blue gets down to where the copy write is so it looks nice Please help, Lil N00b Hello, I have a problem this code has a problem. The first paragraph's email code doesnt show correctly. It seems to extend past the </a> to the next one it is very weird. Code: <html>
<head>
<!--
New Perspectives on HTML and XHTML
Tutorial 2
Case Problem 3
Diamond Health Club Membership Options
Author: Dustin Williams
Date: March 9, 2011
Filename: members.htm
Supporting files: diamond.jpg
-->
<title>Diamond Health Club Membership</title>
</head>
<body>
<div><img src="diamond.jpg" alt="Diamond Health Club" usemap="#diamondmap" style="border-width: 0" />
<map id="diamondmap" id="diamondmap">
<area shape="rect" coords="225, 4, 333, 40"
href="classes.htm" alt="Classes." title="View our classes" />
<area shape="rect" coords="258, 44, 437, 82"
href="members.htm" alt="Memberships." title="View our membership options." />
<area shape="default" coords="0, 0, 548, 150"
href="index.htm" alt="Home Page." title="Return to the Home Page." />
</map>
</div>
<hr/>
<div>
<a href="index.htm#fac" title="Learn more about our facilities">Facilities</a>
♦
<a href="index.htm#staff" title="Meet the DHC staff">Staff</a>
♦
<a href="index.htm#hours" title="View the DHC hours of operation">Hours</a>
</div>
<hr />
<h1>Membership Options</h1>
<p>Diamond Health Club offers a variety of membership
programs, including one sure to meet your specific
needs and budget. Pick up a membership form at the club or
<a href="mailto:rchi@dmond-health.com>e-mail Ron Chi
</a> to request one.</p>
<h3><a name="ind">Individual memberships</a></h3>
<p><i>You must be eighteen or older to qualify for an individual
membership.</i></p>
<ul>
<li><b>Gold</b>: Full access to the club and access to special
Gold Member areas.</li>
<li><b>Full</b>: Full access to the club during all open hours.</li>
<li><b>Weekdays</b>: A low-cost option that allows you full
access to the club from 10 a.m. to 3 p.m., Monday through
Friday.</li>
<li><b>Evenings</b>: A discount program, allowing
you access to the club from 5 p.m. to 10 p.m. every day
of the week.</li>
<li><b>Early Bird</b>: A discount program, allowing
you access to the club from 5 a.m. to 8 a.m., every day
of the week.</li>
<li><b>Weekends</b>: Enjoy the club on Saturday and Sunday. Perfect
for <i>weekend warriors</i>.</li>
<li><b>Seniors</b>: We provide special membership rates for individual
seniors.</li>
</ul>
<h3><a name="fam">Family memberships</a></h3>
<ul>
<li><b>With child care</b>: This option is best for families
who plan to use the children's play room, which is available
for children ages 6 weeks to 12 years. The play room is open every day.</li>
<li><b>Without child care</b>: Save a little on your membership
if your family won't need access to the play room.</li>
<li><b>Couples</b>: Memberships for married couples or domestic
partners. Pick up a membership form for specific rules regarding
eligibility.</li>
<li><b>Seniors</b>: We provide special membership rates for senior
couples.</li>
</ul>
<h3><a name="temp">Temporary memberships</a></h3>
<ul>
<li><b>Monthly</b>: For our long-term visitors this membership provides
access to the club for one month.</li>
<li><b>Weekly</b>: For short-time visits, this membership provides one
week of access to the club.</li>
<li><b>Daily</b>: A daily pass to the club and all of its
facilities.</li>
<li><b>Punch cards</b>: Our punch cards allow guests complete access to
the Club (except child care facilities) for a specific number of full days.
Punch cards make great gifts and are available for 5, 10, and 20
visits.</li>
<li><b>Special events</b>: Plan your parties and special work outings at
the Diamond Health Club. Our onsite coordinator can meet
your every need.</li>
</ul>
<hr/>
<div>
<b>Diamond Health Club ♦
4317 Alvin Way ♦
Boise, ID 83701 ♦
(208) 555-4398</b>
<br />
<i>
Your Year-Round Source for Fun Family Health
</i>
</div>
</body>
</html>
On my website, www.JKRfan.com , the alignment on the layout is a little bit off and I can't figure out why. The problem with the alignment also changes from page to page. Will somebody please help? Thanks, Kristen I've been putting my layout into html from photoshop and finally finished, thing is I was using Firefox to view it as I went along. Now when I view it in Internet Explorer, there is this small unexplained space on the right side of my header image that is screwing up the page, plus the table that I have the navigations links on the top left has way more spacing between rows than it does on Firefox. Here's the layout: http://www.ff12guide.com/ the two problems a 1) the empty space to the right of 'header_red.jpg' and 'top-2-shadow.jpg' at the top of the page 2) the links in the 'sections' area at the top-left (characters, combat, etc.) is much more spaced out than it is in Firefox, and does not look right I absolutely cannot figure out how to fix this and it's driving me nuts, anyone have an idea? I am practicing code from a file and I am having issues. Specifically, I the geogebra applet is supposed to be framed in the right side, where the "buttons" are the left. I can't figure out why the file is not on the right side in its own section. Any suggestions? I am attaching the code using a word document... I highlighted what I feel is the problem. Nick I'm really stuck here. This has worked in the past, but not it seems to not be working. It must be a really easy fix. HTML Code: <body style="font-family:Georgia;"> <div align="center"> <div id="content"> Lorem ipsum... </div> </div> </body> I want the "content" field to be center aligned, but it is still sitting there on the left. How do I fix this? Thanks! i have uploaded my website. i m facing a problem. my website appears differently in different computers. its like changing alignment, table spreading so so. i used table to develop the site. how can i fix this problem. Can anyone help me? Hi, I've finally created a 2 level CSS menu and I've positioned a DIV layer below it for the content. However, I would like to know how to shift the content DIV layer up, closer to the menu (horizontal one). Or is my coding for the menu causing a problem? Here's my site btw: Click Hi, I can usually troubleshoot basic html issues, but don't have much knowledge of frames. The page design is a basic 2-frame horizontal format with body content files that swap in and out from a header menu bar. Both header and body files are centered, and should be visually seamless. The problem is when the main body frame is set to scrolling="yes", the scroll bar in the browser window offsets the center of the frame, and the two frames appear out of alignment. If the main body frame is set to scrolling="no" then they line up properly (but obviously cannot scroll down through the page). You can view the issue he http://www.sequentz.com/menutest/index.htm I would greatly appreciate some help sorting this out, so that the two files align seamlessly and the bottom file can scroll. Thank you. Hey Can someone please tell me how I can cushion the object on the right to the content in the center? I can't use fixed widths, since the width of the central content differs. If I remove 'float: right;' from .css, the object goes behind the central content. HTML: Code: <div class="breadcrumbs-container">
<div class="breadcrumbs-left"></div>
<span class="breadcrumbs">
<a href="{U_INDEX}" accesskey="h">{L_INDEX}</a>
<!-- BEGIN navlinks -->
<img src="{T_THEME_PATH}/images/breadcrumb_arrow.gif" width="8" height="9" alt=">" />
<a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a>
<!-- END navlinks -->
</span>
<div class="breadcrumbs-right"></div>
</div><!-- /breadcrumbs container -->
CSS: Code: .breadcrumbs-container {
background: transparent;
margin: 0;
padding: 0;
height: 30px;
width: 100%;
}
.breadcrumbs {
background: url("{T_THEME_PATH}/images/breadcrumb-bg.png") repeat-x;
height: 30px;
float: left;
vertical-align: middle;
line-height: 30px;
}
.breadcrumbs-left {
background: url("{T_THEME_PATH}/images/breadcrumb-bg-left.png") left no-repeat;
width: 50px; height: 30px;
float: left;
}
.breadcrumbs-right {
background: url("{T_THEME_PATH}/images/breadcrumb-bg-right.png") right no-repeat;
width: 50px; height: 30px;
float: right;
}
Thanks Hello there, I am in serious need of help. I am working on a site where I could update the navbar at any time and not have to change the code on numerous pages. After some reading, I concluded that the use of an SSI would be a suitable solution. With that being said, my headache ensues. I have developed an outline in dreamweaver for my website, and have created a div where the ssi will be placed. The navbar was created in Fireworks. In IE, i can get the menu to appear where I want it, which is below the flash image below the header, however, when I run the mouse over the dropdown, the drop down appears some 50 pixels above the navbar. I am thinking that this might be a css problem. In Firefox, the div tag appears off to the left and when the mouseover is done, the dropdown appears in the same place as they have in IE. In both instances, the dropdown menu is in line with the image used in the navbar. I would really appreciate any help someone could offer. If someone could send me a working solution, I would be even more grateful. I think my eyes are tired of viewing the code. the site can be viewed at the following url: http://www.prestigeinteractive.com/wmems2/ I would greatly appreciate any help you can offer. Thanks, Greg ps. if you would like the source files, email me at gwhite@prestigeinteractive.com Hi all, Newbie here. So I've built an HTML website and I want to vertically centralise it because it looks a little funny on larger screens at the moment. I have followed several tutorials worth of direction on how to do it and tables seem to be the easiest but I'm having a problem with getting the table to "fit to window". This is the table instantiation: <table align="center" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> The problem is that the height is not working. If I change it to a specific value such as 900px then it works perfectly but it must be getting the wrong value otherwise. Has anyone encountered this before and can you help? The site is http://www.thechapelstudios.co.uk Hi am trying to get multiple tables with different number of columns to be aligned properly. I'd expect the columns width the same width of both tables to be align properly. But they are not, as you can see on the attached picture at the bottom of the page. The first two columns look good, but the more columns I add the more shrewd up the result gets. Does anybody know how to get them properly aligned ? Of course it works if the width is given in px not in %, but that is not what I want to do. Using a single table and colspan is also not an option, as this is a simplified example of the problem. Thanx in advance. HTML Code: <html>
<body>
<style type="text/css">
.width100pro {
width: 100%;
}
.c1-6 {
width: 15%;
}
.c1-12 {
width: 5%;
}
.t1 {
width: 35%;
}
.t2 {
width: 65%;
}
.b25 {
width: 25px;
}
.b100 {
width: 100px;
}
</style>
<table class="width100pro">
<tr>
<td class="c1-12"><input value="TestSMall" class="b25"></td>
<td class="c1-6"><input value="TestBig" class="b100"></td>
<td class="c1-12"><input value="TestSMall" class="b25"></td>
<td class="c1-6"><input value="TestBig" class="b100"></td>
<td class="c1-12"><input value="TestSMall" class="b25"></td>
<td class="c1-6"><input value="TestBig" class="b100"></td>
<td class="c1-12"><input value="TestSMall" class="b25"></td>
<td><input value="TestBig" class="b100"></td>
</tr>
</table>
<table class="width100pro">
<tr>
<td class="c1-12"><input value="TestSMall" class="b25"></td>
<td class="c1-6"><input value="TestBig" class="b100"></td>
<td class="c1-12"><input value="TestSMall" class="b25"></td>
<td class="c1-6"><input value="TestBig" class="b100"></td>
<td class="c1-12"><input value="TestSMall" class="b25"></td>
<td><input value="TestBig" class="b100"></td>
</tr>
</table>
</body>
</html>
|
|||||||