I'm pretty new and still very wet behind the ears when it comes to css styling.
I have a class already defined .logo but I would like to create a second class "just for the logo image and background" from the Header template below"
<div id="container">
<a name="top" id="top"></a>
<div id="header">
**<div class="logo"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></div>**
<div class="menu">
<ul>
<li><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</li>
<li><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</li>
<li><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</li>
</ul>
</div>
I'm not sure how to take just the logo part and create a new class from the bolded part of the header code highlighted above. Thanks for any suggestions guys.
edit for update
Thanks for the responses so far guys. I think the problem is I don't really know how to describe the problem sufficiently.
Allow me to try and get a grip on explaining my actual situation.
I have two Divs which both have a drop shadow, by using padding I have allowed (deliberatly) them to overlap each other which looks great as it allow the image in one of the divs to slightly overlap the other div giving a 3d effect.
That works great so far except that due to both divs having a drop shadow, where the shadow overlaps there is a darker portion.
I've highlighted in the image the divs (which have css attached to them) and the darker portion where the drop shadows overlap.
I've tried using overflow: hidden but I'm not sure where I'm going with it if I'm perfectly honest.
image here
Thanks again guys, and I hope this makes a bit more sense... I think most of the time I'm confusing myself :)
As far as I understood you, you could just reference the image directly with this selector in your css:
.logo img
If that's not what you want please add more details to your question.
You can actually select every kind of HTML-Element you want just by calling it by its tag. e.g. .logo a or .menu ul li
Related
Exact instructions: Insert a style to float all img elements belonging to the irregularWrap class on the right margin, but only when the right margin is clear of other floating elements.
I'm not really sure what this question means? I get the float property but whats does it mean by only when the right margin is clear of other floating elements?
<img src="images/student1.jpg" alt="" class="irregularWrap">
<img src="images/student2.jpg" alt="" class="irregularWrap">
<img src="images/student3.jpg" alt="" class="irregularWrap">
<img src="images/student4.jpg" alt="" class="irregularWrap">
<img src="images/student5.jpg" alt="" class="irregularWrap">
So those are the images, basically, its one images cut into 5 seperate pieces horizontally to make the words look like they kinda outline the image around the left edge.
The CSS I currently have is:
.irregularWrap { float: right; margin: 0px; }
I'm not sure if I'm just overthinking this due to my brain being fried trying to prepare for finals or if this is really just something we didn't quite cover. Any ideas where I'm messing up here?
This is what all 5 images should look like when they come together as the one picture.
to clarify, this is what I'm getting with the 5 images, instead of them looking as they do in the previous image
In the CSS I needed to add
clear: right;
As I explained in a previous comment, I forgot to change the stylesheet link to include the folder on my html sheet so it was throwing my entire game off. Like I said, brain is probably fried. Lol.
Thanks for the help guys!
You could try:
img {
display:inline; // or inline-block;
}
I have to transform a given webdesign into an template for an CMS.
While I was doing this, I realized, that the design did screw up in Firefox:
I'm not really deep into webdesign, but I was able to narrow it down to a div (.inside) which contains two further divs (.titel and .logo) and a <figure> that contains an <img>.
In Chrome (Version 33) and IE (Version 10) the image is rendered under the two divs (As it was intended by the designer) - in Firefox, the image is inserted right in line with the other two elements.
See the difference:
https://imagizer.imageshack.us/v2/249x342q90/34/e5yj.png
I prepared a jsfiddle:
http://jsfiddle.net/5zu32/embedded/result/
rough code:
<div class="inside">
<div class="titel"></div>
<div class="logo"></div>
<div class="main_image block">
<figure class="image_container">
<img src="foo" alt="img test" height="323" width="853">
</figure>
</div>
</div>
I tried to remove the "block" class (which only removes the overflow:hidden) but that screws up the original design. (It does not do that so clearly in the demo.)
(Picture of horses is a random internet image that happens to have the same size as my used image)
I hope somebody could help me? How can I fix this?
By the way: I'm new to the site, if I did anything wrong, please tell me :)
Try using
.main_image {
clear: both;
...
}
This will clear the float: left you used earlier.
BY adding a clear: both; to your main_image class you can clear out the problem with the display.
DEMO
There is a background inside the div. Then I would write a list of links, which then pass over the background image, but it not seems to work.
If the link is located above the background mage, hovering the mouse on that, I do not get the underline of the text as for all other links that are not above the image background.
This is my code:
<div style="min-height:200px;">
<div class="backgroundImg"
style="background: url(/my/url.png) no-repeat; height:140px; width: 140px;position: absolute;>
</div>
<div style="z-index:30">
My link here
</div>
</div>
Sorry for my English, the concept is really easy to understand but hard to explain ... I hope to be able to explain.
Thanks to all, Danilo
Edit:
I found the error ... if you do not use "absolute" propriety in both div, z-index non work.
Thanks for the suggestions! ;-)
Hard to understand, but I'll try:
1) If you have a link above the div with background, try with a different value of z-index on the link or setting a paddin on the link, so the div goes down and you'll see the underline.
2) If you want to have a list over the image background, insert it IN the div with background.
I found the error ... if you do not use "absolute" propriety in both div, z-index non work.
Thanks for the suggestions! ;-)
I am having a problem with some links I have made in Dreamweaver; I have made these links by putting the web address onto the link field in Dreamweaver.
But when I preview in browser the whole image does not turn into a link, only the bottom part of it does. So when I hover my mouse over the image, only at the very bottom of the image it turns into a hand.
The code for the page is here http://jsfiddle.net/BGpu8/ and the links with this problem are at the bottom of the page - Facebook, Twitter etc.
Any ideas on why this is happening would be much appreciated! Thank you in advance!
It should really be marked up like this:
<div id="fb"> <p><a href="http://www.facebook.com/group.php?gid=232587661141"><img src="graphics/social graphics/facebook.gif" width="31" height="31" alt="Facebook Logo" />
Find Us <br />on Facebook</a></p></div>
Put inline elements like anchors and images inside block level elements like paragraphs. In the DreamWeaver generated code it had the anchor in there twice and other wonkiness. If you have time you should take some of the other posters advice and try to learn by hand.
please check if you missed to provide "display:block;" css property to your anchor tag.
try to code like this,
<div class="fbIcon"> </div>
and corresponding CSS as:
.fbIcon{
background:url(ur image url);
height:xx px;
width: xx px;
}
.fbIcon a{
display:block;
}
Now it shud work!
Im have made a navigation bar for the top of site, the final look i wanted in the end was, simple text menu but then when you hover items the background changes using a background image. I have managed to do this and in all browsers when you hover over the background changes and it is fine, but in internet explorer 7 it looks like this...
I have tried changing the heights and widths, but still cannot get IE7 to go the same as the others?
The HTML code for the navigation is
<ul class="buttonleft">
<li><img id="topflag" src="images/flags/gb.png" alt="GB"/> English <img src="images/arrow.png" alt="GB" /></li>
<li>Search and Book <img src="images/arrow.png" alt="GB" /></li>
<li>Latest Offers <img src="images/arrow.png" alt="GB" /></li>
</ul>
the CSS is
.buttonleft li{float:left;margin-top:-9px;display:inline;list-style:none;margin-right:6px}
.buttonleft li a{color:#D9D9D9;font:normal 13px Tahoma;text-decoration:none;height:36px;width:auto;padding:10px}
.buttonleft li a:hover{background:url(../images/topbgover.png)}
img{border:0}
#topflag{margin-right:3px;margin-left:3px}
Any help would be great :D
I came up with a variation of your navigation and posted the demo at:
http://jsfiddle.net/audetwebdesign/HB6Zm/
I did not test it in IE7 but the two critical things to set are: use display: block for the a tag as suggested by GodFather earlier (that way the padding works on all sides) and use a strict doctype, otherwise you may see variations in quirks mode.
Since your are floating the li elements, they become blocks, so there is no need to change the display property.
Finally, it was not clear to me why you need a negative margin on top, but without see the final layout, it is hard to say.
I added some extra paddings and background colors to highlight the block elements and illustrate which styles control aspects of the layout.
Change the ".buttonleft li" to display: block, and the same rule you need to set on "a" tag.
Maybe you'll need to set some padding on "a" tag.