Here is my HTML:
<div id="leftMenuWrapper">
<div id="ramps" class="leftMenuHeaderButton"></div>
<div id="carServiceRamps" class="leftMenuSubButton"></div> <div class="clear"></div>
<div id="67RaceRampsXT" class="leftMenuProductButton"></div>
</div>
Here is my CSS:
#leftMenuWrapper{
background:url(../images/main_elements/leftMenu_BG.jpg) repeat-y;
border:#777777 thin solid;
width:160px;
margin-left:-19px;
position:absolute;
padding-bottom:5px;
}
.leftMenuHeaderButton{
width:175px;
height:35px;
position:relative;
top:-16px;
left:-11px;
}
#ramps{
background:url(../images/main_elements/leftMenu/Ramps.png) no-repeat;
}
.leftMenuSubButton{
width:169px;
height:21px;
position:relative;
float:right;
left:1px;
}
#carServiceRamps{
background:url(../images/main_elements/leftMenu/car-service-ramps.png) no-repeat;
}
.leftMenuProductButton{
width:160px;
height:20px;
clear:both
}
#67RaceRampsXT{
background:url(../images/main_elements/leftMenu/67-Race-Ramp-XTs.jpg) no-repeat;
width:160px;
height:20px;
}
.clear{clear:both}
Everything works, except <div id="67RaceRampsXT" class="leftMenuProductButton"></div> won't display it's BG image (it won't even display a BG color). The element is there, because if I adjust the sizes, it adjusts accordingly, but it won't display images in FF or Chrome.
I can put an <IMG> in it no problem, and I can even assign a BG to .leftMenuProductButton but not to #67RaceRampsXT
I don't think ids can start with number. Try to change your id to something like RaceRamps67XT and test it that way - in both HTML and CSS and see what it does.
Pretty sure only class identifiers can start with a number. For IDs you want [A-Za-z_]. Try changing your ID to #sixtySevenRaceRampsXT. Check out this question on valid IDs for more information:
What are valid values for the id attribute in HTML?
Related
#one{
border:2px solid black;
border-radius:10px;
background-color:yellow;
padding-top:20px;
padding-left:20px;
padding-bottom:20px;
padding-right:20px;
height:180px;
width:62%;
margin:auto;
}
.im1{
height:180px;
width:200px;
}
<div id="one">
<img src="inspirational1.jpg" alt="picture1" class="im1"/>
<img src="inspirational2.jpg" alt="picture2" class="im1"/>
<img src="inspirational3.jpg" alt="picture3" class="im1"/>
<img src="inspirational4.jpg" alt="picture4" class="im1"/>
<img src="inspirational5.jpg" alt="picture5" class="im1"/>
</div>
The code above woks perfectly when I'm working im my desktop, but as soon as I open in my laptop all the images are all over the place. I would like to fit them in the div making sure they don't go everywhere if open the website in a new browser, or scree. Any advice is more than welcome please
http://jsfiddle.net/LYL2S/1/
#one{
border:2px solid black;
border-radius:10px;
background-color:yellow;
padding:20px;
margin:auto;
width:620px;
}
.im1{
height:180px;
width:200px;
}
If I understood right you can use float instruction for your images
in css add this line:
#one img { float:left; }
where #one is the the container div
or using class on the images:
im1 {float:left;}
and after your container add a div with class .clear where clear {clear:both;}
Since your saying just for css.. you can't do it dynamically like if the number of images change..
However with just css and a fixed amount of images, like the 5 you showed in your question, you can just use percentages instead , like this
.im1 {
width: 19%;
}
Because 100% width of parent / 5 images = 20% , but sometimes you want to set a little lower to make sure some browsers don't render it incorrectly, so they all fit on the same line.
Also, since your using an id #one for the parent, you might need to use
#one .im1 {
width: 19%;
}
instead
http://jsfiddle.net/AmKHx/
Hello all,
I linked my code on the top. My main problem is that I have my header, content and footer perfectly set that works with all websites. It does not have a scrolling feature or anything. Everytime I try to add the Intel Logo to the screen. It does what it is up there. I move it around and tweek it and then it works for one browser and not the other... It keeps changing. I want the logo to stick to the left perfectly along with the header I made with CSS. Also I want the Mobility Group Text at that height right next to the logo, but for some reason it always messes up my header content and footer as well when I paly with it. So pretty much I want The Logo on first then Mobility Group Right next to itand make it very smooth!
Also I have just learned html css and php and if you guys see something in my code that could be done smarter please let me know. I need critical feedback so that I can progress in learning these new languages better so that I can succeed in this field of programming!
Thank you in advance for all the input and advice!!
HTML CODE:
<div id="page">
<div id="header">
<h1><img src="http://wireless.fm.intel.com/test/logo2.png">
<h2>Mobility Group</h2>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
CSS CODE:
Html, body
{
Padding:0;
Margin:0;
Height:100%;
}
#page
{
Min-height:100%;
position:relative;
height:100%;
}
#header
{
background-color:#115EA2;
height:100px;
width:97.5;
}
#main
{
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:87%;
height:auto;
height:87%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer
{
Position:fixed;
Width:100%;
Bottom:0;
Height:50px;
background-color: #115EA2;
}
#header h1
{
position:absolute;
text-align:left;
left:0px;
top:0px;
}
#header h2
{
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
}
I'm still not sure I understood the question, but here's what can you do to make it more natural looking. Close the h1 tag, don't make it absolutely positioned, but rather make it float left. The same thing goes to the h2 element. And since the original image is missing, I've put another one, and fixed its height to 60px.
It's basically this:
#header h1 {
text-align:left;
left:0px;
top:0px;
float: left;
}
#header h1 img {
height: 60px;
}
#header h2 {
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
float:left;
}
See the results here: http://jsfiddle.net/AmKHx/1/ It should look the same in every modern browser.
Also, try not to use capital letters for CSS attributes - it's a standard to use lower case, and even some browsers might not like it.
Do you have a reset sheet?
Copy this to a new css file, call it reset.css and then load it in your page before you load your main css.
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}
This is my code :
HTML
<div class="myDiv">text under link!</div>
<a class="myLinkTransparent" href="#"> </a>
<a class="myLinkRed" href="#"> </a>
CSS
.myDiv
{
position:relative;
z-index:40;
width:310px;
}
.myLinkTransparent
{
z-index:50;
position:absolute;
top:0px;
left:0px;
width:100px;
text-decoration:none;
background-color:transparent;
}
.myLinkRed
{
z-index:50;
position:absolute;
top:0px;
left:100px;
width:100px;
text-decoration:none;
background-color:red;
}
both link with transparent and red background should be "linked".
But in fact, on IE (every version I try: 7,8,9) the link is "broken", such as a "hole" to the text above the link.
Why? And how can I fix this?
1 . The behaviour is not exactly as you expect originally due to Normalized CSS option set in JsFiddle by default (look at the left under JS frameworks choice and so). Lets remove it to guarantee we own all styles.
2 . However, just unchecking that won't fix it completely. You'll be able to sense it on the top left taking small width and height.
To fix the width, you need to set display:block;
3 . To fix the height, you need to set actual height. For example height: 35px;.
4 . After all this, you'll find the link is clickable only in areas that's not text, because the browser knows it's transparent, it thinks it's click-through also.
This behaviour is described here: http://haslayout.net/css/No-Transparency-Click-Bug
You need to apply the below fix (copied from article, just changed filename):
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="non-existing-or-so.png",sizingMethod="scale");
.
The modified fiddle (tested in IE9 standards modes for IE9, IE8, IE7:
http://jsfiddle.net/Meligy/PPdbc/11/
Not sure but may be a bug.
You can try the workaround below
set background-color as green in myLinkTransparent class
Then set opacity to zero just by setting filter:alpha(opacity=0); in myLinkTransparent class
.myLinkTransparent
{
z-index:50;
position:absolute;
top:0px;
left:0px;
width:100px;
text-decoration:none;
background-color:green;
filter:alpha(opacity=0);
}
I want to keep a div on another div, which is linked to any site.
here is my css
.link_div a {
float:left;
width:80px;
height:20px;
background:yellow;
}
.over {
position:absolute;
left:0;
top:0;
background:red;
width:80px;
height:20px;
}
here is html
<div class="link_div"> HELLO </div>
<div class="over"></div>
Is this possible to keep "Over" div on top and link should be on ?
This is an awesome post:
Click through a DIV to underlying elements
Adding this css to your .over should do it:
pointer-events:none;
plus for IE:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background:none !important;
You could get something like this then:
http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html
All credits go to this guy's post of course.
I have this div:
<div class="inauguration-image">
I do not want this text to display, just here for description
</div>
Here is the css for it:
.inauguration-image {
margin-top:5px;
margin-left:auto;
margin-right:auto;
background: url("/images/inauguration_block.png") no-repeat;
position:relative;
width:760px;
height:552px;
}
I do not want the text to display, how would I go about doing that?
.inauguration-image {
margin-top:5px;
margin-left:auto;
margin-right:auto;
background: url("/images/inauguration_block.png") no-repeat;
position:relative;
width:760px;
height:0;
padding-top:552px;
overflow:hidden;
}
Setting height:0 and overflow:hidden hides your text; padding-top:552px makes the element large enough to display your background image, anyway. This is a very portable solution.
<div class="inauguration-image">
<p style="display:none">
I do not want this text to display,
just here for description
</p>
</div>
I don't think you're supposed to have uncontained text inside a div.
It's not quite clear what you're trying to do. If you're just trying to comment the div, use an HTML comment.
<div class="inauguration-image">
<!-- I do not want this text to display,
just here for description -->
</div>
you could also use:
.inauguration-image{
....
text-indent:-9999px;
}
which just moves the text to the left of 9999px and well you don't have anything else to change in your current class
Using a font size of 0px will make the text invisible to the eye. For example:
.inauguration-image {
margin-top:5px;
margin-left:auto;
margin-right:auto;
background: url("/images/inauguration_block.png") no-repeat;
position:relative;
width:760px;
height:552px;
font-size: 0px /** Fontsize of 0 makes it invisible */
}