I need your help - I have this CSS and HTML; I need the text to align to the right of the image. But for some reason, they keep pushing to the bottom of the image. What I'm looking for infact is to have the details next to the image in a grid from left to right.
Here's my code
<html>
<head>
<style type="text/css">
#container { font-size: 12px; font-family: 'Lucida Grande',Verdana,sans-serif; text-align: center; }
#container a.name_link{
text-decoration: none;
color: #8E190B;
font-weight: bold;
padding-bottom: 8px;
}
#image { width:100px; height:104px; border: 2px solid #e9e3dd; float:left;}
#text { padding-top: 5px; padding-bottom:5px; }
.horizontal_banner {float:left; margin: 2px; padding: 4px 2px 10px 10px; }
</style>
</head>
<body>
<div class="horizontal_banner">
<div id="container">
<a href="details.php?id=42">
<img src="uploads/Lisa.jpg" id="image" title="Lisa"/></a> </div>
<div id="name_container">
<a class="name_link" href="details.php?id=42">Lisa</a> </div>
<div id="text">Not available</div>
<div id="text">Not Specified</div>
<div id="text">Female</div>
</div>
<div class="horizontal_banner">
<div id="container">
<a href="details.php?id=23">
<img src="uploads/Lucky.jpg" id="image" title="Lucky" /></a> </div>
<div id="name_container">
<a class="name_link" href="details.php?id=23">Lucky</a> </div>
<div id="text">Employed</div>
<div id="text">25 Years</div>
<div id="text">Male</div>
</div>
</body>
</html>
Any help will be greatly appreciated.
To do so, you need to specify a fixed width to .horizontal_banner . 200x worked for me when I tried your example.
Something like this? http://jsfiddle.net/CvZWG/
I added new rules to .horizontal_banner to make them float left. Also, you're using the text id on divs multiple times in your HTML. IDs are supposed to be unique, if you want to use it multiple times you should use class instead of id.
You have a number of options depending on how long the text is.
However, looking at your code I would suggest... you kill all those id's and make them classes, the interpreter balks at multiple id's with the same name, that's issue number 1.
Issue 2, float: the to the left, since it's a block element, and give it a height and width. It's good practice to give anything that is floating an height and a width so the browser knows what it's working with. Don't forget clearance for margin and padding, you might want to consider some reset.css rules if you haven't set that up yet. http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
Issue 3, you might have to go as far as floating those "text" divs right, although you might want to consider a or for this situation since all that data looks the same and will be a child of the same class. http://www.codingforums.com/showthread.php?t=186697
Good luck.
Related
At the moment I am trying to change the distance between the two headers but I can't seem to remember how.
my css for the header is
.header {
font-family: "Karla" !important;
color: #4e4e4e;
}
and part of the html specific to the header is
<div class="header">
<h1 style="display: inline-block">Text 1</h1>
<h1 style="display: inline-block">Text 2</h1>
</div>
the two headings are very close to each other and I would like to separate them more but I can't remember how. I have tried using margin and padding but it doesn't seem to be spacing them out.
The entire website looks like
Thanks
I would recommend the following CSS:
.header h1 { margin: 0px 10px; }
Change the second value (10px) for more horizontal space. This will also keep the headers in the center by adding space for each header on both sides: left & right.
My recommendation would also be to remove the style attribute from the h1 elements and add it to the CSS above. The final CSS would be:
.header h1 {
margin: 0px 10px;
display: inline-block;
}
You can add these three options and play with it:
.header {
font-family: "Karla" !important;
color: #4e4e4e;
line-height: 30px;
margin:0px;
padding:0px;
}
Well out of many ways to do that I would suggest you to add margin to your h1 tags. You can either add margin right to the first h1 tag or you can add margin left to the second h1 tag.
<div class="header">
<h1 style="display: inline-block; margin-right: 2rem;">Text 1</h1>
<h1 style="display: inline-block">Text 2</h1>
</div>
The above given HTML code snippet would do the required and if you wish to increase the space more, just change the value provided for margin right in the first h1 tag.
This is my CSS.
<style type="text/css"> .chart-legend {
text-align: center;
}
.chart-legend li {
list-style-type: none;
padding-top: 15px;
}
.chart-legend li span {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 5px;
}
</style>
HTML
<div class="col-xs-7 col-md-6" class="thumbnail">
<div class="thumbnail" style="width:100%">
<h4> <span class="label label-primary">{{ a.title }}</span></h4>
<div>
<canvas id="canvas{{loopIndex}}" height="450" width="600"></canvas>
</div>
<div id="js-legend" class="chart-legend">
</div>
</div>
</div>
Here, the first legend entry gets aligned to the center, whereas the second entry does not go right below the aligned first one, but leaving some space towards the right. Below, is the image. Any help would be much appreciated. Thanks in advance :)
They both look centred to me. They are individually centred, and as they are different lengths, they will not have their left edges aligned with each other.
I suspect you want to let them left align inside a div, and then centre the div.
Also, unless I'm missing something, you haven't included all the HTML necessary to generate your attached image.
They are centered,Because of different length its look like this..
If you want something like this.You should set a padding:somthing according to your need and if its and for html element you can set left property as well.
Hope this will help you..
Thanks all :) But this kinda worked well for me! :)
.chart-legend {
width: 50%;
margin: 0 auto;
}
when I add a border to my <h3> tag it wraps around the row instead of the actual element inside it. I have tried various changes of the HTML structure and CSS however I am unable to find a solution.
Here is my HTML:
<div class="container">
<div class="row">
<div class="brand col-md-5"><img src="media/img/logo.png" alt="Driven Car Sales" class="img-rounded logo-custom"></div>
<h3 class="phone-number col-md-7">01429 7654287</h3>
</div>
</div>
Here is my CSS:
.phone-number {
text-align: right;
margin-top: 2.8em;
diaplay: inline-block;
border: 1px solid orange;
As you can see the text aligns right as I need the number to display right of the page.
Any tips would be much appreciated.
almost good, change
diaplay: inline-block;
to
display: inline-block;
Wrap the h3 with a div with the class col-md-7.
The col-md-7 class is used for a column and in most cases, you don't really apply it directly to elements like a header tag.
I have a HTML document with inline CSS that my professor asked to have the CSS within the head tag and have the same rending from the original HTML with inline CSS. I think I'm done but somehow the <hr> within the HTML with inline CSS looks thicker than the other one.
I already tried adding a height: declaration property but it renders even thicker than I want.
Original HTML: http://jsfiddle.net/2k66T/
Modified HTML: http://jsfiddle.net/dd63m/
Edit: Here are the instructions from the professor;
Write a CSS document in order to define the style of the following web
page (I refer this to as "Original HTML") in a right way. Add and erase in the original
page everything you think that is necessary. Use the on-line validator
of the World Wide Web Consortium to be sure that your work fulfills
the standards.
Real question is... why are you using HR?
Let's render a border on the div wrapping your logo image.
Have a fiddle! - http://jsfiddle.net/dd63m/11/
Updated fiddle - http://jsfiddle.net/8VTd8/3/
I have given the div wrapping your logo an ID of logo. I removed the br break tags, we can apply margins in the CSS. The font tag is no longer used.
HTML
<h1>MyTSC</h1>
<div id="logo">
<img src="./img/TSCLogo.jpg" alt="TSC">
</div>
<h2>My courses for Fal 2013</h2>
<ul>
<li>COSC 4330 Computer Graphics</li>
<li>IMED 1416 Wed Design I</li>
<li>ITNW 2413 Networking Hardware</li>
</ul>
The logo div is currently 300px wide, change to what you want. Note: margin: 0 auto; essentially this is centering your div. margin-bottom is applied to create those extra spaces. The border is applied to your logo div giving a consistent line across browsers.
CSS
body{
background-color: grey;
color: white;
}
h1{
text-align: right;
margin-bottom: 30px;
}
div{
text-align: center
}
ul{
font-style: italic;
}
#logo { width: 300px; margin: 0 auto; border-bottom: solid 1px #FFF; }
#logo img { margin-bottom: 30px;}
add background: white; in your css not color:white
like this
hr{
width: 50%;
height: 3px;
background: white;
}
They all have the same height, the one with the default color(no color specified) has a gradient effect so it looks a little thin.
Code for the Test fiddle
<hr width="50%" color="black">
<br />
<br />
<hr>
<br />
<br />
<hr id="test">
Js Fiddle
I'd like to have a line that starts right after my text on the same line, I've tried with the following simple code
<html><body>My Text<hr/></body></html>
It seems that <hr> is not an option because it is always on a new line and I'd like the line to start at the right of my text.
Any help ?
The <hr> has default styling that puts it on a new line. However that default styling can be over-ridden, in the same way as it can for any other element. <hr> is in essence nothing more than an empty <div> with a default border setting.
To demonstrate this, try the following:
<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>
There are a number of ways to override the styling of <hr> to acheive your aim.
You could try using display:inline-block; along with a width setting, as I have above. The down-side of this approach is that it requires you to know the width you want, though there are ways around this - width:100%;, and the whole line in a container <div> that has overflow:hidden; might do the trick, for example:
<div style='overflow:hidden; white-space:nowrap;'>Blah blah<hr style='display:inline-block; width:100%;' /></div>
Another option would be to use float:left;. You'd need to apply this to all the elements in the line, and I dislike this option as I find that float tends to cause more problems than it solves. But try it and see if it works for you.
There are various other combinations of styles you can try - give it a go and see what works.
Using FlexBox Property this can be achieved easily.
.mytextdiv{
display:flex;
flex-direction:row;
align-items: center;
}
.mytexttitle{
flex-grow:0;
}
.divider{
flex-grow:1;
height: 1px;
background-color: #9f9f9f;
}
<div class="mytextdiv">
<div class="mytexttitle">
My Text
</div>
<div class="divider"></div>
</div>
Try this:
<html><body>My Text<hr style="float: right; width: 80%"/></body></html>
The inline CSS float: right will keep it on the same line as the text.
You'll need to adjust the width if you want it to fill the rest of the line.
Using inline or float, as far as I tested it doesn't work properly even if this was my first thought. Looking further I used the following css
hr {
bottom: 17px;
position: relative;
z-index: 1;
}
div {
background:white;
position: relative;
width: 100px;
z-index: 10;
}
html
<div>My Text</div><hr/>
Demo http://jsfiddle.net/mFEWk/
What I did, is to add position relative in both elements (to give me the advantage of z-index use). Also from the moment I had position:relative for hr I moved it from the bottom:17px. This move it above the div that contains the text. Applying z-index values and adding background:white for the div puts the text above the the line. Of course don't forget to use a width for the text, otherwise will take the whole width of the parent element.
<div style="float: left">Some text</div>
<hr style="clear: none; position: relative; top: 0.5em;">
Exactly what you want.
Try this. It works
<p style="float:left;">
Hello Text
<hr style="float:left; width: 80%"/>
</p>
You can also use this to draw a line between texts like
Hello -------------------------- Hello
The OP never specified the purpose of the line, but I wanted to share what I ended up doing when I was making an html template where the user needed a line to write on after the document was printed.
Because the hr tag defaults to its own line and defaults to being centered in the line, I decided to use a div and style it instead.
HTML
This is my text.<div class='fillLine'></div>
CSS
.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}
JSFiddle Demo
Style Div for Line After Text
Hope that helps anyone who had the same goal as me.
hr {
width: {so it fits on the same line as the p tag};
}
p {
float: left;
width: {enough to accomodate the hr};
}
That sort of make sense?
<p>My text</p>
<hr />
Here's one potential approach, but it has some assumptions/requirements. Your question should be edited to give more specific information about what you're building.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Blah</title>
<style type="text/css">
body {
background-color : white;
font-family : Arial;
font-size : 16px;
}
.wrap {
background: transparent url(px.png) repeat-x 0px 85%;
/* Different fonts or text sizes may require tweaking of that offset.
px.png is a one-pixel(though can be thicker if needed) image in whatever color you want the line */
}
.inner {
background-color : white;
/* Should match the background of whatever it's sitting over.
Obviously this requires a solid background. */
}
</style>
</head>
<body>
<div class="wrap"><span class="inner">Here is some text</span></div>
</body>
</html>
I used the following technique:
Give the container div a background-image with a horizontal line.
Put an element (like <h3>) in the container div (I have it on the right so float: right; )
Use the following css:
.line-container {
width: 550px;
height: 40px;
margin-top: 10px;
background-image: url("/images/horizontal_line.png");
}
.line-container h3 {
padding-left: 10px;
float: right;
background-color: white;
}
Below code did the job for me
HTML File:
----------
<p class="section-header">Details</p><hr>
CSS File:
----------
.section-header{
float: left;
font-weight: bold
}
hr{
float: left;
width: 80%;
}
INLINE:
-------
<p style="float: left;font-weight: bold">Details</p><hr style="float: left;width: 80%;">