I Need Help With Positioning a DIV under a other DIV

Get Started
1

I don’t know what to do position a DIV under at the bottom of page im so confused on what to do. Im a intern for a web-design company but mostly Im just the photoshop/3d Animation/Modeling And Rendering and make vids for site, etc.

Note:This a template I found online. Gosh HTML has changed so much since I was in high school.

postion

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/jquery.mousewheel.min.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/pop-ups.js"></script>
<script type="text/javascript" src="scripts/nav.js"></script>
</head>
<body>
<hgroup>
  <h1>Portfolio</h1>
  <h2>3D Animation/Graphic Design<h2>
</hgroup>
<nav>
  <ul id="menu" class="menu">
    <li> <a href="#" id="about"> <img src="images/AW.png" alt=""/> <span class="active"></span> <span class="wrap"> <span class="link">About me</span> <span class="descr">Know me</span> </span> </a> </li>
    <li> <a href="#" id="projects"> <img src="images/G Logo.png" alt=""/> <span class="active"></span> <span class="wrap"> <span class="link">Projects</span> <span class="descr">My work</span> </span> </a> </li>
    <li> <a href="#" id="contact"> <img src="images/Ninja Penguin.png" alt=""/> <span class="active"></span> <span class="wrap"> <span class="link">Contact</span> <span class="descr">Get in touch</span> </span> </a> </li>
    <li > <a href="#" id="blog"> <img src="images/GTR Render Menu.jpg" alt=""/> <span class="active"></span> <span class="wrap"> <span class="link">Side Works</span> <span class="descr">3D-Animation-Model/Graphic Design</span> </span> </a> </li>
  </ul>
</nav>
<section id="bg">
  <section id="overlay"></section>
  <a href="#" class="nextImageBtn" title="next"></a><a href="#" class="prevImageBtn" title="previous"></a><img src="images/gallery/Hankook Tire Ad 1 (Sample).jpg" id="bgimg" /></section>
<div id="preloader"><img src="images/ajax-loader_dark.gif" width="32" height="32" alt="" /></div>
<div id="img_title"></div>
<div id="toolbar"><a href="#" title="Maximize" onClick="ImageViewMode('full');return false"><img src="images/toolbar_fs_icon.png" width="50" height="50" alt="" /></a></div>
<div id="thumbnails_wrapper">
  <div id="outer_container">
   <div class="container">
        <div class="content">
          <div><a href="images/gallery/Hankook Tire Ad 1 (Sample).jpg"></a></div>
        </div>
        <div class="content">
          <div><a href="images/gallery/BMW M3 GTR.jpg"></a></div>
        </div>
        <div class="content">
          <div><a href="images/gallery/Hankook Tire Ad 2 (Sample).jpg"></a></div>
        </div>
        <div class="content">
          <div><a href="images/gallery/Ninja Penguin.jpg"></a></div>
        </div>
        <div class="content">
	<div><a href="images/gallery/Super Soldier.jpg"></a></div>
        </div>
	<div class="customScrollBox">
	<div class="content"><div class="content"> <a id="popupBlogClose"><img src="images/cross.png" width="20" alt="" /></a>
        </div>
	</div>
       </div>
      </div>
     </div>
    </div>
   </div>
<article id="popupAbout" class="popupAbout">
  <div class="customScrollBox">
    <div class="container">
      <div class="content"> <a id="popupAboutClose"><img src="images/cross.png" width="20" alt="" /></a>
        <h>About: ME</h>
        <p class""><img src="images/globalgraffiti.jpg" alt="" class="image"/>Graduated from Lonestar Community North Harris College with Associates Degree in 3D Animation & Graphic Design. Recently now a intern for Global Graffiti.</p>
	<a></li>
<li><a href="http://www.globalgraffiti.net">Global Graffiti</a>
      </div>
    </div>
    <div class="dragger_container">
      <div class="dragger"></div>
    </div>
    <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</article>
<article id="popupBlog" class="Blog">
  <div class="customScrollBox">
    <div class="container">
      <div class="content"> <a id="popupBlogClose"><img src="images/cross.png" width="20" alt="" /></a>
    </div>
    <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
 <h>Side Works: ME</h>
	<p class""><img src="images/Sculpture Guitar.jpg" alt="Sculpt Guitar" class image width="720" height="960"></p>
	<p class""><img src="images/BMW M3 GTR.jpg" alt="BMW-GTR" class image width="720" height="480"></p>
	<p class""><img src="images/GTR Render.jpg" alt="GTR Render" class image width="720" height="480"></p>
	<p class""><img src="images/Audi And Jeep.jpg" alt="Audi-Jeep" class image width="720" height="480"></p>
	<p class""><img src="images/1995 Nissan Skyline GT-R R33 V-Spec.jpg" alt="GTR R33 V-Spec" class image width="720" height="480"></p>
	<p class""><img src="images/VetUSA Folder.jpg" alt="VetUSA Folder" class image width="720" height="480"></p>
	<iframe width="720" height="480" 
		src="http://www.youtube.com/embed/zuJpdEkBNVA"
		frameborder="0" allowfullscreen>
		</iframe>
	<div class="border"></div>
      </div>
    </div>
    <div class="dragger_container">
      <div class="dragger"></div>
    </div>
    <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</article>
<script type="text/javascript" src="scripts/gallery.js"></script> 
<script type="text/javascript" src="scripts/jquery.mCustomScrollbar.js"></script>
</div>
</article>
<article id="popupProjects" class="popupProjects">
  <div class="customScrollBox">
    <div class="container">
      <div class="content"> <a id="popupProjectsClose"><img src="images/cross.png" width="20" alt="" /></a>
        <h>Projects: ME</h>
       	<div class="border"></div>
 	<h>Swirled-Ice [Made New Slides]</h>
	<p class="nomargin"><img src="images/Swirled Ice.jpg" alt="" class="image"/><a></li>
<li><a href="http://www.swirled-ice.com/default.aspx">Swirled-Ice</a><br>
        </p>
        <div class="border"></div>
        <h>Ultimate Solutions.Inc [Rendered 3D Animations For Site]</h>
        <p class="nomargin"><img src="images/Ultimate Solutions.jpg" alt="" class="image"/><a></li>
<li><a href="http://ultimatesolutions-inc.com">Ultimate Solutions.Inc</a><br/>
        </p>
        <div class="border"></div>
        <h>VetUSA [Made Folder And 3D VetUSA Logo]</h>
        <p><img src="images/VetUSA.jpg" alt="" class="image"/><a></li>
<li><a href="http://vetusa.com/">VetUSA</a><br/>
        </p>
        <div class="border"></div>
      </div>
    </div>
    <div class="dragger_container">
      <div class="dragger"></div>
    </div>
    <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</article>
<article id="popupContact" class="popupContact">
  <div class="customScrollBox">
    <div class="container">
      <div class="content"> <a id="popupContactClose"><img src="images/cross.png" width="20" alt="" /></a>
        <h>Contact: ME</h>
        <form method="post">
          <label for="name">Name:</label>
          <input type="text" name="name" id="name" required placeholder="Name" />
          <label for="name">Subject:</label>
          <input type="text" name="subject" id="subject" required placeholder="Subject" />
          <label for="email">Email:</label>
          <input type="email" name="email" id="email" required placeholder="email@example.com" />
          <label for="message">Message:</label>
          <textarea name="message" id="message" required></textarea>
          <input type="submit" value="Send Message" />
        </form>
        </br>
        <iframe width="425" height="300" class="map" src="http://maps.google.com/maps?hl=en&amp;q=701+first+ave+sunnyvale+ca&amp;ie=UTF8&amp;hq=&amp;hnear=701+1st+Ave,+Sunnyvale,+California+94089&amp;z=14&amp;ll=37.416883,-122.026022&amp;output=embed"></iframe>
        <div id="social-network"> <a href="#" target="_blank"><img src="images/facebook.png" alt="Facebook" /></a> <a href="#" target="_blank"><img src="images/flickr.png" alt="Flicker" /></a> <a href="#" target="_blank"><img src="images/linkedin.png" alt="Linkedin" /></a> <a href="#" target="_blank"><img src="images/myspace.png" alt="Myspace" /></a> <a href="#" target="_blank"><img src="images/twitter.png" alt="Twitter" /></a> </div>
      </div>
    </div>
    <div class="dragger_container">
      <div class="dragger"></div>
    </div>
    <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</article>
<article id="popupBlog" class="Blog">
  <div class="customScrollBox">
    <div class="container">
      <div class="content"> <a id="popupBlogClose"><img src="images/cross.png" width="20" alt="" /></a>
        <h>Side Works: ME</h>
	<p class""><img src="images/Sculpture Guitar.jpg" alt="Sculpt Guitar" class image width="720" height="960"></p>
	<p class""><img src="images/BMW M3 GTR.jpg" alt="BMW-GTR" class image width="720" height="480"></p>
	<p class""><img src="images/GTR Render.jpg" alt="GTR Render" class image width="720" height="480"></p>
	<p class""><img src="images/Audi And Jeep.jpg" alt="Audi-Jeep" class image width="720" height="480"></p>
	<p class""><img src="images/1995 Nissan Skyline GT-R R33 V-Spec.jpg" alt="GTR R33 V-Spec" class image width="720" height="480"></p>
	<p class""><img src="images/VetUSA Folder.jpg" alt="VetUSA Folder" class image width="720" height="480"></p>
	<iframe width="720" height="480" 
		src="http://www.youtube.com/embed/zuJpdEkBNVA"
		frameborder="0" allowfullscreen>
		</iframe>
	<div class="border"></div>
      </div>
    </div>
    <div class="dragger_container">
      <div class="dragger"></div>
    </div>
    <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div>
</article>
<script type="text/javascript" src="scripts/gallery.js"></script> 
<script type="text/javascript" src="scripts/jquery.mCustomScrollbar.js"></script>
<body> 
(SOMETHING HERE ?)
</div> 
</body>
</html>

STYLE


*/
html, body {
	height:100%;
	Width: 100%;
}
* {
	outline:none;
}
body {
	margin:0px;
	padding:0px;
	background:#000;
	font-family:'Century Gothic', arial, serif;
}
h1, h2, h3, h4, h5, h6 {
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
}
hgroup {
	position:fixed;
	z-index:3;
	left:10px;
	top:10px;
	padding:10px;
	background:url(images/fs_img_g_bg.png);
	color:#FFF;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size: 20px;
	letter-spacing: 1px;
	text-shadow:rgba(0, 0, 0, 0.50) 0 1px 1px;
}
hgroup h1 {
	margin: 0px;
	text-shadow:rgba(0, 0, 0, 1) 3px 2px 0;
}
hgroup h4 {
	font-family:'Century Gothic', arial, serif;
	font-size: 22px;
	font-weight:normal;
	margin: 0px;
}
hgroup a {
	text-decoration:none;
	color: #FFF;
	border-bottom: 1px dashed #FFF;
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
hgroup a:hover {
	background: rgba(0, 0, 0, 0.50);
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
#toolbar {
	position:fixed;
	z-index:3;
	right:10px;
	top:10px;
	padding:5px;
	background:url(images/fs_img_g_bg.png);
}
#toolbar img {
	border:none;
}
#img_title {
	position:fixed;
	z-index:3;
	right:10px;
	bottom: 60%;
	padding:10px;
	background:url(images/fs_img_g_bg.png);
	color:#FFF;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	text-transform:uppercase;
	font-size: 20px;
	letter-spacing: 1px;
}
#bg {
	position:fixed;
	z-index:1;
	overflow:hidden;
	width: 100%;
	height: 100%;
}
#overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	background: url(images/dotted.png);
	opacity: 0.3;
}
#bgimg {
	display:none;
	-ms-interpolation-mode: bicubic;
}
#preloader {
	position:relative;
	z-index:3;
	width:32px;
	padding:20px;
	top:80px;
	margin:auto;
	background:#000;
}
#thumbnails_wrapper {
	z-index:2;
	position:fixed;
	bottom:0%;
	width:100%;
	height: 205px;
	background:url(images/empty.gif);
}
.nextImageBtn, .prevImageBtn {
	display:block;
	position:absolute;
	width:50px;
	height:50px;
	top:50%;
	margin:-25px 10px 0 10px;
	z-index:3;
	filter:alpha(opacity=40);
	-moz-opacity:0.4;
	-khtml-opacity:0.4;
	opacity:0.4;
	-webkit-transition:all .25s linear;
	-moz-transition:all .25s linear;
	-o-transition:all .25s linear;
	-ms-transition:all .25s linear;
	transition:all .25s linear;
}
.nextImageBtn:hover, .prevImageBtn:hover {
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity:0.8;
	opacity:0.8;
	-webkit-transition:all .25s linear;
	-moz-transition:all .25s linear;
	-o-transition:all .25s linear;
	-ms-transition:all .25s linear;
	transition:all .25s linear;
}
.nextImageBtn {
	right:0;
	background:#000 url(images/nextImgBtn.png) center center no-repeat;
}
.prevImageBtn {
	background:#000 url(images/prevImgBtn.png) center center no-repeat;
}
ul.menu {
	margin:0;
	margin-top: -70px;
	padding:0;
	list-style: none;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size:14px;
	width:680px;
	position:absolute;
	top:30%;
	right:0%
}
ul.menu a {
	text-decoration:none;
	outline:none;
}
ul.menu li {
	float:left;
	width:170px;
	height:85px;
	position:relative;
	cursor:pointer;
}
ul.menu li > a {
	position:absolute;
	top:0px;
	left:0px;
	width:170px;
	height:85px;
	z-index:12;
	background:transparent url(images/overlay.png) no-repeat bottom right;
	background-color: rgba(0, 0, 0, 0.75);
	-moz-box-shadow:0px 0px 2px #000 inset;
	-webkit-box-shadow:0px 0px 2px #000 inset;
	box-shadow:0px 0px 2px #000 inset;
}
ul.menu li a img {
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;
	-moz-box-shadow:0px 0px 4px #000;
	-webkit-box-shadow:0px 0px 4px #000;
	box-shadow:0px 0px 4px #000;
}
ul.menu li span.wrap {
	position:absolute;
	top:25px;
	left:0px;
	width:170px;
	height:60px;
	z-index:15;
}
ul.menu li span.active {
	position:absolute;
	background: rgba(0, 0, 0, 0.75);
	top:85px;
	width:170px;
	height:0px;
	left:0px;
	z-index:14;
	-moz-box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow:0px 0px 4px #000 inset;
	box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow: 0px 0px 4px #000 inset;
	-moz-box-shadow: 0px 0px 4px #000 inset;
	box-shadow: 0px 0px 4px #000 inset;
	-webkit-border-bottom-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	-moz-border-radius-bottomright: 15px;
	border-bottom-left-radius: 15px;
	-moz-border-radius-bottomleft: 15px;
}
ul.menu li span span.link, ul.menu li span span.descr, ul.menu li div.box a {
	margin-left:15px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #000;
}
ul.menu li span span.link {
	color:#fff;
	font-size:24px;
	float:left;
	clear:both;
}
ul.menu li span span.descr {
	color:#0B75AF;
	float:left;
	clear:both;
	width:155px; 
	font-size:10px;
	letter-spacing:1px;
}
ul.menu li div.box {
	display:block;
	position:absolute;
	width:170px;
	overflow:hidden;
	height:170px;
	top:85px;
	left:0px;
	display:none;
	background:#000;
}
ul.menu li div.box a {
	float:left;
	clear:both;
	line-height:30px;
	color:#0B75AF;
}
ul.menu li div.box a:first-child {
	margin-top:15px;
}
ul.menu li div.box a:hover {
	color:#fff;
}
article {
	display:none
}
.image {
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-radius: 5px;
	float: right;
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
/* Pop Up */
#popupAbout, #popupProjects, #popupContact, #popupBlog {
	height: 600px;
	width: 900px;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.80);
	border: 1px solid #cecece;
	z-index: 15;
	padding: 20px;
	color: #FFF;
	-webkit-box-shadow: 0px 0px 4px #000 inset;
	-moz-box-shadow: 0px 0px 4px #000 inset;
	box-shadow: 0px 0px 4px #000 inset;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	margin-top: -50px;
	visibility: hidden;
}
#popupAbout p, #popupProjects p, #popupContact p, #popupBlog p {
	padding-left: 10px;
	font-size: 16px;
	line-height: 24px;
}
#popupAbout h1, #popupProjects h1, #popupContact h1, #popupBlog h1 {
	text-align: left;
	font-size: 30px;
	letter-spacing: 1px;
	border-bottom: 1px dotted #D3D3D3;
	padding-bottom: 2px;
	margin: 0;
}
#popupAboutClose, #popupProjectsClose, #popupContactClose, #popupBlogClose {
	right: 0;
	top: 15px;
	position: absolute;
	display: block;
	opacity: 0.5;
	-webkit-transition:all .25s linear;
	-moz-transition:all .25s linear;
	-o-transition:all .25s linear;
	-ms-transition:all .25s linear;
	transition:all .25s linear;
}
#popupAboutClose:hover, #popupProjectsClose:hover, #popupContactClose:hover, #popupBlogClose:hover {
	opacity: 1;
	-webkit-transition:all .25s linear;
	-moz-transition:all .25s linear;
	-o-transition:all .25s linear;
	-ms-transition:all .25s linear;
	transition:all .25s linear;
}
.border {
	height: 3px;
	clear: both;
	border-bottom: 1px dotted #FFF;
}
*:focus {
	outline: none;/* Prevents blue border in Webkit */
}
form {
	font-family:'Century Gothic', arial, serif;
	width: 350px;
	margin-left: 25px;
}
input, textarea {
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	background-color: #fff;
	border: 1px solid #ccc;
	width: 300px;
	min-height: 30px;
	display: block;
	margin-bottom: 16px;
	margin-top: 8px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	color: #fff;
}
textarea {
	min-height: 200px;
	resize:none;
}
input:focus, textarea:focus {
	-webkit-box-shadow: 0 0 25px #ccc;
	-moz-box-shadow: 0 0 25px #ccc;
	box-shadow: 0 0 25px #ccc;
}
/* The interesting bit */
input:not(:focus), textarea:not(:focus) {
	opacity: 0.5;
}
input:required, textarea:required {
 background: url("images/asterisk_orange.png") no-repeat 280px 7px;
}
input:valid, textarea:valid {
 background: url("images/tick.png") no-repeat 280px 5px;
}
input:focus:invalid, textarea:focus:invalid {
 background: url("images/cancel.png") no-repeat 280px 7px;
}
input[type=submit] {
	font-size: 24px;
	padding: 10px;
	background: none;
	opacity: 1.0;
}
#social-network img {
	float: right;
	margin-left: 20px;
	opacity: 0.6;
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
#social-network img:hover {
	opacity: 1;
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
#social-network {
	float: right;
	margin-top: -150px;
	float: left;
	margin-left: 475px;
}
.map {
	margin-top: -500px;
	margin-right: 25px;
	border: 5px solid rgba(255, 255, 255, 0.30);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	float: right;
}
.date {
	float: left;
	position: relative;
	margin-right: 10px;
	padding: 44px 5px 0;
}
.date .month {
	text-transform: uppercase;
	font-size: 25px;
}
.date .day {
	font-size: 35px;
	line-height: 45px;
	position: absolute;
	left: 5px;
	top: 0;
}
.date .year {
	display: block;
	position: absolute;
	right: -5px;
	top: 15px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
2

Im thinking of making a table or something

3

Hi Maverick Hawk 5. Welcome to the forums. :slight_smile:

No, forget tables. They shouldn’t be used for layout. By their very nature, divs and other block level elements sit underneath each other. So if that is not happening, it means some CSS is getting in the way. The most likely cause is using CSS positioning (like position: absolute; or position: fixed) which you do have in there.

However, it’s hard to work out what parts of your code relate to that picture, so I’m not sure which element you are referring to. Ideally, post a live link to this is ou have one.

4

What Ralph said — and you have a redundant opening body tag towards the end of your html:
<body>
(SOMETHING HERE ?)
</div>
</body>
</html>

5

Ok not the help I was expecting & for one thing how do I create a DIV below the image slider. If anyone can help me position info below the image slider…THAT WILL BE A HUGE THANKS. Also really Thelma I was guessing on where to put it; it was a start. I looked everywhere on the net and I can’t seem to get some info or anything below the image slider I’m so confused. Not be rude but please DONT make a absurd answer with not anwsering my question; Im really new at html

6

It looks like you didn’t read our answers, or don’t understand them. Rather than reply like you did, ask for clarification. To call our answers absurd is itself absurd. We are trying to help, and have actually told you what the problem is. If you want to understand what we are telling you, then ask questions. If you can’t understand CSS basics and can’t ask questions to help yourself understand, then you may be better off seeking a web designer.

7

Really I need to change the style.CSS info or add I believe so that it can postion a DIV below the image slider. Thats all I need and the html Document. I dont know where to start. Its really driving me nuts. Just help me position DIV below the image silder, I thought it was really simple to understand with the representation of that pic I gave out.

8

Well, I’ve already told you it isn’t easy, because we don’t know which bits are which in your image. Which bit is DIV HERE in your code? Read answers carefully and answer the questions we ask. Otherwise we can’t help. :slight_smile:

This would be much easier with a link.

9

I think you dont understand what Im asking? Do you know at all how can postion a image for example I dont really care. My only problem is getting anything below the image slider thats all, I tried everything messing with the styles.CSS on looking at codes to help me from the net.

10

I can’t help you unless you read my posts and answer the questions. :frowning:

11

A LINK TO WHAT?

12

To your website—what you’ve done so far—if it is online. That makes it much easier to help, and then we don’t have to ask questions that you won’t answer anyway. :slight_smile: A picture is not enough, just like you wouldn’t give a picture to a doctor and ask him what’s wrong with you. At the moment, it’s not easy to match what’s in the picture with the code you gave, hence my questions.

What you are asking is extremely simple, so don’t despair! You just need to help us to help you.

13

Is this answer your questions on what I’m looking for better? I seriously tried everything. For one thing of what I do know is the image slider is the about the first thing of info in the html.CSS. I just dont know how to get a image, table or anything below the image slider. Positioning something is my nightmare I dont understand.

14

OH THAT LINK BRB…IF I CAN FIND IT. In the mean time here is the image slider part

<section id=“bg”>
<section id=“overlay”></section>
<a href=“#” class=“nextImageBtn” title=“next”></a><a href=“#” class=“prevImageBtn” title=“previous”></a><img src=“images/gallery/Hankook Tire Ad 1 (Sample).jpg” id=“bgimg” /></section>
<div id=“preloader”><img src=“images/ajax-loader_dark.gif” width=“32” height=“32” alt=“” /></div>
<div id=“img_title”></div>
<div id=“toolbar”><a href=“#” title=“Maximize” onClick=“ImageViewMode(‘full’);return false”><img src=“images/toolbar_fs_icon.png” width=“50” height=“50” alt=“” /></a></div>
<div id=“thumbnails_wrapper”>
<div id=“outer_container”>
<div class=“container”>
<div class=“content”>
<div><a href=“images/gallery/Hankook Tire Ad 1 (Sample).jpg”></a></div>
</div>
<div class=“content”>
<div><a href=“images/gallery/BMW M3 GTR.jpg”></a></div>
</div>
<div class=“content”>
<div><a href=“images/gallery/Hankook Tire Ad 2 (Sample).jpg”></a></div>
</div>
<div class=“content”>
<div><a href=“images/gallery/Ninja Penguin.jpg”></a></div>
</div>
<div class=“content”>
<div><a href=“images/gallery/Super Soldier.jpg”></a></div>
</div>
<div class=“customScrollBox”>
<div class=“content”><div class=“content”> <a id=“popupBlogClose”><img src=“images/cross.png” width=“20” alt=“” /></a>
</div>
I can’t seem to get anything below the image slider.

15

The :nono: is IF I CAN FIND IT? OK I dont think I can find that sample template again. Oh gosh what to do?

16

Are you viewing your site on the internet, or are all the files (code, images etc.) just on your computer at this stage?

17

I found a template online and added everything like changing the images. I get the idea what each section is but positioning something below the image slider which seems to be the whole page at the moment I don’t know how to do; I don’t know where to start

18

I dont really care if its a table or image, etc my main issue is postioning something using the style.css so that I can get something below the image slider. Is that really difficult? If you want me tell you what each thing does I can do that.

19

I did try something but all I got was it being centered. Im just having a hard time make a space for some info or contents below the image slider.

ok lets say box for text as a div-how do I postion that. Really I just want something below the image slider thats all I need. Surely can you help with that?

20

Vivid-#13