CSS - How To Show Div Horizontally In A Loop

hello!
i'm trying to line up some text in my unordered list but haven't been able to figure out the CSS to make it look something like this: Code:

Accomplishments:

Job title		some job here
			another job
			yet another job

Duties			Designed company website.
			Proofread advertisements

Code:

<div id="resume">
	<h4>Accomplishments</h4>
	<ul>
		<li>Job title</li>
		<ul>
			<li>some job here</li>
			<li>another job</li>
			<li>yet another job</li>
		</ul>
			
		<li>Duties:</li>
		<ul>
			<li>Designed company website.</li>
			<li>Proofread advertisements</li>
		</ul>
	</ul>
</div>

so i tried doing stuff like Code:

div#resume ul li ul {
	position:absolute;
	top:-20px;
	left:50px;
}
div#resume ul li ul li{
	float:none
	position:relative;
}

i can't get the words, "Job title" to line up horizontally with the first list item, then have the list items listed vertically like in my example up top (i know it doesn't line up perfectly in here)
can someone correct my css??
thanks!
drGiggles

I am trying to make to div tags enclosed inside another div tag align horizontally. I am trying to do this without absolute positioning. See image below

Any ideas? Thank you.

dear all,

is it possible, using css or otherwise, to have a div on my page remian visible even when the page is scrolled hoizontally and the div goes out of view.

the div in question runs vertically down the left hand side of the page.

there are javascript menus i have seen that do this (albeit usually when scrolling vertically), but i wonder if it can be done with css.

many thanks, mark

I'm hoping I can get a bit of help addressing the display of an unordered list. I'm trying to view the list horizontally, and not vertically. Here is the code, and thanks in advance.

CSS --------------------------------
#pages {
margin-top: 12px;
float: right;
margin-right: 125px;
font: normal 14px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
color: #000;
}

#pages ul {
list-style-type: none;
margin: 0;
padding: .5em 0;
display: inline;
}

#pages li a {
display: block;
width: 1.5em;
height: 1.5em;
padding: 0;
text-align: center;
vertical-align: text-middle;
text-decoration: none;
}

#pages a:link, #pages a:visited {
margin: 0 10px 0 10px;
text-decoration: none;
color: #000;
}

#pages a:link#pagescurrent, #pages a:visited#pagescurrent {
border-bottom: 1px solid #000;
background: transparent;
color: #000;
}

#pages a:hover {
background-color: #949494;
color: #fff;
}



HTML --------------------------
<div id="pages">
<ul>
<li><a href="#" id="pagescurrent" title="next slide">1</a></li>
<li><a href="#" title="next slide">2</a></li>
<li><a href="#" title="next slide">3</a></li>
<li><a href="#" title="next slide">4</a></li>
</ul>
</div>

I haven't been able to find an answer to this anywhere and am hoping someone here can help.

I'm trying to space the text inside my navigation div so that it stretches evenly accross the div rather than being centered and having a bunch of space on either side.

Here's my current html...

Code:

<div id="navigation">
<p class="nav"><font color="#ffffff" face="verdana" size="3">
<img align="center" border="0" width="1" height="2" src="navdot.gif"><br />
Link 1 | Link 2 | Link 3 | Link 4 | Link 5
</font></p>
</div>

And my css...

Code:

#navigation {
width:750px;
height:30px;
background-image:url('navigation.gif');
background-repeat:no-repeat;
margin-top:0px;
}

Any help would be much appreciated. Thanks!


EDIT:

I think I got it figured out... well, it looks good on my end and I checked it across 6 larger browsers anyways. Here's the html now...

Code:

<div id="navigation">
<img align="center" border="0" width="1" height="2" src="navdot.gif">
<table align="center" border="0" width="750">
<tr><td width="150" valign="top">
<center><font color="#ffffff" face="verdana" size="3">Link 1</font></center>
</td><td width="150" valign="top">
<center><font color="#ffffff" face="verdana" size="3">Link 2</font></center>
</td><td width="150" valign="top">
<center><font color="#ffffff" face="verdana" size="3">Link 3</font></center>
</td><td width="150" valign="top">
<center><font color="#ffffff" face="verdana" size="3">Link 4</font></center>
</td><td width="150" valign="top">
<center><font color="#ffffff" face="verdana" size="3">Link 5</font></center>
</td></tr></table>
</div>

I used a 1x2px image to lower the text so it wasn't sitting right up against the top of the div, then I used a table inside of it and text without using paragraph tags.

There's gotta be a cleaner way of doing this though, isn't there? It looks great cross-browser, but I'm thinking there's gotta be a way to do this without a table.

hi.
I built a flash website with a resolution of 1920x1200.
The background of this web is 1920x1200 and my actual website with menu and stuff is in the middle of it with a resolution of 1024x768.
How can i upload this website and in the browser to shown always the middle of the flash?
I hope this is possible.
thanks!

I've been playing around with centering an absolutely positioned div and in this post is the method I've come up with. I've tested it in firefox and IE but am curious as to whether it works in opera and if there are better ways of doing it.

The div needs to be absolutely positioned because I'm using top & bottom to set it's height.

Here's the code

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>Center Test</title>
<style>
	body
	{
		margin: 0px;
		height: 100%;
	}

	.centered
	{
		position: absolute;
		border: 2px solid black;
		width: 196px;
		background: orange;
		margin: auto;
		top: 100px;
		left: 0px;
		right: 0px;
		bottom: 100px;
		min-height: 50px;		
		height: expression((document.body.clientHeight < 250 ? 50 : document.body.clientHeight - 200 ) + 'px');
		left: expression('auto');
		right: expression(((document.body.clientWidth < 200 ? document.body.clientWidth - 200: document.body.clientWidth / 2 - 100 )) + 'px');				
	}
</style>
</head>
<body>
	<div class='centered'>
		I'm a centered absolutely positioned div.
	</div>
</body>
</html>

I'm trying to tile a background image horizontally with a vertically tiled background image centered on the page. Being new to css and not particularly fluent in html (although more so than css), I have no idea how to go about doing this or if it is even possible. I do have both images working separately though. Help would be appreciated.

-alexa

I know vertical-align works great on one line of text, but I can't get this script to vertically (and horizontally) center two lines of text. What do I need to do change without changing the size of the div?

Code:

echo '<div style="float:left;width:171px;height:96px;text-align:center;display:table-cell;vertical-align:text-middle;background-color:yellow;">';
echo '<h1 >1/35 Scale House</h1>';
echo '</div>';

I'm very new to css positioning so this might be an easy question...


What I'm trying to do happens to position properly in IE6 and Firefox like so:

http://whythrowchip.go.dyndns.org/atx1.jpg


But it doesn't come out properly in IE 5.X , it looks like this:

http://whythrowchip.go.dyndns.org/atx2.jpg


It's know it's probably not an IE 5.X quirk, I guess I'm not supplying the right information to tell it to stay where I want it...


So what's the best way with CSS to make a row of images that lines up side by side and won't break to the next line?


Here is my code now as it stands (I put in three dots in a row in a couple places so there wouldn't be quite so much code pasted here):

Code:

from main page:

<div id="wrapper">
<div id="top_banners"><img src="logo.jpg" width="391" height="106" border="0"><img........</div>
<div id="top_menu">img src="menu1.jpg" width="150" height="20" border="0"><img.........</div>
<div id="content">
<p>Some filler text in here</p>
<p>Some filler text in here</p>
</div>
</div>




entire external style sheet:

body{
background-color:#666666;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}

#wrapper{
padding: 0;
margin-top: 10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
background-color: #EAEAEA;
border: 1px solid #000000;
width: 750px;
text-align:left;
}

#top_banners{
margin: 0;
padding: 0px;
height: 106px;
}

#top_menu{
margin: 0px;
padding: 0px;
height: 20px;
}

#content p{
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-left: 20px;
}

any help would be greatly appreciated


ps:the buttons in the second row are rollover gif images done with Dreamweaver, not that that should matter I guess

I'm trying to position the image below vertically center and horizontally left to no avail. Its horizontally left but centers the top of the image in the center of the page. What am I doing wrong?

<DIV style="position: absolute; top: 50%; left: 0px; border: none"><img src="images/right.jpg"></img></DIV>

Question title:
A 2 column layout, let only the second column scroll horizontally and let them both scroll vertically

Hello

I did try several idea's, but all failed. Then I did search the web but found a list of > 400.000 in google.

If someone is willing to tell me if it is possible and give me some directions, please do. Everything is welcome.

I got a list with 3 columns ( basically you could say I have only two columns because 2-3 could be concatenated to together, but they have a different style and justification, but I could live to start with a two column sample)

f.e
line 1 : value_one - ( some_text - value_two (right justified) )
line 2 : value_one - ( some_text - value_two (right justified) )
line 99:....
e.t.c

Column one has a fixed width of 32px.
'some text' can be longer then the wide available and value_two is with 3 spaces appended to column 2. I want that column one is fixed horizontal and that the second and the third column can scroll horizontally. Of course when there are more line's then the height of the container is should be posable to scroll vertically.

Finally I need the color behind column one be different then the column 2 and 3.

So what I did create is a container with two containers where the left one has a different colour then the right one and above those a container with the list. I have overflow on auto, so I get scroll-bars when necessarily.
But my problem is that when I scroll horizontally that my first column scrolls away to the left.

Basically my question is. How can I get a 2 column layout, let only the second column scroll horizontally ( first is locked in horizontal place ) and let them scroll both vertically?

...center the menus under my sample header banner? Thank you so much in advance!

Here is the page:

http://www.toplinepublishing.com/thisisasamplepage.html

and here is the css file:

http://www.toplinepublishing.com/dropdown.css

Thanks!

I'm pretty new to website design. I have a lot of programming experience (C++, Java, Python) but very little HTML/CSS experience.

I'm learning Django right now and am having trouble with my presentation. I'm hoping someone here can help me. I'm not sure how many here know Django so I'll try and skip over as much of that as I can.

I have a somewhat cookie-cutter CSS stylesheet I'm using so I can learn the environment. Below are snippets of my .html files and .css file.

base.html
Code:

<body>
    <div id="header">
        <div id="title">
            <div id="innertitle">
                {% block header %}{% endblock %}
            </div>
        </div>
    </div>

index.html
Code:

{% block header %}
    <h1>Signal Auctions</h1>
{% endblock %}

main.css
Code:

#header {
    margin:0 auto;
}

#title {
    padding:20px 20px;
    margin:0 auto;
    background:#333 url('images/titlebg.png') repeat-x scroll 50% 50%;
}

#innertitle {
    width:90%;
    margin:0 auto;
}

h1 {
    font-size:3em;
    padding-left:10px;
}

The problem is that I can't seem to get the image images/titlebg.png to display. I don't think it's an issue with pathing - I have other images in the same location that do display and I use the same method to call them.

Any thoughts?