|
HTML - Simple Alignment/position
Hi guys,
I'm using a php shopping cart script and having trouble aligning the description text. You can see the page here. http://img18.imageshack.us/img18/6493/cart.jpg Basically, I want the product description to be placed under the product image. Keep in mind, the image you see isn't part of the editable text or html that I can insert to the product page. So when I click to edit the product, all you see is a blank page in which you can enter html or text. I really have no idea of how to do this. I was considering using Code: <br> tags but i'm guessing that would be very sloppy. Any help is appreciated thank you. -Serge Similar TutorialsHi, I have a simple alignment question but I can't seen to get it right. I want my menu to sit to the right of my header image; right now it is resting just underneath it. I would really appreciate some help. Thanks! Here is my code: HTML HTML Code: <!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" />
<style type='text/css'>
#num {padding-left: 6px;}
.img-bot {margin-bottom: 6px; display: block; }
</style>
<link rel="stylesheet" type="text/css" href="css/style_project_page.css" />
<link rel="stylesheet" type="text/css" href="css/js_style.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="scripts/javascript1.js"></script>
<script type="text/javascript" src="scripts/javascript_jquery.js"></script>
<script type="text/javascript" src="scripts/rollovers.js"></script>
<title>The Lovers Were Ambassadors To Imaginary Utopias</title>
<script type='text/javascript'>
$(document).ready(function() {
$('.pics').cycle({
fx:'fade',
speed:'2000',
timeout: 0,
next:'#next', prev:'#prev'});
});
</script>
</head>
<body>
<div id="container">
<div id="header" style="width:239;">
<!--#include file="includes/header.shtml" -->
</div>
<div align="left" id="menu" style="width:400px;"> <!--#include file="includes/sidebar2.shtml" --></div>
<div id="mainContent" style="margin-top: 20px;">
<div id="slideshowWrap">
<div class="slideshow">
<div class="nav"><a id='prev' href='#'><img border="none" src="images/prev.gif" alt="previous" /></a><span class="hash"> | </span><a id='next' href='#'><img border="none" src="images/next.gif" alt="next" /></a>
<span id='num'></span></div>
<div class="pics">
<div><img src="images/lovers/lovers_lg.jpg" width="600" height="408" />
<p>The Lovers Were Ambassadors To Imaginary Utopias, 2007, C print</p></div>
<div><img src="images/lovers/praise_lg.jpg" width="600" height="402" />
<p>In Praise of Alpine Landscapes, 2008, C print</p></div>
<div><img src="images/lovers/mailaise.jpg" width="500" height="337" />
<p>Her Malaise Only Made Her Heart Grow Fonder, 2008, C print</p></div>
<div><img src="images/lovers/seduce.jpg" width="500" height="336" />
<p>He Was Always Able To Seduce Them by his Old World Charm, 2008, C print</p></div>
<div><img src="images/lovers/adventure.jpg" width="500" height="337" />
<p>The Adventure, 2008, C print</p></div>
<div><img src="images/lovers/deja_vu_lg.jpg" width="400" height="576" />
<p>Deja Vu, 2008, C pint</p></div>
<div><img src="images/lovers/peggy_350.jpg" width="350" height="497" />
<p>Did You Know That Peggy Guggenheim Owned the Last Private Gondola In Venice?, 2008, C print</p></div>
<div><img src="images/lovers/baroque.jpg" width="500" height="331" />
<p>Baroque Elephants Hovered in Unelegant Drawing Rooms, 2008, C print</p></div>
<div><img src="images/lovers/splendor.jpg" width="500" height="334" />
<p>Splendour in the Grass, 2007, C print</p></div>
<div><img src="images/lovers/surface.jpg" width="500" height="331" />
<p>Surface Tension (Girl and Bush), 2007, C print</p></div>
<div><img src="images/lovers/noon.jpg" width="500" height="323" />
<p>At Noon in the Lawn she was thinking about Wallpaper for the Dollhouse, C print</p></div>
<div><img src="images/lovers/dreaming.jpg" width="500" height="334" />
<p>Dreaming of Filming Landscapes in Shades Darker than Black, 2007, C print</p></div>
<div><img src="images/lovers/ennui_sm.jpg" width="400" height="548" />
<p>Ennui and Sympathy, 2008, C print</p></div>
<!-- end .pics --></div>
<!-- end .slideshow --></div>
<div id="description"><h3>the lovers were ambassadors to imaginary utopias</h3><p> <em>the lovers were ambassadors to imaginary utopias</em> is a series that appropriates a family archive for the trope of cinematic fiction. Inspired by certain images from the archive that recall filmic compositions, the images have been altered by titles or superimpositions to create new readings. Consciously using the nostalgia and romanticism inherent in engaging with this archive, this series attempts to draw out new fictions from documents through playful manipulations.
A book on this series is forthcoming.
<br /></p></div>
<!-- end #slideshowWrap --></div>
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>
CSS HTML Code: @charset "UTF-8";
/* CSS Document */
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
background-repeat: no-repeat
}
#container {
position: relative;
min-height: 100%;
height: auto !important; /* For Modern Browsers */
height: 100%; /* For IE */
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
margin:0 auto;
margin-left: 10px;
margin-top: 10px;
width:900px;
z-index:20;
position:relative;
}
html, body #container {
height: auto;
}
#header {
background: ##FFFFFF;
padding: 10px 0 0 22px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
h1 {
font-size: 10px;
font-weight:normal;
color: #cd3226;
font-size: 12px;
font-style: normal;
text-transform: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
letter-spacing: .75px;
}
h2 {
text-transform:uppercase;
font-size:14px;
font-style:normal;
}
h3 {
font-size: 9px;
font-weight: bold;
color: #000000;
font-style: normal;
text-transform: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
letter-spacing: .75px;
margin-left: 18px;
line-height: 15px;
}
#sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: none; /* the background color will be displayed for the length of the content in the column, but no further */
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 15px;
}
/*
#sidebar1 p {
font-size:12px;
color: #000000;
line-height: 20px;
padding: 15px 0px 0px 14px;
}*/
.navImg {
padding: 0px 0px 0px 15px;
margin-top: 15px;
}
.navImg2 {
padding: 15px;
display:inline;
}
#mainContent {
margin: 25px 0 0 15px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
}
#description {
vertical-align:top;
width: 200px;
}
#description p {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
margin-left: 18px;
line-height: 15px;
color: #666666;
}
#slideshowWrap {
margin-left: 5px;
}
.worksHeader {
color: #cd3226;
font-size: 12px;
font-style: normal;
padding: 0 0 5px 0;
text-transform: none;
font-family: Verdana, Arial, Helvetica, sans-seri;
}
.selectedWorksMenu p {
color: #acafac;
font-size: 12px;
font-style: normal;
padding: 0 0 2px 0;
line-height: 5px;
text-transform: none;
font-family: Verdana, Arial, Helvetica, sans-seri;
}
A:link {text-decoration: none; color: #acafac}
A:visited {text-decoration: none; color: #acafac}
A:active {text-decoration: none}
A:hover {text-decoration: none; color: #3d91d1;}
HEADER SERVER SIDE INCLUDE HTML Code: <a href="index.shtml"><img src="images/logo_meta2.gif" alt="Nurjahan Akhlaq" border="0" longdesc="images/meta2.gif" width="213" height="29" /></a> MENU SERVER SIDE INCLUDE HTML Code: <div align="left" class="navImg22"><a href="work.shtml" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('work','','images/navbar/work_b.jpg',1)"><img src="images/navbar/work.jpg" name="work" width="38" height="18" border="0" id="work" /></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('commercial','','images/navbar/commercial_b.jpg',1)"><img src="images/navbar/commercial.jpg" name="commercial" width="81" height="18" border="0" id="commercial" /></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('cv','','images/navbar/cv_b.jpg',1)"><img src="images/navbar/cv.jpg" name="cv" width="20" height="18" border="0" id="cv" /></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/navbar/contact_b.jpg',1)"><img src="images/navbar/contact.jpg" name="contact" width="55" height="18" border="0" id="contact" /></a></div>
Hello, I just made my new site for my company and I tried to keep it extremely simple. I used wordpress to do the basic layout automatically and made some simple edits with some basic html i picked up along the way this week. There seems to be two problems though: 1) the form is inside a table which doesnt seem to align properly within any of the popular browsers (firefox/IE/chrome) .... it should look like 1 image instead of 3 separate pieces 2) i eventually got the form to align slightly better but the spot where I "Enter my zip code" doesnt align with the background image behind it.....sometimes it doesnt even say "enter zip code" which is very bad for a user experience. in firefox it doesnt say it, but in chrome it does say it....either way, both are aligned very poorly..... I put my code into this site: http://w3schools.com/html/tryit.asp?...=tryhtml_intro ...and after editing it, i've come to find that it works perfectly within that html editor and looks exactly how i want it to look. but then when i put the code back into my wordpress site, the alignment messes up again...... so i did some research and found out that wordpress has "deprecated" some of the html tags and that they dont work anymore...if i understand correctly. so now i have to find a way to pick new tags or use CSS...this is just so confusing and i thought maybe somebody here might be able to offer me some assistance to help me fix up this form/table problem. my site's url is: http://www.allautoinsurance.org my code that I'm editing is on the right sidebar, where the alignment messes up: <div style="text-align: center;"><span style="font-size: 14pt; font-family: Georgia; color: rgb(0, 0, 0);"><span style="font-size: 14pt;"><span style="font-size: 14pt;">Our free online service instantly browses the best rates in your zip code area at the click of a button. We've helped thousands of people quickly and easily save money on their auto insurance:</span></span></span><br /> <br /> <form action="http://network.mossaffiliatemarketing.com/z/61/CD62/&subid3= "method="post"> <table border="0" cellpadding="0" cellspacing="0" width="225"> <tr> <td colspan="2"><img src="http://www.allautoinsurance.org/wp-content/uploads/2009/08/top.jpg"></td> </tr> <tr> <td class="background1" valign="middle" height="54" width="153"> <style> .background1 { background-image: url(http://www.allautoinsurance.org/wp-c...tom_left.jpg); background-repeat: no-repeat; } </style> <input type="text" name="subid1" value="ENTER ZIP CODE" style="margin-left:30px; margin-bottom:5px; width:110px; border-width:0px; font-size:14px; font-family: Arial, Helvetica, sans-serif;" onClick="javascript:this.value='';"> </td> <td> <input type="image" src="http://www.allautoinsurance.org/wp-content/uploads/2009/08/bottom_right.jpg"></td> </tr> </table> </form> </div> <div style="text-align: left;"><span style="font-size: 12pt;"><span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 1)</span> Input your zip code and click the button above to begin browsing the auto insurance providers in your area</span></span></span><br /> <br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 2)</span> Select the auto insurance provider you're most comfortable with by clicking their picture<span style="font-weight: bold; color: rgb(255, 0, 0); font-size: 12pt;"> </span></span></span></span><br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(255, 0, 0); font-size: 12pt;">Warning</span>: Dont <span style="font-style: italic; font-size: 12pt;">always </span>go with the cheapest in the area</span></span></span><br /> <br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 3)</span> Continue with the providers process if they meet your requirements</span></span></span></span><br /> </div> <div style="margin-left: 40px;"><span style="font-size: 10pt; font-family: Georgia;"><span style="font-size: 10pt;"></span></span></div><span style="font-size: 10pt; font-family: Georgia;"><span style="font-size: 10pt;"><br /> <span style="font-size: 12pt;">***We've been showing people how to get insurance quickly and easily for years. We respect your privacy, it is just as important to us as it is to you.</span></span></span> .....thanks for any help, i really appreciate your time and effort. if this code doesnt look smart at all its cuz i used some free WYSIWYG editor to generate it. i actually am very confused lol. thanks again. Best, Kyle P Howdy all, I have three scrolling divs that i want to be the height of the page, so i'm guessing position:absolute and height:100% will do that just fine. But i want these three scolling divs to be inside a position:fixed element so that they stay put when scrolling down the page. Is this possible? I dont think a pos:absolute will work nested inside a pos:fixed. How could i work around it? thanks! Hope someone can suggest something. I am working with a programme that uses three templates to structure the web site, feeds articles, author page and site map on a daily basis to my web site. I attempted to insert Adsense ad units to templates and unfortunately everything is out of line now. this can be viewed at http://daviddutch.com/currency/articles/index.html Question is how do I bring everything else back in line please as when I look at coding there is no clear place to put the adsense HTML code to get things lined up correctly. Hope someone can offer wisdom and guidance. cheers Good morning, I cannot figure out how to get the images one on top of the other (in a straight line) here http://divamaggie.com/?p=60 . I tried Code: <br>, <p> and simply line spaces, but nothing seems to be working. I'm really hoping someone can tell me what I'm doing wrong. Hi there. I use the following code to show a swf file and align it vertically and horizontically but i can do only the horizontal alignment. Any help about the vertical? Thanks in advance HTML 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" lang="en" xml:lang="en">
<head>
<title>Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-utf-8" />
<style type="text/css" media="screen">
body { margin:0; text-align:center; }
div#content { text-align:center; vertical-align:middle;}
object#content { display:inline; vertical-align:middle;}
</style>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("main.swf", "myContent", "1400", "910", "9.0.0");
</script>
</head>
<body>
<div style="vertical-align:middle">
<div id="myContent" style="vertical-align:middle"></div>
</div>
</body>
</html>
This is the first site I've done. I want to add some screenshots to the center of the page but can't figure out how to keep the links in place at the left. When I add the pics the links move down to make room for the pics. How do I get the links to stay in place at the left of the screenshots? Thank you for any help. Krytin http://ghostfleet.bravehost.com/ghostfleet.htm Hey all, Just a question about my amature portfilio site that im creating. On some pages, graphics and blog, for example, http://www.freewebs.com/breakdowninc.../graphics.html http://www.freewebs.com/breakdowninc/pages/blog.html I am wanting to center the graphics/blog parts overhead of the copywrite text, found at the bottom of my page. Example: I have centered the graphics images, using align="center" yet they go off the side slightly. Anyway can how can I align them appropriately, without using "position:absolute" because it screws with the mini/maximising of my page. Cheers I don't understand! On my end when I upload it to the server and open an html file in the browser, everything looks fine. But when other people look at the site, it looks totally different. Text boxes are disgusting, I use CSS positioning and it puts everything totally off of the layout. Hi, I am trying to figure out how I can align text with an image using spacing (strictly HTML). I have applied the vspace and hspace tags to my image, but then my image won't be aligned flush with the text. Is there any way I can set up spacing on just one side of the image? I have a div which contains a line of text as a url. When clicked, a div is displayed directly below, and the content is different depending on the user. Currently, the div opens and two left hand sides align. I would like to cause the right hand sides to align instead, with the divs growing to the left if the text is larger. Is this possible? Hi, Can someone help me align the two images at the bottom of the html page (view attachment) in the center. It should be compatible with IE and Firefox 3. I have attached sample code in the .doc file. Thanks in advance, Ronnie It's not that huge of a deal because its only an under construction page... but I'd like to know how to get this page looking the same in both IE and Firefox. The only real issues with IE right now is that the image isn't centered and the yellow tape bg is 1px off from where it should be... thanks for any help! http://www.pzfantasyfootball.com Code: <html>
<head>
<title>PZ Fantasy Football » Under Construction</title>
<style type="text/css">
* {margin: 0; padding:0;}
p {margin-top: 15px;}
h2 {font-size: 25px; border-bottom: 1px solid #fff; margin-bottom: 10px;}
body {
background-image: url(images/Metal_Texture-PhotoshopTower.jpg);
background-color: #000;
color: #fff;
font-family: calibri, arial, verdana;
}
a, a:visited, a:active {color: #09f;}
a:hover {color: #06c;}
#wrap {
width: 800px;
margin: 0 auto;
}
.yellowtape {
position: absolute;
bottom: 0;
width: 100%;
height: 524px;
background-image: url(images/yellowtapebg.gif);
background-repeat: repeat-x;
}
.construction {
position: absolute;
bottom:0;
background-image: url(images/pzfantasyfootballunderconstruction.jpg);
width: 800px;
height: 600px;
}
.text {
position: relative;
left: 300px;
top: 225px;
width: 500px;
font-size: 18px;
text-align: left;
}
</style>
</head>
<body>
<div class="yellowtape"></div>
<div id="wrap">
<div class="construction">
<div class="text"><h2>11/1/07 » Site Under Construction Again</h2>Well once again we enter construction mode. I just wasn't feeling the league site, no one really used it much, it didn't have much content that Yahoo! couldn't already offer, and it just really ended up being a waste of time. So now I'm going to give it a shot with a fantasy help site. I know I've done this before, but my future may hold something in the sports industry, so now I look to try and establish a well read site in order to help achieve my goals. I'm not 100% sure if the new site will be done before the end of this season, however it should be done in time for the 2008 NFL Draft. Hope to see you all soon!
<p />Oh, and feel free to contact me via the forums <a href="http://www.pzfantasyfootball.com/forums">here</a>.
</div>
</div></body>
</html>
Hi Guys Here is some css I use for my footer, I want it to be centered but only span 98% of the distance, however when I change the width to 98% it only cuts off the 2% from the right hand side and justifies the footer to the left. Any Help? Thanks Code: #footer{
clear: left;
width: 100%;
background: white;
color: black;
text-align: center;
padding: 2px 0;
}
hey guys im getting a weird b0rder ar0und my <div>, i d0nt kn0w what it is..can anyb0dy help me please? ive been l00king at div pr0perties but i havent been able t0 eliminate that b0rder - im n0t even sure its fr0m the div but i'd think it is. the b0rder im talking ab0ut is the black 0ne. c0me t0 think 0f it.. its n0t a b0rder - the black secti0n is a <th> and the black is its backgr0und, but the <div> inside the <th> simply d0esnt extend in it t0 100% :/ http://www.hotlinkfiles.com/files/57...cument_7_.html Hi All, I am pulling some data from MySQL and i need to display on screen with Left / Right Alignment. For The example <table width="85%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td> Now here i am looking if database-loc = left the data will go left side else it will go right side.\ pulling data from DB is okay with me. Now i am looking some idea how to format div so it shuld set accordingly. Currenly i tried the below but all go to the left. <div align="left">Left Line</div> <div align="left">Left Line</div> <div align="left">Left Line</div> <div align="right">Right Line</div> <div align="right">Right Line</div> <div align="right">Right Line</div> It is going in right side but it is down of left <div> it must go to the top with right direction some thing like valign="top" </td> </tr> </table> I hope i explain it well, i am sorry for my language. I need to create a page like the image its really simple but i just cant get my divs working. Please help me im tearing no ripping my hair out. Many thanks in advance Matthew CSS body { background-color:#F0F; margin: 0; } #wrapper { width: 700px; height: 100%; min-height: 100%; position: relative; margin: 0 auto; background-color: #CCC; } #main { left: 0; position: relative; top: 50%; height: 500px; width:700px; background-color: #666; } #footer { height: 50px; width:500px; bottom: 0; position: absolute; background-color: #CCC; } HTML <!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>2010</title> <link href="test.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="main"><p>container</p></div> <div id="footer"><p>footer</p></div> </div> </body> </html> |
|||||||