Want to get a bullet in html/cs (three of them actually) on the bottom of my page. I tried to do sth like this:
<style>
div.container {
position: absolute;
bottom: 0px;
text-align: center;
font-size: 200px;
font-family: cursive;
width: 100%;
}
</style>
<body>
<div class='container'>
...
</div>
</body>
But I guess that it isn't the best idea to code it this way. Now it is possible that my dots are covered by other html elements (just because of the fact that div is out of normal flow as an absolutely positioned element).
So my question is how to do it properly (and without using divs with border-radious: 100% set in their CSS). In fact I'd be glad to see a solution using dot signs (.). Thanks for your help ;)
Is this what you're after " • • • " ?
Use:
•
Depending upon your chosen Doctype, you may need to use:
a solution using dot signs (.)
fiddle
<style>
div.bullets {
text-align: center;
font-size: 200px;
font-family: cursive;
}
</style>
<body>
<div class="container">
<div>some content</div>
<div class='bullets'>...</div>
</div>
</body>
Edit
I guess you could us a negative margin then margin-top: -170px;
fiddle
Related
I'm building a very simple site using HTML and CSS. It consists of a headline, a paragraph of text, and an image.
When I view the site on Chrome, the placement of all three objects works perfectly. But in Firefox and Safari, they're scrambled. When I then optimize for one of those two, the Chrome version looks off. Etc.
Here's the CSS:
img {
position: fixed;
bottom: 280px;
right: 800px;
}
and the HTML:
<img src="bob.jpg" height="50%" width="20%">
Is there a relatively simple way to fix this? Can I specify the positioning depending on the browser -- something like so?
img {
position: fixed;
/* Chrome
bottom: 350px;
right: 925px;
/* Firefox
bottom: 200px;
right: 800px;
}
etc.
And a second question: What property can I assign the image so that text always wraps around the image, rather than rendering in front of or behind it?
Thank you!
If you want the image to be centered and aligned with the page's content, there is no need to add any additional CSS since you have text-align: center added to the body.
The image will be centered since it is an inline element. Also, your code has many issues, consider a simplified version:
body {
background-color: white;
text-align: center;
font-family: "Courier New", Courier, monospace;
}
p {
text-align: left;
font-size: 12px;
max-width: 50%;
margin: 0 auto;
}
hr {
width: 50%;
margin: 3em auto;
}
<div class="marquee">
<h3>THE X-FILES EPISODE GENERATOR</h3>
<hr>
<p>Make your own episode!</p>
<p>The X-Files generator mixes people, places and plots from different episodes to create new adventures.</p>
<hr>
<div class="wrap">
<button onclick="sentenceLoad()">Generate</button>
</div>
<div class="container">
<h5></h5>
</div>
<img src="https://bobbyfestgenerator.github.io/X.jpg" alt="">
</div>
Use CSS margin instead of repetitive <br> tags
No need to redefine the font since it is inherited from body
Add CSS rules to external file instead of inline (for <hr> for example)
Use margin: 0 auto to center block-level elements like <p>
jsFiddle: https://jsfiddle.net/azizn/d1xmv65m/
How do I remove the white space above this navbar that I created?
http://gyazo.com/b41271cad8d41c08c52ff26b1f1cab9e
I have search StackOveflow for this answer, but can't find one that seems to fix my issue. I have set html, body padding/margin to 0 as well as reset all other elements. Does anyone have any advice?
<nav id="header">
<div class="home-header">
<h1> testing this </h1>
</div>
</nav>
Here's the CSS
#header {
position: relative;
margin: 0 auto 0;
padding-top: 0px;
background-color: $main-color;
}
Live demo
The space at the top is create by the h1 because of its default margin. To fix this:
#header h1{
margin:0px;
}
PS: I assume that you removed the margin for the body tag. If not here's how you remove it:
body{
margin:0;
}
#header {
position: relative;
margin: 0;
padding-top: 0px;
background-color: $main-color;
}
body{
margin:0px;
}
<body>
<nav id="header">
<div class="home-header">
<h1> testing this </h1>
</div>
</nav>
</body>
Put The body Tag margin:0px; Header margin:0px; Try This Code
I ran into this problem. No other solution helped me, so eventually, I found one:
When I was coding the HTML file with Visual Studio in Windows, it saved it as UTF-8 BOM, so when the browser was rendering the page, it was misinterpreting that Byte Order Mark and showing it as a blank space above everything else.
If that is your case, you just need to reencode the file to UTF-8. I used Notepad++ for simplicity, but I'm almost sure you can do that inside VS as well.
I have some dynamic titles where the design requires each word to be on their own line. Here is the desired look:
http://jsfiddle.net/alanweibel/2LEmF/2/ (note the black backgrounds for each word)
The problem I need help with is keeping the style above while having the whole title inside of one tag. I cannot dynamically insert H1's before and after each word.
I need to change the HTML markup from
<div class="tagline">
<h1>
Oh
</h1>
<h1>
Look
</h1>
<h1>
A
</h1>
<h1>
Headline
</h1>
<h1>
Thanks
</h1>
</div>
to something similar to
<div class="tagline">
<h1>
Oh Look A Headline Thanks
</h1>
</div>
while keeping the same style as in the link above.
Thanks in advance.
See: http://jsfiddle.net/thirtydot/HksP2/
It looks perfect in IE9, IE8 and recent versions of Firefox, Chrome, Safari, Opera; all on Windows 7. It degrades reasonably well in IE7. In Safari on Mac, it's almost perfect.
This is based off a previous answer. Quoting myself from that answer:
Note that the line-height and padding adjustments can be very
tricky to get right.
line-height: 1.83; looks good, and was found by picking something that looked close to what you wanted, then using trial and error to find something that works in both Chrome and Firefox (they render text differently).
HTML:
<div class="tagline">
<h1><span>
Oh Look A Headline Thanks
</span></h1>
</div>
CSS:
.tagline {
display: inline-block;
width: 0;
line-height: 1.83;
padding: 1px 0;
border-left: 20px solid #000;
}
.tagline h1 {
font-size: 20px;
font-weight: normal;
color: #fff;
background: #000;
display: inline;
padding: 8px 0;
text-transform: uppercase;
}
.tagline span {
position: relative;
left: -10px;
}
Your only option for doing this, that I'm aware of, is to write some javascript that will take your <h1>oh look ..</h1> stuff and split it out into separate h1 tags.
update:
I just thought of a way: http://jsfiddle.net/2LEmF/10/
Basically, you need to move your background color up to the main div. Then set the width on your h1 to something that is going to force the text to break along normal text breaking rules. Something like 10px.
I'm not sure what this is going to do on a number of browsers as you are essentially giving a size that is way to small to your H1... but it might be just what you are looking for.
Here's a simple example of how to get one line per word:
https://jsfiddle.net/xaq5ttf2/5/
HTML:
<div class="tagline">
<h1>
Oh Look A Headline Thanks
</h1>
</div>
CSS:
.tagline h1 {
display: inline-block;
word-spacing: 100vw;
}
You can set the width of the h1 to less than that of the smallest word e.g. 10px.
It produces exactly the same result as your example (at least on Chrome and Firefox).
Jsfiddle here.
You could search and replace spaces with <br /> to get this look:
http://jsfiddle.net/WwbUL/
I'm not sure I understand the problem. It seems that you're stuck with the HTML as posted in your question, but you want it to display in-line?
What about just adding display:inline; to .tagline ?
http://jsfiddle.net/XmCLd/
Or is it the other way around? That you have normal-looking HTML, but you need to split your lines at the spaces?
http://jsfiddle.net/GQ44u/
Make the tagline div really thin and make it block instead of inline. Then make the h1 inline.
.tagline
{
width: 1px;
margin:5px;
display: block;
}
.tagline h1
{
color:#fff;
background: #000;
padding: 4px 10px;
font-size: 20px;
line-height: 30px;
text-transform:uppercase;
display: inline;
}
JSFiddle here.
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.
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%;">