Is there a better way to position a logo in the middle of the navigation? This is a wordpress build using the twitter bootstrap. I'm using absolute positioning but not sure what to do with the responsive aspect. Any input would be much appreciated. The url is: http://ndi.nowmgbeta.com/
The easiest way probably is to change the <div class="brand-nmg"> to:
<div class="row-fluid brand-nmg text-center">
and remove the brand-nmg class from the link inside it.
Then use the following css:
.navbar {
position: relative;
}
.brand-nmg {
position: absolute;
}
(so remove the left: rule from .brand-nmg)
Related
<div id="link">
Click here to toggle visibility of element #foo
</div>
<div id="foo">This is foo</div>
Im trying to position this using an external css stylesheet but it just stays in the same place even if i clear my cache. the css is the external stylesheet is below. the code above is being placed in a php file.
#link {
position: relative;
top: 1700px;
left: 100px;
}
What you've provided looks fine. Are you sure the stylesheet is being included? Try inspecting the element and see if the styles are actually being applied.
This might be pushing a bit what can be done with CSS (or show my total limitations). I have some HTML and CSS here:
http://jsbin.com/janujolofu/1/edit?html,css,output
that looks like this:
and I'd like the 12.50 value to look like this (ie moved to the right of .jt-header by 50px or so):
Is this possible in CSS? How would I do this? Ideally, I would like the .jt-price to stay within .jt-header as this is the HTML, and not do some jQuery monkeying of moving it in the DOM.
Use position absolute, then use position relative on it's parent container to set a reference point:
.jt-item-price {
display: inline-block;
position: absolute;
top: 0;
right: 70px;
}
.jt-row {
position: relative;
}
display:table could be your friend:
.jt-header {
display:table;
}
.jt-item-price {
display:table-cell;width:50%;
}
div {/* demo purpose */
border:solid;
padding:5px;
margin:5px;
}
<div class='jt-container'>
<div class='jt-row'>
<div class='jt-circle'>
</div>
<div class='jt-header'>
here is a header 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text
<div class='jt-item-price'>
12.50
</div>
</div>
</div>
</div>
But your HTML struture should be rethought, use the less and then see how to style via CSS :)
I'm having some trouble here. I want to show an image when mouse is hovered above following div.
HTML:
<div id="testmouseover">
<img src="testmouseover.png">
</div>
CSS:
#testmouseover
{
left: -9px;
top: -9px;
position: absolute;
width: 865px;
height: 653px;
z-index:1;
}
I have 4 of these divs wich should display a different image, so how can I add an ID to the hover?
Can someone help me with writing the CSS code for the hover? It will be greatly appreciated!
Have an onmouseover() event attached to the div. You can take some pointers from w3schools.
In the function that is being called at onmouseover, change the innerHTML property to have the desired image.
This can be achieved even quicker using jQuery:
$("#divId").click(function(){
$(this).html("Ur image html here")
});
I think it's easier than you think: try #testmouseover:hover
If that's not the right answer, please share a code sample on codepen
Here is an html version if it helps. The z-index is for layering images (stacking) not for mouse overs if I am correct.
<img src="NORMAL IMAGE" onmouseover="this.src='MOUSE OVER IMAGE'" onmouseout="this.src='Normal Image'" alt="ALTERNET TEXT">
Try this, pure CSS:
#testmouseover img {
display: none;
}
#testmouseover:hover img {
display: inline;
}
Be sure to give the div some width and height so that you don't get weird flickering stuff. For multiple divs just give them different IDs and copy this CSS a few times. If all the divs are the same you could also give them all the same class, or give them a class with the above mentioned CSS and an ID with the div specific styles.
Example: http://jsfiddle.net/S44MS/
I'm working on a website for a girlfriend of mine.
But I'm stuck positioning a the logo.
Here is the website I'm talking about:
http://xntriek-test.s3-website-eu-west-1.amazonaws.com/
I tried using z-indexes but don't work. I also tried setting an background image for the body.
But then I'm to limited with sizing the image.
I'm using Twitter bootstrap to put this thing together.
At the moment this is the class I'm using for the logo:
.logo{
position: absolute;
top: 25px;
left: 25px;
height: 45%;
width: 30%;
z-index: 1;
}
At the moment I'm positioning the image in a span along side the main content.
But because I'm using position: absolute this wouldn't make a difference were I put it.
If any body has any ideas how I could solve this, maybe a different approach then I'm doing right now. Any help welcome!
You need to modify your CSS along the following:
<div class="span6 offset3" style="position: relative; z-index: 1">
z-index affects positioned elements, so just add position: relative to your span of interest.
I would create a special class "z-wrap" and modify the style sheet.
<div class="span6 offset3 z-wrap">
In CSS style sheet:
.z-wrap {position: relative; z-index: 1}
Reference: https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Adding_z-index
Note You may have to adjust the value of z-index depending on any z-index value you may have set in the logo container.
First you are distorting the logo with your css, if you want your image to be responsive position it in an responsive element, position this absolut and let the image adjust it's size.
#logoContainer {
position:absolute;
top:25px;
left:25px;
width:30%;
z-index:-1;
}
img.logo{
width:100%;
height:auto;
}
your html should look something like this:
<div id="logoContainer">
<img src="yoursrc/logo.gif" alt="The Logo" class="logo" />
</div>
Put this right after the opening of your body tag and not in some other elements.
By putting it in other elements the logo inherits their z-index and you can only influence it's z-positioning inside the parent but not on the overall page.
One thing to remember when using the z-index attribute :
Only the elements placed using their "position" attribute (relative, absolute or fixed), can be affected by the "z-index".
So if you want to fix your issue, either put your logo as a background image, either use position in the CSS of the content.
Is it possible to have anchor links no text inside that has a background image and fixed dimensions and still be good for SEO?
Example CSS:
a{display:block;width:50px;height:20px;background-image:url('images/background.jpg');background-repeat:no-repeat;background-position:0 0;}
a:hover img{background-position:0 -20px;}
Example HTML:
If the image has text in it or you simply want to add its description, one thing you can do to help SEO and accessibility is to give the anchor a title and content with a large negative text-indent, like adding this to your a CSS:
display:block;
text-indent:-9999em;
...with the following HTML:
IMAGE TEXT
Inspired by neXib's comment on another answer.
HTML:
<a href="/home" title="Homepage" class="home">
<div><img src="/images/sprite.png" alt="Home" /></div>
</a>
CSS:
a {
display: block;
}
.home div {
width: 84px;
height: 27px;
overflow: hidden;
position: relative;
}
.home div img {
position: absolute;
top: -65px;
left: -20px;
}
So long as the div has 'overflow: hidden' and fixed dimensions the image inside can be positioned within to only display the part of the sprite you want.
SEO was a concern for me too and I think this solution will work fine.
The search engine can't read it, so how would it be good for SEO? More importantly, why do you want to do this, what are you trying to do?
Use alt and title attribute, but having no content inside the tags is pointless.I think that there is a serious risk that you will be penalized in the search results!
Again, why are you trying this. Are you doing buttons that are linking to another page or that
run a javascript function?
Wouldnt this fix the problem?
Well this is a bit old question but just want opinion on this!