HTML - Mobile Html Alignment

Hi Everyone,

I'm really needing help. I'm taking a stab at building my first webpage to my Dad's business. I am trying to figure out how to put a company logo in the top left corner, but every time I do it moves everything around. Does anyone have any idea on how I can keep the current format but also put a logo in the top left corner?

Any and all help is greatly apprecaited as this is the 3rd or 4th forum I have posted on looking for help.

The site is www.bennettspainting.com

Best Regards,

Aetrox

Hi
This is what i have:

PHP Code:
div id="wrapper">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="17%" ><img src="element.png" width="230" height="381" /></td>
      <td width="29%" align="left">middle</td>
      <td width="25%" align="left" background="backimg.png"><p>dfg</p></td>
      <td width="29%"></td>
  
  </tr>
</table>

</div> 


and this is what i get:




Basically i have a table with 3 cells, the left (with the pink effect), the middle, and the right side.
What i want is that image effect which is in left side of the page to be always aligned at top.
should i create another <div> inside the <td> and put the image in the <div> ? is there a good way to do this ?
Thanks

Hi guys,

I've created an advert with some affiliate links in that I want to display on my main pages of my website. I have only fairly recently jumped into the world of web design/development so I've probably not made the most efficient page.

The advert is layed out inside a table that is 4 columns and 2 rows and everything seems fine when I view that page. Except, when I put this page into my main pages (via an iframe) it shows nearly correctly, but the alignment is slightly off: the second column in is a few pixels down than the others. I have checked the coding over and over to no avail.

Is there maybe a reason for this? Or some tips that you could give?

I did try yesterday by just copying and pasting the code directly from the advert page to the main pages which require them - but that's a whole new can of worms! The alignment of that attempt was beyond a joke (even then I couldn't work it out...).

Many thanks in advance for your ideas.

I have my sidebar to the bottom center. I want it to the left of my content.



l-------------l -----------------------------------------------------------------
l l l l
l l l l
l l l l
l l l l
l l l l
l l l l
l l l l
l l l l
l l l l
l l l l
l l l l
l l l l
l------------ l l----------------------------------------------------------------l




That's what I want it to look like. Here's my code right now;



<center><TR height=*>
<TD bgcolor=2f2f2f valign="left"><font color=eaeaae>
<CENTER>
<BR><BR>

<TABLE border=0>
<TR width=25%><TD bgcolor=green><CENTER><FONT SIZE="+3"><A

HREF="index.html">Home</A></FONT></CENTER></TD></TR>
<TR><TD bgcolor=darkgreen><CENTER><FONT SIZE="+3"><A

HREF="characters.html">Characters.</A></FONT></CENTER></TD></TR>
<TR><TD bgcolor=green><CENTER><FONT SIZE="+3"><A HREF="mguide.html">Mission

Guide</A></FONT></CENTER></TD></TR>
<TR><TD bgcolor=darkgreen><CENTER><FONT SIZE="+3"><A

HREF="contact.html">Contact</A></FONT></CENTER></TD></TR></center>

</CENTER>
</font></TD>
<TD valign="left">

I've created a frameset, and on the top frame I have a flash animation, and on the main frame is where my stuff is loaded!
The thing is, the top is aligned to center, and the main frame too! but on the main frame isn't aligned with the top one, I think is because of the scrollbar! It aligns between the left end of the browser and the scroll bar instead of the right end of the browser... is there a way to align without the scrollbar?? i can't disable the scrollbar because i need it LoL

Hope you understand what I'm saying ... LooL

check this link http://black1c3.awardspace.com/
so you can see what i'm saying the two images are not aligned...

thanks for your time!!

im not sure if this is an issue with html or css but im i have 3 columns in a table of 1 row and im using css to assign a background image to the table columns and the 1st and 3rd column will not top align the background image properly to line up with the background image of the 2nd column (or possibly its the 2nd not lining up with the 1st and 3rd) i will link to the site and post the affecting code here (you can view source on the page to see the html)

http://www.wiffleague.com/main.php

Code:

td.mainBoxTitle
{
	background-color: #4d6066;
	background-image: url('../images/topmiddleedge.png');
	background-repeat: repeat;
	background-position: top left;
	background-attachment: fixed;
	font-family: Geneva, Verdana, Tahoma;
	color: #000000;
	font-size: 8pt;
	text-decoration: none;
	font-weight: bold;
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
}

td.mainBoxTitleLeft
{
	background-color: #4d6066;
	background-image: url('../images/topleft.png');
	background-repeat: no-repeat;
	background-position: top left;
	font-family: Geneva, Verdana, Tahoma;
	color: #000000;
	font-size: 8pt;
	text-decoration: none;
	font-weight: bold;
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
}

td.mainBoxTitleRight
{
	background-color: #4d6066;
	background-image: url('../images/topright.png');
	background-repeat: no-repeat;
	background-position: top right;
	font-family: Geneva, Verdana, Tahoma;
	color: #000000;
	font-size: 8pt;
	text-decoration: none;
	font-weight: bold;
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
}

note: the 3 background images in question were sliced off of the same original psd file and exported as png files using the same pixel height per slice (35px) and a 35px width for the left and right image with a 3px width for the middle image

Hello all,

I am having a problem which I can't seem to figure out with an html page. I sliced up a photoshop image then turned it into a web page. I took the html table from the sliced up header, and plugged it into the final web page. It looked like it was aligned properly in Dreamweaver, however when I viewed the webpage there were some alignment issues with the page.

Here is the link to the misaligned page:
http://test.gridpointpm.com

Here is the code for part of the index page that includes the header with the alignment issues:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="maxheight.js" type="text/javascript"></script>
</head>

<body  id="page1" onload="new ElementMaxHeight()">
<div class="w">
  	<div class="site_center">
  	<div class="site_center1">
          	<div id="header">
       	  		<div class="flash">
                <!-- Save for Web Slices (indexheader.psd) -->
<table id="Table_01" width="866" height="441" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="13">
			<img src="images/index_01.jpg" width="866" height="66" alt=""></td>
		<td>
			<img src="images/spacerh.gif" width="1" height="66" alt=""></td>
	</tr>
	<tr>
		<td colspan="13"><img src="images/index_02.jpg" width="866" height="206" alt="" /></td>
		<td>
			<img src="images/spacerh.gif" width="1" height="206" alt=""></td>
	</tr>
	<tr>
		<td colspan="7" rowspan="2">
			<img src="images/index_03.jpg" width="632" height="114" alt=""></td>
		<td colspan="5">
			<img src="images/index_04.jpg" width="157" height="34" alt=""></td>
		<td rowspan="6">
			<img src="images/index_05.jpg" width="77" height="169" alt=""></td>
		<td>
			<img src="images/spacerh.gif" width="1" height="34" alt=""></td>
	</tr>
	<tr>
		<td colspan="5" rowspan="2">
			<img src="images/index_06.jpg" width="157" height="95" alt=""></td>
		<td>
			<img src="images/spacerh.gif" width="1" height="80" alt=""></td>
	</tr>
	<tr>
		<td colspan="5">
			<img src="images/index_07.jpg" width="360" height="15" alt=""></td>
		<td rowspan="3">
			<img src="images/index_08.jpg" width="180" height="40" alt=""></td>
		<td rowspan="4">
			<img src="images/index_09.jpg" width="92" height="55" alt=""></td>
		<td>
			<img src="images/spacerh.gif" width="1" height="15" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="images/index_10.jpg" width="153" height="40" alt=""></td>
		<td>
			<img src="images/index_11.jpg" width="42" height="16" alt=""></td>
		<td rowspan="3">
			<img src="images/index_12.jpg" width="9" height="40" alt=""></td>
		<td>
			<img src="images/index_13.jpg" width="58" height="16" alt=""></td>
		<td rowspan="3">
			<img src="images/index_14.jpg" width="98" height="40" alt=""></td>
		<td rowspan="3">
			<img src="images/index_15.jpg" width="31" height="40" alt=""></td>
		<td>
			<img src="images/index_16.jpg" width="44" height="16" alt=""></td>
		<td rowspan="3">
			<img src="images/index_17.jpg" width="7" height="40" alt=""></td>
		<td>
			<img src="images/index_18.jpg" width="55" height="16" alt=""></td>
		<td rowspan="3">
			<img src="images/index_19.jpg" width="20" height="40" alt=""></td>
		<td>
			<img src="images/spacerh.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/index_20.jpg" width="42" height="24" alt=""></td>
		<td rowspan="2">
			<img src="images/index_21.jpg" width="58" height="24" alt=""></td>
		<td rowspan="2">
			<img src="images/index_22.jpg" width="44" height="24" alt=""></td>
		<td rowspan="2">
			<img src="images/index_23.jpg" width="55" height="24" alt=""></td>
		<td>
			<img src="images/spacerh.gif" width="1" height="9" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_24.jpg" width="180" height="15" alt=""></td>
		<td>
			<img src="images/spacerh.gif" width="1" height="15" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
       	  		</div>
   		  </div>

Any help would be much appreciated. Thanks in advance.

Hi I have made 2 tables for my home page for content of pages.

Each table is two rows

The problem is the right column in each table is not height alligned to the left column because there is a uneven amount of links

How do I get the right columns to come up heigher and be height alligned because it looks messy?

I spent hours looking at all different web pages about tables and could not find this.

Does anyone know???????????? Please Help me

check it out Here on this page.
[url="http://www.great-quotes-powerful-minds.com/"]

http://www.great-quotes-powerful-minds.com/

I start with
<table width="100%">
<tr><td>
put links column1
</td>
<td>
put links for column2
</font>
</tr> </table>


Please Help

Dear forums!
I'm having issue with an padding-problem which i'm not able to solve on my own. I don't understand why my code returns the problems that it does, but it for some reason does.

Okay, what is the problem?

I've drawn them into this picture;
http://i42.tinypic.com/4v1veo.png
The problem is that the first navigation-button starts off with about 10-15 pixels, and ends about 3 pixels out of the actual navbar (if you check the borders).

I would like to remove this, so that the navbar button covers the whole area of the navbar div / element, without starting too late or ending too late.




CSS code can be found here;
http://www.myhrensolutions.net/tolkf...sign/index.css

the HTML-code can be viewed here;
http://www.myhrensolutions.net/tolkfirma/tjenester.html


All help is muchly appriciated,
thank you!

- Scott.

Hello everyone.

Im new to forums and am looking for some help my my html. I am having problems with the alignment of my tables. They used to align perfectly but are now being stretched the length of the page.

It has to do with my TD somewhere but I can't find it.

If you check this code you'll see what I mean. Im not sure what I did but it never had this problem before.


Let me know what you guys think.

Thanks

Hi

I'm having problems with the following set of code:-


Code:

<style>    #columns {        width: 600px;    }    #columns .column {        position: relative;        width: 46%;        padding: 1%;        border: solid 0px #000;    }    #columns .left {        float: left;    }    #columns .right {        float: right;    }</style><div id="columns">    <div class="left column">        <p><b>What are your journey needs?</b></p><input type="checkbox" name="Journey Needs" value="Elderly">Elderly<br>
<input type="checkbox" name="Journey Needs" value="Wheelchair User">Wheelchair User<br>
<input type="checkbox" name="Journey Needs" value="Mobility Impaired">Mobility Impaired<br>
<input type="checkbox" name="Journey Needs" value="Unable to use own/public transport">Unable to use own or public transport<br>
<input type="checkbox" name="Journey Needs" value="No public transport available">No Public Transport available<br>
<input type="checkbox" name="Journey Needs" value="Group Hire - General Public">Group Hire - General Public<br>
<input type="checkbox" name="Journey Needs" value="Group Hire - Community Groups">Group Hire - Community Groups<br>
<input type="checkbox" name="Journey Needs" value="Youth">Youth<br>
</p>
</p>    </div>    <div class="right column">        <p><b>What is your journey purpose?<b></p><input type="Radio" name="Journey Type" value="Shopping">Shopping<br>
<input type="Radio" name="Journey Type" value="Hospital Appointment">Hospital Appointment<br>
<input type="Radio" name="Journey Type" value="G.P., Optician, Chiropodists, Physio,etc">G.P., Optician, Chiropodists, Physio. etc<br>
<input type="Radio" name="Journey Type" value="Day Care">Day Care<br>
<input type="Radio" name="Journey Type" value="Leisure">Leisure<br>
<input type="Radio" name="Journey Type" value="Education">Education<br>
<input type="Radio" name="Journey Type" value="Visiting (Hospital, etc)">Visiting (Hospital, etc)<br>
<input type="Radio" name="Journey Type" value="Other">Other<br>
<p>
    </div></div></p>


<b>Please give more details:</b><br>
<textarea name="VisitorComment"  maxlength="300" lengthcut="true" rows="6" cols="50">
</textarea><br><br>

I use two different browsers, IE7 (Version 7.0.5730.13CO) and Google Chrome (Version 12.0.742.142).

Even though a simple solution would be to not use any column coding at all, thereby putting them one above the other, this makes the page too long so I am trying to get them side by side.

The problem is that the page looks about perfect in IE but in Chrome the wording 'Please give more details' appears at the right-hand edge of the text area, unless you alter the page zoom in which case it appears above the radio functions.

I've tried tagging as a table but the situation is then reversed: looks great in Chrome but in IE the check boxes are almost perfectly displayed and the radio functions are squashed.

I'm not too familiar with tables or columns at this point. The table tags I hijacked from the Links page ( I was able to understand them enough to both remove and add new ldata to the table) on the site I'm helping develop and the column tags I gleaned from a html tutorial site.

Is this just as issue with the way that different browsers display html or am I missing something in the tags?

Thanks for looking and hope someone can help.

hi all,
One strange issue with html <a> tags.We have XP English and Japanese machines
and issue is getting only in XP Japanese machines.

Issue is tat on clicking any link,link font size gets increased and its comes over other links.Its like a new layer of big font sized links over the old links.
Any idea why this happens?

Following is my JSP section
=============================

<div onselectstart="return false" id="systemMenu" style="position:absolute;top:-75px; left:-20px; ">
<label>Screen #&nbsp;:&nbsp;</label>
<input tabindex="1" suggest_sel_event="selectScreenIdValue" type="text" title="Provide screenId and Hit Enter key" id="screenIdEntry" name="screenIdEntry"/>
<button tabindex="-1" id="SUGGEST_screenIdEntry" onclick="suggestScreenIds()"></button>
&nbsp;|&nbsp;
<a tabindex="2" href="javascript:selMenu('showHomePage.do','PARENT','')">Home</a>&nbsp;|&nbsp;
<a tabindex="3" href="javascript:doHelpFunc()" onmouseover="">Help</a>&nbsp;|&nbsp;
<a tabindex="4" href="javascript:aboutiCargo('<%=mainWebBuildVersion%>')" onmouseover="">About</a>&nbsp;|&nbsp;
<a tabindex="5" accesskey="o" href="javascript:exitlogOffIcargo(ctxPath+'/logout.do','logOffApp')">Lo<u>g</u>off</a>&nbsp;|&nbsp;
<a tabindex="6" accesskey="x" href="javascript:exitlogOffIcargo(ctxPath+'/logout.do','exitApp')" >E<u>x</u>it</a>

</div>
===================================================
CSS Used In the page
=====================


<STYLE>
body{
margin:-1px;
scrollbar-base-color: #C6CEDE;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #C6CEDE;
scrollbar-face-color: #C4CED9;
scrollbar-highlight-color: #C6CEDE;
scrollbar-shadow-color: #C6CEDE;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;

}
#footer{
position:absolute;
left:1%;
top:99%;
width:97%;
text-align:center;
font-size : 8pt;font-family : Arial,Verdana,Sans-Serif;
/*font:menu;*/
color : #000000;
/*background-color:#CCCCCC; */
}
.footer{

text-align:center;
font-size : 8pt;font-family : Arial,Verdana,Sans-Serif;
/*font:menu;*/
/*background-color:#CCCCCC; */
}
div.footer table{
border-collapse:collapse;
padding:0px;
word-spacing : 0px;
width: 99%; /*100% of container produces horiz. scroll in Mozilla*/
border: 0px;

}

div#systemMenu{
color:#ffffff;
font-weight:bold;
}
div#systemMenu button{
border-collapse:collapse;
color:#ffffff;
font-weight:bold;
font-size:12px;
border: 0px none;
background-color:1F3E6C;
width:0px;
height:0px;
}

div#systemMenu input{
/*font-family : Arial,Verdana,Sans-Serif; font-size : 8pt;*/
font:menu;
width : 75px;
height : 15px;
color : #000000;
text-transform : uppercase;
background : #ffffff;
border-right-width : 0px;
border-bottom-width : 0px;
border-left-width : 0px;
border-top-width : 0px;
border-top-style : none;
border-left-style : none;
border-right-style : none;
border-bottom-style : none;
border-collapse:collapse;

}

div#systemMenu label{
border-collapse:collapse;
color:#ffffff;
border: 0px none;
background-color:1F3E6C;
text-decoration : none;
/*font-weight:bold; font-size:12px;*/
/*font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;*/
font:menu;
}

div#systemMenu a{
border-collapse:collapse;
color:#ffffff;
border: 0px none;
background-color:1F3E6C;
text-decoration : none;
/*font-weight:bold;font-size:12px;*/
/*font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;*/
font:menu;
}

div#mainErrorDiv table{
padding:0px;
word-spacing : 0px;
width: 99%; /*100% of container produces horiz. scroll in Mozilla*/


}

/*********************************FONT STYLES********************************/
.iCargoRedText {
font-family : Arial,Verdana,Sans-Serif;
font-size : 10pt;
color : #336666;
font-weight : bold;
}
.iCargoSmallText {
font-family : Arial,Verdana,Sans-Serif;
font-size : 7pt;
color : #000000;
}
.iCargoPageText {
font-family : Arial,Verdana,Sans-Serif;
font-size : 10pt;
color : #000000;
}
.iCargoErrorMessage {
font-family : Arial,Verdana,Sans-Serif;
font-size : 9pt;
color : #336666;
list-style-position : outside;
list-style-type : square;
}
.iCargoInfoMessage {
font-family : Arial,Verdana,Sans-Serif;
font-size : 9pt;
color : #000000;
}
div.loadBox {
/*font-family: Arial, sans-serif; font-size:9pt;*/
font:menu;
color: #FFFFFF;
border: 0px none #FF3E3E;
background-color: #1F3E6C ;
text-align: center;
position:absolute;

}
</STYLE>

Hi there

I got a little problem with my website http://www.gone-surfing.com ; the thing is that I would like to have the waveforecast on the right side of the site, where there is currently only an empty black space. And I am simply wondering how this can be done? In a way which enables the waveforecast to progress downwards out there, without pushing the other tables / content downwards.

Hope some clever minds can help me out here. Any suggestions?
PS! I would like to keep the design like this, it would be a bit too much work changing the whole design due to my lack of webdesign skills.
The source code is available here @ gone-surfing.com/index.html

A big thanks in advance for any help or suggestions.

All the best,
Alex

Hello,

Why cant i scroll my site on mobile smartphones ?

www.muchmarketing.co.il

thanks

Can any one help me how to design web for mobile. I design a web by Frontpage, look beautiful in PC but can not read in mobile. Thanks in advance