Jump to content

ul positioning

lostprophetpunk

By lostprophetpunk
in CSS Help

Recommended Posts

lostprophetpunk Regular Member

lostprophetpunk

Posted
Posted

I am coding a design I have created...but I have come across a problem.

 

When I put my slideshow in a div...it makes the image display at the very top left of the screen, and the numbers that navigate the slideshow at the very bottom left of the screen...I just cannot figure out why it is doing this. It is the same code as I used this for another design and it worked fine...it just seems to playing up on this.

 

Before you ask, the CSS is on the same page but I removed it in this post so I could post the two different parts.

 

If anyone could help that would be awesome.

 

CSS Code...

* { margin: 0; padding: 0; }
body { font: normal 12px arial; background-color: #dfdede; }
p { padding-bottom: 20px; }
.slideshow a, a:visited { color: #037ca3; text-decoration: none; font-weight: 900; }
.slideshow a:hover { color: #000000; text-decoration: none; }
.info { width: 280px; text-align: left; float: right; margin-right: 10px; margin-top: 10px; font-family: georgia; font-size: 9pt; text-align: right; }

.slideshow { position: relative; background: #fafafa; width: 700px; height: 240px; border: 1px solid #e5e5e5; margin-bottom: 20px; }
.slideshow img { position: absolute; top: 3px; left: 3px; z-index: 1; background: #ffffff; }
ul.recentlist { position: absolute; bottom: 8px; left: 4px; list-style: none; z-index: 2; }
ul.recentlist li { margin: 0; padding: 0; display: inline; }
ul.recentlist li a, ul.recentlist li a:visited { display: block; float: left; padding: 4px 8px; margin-right: 1px; color: #000000; text-decoration: none; cursor: pointer; }
ul.recentlist li a:hover, ul.recentlist li a:visited:hover { background: #999999; color: #ffffff; }
ul.recentlist li a.current { background: #037ca3; color: #ffffff; }

#wrapper { width: 900px; margin: auto; }
#mwrapper { width: 900px; margin: auto; }
#header { width: 100%; height: 100px; background: transparent url(images/headerbg.png) repeat-x center center; }
#logo {
width: 71px;
height: 75px;
background: transparent url(images/logo.png) no-repeat center center;
margin-top: -3px;
margin-left: 10px;
}
#search {
float: right;
margin-top: -9px;
}
.search {
background-color: #665c4f;
border: 1px solid #94897d;
padding: 2px;
color: #ffffff;
font-family: verdana;
}

#nav {
width: 100%;
height: 26px;
background: transparent url(images/navbg.png) repeat-x center center;
}
#nav a:link { display: block; height: 26px; width: 90px; font-family: trebuchet ms; font-size: 12pt; color: #bbad9d; text-decoration: none; text-align: center; }
#nav a:visited { display: block; height: 26px; width: 90px; font-family: trebuchet ms; font-size: 12pt; color: #bbad9d; text-decoration: none; text-align: center; }
#nav a:active { display: block; height: 26px; width: 90px; background-color: #dfdede; font-family: trebuchet ms; font-size: 12pt; color: #000000; text-decoration: none; text-align: center; }
#nav a:hover { display: block; height: 26px; width: 90px; background-color: #dfdede; font-family: trebuchet ms; font-size: 12pt; color: #000000; text-decoration: none; text-align: center; }

.searchbutton {
background-color: #28221b;
border: 1px solid #94897d;
padding: 1px;
color: #ffffff;
font-family: verdana;
}

#main {
float: left;
width: 578px;
height: 800px;
padding: 10px;
background-color: #dfdede;
border-right: 1px solid #afafaf;
border-left: 1px solid #afafaf;
}

#sidebar {
float: right;
width: 279px;
height: auto;
padding: 10px;
background-color: #cbcbcb;
border-right: 1px solid #afafaf;
border-bottom: 1px solid #afafaf;
}

#footer {
clear: both;
width: 880px;
margin:auto;
height: 20px;
text-align: center;
padding: 10px;
font-family: verdana;
font-size: 10pt;
color: #000000;
}

#post-top {
width: 580px;
font-family: georgia;
font-size: 24pt;
color: #000000;
}

#post-middle {
width: 580px;

}

.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
.row div {

}
.row div.one {
width: 580px;
padding: 10px;
}
.row div.two {
width: 278px;
background: #cbcbcb;
border: 1px solid #afafaf;
border-top: none;
padding: 10px;
}

 

HTML Code...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Portfolio Design</title>
</head>
<body>



<div id='header'>
<div id='wrapper'> 
  <div id='search'>
   <form name='search' target=''>
    <input class='search' type='text' />
    <input class='searchbutton' type='submit' value='Search' />
   </form>
  </div>
  <div id='logo'></div>
</div>
</div>
<div id='nav'><a href='index.php'>Home</a></div>

<div id='mwrapper'>

<div class="equal">
<div class="row">
<div class="one">

<div class="slideshow" style='margin: auto; clear: both; margin-top: 90px;'>
<ul class="recentlist">
  <li><a class="current" href="#slide1">1</a></li>
  <li><a href="#slide2">2</a></li>
  <li><a href="#slide3">3</a></li>
  <li><a href="#slide4">4</a></li>
  <li><a href="#slide5">5</a></li>
  <li><a href="#slide6">6</a></li>
  <li><a href="#slide7">7</a></li>
  <li><a href="#slide8">8</a></li>
  <li><a href="#slide9">9</a></li>
  <li><a href="#slide10">10</a></li>
</ul>
<p id='slide1'>
  <img src="images/designs/design1.png" alt="Design 1" />
   <span class='info'>
    <span style='font-size: 20pt;'>Design 1</span><br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed venenatis ipsum. Nunc id nulla orci, eget mollis purus. Proin vulputate suscipit dignissim. Sed euismod dui a lectus molestie lobortis. Integer tempus lobortis erat, sit amet mollis velit porta a. Nulla quis convallis eros. Morbi sodales porttitor arcu, in interdum nisl laoreet et.<br />
<br /><br />
<a href='#'>View Design</a>
   </span>
</p>
<p id='slide2'>
  <img src="images/designs/design2.png" alt="Design 2" />
   <span class='info'>
    <span style='font-size: 20pt;'>Design 2</span><br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed venenatis ipsum. Nunc id nulla orci, eget mollis purus. Proin vulputate suscipit dignissim. Sed euismod dui a lectus molestie lobortis. Integer tempus lobortis erat, sit amet mollis velit porta a. Nulla quis convallis eros. Morbi sodales porttitor arcu, in interdum nisl laoreet et.<br />
<br /><br />
<a href='#'>View Design</a>
   </span>
</p>
<p id='slide3'>
  <img src="images/designs/design3.png" alt="Design 3" />
   <span class='info'>
    <span style='font-size: 20pt;'>Design 3</span><br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed venenatis ipsum. Nunc id nulla orci, eget mollis purus. Proin vulputate suscipit dignissim. Sed euismod dui a lectus molestie lobortis. Integer tempus lobortis erat, sit amet mollis velit porta a. Nulla quis convallis eros. Morbi sodales porttitor arcu, in interdum nisl laoreet et.<br />
<br /><br />
<a href='#'>View Design</a>
   </span>
</p>
<p id='slide4'>
  <img src="images/designs/design4.png" alt="Design 4" />
   <span class='info'>
    <span style='font-size: 20pt;'>Design 5</span><br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed venenatis ipsum. Nunc id nulla orci, eget mollis purus. Proin vulputate suscipit dignissim. Sed euismod dui a lectus molestie lobortis. Integer tempus lobortis erat, sit amet mollis velit porta a. Nulla quis convallis eros. Morbi sodales porttitor arcu, in interdum nisl laoreet et.<br />
<br /><br />
<a href='#'>View Design</a>
   </span>
</p>
<p id='slide5'>
  <img src="images/designs/design5.png" alt="Design 5" />
   <span class='info'>
    <span style='font-size: 20pt;'>Design 5</span><br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed venenatis ipsum. Nunc id nulla orci, eget mollis purus. Proin vulputate suscipit dignissim. Sed euismod dui a lectus molestie lobortis. Integer tempus lobortis erat, sit amet mollis velit porta a. Nulla quis convallis eros. Morbi sodales porttitor arcu, in interdum nisl laoreet et.<br />
<br /><br />
<a href='#'>View Design</a>
   </span>
</p>
<p id='slide6'>
  <img src="images/designs/design6.png" alt="Design 6" />
   <span class='info'>
    <span style='font-size: 20pt;'>Design 6</span><br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed venenatis ipsum. Nunc id nulla orci, eget mollis purus. Proin vulputate suscipit dignissim. Sed euismod dui a lectus molestie lobortis. Integer tempus lobortis erat, sit amet mollis velit porta a. Nulla quis convallis eros. Morbi sodales porttitor arcu, in interdum nisl laoreet et.<br />
<br /><br />
<a href='#'>View Design</a>
   </span>
</p>
<p id='slide7'>
  <img src="images/designs/design7.png" alt="Design 7" />
   <span class='info'>
    <span style='font-size: 20pt;'>Design 7</span><br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed venenatis ipsum. Nunc id nulla orci, eget mollis purus. Proin vulputate suscipit dignissim. Sed euismod dui a lectus molestie lobortis. Integer tempus lobortis erat, sit amet mollis velit porta a. Nulla quis convallis eros. Morbi sodales porttitor arcu, in interdum nisl laoreet et.<br />
<br /><br />
<a href='#'>View Design</a>
   </span>
</p>
<p id='slide8'>
  <img src="images/designs/design8.png" alt="Design 8" />
   <span class='info'>
    <span style='font-size: 20pt;'>Design 8</span><br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed venenatis ipsum. Nunc id nulla orci, eget mollis purus. Proin vulputate suscipit dignissim. Sed euismod dui a lectus molestie lobortis. Integer tempus lobortis erat, sit amet mollis velit porta a. Nulla quis convallis eros. Morbi sodales porttitor arcu, in interdum nisl laoreet et.<br />
<br /><br />
<a href='#'>View Design</a>
   </span>
</p>
<p id='slide9'>
  <img src="images/designs/design9.png" alt="Design 9" />
   <span class='info'>
    <span style='font-size: 20pt;'>Design 9</span><br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed venenatis ipsum. Nunc id nulla orci, eget mollis purus. Proin vulputate suscipit dignissim. Sed euismod dui a lectus molestie lobortis. Integer tempus lobortis erat, sit amet mollis velit porta a. Nulla quis convallis eros. Morbi sodales porttitor arcu, in interdum nisl laoreet et.<br />
<br /><br />
<a href='#'>View Design</a>
   </span>
</p>
<p id='slide10'>
  <img src="images/designs/design10.png" alt="Design 10" />
   <span class='info'>
    <span style='font-size: 20pt;'>Design 10</span><br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed venenatis ipsum. Nunc id nulla orci, eget mollis purus. Proin vulputate suscipit dignissim. Sed euismod dui a lectus molestie lobortis. Integer tempus lobortis erat, sit amet mollis velit porta a. Nulla quis convallis eros. Morbi sodales porttitor arcu, in interdum nisl laoreet et.<br />
<br /><br />
<a href='#'>View Design</a>
   </span>
</p> 
</div>

    </div>
<div class='two'>

</div>
</div>
</div>
<div id='footer'>Design and Code &#169; 2009 Matt Hobbs, All Rights Reserved</div>

</body>
</html>

Link to comment
https://forums.phpfreaks.com/topic/169595-ul-positioning/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.