|
CSS - Getting Desperate: Force A Central Viewpoint Using Css?
Hi all,
I made a recent post having trouble with a three column layout. Its not really had much attention however it wasn't really clear what i was asking. I wanted the two outside columns which only contained background images to be hiden in the background from the viewpoint. You can see my original post here, it includes two diagrams: http://forums.devshed.com/css-help-...ion-584924.html Now I have edited the layout to a single column and used the images on the sides as borders. I am still having the same problem so I am now wandering if I can force the browser to centre on the main column... This would leave overhang on ether side but its only images to make the site look better. Currently the site will look good using a wide resolution but on standard 1024x768 i want the centre of the column to be in the middle of the browser window on load. Can I do it with css? javascript or ajax? If in javascript or ajax could you please like me a tutorial or something as i have no ability in those categories! Any help is great. Cheers. Similar TutorialsI've been trying to centrally position my site pages in IE6 but despite using what seems to be the correct and accepted code (though perhaps not as the case may be), in IE6 the site pages keep aligning left. In IE7/8, FF etc. the alignment is centered and fine. The CSS I'm using is: /* global to standardise padding etc. */ * { padding:0; margin:0; border:0; line-height:0; } body { margin: 0; padding: 0; text-align: center; background: #ffffff; font-family:Arial, Helvetica, sans-serif; overflow:auto; height:100%; } #container { width: 1002px; background: #ffffff; margin: 0 auto; text-align: left; height:auto; } This CSS works fine (in IE6) on another site, i.e centers ok. Some articles talk about IE6 being funny with XHTML doctypes, so I swapped it for an HTML Transitional doctype- but that wouldn't work either. Any ideas as to how I can make the site centered properly in IE6? As far as I can tell the above code should work- but doesn't... I'm new to css and have been impressed with the way you can make style changes to a whole site by just altering one stylesheet (if you've set if up right). My question is, can css or xhtml be used to do that with content? I want to create a site with a Nav column floated on the left hand side of every page, but I'm worried I'd have to change hundreds of pages if i ever added/altered the column. Is there any way I can get every page to pull a table/other-xhmtl from one source, maybe by putting something in the stylesheet? Thanks. Hi all. I'm experiencing a strange error. I have a central content div acting as a wrapper for content to sit central to the page. The start of my CSS file is as follows: Code:
*
{
padding: 0;
margin: 0;
}
html
{
height: 100%;
margin: 0 0 1px 0;
}
body
{
height: 100%;
text-align: center;
}
#wrapper
{
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
width: 750px;
margin: 0 auto;
text-align: left;
padding: 200px 0 50px 0 !important;
padding: 200px 0 0 0;
}
Now, whenever I click to the right of this central wrapper div in Firefox, the whole of the content is selected. Anybody know why this is or how I can stop it? Ok here is the problem I have... I have 3 DIVS.... DIV 1 is a container the centers the contents DIV 2 I want to wrap tight around an image DIV 3 I want floating over the image say 100px from the top of DIV2 and 80px left. Currently DIV 2 is as wide as it's container (DIV1). and therefore DIV 3 isn't positioned over the correct part of the image. If I made DIV 2's position absolute then DIV 2 wraps the image tightly and correctly, but it now is shown on the far left of DIV 1, and I want it in the center. here is the HTML i have... <div id="div1" align="center"> <div id="div2"> <img alt="fddsffsd" src="image.jpg"/> <div class='div3'></div> </div> and here is my CSS... #div2 {position: relative} .div3 { position:absolute; width: 80px; height: 80px; top: 100px; left:20px; background-image: url(transparent.png); } CSS alignment urgent help needed I only have 10 hours to hand in this assignment that I have been stuck on for 4 days, the instructions are so unclear! I need to apply a style sheet to a web page given and the question I am stuck on asks me to align the image and words under it to the right. I do not understand what the command I am supposed to use to tell it to move to the right are. Here is the markup for it: <DIV class=figure> <IMG alt="A happy face" src="Ex2-1_files/happy.png"> <P class=caption> Figure 1: Doesn't this make you happy? </P></DIV> I know its align: right; But what is the whole command I put in textpad? Tahnks so much! Hi guys, I recently started adding content to my website (www dot web-share dot org dot uk) but I have noticed that when the content overflows on the page, the divs do not follow suit! I have tried every trick in the book which includes at least 3 hours worth of searching for solutions that involving clearing, removing floating and use min-width but none of them work! I am pulling my hair out on this one... Please help before I go bauld! CSS File: Source of http:// www dot web-share dot org dot uk/Themes/Default/Original.css HTML File: Source of http:// www dot web-share dot org dot uk/index.php?a=news&id=1 Thanks in advance, Chris Hello, I am a recent learner to css and web development. I am using a studiopress theme on a wordpress site. the site is erashowcaseweb THe problem i am having is with the nav bar. in firefox and ie 8 it looks great, in ie 7 it does not and unfortunately my boss uses 7 lol. the strange thing is when i edit this code. #menu-default-menu { position: relative; top: -80px !important; left: 0pxpx; padding: 0 0 0 30px; to say 0px it aligns in ie 7 perfectly and ruins it in firefox and ie 8. ty for any help at all. i can't post any urls or attack files but if anyone has the time to pm me i will gladly send u the stylesheet and link. Hi, I have an issue that has been tormenting me to the sharp rusty end of my chair. I set the indexTableHeader class to width:100%, and in IE6 it does what i want, it doesnt leave the edge of the screen, but in FF 2.0 it Always extends out by the width of the div element beside it, making it nearly useless. In IE7 it is even worse, it clears the left div, and goes to the bottom. The goal is to have what it looks like in ie 6. I know the css code is pretty long, but if someone could give it a couple looks and let me know what they think that would be awesome. I really appreciate it. Thanks-Dave Code: <?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<style type="text/css">
html {
padding:0;
margin:0;
border:0;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
}
body {
padding:0;
margin:0;
border:0;
font-size:12px;
background-color: #A2C4EA;
}
#head {
margin:0;
width:100%;
height:60px;
background-color: #A2C4EA;
background-image: url(/holimages/hein75b.gif);
background-position: left;
background-repeat: no-repeat;
}
/*
*/
/* Nav menu, */
#submenu {
text-align: center;
background-color:#566d96;
width:100%;
}
#submenu ul {
display:block;
list-style-type: disc;
background-repeat: repeat-x;
margin:0;
}
#submenu ul li {
display: inline;
padding-right: 20px;
}
#submenu ul li a {
text-decoration: none;
font-size:12px;
color: #fff;
}
#submenu ul li a:hover {
text-decoration: none;
color: yellow;
}
#submenu h2 {
color:white;
font-size:12px;
display:inline;
margin-right:12px;
}
/*Guide bar */
#guide{
font-size:12px;
background-color:#fff;
width: 100%;
text-align: left;
margin:0;
}
#guide ul {
list-style-type: disc;
background-repeat: repeat-x;
margin:0;
}
#guide ul li {
display: inline;
padding-right: 0px;
}
#guide ul li a {
font-size:12px;
text-decoration: none;
color: blue;
}
#guide ul li a:hover {
text-decoration: none;
color: red;
}
#logo{
float:left;
position:fixed;
}
#cit_nav{
right:0;
float:right;
}
/* Scroll Div */
#ScrollDiv {
height: 410px;
overflow: auto;
}
/* this is the overall style of the content pane */
/* Content pane */
#content {
font-size:14px;
background-color:#A2C4EA;
overflow:auto;
}
#content h2{
font-weight: lighter;
font-variant: normal;
font-size: 20px;
background-color:#333366;
color:#fff;
margin:0;
padding:3px;
padding-left:20px;
}
#content h3{
font-weight: lighter;
font-variant: normal;
font-size: 14px;
background-color:#333366;
color:#fff;
margin:0;
}
#content a{
text-decoration:none;
}
#content a:visited{
text-decoration:none;
}
/* Contact us Page */
#contact-us{
background-color:#DDDDFF;
}
/* this holds anyhting that is regarded as "call next" */
#content-container{
width:100%;
}
/* */
/* Index Page */
/* This is the table that holds the headings */
#headerWrapper{
}
.indexTableHeader {
background-color:#566d96;
display: table;
width:100%;
}
/* This is the cell that holds the Headers for the Index Page */
.
/* This is the table that holds the content #566d96 #DDDDFF*/
.indexTable {
width:100%;
background-color:#566d96;
display: table;
font-size:14px
}
#sub-menu2 {
font-size: 12px;
float:left;
width:170px;
border-right:2px none #000;
border-bottom:2px none #000;
padding-left:10px;
padding-bottom:20px;
display:block;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
color: #FFFFFF;
background-color:#566d96;
border-top-style: solid;
border-left-style: none;
border-top-width: 1px;
border-top-color: #FFFFFF;
}
#sub-menu2 h2 {
font-weight: lighter;
font-variant: normal;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-top-color: #99cc00;
border-right-color: #99cc00;
border-bottom-color: #99cc00;
border-left-color: #99cc00;
font-size: 20px;
background-color:#566d96;
}
#sub-menu2 a:link {
font-size: 12px;
text-decoration: none;
color: #CCCCCC;
}
#sub-menu2 a:visited {
color: #CCCCCC;
font-size: 12px;
}
#sub-menu2 a:hover {
font-size: 12px;
color: #FFFFFF;
}
.indented{
margin:0 0 0 -1.5em;
}
/*----LEGACY CSS */
pre {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title>
rere</title>
<style type="text/css">
.accessibility
{
display: none;
}
</style>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
</head>
<body>
<div id="wrapper">
<form id="holform" name="holform" action="HeinOnlineForm">
<div id="head">
<a href="#skipto" title="Skip repetitive navigation links" accesskey="2"><span class="accessibility">Skip repetitive navigation links</span></a>
<div id="logo">
</div>
<div id="cit_nav">
<table border="0" cellpadding="0" cellspacing="0"
>
<tr><td valign="top">
Select RERE <br/>
<select name="collection"
onchange="collectionselecter(this.options[this.selectedIndex].value);"
style="font-size:9pt;width:225;font-weight:bold;color:#006633">
<option value="journals"
>
DDDDDD/option>
</select>
</td>
<td valign="top">
</td>
</tr>
</table>
</div>
</div>
<div id="container">
<div id="submenu">
<ul>
<li>
<a href="/front/x"
class="nav"
title="Home">
Home
</a>
</li>
<li><a href="Search?collect"
class="nav"
title="Display search options for this collection">
Search
</a></li>
<li> <a href="SearchH"
class="nav"
title="Review Previous Searches">
Search History
</a></li>
<li>
<a href="Help?collectio"
class="nav"
title="Display Help for this collection">
Help
</a></li>
<li><a href="ContactInfo"
class="nav"
title="Use e-mail to send comments to HeinOnline Technical Support">
Contact Us
</a></li>
<li>
<a href="#" onclick="toggleDiv()"
class="nav"
title="Printer Friendly Version">
Printer Friendly
</a>
</li>
</ul>
</div>
<a name="skipto"></a>
<div id="content">
<div id="guide">
<ul>
<li>
<a href="">trtrtrtrtrt >> </a>
</li>
<li><a href="#">wewewewewe >> </a> </li>
<li> <a href="#"> - wewewewewew
>> </a> </li>
</ul>
</div>
<div id="sub-menu2">
<h2>Navigation</h2>
<ul class="sub-list">
<li class="sub-list-element">Quick Locator</a></li>
<li class="sub-list-element">Simple Search</a></li>
<li class="sub-list-element">Advanced Search</a></li>
<li class="sub-list-element">
</ul>
<div align="center"><img src="../../images/narablue.gif" width="120" height="122" >
</div>
</div>
<div id="content-container">
<h2 >Titles
</h2>
<div id="headerWrapper">
<table class="indexTableHeader" >
<tr >
<td width="50%" align="center" border="0" >
<h3>Number </h3>
</td>
<td width="50%" align="center" border="0" >
<h3>Name </h3>
</td>
</tr>
</table>
</div>
<div id="ScrollDiv">
<table width="100%" class="indexTable" cellspacing="1" cellpadding="2">
<tr >
<td width="50%" align="center" style="height:0px;">
</td>
<td width="50%" align="center" style="height:0px;">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</form>
<div id="foot">
</div>
</div>
</body>
</html>
Hi, Opened a new post as its better. I am trying to do things for smaller devices such as mobiles and tablets. If I add something very simple in the stylecheat to the @media query such as background color of the body using this: @media screen and (max-device-width: 2000px){ body { width:766px; margin:auto; background-color:#00FF00;}} Or if I do this wich seem to have the same affect: @media screen and (max-width: 2000px){body { width:766px; margin:auto; background-color:#00FF00;}} I dont get the green background on the body, I only get it on my pc, on my samsung mini, on blackberry I dont get the green background and using adobe advice central on samasung tab and ipone 4 and maybe some more I get it, on the rest no background color. This is so strange, I imagen all have greater width than 2000px. If I set to max-width to 500 px I dont get it on my samsung mini either...????? it have a very small resolution, only 240 x something. I just dont get it I dont have any background color declared except the one in the @media query Hey everyone! This is my first post here as I am bordering on throwing my laptop out of the window so I'm in dire need of some help! My problem is - I have a background image which consists of 2 columns and a main content area. I want this to be tiled vertically and to fill the width of the page (but not repeat.) But no matter what I try it will just hugely overflow the browser horizontally and so I'm only seeing the left column and half of the center part. This is a scaled down version of the image I'm using: ht tp://ww w.frontier-music.co.uk/example2.jpg This is driving me absolutely mental as I just expected there to be a quick fix for keeping the image within the browser size! This is the sort of thing I'm after: ht tp://ww w.frontier-music.co.uk/example.jpg If anyone could offer any sort of help I would be hugely greatfull as I'm having a bit of trouble getting my head around all of this code! ht tp://ww w.teddyzoo.com - This is a pretty similar background effect to what I'm after, the based my background image around theirs to try and work out what they had done! Many thanks in advance Josh EDIT - Sorry about the broken links, I wasn't allowed to post working ones. Hello, I have two columns, one is on the left and another in the middle (center). Left column is where I want it to be, central column is also aligned properly, however, it is below left column. I want it to be on the same level as left. See here see how it got below ? It is XHTML validated and CSS is fine too (some background color warnings). Plz help me to make central column go up. Thanks. I heve three images - all in their own div - across the page. I want these images centered. I then want text UNDER these images. As you can see in my page, the text is actually starting to the right of my images. Why is this happening? http://69.89.31.86/~gentryfo/ Thanks. how can i keep these 2 divs i have on the same line, i tried min-width for the div they are in and it works perfect but IE doesn't support it, i even tried a extra div to use as a spacer but IE seems to make keep them on the same line even though there is already enough space for it, here is the html i'm using Code: <div id="ms_all" ><!-- Start all mapserver --> <div id="ms_main_map_div"> <input alt="Map" id="ms_main_image" type="image" name="mapa" src="map_img.phtml?[data_to_img]" /> </div> <div id="ms_side_bar" > <!-- A bunch of form stuff --> </div><!-- End Side Bar --> </div><!-- End all mapserver --> and here is the css Code: #ms_all {
/*padding:5px;*/
height:610px;
min-width:810px;
position:relative;
}
#ms_main_map_div {
padding:2px;
left:5px;
float:left;
/*top:2px;*/
width:600px;
}
#ms_main_image {
cursor:crosshair;
width:600px;
height:600px;
}
#ms_side_bar {
right:2px;
float:right;
padding-top:20px;
/*top:10px;*/
padding:2px;
width:200px;
/*clear:both;*/
}
i want the 'ms_main_map_div' and the 'ms_side_bar' to be on the same line, but the 'ms_side_bar' stuff keeps jumping to the bottom of the page if it doesn't fit in the window, so does anyone know of a way to get IE to display this the right way or maybe make IE support the min-width thing, preferably keeping my CSS and XHTML valid Here is a snippet of the DIV I am working on. Regardless of what I put in between the h-2 tags, I would like the box to be 320 pixels wide instead of only being as wide as the text within the h-2 tags. I have ended up padding the h-2 content with blank spaces to widen it out. There must be a cleaner solution? Code: <div id="box_header"> <h2>Make This 320 pixels wide?</h2> </div> Code:
#box_header h2{
color:#359764;
line-height: 35px;
font-size: 14px;
padding: 5px 5px 5px 5px;
border: double #5B85C5;
display:inline;
font-weight: bold;
width: 320px;
}
I have a div like this: Code: <div class="image_box"> <img src=""> </div> I have a border and background-color going on w/the div, but I want it to only be as wide as the image. It is stretching as wide as the screen. How do I force it shrink down and only be as big as the image that is inside of it? This should be simple, I just don't know how to do it. Thanks. I hate it when browsers jump when the scrollbar appears on a longer page. Is there any way to force scrollbars to stay on the page on all browsers? Hello all. I have a site with 2 columns. I would like the left column to be the same height as the right column. The right column will always be longer than the left. Here is what I have so far: 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="GENERATOR" content="vi" />
<title>My page </title>
<style type="text/css">
* { font-family: verdana, arial, helvetica, sans-serif; margin: 0; padding: 0; }
body { background: #0b89b8; margin: 0; padding: 0; }
#container { width: 100%; }
#header {
width: 100%;
color: #ffffff;
font-size: 2em;
padding: 0.5em 0;
text-indent: 0.5em;
background-color: #00ff00;
} /* end #header */
#header p { padding-left: 10%; }
#side_menu {
background-color: #ff0000;
float: left;
margin: 0;
width: 10%;
color: #ffffff;
} /* end .side_menu */
#side_menu ul { list-style-type: none; border-top: 1px solid #ffffff; }
#side_menu ul li { border-bottom: 1px solid #ffffff; padding: 0.5em 0; text-align: center; }
#side_menu ul li a { color: #ffffff; text-decoration: none; }
#content { width: 90%; float: left; background: #ffffff; }
.content_container { clear: both; padding-bottom: 1em; }
.content_header_even, .content_header_odd {
width: 100%;
background-color: #69bfde;
color: #595441;
padding: 0.5em 0;
text-indent: 1em;
} /* end .content_header_even, .content_header_odd */
.content_header_odd { background-color: #b4e8fb; }
.content_graph { float: left; padding-right: 1em; }
.content_graph_info, .content_info { padding: 1em; margin: 1em; }
.content_graph_info { float: left; }
</style>
</head>
<body>
<div id="container">
<div id="header"><p>Header</p></div>
<div id="side_menu">
<ul>
<li><a href="index.php">Home</a></li>
</ul>
</div>
<div id="content">
<div class="content_container">
<p class="content_header_even">Subheader</p>
<div class="content_info">
<p>Number: 34906607<br />
Percent: 21.84%<br />
Size: 1.085<br />
Total size : 11.78%</p>
</div>
<div class="content_graph_container">
<div class="content_graph_info">Text a. </div>
<div class="content_graph_info">Text b.</div>
</div>
</div>
</div>
</div>
</body>
</html>
Any thoughts? Pretty Common issue.... I think... I need my div's background to go all the way down the page.... even on small pages!! Here is an example... Sign Up Page I have some code like this: Code:
<a href="">My Link is Long</a>
<a href="">My Link is Longer Than Yours</a>
The second link is coming at the end of a line and is breaking to the next line in the middle. Is there a way to force the entire <a> tag to go to the next line if it wont all fit on the current line? something like Code:
a {
behavior-when-getting-split-lines: do-not-split;
}
Suppose this: ----- Header Div Content Dive Footer Div ----- Is there a way to force a footer div to the bottom of the window even when there isn't enough content above to fill the window? Maybe some way to "pad" the content div? |
|||||||