I have gone from this:
www.gofar.org
To this:
www.gofar.org/homepagetest.html
I have tried to remove the one block seperator on the far right end of the nav bar. I am lost.
I tried putting it in a div but what I really need to do is make the background image (green) go from the left side of the header to the edge of the right side.
Just do not know how.
here is the css
ul#saturday{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:normal;
background:transparent url("bgOFF.gif") repeat-x top left;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
border-bottom:4px solid #336666;
overflow: hidden;
color: #003;
text-align: center;
z-index: auto;
}
I even tried putting it in a table but it never fits across the entire header.
This may help.
/* Remove left padding from header */
.twoColFixLtHdr #header {
padding: 0 10px 0 0px;
/* padding: 0 10px 0 20px; OLD - Delete this line*/
}
/* Add left padding to ul */
ul#saturday {
padding-left: 10px;
}
/* Remove border bg from last anchor */
ul#saturday li:last a {
background-image: none;
}
Also, Read/watch these on chrome inspector tools,
you can edit the CSS live in the browser which
makes things easier for beginners and experts alike.
https://developers.google.com/chrome-developer-tools/docs/videos
you can try instead of using width:100%, change it to the width of the white container. That way it would go all the way across. Width:100% only sets it to as large as the content.
Related
I have some body and page settings that are keeping everything nicely centered in my site, which is my objective.
However, I also have some text in the center, which currently is sprawled along the entire width of the page when it's long. Every time I try to set a css width property, like max width, it decides to go haywire with it's positioning, and land itself far left of the center.
I guess there's some issue with my overall page center positioning, and setting any type of width property to a div.
EX of things nicely centered, but sprawling text: https://www.flickr.com/photos/77598212#N03/34191523510/in/dateposted-public/
and when I try to set any sort of width:
https://www.flickr.com/photos/77598212#N03/34191523450/in/dateposted-public/
I'd appreciate any and all thoughts. Thank you. -Wilson
the css:
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
}
h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
img {
max-width:500px;
max-height:340px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}
#ShowText{
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
font-size: 18px;
font-family: vendetta, serif;
line-height: 25px;
}
If you have a fixed width on a block element then simply give it margin: 0 auto; to center it.
I have this block:
For example: I add the text: Last News in the world.
I would like to have the width of the block as wide as the text, but the corners should still remain as a curve.
CSS:
.cat-box-title h2 {
background: transparent url(.../images/testtitle.png) repeat-y;
padding-left: 5px;
color:#5E5E5E;
float:left;
margin-right:10px;
font-size: 22px;
font-family: BebasNeueRegular, arial, Georgia, serif;
}
HTML:
<div class="cat-box-title">
title
</div>
Your solution will be more easy if you use the border-radius instead of background image.
.round-btn
{
background:#4679bd;
color: #FFF;
border-radius:5px;
padding : 10px;
border:none;
}
of-course you need to check the browser compatibility whether your browser supports this property or not. If not then you need to use some hack.
JsFiddle Demo
and if you goes with background-image solution then you need to use two images; one for left side border-radius and another one for right side and use the background-color for rest of the button.
CSS:
.cat-box-title {
background-color: #4679bd;
color:#5E5E5E;
float:left;
border-radius:5px;
margin-right:10px;
font-size: 22px;
padding: 5px;
font-family: BebasNeueRegular,arial,Georgia, serif;
}
I have an issue with my page centering. Everything centers correctly except the left and right border.I believe the issue is with the border-right-width:300px; border-left-width:300px; lines but I am not sure of another way to set that up. Is there another solutuion to having a left and right border that also centers with the page. Any ideas?
Here is my CSS:
body {
margin:auto;
padding: 0;
background: #FFFFFF;
font: 12px/1.4 Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
border-right-style:solid;
border-left-style:solid;
border-right-width:300px;
border-left-width:300px;
border-color:#E8E8E8;
}
When you use margin:auto you must also specify a width. I think you are trying to center the contents of the body with a background #E8E8E8. Do this instead
body {
margin:auto;
padding: 0;
font: 12px/1.4 Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
width: 1020px; //or anything else you want
background:#E8E8E8;
}
You cant center anything that has no width, or is the parent-div with 100% because it cant relate to anything.
If you are going to use your body you need something like this:
body{
width:980px;
height:100%:
}
what most people do is using a container or wrapper. That gives you bit more control.
.container{
width:980px;
height:100%;
position:relative;
}
as you can see I gave the container as classs and a position:relative. This allows you to use it multiple times on the same page.
You need to center div itself, something like this:
div.page {
margin: 0 auto;
}
I get a scrollbar for the body on every page and it scrolls maybe 2em in height. This is happening on every browser IE, Chrome, Opera, and FF even in full screen (1680x1050).
I can't simply do overflow:hidden for the body because of the third test page uses SlimBox2 might needs to scroll down.
Three test pages:
http://dev.mykeepsakephotography.com
http://dev.mykeepsakephotography.com/gallery_couples.php
http://dev.mykeepsakephotography.com/invitations_weddings.php
body
{
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #000;
color: #fff;
padding: 0;
margin: 0;
}
#wrapper
{
height: 725px;
width: 950px;
background: #000;
margin: 0 auto;
padding:0;
overflow: hidden;
border: 1px solid red; /* added for border definition */
}
Thank you,
LF4
The li.dir's within your nav are causing the scrolling. Removing them eliminates the issue.
Within them, the ul.dropdown ul has an attribute
top:100%
which is causing the issue. The nested menus here are causing elements to appear below the bottom of the page. Fix this and your problems are history :)
Throw a position:relative; on your ul.dropdown > li > a, ul.dropdown li.dir { selector and everything will work splendidly.
Position:absolute will position it absolutely to the nearest parent with position:relative, or failing that-- the document itself.
The slimbox.css has the following settings:
#lbOverlay {
background-color:#000000;
cursor:pointer;
height:100%;
left:0;
position:fixed;
top:0;
width:100%;
z-index:9999;
}
I winder if height should be 725px, the same as #wrapper.
I'm trying to style a button with the css 'sliding doors' technique, but it isn't working properly. I've only got access to firefox 3 at the moment so this issue may not occur in other browsers but I would like to solve it for firefox as well.
Here's a picture of what the problem is:
http://img131.imageshack.us/img131/3559/buttons.png
As you can see the second side is lower than the first by a pixel and also is not over to the right enough. Here is the code I am using:
button
{
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button span
{
display: block;
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
<button class="important" type="button"><span>Register</span></button>
<button type="submit"><span>Submit</span></button>
How do I fix this problem? I tried relatively positioning the span using top: -1px right: -3px but then the text is mis-aligned.
Thanks.
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
I just did sliding doors on a div background, and the code from this site worked perfectly.
Try setting the padding for the button to zero, and then playing with the padding-left and width to put the text in the right place.
button { padding:0; padding-left:5px; width:90px; /* total width:95px */ }
button span { ... }
If you look at the HTML block display: padding gets added to the overall width of the object, and the background starts in the padding area, and the right half is padded
However please take note, that button elements are NOT suited for embeding any other nodes inside (like span). They may work OK in the browser, but IE can make your life really hard (not to mention that as far as I know, it's not valid)
Form elements like buttons are always hard to style, and riddled with minor bugs like these.
Instead of applying the class to the button element itself, perhaps try and apply the button's styling to an extra span element inside the actual button?
In short:
button {
background: white;
border: 0;
}
button div {
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button div div {
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
And HTML:
<button type="submit"><div><div>Submit</div></div></button>
I use DIVs instead of buttons and have a function to build them in-place. It ends up looking like this:
alt text http://fb.staging.moveable.com/samplebutton.gif
inline script call:
<script type='text/javascript'>makeButton("Log in","login()")</script>
code:
function makeButton(text,action) {
document.writeln("<a class='titleGen' href='javascript:// "+action+"' onclick='"+action+";return false'><div class='btn'><div class='btnLeft'></div><div class='btnMiddle'><div class='btnText'>"+text+"</div></div><div class='btnRight'></div></div></a>")
}
css:
a.titleGen, .btnText, .btnGText {
text-decoration:none
}
a.titleGen:hover, .btnText:hover, .btnGText:hover {
text-decoration:none
}
.btn {
height:22px;
display:inline;
cursor:pointer;
margin-right:5px;
}
.btnLeft {
background-image:url(/images/bg_btnLeft.gif);
width:3px;
height:22px;
float:left;
}
.btnRight {
background-image:url(/images/bg_btnRight.gif);
width:5px;
height:22px;
float:left;
}
.btnMiddle {
background-image:url(/images/bg_btnMiddle.gif);
width:auto;
height:22px;
float:left;
}
.btnText {
color:#ffffff;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-top:2px;
padding-left:10px;
padding-right:10px;
}