I've made a wrapper div with a text div and a image div floating to the right. A simple task, yes, but not for me tonight it seems. I am unable to make it work and stuck.
Here's how it looks right now: http://bit.ly/RNinCm
CSS:
introwrapper {
width: 938px;
background-color: white;
margin-bottom: -20px;
padding-left: 5px;
}
.introtekst {
font-size: 30px;
text-transform: uppercase;
font-family: Arial, Verdana, sans-serif;
color: #a81c11;
}
.gammeltbilde {
float: left;
}
HTML:
<div id="introwrapper">
<div class="introtekst">
<p>Some text here.</p>
</div>
<div class="gammeltbilde">
<img src="bilder/kjiptbilde.jpg" alt="bilde fra parken"/>
</div>
</div>
Change your CSS like so:
.introtekst {
font-size: 30px;
text-transform: uppercase;
font-family: Arial, Verdana, sans-serif;
color: #a81c11;
display:inline;
width: 80%; /* or dependent on what you like */
float: left;
}
.gammeltbilde {
float: right;
display:inline;
width: 20%; /* relative to width for introtekst */
}
The picture is larger than the container, try setting dimensions on the image:
<img src="bilder/kjiptbilde.jpg" alt="bilde fra parken" width="800" />
(800 makes it fit, but you may want to change that as needed.)
You could place a width="800px" tag on the img, but I would recommend actually staying away from that whenever possible and actually sizing down the images in Photoshop or some similar program. If you have a page with lots of images that you've sized down using the width tag, your page load times can get pretty big.
You could just remove <img src="bilder/kjiptbilde.jpg" alt="bilde fra parken">
Related
I am having problems with floating h4 after an image. It works as long as there is room in the table cell but as soon as you start to resize the window the text is floating left but UNDER the imag, I want ti to be right after even when the window is being resized.
Here is my code:
<td>
<img src="theme/stats.png">
<h4>We grow your channel!</h3>
<div style="clear:both"></div>
<br />
We are the only network that guarantees to grow your channel from day ONE, even for small channels!
Our network will <b>help you get a minimum of 5 new subscribers per day as soon as you join us!</b>
</td>
h4 {
font-size: 30px;
font-family: 'Bitter', serif;
color: black;
float: left;
margin: 0 auto;
}
td img {
float: left;
margin-right: 20px;
}
You can see it live here, try to resize the window to see what happens with the title + icons: http://vizz.tv/
I guess you should remove float property from <h4> to achieve this:
h4 {
/* float: left; */
margin: 0px 0px 0px 55px;
...
}
Fiddle
I assigned a background image for a <div> in the CSS of my HTML code, i assigned the width and height and also add contents to the <div> but the bg still not shown, this is what I've tried:
CSS:
#order_list {
position: absolute;
width: 25%;
height: 100%;
z-index: 2;
left: 75%;
top: 35px;
color: #F33;
background:url(img/ItemList.png)
display: inline-block;
alignment-adjust: central;
font: Arial, Helvetica, sans-serif;
font-size: 14px;
font-size-adjust: inherit;
grid-rows: inherit;
list-style: upper-alpha;
word-spacing: inherit;
word-wrap: break-word;
vertical-align: central;
}
HTML:
<div id="order_list">
<div id="confirm" class="buttonClass">
<div align="center">Confirm</div>
</div>
<div id="total" class="totalClass">
<div align="center"></div>
</div>
</div>
screen shot:
It might depend on how your browser interprets it, but you forgot a semicolon at the end of
background:url(img/ItemList.png)
Without it, browsers won't show the image. Thanks to #Leeish for noting that in this case, a semicolon is absolutely neccessary.
; is missing at the end of background:url(img/ItemList.png) which is why you are not getting the background image.
Semicolon is needed to separate the declarations from one another.
It can be omitted from the last declaration in a CSS rule, but it is recommended so that later if you want to add more declarations, you won’t need to remember to add it in there.
I'm designing a web page and I used HTML5 to make an entire div tag a link. Prior to adding the link, the whole div would expand when I hovered over it. Suddenly, it's only working if I hover over the words, not the box I created. The HTML looks like this (minus the actual link):
<a href="link goes here" style="text-decoration: none;">
<div class="home-tab">
home
</div>
</a>
And the CSS to make it hover looks sort of like this:
.home-tab:hover {
width: 150px;
height: 45px;
margin-top: 30px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
(Note: This is not all of the code in the stylesheet. I have some lovely color in there too.)
Is there something I'm missing in my CSS to make the whole thing work on the hover and not just the words? I'm not even sure what questions to ask to figure out what I've done here.
ETA: I have checked this across three different browsers. It has the same problem on IE, Firefox and Chrome.
ETA: CSS without the :hover attribute.
.home-tab{
width: 150px;
height: 35px;
margin-top: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
ETA: Okay, here's something very weird. It seems that any elements on the far right don't have this problem. Seriously, the forums tab and next button on the far right both have :hover elements and they work exactly as I want them to.
Get rid of the <div> entirely and set <a> to display: block.
You're not supposed to put block-level elements inside of an <a> anyway.
Seems to be working fine here: jsFiddle
The only thing I can think of is that the div is not the size you think it is. the size and width elements that you are setting in your css are only active when your mouse is on the div. You need to set them in the normal non hover settings as well if you want the div to be that size. Right now it is defaulting to just large enough to hold the text. You can see this demonstrated by the black border I added in my example.
Here is my suggestion:
.home-tab {
/*All of the sizing code goes here to create box for div*/
}
.home-tab:hover {
/*anything you want changed on hover goes here*/
}
I hope I was understanding your question correctly. If you need more clarification please let me know. Good luck!
I think you want to expand that div when you hover cursor on that div.
i wrote a code below that will solve your hover problem.
Here is a code for you customize this
.home-tab{
width:150px;
height:45px;
margin-top:30px;
color:#008080;
font-family: arial;
background-color: blue;
transition-duration: .8s;
color:white;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
.home-tab:hover{
width:200px;
height:60px;
font-size: 16pt;
transition-duration: .8s;
}
a{ text-decoration:none} /* optional*/
</style>
<a href="#"><div class="home-tab">
home
</div>
</a>
I specify 2 fonts to have different colors . One font is wrapped around an element called <d> and they are wrapped around an <div> class. The fonts are displyed together perfectly on firefox but in IE 9 or older , the browser displays them the same color , because the older version browser does not recongize the element called <d> and if I put it in an <div> . It would break an line.
How can I make the 2 fonts have different colors work on IE together
MY CSS
.b{float:left;background-color: #EEF2FB;
width: 230px;
font-size: 20px;
font-family: CordiaUPC;
color: #72757A;}
d{font-size: 20px;
font-family: CordiaUPC;
color: #010203;
margin-left: 5px;}
My HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" href="float.css">
<div class="b"> Hello<d>Distance</d> </div>
Use a <span> tag to do this, it will keep things displaying in an inline manner. The reasoning for using a span is because, by default <span> is given a display: inline attribute while some other elements, like a div for example are given display:block as a default by the browser.
<div class="b"> Hello<span>Distance</span></div>
Updated Styles:
.b{
float:left;
background-color: #EEF2FB;
width: 230px;
font-size: 20px;
font-family: CordiaUPC;
color: #72757A;
}
span{
font-size: 20px;
font-family: CordiaUPC;
color: #010203;
margin-left: 5px;
}
Instead of using a <d>, which doesn't even exist, use a <span>:
<div class="b"> Hello<span>Distance</span> </div>
Unlike divs, spans are set to display: inline by default. divs are display: block.
I do suggest you add an id to your span though, because you probably don't want all of your spans to act like this.
That would give you this HTML:
<div class="b"> Hello<span id="mySpan">Distance</span> </div>
And your CSS would then be:
.b{
float:left;
background-color: #EEF2FB;
width: 230px;
font-size: 20px;
font-family: CordiaUPC;
color: #72757A;
}
#mySpan{
font-size: 20px;
font-family: CordiaUPC;
color: #010203;
margin-left: 5px;
}
As mentioned, you can use <span> in place of <d>, or you could even use <b> if you like:
<div class="b"> Hello<b>Distance</b> </div>
b {
font-size: 20px;
font-family: CordiaUPC;
color: #010203;
margin-left: 5px;
font-weight: normal;
}
I'm currently working on a website design and need to make some changes to an advertisement. The CSS I apply to the main div (.ad_728x90_home) I'm targeting doesn't work. I have applied a margin-top to the div but that doesn't work, tried other CSS but it's not getting picked up.
Any help would be greatly appreciated! The advert is located below the second post.
.ad_728x90_home {
height: 130px;
}
.ad_728x90_home_text {
margin-top: 40px;
}
span.ad_728x90_home_h3text {
color: #FFFFFF;
float: left;
font-family: LeagueGothicRegular;
font-size: 23px;
line-height: 34px;
margin: 13px 0 22px 10px;
text-transform: uppercase;
width: 185px;
}
.ad_728x90_image {
float: right;
margin-right: 10px;
}
<div class="ad_728x90_home">
<div class="ad_728x90_home_text">
<span class="ad_728x90_home_h3text">Need more quality fonts? Head over to myfonts.com</span>
</div>
<div class="ad_728x90_image">
<img class="scale-with-grid" src="images/ad_728x90.jpg" alt="Blog Post" />
</div>
</div>
Be sure you have the right class names between .ad_728x90_home and .ad_728x90_home_text and double check your HTML nesting.
I checked your items with Chrome's inspect element and the <div class="ad_728x90_home_text"> seems to start above your ad, at the top of the page.
Try going to make it a position:relative as it seems like a main div element
.ad_728x90_home {
Postion:relative;
top:10px;}
I cannot say the exact pixel amount of it as the margin-top doesnt work try using it as relative.