|
CSS - Links Bar Moving
Hi Whenever I shrink my window in Ie, the Links bar stays in the same place. You can view this at
http://www.trowbridge-wiltshire.co.uk/newtrowbridge Code:
body {
background:#CBDEF5;
margin: 1em auto;
width: 600px;
}
#leftcontent {
margin: 1em auto;
position: absolute;
top:100px;
left:250px;
width:100px;
background:#CBDEF5;
}
#centercontent {
margin: 1em auto;
width:500px;
background:#87B4EB;
color:#ffffff;
border:2px solid rgb(75,123,211);
margin-left: 140px;
margin-right:20px;
}
#advertising {
margin: 1em auto;
width:500px;
background:#87B4EB;
color:#ffffff;
border:2px solid rgb(75,123,211);
margin-left:140px;
margin-right:20px;
}
#banner {
background:#CBDEF5;
height:40px;
padding:5px;
}
p,h1,pre {
margin:0px 10px 0px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
background: #c3c8c3; }
#button ul {
list-style: none;
margin: 0;
padding:0;
border:;
}
#button li {
border-bottom: 1px solid #CBDEF5;
margin: 0;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border: 1px solid #1958b7;
background-color: #87B4EB;
color: #fff;
text-align:center;
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border: 1px solid #1958b7;
background-color: #4B7BD3;
color: #fff;
}
Similar Tutorialsok basically this is an accessibility thing, i dont want users (disabled) to read the links first page after page and i have read that i can place the links at the bottom but style them with css so they appear on top. i am trying to do something like this but my page just gets messed up if i move the links to below. page layout: Code: <div> //overall <div>//top> <div>side Links/menu <div>contents <div>footer Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; }
Code: <style type="text/css">
<!--
div.wrapper {
width: 400px;
margin: 0 auto;
}
div.menu {
color: blue;
white-space: pre;
text-align: right;
font-size: 90%;
margin: 200px 500px 200px 100px;
}
div.submenu {
color: blue;
white-space: pre;
margin: 150px 300px 500px -10px;
font-size: 70%;
line-height: 180%;
}
body {
background: white url("Images/background.jpg") no-repeat top scroll;
text-align:justify;
margin:200;
padding:0;
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
}
-->
</style></head>
<body>
<div class="wrapper">
<div class="menu"><span><button style="width:100;height:30" onClick="window.location='XXXXXXX.htm'">MASTER</button></span> <span><button style="width:100;height:30" onClick="window.location='XXXXXXX.htm'">MASTER</button></span> <span><button style="width:200;height:30" onClick="window.location='XXXXXXX.htm'">MASTER</button></span> <span><button style="width:200;height:30" onClick="window.location='XXXXXXX.htm'">MASTER</button></span>
<div class="submenu">
<span> <button style="width:200;height:30" onClick="window.location='prva.htm'">title lef</button><br /></span>
<span><button style="width:200;height:30" onClick="window.location='XXXXXXX.htm'">title lef</button><br /></span>
<span><button style="width:200;height:30" onClick="window.location='prva.htm'">title lef</button><br /></span><br /></span>
<span>title lef<br /></span>
<span>title lef<br /></span>
</div>
</body>
</html>
here is code. please save code with .html and open with browser. Give me sugestions how to move links easily left or right [ write trick if know] thank you in advance loverbugs I developed http://technology-sleuth.com by testing in Firefox and Opera as I am on linux and at the time didn't have access to IE. All is fine in those browsers. However, in IE I see that when the page get too narrow, instead of narrowing the center div, it moves it below the rest of the page. As the center div is the one with the content, this is unacceptable. How can I prevent this? This site as you see it now was 'shortened' so that the center div does not get pushed down in the 800*600 screen resolution. So you will need to make the browser window very narrow to see the effect. But the problem is still visible. Thanks in advance. Dotan Cohen Old story...looks good in IE but, different in FireFox: link to page My goal is to have all the footer infor appear below the content...not wrap up. Any help would be greatly appreciated. Thanks! I've attached a *.gif picture of how my site looks. It is completely coded in CSS. The footer just lies underneath the content, and I want to be able to move the footer to the bottom of the page. Below the sidebar. Does anybody know how to do this? Any help would be appreciated. Thank you! I am trying to make a make my most popular table here http://www.pearl.ru/isdunyasi/defaultinner.asp?Section=4 look like http://www.pearl.ru/isdunyasi/newtable.gif. With the codes beow everything is fine expect the headline area. I need to move headline background 10px left to make it right. Code:
#innersubcontent {
float:right;
width:300px;
height:450px;
background:#d7d7d7;
}
#innersubcontentpopular {
float:left;
width:280px;
margin: 0px 10px 0px 10px;
height:100px;
}
#innersubcontentpopular .top {
width:290px;
height:28px;
margin: 0px -10px 0px 0px;
background:#FFFFFF url(images/sidebarcontent_top.gif) no-repeat;
}
#innersubcontentpopular .middle {
width:280px;
height:100px;
background:#FFFFFF url(images/sidebarcontent_middle.gif) repeat-y;
}
#innersubcontentpopular .bottom {
width:280px;
height:8px;
background:#FFFFFF url(images/sidebarcontent_bottom.gif) no-repeat;
}
#innersubcontentpopular h1{
padding:0px;
margin-bottom:5px;
font-size:14px;
font-weight:bold;
color:#aaaaaa;
}
#innersubcontentpopular h2 {
padding:5px 2px 5px 2px;
font-size:12px;
font-weight:bold;
color:#aaaaaa;
}
#innersubcontentpopular p {
padding:2px;
margin:0;
font-size:12px;
}
Hey All, Firstly, I apologise if this has already been answered. The search feature wasn't working for me, and to be frank, I didn't know what to search either! Secondly, I'm developing a site with Joomla and am implementing my own design. I'm a bit of a CSS newbie, well un-experienced at least, and fail at being able to pick cross-browser bugs. Thus I have turned to the masters for help! Ok - So this is what it should look like: BrowserShots in IE8 And this is what it shouldn't look like: BrowserShots in IE7 What it appears to be doing, to me, is pushing the logo div to the next line, as the pillmenu div is floated to the left. In the process of doing this, it stuffs up the margins and pushes the whole layout out. On a second level, it appears to me that the background image is off centred, which COULD be BrowserShots being funny, but I'm not sure? Live site is at: techmonkeys.com.au I would love it if anybody could help me identify what bugs are occuring here. Or if it's just an error on my behalf, which it sure could be! I also highly appreciate any advice, tips, or criticism you want to provide. But not about my menu! That's not done :P Thanks in advance. Cheers, Chris I have a css menu navigation that I'm having problems with. I don't know why the menu bar is being pushed about 40px to the left. I want it to go further left. The total size of the menu bar is 960px. Please help me out... Thanks, 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"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Easy Living by Lisa Marie- Professional Organization and Design</title> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="content"> <div id="header"> <img src="images/logo.jpg" alt="easy living by lisa marie- organizing your life so you can enjoy it" width="554" height="197" /> <ul id="nav"> <li id="home"><a href="index.html">Home</a></li> <li id="lisa"><a href="about.html">About Lisa Marie</a></li> <li id="services"><a href="services.html">Services</a></li> <li id="benefits"><a href="benefits.html">Benefits</a></li> <li id="testimonials"><a href="testimonials.html">Testimonials</a></li> <li id="contact"><a href="contact.php">Contact</a></li> </ul><!--end of nav--> </div><!--end of header--> <div id="slideshow"> <img src="images/slide1.jpg" alt="" class="active" /> <img src="images/slide2.jpg" alt="" /> <img src="images/slide3.jpg" alt="" /> <img src="images/slide4.jpg" alt="" /> <img src="images/slide5.jpg" alt="" /> <img src="images/slide6.jpg" alt="" /> </div><!--end of slideshow--> </div><!--end of content--> </div><!--end of wrapper--> </body> </html> Here is the CSS styling... Code: body {
background-image: url(../images/background.jpg);
margin: auto;
}
#wrapper {
width: 1054px;
background-color: #ffffff;
color: #000000;
border: 1px white;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 30px;
padding-bottom: 20px;
}
h1 {
font-family:"Apple Chancery", Serif;
font-weight: normal;
font-size: 32px;
text-align: left;
color: #60b6d7;
}
h2 {
font-family:"Apple Chancery", Serif;
font-weight: normal;
font-size: 26px;
text-align: center;
color: white;
}
h3 {
font-family:"Apple Chancery", Serif;
font-weight: normal;
font-size: 28px;
text-align: left;
color: #60b6d7;
}
h4 {
font-family:"Apple Chancery", Serif;
font-weight: normal;
font-size: 20px;
text-align: left;
color: #000000;
}
#header {
text-align: center;
}
#nav {
height: 50px;
width: 960px;
background-color: #60b6d7;
margin: auto;
list-style: none;
display: block;
overflow: hidden;
}
#nav li {
margin-top: 10px;
float: left;
width: 160px;
}
#nav li a:link {
color: white;
font-family: "Apple Chancery", Serif;
font-size: 25px;
text-decoration: none;
height: 50px;
}
#nav li a:hover {
color: black;
font-family: "Apple Chancery", Serif;
font-size: 25px;
text-decoration: none;
height: 50px;
}
#nav li a:visited {
color: black;
font-family: "Apple Chancery", Serif;
font-size: 25px;
height: 50px;
}
Hi, Hoping someone has had this same issue before.... I have a simple page separated with two images mainly. The main image that sets the initial design is the background image and then a footer image. To allow the page to be fluid I have set a content div to sit between the two and expand the color of the page to create the illusion of one flowing design. Nothing too strange there... In fire fox the design looks great however in IE7 it looks as though the content div has been shifted by 1-3px to the left... Please see these two screen shots... Fire Fox: (members.cox.net/~jeaddy/FF_ok.jpg) IE7: (members.cox.net/~jeaddy/IE7_broke.jpg) I have tried using a display:inline; within the content div and it fixes the issue but it causes the min-height setting to be ignored and actually messes up a few other things as well. I have linked a copy of the pages generated html (members.cox.net/~jeaddy/html.txt) and the css file (members.cox.net/~jeaddy/default.css). I apologize for how long it is. If anyone has ideas/suggestions i'm open to anything as this one little issue is about to drive me Note: My account is new otherwise I would have made the url's clickable... Forum rules Hi I recently moved a site "http://www.nikkilamann.com/index.php" and after moving it the CSS is all messed up (style.css) The scroll frame box is not centred anymore and the scrollbar is supposed to be white in colour and there is some funny box next to "fashion" on navigation. Site is totally messed up after move. Does anybody know what could cause this? So I am trying out using CSS instead of TABLES. I am also changing to XHTML, so I figured I'd do both since my site holds a very strict skeleton. Here's my first question. Is this transformation proper, and are their other properties/values I should include to facilitate all browsers best Quote: <table border="0" width="770" cellspacing="0" cellpadding="0"> <tr> <td width="770" height="5" bgcolor="#CCCCFF"></td> </tr> <tr> <td width="770" align="center">test here</td> </tr> </table> switched to CSS of this Quote: #footer_cell { width: 770px; } footer_bar { width:70px; height:5px; background:#CCCCFF } footer_copyright { width:770px: text-align:center; and the code as Quote: <div class="footer_cell"> <div class="footer_bar"></div> <div class="footer_copyright">copyright me</div> </div> Ok, let me know what I missed or messed up. Thanks. Hi - I have been using xhtml coding for most of my web projects this year, thankfully they have been pretty simple. I have a new one, the client has requested it be xhtml compliant. I was not consulted during the design phase, so i have been give the task of programming a very table centric layout. Can all designs be rendered with div's instead of tables? I have a diagram of the structure of a template page and I am not sure how to go about tackling it. Do i start with each individual section? I just need a little push and confimation the below layout is doable in css/divs... Thanks hi i go problem the pictures keeps moving towards right is there way to fix these? the movie pictures so they stay all on left side forever. IE is at it once again.... it is doing VERY odd things.... On the following page, when you roll over the title/type/date and description sections for the related article, it changes backgrounds... this is done mostly with CSS and the smallest amount of javascript (only onmouseover/mouseout is used). It works great elsewhere, but not in IE... any suggestions at what it may be?? THE LINK My problem is getting very frustrating been trying to fix it for ages, and its probably something simple but if i dont fix it soon my laptops going to find a river very quickly. I have a site using CSS(duh!) and when i highlight over a link on the site some of my text moves around. then when i highlight over my javascript drop down menu it moves back. its very strange. heres the link to one of the worse pages for jumping. http://zephyr-wgtn.co.nz/newsite/eventS.aspx Any help much appreciated. Regards Dan Hi. This is template I copied just for fun in joomla http://www.worldoffashion.info/test/. I wonder how to move text from border as you can see in gray boxes text is near border. I tried padding but then it makes whole box larger Hi! I just floated left my navigation menu, and it caused my page title and breadcrumbs to move over to the immediate right of that (because it is also floated left)... Wondering if anyone could tell me the proper way of getting it back to the left side as it was before. Thanks. Drew EDIT: Here's the link, whoops! http://drewclifton.com/healthwise/?page_id=1667 Hi. I have recently 'finished' my website, currently at http://www.aslo50.dsl.pipex.com I have positioned the images of the album cover absolutely (http://www.aslo50.dsl.pipex.com/music.htm) but they are jumping about when the browser window is resized. They are also overlapped on browser windows with different screen resolutions. The Navigation Buttons are also stacking and overlapping in this manner although they are just positioned in flow. I would be really grateful for any help you can offer. Thanks |
|||||||