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
Related
The website is freetorun.net in wordpress. When viewed on mobile devices the gold "Sign up" button is not centered on the screen.
I was thinking that changing the font-size to 14px in the CSS would fix it:
.large.custom-button span:visited {
font-size: 14px;
padding: 9px 14px 9px;
}
This code is not working though.
The target HTML is this:
<a class="large custom-button align-btn-right" href="http://freetorun.net/wordpress/choose/" title="Register Today!"><span style="background-color:#DAA520; color:#26354A">to start running faster, farther and<br> injury free SIGN UP for a clinic!</span></a>
Your layout on mobile has lots of issues with padding and floated elements. Changing the font size won't help with positioning.
Firstly the div with class social_media_top widget_text substitute_widget_class should probably be full width, and text-align: center;
You also need to remove the float: right on the gold button.
For the record, I did not solve this. And the code provided above didnt either. But the guys who wrote the U-Design theme gave me this and it is much better.
#top-elements .social_media_top {
clear: both;
float: right;
margin-left: -150px;
margin-top: -20px;
padding: 0 20px 0 0;
}
/* Mobile Screen ( smaller than 480px )*/
#media screen and (max-width: 480px) {
#top-elements .large.custom-button span,
#top-elements .large.custom-button span:visited {
font-size: 14px;
}
#top-elements .social_media_top {
padding: 0;
}
}
I'm trying to build a HTML/CSS periodic table. I have this as my HTML code:
<div id="Hydrogen">
<p>1</p>
H
Hydrogen
1.00794
</div>
and this is my CSS code:
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 100px;
font-size: 13px;
}
#hydrogen {
background: #fff;
margin: 0 auto;
width: 50px;
padding: 30px;
text-align: center;
/* border-radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* box-shadow */
-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
position: absolute;
}
How do I target the <p>1</p> tag in my #hydrogen ID? Basically, I want to display a 1 on the top-left corner of the div cell. Also, is this the best method of doing this, or is there a easier way?
If it’s the only p element within that div, then sinply
#Hydrogen p { … }
Otherwise, if it’s the first one,
#Hydrogen p:first-child { … }
This are absolute CSS selector basics – so you should perhaps read some tutorials on that matter.
Something along the lines of
#hydrogen p { position:absolute; left:0; top:0;}
should get you started.
You can also use the command "span".
Example:
<p><span>1</span></p>
CSS:
span { font-size:14; }
You can expend this code with "id" or "class".
ID-Example:
<p><span id="name">1</span></p>
CSS:
#name { font-size:14; }
Class-Example:
<p><span class="large">1</span></p>
CSS:
.large { font-size:14; }
There is nothing wrong with:
#hydrogen p{..}
but as you said you want to do periodic table so you will have 103 elements so than for every p-element you will have to write:
#hydrogen p{..}
#helium p{...}
#lithium p{...}
... and so 103 times, same thing with divs with Id's
Better solution would be to give p and div class name
.atomic-number{...}
.grid-cell{...}
<div class="grid-cell">
<p class="atomic-number">1</p>
H
Hydrogen
1.00794
</div>
You can style all elements with just two lines of CSS
EDIT
Create rows, and position elements inside them.
For example float all grid cells left, if you need something to stick on the right side add class="right" (1st row) you probably will have to change colours same way, also you can create invisible cells and fill space with them (2nd row)
http://fiddle.jshell.net/tH7Pq/1/
If you want you can read more about classes, id's and selectors here:
Id's and classes
multiple classes
child-and-sibling
I ran into one IE-specific problem that I just can't wrap my head around.
The following HTML and CSS can be seen live in this pen.
:: HTML
<div id="container">
<div class="dummy">Dummy</div>
<nav>
<div id="right">
<ul>
<li>Lorem ipsum <img src="http://placehold.it/80x40"> dolor sit amet.</li>
<li>Anal natrach, ut vas petat, <img src="http://placehold.it/80x40"> doriel dienve.</li>
</ul>
<div class="dummy">Dummy</div>
<div class="dummy">Dummy</div>
</div>
</nav>
</div>
:: CSS
/* RESET */
* { margin: 0; padding: 0; vertical-align: top; }
ul { list-style: none; }
/* MARKUP */
#container {
line-height: 0;
font-size: 0rem;
text-align: justify;
text-justify: distribute-all-lines;
}
#container:after {
content: '';
display: inline-block;
width: 100%;
}
#container > * {
display: inline-block;
line-height: 1;
font-size: 1rem;
text-align: left;
text-justify: none; /* does not work */
}
#container nav {
text-align: right;
}
#right > * {
display: inline-block;
}
/* COLORS & STUFF */
#container { padding: 10px; background: #cfc; }
.dummy { padding: 10px; background: #ffc; }
#container nav { padding: 10px; background: #ccf; }
ul { padding: 10px; background: #fcc; }
So, what's the Problem?
The content of the green div is justified, while each child of the very div in turn is given text-align: left;. Those children are: the left dummy div and the bluish nav.
The nav contains a list (red), and two dummies. For the red list's items the text-align is set to right - and there's lies the problem (or at least, there you can see it).
The first image is shifted to the left (and thus overlays/hides some piece of the text). The second image (and thus the whole second list item) is fine. This, however, changes, when changing the text. It seems as if only the image of the longest (meaning widest) item stays where it should be - all other images (if you were to create some more items) are shifted - depending on the list item's width, that is.
Now, why is that so - and how can I fix it?
The following things I found out so far:
When setting the li { text-align: left; } the image stays fine in between the two text portions - but I don't get right alignment, of course.
When removing text-justify from the #container the image stays fine as well.
Setting text-justify either to auto or to none does not seem to work...
Once again: this is just regarding Internet Explorer (9+).
// EDIT
In order to avoid your time being spent on something I'm not interested in, I'll post something more on what I'd like to have.
The final code must
keep the current/desired functionality (i.e., justified alignment);
work in all major browsers (current version and at least one before that).
The final code must not
contain floats;
contain absolute/relative positions.
// EDIT
Here is a screenshot of the desired result (Firefox), and one of what I get in IE...
Change your text-justify to distribute (Tested in IE10, IE9, Chrome, FF):
text-justify: distribute;
Check out the codepen to see it in action.
Did you try by setting like this?
li img{display: inline-block; margin: 0 5px;} /*you could set margin: 1px; only*/
your code pen
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">
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.