Re: Img centering and music player - Web Development Discussion Boards

starr0074-Aug-11 8:04

4-Aug-11 8:04

I am not too sure if I added the code right, could you please check it out? This is the first time I've ran into this problem of trying to center an image that doesnt use the markup.

CSS

* {
	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 */

#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%;
}


/* Navigational Menu */

#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 to my Site */

#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;
}


/* Client List */

#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;
}


/* My Portfolio */


#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 */

#page_footer {
	padding: 9px 10px 6px;
	font-weight: bold;
	float: none;
	clear: both;
}

#page_footer a:hover {
	background-color: inherit;
	color: #4f4635;
}



/* Thumbnail with Double-Border */

.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 with Single-Border */

.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 */

#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%;
}


/* Navigational Menu */

#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 to my Site */

#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;
}


/* Client List */

#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;
}


/* My Portfolio */


#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 */

#page_footer {
	padding: 9px 10px 6px;
	font-weight: bold;
	float: none;
	clear: both;
}

#page_footer a:hover {
	background-color: inherit;
	color: #4f4635;
}



/* Thumbnail with Double-Border */

.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 with Single-Border */

.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; }}

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">
<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> 
//Script shows current date
 
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">
 
	<!-- Start of Page Header -->
 
	<div id="page_header">
	<h1><span>Photos Site</span></h1>
	</div>
	
	<!-- End of Page Header -->
 

	<!-- Start of Navigational Menu -->
 
	<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>
 
	<!-- End of Mavigational Menu -->
 
	<div class="clearthis"> </div>
 

	<!-- Start of Welcome to my Site -->
 
<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>
 
	<!-- End of Welcome to my Site -->
 
	<!-- Start of My Portfolio -->
 
	<div id="portfolio">
 
		<div class="content_header">
		<h1><span>My Portfolio</span></h1>
		</div>
 

		<!-- Start of Gallery -->
 
		<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>
 
		<!-- End of Gallery -->
 

		<div class="clearthis"> </div>
 
	</div>
 
	<!-- End of Client List -->
 

</div>
</div>
 

<!-- Start of Page Footer -->
 
<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>
 
<!-- End of Page Footer -->
</body>
</html>

Re: Img centering and music player

vbmike4-Aug-11 16:49

vbmike

4-Aug-11 16:49

CSS

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

Re: Img centering and music player

starr0075-Aug-11 12:49

starr007

5-Aug-11 12:49

This is how I did it, and still my image didnt center. Am I missing something?

CSS

* {
	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 */

#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%;
}


/* Navigational Menu */

#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 to my Site */

#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;
}


/* Client List */

#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;
}


/* My Portfolio */


#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 */

#page_footer {
	padding: 9px 10px 6px;
	font-weight: bold;
	float: none;
	clear: both;
}

#page_footer a:hover {
	background-color: inherit;
	color: #4f4635;
}



/* Thumbnail with Double-Border */

.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 with Single-Border */

.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%;
}

Re: Img centering and music player

vbmike5-Aug-11 13:59

vbmike

5-Aug-11 13:59

Go to W3Schools.com and go thru their basic tutorials on html and css. They have lots of great practice sessions. Have fun!

vbmike

Re: Img centering and music player

starr0075-Aug-11 16:18

starr007

5-Aug-11 16:18

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. Wink | ;)

Re: Img centering and music player

vbmike6-Aug-11 10:32

vbmike

6-Aug-11 10:32

what browser are you using?

vbmike

Re: Img centering and music player

starr0076-Aug-11 15:05

starr007

6-Aug-11 15:05

I am using IE 8.

Re: Img centering and music player

vbmike7-Aug-11 2:55

vbmike

7-Aug-11 2:55

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

Re: Img centering and music player

starr0077-Aug-11 14:38

starr007

7-Aug-11 14:38

Does my problem have to do with the #welcome div in CSS?

Re: Img centering and music player

vbmike9-Aug-11 15:05

vbmike

9-Aug-11 15:05

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">


<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

Re: Img centering and music player

starr00711-Aug-11 14:34

starr007

11-Aug-11 14:34

Before seeing your post, I just took out the divs and just put my image in a center tag, but I am going to go back and try your suggestion. Wink | ;)

Re: Img centering and music player

starr00711-Aug-11 14:42

starr007

11-Aug-11 14:42

So, from my understanding I would have to reference the welcome id in my CSS and align the picture in my CSS?

Re: Img centering and music player

vbmike12-Aug-11 12:52

vbmike

12-Aug-11 12:52

No, I just responded to the question regarding your statement about the welcome id. It is not needed in your case. You can try it out by removing that id from the div in your html code and see what difference it makes when you run the page thru your browser. But yes, you should do all alignment in your css file. What I really recommend is starting from scratch making your own webpage rather than taking a template from the web and trying to learn. That is kind of hard for beginners.

vbmike

positioning issue in IE9

siva4552-Aug-11 23:09

siva455

2-Aug-11 23:09

Hi,
i have used the below css class to display menu(onmouse over of a button)

<pre lang="cs">
.p-menu
{
z-index: 50; position:absolute; display: none; top:0px; left:0px;
}
</pre>

the above works fine in IE8 where as in IE9 it goes top left corner of the browser....

please let me know any suggestion...

Re: positioning issue in IE9

Gerben Jongerius3-Aug-11 2:08

Gerben Jongerius

3-Aug-11 2:08

Position absolute places the element relative to the first 'relative' parent element it finds. So if you have the following structure:

<body>
 <div id=div1>
  <div id=div2>
   <div id=div3>
   </div>
   </div>
  </div>
</body>

And you position div3 absolute it will be positioned relative from the coordinates of the body element.

Now lets say you provide the following style to div1 position: relative. Then all of a sudden div3 will be positioned relative to the topleft coordinate of div1.

Re: positioning issue in IE9

Ed Nutting23-Aug-11 0:11

Ed Nutting

23-Aug-11 0:11

Just read this and would like to add that there the issue is not IE9 but IE8 not conforming to standards (as per usual) and thus giving you different displays Dead | X|

How to identify a particular Web site is not active

Gali197825-Jul-11 7:53

Gali1978

25-Jul-11 7:53

How to identify a particular Web site is not active ?

can i get any C# sample code for this ?

Re: How to identify a particular Web site is not active

Maximilien25-Jul-11 9:06

Maximilien

25-Jul-11 9:06

Gali1978 wrote:
not active

In what way ?
- no updated content ?
- cannot access the web site ?

Watched code never compiles.

Re: How to identify a particular Web site is not active

Shahriar Iqbal Chowdhury/Galib25-Jul-11 22:13

Shahriar Iqbal Chowdhury/Galib

25-Jul-11 22:13

HttpWebResponse response = (HttpWebResponse)request.GetResponse();
if (response == null || response.StatusCode != HttpStatusCode.OK)

How can I check if my IIS is alive using C#?

goldsoft24-Jul-11 4:32

goldsoft

24-Jul-11 4:32

How can I check if my IIS is alive using C#?

If the server is down - how to do iisreset ?

Re: How can I check if my IIS is alive using C#?

SomeGuyThatIsMe28-Jul-11 17:21

SomeGuyThatIsMe

28-Jul-11 17:21

there are quite a few free server monitors floating around the internets. I've been using PA Server monitor for some lightweight stuff. we had an old server with an iffy nic so we used a device called an iBoot that pinged the server and after x missed pings it killed power to the server and brought it back on after 30 seconds. If you want the app to run on the server i'm sure theres a way to check the app pools, or you could look at the asp_net or w3svc processes to see if they're still running. iisreset should be able to be run from a Process.Start() in c# once you determine its stopped.

Please remember to rate helpful or unhelpful answers, it lets us and people reading the forums know if our answers are any good.

cant connect windows-mobile to webservice in my computer

Gali197821-Jul-11 23:26

Gali1978

21-Jul-11 23:26

hi
i cant connect windows-mobile to webservice in my computer

the terminal connect to my pc in ActiveSync

i try to change in the terminal the network to My ISP or My Work Network

and still cant connect to my webservice

thanks in advance

ASP.Net Webforms - Is there an easy way to know if a validator in a hidden control is failing?

Rafferty Uy21-Jul-11 15:55

Rafferty Uy

21-Jul-11 15:55

We have an aspx file which contains a lot of custom web controls (ascx files) which has validators in it.
Now when I click a button, it doesn't work because some validator is failing.

My problem is that there're no errors that appear on the screen, so I suspect that it's one of the controls with .Visible = false.

Is there any easy way to know which one is failing?
- It's too troublesome to change the code first and set every control to .Visible = true just to test.
- Breakpoints doesn't work as well, since validators run on client side.

Thanks!

Rafferty

Background Image Disappeared from Website

Fiore197515-Jul-11 20:45

Fiore1975

15-Jul-11 20:45

I have a background image on my site - juneux.com - that has been working just fine for the past 6 months, and all of sudden tonight, it's missing. I didn't do anything to do the code that would have made it disappear. What changed? And what can I do to get it to reappear?

Re: Background Image Disappeared from Website

Peter_in_278015-Jul-11 21:12

Peter_in_2780

15-Jul-11 21:12

I looked at the source of your page (Firebug is *BRILLIANT* Smile | :)

) and there is no background image specified in the HTML. Your HTML header does reference a stylesheet stylesheet.css but it appears to be empty. Maybe that is what has gone missing.

Cheers,
Peter

Software rusts. Simon Stephenson, ca 1994.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.