|
CSS - Scrolling Horizontally Not Vertically?
hi
i would like to display some pictures on my site, and be able to scroll horizontally, i have simply listed the pictures in the xhtml and my css cose is below. at the moment the pictures still stack up vertically so the horizontal scroll bar cannot be used. can anyone help? thanks div.galleryscroll { height: 125px; width: 694px; position: absolute; top: 540px; left: 280px; z-index: +1; overflow-y: hidden; overflow-x: scroll; } Similar Tutorialsis it possible to center something vertically inside a container without the use of tables? I know you use text-align to center horizontally, but what is used for vertical alignment? vertical-align doesn't work. PHP Code: <div style="width:100% height:100%; text-align:center;"> <!-- code goes here --> </div> thanks goran. Hey, I've been doing a fair amount of research on centering a page vertically and horizontally with CSS, and before I begin constructing my page, I thought I'd get some input from you guys. Basically, the page is going to look like this Any advice would be greatly appreciated. Thanks! 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 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'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> 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 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? having trouble centering a web site what i want to precisely position elements in my site and i thought that i could put all the elements in to one div tag and make that centered. i can center it but the problem is when the browser is resized smaller that the content the site remains centered and center starts diserpering off the left edge. what i want it to do once resized smaller is for a horizontal scroll bar to appear and for content not to disappear on the left edge of the screen. i have half achieved this but now my content dose not stay in the main div check out my example the "center1" div should appear inside the top light gray box but it dose not! http://www.thehopeandanchor.net/nypd/layertest.htm the 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> <title>redeem file</title> <style type="text/css"> <!-- div#center1 { /*position:absolute;*/ margin:0px auto; top:10px; width:600px; height:47px; background-color: #cccccc; } div#center2 { position:absolute; left: 50%; margin-left: -300px; top:80px; width:600px; height:47px; background-color: #cccccc; } div#insidebit { position:absolute; left:50px; top:10px; width:64px; height:26px; background-color: #eeeeee; } --> </style> </head> <body> <div id="center1"> <div id="insidebit">center1</div> </div> <div id="center2"> <div id="insidebit">center2</div> </div> </body> </html> I need help aligning the flash block to the right of my site to the one on the left so that they are both on the same line. gpostal.net is the website so you can see the flash blocks. See how one is at the bottom right? I'm trying to get that to the top right and closer to the one on the left. Hi I want to show database information with php for different items using <div> tags in manner that each run of the loop display three div in a row (horizontally) and then start a new row if more data is available, each div should show a thin border around it. for this I have written the following code PHP Code: while($row=mysql_fetch_array($res)( { ?> <div text-align: center; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;> <?php echo "item id: " . $var . "<br>"; echo "price: " . $var . "<br>"; echo "dealer: " . $var . "<br>"; ?> </div> <?php } //end loop ?> but it displays each row in a new line. please visit this http://www.dev411.com/typo/themes/?pp=8;pg=5 just to see an example of what I am talking about. I wonder if anyone could help in this? thanks 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. 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 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 am aware of how difficult it is to vertically align text etc using pure css but what is hte best way to do it. For example i want to put some text slap bang into the middle of the screen. Thanks Hey everyone, my first time exploring page layouts using CSS and I'm having a few problems. I have a simple page with separate Header, Navigation and Content divs stacked on top of each other inside of a wrapper div (used to align the three to the center), with another div for the Footer placed below everything else. Here's how it looks now: Code: <html> <head> <title>CSS Divisions</title> <style type="text/css"> #Wrapper { width:800px; margin-left:auto; margin-right:auto; text-align:left; } #Header { width:800px; height:120px; background:#FC6;} #PNav { width:800px; height:40px; float:left; background:#CCC; } #Content { width:800px; height:400px; float:left; overflow:hidden; background:#FFC; } #Footer { width:100%; height:80px; float:left; text-align:center; background-color:#FC6; } </style> </head> <body> <div id="Wrapper"> <div id="Header">Header</div> <div id="PNav">Navigation</div> <div id="Content">Content</div> </div> <div id="Footer">Footer</div> </body> </html>
Ideally what I want is for the page to look exactly how it is, but with the footer stretching from the bottom of the Content div, down to the bottom of the wherever the user's browser has loaded; basically to fill the vertical remainder of the screen. I've tried setting the footer height to 100%, but that forces the page to extend vertically, and I fumbled around with about a dozen other techniques not really knowing what I was doing, and I've had no luck so far. Any help would be greatly appreciated! |
|||||||