So what I thought was going to be simple has turned out to be quite challenging for some reason. Basically my challenge here is that I have text that needs to be the same format when expanded as it is while in a smaller window. While it is in the smaller window it is perfectly centered but when expanded it has way too much space to the right.
I have followed the directions on a different post saying to set it to a fixed position and then set the margins to auto but I now am seeing that there isn't a "min-margin-right.
<div style = 'position: fixed; z-index:4; left: 0; right: 0; top:80%; margin-left: auto; margin-right: auto; width: 50%; font-style: Courier; font-weight: bold; font-size: 25px;'>
<html>
<head>
<title>Conquerer's Quest</title>
</head>
<body>
<div style='position:absolute;z-index:-3;left:0;top:0;width:100%;height:100%'>
<img src='space.jpg' style='width:100%;height:100%' alt='[]' />
</div>
<!-- main game box -->
<div style='position:absolute;z-index:0;left:2%;top:3%;width:80%;height:75%; background-color: #900; border: 5px double black'>
<canvas id = gameCanvas>
</canvas>
</div>
<!-- descriptions box -->
<div style='position:absolute;z-index:1;left:2%;top:78.5%;width:80%;height:20%; background-color: #656060; border: 5px double black'>
<canvas id = instructionsCanvas>
</canvas>
</div>
<!-- description header -->
<div style = 'position: fixed; z-index:4; left: 0; right: 0; top:80%; margin-left: auto; margin-right: auto; width: 50%; font-style: Courier; font-weight: bold; font-size: 25px;'>
<u align = "center">
Conquerer's Quest Summary
</u>
</div>
<!-- description text -->
<div style = 'position:absolute; z-index:4;top:82%;left:5%;right: 20%; font-style: Courier;font-weight: small; font-size: 21px;'>
<p align="center">
<p1>Conquerer's Quests is an RPG following the adventures of you the player. You can choose between several classes including the swordsman, the assassain, the knight, the wizard, and the ranger. The main objective of the game is to locate and get into the Conquerer's Sanctuary but along the way the player can level up their character, sell and buy armor and weapons, and complete side quests.</p1>
</div>
</body>
</html>
Your code seems to be working for me—at least as far as horizontal centering is concerned. What browser are you using? Perhaps that is the root cause of the problem?
Related
I'm new in html and css so i have a question.
I am messing around with some stuff but after placing some images on my page i can't click on my links anymore.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Rijschool Houben</title>
</head>
<body>
<div id="header"></div>
<div id="header-pic"><img src="image/test.png"></div>
<p>
<div id="nav-bar">
<ul>
<li>|Home|</li>
<li>Info|</li>
<li>Prijzen|</li>
<li>Acties|</li>
<li>Machtiging|</li>
<li>Theorie|</li>
<li>Begeleid rijden|</li>
<li>Bromfiets|</li>
<li>Contact|</li>
</ul>
</div>
</p>
<p>
<div id="icon-main">
<i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
<i class="fa fa-paste" style="font-size:18px;"></i><a>raymond#rijschoolhouben.nl</a><br />
<i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
</div>
</p>
<p>
<div id="img-1">
<img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
</div>
<div id="img-2">
<img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
</div>
<div id="img-3">
<img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
</div>
<div id="img-4">
<img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
</div>
<div id="img-5">
<img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
</div>
<div id="img-6">
<img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
</div>
</p>
</body>
</html>
CSS:
div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: white;
}
div#header-pic{
position: fixed;
height: 50px;
left: 500px;
}
div#nav-bar{
position: fixed;
padding-top: 130px;
left: 0;
width: 100%;
white-space: nowrap;
}
div#nav-bar ul{
list-style: none;
text-align: center;
background-color: #323232;
padding: 10px 0;
}
div#nav-bar li{
display: inline;
}
div#nav-bar li a{
text-decoration: none;
color: white;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#icon-main{
position: fixed;
color: #323232;
padding: 10px;
}
div#icon-main i{
padding: 5px;
}
div#icon-main a{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#img-1 {
position: fixed;
left: 0;
padding-top: 184px;
width: 100%;
}
div#img-2 {
position: fixed;
padding-top: 184px;
padding-left: 255px;
}
div#img-3 {
position: fixed;
padding-top: 184px;
padding-left: 915px;
}
div#img-4 {
position: fixed;
padding-top: 184px;
padding-left: 585px;
}
div#img-5{
position: fixed;
padding-top: 184px;
padding-left: 1245px;
}
div#img-6 {
position: fixed;
padding-top: 184px;
padding-left: 1575px;
}
i know the code is bad but i hope someone can help me!
Here is a fiddle.
-Ryan
I looked at your external code. Please add your HTML and CSS to your question in Stack Overflow.
From the external HTML you have the following code:
<a>046-4524501</a>
Which does not work as a link.
You have this code
Home
That works as you would expect it to.
Change this line:
<a>046-4524501</a>
to
046-4524501
Where the href="Where you want the link to go".
It's all about the value for "href"
I did notice you are doing non-responsive html which means it is not mobile friendly or will look the same in smaller browser windows.
Your code is messy but your doing okay.
First off wrap everything you are putting in the header in the header div
The images are floating up to the top over your nav due to the position:fixed
Remove all the empty <p></p> between your div's
Use floats on your images and width of a percentage of 100% plus wrap them in a container/div
If you need me to I can see if I can redo all your html and CSS but think for you would learn better to try it out for yourself.
You could always go look at the HTML5 boilerplate out there and use them to guide you on how to construct good code.
I see that you are trying to create a row of images. Instead of using a system of DIVs why don't you use the more flexible (and more responsive) structure of a list?
Then you can use float: for lining them up in a row and basic CSS to give them sizes. The images will be specified as a background for these li elements (better practice).
Like this: http://codepen.io/Attrexx/pen/KVvwXP
You are placing divs containing the images using padding. That's why you can not use links in the menu. Div blocks cover your links.
Try using something like:
selector {
position: absolute; /* or `fixed` like in your css; see below*/
top: 100px; /* pixels from the top */
left: 100px; /* pixels from the left */
/* you can also use `bottom` and `right` */
}
For example:
div#img-3 { /* or just `#img-3`; see below */
position: absolute;
top: 184px;
left: 915px;
}
Check this w3 schools article for more information on positioning.
Not related to the question:
If you are using CSS's id selector (#), I suggest not to use element selector (e.g. div). So rather than div#img-3 try using just #img-3.
Try avoiding using id selectors at all. You can use class rules, and happily after some time they will result in saving you a lot of work.
If you are using HTML5 then try using semantic elements.
Avoid using fixed position when you don't need to (your page is an example of such page).
Paragraphs (p) shouldn't be used in the same way as div. It may result in bad habit for semantic sites.
Rather than using positioning (position), experiment with float or different display types (e.g. inline-block). Use it only when it is really needed.
Read about HTML Responsive Web.
I'm attempting to place a 'notification' style badge over an images. I am using Twitters Bootstrap as a base framework and creating a custom CSS class called notify-badge. But I cannot get anything to line up properly.
Through the magic of Photoshop, here is what I am trying to accomplish.
Here is my CSS code.
.notify-badge{
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
I would like to be able to place any small about of text in the badge and it expand the red circle to fit.
Here is my HTML code.
<div class="col-sm-4">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="myimage.png" alt="" width="64" height="64">
</a>
<p>Some text</p>
</div>
Bunch of different ways you can accomplish this. This should get you started:
.item {
position:relative;
padding-top:20px;
display:inline-block;
}
.notify-badge{
position: absolute;
right:-20px;
top:10px;
background:red;
text-align: center;
border-radius: 30px 30px 30px 30px;
color:white;
padding:5px 10px;
font-size:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
<div class="item">
<a href="#">
<span class="notify-badge">NEW</span>
<img src="https://picsum.photos/200" alt="" />
</a>
</div>
</div>
Addendum (from the Asker #user-44651)
(moved from the question)
Here is the result of applying this answer.
Adding margin-top:-20px; to .item fixed the alignment issue.
The idea here is to overlay an absolute container on top of a relative one. Here's a similar example:
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
The CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
This is going to put our text right up on top of the image nicely, but it doesn't accomplish the box we want to achieve behind the text. For that, we can't use the h2, because that is a block level element and we need an inline element without an specific width. So, wrap the h2 inside of a span.
<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>
Then use that span to style and text:
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
For ideas on how to ensure proper spacing or to use jQuery to cleanup the code a bit by allowing you to remove some of the tags from the code and jQuery them back in, check the source.
Here's a fiddle I made with the sample code:
https://jsfiddle.net/un2p8gow/
I changed the notify-badge span into a div. I saw no reason it had to be a span.
I changed the position to relative. Edit - you could actually keep the attribute position: absolute; provided you know what you're doing with it. Guy in the comments was right.
You had the attribute right: 1.5rem; and I simply changed it to left because it was being inset in the opposite direction of your example.
You can tweak it further but in a vacuum this is what you want.
At: http://www.fmancoding.com their is a section under "featured game of the week" that displays all the games, then the title and description of it. It looks exactly what I would like it to, except on a mobile device. On a mobile device the images are being tabbed in and touching each other.
Does anyone know why this is happening? I have breaks inbetween each div and I believe div's automatically are created on a new line, like a paragraph. Also, I added padding and margin to see if this would fix the problem, but it did not.
HTML:
<html>
<head>
<link href="Styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Fman Coding</title>
</head>
<body>
<center id="headerBox">
<h1 id="header">Welcome To Fman Coding</h1>
<h2 id="header">Most Games Are Mobile Friendly, And Can Be Used Offline!</h2>
</center>
<div id="MG">
<div id="FG">
<p id="ft">This Week's Featured Game!</p>
<img src="Games/Murderer.jpeg" width="100%" height="30%" alt="Miji">
<!-- Game Name & Description -->
<p id="FGD">Miji! Input Your Number Of Players And It Will Automatically Generate Everyone's Job!</p>
</div>
<div id="gLibrary">
<!-- Games -->
<div id="gameFrame"><img id="float" src="Games/Murderer.jpeg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Miji</h4>
<span id="desc">This game auto selects your positions based on the number of people playing!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="Games/RPS.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Rock, Paper, Scissors</h4>
<span id="desc">You can play Rock, Paper, Scissors, Shoot against a computer!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="MC/Click.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Minecraft Player Finder</h4>
<span id="desc">Create groups for certain games and find players to play, or help you build stuff!</span>
</div>
</div>
</div>
</body>
</html>
CSS:
#header{
text-align: center;
color: aqua;
}
#headerBox{
border: 1px black solid;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url('matrixCode.jpeg');
}
#gLibrary{
color: #989898;
margin: 15px;
display: inline;
}
#gLibrary p a{
text-decoration: none;
color: aqua;
display: inline;
}
#FG{
border: 3px gold solid;
}
#FGD{
color: red;
text-align: center;
}
#MG{
border: 1px purple solid;
background-color: #333;
}
#ft{
text-align: center;
font-size: 16px;
background-color: #333;
color: red;
}
#gameTitle{
color: aqua;
}
#float{
float: left;
}
#desc{
color: crimson;
}
#gameFrame{
margin-top: 1%;
margin-bottom: 1%;
padding-top: 1%;
padding-bottom: 1%;
}
Just found out this solution in wordpress by Tobiasbg.
The cause for this basically is that your theme is hiding all HTML tags (using display: none;) in it’s CSS file.
You can either correct it in the theme's CSS file or give ,
br{
display:block !important;
}
if you want only specific div's br to be shown give the div's class name prior to br in thre above code.
#gLibrary should be displayed as block, not inline :
#gLibrary{
color: #989898;
margin: 15px;
display: block;
}
I'm working on this HTML email template and thought I was done until I figured out that GMail and some other e-mail clients strip out the position CSS property.
Since writing html/css for email readers is like going back into the stone ages I'm a little bit stuck on this one.
What I want is to display a score bar which is sort of like a progress bar, with a score text inside of it, like this:
This works fine until the score becomes really low and the score text doesn't fit inside of the blue container anymore. The text just gets cuts off like so:
and at 0%:
Please note that I'm not sure why the word "Score" still shows up in the last one.
What I want is the score text just to overlap into the red part when the text is too long to fit inside of the blue container.
My code is as follows:
<div style="float: left;width: 70%;height: 30px;max-height: 30px;background-color: #f00;color: #fff;font-weight: bold;padding: 0px;font-size: 18px;">
<div style="float: left;width: 0%;height: 30px;max-height: 30px;margin: 0;padding: 0;background-color: #3c88a7;overflow: visible;">
<div style="padding-left: 10px; float: left;line-height: 30px;max-height: 30px;">Score 0%</div>
</div>
</div>
I've also tried to solve it with a table, but I walk into the same problem - there seems to be no cross-platform way to make the text overflow the cell.
Any ideas how to solve this, so it works in all the major email clients and webmail clients?
It is as simple as this:
<div style="margin:0;padding:0;background:blue">
<p style="width:10%;background:red;color:white;white-space: nowrap;">Score: 10%</p>
</div>
not very polished, but at least for a code-starter it's fine, i guess
You could use just two div without positioning. You have to use white-space: nowrap to prevent your text from wrapping.
Example Snippet:
div.wrap {
width: 100%; height: 26px; max-height: 26px;
background-color: #dd6666; color: #333;
padding: 0px;
}
div.wrap > div {
line-height: 26px; max-height: 26px;
background-color: #3c88a7; padding: 0px 0px 0px 4px;
width: 30%; white-space: nowrap; color: #fff;
font-family: helvetica, sans-serif; font-size: 14px; font-weight: bold;
}
div.d2 > div { width: 5%; }
div.d3 > div { width: 15%; }
div.d4 > div { width: 0%; }
div.d5 > div { width: 60%; }
<div class="wrap d1">
<div>Score 30%</div>
</div>
<br /><div class="wrap d2"><div>Score 5%</div></div>
<br /><div class="wrap d3"><div>Score 15%</div></div>
<br /><div class="wrap d4"><div>Score 0%</div></div>
<br /><div class="wrap d5"><div>Score 60%</div></div>
Here's a completely insane solution. :)
I wrote the SVG to CSS here...
http://jsfiddle.net/coqckyj9/1/
Then converted the SVG to base64 and pasted it into the div background image...
http://jsfiddle.net/coqckyj9/2/
<div id='bar' style='width: 100px; height: 20px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxyZWN0IGZpbGw9J2JsdWUnIHdpZHRoPSc0cHgnIGhlaWdodD0nMjBweCcgLz48cmVjdCBmaWxsPSdyZWQnIHg9JzRweCcgIHdpZHRoPSc5NnB4JyBoZWlnaHQ9JzIwcHgnIC8+PHRleHQgeD0nMnB4JyB5PScxNnB4JyBmaWxsPSd3aGl0ZScgZm9udC1zaXplPScxOCc+U2NvcmUgNCU8L3RleHQ+PC9zdmc+);'></div>
I have the following HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.rtwilson.com/robintheme/style.css" />
</head>
<body>
<div id="branding">
<div id="blog-title">
<h1>Robin's Blog</h1>
</div>
<div id="logo-div" style="float:right; display:inline;">
<img class="logo" src="http://rtwilson.com/academic/mugshot.jpg" height=100px>
</div>
<h1 id="blog-description">A PhD student talking about interesting things</h1>
</div>
</body>
</html>
I am trying to get the image to display to the right of both of the h1's but without creating a gap between the h1's. That is, I would like the top of the image to be aligned with the top of the first h1, the image to be on the right, and the spacing between the h1's to be exactly how it would be without an image there.
I thought it could do this by floating the image to the right and setting the display property to inline, but I've tried this and there is a gap between the h1's.
How can I fix this?
Fiddle: http://jsfiddle.net/9vRLH/
Demo: http://jsfiddle.net/9vRLH/embedded/result/
Try the below css and HTML: Please se inline Css in image div.
#blog-title {
float: left;
font-family: 'Droid Serif',serif;
font-size: 40px;
font-weight: 400;
}
#blog-description {
clear: left;
float: left;
font-family: 'Droid Serif',serif;
font-size: 20px;
}
<div id="blog-title">
<h1><a rel="home" title="Robin's Blog" href="http://127.0.0.1:8888/wordpress/">Robin's Blog</a></h1>
</div>
<div style="float: right; display: inline;" id="logo-div">
<img height="100px" src="http://rtwilson.com/academic/mugshot.jpg" class="logo">
</div>
<h1 id="blog-description">A PhD student talking about interesting things</h1>
I'd float the image right and give the divs some right-margin, like this:
<div id="branding">
<img class="logo" style="float:right;" src="http://rtwilson.com/academic/mugshot.jpg" height="100">
<div id="blog-title" style="margin-right: 110px;">
<h1>Robin's Blog</h1>
</div>
<h1 style="margin-right: 110px;" id="blog-description">A PhD student talking about interesting things</h1>
</div>
Fiddle: http://jsfiddle.net/Qch6u/
I recommend something like the following for these reasons:
The HTML is more concise (less elements), and reflects better the intent of your titling--a main title with a subtitle description. Generally, one should only have a single h1 tag on a page, and this places both the relevant pieces into a single tag. A search engine will now read it as a single title "Robin's Blog A PhD student talking about interesting things" instead of as two items "Robin's Blog" ... "A PhD student talking about interesting things."
Since you want the image to not interfere at all with the text, then using absolute positioning to effect that makes sense, as it will never cause any gaping in the text, nor reposition itself down the page. Of course, it is then good to at least give a min-width to keep from any overlap of the image to the text.
HTML
<div id="branding">
<h1>
<a id="blog-title" href="http://127.0.0.1:8888/wordpress/" title="Robin's Blog" rel="home">Robin's Blog</a>
<span id="blog-description">A PhD student talking about interesting things</span
</h1>
<img src="http://rtwilson.com/academic/mugshot.jpg" >
</div>
CSS
#branding {
padding-right: 110px;
position: relative;
min-height: 100px;
font-family: 'Droid Serif',serif;
min-width: 200px;
}
#branding img {
height: 100px;
position: absolute;
top: 0;
right: 0;
}
#blog-title {
color: black;
font-size: 40px;
font-weight: 400;
text-decoration: none;
}
#blog-description {
display: block;
font-size: 20px;
}