|
HTML - Horizontal Layout Help
Greetings Folks!
So I put this site together based on a website's site layout and well, let's just say is not as nice. I did, tho, do the best I could without using jquery scrollpane which the original site looks like they used. Here's the site I did http://www.universalpartnership.org I'd like to be able to make the page jumps smoother and have the particular sections come to the center rather than somewhere on the page. I'd really, really like to make the vertical scrolling on the whole page go away, it's seriously annoying. And is there a way to change the scroll bar to be smaller? Also, (hehehe) I had to add a table with nothing in it to get the width to be nice and big. I couldnt figure out how to increase the width POST starting the page and all. It'd be nice to dump that and do it the right way. I would have kept the table but I could get it to be flush against the top and the left. I guess the major issues I have is being able to add code post building the page in design view. I just dunno where things go and I've been reading article after article and it's been a lost cause so far. So, if you are kind and so inclined to offer some support by way of help, indicating where code goes would be awesome and a great learning curve for me! I've added the page as an attachment in case any whizzes can hook it up! thanks much in advance! peace rooster Similar TutorialsIm working in a HTML page using also JSP (Java). In the HTML code I have a large string of information (horizontal string) that does not fit in the screen. I also would like to have this info aligned in colums. I am using <TABLE>. The problem with <TABLE> is that it put all the information in one screen, breaking the string in two parts, instead of having an horizontal scroll bar and using this scroll bar to see al the info. Thanks, John Morales Hi. I'm making a page for a company. And I'm having trouble regarding an iframe, ONLY comes to place when viewed in Explorer. I'm so tired of finding problems ONLY because of IE. This is the second time so far, spent an entire week just because of some minor code problems showing up ONLY when viewed in IE. Anyway, my trouble is an irritating horizontal scroll showing up at the bottom of the one iframe. The URL is http://www.risington.no/dynamikk I have checked that the contents of the page linked to the iframe ain't wider than the iframe itself. Actually, I've tried to even set half of the size it is now, and still I'm getting the scrollbar at the bottom. I'm running out of posibilities here, necer experienced such big a problem on behalf of this. I had thos problem a couple of times before, but allways solved by subtract about 15 px width off the content page shown in the iframe because of the VERTICAL scrollbar showing up, which actually is quite important that it does. But not this time, no! Here's a cut-out of how my iframe tag looks like: Code: <iframe src="news.html" width="677" height="478" align="middle" frameborder="0" marginheight="0" marginwidth="0" name="mainframe" scrolling="auto" title="Dynamikk"></iframe> It's inside a <td colspan="2"></td> with no static width or height. Any help = Grateful I dont know how to explain it better but how do i do this http://www.target.com/Movies-MMB/b/r...ode=1259488011 so at the bottom of my page i can add 4 to 5 different products and allow for those left and right buttons show more... any direction would help thanks With the "horizontal rule", is it possible to write over it? The reason I am asking is because I saw an example of a horizontal rule, and it reminded me of a footer. Are they used for footers if some cases? Cheers guys (and I apoligize for all the questions). I'm new to HTML/XHTML, so thanks for helping me understand the spacing rules that are applying he HTML: Quote: <div id="nav"> <ul> <li><a href="index.html">Main</a></li> <li><a href="resume.html">Resume</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="contact.html">Contact and Networking</a></li> </ul> </div> CSS: Quote: #nav { height: 37px; text-align: center; background-color: #858585; } #nav ul { margin: 0; } #nav li { display: inline; } #nav a { padding: 9px 12px 9px 12px; line-height: 38px; border-left: 1px solid black; } Between every link in my horizontal navigation menu, there is a space (which I don't want). In order to get rid of this space, I have to change my HTML code to... Quote: <div id="nav"> <ul> <li><a href="index.html">Main</a></li><li><a href="resume.html">Resume</a></li><li><a href="portfolio.html">Portfolio</a></li><li><a href="contact.html">Contact and Networking</a></li> </ul> </div> ...which in turn sacrifices readability. This all seems very counter-intuitive to me, since I was under the impression that I could format my code readably without having to worry about its presentation. I can only guess that my line breaks (textual line breaks, not actual <br /> tags) are being interpreted as white space within my <ul>. If this is the case, my only other option would be to display my <li>s as block elements with zero margins, float them, and then use margins to push them to the middle (which is all WAY uglier than being able to center them with text-align). This is how I understand what's going on. If I am correct, does this mean I'm forced to sacrifice readability for functionality? Hi, How can I create a row of images with a horizontal scrollbar? I'd be really grateful to your help! Regards Rain Lover Hi: I'm a newbie and am designing my 1st screen using Transistional HTML. Without using CSS, is there a simple way to draw a horizontal line across the screen ? TIA -Mel Smith Hi everyone, http://www.eveningtweed.com/laura At the above site, I've got a div called 'work' which needs to contain a long line of images which I want users to horizontally scroll through using the DIV scrollbar. I've looked through countless forum posts and solutions on Google but nothing works. Can anyone tell me why this won't scroll horizontally and how to achieve it? Current CSS for the DIV: Code: .work {
border:0px;
height:350px;
overflow-x:scroll;
overflow-y:hidden;
width:100%;
}
Thanks in advance, Jez. How do I make two links next to each other? Here's the site: http://celticsinsider.webs.com Where it says "Submit An Article", I would like a couple links next to it. Here's my html code and css code: Code: *{
margin:0px;
padding:0px;
}
img{border:0px;}
html{
width:100%;
height:100%;
background-color:#030303;
}
body{
width:869px;
padding:0 65px;
margin:0 auto;
height:100%;
position:relative;
}
html > body{
height:auto;
min-height:100%;
}
#top{
width:869px;
height:70px;
background-image:url(images/menu_bg2.gif);
background-position:top left;
background-repeat:repeat-x;
}
#menu{
width:869px;
height:70px;
background-image:url(images/top_bg.gif);
background-position:bottom left;
background-repeat:no-repeat;
}
#menu ul{
background-image:url(images/menu_bg.gif);
background-position:bottom left;
background-repeat:no-repeat;
height:42px;
width:768px;
margin:0 auto;
}
#menu li{
height:34px;
float:left;
list-style-type:none;
padding:8px 9px 0 13px;
}
#menu li a{
display:block;
height:34px;
float:left;
}
.but1{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but1.jpg);
}
.but2{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but2.jpg);
}
.but3{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but3.jpg);
}
.but4{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but4.jpg);
}
.but5{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but5.jpg);
}
.but6{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but6.jpg);
}
.but7{
background-position:top left;
background-repeat:no-repeat;
background-image:url(images/but7.jpg);
}
.but1:hover,.but2:hover,.but3:hover,.but2:hover,.but4:hover,.but5:hover,.but6:hover,.but7:hover{background-position:bottom left}
#active{
background-position:bottom left
}
#header{
width:869px;
background-image:url(images/photo.jpg);
background-position:top left;
background-repeat:no-repeat;
}
.home{
padding:240px 0 0 0
}
.gallery{
width:852px;
background-image:url(images/footer_bg.gif);
background-position:top left;
background-repeat:no-repeat;
padding:13px 0 8px 17px;
background-color:#0F0F0F;
overflow:hidden
}
.gallery div{
float:left;
margin:0 5px 0 0;
}
.gallery div p{
display:block;
background-color:#1F1F1F;
border-bottom:1px solid #383838;
line-height:16px;
text-align:center;
width:65px;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#5E5E5E
}
#wrapper{
width:869px;
padding:6px 0 90px 0;
background-image:url(images/footer_bg.gif);
background-position:top left;
background-repeat:no-repeat;
overflow:hidden;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#9A9A9A;
}
.style1{
margin:8px 0 0 0;
}
#content{
width:869px;
background-color:#090909;
overflow:hidden;
padding:0 0 28px 0;
background-image:url(images/wrapper_bg.gif);
background-position:bottom left;
background-repeat:no-repeat
}
.title{
padding:11px 0 0 0;
height:26px;
margin:0 0 8px 0;
background-image:url(images/title_bg.gif);
background-position:top left;
background-repeat:no-repeat;
}
#left{
width:442px;
float:left;
padding:0 24px 0 17px
}
#left div{
padding:15px 0 0 0;
width:221px;
float:left;
}
#left p{
width:192px;
padding:13px 0 0 0
}
.more{
display:block;
color:#AE2A00;
text-decoration:underline;
margin:2px 0 0 0
}
.mo visited{text-decoration:underline}
.mo hover{text-decoration:none}
.block{
width:368px;
padding:12px 0 10px 1px;
overflow:hidden
}
.block img{
float:left;
border:1px solid #383838;
margin:0 11px 0 0
}
.block span{
background-color:#000000;
line-height:14px;
color:#29705B;
padding:0 15px 0 5px;
margin:2px 0 8px 0;
display:block;
float:left;
}
.block p{
float:left;
width:200px;
}
#footer{
width:869px;
position:absolute;
bottom:0px;
height:77px;
background-color:#0F0F0F;
background-image:url(images/footer_bg.gif);
background-position:top left;
background-repeat:no-repeat;
font-family:Tahoma, sans-serif;
color:#9A9A9A;
font-size:10px;
}
#footer ul{
width:768px;
height:13px;
background-image:url(images/bot_bg.gif);
background-position:top left;
background-repeat:no-repeat;
width:768px;
height:13px;
margin:20px auto 15px auto;
text-align:center
}
#footer ul li{
display:inline;
}
#footer ul li a{
color:#9A9A9A;
text-decoration:none;
margin:0 9px;
}
#footer ul li a:visited{text-decoration:none}
#footer ul li a:hover{text-decoration:underline}
#footer p{
width:869px;
text-align:center;
font-size:11px;
}
#footer p a{
color:#CE3200;
text-decoration:none
}
#footer p a:visited{text-decoration:none}
#footer p a:hover{text-decoration:underline}
#about{
width:412px;
float:left;
padding:0 21px 0 17px;
}
.pic{
margin:17px 15px 18px 15px;
border:1px solid #383838
}
#about p{
width:375px;
margin:0 0 15px 15px
}
#history{
width:404px;
float:left
}
#history p{
width:375px;
padding:18px 0 0 0
}
#nav {
font-family: Verdana, Arial, sans-serif;
font-size: small;;
padding:5px;
margin:0px;
background-color:#090909;
color:#fff;
border-bottom: 1px solid #090909;
}
#nav a {
color:#fff;
text-decoration:none;
}
#nav a:hover {
text-decoration:underline;
}
I am wanting to do a horizontal scrollbar like this http://felicefawn.com/fashion.htm with pictures inside. The pictures won't stay side by side, they go underneath therefore creating a vertical scrollbar. Anyone know how to do this? Help much appreciated!! hi all, im having a bit of a problem displaying a list horizontally, and its really getting a bit frustrating. as far as i can see, it should be a case of using display:inline on the li tags, but so far no luck. ive included my css below: Code: #navigation ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
#navigation ul li
{
display:inline;
}
#navigation ul li a
{
display:block;
width:90px;
height:30px;
color:#fff;
text-align:center;
text-decoration:none;
}
#navigation ul li a:hover
{
background-color:#EF4252;
}
and my html: Code: <td id="navigation"> <ul > <li> <a href="contact.html" >Contact Us</a> </li> <li> <a href="wwd.html" >What We Do</a> </li> </ul> </td> any help would be appreciated. thanks Can't tell you how many hours I've spent trying to do this, but it's a lot! An example page with the issue can be found here.. http://www.funkimunkibadges.co.uk/geekybadges-c-79.html I'm basically trying to change it to be a horizontal scroll instead of vertical. Top image here is what happens when I expand the data in the central box. The lower image is when is as it is now.. http://www.flickr.com/photos/creepyd/5710648997/ I'm not really sure where the problem lies, my guess is the html. The piece of CSS which creates the vertical scrollbar is here.. Code: #indexProductList.centerColumn {
width: 630px ;
height: 680px !important; /*CENTER SCROLLBAR HEIGHT*/
overflow:auto;
padding:0px;
If I change the 'auto' above to 'hidden', the scrollbar goes away, so it's definitely that controlling it. The php which creates the 5 columns is here.. If I change it to + 0.5, the last one will wrap to the next line, and not create a horizontal scrollbar. However if I change it so each column is more than 100%, I get a horizontal scrollbar?! Code: $col_width = floor(100/PRODUCT_LISTING_COLUMNS_PER_ROW) - 0.5; Thanks so much for any help. Here's the html for the central table with the normal vertical scrollbar in place.. HTML Code: <td valign="top">
<!-- bof breadcrumb -->
<div id="navBreadCrumb"> <a href="http://www.funkimunkibadges.co.uk/">Home</a> ::
Careers & Hobbies
</div>
<!-- eof breadcrumb -->
<!-- bof upload alerts -->
<!-- eof upload alerts -->
<div class="centerColumn" id="indexProductList">
<h1 id="productListHeading">Careers & Hobbies</h1>
<div id="indexProductListCatDescription" class="content"> </div>
<form name="filter" action="http://www.funkimunkibadges.co.uk/index.php?main_page=index" method="get"><label class="inputLabel">Filter Results by:</label><input type="hidden" name="main_page" value="index" /><input type="hidden" name="cPath" value="113" /><input type="hidden" name="sort" value="20a" /><select name="alpha_filter_id" onchange="this.form.submit()">
<option value="0">Items starting with ...</option>
<option value="65">A</option>
<option value="66">B</option>
<option value="67">C</option>
<option value="68">D</option>
<option value="69">E</option>
<option value="70">F</option>
<option value="71">G</option>
<option value="72">H</option>
<option value="73">I</option>
<option value="74">J</option>
</select>
</form>
<br class="clearBoth" />
<div id="productListing">
<div id="productsListingTopNumber" class="navSplitPagesResult back">Displaying <strong>1</strong> to <strong>134</strong> (of <strong>134</strong> products)</div>
<div id="productsListingListingTopLinks" class="navSplitPagesLinks forward"> </div>
<br class="clearBoth" />
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2628"><img src="images/Be Nice Im In Charge Of The Pills.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2628"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=3165"><img src="images/Best Scrabble Player Ever.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=3165"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2663"><img src="images/Bowling Cutie.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2663"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2662"><img src="images/Bowling Cutie Black.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2662"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2664"><img src="images/Bowling Pins And Ball Red.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2664"></a><br /><br /></div>
<br class="clearBoth" />
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2665"><img src="images/Bowling Princess.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2665"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2666"><img src="images/Bowling Rocks.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2666"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2667"><img src="images/Bowling Strike.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2667"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2672"><img src="images/Camera On Blue.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2672"></a><br /><br /></div>
<div class="centerBoxContentsProducts centeredContent back" style="width:19.5%;"><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2673"><img src="images/Camera On Pink.jpg" alt="" width="120" height="120" class="listingProductImage" /></a><br /><br />£0.79<br /><a href="http://www.funkimunkibadges.co.uk/index.php?main_page=product_info&cPath=113&products_id=2673"></a><br /><br /></div>
<br class="clearBoth" />
<div id="productsListingBottomNumber" class="navSplitPagesResult back">Displaying <strong>1</strong> to <strong>134</strong> (of <strong>134</strong> products)</div>
<div id="productsListingListingBottomLinks" class="navSplitPagesLinks forward"> </div>
<br class="clearBoth" />
</div>
</div>
</td>
I want to create a website that both Firefox and IE will recognize my code where there is no vertical scroll. The page only scrolls horizontally. The site I am creating is for a portfolio and horizontal scroll is best for vieiwing such. Do I need to use CSS to make this work or how can I acheive this? Thank you Chaser I'm trying to get horizontal scrolling of images that scroll behind a block of fixed text. I attached a mock up. And here is one of the staging pages if you want to see the html/css. I'm trying to accomplish a "layered" effect of image gallery and text. As you can see in the mockup, the block of text has a transparent background to help this effect. I tried to do a hiden overflow for the horizontal navigation container and have the block of text be a container with a fixed position. But its a mess. Any advice on achieving this? **Edit: This site has the same kind of architecture I'm looking for - http://csaustodesign.com/work_ns.html I can't seem to figure out how this person did it though, their source code is a mess... Hello, I have a demonstration site set up at: http://www.sikhfaith.com/demo The site works perfectly in Firefox 2.0. However, in Internet Explorer 7.0, there's a huge blank space on the right side of the page which causes IE to display a horizontal scrollbar. I haven't been able to pinpoint what is causing this. Any help would be appreciated. Thank you. http://knexinnovation.net/store/ I thought that if your background is wider than the window, it won't create a scrollbar to show the full image. Or is this not the case? Currently it has a horizontal scroll bar for 1024px users. The footer image is actually the body { } background, aligned to the bottom center. I just can't figure out how to do this. On this site he http://mindfulmoneycoaching.com/ the horizontal buttons hover a darker blue. A few of them drop down to show more menu links and when those are hovered a little orange bullet point is shown. However when hovering over the dropped down links I'd like the parent link above to stay that dark blue color. Anyone know how to do that? Hi: I'm laying out a 7-col table with only vertical borders between the columns (i.e., rules="cols"). This shows correctly. However, after every 'n' rows or so, I wish to have a horizontal line across all seven columns of the table. Although I am a 'basic' CSS user (very basic), in this table I want to use 'plain vanilla' html or xhtml for this 'horizontal line' or border across the width of the table Thanks for any hints ! -Mel Smith -Mesa, Arizona I am working on a site with a CSS horizontal drop down menu. On my Contact Us page I added an office locations map that uses java script and links to MapsAlive.com. My menu only has one drop down category, but when testing it, the drop down stops where the office location map starts. Is there a way to make it so the menu is always on top? I am using Dreamweaver, so the menu is part of my template. Here is my code for the menu: <div id="outside"> <ul id="navigation-1"> <li><a href="index.html" title="Home" target="_self" >Home</a> </li> <li><a href="" title="Services" target="_self" >Services</a> <ul class="navigation-2"> <li><a href="air.html" title="Air" target="_self" >Air</a></li> <li><a href="altenergy.html" title="Alternative Energy" target="_self" >Alternative Energy</a></li> <li><a href="civil.html" title="Civil Engineering" target="_self" >Civil Engineering</a></li> <li><a href="environmental.html" title="Environmental" target="_self" >Environmental</a></li> <li><a href="health.html" title="Health & Safety" target="_self" >Health & Safety</a></li> <li><a href="solidwaste.html" title="Solid Waste" target="_self" >Solid Waste</a></li> </ul> </li> <li><a href="presentations.html" title="Presentations" target="_self" >Presentations</a> </li> <li><a href="aboutus.html" title="About Us" target="_self" >About Us</a> </li> <li><a href="careers.html" title="Careers" target="_self" >Careers</a> </li> <li><a href="contactus.html" title="Contact Us" target="_self" >Contact Us</a> </li> </ul> </div> Here is my code for the office locations map: <div id="mainContent" align="center"> <link rel="stylesheet" type="text/css" href="http://tour.mapsalive.com/3854/page1.css" /> <script type="text/javascript" src="http://tour.mapsalive.com/3854/mapsalive.js"></script> <script type="text/javascript">maClient.path="http://tour.mapsalive.com/3854/";</script> <script type="text/javascript" src="http://tour.mapsalive.com/3854/page1.js"></script> </div> I have attached a screenshot of how it looks in a browser so you can see what it is doing. I would appreciate any advice from anyone who can give me direction. Thanks, Tatter I don't know how this got here, but I don't have any absolute width defined anywhere, I'm viewing the site on 1280x800 resolution, and I have a horizontal scroll bar... have a look if you want. www.bkriegtech.net Thanks for any help... |
|||||||