Jump to content

ul positioning

lostprophetpunk

By lostprophetpunk
in CSS Help

 Share

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
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.