I have been using Twitter Bootstrap 2.1 in my latest design. For some reason when I add any div elements to the page all of my content/main body gets pushed really far down and extra space is added all over the page, here is a live example and a picture provided as well:
http://www.japaneselanguagefriend.com/application/home.php
In my CSS in the bootstrap.min.css file I have
body{
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:20px;
position:relative;
}
and for the div
#apDiv1 {
position:relative;
left:439px;
top:669px;
width:300px;
height:670px;
z-index:1;
}
I am trying to get a div to display directly over my main content as shown in the picture, but the spacing and more seems to all get messed up somehow. Any advice or assistance on the problem would be greatly appreciated. Thank you!
UPDATE: So I need to figure out the best way to position my div without affecting my whole layout's spacing. (Thank you Mr.Alien for recommending to adjust the top:size; in my divs style)
I am looking for the best way to position it right in with the orange box in the example picture
You are using top:669px; so cut that down to somewhat top:30px;
Related
Fiddle: http://jsfiddle.net/jgallaway81/ax9wh/
<a href="lcars.jfx.php" class="leftbuttons buttonlinks antibutton">
LCARS Locomotive O.S.
</a>
My problem is the text label in the graphic. I'm using this button design all over my site, with only the text and its size varying. When I originally designed the system (on page: http://www.fccorp.us/development/index.php and then again on http://www.fccorp.us/development/index.fccorp.php), I used the margins & padding CSS controls to get the text centered vertically within the button. But that depended on a static font height. Now I want to use a taller font and can't get the thing to auto center height wise. I tried
.leftbuttons {
width:335px;
height:40px;
padding:**auto**
20px **auto**
45px; font-size:1em;
border-style:solid;
border-width:0px;
font-family:Arial;
font-weight:900;
margin-left:10px;
margin-right:20px;
margin-top:20px;
margin-bottom:20px;
text-align:center;
display:inline-block;
background-image: url(http://img580.imageshack.us/img580/1461/lcarssitebutton.png);
}
But all that ended up doing was chopping the image up.
I'm using the .antibutton to try to override a few details from the other classes in order to get what I'm trying to get. If I can solve the text vertical-align problem (or some nice coder here can figure out what the heck I screwed up), I also want to get the button's bottom aligned even with the text line.
Any thoughts?
Why don't you just add a line-height: to your unique cases?
for example, i added line-height: 40px; to a.buttonlinks and it centers vertically just fine.
I've been implementing Mega Menu Reloaded On to my website, and I am unable to properly align the div tags on different screen resolutions!
Here's: what it should look like
Here's: what it looks like after I've rewritten parts of the css of Mega Menu.
I've tried for a few hours to fix this issue, but as a beginner to css I can not seem to manage to fix it.
I believe this is the css needed pertaining to its placement
.megamenu_fixed {
width:960px;
height:44px;
position:fixed;
right:0;
margin:0 auto 0 -480px;
z-index:2;
background-image:url("../img/bg.png");
background-color: #3d3d3d;
padding-left:12px;
}
.megamenu {
position:absolute;
margin:0;
width:960px;
font-size:0.982em;
list-style:none;
padding:0px;
line-height:38px;
font-weight: bold;
display:block;
list-style:none;
top:41px;
padding-left:42%;
}
and here's the code of it's position with the correct placement
#nav-main { right:0; top:55px; list-style: none;}
#nav-main li {list-style: none; float:left; position:relative; padding-left:20px; }
Thanks in advance for any help, or pointing me in any right directions. :)
try using relative instead of absolute positioning.
also, failing that, try specifying left as a percentage (i.e. approx 50% is where the menu starts), and width also as a percentage (100% should make it use only from the left-most point of the div to the right-most side of the screen. if not, try 50% width).
The problem is in your HTML, not your CSS (I think. Well, I fixed the part where 'Adults' was hiding, that was a syntax error)
the span where Adults is declared is mistyped. I replaced <span class="drop"><adults< span=""> (problem code) with <span class="drop">adults</span> and 'Adults' displays properly. However, it is a little squashed to the right, but I believe that would be because of the images top left of the page of 'bad' version, which are not there on the 'good' version
PS: I've left the old answer there as people may have similar issues, where it is in fact the CSS at fault. If you think it's considered "off-topic" let me know, I'll remove it
UPDATE: Oh, and something I forgot to mention, to fix the squashed megamenu, just edit the location in the CSS, that should bring it back to normal
Alternatively, you can scrap div (almost) entirely and use tables instead. can be confusing sometimes, but in my opinion it's totally worth it. You just can't merge/split cells (to split just create a table within a table). Use microsoft word or openoffice writer or something like that and create tables within tables for graphical "base layout" to help you figure out the necessary code. Here's a starting point: Formatting layout with tables on gitHub
I'm new to css and have done several exercises on websites such as code academy but am now experimenting with my own page and lack much practical experience.
I know that you can wrap text around an image using "float" but I want to keep the text in a straight line and border. However, the border and background ignore the position of the image and run behind it. Whats the best way to position then a paragraph and border with an image so that the border will stop against the image?
these are the sections that would be relevant to this:
img {
margin:5px;
float:right; }
p {
background:white;
margin-left:40px;
margin-bottom:0px;
margin-right:0px;
font-family:veranda;
border:2px solid #045FB4;
padding:5px; }
p and img tags have no styling in the body section
example here: http://jimbob.webatu.com/
Any other tips in positioning would be appreciated :)
not sure what you mean when referring to the border, but in order for the text to align around the image properly, use:
p {
text-align: justify;
}
Currently, I am modifying a css document to make a website compatible in IE 6 and including it using a conditional statement. Everything is slowly starting to look as it should EXCEPT....I can't seem to modify the height of the background image in the css below. I can make it bigger by increasing the height, but decreasing the height does not make it smaller. The original image is quite thin, so I don't see why this is a problem.
#title{
text-align:left;
margin-left:170px;
margin-top:0px;
background-image:url(images/gradient.jpg);
background-repeat:repeat-y;
padding: 0px 0px 0px 0px;
width:680px;
height:42px;
color:white;
font-family:Helvetica, Georgia, "Times New Roman", Times, serif;
position:relative;
top:0px;
}
You can see in the attached image that the red gradient background image underneath the cork header image is too big and the text inside is too large also. However, no matter what I change in the css, it doesn't seem to alter anything.
Image of webpage
The div tag is:
<div id="title">
<h1>
Historia </h1>
</div>
Any thoughts as to why I can't seem to change this?
I would try first by using firebug lite for IE, that way at least you aren't guessing whats going wrong and you can identify the padding/height/etc;
My thought is that the height is simply being stretched by the h1 element (perhaps something else sneaking in too), thats my best guess as I don't have IE6 to test, but since your height is defined for the #title it must be whats inside of it that stretches it. Try setting overflow: hidden; for the #title see if that helps, or at least shows your 42px height.
http://bodegacooperativacigales.com/historianew.html
Try firebuglite, and view the element, it will show you what to get rid of in IE.
EDIT
to define your h1 simply do this:
#title{
text-align:left;
margin-left:170px;
margin-top:0px;
...
}
#title h1 {
height: 20px;
margin: 0; // remove margin
padding: 0; // remove padding to check if this is the issue
}
in your IE6 CSS sheet. Don't set a background image into the h1. The above piece is separate from your #title css definition.
I think you might be having issues regarding the height due to the child element creating overflow. Try adding the following rule to prevent the parent element from displaying any overflow:
#title {
overflow: hidden;
}
I am trying to style h1 using following image...
Currently my code as following...
h1{
background:#add2cb;
padding:15px 20px;
color:#387475;
font-size:16px;
font-weight:bold;
}
But i want yours help to add left and right bottom curve using css. I have tried lots of ways, please help me to rewrite css code to achieve this. thanks.
You should totally check out Harry Roberts version, the beauty is you won't be requiring any additional elements to pull it off.
http://csswizardry.com/2011/02/css-powered-ribbons-the-clean-way/
This method will include a few images, however because they're only for the curled under parts there will be less weight to download and will degrade better.
You cannot add curves like that with CSS alone, those will have to be a single image. If the H1's are all going to be the same size, then you can have an image of the bottom of that and then add this line to your h1 CSS
background: url("path/to.image") bottom center no-repeat;
I'm not sure if it is possible to make it work with H1's that are different sizes unless you want to use <div>s instead.
With 1`s you can do this:
HTML:
<div class="heading"><span>Text Goes Here</span><div>
CSS:
.heading { background: url("left-curve-image.jpg") left center no-repeat #add2cb;
padding:15px 20px;
color:#387475;
font-size:16px;
font-weight:bold; }
.heading span { background: url("right-curve-image.jpg") right center no-repeat #add2cb; }
Just please note that you will need snips of the left and right side of the curve from top to bottom