I am not able to display div text before image, this is what i want
But not able to get it right.
html
<div id="Header" class="header-first">
<h2 class="sometext">Fruit</h2>
<div id="number-of-fruits" style="display: inline; float: right;">0</div> <span>
<img id="someImage" src="http://www.journeys.travel/images/familytrips/iconCollapseArrow.gif" class="someimage">
</span>
</div>
css
.header-first {
background-color: red;
width: 100%;
height:50px;
}
.sometext {
display: inline-block;
margin: 2px 4px;
text-align: left!important;
color: blue;
}
.someimage {
float: right;
vertical-align: middle;
margin-top: 3px;
}
http://fiddle.jshell.net/WyPWs/1/
Here is an updated fiddle: http://fiddle.jshell.net/WyPWs/4/
Try wrapping your right hand side content in a single div, and then treat your items separately.
<div class="right-section">
<span class="number">0</span>
<img src="http://www.journeys.travel/images/familytrips/iconCollapseArrow.gif" class="my-image">
</div>
Use positioning. In this case I used relative positioning.
#number-of-fruits {
position:relative;
right:30px;
}
http://jsfiddle.net/WyPWs/10/
Related
How to I align my text and image on the same line?
Whenever I used padding or margins it crashes into the circle image I'm using.
#alignPhoto {
padding-right: 50px;
padding-left: 400px;
}
#alignCompany {
margin-left: 240px
}
#alignImage {
position: relative;
bottom: -250px;
}
.wrapper {
background: #C3C3C3;
padding: 20px;
font-size: 40px;
font-family: 'Helvetica';
text-align: center;
position: relative;
width: 600px;
}
.wrapper:after {
content: "";
width: 200px;
height: 0;
border-top: 42px solid transparent;
border-bottom: 42px solid transparent;
border-right: 40px solid white;
position: absolute;
right: 0;
top: 0;
}
<div id="alignPhoto">
<div class="circle" id=image role="image">
<img src="http://placehold.it/42x42">
</div>
</div>
<div id=alignPhoto class="titleBoldText">Mary Smith</div>
<div id=alignCompany class="titleText">Morris Realty and Investments</div>
<br>
Currently It does this:
My desired effect is this:
Any help or suggestions would be greatly appreciated.
You're making it a little more complicated than it needs to be. Just put two elements as wrappers (one you already have in alignImage, set them to display as inline-block and then put the vertical-align to middle, top, or whatever you like. I got rid of all the bizarre padding, which was messing with the display as well. Looks like that was a holdover from your vertically stacked layout.
Edit – You've also got two elements with the ID alignPhoto. You really, really shouldn't do that. If you need to style two different elements with one rule, please use classes instead.
#alignPhoto {
display: inline-block;
vertical-align: middle;
}
#alignPhoto img {
border-radius: 100%;
}
#alignImage {
position: relative;
}
.alignText {
display: inline-block;
vertical-align: middle;
}
.titleBoldText { text-align: right; }
<div class="alignText">
<div class="titleBoldText">Mary Smith</div>
<div id=alignCompany class="titleText">Morris Realty and Investments</div>
</div>
<div id="alignPhoto">
<div class="circle" id=image role="image">
<img src="http://placehold.it/42x42">
</div>
</div>
<br>
One quick and dirty way to wrap it in a table, as to get your vertical align working without any problems as well.
<table>
<tr>
<td>
<div id="alignPhoto" class="titleBoldText">Mary Smith</div>
<div id="alignCompany" class="titleText">Morris Realty and Investments</div>
</td>
<td>
<img src="image/url" alt=""/>
</td>
</tr>
</table>
http://jsfiddle.net/7m5s6gd7/
What about slightly simpler version:
HTML:
<div id="alignPhoto">
<div class="content-wrapper">
<p>Mary Smith</p>
<p>Morris Realty and Investments</p>
</div>
<div class="image-wrapper" id="image" role="image">
<img src="http://placehold.it/250x200" />
</div>
</div>
CSS:
.content-wrapper { float:left; }
.image-wrapper img { border-radius:50%; }
#alignPhoto {
display: flex;
flex-direction: row;
align-items: center;
}
JSFiddle for that
Basically you keep both paragraphs of text in one holding div and float it to left. This alone should do the job.
EDIT:
To make it even simpler, you can use flexbox for vertical alignment.
I've updated the answer.
One of the more effective and scalable solutions to ensuring elements are placed correctly from left to right are to employ wrapper divs with clear:both;. Inside of these wrapper divs you can use float:left or float:right. The wrapper divs allow you to generate a new "row".
#alignPhoto {
float: left;
margin-left: 10px;
}
#profileCompany, #profileName {
display:block;
width:100%;
}
#alignImage {
float: left;
}
.profileWrapper {
float:left;
}
/* Below creates a circle for the image passed from the backend */
.wrapper {
padding: 20px;
font-family: 'Helvetica';
text-align: center;
position: relative;
width: 600px;
clear: both;
}
.profileWrapper:after {
content: "";
width: 200px;
height: 0;
border-top: 42px solid transparent;
border-bottom: 42px solid transparent;
border-right: 40px solid white;
/* Tweak this to increase triangles height */
position: absolute;
right: 0;
top: 0;
}
.circle {
display: block;
height: 50px;
width: 50px;
background-color: #cfcfcf;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-khtml-border-radius: 25px;
border-radius: 25px;
}
<div class="wrapper">
<div class="profileWrapper">
<div id=profileName class="titleBoldText">Mary Smith</div>
<div id=profileCompany class="titleText">Morris Realty and Investments</div>
</div>
<div id="alignPhoto">
<div class="circle" id=image role="image">
</div>
</div>
</div>
As stated, I'm trying to use the faux column approach to having matching-height columns. I've followed the approach listed in CSS: The Missing Manual, which matches everything I've seen on ALA and other online resources. The problem I'm having is that the faux column image never appears on the screen. Here is the HTML I'm using:
<div id="contentWrapper">
<div id="reports">
<h2>yyyy</h2>
<p>xxxxx</p>
</div>
<div id="webApps">
<h2>yyyy</h2>
<p>xxxxx</p>
</div>
<div id="resources">
<h2>yyyy</h2>
<p>xxxx</p>
</div>
<div id="footer">
<hr style="text-decoration:dotted" />
<p> xxxx </p>
</div>
</div>
And the CSS:
#contentWrapper {
background: url(fauxcolumn.png) repeat-y left top;
}
#reports {
width: 300px;
float: left;
font-size: 11px;
}
#webApps {
width: 150px;
float:left;
margin: 21px 100px 0px 80px;
}
#resources {
width: 210px;
float: left;
text-align:left;
margin-top: 21px;
}
#footer {
clear:both;
text-align: center;
font-size: smaller;
color: darkgray;
}
Pulled from comment: Are you sure you have the correct link to the image? make sure the fauxcolumn.png is located in the same directory level as your page/stylesheet.
What is wrong with this code? I have been working on this for hours and cannot figure out why the button.png will now show up but the link is there in the location of the "one" div..?
#one
{
position: fixed;
left:225px;
top:702px;
}
.button
{
display: block;
width: 40px;
height: 40px;
background: url('images/button.png') bottom;
text-indent: -99999px;
}
.button:hover
{
background-position: 0 0;
background-color: transparent;
border-style: none;
}
_
<body>
<div id="map">
<img src="images/map.png"/>
</div>
<div id="one">
<a class="button" href="images/one.jpg"/>
<img src="images/button.png"/>
</a>
</div>
</body>
Your title is not really much related to your question .. so I'll just try to answer the question.
The image is not showing, because by default img is an inline element and you've set text-indent to -99999px.
You can either remove that text-indent or set the display of img to block:
.button img { display: block; }
I have a situation where I have one div of fixed width, containing an image pulled from Twitter, and another div of variable width containing user text of variable length. What I want to achieve is something like the following:
I can do this well enough with a single div that has background-image and padding-left. But I want to be able to apply border-radius to the img element, which simply won't be possible with a background-image.
If I do text-align: center on the outer div, it gets me halfway there. Here's a DEMO and a screenshot:
But this obviously isn't fully what I want.
How can I accomplish this?
Ask and you shall receive — a simplified jsFiddle example:
As an added bonus, the text is vertically centered too!
HTML:
<div class="logo">
<div class="logo-container">
<img src="http://img.tweetimag.es/i/appsumo_b.png" />
</div>
<div class="logo-name">
AppSumo is a really really long title that continues down the page
</div>
</div>
CSS:
.logo {
background-color: #eee;
display: table-cell;
height: 100px;
position: relative;
text-align: center;
vertical-align: middle;
width: 600px;
}
.logo-container {
background-color: #fff;
border-radius: 10px;
left: 10px;
position: absolute;
top: 10px;
width: 75px;
}
.logo-name {
font: bold 28px/115% Helvetica, Arial, sans-serif;
padding-left: 85px;
}
Would it be something like this?
http://jsfiddle.net/uPPTM/6/
.logo {
width:80%;
margin:auto;
background-color: red;
}
.logo-container {
border: 1px solid gold;
width:73px;
height: 73px;
display: inline-block;
vertical-align:middle;
}
.logo-name {
display: inline-block;
}
You can float the image container (or image itself without the container) to the left, clearing anything the left... and then float the text to the left, clearing anything to the right.
.logo-container{
float:left;
clear:left;
}
.logo-name{
float:left;
clear:right;
}
You can adjust the distance of the text using margins.
.logo-name{
float:left;
clear:right;
margin-top:10px;
margin-left:5px;
}
Use absolute positioning with a left position to push the title text past the image.
http://jsfiddle.net/uPPTM/9/
.logo { width: 50px; }
.title {
position: absolute;
top: 0;
left: 50px;
font-size: 32px;
text-align: center;
}
img {
border: 1px solid gray;
border-radius: 15px;
}
<div class="logo">
<div class="logo-container">
<img src="http://img.tweetimag.es/i/appsumo_b.png">
</div>
<div class="logo-name">AppSumo</div>
</div>
I have a header bar that spans horizontally across my web page, which is comprised of one div tag and three nested div tags.
HTML:
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="rightTop">
RIGHT
</div>
<div id="centerTop">
CENTER
</div>
</div>
CSS:
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#leftTop
{
display: inline;
float: left;
}
#rightTop
{
display: inline;
float: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
}
And it works just great, except for the fact that the div tags are out of order in the HTML code, which I don't like. If I order the div tags by placing them Left, Center, and Right, in the HTML, then the Right div just disappears from the webpage! I'm guessing that it has something to do with the float and text-align attributes having a conflict.
Anyone have any ideas on what is going on here, or is there an easier way to do this in CSS?
Try float: left; on #centerTop or display: inline on all three without any floats.
This works fine, but it depends on what you need. If you dont know the height of the content and you want it to expand dynamicly, then this is not enough:
#leftTop
{
float: left;
}
#rightTop
{
float: right;
}
#centerTop
{
float:left;
text-align: center;
}
I just tested the code from the original post in Firefox 3.0.10, Opera 9.64, IE8 and Google Chrome 2.0.181.1
All browsers showed all 3 divs, not a single div fell off the screen... Are you perhaps using IE6?
I am running your HTML and CSS of FF 3.0.10.
When you re-arrange the CENTERTOP div to be between the LEFTOP and RIGHTTOP divs, the RIGHTTOP div doesn't fall 'off the page' but the "RIGHT" text just falls off onto the next line.
My solution is proposed below (you'll notice I have some additions and some best-practice techniques).
HTML CODE:
<html>
<head>
<link rel="stylesheet" href="global.css">
</head>
<body>
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
<div class="clearer">
</div>
<div id="randomContent">
RANDOM CONTENT
</div>
</body>
CSS CODE:
#top-bar {
margin: 0;
font-family: Arial;
}
#leftTop {
float: left;
width: 20%;
border: 1px solid red;
}
#centerTop {
float: left;
width: 20%;
border: 1px solid blue;
}
#rightTop {
border: 1px solid green;
}
.clearer {
clear: both;
}
#randomContent {
background-color: yellow;
}
So you'll notice in the HTML that the divs are arranged in order from LEFT to CENTRE to RIGHT. In this CSS, this has been reflected by floating the LEFTTOP and CENTRETOP divs left. You will also notice that I have specified a width property on the LEFTTOP and the CENTERTOP divs, to enable you to space out your divs as wide as you want. (You'll be able to visually see your width modifications as I've added in a border on the divs). No width percentage property has been applied on the RIGHTTOP div as it will consume the remaining 60% of the width (after the LEFTTOP and CENTRETOP have consumed the 40%).
I have also added a CLEARER div. Think of the CLEARER div is a horizontal line break. Essentially it acts as a line of demarcations to separate the floated divs from the content below.
You can then add whatever content you want in the RANDOMCONTENT div.
Hope this helps :)
I don't know that it disappears, but it would drop down a line. Lot's of websites put it out of order for that reason (I know I do).
Another alternative:
#top-bar
{
margin: 0;
padding: 1px 4px;
font-size: x-small;
background-color: #005555;
font-family: Arial;
}
#top-bar .separator
{
padding: 0 7px;
border-right: 0px solid #fff;
border-left: 0px solid #fff;
}
#top-bar>div
{
float: left;
width: 33%;
}
#rightTop
{
text-align: right;
}
#centerTop
{
color: #ffffff;
text-align: center;
width: 34%;
}
And then put <br style="clear:both"/> right before you close your top-bar div.
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
<br style="clear:both"/>
</div>
Not sure if you want the width's defined like this, however.
Another solution:
Set the leftTop, centerTop, and rightTop to display:table-cell,
Set the top-bar to display:table-row,
Set a container to display:table
Set the width of the container and row (#table-bar) to 100%;
Set the width of the columns to the desired ratios (e.g., 25% for left and right, 50% for center)
caveat: table, table-row, and table-cell css display values do not work in IE 5.5 or 6 (and maybe Opera 8); but they do work nicely in all contemporary browsers. IE conditionals can be used to split code for IE > 5 and IE < 7.
TEST:
<html>
<head>
<title>3 Column Header Test</title>
<style type="text/css">
body#abod {
background-color:#F5ECBD;
color:#000;
}
#hdrrow {
margin:0;
padding:0;
width:100%;
border:1px solid #0C5E8D;
display:table;
}
#top-bar {
margin:0;
padding:1px 4px;
width:100%;
font-size:100%;
background-color:orange;/*#005555;*/
font-family: Arial;
border:1px solid #000;
display:table-row;
}
#leftTop {
margin:0;
padding:0 16px;
width:24%;
text-align:left;
color:#000;
background-color:#F0DD80;
border:1px dashed #f00;
display:table-cell;
}
#centerTop {
margin:0;
padding:0 16px;
width:40%;
margin:0 auto;
text-align:center;
color:#000;
background-color:#F5ECBD;
border:1px dashed #f00;
display:table-cell;
}
#rightTop {
margin:0;
padding:0 16px;
width:24%;
text-align:right;
color:#000;
background-color:/*#F0DD80;*/transparent;
/*shows the orange row color*/
border:1px dashed #f00;
display:table-cell;
}
#footer {
padding:25px;
color:#000;
background-color:#F5ECBD;
}
</style>
</head>
<body id="abod">
<div id="hdrrow">
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
</div>
<h4 id="footer">Footer Lorem ipsum dolor sit amet</h4>
</body>
</html>
Use relative positioning to swap the positions of the divs after they have been floated:
The HTML
<div id="top-bar">
<div id="leftTop">
LEFT
</div>
<div id="centerTop">
CENTER
</div>
<div id="rightTop">
RIGHT
</div>
</div>
The CSS
#leftTop {
width:33%;
float:left;
}
#centerTop {
width:33%;
float:right;
position:relative;
right:33%;
}
#rightTop {
width:33%;
float:right;
position:relative;
left:33%;
}
I use the same process in my Perfect Liquid Layouts to change the column source ordering.