|
HTML - I Hate Html! Why Is Something So Simple So Hard!??? (center Align Image)
All I want is to have my image placed in the center of my web page...
Every code I try doesn't work. The image is either at the top of the page or it doesn't stay in the center at different resolutions. Can someone help me? Similar TutorialsWith the align attribute of <img> deprecated, can anyone tell me what the correct way of center-aligning an image should be? Thanks, James For the life of me I cannot keep the tree picture centered under my banner on my guild website. Does anyone know how to "hard lock" the picture to always stay centered as the webpage is sized? Here is the link to the site, go to "Members" and size the page you will see what I mean! http://www.guildvanaheim.com Thank you very much! -Taipans How come this code: <img src="tick.gif" alt="+" width="15" height="15" />This is a test, etc. ...puts the image on one line, with the text "This is a test, etc." beneath it? I want the text to be on the same line as the image. (Prob. occurs with IE and FF.) Any ideas? Cheers, James Hello! I just want some help to figure out how to get a picture to appear next to another picture, by changing the html code. Can someone help me? Guess it goes really fast for someone who knows these things. A quick response is highly appreciated! Thanks! / Hedvig Here's the code: <!-- Facebook Badge START --><a href="http://www.facebook.com/hedvig.lindahl" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Hedvig Lindahl">Hedvig Lindahl</a><br /><a href="http://www.facebook.com/hedvig.lindahl" target="_TOP" title="Hedvig Lindahl"><img src="http://badge.facebook.com/badge/86010192783.4320.1327210997.png" width="120" height="180" style="border: 0px;" /></a><a href="http://www.facebook.com/keepitandplayit" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Keep It and Play It">Keep It and Play It</a><br /><a href="http://www.facebook.com/keepitandplayit" target="_TOP" title="Keep It and Play It"><img src="http://badge.facebook.com/badge/164904078384.4257.46510960.png" width="120" height="155" style="border: 0px;" /></a><br /><!-- Facebook Badge END --> hi, In my html page , I have a div tag of fixed size (100px*75px) and i want an image (width=100px, height between 50px to 70px) to be displayed vertically centered in the div. If anyone has done this before Please share the solution. Restrictions: 1 - use html img tag. 2 - don't use CSS background-image property I tried below thigs but they didn't work. 1 - set style="vertical-align:middle" in <img> 2 - move <img> in 1*1 table and set valign= center in <table> Below is my html code: <div id="gallery"> <div id=""> <img src="sample_100_50.jpg" /> </div> </div> and the CSS code: .gallery{ height: 75px; overflow: hidden; position: relative; width: 100px; border:1px solid #DDDDDD; } Thanks in Advance Arpit Hi All, I'm working on http://www.thesuccessleague.com/hbbtsstart.php and I'm trying to get the red text box on the left (with the picture of a woman) at the very top. I'm sure there's a cleaner way to do it (I'm not an expert at div tags yet), so I put the text box in a table and put that table in another table (as you can see in the code). What code do I have to use to anchor that red text box to the top of that left column? Do I need to use div tags? And if so, how do I anchor it to the table (and not to specific coordinates measurade against the top and left margins)> Thanks for your help! Hi! I've been struggling with a problem how to align a div to center and top of browser, but just simply can't seem to find a working solution. Here's an example page where I have aligned the site to top but it is not centered. http://www.marufox.net I am not working on that current site now, but still something similar, so the code can differ from what you see there. Any help will be greatly appreciated! I can't get my whole nav bar to align to the center of my sidebar 1 div. Check it out please. http://northwindappaloosas.com Hello Guys, I have made some page with nested div's. I made it's width to 80%. I want that to be completely aligned to center of the page. I tried with css and with html and with parent div. But some thing makes it not to work. Can you see the below code and please suggest me to get that to center. HTML Code: <style type="text/css">
.nm-left { text-align:left; vertical-align:text-top; }
.nm-left .nm-video, .nm-right .nm-video-reverse, .nm-left .nm-avatar, .nm-left .nm-avatar-wrapper, .nm-left span.nm-button, .nm-left #user-form input#submit { float:left; }
.nm-right { text-align:right; vertical-align:text-top; }
.nm-right .nm-video, .nm-left .nm-video-reverse, .nm-right .nm-avatar, .nm-right .nm-avatar-wrapper, .nm-right span.nm-button, .nm-right #user-form input#submit { float:right; }
.nm-wrapper { clear:both; font-size:14px; line-height:21px; margin:20px 0; padding:0px; }
.nm-wrapper div { background-position:99% 10px; background-repeat:no-repeat; margin:0; padding:0; }
.nm-wrapper div div { }
.nm-wrapper div div div { overflow:hidden; }
#ninjamonials .nm-wrapper div div div div { background:transparent; padding:20px;}
#ninjamonials .nm-wrapper div div div div div { padding:0; }
blockquote.nm-summary div, blockquote.nm-testimonial div, blockquote.nm-summary, blockquote.nm-testimonial, blockquote.nm-summary p, blockquote.nm-testimonial p { background:transparent; border:none; padding:0; margin:0; text-decoration:none; font-style:normal; }
span.nm-button, #user-form input#submit { margin:5px; }
#user-form { background-position:left bottom; background-repeat:repeat-x; clear:both; font-size:14px; line-height:21px; margin-top:20px; padding:5px; }
.nm-testimonial, .nm-summary, .nm-author { padding-left:140px }
.nm-summary { font-weight:bold; }
.nm-author { display:block; font-size:12px; }
.nm-name { font-weight:bold; padding-right:5px; }
.nm-video, div.nm-video-reverse { margin:10px !important; }
.nm-audio, .nm-author { padding:5px !important; }
.nm-audio { display:block; }
.nm-name { font-style:italic; }
/* Oceanic Avatar-Specific CSS */
.nm-avatar { }
.nm-avatar img { background-color:#F7F7F7; border:1px solid #DBDBDB; margin:10px; padding:5px; }
/* Oceanic Module-Specific CSS */
.nm-module { overflow:hidden; margin: 5px; padding:4px!important; }
.nm-module div.nm-avatar img { }
.nm-module div.nm-avatar { }
/* Blue Style */
.nm-right.nm-oceanic-blue.nm-module, .nm-right.nm-oceanic-blue .nm-module { background:#EFF8FF url(oceanic_blue_tl.png) no-repeat -10px -10px; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-blue.nm-module, .nm-left.nm-oceanic-blue .nm-module { background:#EFF8FF url(oceanic_blue_nq.png) no-repeat -10px -10px; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-blue .nm-wrapper { background:#EFF8FF url(oceanic_blue_tl.png) no-repeat; color:#666; }
.nm-left.nm-oceanic-blue .nm-wrapper { background:#EFF8FF url(oceanic_blue_nq.png) no-repeat; color:#666; }
.nm-oceanic-blue .nm-wrapper div { background:url(oceanic_blue_tr.png) no-repeat 100% 0; }
.nm-oceanic-blue .nm-wrapper div div { background:url(oceanic_blue_bl.png) no-repeat 0 100%; }
.nm-oceanic-blue .nm-wrapper div div div { background:url(oceanic_blue_br.png) no-repeat 100% 100%; }
.nm-oceanic-blue #user-form { background-color:#EFF8FF; border:1px solid #D5ECFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-blue .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_blue_quote.png) no-repeat 10px 10px !important; }
/* Green Style */
.nm-right.nm-oceanic-green.nm-module, .nm-right.nm-oceanic-green .nm-module { background:#EBF4D7 url(oceanic_green_tl.png) no-repeat -10px -10px; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-green.nm-module, .nm-left.nm-oceanic-green .nm-module { background:#EBF4D7 url(oceanic_green_nq.png) no-repeat -10px -10px; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-green .nm-wrapper { background:#EBF4D7 url(oceanic_green_tl.png) no-repeat; color:#666; }
.nm-left.nm-oceanic-green .nm-wrapper { background:#EBF4D7 url(oceanic_green_nq.png) no-repeat; color:#666; }
.nm-oceanic-green .nm-wrapper div { background:url(oceanic_green_tr.png) no-repeat 100% 0; }
.nm-oceanic-green .nm-wrapper div div { background:url(oceanic_green_bl.png) no-repeat 0 100%; }
.nm-oceanic-green .nm-wrapper div div div { background:url(oceanic_green_br.png) no-repeat 100% 100%; }
.nm-oceanic-green #user-form { background-color:#EBF4D7; border:1px solid #9AC740; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-green .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_green_quote.png) no-repeat 10px 10px !important; }
/* Grey Style */
.nm-right.nm-oceanic-grey.nm-module, .nm-right.nm-oceanic-grey .nm-module { background:#EFEFEF url(oceanic_grey_tl.png) no-repeat -10px -10px; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-grey.nm-module, .nm-left.nm-oceanic-grey .nm-module { background:#EFEFEF url(oceanic_grey_nq.png) no-repeat -10px -10px; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-grey .nm-wrapper { background:#EFEFEF url(oceanic_grey_tl.png) no-repeat; color:#666; }
.nm-left.nm-oceanic-grey .nm-wrapper { background:#EFEFEF url(oceanic_grey_nq.png) no-repeat; color:#666; }
.nm-oceanic-grey .nm-wrapper div { background:url(oceanic_grey_tr.png) no-repeat 100% 0; }
.nm-oceanic-grey .nm-wrapper div div { background:url(oceanic_grey_bl.png) no-repeat 0 100%; }
.nm-oceanic-grey .nm-wrapper div div div { background:url(./images/oceanic_grey_br.png) no-repeat 100% 100%; }
.nm-oceanic-grey #user-form { background-color:#EFEFEF; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-grey .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(./images/oceanic_grey_quote.png) no-repeat 10px 10px !important; }
/* White Style */
.nm-right.nm-oceanic-white.nm-module, .nm-right.nm-oceanic-white .nm-module { background:#FFF url(oceanic_white_tl.png) no-repeat -10px -10px; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-white.nm-module, .nm-left.nm-oceanic-white .nm-module { background:#FFF url(oceanic_white_nq.png) no-repeat -10px -10px; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-white .nm-wrapper { background:#FFF url(oceanic_white_tl.png) no-repeat; color:#666; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-white .nm-wrapper { background:#FFF url(oceanic_white_nq.png) no-repeat; color:#666; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-oceanic-white .nm-wrapper div { background:url(oceanic_white_tr.png) no-repeat 100% 0; }
.nm-oceanic-white .nm-wrapper div div { background:url(oceanic_white_bl.png) no-repeat 0 100%; }
.nm-oceanic-white .nm-wrapper div div div { background:url(oceanic_white_br.png) no-repeat 100% 100%; }
.nm-oceanic-white #user-form { background-color:#FFF; border:1px solid #E8E8E8; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-white .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(oceanic_white_quote.png) no-repeat 10px 10px !important; }
.nm-audio1 {padding:5px !important; }
.nm-summary1 {padding-left:140px }
</style>
<div id="ninjamonials" class="nm-oceanic-grey nm-left" style="width:80%">
<!--bof nm-wrapper -->
<div class="nm-wrapper">
<div>
<div>
<div>
<div class="nm-content">
<div class="nm-avatar-wrapper">
</div>
<blockquote
class="nm-testimonial">
<p>This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. </p>
<p>This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. This is a testimonial test. </p>
</blockquote>
<div class="nm-author">
<span class="nm-name">Name</span>
(Website<span class="nm-title"></span>
~ <span class="nm-auth-url"><a
href="http://www.google.com/">www.google.com</a></span>
, <span class="nm-location">Mine</span>
) </div>
<!--eof nm-author -->
</div>
<!--eof nm-content -->
<!--eof wrapper -->
</div>
</div>
</div>
</div>
<div class="nm-wrapper">
<div>
<div>
<div></div></div></div></div></div>
Waiting for your solution. Thanks in advance! I have got a menu working but i don't know how to align it to the left center of the screen. at the moment it is at the top left of the screen. here is the code that i have got so far: HTML Code: <head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Demo Menu 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
<link rel="stylesheet" type="text/css" href="sddm.css" >
<title>JSwitch Slide Menu</title>
</head>
<body>
<div class="navbar" style="width: 148; height: 253;">
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >Demo Menu 1</div>
<div class="dropMenu" ><!-- -->
<div class="subMenu" style="display:inline;">
<div class="subItem"><a href="#">Configuration</a></div>
<div class="subItem"><a href="#">Tool Box</a></div>
<div class="subItem"><a href="#">Contact Us</a></div>
<div class="subItem"><a href="#">Sub Menu 4</a></div>
<div class="subItem"><a href="#">Sub Menu 5</a></div>
</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<br>
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >Demo Menu 2</div>
<div class="dropMenu" ><!-- -->
<div class="subMenu" style="display:none;">
<div class="subItem"><a href="#">Configuration</a></div>
<div class="subItem"><a href="#">Sub Menu 2</a></div>
<div class="subItem"><a href="#">Sub Menu 3</a></div>
<div class="subItem"><a href="#">Sub Menu 4</a></div>
</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<script type="text/javascript" src="xpmenuv21.js"></script>
</div>
<p> </p>
</body>
i'm having no luck vertically aligning the text in the MIDDLE within the <td>. Notice how it is aligned TOP in the rollover state. See code below, please help. --- <!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"> <head> <title>javascript free td link</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> #cell { width:278px; height:25px; } #cell2 { width:278px; height:25px; } a#roll { display:block; width:278px; height:25px; background:#FFFFFF; text-align:left; text-decoration:none; font-family:arial; font-size:14px; color:#FF0000; } a#roll:hover { background:#FF0000; color:#FFFFFF; } </style> </head> <body> <table border="0" cellpadding="1" cellspacing="0"> <tr> <td id="cell"><a id="roll"href="http://www.google.com"> HOME</a></td> </tr> <tr> <td id="cell2"><a id="roll"href="http://www.google.com"> ABOUT</a></td> </tr> </table> </body> </html> As You Can see that the url i am providing includes stuff which is aligned left and i want to align it to center how can i do it . Guide me if there is an appropriate way to align it to center without changing the whole of the style sheet. http://www.ims-sc.org REGARDS Hi Everyone, I can't seem to figure out how to make my pages horizontaly align to the center of the screen. Seemed easy enough but can't seem to make it work. Here is one of those pages : http://www.ruze.ca/Kunstler/Homepage.html It would be amazing if one of you could tell me how to fix this. I'm by no means a web guy, I'm just trying to put up a temporary version of the site I'd like to have made by a real pro when I can afford it. Thanks! D. Hi there i am trying to center align and image and text as well as float the text to the left of the image. It seems I can only manage to do one or the other, the code below floats the text to the left of the image, but the two elements sit to the left on page. How can i center this? HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <center> <div id="spacer"></div> <div id="header"></div> <div class="row"> <div class="left"> <img src="ripple.jpg"/> </div> <div class="right"> <p class="bio">After leaving school I studied graphic design at Kingsway College of Art in London. During this time I learned the basics of the profession.</p> </div> </div> <ul id="minitabs"> <li><a href="Home.html">Home</a></li> <li><a href="Biography.html">Biography</a></li> <li><a href="Portfolio.html">Portfolio</a></li> <li><a href="Contact.html">Contact</a></li> <li><a href="About.html">Links</a></li> </ul> <div id="underline"></div> </center> </body> </html> CSS: Code: row { position: center; width: 800px;}
.left { width:400px; height: 330px; float: left; }
.right { width: 400px; height: 330px; float: left; }
#spacer {
width:800px;
height:12px;
background-color: #3366ff;
}
#header {
position:center;
width:800px;
height:75px;
background-image:url('images/portfolio.gif');
background-repeat:no-repeat;
}
/* Styles for nav bar */
#minitabs {
clear: both;
padding: 25px 0 14px 10px;
width: 800px;
}
#minitabs li{
margin-left: 0px;
padding: 0px;
display: inline;
list-style: none;
}
#minitabs a{
line-height: 14px;
font-weight: bold;
font-family: verdana;
margin: 0 10px 4px 0px;
text-decoration: none;
color: #777777;
}
#minitabs a.active,
#minitabs a:hover {
border-bottom: 10px solid #3366ff;
font-weight: bold;
padding-bottom: 5px;
color #ff6600;
}
/* Styles for images on Portfolio page */
#images1 {
clear: both;
margin-top: 25px;
padding: 0px 0px 10px 0px;
width: 800px;
}
#images1 li{
margin-left: 0px;
padding: 5px;
display: inline;
list-style: none;
}
#images2 {
clear: both;
margin-top: 25px;
padding: 0px 0px 10px 0px;
width: 800px;
}
#images2 li{
margin-left: 0px;
padding: 5px;
display: inline;
list-style: none;
}
#underline {
margin: -16px 100px;
width: 800px;
border-bottom: 1px solid;
color: #777777;
}
p.bio {
text-align: center;
width:500px;
font-family: verdana;
}
Any suggestions? Thank you Jackie I apologize if it is improper protocol to post a link rather than the actual code but since View>Source exists for seeing both the html and css code and there is a fair amount of code...here is the link: http://nicolemuller.com/IMS/FINAL/ne...al/signin.html I don't know what I'm doing wrong but I cant get all the elements in the 2 rows to align and center with the rule of the menu strip. Any help would be great-thanks! Not a major programmer but I needed to make a website. I am having a problem with my website where I have 5 pages, same structure, built with tables, all tables centered. In IE the tables align center on each page. But in Firefox --- 3 of the pages are different, lining up about 10 pixels left of center. Does anyone know how I can fix this problem? I have browsed around other sites as well and many of them have this problem. Any advice would be greatly appreciated. I know tables are horrible but thats all I know/can learn. Can you please help me with this problem. The HTML you are already given (has 2 unordered lists and both of them are in seperate divs) and I have to style them up with CSS with what the assignment wants. So far what I have is this: ul#menu { float: left; width: 6em; list-style-type: none; margin: 0; padding: 0; background-color: #aac; border-right: thick solid #44a; border-left: thick solid #ccf; } div#main { margin-left: 7em; } Now the thing is, it's looking alright so far, but there are some problems and things I don't know how to fix. Firstly with the border right and border left things and background color on my unordered list, the left and right borders aren't big enough and the middle part is too big. I want to change this but keep my list items (the middle and 2 borders) the same overall length as I have them now, just to switch proportions. Also, in the example of the finished product, the list items have a small white space between eachother as to seperate them.. kind of like they are in their own seperate rectangular boxes with borders each on top of eachother, how can I do this? Thanks for your time! Hope you can help! I know a lot of the normies here are probably getting tired of my posts. If so, let me know. This just seems to be the one stop place for most of the questions I have that dal with web page design. Anyways, if anyone read past the first paragraph, I have yet another question. Is the transition from HTML to CSS hard? The HTML book I am studying (which I just NOW found out is from 2003... ) teaches me a lot that I didn't know before and has really got me going with HTML more than any other book. It's teaching me HTML 4 and I realize there is now an HTML 5. The author even mentions that some of the tags it uses are deprecated (the book will later go on into CSS to replace those tags). Is it confusing to switch out tags like that when moving to CSS? I'm the kind of person who likes to stay up-to-date with stuff and HTML & CSS I want to be up to par on for sure. Am I going to have to learn HTML 4, then HTML5, then CSS since I'm pretty much just starting out? Sorry for all the questions. Just really curious and need to know ahead of time. Not that I would quit learning if it was a long process, it's just how I am . Any responses would be appreciated! Hello this is going to sound really basic so any way How do you style font to appear in the middle of your page using CSS as im aware you can either float left or right, am i right in saying you have to use padding? margins? to get it to be where u want it to sit? HI, Can anybody recommend a gadget for Previewing / Thumbnailing HTML templates on my hard drive. I have lots of index.html pages in different folders and I'm looking for a way to flick through them, rather than having to go in and open the files individually. |
|||||||