|
HTML - Slider Alignment
hello everyone. i was using a slider on my website. but unfortunately the alignment doesnt work well. the nos (1,2,3 and 4) appear towards to the left side and i want it on or below the image. the following is the html, css and js codes
Code: <?xml version="1.0" encoding="utf-8"?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" href="CSS/Slider2.css" type="text/css" media="screen" />
<script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
<title>Effect of sugar on the body, how and why insulin is secreated and how to control diabetics.</title>
</head>
<body>
<div id="wrapper">
<div id="header"><div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="Images/how to choose the right protein.jpg" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="Images/Simple post workout recovery tactics.jpg" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="Images/sugars, carbs and insulin.jpg" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="Images/foodtypes.jpg" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong> </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
<script type="text/javascript">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"","desc":""},{"id":"slide-img-2","client":"","desc":""},{"id":"slide-img-3","client":"","desc":""},{"id":"slide-img-4","client":"","desc":""}];
</script>
</div></div><!--/header-->
</div><!Wrapper>
</body>
</html>
slider2.css CODE Code:
* {
margin : 0;
padding : 0;
}
html {
height : 100%;
}
body { background-color:#ccc;}
#wrapper {width:950px; margin:0 auto; background-color:#000;}
a:link, a:visited {
color : #fff;
text-decoration : none;
}
a img {
border : 0;
}
div.wrap {
width : 950px;
margin : 0 auto;
text-align : left;
}
div#top div#nav {
float : left;
clear : both;
width : 950px;
height : 52px;
margin : 22px 0 0;
}
div#top div#nav ul {
float : left;
width : 700px;
height : 52px;
list-style-type : none;
}
div#nav ul li {
float : left;
height : 52px;
}
div#nav ul li a {
border : 0;
height : 52px;
display : block;
line-height : 52px;
text-indent : -9999px;
}
div#header {
margin : -1px 0 0;
}
div#video-header {
height : 683px;
margin : -1px 0 0;
}
div#header div.wrap {
height : 299px;
background : url(images/header-bg.png) no-repeat 50% 0;
}
div#header div#slide-holder {
z-index : 40;
width : 950px;
height : 299px;
position : absolute;
}
div#header div#slide-holder div#slide-runner {
top : 9px;
left : 9px;
width : 973px;
height : 278px;
overflow : hidden;
position : absolute;
}
div#header div#slide-holder img {
margin : 0;
display : none;
position : absolute;
}
div#header div#slide-holder div#slide-controls {
left : 0;
bottom : 228px;
width : 973px;
height : 46px;
display : none;
position : absolute;
background : url(images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text {
float : left;
color : #fff;
display : inline;
font-size : 10px;
line-height : 16px;
margin : 15px 0 0 20px;
text-transform : uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav {
float : right;
height : 24px;
display : inline;
margin : 11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
float : left;
width : 24px;
height : 24px;
display : inline;
font-size : 11px;
margin : 0 5px 0 0;
line-height : 24px;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on {
background-position : 0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a {
background-image : url(images/silde-nav.png);
}
div#nav ul li a {
background : url(images/nav.png) no-repeat;
}
script.js code Code: window.onerror=function(desc,page,line,chr){
/* alert('JavaScript error occurred! \n'
+'\nError description: \t'+desc
+'\nPage address: \t'+page
+'\nLine number: \t'+line
);*/
}
$(function(){
$('a').focus(function(){this.blur();});
SI.Files.stylizeAll();
slider.init();
$('input.text-default').each(function(){
$(this).attr('default',$(this).val());
}).focus(function(){
if($(this).val()==$(this).attr('default'))
$(this).val('');
}).blur(function(){
if($(this).val()=='')
$(this).val($(this).attr('default'));
});
$('input.text,textarea.text').focus(function(){
$(this).addClass('textfocus');
}).blur(function(){
$(this).removeClass('textfocus');
});
var popopenobj=0,popopenaobj=null;
$('a.popup').click(function(){
var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
var pobj=$('#'+pid);
if(!pobj.length)
return false;
if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
popopenobj.hide(50);
$(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
popopenobj=null;
}
return false;
});
$('p.images img').click(function(){
var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
$(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)');
$(this).parent().find('img').removeClass('on');
$(this).addClass('on');
return false;
});
$(window).load(function(){
$.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;});
$.each(css_cims,function(){
var css_im=this;
$.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){
(new Image()).src=_siteRoot+'css/'+this+'/'+css_im;
});
});
});
$('div.sc-large div.img:has(div.tml)').each(function(){
$('div.tml',this).hide();
$(this).append('<a href="#" class="tml_open"> </a>').find('a').css({
left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1
}).click(function(){
$(this).siblings('div.tml').slideToggle();
return false;
}).focus(function(){this.blur();});
});
});
var slider={
num:-1,
cur:0,
cr:[],
al:null,
at:10*1000,
ar:true,
init:function(){
if(!slider.data || !slider.data.length)
return false;
var d=slider.data;
slider.num=d.length;
var pos=Math.floor(Math.random()*1);//slider.num);
for(var i=0;i<slider.num;i++){
$('#'+d[i].id).css({left:((i-pos)*1000)});
$('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');return false;" onfocus="this.blur();">'+(i+1)+'</a>');
}
$('img,div#slide-controls',$('div#slide-holder')).fadeIn();
slider.text(d[pos]);
slider.on(pos);
slider.cur=pos;
window.setTimeout('slider.auto();',slider.at);
},
auto:function(){
if(!slider.ar)
return false;
var next=slider.cur+1;
if(next>=slider.num) next=0;
slider.slide(next);
},
slide:function(pos){
if(pos<0 || pos>=slider.num || pos==slider.cur)
return;
window.clearTimeout(slider.al);
slider.al=window.setTimeout('slider.auto();',slider.at);
var d=slider.data;
for(var i=0;i<slider.num;i++)
$('#'+d[i].id).stop().animate({left:((i-pos)*1000)},1000,'swing');
slider.on(pos);
slider.text(d[pos]);
slider.cur=pos;
},
on:function(pos){
$('#slide-nav a').removeClass('on');
$('#slide-nav a#slide-link-'+pos).addClass('on');
},
text:function(di){
slider.cr['a']=di.client;
slider.cr['b']=di.desc;
slider.ticker('#slide-client span',di.client,0,'a');
slider.ticker('#slide-desc',di.desc,0,'b');
},
ticker:function(el,text,pos,unique){
if(slider.cr[unique]!=text)
return false;
ctext=text.substring(0,pos)+(pos%2?'-':'_');
$(el).html(ctext);
if(pos==text.length)
$(el).html(text);
else
window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");',30);
}
};
// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07
if(!window.SI){var SI={};};
SI.Files={
htmlClass:'SI-FILES-STYLIZED',
fileClass:'file',
wrapClass:'cabinet',
fini:false,
able:false,
init:function(){
this.fini=true;
},
stylize:function(elem){
if(!this.fini){this.init();};
if(!this.able){return;};
elem.parentNode.file=elem;
elem.parentNode.onmousemove=function(e){
if(typeof e=='undefined') e=window.event;
if(typeof e.pageY=='undefined' && typeof e.clientX=='number' && document.documentElement){
e.pageX=e.clientX+document.documentElement.scrollLeft;
e.pageY=e.clientY+document.documentElement.scrollTop;
};
var ox=oy=0;
var elem=this;
if(elem.offsetParent){
ox=elem.offsetLeft;
oy=elem.offsetTop;
while(elem=elem.offsetParent){
ox+=elem.offsetLeft;
oy+=elem.offsetTop;
};
};
};
},
stylizeAll:function(){
if(!this.fini){this.init();};
if(!this.able){return;};
}
};
please help. Similar TutorialsHi, I have a question about a CSS slider I am trying to incorporate into my website. Basically, each slide corresponds to an anchor (#slide1, #slide2, etc). When I click on the tab to open the slide, the entire webpage shifts downward so that the slider is positioned the very top of the browser. It's just like how certain websites like Wikipedia anchor to another part of the webpage so you don't have to scroll down, you can just click the link and it will bring the web page straight to that location. I don't want the slider to shift when I click on the link. I want to keep it so that if you click on the slider anchor, it remains in the same location. The only action should be the new tab opening up. To show an example, I am using a slider comparable to the one found he http://www.csslider.com. It's not the exact same, but as you can see the page shifts down when you click on a slide. Is there any way to rectify this issue easily? Thanks in advance Hello, I purchased a template off template that uses jquery and I am using Dreamweaver to edit it. As you can see --> http://thegamingtech.com/template The center buttons don't work. Here is an image of the three buttons I am talking about: http://d.pr/8w4g If you click on AC III button, it won't change pages even though it is linked. Any ideas? i won't a image slider for my joomla home page now i have found many image sliders. but all this image sliders must i gave a height en weight and he make the pictures on that size. have somewane a script that don't ask that and used the size of the picture inplace of the size of the box or that he autosize the picture. but i mus't get the image from a folder on the server inplace of the picture link in the script Hello, I am working on a wordpress driven site http://www.bigbrotheraustralia.com.au/CMS/wordpress/ The front nivo slider is having some trouble loading and behaves differently with different browsers. It was working fine not too long ago and hasnt been touched. How can this be fixed? as you can see it is semi loading and just displaying the tops of the pictures (firefox) and in IE it doesnt transition. HELP! I want to ask about making a slider in html. Is there a way to create photo beams run continuously, forming the slider. Hope some help. Would anyone mind sharing a hint as to how i might go about making this dymanic? i thought i could just use "elementid" but i didn't have much luck... or just a different script all together, just something simple and light to slide a div from point "a" to point "b" with thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
x=50
y=0
distanceX = 0
distanceY = 0
function slideDown() {
if (document.getElementById)
{document.getElementById("mydiv").style.top = x + "px";}
if (distanceX > 50)
{clearTimeout('slideDown()'),x=parseInt(x),distanceX=parseInt(distanceX);}
else {x=parseInt(x) + 1,distanceX=parseInt(distanceX) + 1,timer1=setTimeout('slideDown()', 15);}
}
</script>
</head>
<body>
<div id="mydiv" style="position:absolute; width:50px; height:50px; top:50px; background-color:#F00;"></div>
<a href="#" onclick="slideDown('mydiv');">Down</a>
</body>
</html>
Okay, so the title...I didn't really know what to put. I'm having serious issues trying to find/alter a string of code on my site. It is currently in a box along the side with a show/hide button to make it retract and expand, but its default is open which is rather annoying. I really hope this is HTML and not Javascript, but I'm a complete newb when it comes to programming so I'm honestly clueless. HERE is a link to my site, if you want to see exactly what I'm talking about. As for the code, I don't know where the specific problem is, so I'm sorry for this, but I'm going to paste most of the header. Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".sideb").click(function(){
$(".cbox").slideToggle("slow");
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('div.accordionButton').click(function() {
if($(this).next().is(':visible')) {
$('div.accordionContent').slideUp('slow');
} else {
$('div.accordionContent').slideUp('slow');
$(this).next().slideDown('slow');
}
});
$("div.accordioncontent").hide();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("div.accordionbutton").mouseover(function(){
$(this).removeClass().addClass("acchover");
}).mouseout(function(){
$(this).removeClass().addClass("accordionbutton");
});
</script>
<style type="text/css">
body {
background-position: top center;
margin-left: 225px;
}
input, textarea, select {
background-color: #f4f7f9;
border: 1px solid #f4f7f9;
font-family: verdana;
color: #727f85;
}
.menubg {
height: 30px;
}
.menubg a {
padding: 2px 4px 2px 4px;
text-align: center;
font-family: helvetica;
font-weight: 100!important;
text-shadow: #c3cdd4 1px 1px 0px;
text-transform: uppercase;
letter-spacing: -1;
font-size: 15px;
text-decoration: none!important;
color: #374a6c!important;
}
.menubg a:hover {
color: #6b7fa2!important;
text-decoration: none!important;
background-color: transparent!important;
}
a:hover, a:active {
background-color: #cdd8de;
text-decoration: none;
}
.catbg {
border-bottom: 5px solid #21314d;
text-align: right;
text-shadow: #21314d 1px 1px 0px;
font-family: helvetica neue;
font-weight: 100!important;
background: url(GRADIENT URL HERE);
}
.cattext {
font-weight: 100!important;
text-transform: uppercase;
padding-right: 20px;
margin-top: 5px;
}
.titlebg {
border-top: 5px solid #21314d;
font-family: helvetica neue;
text-transform: uppercase;
padding-left: 6px;
font-weight: 100!important;
text-shadow: #21304c 1px 1px 0px;
}
.titletext {
font-weight: 100!important;
}
.titletext {
color: #404040!important;
}
.button {
margin-left: 2px;
margin-right: 2px;
font-size: 9px!important;
text-transform: lowercase!important;
padding-right: 4px;
}
.sideb {
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 2 2 2 5;
font-size: 11px;
margin-bottom: 1px;
text-decoration: none!important;
}
a.sideb {
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 2 2 2 5;
font-size: 11px;
margin-top: 1px;
text-decoration: none!important;
}
a.sideb:hover, a.sideb:active {
background-color: #97abb6;
color: #eff3f5;
text-transform: lowercase;
padding: 2 2 2 5;
}
div.accordionButton {
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0;
font-size: 11px;
margin-top: 1px;
text-decoration: none!important;
}
a.accordionButton {
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 5;
font-size: 11px;
margin-top: 1px;
text-decoration: none!important;
}
a.accordionButton:hover, a.accordionButton:active {
background-color: #97abb6;
color: #eff3f5;
text-transform: lowercase;
}
a.side:link, a.side:visited {
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3;
font-size: 11px;
margin-bottom: 1px;
text-decoration: none!important;
}
a.side:hover, a.side:active {
background-color: #97abb6;
color: #eff3f5;
text-transform: lowercase;
padding: 2 2 2 5;
}
h3.aegis {
display: block;
width: 98%;
font-family: helvetica neue;
font-weight: 100!important;
font-size: 18px;
letter-spacing: 0px;
text-transform: uppercase;
text-shadow: #34466a 1px 1px 0px;
color: #bcc3cd;
text-align: left;
background-color: #18253f;
margin: 20px 0px 0px -6px;
padding: 5px;
opacity: 0.8;
-moz-opacity: 0.8;
}
h4.aegism {
display: block;
width: 98%;
font-family: helvetica neue;
font-weight: 100!important;
font-size: 18px;
letter-spacing: 0px;
text-transform: uppercase;
text-shadow: #34466a 1px 1px 0px;
color: #bcc3cd;
text-align: left;
background-color: #18253f;
margin: 0px 0px 0px -6px;
padding: 5px;
opacity: 0.8;
-moz-opacity: 0.8;
}
.content {
background: url("SIDEBAR BG MAIN URL HERE (LIGHT BLUE)");
text-align: justify;
padding: 4 6 4 6;
font-size: 10px;
color: #57636a;
margin-top: 0px;
}
p.update {
background-color: #dddddd;
border-bottom: 3px solid #ababab;
text-align: justify;
padding: 4 6 4 6;
font-size: 10px;
margin-top: 0px;
}
p.roma {
background-color: #eff3f5;
width: 80%;
text-align: justify;
padding: 8px;
font-size: 10px;
color: #6f797f;
-moz-opacity: 0.8;
opacity: 0.8;
margin-top: 10px;
margin-bottom: 0px;
}
p.maintext2 {
background-color: #c6cfd4;
text-align: center;
font-size: 10px;
color: #6f797f;
-moz-opacity: 0.6;
opacity:0.6;
margin-top: 0px;
}
.transimage {
float: left;
margin-right: 4px;
border: 3px solid #4a5a71;
width: 80px;
height: 80px;
-moz-opacity: 0.8;
opacity:0.8;
}
#sidetables {
margin-left: 13px;
width: 230px;
border-left: 5px solid #18253f;
border-right: 5px solid #18253f;
border-bottom: 5px solid #18253f;
}
p.slide
{
background-color: #d8e1e6;
display: block;
color: #8a96ac;
font-family: helvetica neue;
font-width: 100!important;
text-transform: uppercase;
letter-spacing: 1px;
padding: 2 2 2 5;
font-size: 11px;
margin-bottom: 2px;
margin-top: 2px;
text-decoration: none!important;
}
div.accordioncontent {
display: none;
}
.acc {
background-color: #eff3f5;
width: 80%;
text-align: justify;
padding: 8px;
font-size: 10px;
color: #6f797f;
-moz-opacity: 0.8;
opacity: 0.8;
margin-top: 2px;
margin-bottom: 0px;
}
div.cbox {
background-color: #eff3f5;
padding: 8px;
-moz-opacity: 0.8;
opacity: 0.8;
margin-top: 2px;
margin-bottom: 0px;
}
.bordercolor {
padding: 5;
}
</style>
<script type="text/javascript">
<!--
/* fix text menus by ross */
var startChar = ''; //Start character
var dividerChar = ''; //Dividing Character(s);
var endChar = ''; //End character
//no need to edit below
var menu = document.getElementsByTagName('td').item(5).firstChild;
var a = menu.innerHTML.replace(/^\n?(<.+?>)\[/, startChar+' $1');
var b = a.replace(new RegExp('\\](<\/a>)(\\n|\\s|&nb'+'sp;)*$', 'i'), '$1 '+endChar);
var c = b.replace(new RegExp('\\](<\/a>)(&nb'+'sp;|\\s)(<a.+?>)\\[', 'gi'),'$1 '+dividerChar+' $3');
menu.innerHTML = c;
//-->
</script>
<!-- =====
START Smangii's {LEFT} Side Tables *REVISED*
Global Header
===== -->
<table align="center" cellpadding="0px" cellspacing="0px">
<tr>
<td vAlign="top">
<div style="position: fixed; left: 0px; top: 0px; width: 258px; height: 845px; background: url(SIDEBAR BG URL (DARK BLUE) HERE); color: #202e4c; border-right: 4px solid #78839b;">
<!-- ===== SIDEBAR ===== -->
<table id="sidetables" cellpadding="0px" cellspacing="0">
<tr style="margin-top: 200px"><td class="iro" align="center"><div class="content"><br>
<h3 class="aegis">cbox</h3>
<center><br><a href="javascript:void(0);" class="sideb">click to hide/show</a>
<div class="cbox">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: left; line-height: 0">
<div><iframe frameborder="0" width="200" height="245" src="http://www3.cbox.ws/box/?boxid=3366059&boxtag=rkhyky&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain3-3366059" style="border: 0px solid;" id="cboxmain3-3366059"></iframe></div>
<Cbox here>
</div>
<!-- END CBOX -->
</div></center>
I really hope someone could help me with this ^^; please and thank you very much. hi there, I am using this technique: http://www.smoothdivscroll.com/ im in a fairly complicated situation, if you take a look at my site here you will see a set of 4 images aligned neatly... well, they need to scroll to the left, slowly.. we just need to get the scrolling to work. Later on I can customize the options myself. I think the scrolling is failing to start because a lot of scripts are already loaded.. maybe there is a conflict somewhere? I dont know where to look to be honest.. could someone point me in the right direction? Thanks a bunch Hello, Is there a way to hover text over a Jquery slider? Here is what I am working with. http://chocotemplates.com/portfolio/portfolio-2/ Hello! I am new here, I know CSS and HTML basics and would like to ask you how to put a vertical slider inside a table cell. Thank you! Hi guys. I hope u can help me with my blog: http://thefilmpolice.blogspot.com/ As you may notice, my featured post isn't showing up as a content slider, anyone can help me out??? This is my full HTML: http://www.mediafire.com/download.php?628ek0f1488sx26 Thanks in advance! hello people, I checked the other day how is easy to have a slider with html5 and how great looks, but I was wondering how can I use it to control the font size or color of the font or background. I use already the font size option for the user to my blog's posts but with javascript and by clicking on two images (plus, minus). A simple slider would be perfect but I cant find on internet how can I get the values from slider and feed the size or color. I only found one tutorial on html5 slider which just prints the number on the slider. I am not an excerpt so any help will be much appreciated. cheers 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? 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. 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 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;
}
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>
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. 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. |
|||||||