This is my first time using the service, so I'll try to be specific.
I'm trying to create a land page for my domain, but when I place the logo for the top menu, and add another element, the element does not respect the space of the logo, and it stays in front of the logo.
Here's the CSS I'm using:
#header {
width: 100%;
padding: 5px 0;
background: #b20000;
}
#header .hwrap {
display: block;
width: 980px;
height: 40px;
margin: 0 auto;
}
#header .menuLogo {
display: block;
width: 205px;
height: 70px;
background: url(menu_logo-70px.png);
text-indent: -9999px;
margin-bottom: -30px;
}
And here is an excerpt of the HTML I'm using:
<body>
<div id="header">
<div class="hwrap"><h1 class="menuLogo">fhtgames.com</h1>Random text</div>
</div>
</body>
Fairly simple.
EDIT: What I want is the logo to overflow the menu bar, and add the menu options to the right of the logo, still inside the .hwrap element. I used the logo with an <h1> element and placed the image as a background to avoid the image to be right-clicked and be saved.
But when I try to add the menu and the link to the logo, I notice that Google Chrome renders the page with the logo link for the full width of the .hwrap element, and adding anything else, makes the logo to stay behind the new elements.
Here's a link of the screen: http://img.fhtcentral.com/stack/screen001.png
I am using an HTML5 Reset stylesheet (found here) and I'm pulling the latest jQuery library from Google servers.
I've done this lots of times before, without any problems whatsoever, so I really don't know what am I doing wrong. I am sorry if this looks completely noobie question, but I just can't see the mistake.
Thank you for you time.
EDIT: The problem has been solved. The answer is right below. Thank you all for your elp :D
The text appears above the logo, because you have set the logo image as a background. So html intends that you want, as the word says, the image as background!
To avoid this I guess you have set the display: block to your h1.menuLogo. The right way would be display: inline-block.
#header .menuLogo {
display: inline-block;
width: 205px;
height: 70px;
background: url(menu_logo-70px.png);
text-indent: -9999px;
margin-bottom: -30px;
}
You can find a working fiddle right here.
The rest is about adjusting with margin and padding.
For further information about your problem you can read about the difference of block/inline-block here.
If you need other suggestions please let me know!
Best regards, Marian.
Hope this help you.
#header {
width: 100%;
padding: 5px 0;
background: #b20000;
overflow:hidden;
position:relative;
}
#header .hwrap {
display: block;
width: 980px;
margin: 0 auto;
color:#fff;
}
#header .menuLogo {
display: block;
width: 205px;
height: 70px;
background: url('http://jsfiddle.net/img/logo.png') no-repeat rgb(249, 153, 5);
text-indent: -9999px;
overflow: hidden;
line-height: 1;
margin: 0;
padding: 0;
}
JSFiddle Link.
Related
I'm kind of knew (some days) to this so this might be a dumb question.
I'm trying to make a navbar with three links/buttons. Two of them, when hovered, simply change the background to a darker one, the third one, opens a small menu with more links/buttons.
This is what I did (probably not the best method, but the first that came into my mind):
http://jsbin.com/woxodovoxo/1/edit?html,css
My problem is that on the button in the middle, the positions are not right (you can see that the button flickers a little when you hover your mouse over it, although this doesn't happen on the other buttons).
This is happening because I wasn't able to put #text-dropdown and #dropdown-div on the same starting position, since I couldn't find the right value for the "margin-top; padding-top" on #dropdown-div
From what I see on the code, .headertext is 0.5em (+ font-size) underneath the top of the page.
The problem comes with #dropdown-div, since I don't know its original position (without any tweaking) relative to the top of the page. If I were to know that, I could simply make a calculation to know which values to put in "margin-top; padding-top" on #dropdown-div.
Could you help me with that?
Also, percentages and em's don't seem to go well together, specially on the navbar when zooming in/out. What alternative could I use? Everything with em's? Everything with percentages? Or something else?
Thanks
Would this solve your problem? I didn't copy over your exact code because it was exhausting to read, but hopefully it gets you in the write direction. If you set an objects position to be absolute with its parent set to relative you can move it around relative to its parent.
Also, the box-sizing attribute may help you in the future. Makes it so that the padding/borders are included in the size calculations.
div#navbar {
width: 100%;
height: 2em;
}
div#navbar *,
div#navbar {
padding: 0;
margin: 0;
background-color: #3ff;
}
div#navbar div {
display: inline-block;
position: relative;
box-sizing: border-box;
height: 100%;
width: 150px;
}
div#navbar div>div {
display: none;
position: absolute;
top: 100%;
left: 0;
height: auto;
}
div#navbar div:hover>div {
display: block;
}
<div id="navbar">
<div>Something 1</div>
<div>Submenu
<div>
Other text
<br />Yup
</div>
</div>
<div>
hello
</div>
</div>
.headerlink{
height: 3em;
line-height: 3em;
width: 25%;
z-index: 1;
position: fixed;
}
.headertext{
text-align: center;
font-size: 1.3em;
font-family: 'Verdana';
color: #E3E3E3;
font-weight: bold;
}
#dropdown-div{
position: absolute;
top:100%;
width:100%;
background-color: #57a58a;
opacity: 0;
}
Modify the above styles and delete the below one
#hd2:hover #text-dropdown{
opacity: 0;
}
Edit:
Add this too..
#hd2:hover{
background-color: #57a58a;
}
and remove this extra option:
<div class="header-dropdown">Page2</div>
The following is my code for positioning text over image. The requirements are:
Image should be adapt to screen automatically. Even on smart phone, the image should be displayed completely. Only showing part of the image is not allowed.
Text should be accurately positioned anywhere I wish.
.txtimg{
position: relative;
overflow: auto;
color: #fff;
border-radius: 5px;
}
.txtimg img{
max-width: 100%;
height: auto;
}
.bl, .tl, .br,
.tr{
margin: 0.5em;
position: absolute;
}
.bl{
bottom: 0px;
left: 0px;
}
.tl{
top: 0px;
left: 0px;
}
.br{
bottom: 0px;
right: 0px;
}
.tr{
top: 0px;
right: 0px;
}
<div class="txtimg">
<img src="http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg">
<p class="bl">(text to appear at the bottom left of the image)</p>
<p class="tr"> (text to appear at the top right of the image)</p>
</div>
However, the bottom left text is hide from fully displayed on my firefox browser.
It is wired that the code snippet runs pretty well in stackoverflow by clicking the Run Code Snippet below.
I don't know why. Anywhere I found a solution: change overflow:auto to overflow:visible. The problem will disappear.
Anyone advice?
I can't reproduce the problem on this specific code, but i know the problem. Simply add a vertical-align on the image.
.txtimg img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
This also work like this :
.txtimg img {
max-width: 100%;
height: auto;
display: inline-block;
}
Finally I found the problem. In another CSS class, I have already include the "overflow:hidden" line. So, I remove the corresponding line in class txtimg.
having some CSS difficulties and hoping someone can help me out.
I am trying to get the navbar to expand out on both sides of the page (filled with a solid color), but have a transparent space where I can squeeze in my logo (as seen in the image below).
My page background is an image, so I can't just fill the {Logo} cell, with a bg colour - If it helps at all, I am also using Twitter Bootstrap.
Please can someone help me out with this. Been stuck for a a while now. :S
I was referring to something like this in my comment http://jsfiddle.net/slash197/Eh2xL/1/ This is just a proof of concept, you need to change the values and sizes.
HTML
<div class="bg">
<div class="nav">
<div class="logo">Logo</div>
</div>
</div>
CSS
body, html {
height: 100%;
}
.bg {
background: url("http://slashwebdesign.net/green-nature-wallpaper2.jpg") no-repeat center top;
width: 100%;
height: 100%;
padding: 30px 0px;
}
.nav {
background: url("http://slashwebdesign.net/nav.png") no-repeat center top;
height: 35px;
}
.logo {
margin-left: 100px;
color: #ffffff;
}
Maybe you could do something like this (no image needed, just pure css) :
http://jsfiddle.net/Jh4ya/6/
You have the right side of your navbar positioned as absolute :
#right {
left: 250px;
right: 0px;
position: absolute;
height: 30px;
background: #469;
top: 0px;
}
I think it is one of the most cleanest way to do it. Hope it helps
EDIT :
It may faces some widths issues. As a workarround, you could use display: table-cell; and display: table; properties. See this fork : http://jsfiddle.net/qxVce/
I have a div main that I have wrapped around my content and a sidebar. I have assigned the #main to have a background image and a min-height of 1200px.
In Google Chrome & Firefox, when I inspect the div doesn't have any properties when I inspect the source. Thus the div's background image and height don't work either.
<!--Main content layout -->
#main {
clear:both;
position: relative;
min-height: 1200px;
background-image:url(images/white.png);
background-repeat: repeat-x;
}
.sidebar1 {
float: right;
width: 20%;
padding-bottom: 10px;
margin-top: 20px;
}
.content {
padding: 10px 0;
width: 76%;
float: left;
margin-top: 20px;
}
The site address is: http://www.tibetskyvillage.org/
Would really appreciate someone elses eyes on this. I use this method all the time and for some reason this time it's failing.
The comment <!--Main content layout --> is not a valid CSS comment but an HTML comment instead causing a parse error.
See the screenshot, I have found some disturbances in your layout, to fix this or solution to your problem is
Don't give the image as background in CSS, give it as image in html like this
<img width="1360" height="675" src="images/bg0.jpg" class="wraper">
<div id="main">Your content</div>
Add styles to the image and main as
.wraper {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
#main{
position: absolute;
min-height: 1200px;
width:100%;
}
When displaying a company logo I saw something new today.
They set a height and width and overflow:hidden on the h1 tag and set a negative margin on the a tag inside of the h1 tag to keep the text from showing.
The code looked like this
<h1 class='logo'><a href='/'>Company Name</a></h1>
The css looked like this:
.logo {
text-indent: -9999em;
overflow: hidden;
text-align: left;
background-image: url(/images/logo.png);
background-repeat: no-repeat;
background-position: 0% 0%;
width: 253px;
height: 80px;
float: left;
margin-left: 10px;
}
.logo a {
display: block;
width: 253px;
height: 80px;
}
I always preferred the method where you use a span inside of the a tag and set it to display:none.
My code looks like this:
<h1 class='logo'><a href='/'><span>Company Name</span></a></h1>
My css looks like this:
.logo {
background: url(/images/logo.png) top left no-repeat;
margin-left: 10px;
a {
display: block;
width: 253px;
height: 80px;
span {
display:none;
}
}
}
Ignoring the fact that my nested CSS looks far cleaner, am I doing the right thing with my extra span and display:none or is there a reason for the crazy text-indent and other extra stuff the previous programmer threw into the stylesheet?
Edit for clarity: I am not asking for a different way to display the company logo. Using an h1 with the company name in it is an accepted standard practice for this. I guess I meant to ask what way do you prefer to display a company logo using an h1 and css? why?
Setting display: none will hide the content from screen readers and is thus a very bad approach.
Using the text-indent trick won't, but is still suboptimal.
The image is content and should be an <img> element.
You gave me an idea...
<style type="text/css">
#logo {
margin: 0;
}
#logo,
#logo a,
#logo:before {
display: block;
width: 275px;
height: 95px;
position: relative;
}
#logo a {
position: absolute;
top: 0;
left: 0;
line-height: -1px;
font-size: 0;
text-decoration: none;
overflow: hidden;
}
#logo:before {
content: "\0020";
background-image: url('http://www.google.com/intl/en_ALL/images/srpr/logo1w.png');
position: absolute;
}
</style>
<h3 id="logo">Google</h3>
This probably doesn't work on IE7, and Safari renders the text in the A tag as a little smudge in the top left corner. I bet it could be finessed a little more to eliminate that though. Maybe I'll be able to use this technique in the future.
i have using logo code..
.logo
{
width: 253px;
height: 80px;
float: left;
overflow: hidden;
margin:0px;
padding:0px;
}
.logo a
{
display:block;
cursor:pointer;
border:0px;
font-size:1px;
text-indent:-500px;
text-decoraton:none;
}
<h1 class="logo">company name
THanks
Ptiwari..
Either way you are trying to trick Google and can get penalized.
To answer your question, display:none means the text is not actually looked at on the page. The text indent means it is still there, spiders will still read the text, and therefore it can work.
Again, I consider this cheating the Search Engines and suggest against it. Use an Alt tag or find a place to put the h1 with a background image.