|
CSS - Sidebar Heading Creates New Line After Each Word
This is probably something extremely simple, but I'm the slow kid today...
I have a right-hand sidebar with a heading that is not behaving the way I want it to. After each word, it creates a new line, then the next word.... Any suggestions, as always, are appreciated. Here's the page: http://www.websimage.com/pcqtest/index.html Thanks guys/gals :) Similar TutorialsHi everybody. I am developing a site for classic games, and I am having trouble putting a navigation list on the left of my page and aligning a heading on the right with the top of the list border. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Choose a Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* <![CDATA[ */
body {
font-family: arial;
font-size: 12pt;
margin: 0;
padding: 0;
}
h1, h2 {
text-align: center;
}
ul {
margin: 0;
width: 25%;
height: 20em;
padding: 0;
border: .5em solid #00f;
list-style-type: none;
list-style-position: outside;
}
li {
background-color: #0ff;
padding: .5em 0 .5em;
}
li a {
background-color: #0f0;
height: 1em;
padding-left: .5em;
display: block;
font-weight: bold;
}
/* ]]> */
</style>
</head>
<body>
<h1>Game Index</h1>
<ul>
<li><a>Home</a></li>
<li><a href="dir.html" title="View the Directions">Directions</a></li>
<li><a href="gbc.html" title="View GameBoy/GameBoy Color games">GameBoy/GB Color</a></li>
<li><a href="gba.html" title="View GameBoy Advance games">GameBoy Advance</a></li>
<li><a href="nes.html" title="View Nintendo/Famicom games">NES/Famicom</a></li>
<li><a href="snes.html" title="View Super NES/Super Famicom games">SNES/Super Famicom</a></li>
<li><a href="ggear.html" title="View Game Gear games">Game Gear</a></li>
<li><a href="genesis.html" title="View Genesis MegaDrive games">Genesis/MegaDrive</a></li>
<li><a href="32x.html" title="View 32X games">32X</a></li>
<li><a href="psx.html" title="View PlayStation games">PlayStation</a></li>
</ul>
<h2>Select a page</h2>
<div id="pgdesc">Please make a selection from the list above</div>
<h3>Note: This page does not host ANY emulators. You have come to the wrong place if you are looking for an emulation site.</h3>
<div id="img">
<img id="atari" src="atari2600.jpg" alt="Atari 2600">
</div>
</body>
</html>
I realize that a list and a heading are both block-level elements, but I'm wondering... I'd rather not use absolute positioning since it doesn't work well with different resolutions. I'm just wanting it to work with 800x600 and 1024x768 resolutions. Can anybody help? Hi can anyone help me here, so I have a form on my page but after the </form> tag there is a big space below the last form element! Does anyone know some CSS i can use so I can get rid of this space? Thanks Hi guys. The strangest thing happened to me a few minutes ago. I tried centering the heading for my webpage using css in dreamweaver. When I looked it up on the browser to see whether it checked out right, to my horror, I discovered that the heading had disappeared. Could someone tell me what went wrong? thanx kaz. I'm trying to put together a CSS layout for a blog, and unfortunately my meager skills have crapped out on me. The page currently looks like this: http://prestonandtread.com/test/ I want it to be a full screen header while the footer is fixed and the width of the content. I thought I had it pieced together ok enough from different tutorials, but the top and left sides of the screen show background and the content isn't parking itself on the page correctly. Help me get this to where it should be! Code: <style type="text/css">
html,
body {
margin:0;
padding:0;
height:100%; /* 100 % height */
}
#header {
width: 100%;
height: 150px;
}
html>body #header {
position:fixed;
z-index:10; /* Prevent certain problems with form controls */
}
html>body #wrap {height:100%;} /* 100 % height */
#wrap {
width:479px;
margin:0 auto;
}
html>body #content-wrap {height:100%;} /* 100 % height */
html>body #content {padding:10px 10px 10px 10px;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */
#footer {
width:479px;
height:160px;
}
html>body #footer {
position:fixed;
bottom:0;
z-index:10;
}
html,
body {
background-color: #99CCFF;
}
#header {
text-align: center;
background-image: url(background.jpg);
background-position: top left;
background-repeat: repeat-x;
background-color: #99CCFF;
}
#footer {
text-align: center;
background-image: url(eyes.jpg);
background-color: #99CCFF;
}
#content-wrap,
#content {
background-color: #FFFFFF;
}
#footer a {color:#111;}
</style>
H all, I have a horizontal navigation bar which basically looks like this: Thing0 | Thing1 | Thing2 | Thing34 What I want to do is when I select a link to a new page, I'd like (using CSS) to have that link highlighted so that the user can see which page he is on. It's either that or hardcoding the name to each page...but since it's already in the Nav bar, I thought highlighting the link on the nav bar serves as a heading as well... Possible? Hi, I am trying to add a 8px border under my headings, but I only want it to go as far as the word. At the moment, it is going the whole width of my div container. This is what I have at the moment: PHP Code: #sidebar h2, #sidebar h3 { color: #444; font-size: 20px; font-weight: normal; margin: 0px 0 5px 0; padding: 0px 0 0px 0; border-bottom: 8px solid #FE9023; } Any help would be great. Thanks Is there a way I can have the checkbox to the right of the heading without stretching out the actual heading? It works fine when it is floated to the left http://www.iankovi.com/html_.html http://www.iankovi.com/css_.css I have 3 images that I would like to go togather to form a heading with rounded corners. I want to use 3 div tag to accomplish this. I am unable to get all 3 to lign up Code:
.rounded_STYLE{
background-color: #fff;
border: 1px solid BORDER_COLOR;
position: relative;
}
.rounded_STYLE{background:url('/images/chg.gif') repeat-x; }
.rounded_STYLE > .tl, .rounded_STYLE > .tr, .rounded_STYLE > .bl, .rounded_STYLE > .br{
width: 6px;
height: 24px;
position: absolute;
}
.rounded_STYLE > .tl{
background: url(/images/clg.gif) top left no-repeat;
}
.rounded_STYLE > .tr{
background: url(/images/crg.gif) top right no-repeat;
}
.rounded_STYLE > .tc{
background: url(/images/chg.gif) top right no-repeat;
}
.rounded_STYLE > .bl{
background: url(/images/bl.png) bottom left no-repeat;
}
.rounded_STYLE > .br{
background: url(/images/br.png) bottom right no-repeat;
}
Code: <div class="rounded_STYLE rounded"> <div class="tl"></div> <div class="tc"><table class="h"><tr><td class="l"></td><td>dddddddddd</td><td class="r">ssssssss</td></tr></table></div> <div class="tr"></div> ... contents of the block go here ... <div class="bl"></div><div class="br"></div> </div> Again I am new to CSS so bear with me here...I did search this forum before posting this... I am using a 3 column template, I am having some problems between the "#columns" with the heading <h*> of these columns. as long as each column has a differnt heading size all is well but if two columns have the same size heading I can't seem to be able to make them different colors I'm trying to figure out how to do something like this: Code: <h6>Lorem Ipsum Dolor <span>jan 10 2006</span></h6> And make the heading line up to the left side and the span on the right. It's close. It's lining up on the right but on the next line down rather than the same line. Take a look. Any bright ideas on why this is happening or how to fix it? Thanks. Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! I'm trying to have a sidebar to the right of my page content that extends the entire height of the container it is in. Code: .sidebar {
padding: 0px;
margin: 0px;
width: 150px;
height: 100%;
color: #999999;
background: #ffffff;
float: right;
border-top: none;
border-left: 1px solid #cccccc;
border-bottom: none;
border-right: none;
}
This is the code I am currently using, but it is only as tall as the contents of the div. I need the border on the left to extend the length of the container it is in. Any ideas? Thanks, Scott I have three questions. 1. I saw some site which cut if there is a wide picture on side bars, like it just show the part which is on the sidebar box if its wider it cuts the extra part like this site if you see the first picture on the side bar its bigger but it cuts the extra part (-http://dot21.blogspot.com/-) , i want to know how to do it. 2. When some people add backgrounds they write background-repeat:no-repeat whats the function of that code??? and what can i write instead of no-repeat?? 3. whats the function of this code (background-position:bottom left) ??? If you couldnt answer some i hope you answer the ones you know. I am working on a site in CSS (first time! Yay!) I am having one problem: there is a sidebar, and I have used spacer images to make the coloring go to the very bottom of the page (the links stop above that). HOWEVER: this is for my screen size, and I am worried that when people view it with a different screen/window size, they will have scroll bars, even though there is no content at the bottom. Is there any attribute that will make it just go right to the bottom? Thanx. Hi all, At http://www.bartlett-family.net/chrisbartlett/blog2/ I have recently changed the entire layout and replaced it all with new images, BG, etc. In IE... On the right, the sidebar and BLOG searchform are all a little too far to the right. I've been playing with it all for a while, but can't seem to move it to the left. I basically just need to shift the entire righthand contents about 10 or 20 px to the left, but I need to avoid that also changing the righthanded content on all the other pages. Actually, in FF it is correct, except that the BLOG searchform bar needs to com over about 10-20px to the left. Other than that, it's perfect. I need to make IE look like that! CSS file is at http://www.bartlett-family.net/chrisbartlett/main.css I'd appreciate any help. Thank you! Chris I'm a bit of a CSS newbie but I try. How do you get the sidebars' height to synchronize with the height of your content? I tried height=100% but it doesn't seem to work. If I put a lot of text in my content, it stretches down but the sidebars remain the same height, making the layout looking ugly. I don't want to have to press enter in my sidebars to match the content's height all the time! Here's my code: <style type="text/css"> #container { width: 100%; border: 1px solid gray; margin: 0px auto; } #banner { padding: 0px; background-color: #CDC8F1; } #content { padding: 5px; background-color: #FFFFFF; } #sidebar-a { float: left; margin: 0; padding: 0px; background-color: rgb(235, 235, 235); height: 100%; } #sidebar-b { float: right; margin: 0; padding: 0px; background-color: rgb(235, 235, 235); height: 100%; } #footer { clear: both; padding: 5px; background-color: rgb(213, 219, 225); } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } </style> Here's the main site: http: // anomalyrecords . net / index . html Here's the sto http: // anomalyrecords . net / catalog I am using a Zencart embedded template to wrap the main site design around Zencart.. This is working perfectly with a small remaining issue.. I am trying to synchronize the content placement of the sidebar items between Zen Cart and the rest of the site pages.. There is an ever so slight "shift" of the sidebar elements when you toggle bewteen the site pages and the store.. I've done a lot of tweaking and I'm fairly close, but I am at a COMPLETE loss how to put this to bed once and for all. I am hoping one of the CSS gurus here will see what I am clearly missing and guide me back to the light.. |
|||||||