|
Visual Studio - The tool for professional developers
SharePoint Designer (SPD) - Used for SharePoint customizations. Although it has the legacy of FrontPage it is only really useful for SharePoint customizations and non-development work at that.
Expression Web/Blend/Studio - Very handy for web styling and almost a requirement for Silverlight design work.
Webmatrix - A starter tool for non-devs to not hurt themselves but pass the pain on to real developers.
Lightswitch - Allow the office admin to create applications and convince management they should be in IT and/or they don't need real developers.
I know the language. I've read a book. - _Madmatt
|
|
|
|
|
I have a horizontal nav menu defined as a standard `ul` with `li` items. The person who designed the menu used one image per menu item, with the image width fixed to that of the menu item, i.e. for five menu items, we have five different width images. I want a reusable menu that caters for various sets of items, of any width, so I've replaced the fixed width images with a 1 pixel wide slice of the original image, set to `repeat-x`.
However, the images for the selected item (yes, one 'selected' image per menu item as well) have an additional, downward pointing arrow on their underside, as in the image below. How can I include such a little marker on the selected item?
http://imageshack.us/photo/my-images/135/menufk.png/[^]
|
|
|
|
|
You could cheat, and it put it in the menu text ► itself ◄.
▲ And remove it when inappropriate, of course. ▼
But that will only work if you're using Unicode.
|
|
|
|
|
I hadn't realized before, though it appears that you can have several background images for a single html element. So, with this in mind and the css pseudo element :hover, this effect can be acheived just using css!
I made 3 images.
downArrow.png - 18x9 pixels, copied from linked image, white pixels made transparent
unselectedBG.png - 1x53pixels, top44 pixels=gradient, bottom 9 pixels transparent
selectedBG.png - as above with different gradient
The trick is to ensure that your element will be high enough to hold the arrow below your content.
Since I don't know of a way to do this, I've simply made the elements 9 pixels higher than the background gradients. When I draw them, the page background color/image shows through. When I draw the down arrow, I simply position it at the very bottom of the element and about 10pixels to the right.
I've used padding to make the li elements high enough, there's bound to be a better way than this.
S.
<html>
<head>
<style>
li{
color: white;
background: url(unselectedbg.png);;
padding-left: 5px;
padding-right: 20px;
display: inline;
padding-top: 10px;
padding-bottom: 23px;
}
li:hover{
color: #7cd554;
background: url(downArrow.png) no-repeat 10 43, url(selectedbg.png) repeat-x;
}
</style>
</head>
<body>
<ul>
<li>RERPORTS AND SEARCHES</li>
<li>HELP</li>
</ul>
</body>
</html>
|
|
|
|
|
Thanks, exactly what I was looking for. Didn't know you could position a background image.
Just BTW, what I did in the mean time was just add a coloured underline to the selected image, so repeat was OK.
|
|
|
|
|
h1.fontface {font: 60px/68px 'ScriptinaRegular', Arial, sans-serif;letter-spacing: 0;}
p.style1 {font: 18px/27px 'Scriptina-AlternatesRegular', Arial, sans-serif;}
p.style2 {font: 18px/27px 'ScriptinaRegular', Arial, sans-serif;color:red;}
mainly I am speaking about the 60px/68px and the 18px/27px. I do not recall seeing this before and was not successful in a google search...anyboby?
Chris J
www.redash.org
|
|
|
|
|
|
Richard,
Thanks a lot for such a great reference. Can you tell me if this is indeed css3 or earlier?
Chris J
www.redash.org
|
|
|
|
|
Both individually, as you will know, are CSS1, but combined in this particular manner - CSS2 I am pretty sure of.
modified 1-Aug-19 21:02pm.
|
|
|
|
|
Once again thanks Richard!
I did know of them seperately but written together like this was new to me and it just goes to show no matter how many years you do something, there is always a surprise or two to be found.
All the best!
Chris J
www.redash.org
|
|
|
|
|
Am confused. What exactly are CMS.
why to create new CMS as their are others already exist like dreamwiever ?
|
|
|
|
|
CMS we required to Create because if we have CMS then we can easily customize the things in few minitues of time even after 2-3 Years time back. So if is there any requirement like need to Cutomize the things on Coninuesoly or things are getting changed at that time better to Create CMS to get dynamic output instatntly.
|
|
|
|
|
Web content management systems
Main article: Web content management system
A web content management (WCM) system is a CMS designed to simplify the publication of web content to web sites and mobile devices — in particular, allowing content creators to create, submit and manage contents Web Programming Languages or Markup Languages such as HTML or the uploading of files.[1]
Several web-based content management systems exist both in the Open Source and commercial domains.
this is taken from Wiki Content Management Systems[^]
Lobster Thermidor aux crevettes with a Mornay sauce, served in a Provençale manner with shallots and aubergines, garnished with truffle pate, brandy and a fried egg on top and Spam - Monty Python Spam Sketch
|
|
|
|
|
I want to center an img (I've noted in my code which one), I've tried the , but that didnt work out. I think I may have to add something in my CSS. I am also trying to get my music player to continue playing the current when the user goes to the next page. I know I have a few bits of extra code, I plan on cleaning that up once I get the webpage up and going.
<!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>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Starr</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write("<small><font color='000000' face='Arial'>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</font></small>")
</script>
<div id="body_wrapper">
<div id="container">
<!--
<div id="page_header">
<h1><span>Photos Site</span></h1>
</div>
<!--
<!--
<div id="nav_menu">
<ul>
<li id="menu1"><a href="main.htm"><span>Mainpage</span></a></li>
<li id="menu2"><a href="about.htm"><span>About Me</span></a></li>
<li id="menu3"><a href="travel.htm"><span>Portfolio</span></a></li>
<li id="menu4"><a href="prices.htm"><span>Kids n Sports</span></a></li>
<li id="menu5"><a href="services.htm"><span>Africa</span></a></li>
<li id="menu6"><a href="contact.htm"><span>Contact</span></a></li>
</ul>
<div class="clearthis"> </div>
</div>
<!--
<div class="clearthis"> </div>
<!--
<div id="welcome">
<div class="content_header">
<h2><span>Welcome to my Site</span></h2>
</div>
<div class="content">
<div class="thumbnail_dborder_1"><div class="thumbnail_dborder_2"><div class="thumbnail_dborder_3"><div class="thumbnail_dborder_4">
(This is the img I want centered) <img src="images/welcome_thumbnail.jpg" width="340" height="200" alt="Thumbnail Caption" />
</div></div></div></div>
<center><h1><marquee behavior="alternate">Welcome</marquee></h1></center><br/><br/><br/>
<p>Text</p><p>Sample text</p><br /><br />
<p>Text</p><p>Sample text</p><br /><br />
</div>
<div class="clearthis"> </div>
</div>
<!--
<!--
<div id="portfolio">
<div class="content_header">
<h1><span>My Portfolio</span></h1>
</div>
<!--
<div id="gallery">
<ul>
<li><a href="C:\Documents and Settings\Owner\My Documents\Visual Studio 2008\WebSites\Starr\images\gallery_thumbnail_1.gif"><img src="images/gallery_thumbnail_1.gif" width="84" height="76" alt="Thumbnail 1 Caption" /></a></li>
<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_2.gif" width="93" height="76" alt="Thumbnail 2 Caption" /></a></li>
<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_3.gif" width="59" height="77" alt="Thumbnail 3 Caption" /></a></li>
<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_4.gif" width="137" height="77" alt="Thumbnail 4 Caption" /></a></li>
<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_5.gif" width="119" height="78" alt="Thumbnail 5 Caption" /></a></li>
</ul>
</div>
<!--
<div class="clearthis"> </div>
</div>
<!--
</div>
</div>
<!--
<div id="page_footer">
Web design by <a href
="http://www.freewebsitetemplates.com/">Free Website Templates</a><br/><br/><br/>
//music player
<embed name="musicplaylist"
src="musicplaylist.m3u"
width="300"
height="26"
loop="true"
hidden="false"
autostart="true">
</embed>
<br /><br /><center>Starr © 2011</center>
</div>
<!--
</body>
</html>
My style sheet
* {
margin: 0px;
padding: 0px;
}
body {
padding: 80px 0px 0px;
background: url('images/background_top.gif') #c4b8a1 repeat-x;
color: #695d47;
font-family: verdana, arial, sans-serif;
font-size: 12px;
text-align: center;
}
a {
color: #695d47;
background-color: inherit;
text-decoration: underline;
}
a:hover {
color: #ab9c7e;
background-color: inherit;
}
span {
display: none;
}
img {
border: none;
}
ul {
list-style-type: none;
}
li {
list-style-type: none;
}
p {
margin: 0px 0px 15px;
text-align: justify;
line-height: 15px;
}
.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
visibility: hidden;
}
#body_wrapper {
padding: 5px 0px 10px;
width: 100%;
background-color: #fff;
color: inherit;
}
#container {
margin: 0px auto;
width: 758px;
text-align: right;
}
#container .content_header {
margin: 20px 0px 0px auto;
width: 730px;
height: 40px;
background: url('images/content_header_bg.gif') repeat-x 0% 0%;
}
#container .content {
margin: 3px 150px 0px 28px;
width: 580px;
text-align: left;
}
#page_header {
background: url('images/header_leftborder.gif') #fff repeat-y 0% 0%;
color: #6a604e;
float: left;
}
#page_header h1 {
width: 280px;
height: 125px;
overflow: hidden;
background: url('images/website_title.gif') no-repeat 50% 50%;
}
#nav_menu {
margin-left: 9px;
padding-left: 19px;
float: right;
background: url('images/header_leftborder.gif') #fff repeat-y 0% 0%;
color: #b3a386;
text-align: center;
font-family: tahoma, arial, sans-serif;
}
#nav_menu a {
color: #b3a386;
background: inherit;
}
#mav_menu a:hover {
color: #857860;
background: inherit;
}
#nav_menu ul {
width: 450px;
height: 125px;
overflow: hidden;
}
#nav_menu li {
float: left;
border-width: 0px 1px 1px 0px;
border-color: #c1b7a5;
border-style: solid;
font-size: 20px;
}
#nav_menu li#menu3, #nav_menu li#menu6 {
border-right: none;
}
#nav_menu li a {
display: block;
width: 149px;
height: 62px;
text-decoration: none;
}
#nav_menu li a:hover {
color: #857860;
background-color: #f4eee2
}
#nav_menu li a span {
padding-top: 17px;
display: block;
}
#welcome .content_header h2 {
height: 28px;
background: url('images/welcome_header.gif') no-repeat 0% 0%;
}
#welcome p {
width: 420px;
float: right;
}
#clientlist .content {
margin-top: 18px;
margin-right: 260px;
width: 470px;
}
#clientlist .content_header h1 {
height: 28px;
background: url('images/clientlist_header.gif') no-repeat 0% 0%;
}
#clientlist p {
width: 300px;
float: right;
}
#photographer_image {
width: 758px;
text-align: left;
overflow: hidden;
}
#photographer_image span {
display: block;
margin-top: -269px;
margin-left: 517px;
width: 241px;
height: 300px;
background: url('images/main_image.gif') no-repeat 0% 0%;
z-index: 1;
position: absolute;
}
#portfolio .content_header h1 {
height: 28px;
background: url('images/portfolio_header.gif') no-repeat;
}
#portfolio {
padding-bottom: 12px;
background: url('images/gallery_title.gif') no-repeat 29px 80px;
}
#gallery {
padding: 40px 0px 25px 59px;
}
#gallery ul {
width: 700px;
}
#gallery li {
margin-right: 30px;
margin-bottom: 25px;
padding: 4px 4px 2px;
background-color: #c4b8a1;
color: inherit;
float: left;
}
#page_footer {
padding: 9px 10px 6px;
font-weight: bold;
float: none;
clear: both;
}
#page_footer a:hover {
background-color: inherit;
color: #4f4635;
}
.thumbnail_dborder_1 {
margin: 0px 12px 5px 0px;
background: url('images/thumbnail_border_1.gif') #695d47 no-repeat 0% 0%;
color: inherit;
clear: left;
float: left;
}
.thumbnail_dborder_2 {
background: url('images/thumbnail_border_1.gif') no-repeat 100% 0%;
}
.thumbnail_dborder_3 {
background: url('images/thumbnail_border_1.gif') no-repeat 100% 100%;
}
.thumbnail_dborder_4 {
padding: 4px 4px 3px;
background: url('images/thumbnail_border_1.gif') no-repeat 0% 100%;
}
.thumbnail_dborder_1 img {
border: #fff 7px solid;
}
.thumbnail_border_1 {
margin: 5px 12px 5px 0px;
background: url('images/thumbnail_border_2a.gif') #c5b9a2 no-repeat 0% 0%;
color: inherit;
clear: left;
float: left;
}
.thumbnail_border_2 {
background: url('images/thumbnail_border_2b.gif') no-repeat 100% 0%;
}
.thumbnail_border_3 {
background: url('images/thumbnail_border_2c.gif') no-repeat 100% 100%;
}
.thumbnail_border_4 {
padding: 4px 4px 3px;
background: url('images/thumbnail_border_2d.gif') no-repeat 0% 100%;
}
|
|
|
|
|
Putting this line in your css file makes the image you have centered in the div you have the image contained in.
img { display: block; margin-left: auto; margin-right: auto; }.. This is quick and dirty and may not work exactly with the rest of your page. Add this to your css file to see all the div's you may want to re-think:
* { border: 1px solid red !important; }. You will have to size your div like the ones near the bottom of the page (list) if you want this image centered on the page as those are.
I tried this without your "This is the img I want centered" text removed so I could view the img centered. If you have other images you will have to add an "id" or a class name to the image so it applies to only the one you want. See the W3Schools page for good instructions on css and Html. 
(First reply so formatting may not be up to snuff in text above.)
vbmike
|
|
|
|
|
* {
margin: 0px;
padding: 0px;
}
body {
padding: 80px 0px 0px;
background: url('images/background_top.gif') #c4b8a1 repeat-x;
color: #695d47;
font-family: verdana, arial, sans-serif;
font-size: 12px;
text-align: center;
}
a {
color: #695d47;
background-color: inherit;
text-decoration: underline;
}
a:hover {
color: #ab9c7e;
background-color: inherit;
}
span {
display: none;
}
img {
border: none;
}
ul {
list-style-type: none;
}
li {
list-style-type: none;
}
p {
margin: 0px 0px 15px;
text-align: justify;
line-height: 15px;
}
.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
visibility: hidden;
}
#body_wrapper {
padding: 5px 0px 10px;
width: 100%;
background-color: #fff;
color: inherit;
}
#container {
margin: 0px auto;
width: 758px;
text-align: right;
}
#container .content_header {
margin: 20px 0px 0px auto;
width: 730px;
height: 40px;
background: url('images/content_header_bg.gif') repeat-x 0% 0%;
}
#container .content {
margin: 3px 150px 0px 28px;
width: 580px;
text-align: left;
}
#page_header {
background: url('images/header_leftborder.gif') #fff repeat-y 0% 0%;
color: #6a604e;
float: left;
}
#page_header h1 {
width: 280px;
height: 125px;
overflow: hidden;
background: url('images/website_title.gif') no-repeat 50% 50%;
}
#nav_menu {
margin-left: 9px;
padding-left: 19px;
float: right;
background: url('images/header_leftborder.gif') #fff repeat-y 0% 0%;
color: #b3a386;
text-align: center;
font-family: tahoma, arial, sans-serif;
}
#nav_menu a {
color: #b3a386;
background: inherit;
}
#mav_menu a:hover {
color: #857860;
background: inherit;
}
#nav_menu ul {
width: 450px;
height: 125px;
overflow: hidden;
}
#nav_menu li {
float: left;
border-width: 0px 1px 1px 0px;
border-color: #c1b7a5;
border-style: solid;
font-size: 20px;
}
#nav_menu li#menu3, #nav_menu li#menu6 {
border-right: none;
}
#nav_menu li a {
display: block;
width: 149px;
height: 62px;
text-decoration: none;
}
#nav_menu li a:hover {
color: #857860;
background-color: #f4eee2
}
#nav_menu li a span {
padding-top: 17px;
display: block;
}
#welcome .content_header h2 {
height: 28px;
background: url('images/welcome_header.gif') no-repeat 0% 0%;
}
#welcome p {
width: 420px;
float: right;
text-align:center;
}
#clientlist .content {
margin-top: 18px;
margin-right: 260px;
width: 470px;
}
#clientlist .content_header h1 {
height: 28px;
background: url('images/clientlist_header.gif') no-repeat 0% 0%;
}
#clientlist p {
width: 300px;
float: right;
}
#photographer_image {
width: 758px;
text-align: left;
overflow: hidden;
}
#photographer_image span {
display: block;
margin-top: -269px;
margin-left: 517px;
width: 241px;
height: 300px;
background: url('images/main_image.gif') no-repeat 0% 0%;
z-index: 1;
position: absolute;
}
#portfolio .content_header h1 {
height: 28px;
background: url('images/portfolio_header.gif') no-repeat;
}
#portfolio {
padding-bottom: 12px;
background: url('images/gallery_title.gif') no-repeat 29px 80px;
}
#gallery {
padding: 40px 0px 25px 59px;
}
#gallery ul {
width: 700px;
}
#gallery li {
margin-right: 30px;
margin-bottom: 25px;
padding: 4px 4px 2px;
background-color: #c4b8a1;
color: inherit;
float: left;
}
#page_footer {
padding: 9px 10px 6px;
font-weight: bold;
float: none;
clear: both;
}
#page_footer a:hover {
background-color: inherit;
color: #4f4635;
}
.thumbnail_dborder_1 {
margin: 0px 12px 5px 0px;
background: url('images/thumbnail_border_1.gif') #695d47 no-repeat 0% 0%;
color: inherit;
clear: left;
float: left;
}
.thumbnail_dborder_2 {
background: url('images/thumbnail_border_1.gif') no-repeat 100% 0%;
}
.thumbnail_dborder_3 {
background: url('images/thumbnail_border_1.gif') no-repeat 100% 100%;
}
.thumbnail_dborder_4 {
padding: 4px 4px 3px;
background: url('images/thumbnail_border_1.gif') no-repeat 0% 100%;
}
.thumbnail_dborder_1 img {
border: #fff 7px solid;
}
.thumbnail_border_1 {
margin: 5px 12px 5px 0px;
background: url('images/thumbnail_border_2a.gif') #c5b9a2 no-repeat 0% 0%;
color: inherit;
clear: left;
float: left;
}
.thumbnail_border_2 {
background: url('images/thumbnail_border_2b.gif') no-repeat 100% 0%;
}
.thumbnail_border_3 {
background: url('images/thumbnail_border_2c.gif') no-repeat 100% 100%;
}
.thumbnail_border_4 {
padding: 4px 4px 3px;
background: url('images/thumbnail_border_2d.gif') no-repeat 0% 100%;
}
img { display: block; margin-left: auto; margin-right: auto; }
{ border: 1px solid red !important; }* {
margin: 0px;
padding: 0px;
}
body {
padding: 80px 0px 0px;
background: url('images/background_top.gif') #c4b8a1 repeat-x;
color: #695d47;
font-family: verdana, arial, sans-serif;
font-size: 12px;
text-align: center;
}
a {
color: #695d47;
background-color: inherit;
text-decoration: underline;
}
a:hover {
color: #ab9c7e;
background-color: inherit;
}
span {
display: none;
}
img { display: block; margin-left: auto; margin-right: auto; }
{ border: 1px solid red !important; }
}
ul {
list-style-type: none;
}
li {
list-style-type: none;
}
p {
margin: 0px 0px 15px;
text-align: justify;
line-height: 15px;
}
.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
visibility: hidden;
}
#body_wrapper {
padding: 5px 0px 10px;
width: 100%;
background-color: #fff;
color: inherit;
}
#container {
margin: 0px auto;
width: 758px;
text-align: right;
}
#container .content_header {
margin: 20px 0px 0px auto;
width: 730px;
height: 40px;
background: url('images/content_header_bg.gif') repeat-x 0% 0%;
}
#container .content {
margin: 3px 150px 0px 28px;
width: 580px;
text-align: left;
}
#page_header {
background: url('images/header_leftborder.gif') #fff repeat-y 0% 0%;
color: #6a604e;
float: left;
}
#page_header h1 {
width: 280px;
height: 125px;
overflow: hidden;
background: url('images/website_title.gif') no-repeat 50% 50%;
}
#nav_menu {
margin-left: 9px;
padding-left: 19px;
float: right;
background: url('images/header_leftborder.gif') #fff repeat-y 0% 0%;
color: #b3a386;
text-align: center;
font-family: tahoma, arial, sans-serif;
}
#nav_menu a {
color: #b3a386;
background: inherit;
}
#mav_menu a:hover {
color: #857860;
background: inherit;
}
#nav_menu ul {
width: 450px;
height: 125px;
overflow: hidden;
}
#nav_menu li {
float: left;
border-width: 0px 1px 1px 0px;
border-color: #c1b7a5;
border-style: solid;
font-size: 20px;
}
#nav_menu li#menu3, #nav_menu li#menu6 {
border-right: none;
}
#nav_menu li a {
display: block;
width: 149px;
height: 62px;
text-decoration: none;
}
#nav_menu li a:hover {
color: #857860;
background-color: #f4eee2
}
#nav_menu li a span {
padding-top: 17px;
display: block;
}
#welcome .content_header h2 {
height: 28px;
background: url('images/welcome_header.gif') no-repeat 0% 0%;
}
#welcome p {
width: 420px;
float: right;
text-align:center;
}
#clientlist .content {
margin-top: 18px;
margin-right: 260px;
width: 470px;
}
#clientlist .content_header h1 {
height: 28px;
background: url('images/clientlist_header.gif') no-repeat 0% 0%;
}
#clientlist p {
width: 300px;
float: right;
}
#photographer_image {
width: 758px;
text-align: left;
overflow: hidden;
}
#photographer_image span {
display: block;
margin-top: -269px;
margin-left: 517px;
width: 241px;
height: 300px;
background: url('images/main_image.gif') no-repeat 0% 0%;
z-index: 1;
position: absolute;
}
#portfolio .content_header h1 {
height: 28px;
background: url('images/portfolio_header.gif') no-repeat;
}
#portfolio {
padding-bottom: 12px;
background: url('images/gallery_title.gif') no-repeat 29px 80px;
}
#gallery {
padding: 40px 0px 25px 59px;
}
#gallery ul {
width: 700px;
}
#gallery li {
margin-right: 30px;
margin-bottom: 25px;
padding: 4px 4px 2px;
background-color: #c4b8a1;
color: inherit;
float: left;
}
#page_footer {
padding: 9px 10px 6px;
font-weight: bold;
float: none;
clear: both;
}
#page_footer a:hover {
background-color: inherit;
color: #4f4635;
}
.thumbnail_dborder_1 {
margin: 0px 12px 5px 0px;
background: url('images/thumbnail_border_1.gif') #695d47 no-repeat 0% 0%;
color: inherit;
clear: left;
float: left;
}
.thumbnail_dborder_2 {
background: url('images/thumbnail_border_1.gif') no-repeat 100% 0%;
}
.thumbnail_dborder_3 {
background: url('images/thumbnail_border_1.gif') no-repeat 100% 100%;
}
.thumbnail_dborder_4 {
padding: 4px 4px 3px;
background: url('images/thumbnail_border_1.gif') no-repeat 0% 100%;
}
.thumbnail_dborder_1 img {
border: #fff 7px solid;
}
.thumbnail_border_1 {
margin: 5px 12px 5px 0px;
background: url('images/thumbnail_border_2a.gif') #c5b9a2 no-repeat 0% 0%;
color: inherit;
clear: left;
float: left;
}
.thumbnail_border_2 {
background: url('images/thumbnail_border_2b.gif') no-repeat 100% 0%;
}
.thumbnail_border_3 {
background: url('images/thumbnail_border_2c.gif') no-repeat 100% 100%;
}
.thumbnail_border_4 {
padding: 4px 4px 3px;
background: url('images/thumbnail_border_2d.gif') no-repeat 0% 100%;
}
#image{
img { display: block; margin-left: auto; margin-right: auto; }
{ border: 1px solid red !important; }}
<!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>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Starr</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write("<small><font color='000000' face='Arial'>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</font></small>")
</script>
<div id="body_wrapper">
<div id="container">
<!--
<div id="page_header">
<h1><span>Photos Site</span></h1>
</div>
<!--
<!--
<div id="nav_menu">
<ul>
<li id="menu1"><a href="main.htm"><span>Mainpage</span></a></li>
<li id="menu2"><a href="about.htm"><span>About Me</span></a></li>
<li id="menu3"><a href="travel.htm"><span>Portfolio</span></a></li>
<li id="menu4"><a href="prices.htm"><span>Kids n Sports</span></a></li>
<li id="menu5"><a href="services.htm"><span>Africa</span></a></li>
<li id="menu6"><a href="contact.htm"><span>Contact</span></a></li>
</ul>
<div class="clearthis"> </div>
</div>
<!--
<div class="clearthis"> </div>
<!--
<div id="welcome">
<div class="content_header">
<h2><span>Welcome to my Site</span></h2>
</div>
<div class="content">
<div id="image">
<div class="thumbnail_dborder_1"><div class="thumbnail_dborder_2"><div class="thumbnail_dborder_3"><div class="thumbnail_dborder_4">
<img src="images/welcome_thumbnail.jpg" width="340" height="200" alt="Thumbnail Caption" />
</div></div></div></div>
<center><h1><marquee behavior="alternate">Welcome</marquee></h1></center><br/><br/><br/></div>
<p>Text</p><p>Sample text</p><br /><br />
<p>Text</p><p>Sample text</p><br /><br />
</div>
<div class="clearthis"> </div>
</div>
<!--
<!--
<div id="portfolio">
<div class="content_header">
<h1><span>My Portfolio</span></h1>
</div>
<!--
<div id="gallery">
<ul>
<li><a href="C:\Documents and Settings\Owner\My Documents\Visual Studio 2008\WebSites\Starr\images\gallery_thumbnail_1.gif"><img src="images/gallery_thumbnail_1.gif" width="84" height="76" alt="Thumbnail 1 Caption" /></a></li>
<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_2.gif" width="93" height="76" alt="Thumbnail 2 Caption" /></a></li>
<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_3.gif" width="59" height="77" alt="Thumbnail 3 Caption" /></a></li>
<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_4.gif" width="137" height="77" alt="Thumbnail 4 Caption" /></a></li>
<li><a href="http://www.freewebsitetemplates.com/"><img src="images/gallery_thumbnail_5.gif" width="119" height="78" alt="Thumbnail 5 Caption" /></a></li>
</ul>
</div>
<!--
<div class="clearthis"> </div>
</div>
<!--
</div>
</div>
<!--
<div id="page_footer">
Web design by <a href
="http://www.freewebsitetemplates.com/">Free Website Templates</a><br/><br/><br/>
//music player
<embed name="musicplaylist"
src="musicplaylist.m3u"
width="300"
height="26"
loop="true"
hidden="false"
autostart="true">
</embed>
<br /><br /><center>Starr © 2011</center>
</div>
<!--
</body>
</html>
|
|
|
|
|
img { display: block; margin-left: auto; margin-right: auto; }. I see you have an "img" line in your css file with border = none. Just add the three things above (cut and paste) into your img section along with your other entry and you should be set.
vbmike
|
|
|
|
|
* {
margin: 0px;
padding: 0px;
}
body {
padding: 80px 0px 0px;
background: url('images/background_top.gif') #c4b8a1 repeat-x;
color: #695d47;
font-family: verdana, arial, sans-serif;
font-size: 12px;
text-align: center;
}
a {
color: #695d47;
background-color: inherit;
text-decoration: underline;
}
a:hover {
color: #ab9c7e;
background-color: inherit;
}
span {
display: none;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
border: none;
}
{border: 1px solid red !important;
}
ul {
list-style-type: none;
}
li {
list-style-type: none;
}
p {
margin: 0px 0px 15px;
text-align: justify;
line-height: 15px;
}
.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
visibility: hidden;
}
#body_wrapper {
padding: 5px 0px 10px;
width: 100%;
background-color: #fff;
color: inherit;
}
#container {
margin: 0px auto;
width: 758px;
text-align: right;
}
#container .content_header {
margin: 20px 0px 0px auto;
width: 730px;
height: 40px;
background: url('images/content_header_bg.gif') repeat-x 0% 0%;
}
#container .content {
margin: 3px 150px 0px 28px;
width: 580px;
text-align: left;
}
#page_header {
background: url('images/header_leftborder.gif') #fff repeat-y 0% 0%;
color: #6a604e;
float: left;
}
#page_header h1 {
width: 280px;
height: 125px;
overflow: hidden;
background: url('images/website_title.gif') no-repeat 50% 50%;
}
#nav_menu {
margin-left: 9px;
padding-left: 19px;
float: right;
background: url('images/header_leftborder.gif') #fff repeat-y 0% 0%;
color: #b3a386;
text-align: center;
font-family: tahoma, arial, sans-serif;
}
#nav_menu a {
color: #b3a386;
background: inherit;
}
#mav_menu a:hover {
color: #857860;
background: inherit;
}
#nav_menu ul {
width: 450px;
height: 125px;
overflow: hidden;
}
#nav_menu li {
float: left;
border-width: 0px 1px 1px 0px;
border-color: #c1b7a5;
border-style: solid;
font-size: 20px;
}
#nav_menu li#menu3, #nav_menu li#menu6 {
border-right: none;
}
#nav_menu li a {
display: block;
width: 149px;
height: 62px;
text-decoration: none;
}
#nav_menu li a:hover {
color: #857860;
background-color: #f4eee2
}
#nav_menu li a span {
padding-top: 17px;
display: block;
}
#welcome .content_header h2 {
height: 28px;
background: url('images/welcome_header.gif') no-repeat 0% 0%;
}
#welcome p {
width: 420px;
float: right;
text-align:center;
}
#clientlist .content {
margin-top: 18px;
margin-right: 260px;
width: 470px;
}
#clientlist .content_header h1 {
height: 28px;
background: url('images/clientlist_header.gif') no-repeat 0% 0%;
}
#clientlist p {
width: 300px;
float: right;
}
#photographer_image {
width: 758px;
text-align: left;
overflow: hidden;
}
#photographer_image span {
display: block;
margin-top: -269px;
margin-left: 517px;
width: 241px;
height: 300px;
background: url('images/main_image.gif') no-repeat 0% 0%;
z-index: 1;
position: absolute;
}
#portfolio .content_header h1 {
height: 28px;
background: url('images/portfolio_header.gif') no-repeat;
}
#portfolio {
padding-bottom: 12px;
background: url('images/gallery_title.gif') no-repeat 29px 80px;
}
#gallery {
padding: 40px 0px 25px 59px;
}
#gallery ul {
width: 700px;
}
#gallery li {
margin-right: 30px;
margin-bottom: 25px;
padding: 4px 4px 2px;
background-color: #c4b8a1;
color: inherit;
float: left;
}
#page_footer {
padding: 9px 10px 6px;
font-weight: bold;
float: none;
clear: both;
}
#page_footer a:hover {
background-color: inherit;
color: #4f4635;
}
.thumbnail_dborder_1 {
margin: 0px 12px 5px 0px;
background: url('images/thumbnail_border_1.gif') #695d47 no-repeat 0% 0%;
color: inherit;
clear: left;
float: left;
}
.thumbnail_dborder_2 {
background: url('images/thumbnail_border_1.gif') no-repeat 100% 0%;
}
.thumbnail_dborder_3 {
background: url('images/thumbnail_border_1.gif') no-repeat 100% 100%;
}
.thumbnail_dborder_4 {
padding: 4px 4px 3px;
background: url('images/thumbnail_border_1.gif') no-repeat 0% 100%;
}
.thumbnail_dborder_1 img {
border: #fff 7px solid;
}
.thumbnail_border_1 {
margin: 5px 12px 5px 0px;
background: url('images/thumbnail_border_2a.gif') #c5b9a2 no-repeat 0% 0%;
color: inherit;
clear: left;
float: left;
}
.thumbnail_border_2 {
background: url('images/thumbnail_border_2b.gif') no-repeat 100% 0%;
}
.thumbnail_border_3 {
background: url('images/thumbnail_border_2c.gif') no-repeat 100% 100%;
}
.thumbnail_border_4 {
padding: 4px 4px 3px;
background: url('images/thumbnail_border_2d.gif') no-repeat 0% 100%;
}
|
|
|
|
|
Go to W3Schools.com and go thru their basic tutorials on html and css. They have lots of great practice sessions. Have fun!
vbmike
|
|
|
|
|
Thanks for the suggestion on refreshing my browser, I've been doing that and still nothing, as well as I am also looking for other examples online that could also help me. 
|
|
|
|
|
what browser are you using?
vbmike
|
|
|
|
|
|
As I run your code, the img IS centered inside the div you have it in. It is not centered on your page because the div it is in does not stretch across your entire page. Look at your css and see if there are elements that have id's or class names where you limit the size of the element....
vbmike
|
|
|
|
|
Does my problem have to do with the #welcome div in CSS?
|
|
|
|
|
Look at this section in your html file, then look at your css file. This section is inside the "welcome" div yes. The image you want to center is in the div with the class named "thumbnail_dborder_4". It really helps to indent your html code so you tell what starts a section and what closes a section. Your css file does not reference the "welcome" id anywhere that I can find. I think if you set the width (different methods to do this you will find) of the content div to full page as all the others you may find some success.....
<pre lang="HTML">
<div class="content">
<div class="thumbnail_dborder_1">
<div class="thumbnail_dborder_2">
<div class="thumbnail_dborder_3">
<div class="thumbnail_dborder_4">
<!--this is the image you wanted centered-->
<img src="images/picture.jpg" width="340" height="200" alt="Thumbnail Caption" />
</div>
</div>
</div>
</div>
<center><h1><marquee behavior="alternate">Welcome</marquee></h1></center>
<br/>
<br/>
<br/>
<p>Text</p><p>Sample text</p><br /><br />
<p>Text</p><p>Sample text</p><br /><br />
</div>
</pre>
Try a line in your css so you can view all your divs outlined and you will start to envision your page's problems. You can comment it out later....
This will put a red border around all your divs:
<pre lang="CSS">* { border: 1px solid red !important; }</pre>
Keep trying stuff out. You should have an ah-ha! moment at some point....
vbmike
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
