I've been trying to center text and put more text in the same line right next to it, while keeping the whole thing centered on the first text and not the whole line. Is there an easy way to do this?
All the solutions that I tried so far were either centering on the whole line or failed to put everything on the same line. Of course I also searched through stackoverflow but could not find a solution.
I've made this as a mockup: http://jsfiddle.net/mzqC5/
The way it should behave is that the alignment is centered on "A" and not the whole line. I'd appreciate any help with it since I've been trying to solve this for a good time now.
Thank you very much.
<div class="centered">A<div class="subtext">[24]</div>
.centered {
font-family: Meiryo, sans-serif;
font-size: 75px;
text-align: center;
color: black;
background-color: cornflowerblue;
max-width: 175px;
margin: 0 auto;
}
.subtext {
font-family: Arial;
font-size: 24px;
display: inline-block;
}
One way to achieve this is to absolutely position [24] with the relatively-positioned A.
.centered {
font-family: Meiryo, sans-serif;
font-size: 75px;
text-align: center;
color: black;
background-color: cornflowerblue;
max-width: 175px;
margin: 0 auto;
position: relative;
}
.subtext {
font-family: Arial;
font-size: 24px;
display: inline-block;
position: absolute;
bottom: 24px;
}
Because the element is absolutely-positioned it is not in the document-flow and doesn't affect the text-alignment.
You can adjust bottom to move it higher up.
You could set it up like this (red line added just to demonstrate page center):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
text-align: center;
height: 100%;
}
span {
position: relative;
}
b {
position: absolute;
left: 100%;
font-weight: normal;
}
html, body {height: 100%;}
body {padding: 0; margin: 0;}
div::after {content: ''; height: 100%; width: 2px; background: red; left: 50%; margin-left: -1px; position:absolute;}
</style>
</head>
<body>
<div>
<span>
A
<b>[24]</b>
</span>
</div>
</body>
</html>
Related
for some reason my text (link) is being pushed outside of the div container. I am wanting the text to be inside the div, and JUST the text to me clickable, not the entire div.
HTML
<div class="title">
Work
</div>
CSS
.title {
position: absolute;
background-color: red;
z-index: 5;
height: 15em;
}
.title a {
height: 15em;
font-size: 150px;
text-decoration: none;
font-family: 'Inknut Antiqua', serif;
}
When Inspecting in a browser, the '' is extremely large for some reason.
Thanks.
.title {
position: absolute;
background-color: red;
z-index: 5;
height: 15em;
}
.title a {
height: 15em;
font-size: 150px;
text-decoration: none;
font-family: 'Inknut Antiqua', serif;
}
<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua" rel="stylesheet">
<div class="title">
Work
</div>
The line-height for a font that is 150px is very large and is causing the overflow. Play around with line-height to get the effect you desire:
.title a {
height: 15em;
font-size: 150px;
line-height: 150px;
text-decoration: none;
font-family: 'Inknut Antiqua', serif;
}
https://jsfiddle.net/srza8bhk/
remove height:15em from anchor tag. and set it's line-height should be less
like:
.title a {
font-size: 150px;
line-height: 1px;
text-decoration: none;
font-family: 'Inknut Antiqua', serif;
}
I am having trouble with finding my link. When I open up my html and css in the file, I cannot visibly see it (I believe it is stuck under my div, even though the z-index is higher?) I am not entirely sure why, any help would be greatly appreciated!
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="Stylesheet" href="Stylesheet.css" />
<title>Derpycats.com</title>
</head>
<body>
<!--Background (Carbon Fibre)-->
<body background="background.jpg" alt="Background" />
<!--Header-->
<h1 id="header">DerpyCats.com</h1>
<div id="headerdiv"></div>
<!---Links-->
Home
</body>
</html>
CSS:
/* Sets the pixel density to "fill browser" */
* {
width: 100%;
height: 100%;
}
/* Heading */
#header {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #D9411E;
z-index: 2;
position: fixed;
font-size: 50px;
bottom: -50px;
}
/* CSS for the heading div */
#headerdiv {
border-radius: 5px;
z-index: 1;
position: fixed;
width: 99%;
margin-top: -20px;
height: 100px;
background-color: white;
margin-bottom: 10px;
}
/* Css for the links */
a {
z-index: 3;
font-family: Verdana, sans-serif;
}
/* CSS for the normal paragraphs */
.paragraph {
color: white;
font-family: Courier, serif;
}
P.S. I don't believe this matters, but I am on OSX using sublime text 2.
I didnt understand what are you trying to do but, #headerdiv overlays your link.
You can give z-index = -1 value to your #headerdiv to send it back.
little Change in css will work here
#headerdiv {
border-radius: 5px;
z-index: 1;
/*position: fixed; this is creating problem*/
width: 99%;
margin-top: -20px;
height: 100px;
background-color: white;
margin-bottom: 10px;
}
I have been trying to align two elements, a h2 and a div side by side without having one of them colapse when the window changes to a smaller size. I've searched the web a bit but found nothing similar that would help and my solutions just wouldn't work so I though here there would be someone able to help me.
So I want it to be displayed like this at all times:
https://imagizer.imageshack.us/v2/912x135q90/631/ZYR7sc.png (Can't post images sorry!)
But when window size changes dispite the fact the div should adapt at some point it just breaks to next line:
https://imagizer.imageshack.us/v2/730x144q90/912/yRBpkc.png
Here is my code on this one:
HTML
<div id='pagetitle'>
<h2 id='subtitle'>Weapons</h2>
<div id='hline'></div>
</div>
CSS
#pagetitle { /* This div is for centering both of the elements. */
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
display: inline-block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
text-align: center;
}
#hline {
display: inline-block;
background-color: #72c9b9;
width: 70%;
height: 1px;
position: relative;
bottom: 4px;
margin-left: 20px;
}
So this is it guys, any sugestions? Thanks in advance.
cs.almeida
Here's a way how to do it:
demo
<div id='pagetitle'>
<h2 id='subtitle'><span>Weapons</span></h2>
</div>
#pagetitle {
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
border-bottom: #72c9b9 solid 2px;
height: 18px;
display: block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
}
#subtitle > span {
background-color: white;
padding: 10px 20px;
}
I have a problem with some css in my website
this is the main CSS source :
/* html selectors ---- */
html, body {
font-family: 'Arial Unicode MS';
margin: 0;
padding: 0;
background-repeat: repeat-x;
background-color: white;
direction: rtl;
font-size: 10.3pt;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
h1 {
font-size: 17pt;
text-decoration: underline;
top: 3px;
padding-bottom: 10px;
line-height: 25px;
}
h2 {
font-family: david;
font-size: 11pt;
color: #191970;
}
h3 {
font-size: 16pt;
color: white;
margin-left: 15px;
font-weight: bold;
margin-bottom: 20px;
padding-right: 30px;
padding-top: -55px;
font-family: 'Arial Unicode MS';
}
/*page -----------*/
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
z-index: 100;
z-index: 5;
background-image: url("images/bgimage.png");
}
#leftshadow {
width: 100px;
height: 900px;
background-image: url("images/leftshadow.png");
position: absolute;
right: 840px;
z-index: none;
top: -25px;
}
#rightshadow {
width: 100px;
height: 900px;
background-image: url("images/rightshadow.png");
position: absolute;
right: -45px;
z-index: none;
top: -25px;
}
My question is how can I move the image-shdow back, behind the main content?
I tried a lot with z-index but I couldn't find a solution, can you help me solve thos problem pleas?
You forgot to use a position property in addition to the z-index property .. z-index will not work unless the element which has the z-index property applied to it is positioned using either:
position: relative;
position: absolute;
position: fixed;
Add one of those (relative preferably in your case) and it will work.
I recommend reworking your DOM structure to accomodate for this case, something like this:
<div class="content">
<div class="page"></div>
<div class="leftshadow shadow"></div>
<div class="rightshadow shadow"></div>
</div>
check out this fiddle of the how the new structure might work - http://jsfiddle.net/wHgm8/
You could also, if you wanted a nice clean shadow around the page, use css3 box-shadow, example here: http://jsfiddle.net/ASc7J/ though support is for newer browsers.
try this in your code:
box-shadow: 5px 0px 5px grey;
in above syntax, 5px is for left, 0px is for top and bottom and again 5px is for right. Play with the values untill you are comfortable. Also make sure you use hex values of color and is apt for a shadow.
You need both a position command, and "none" is not a valid z-index value. -1 works for me.
style="position:relative; z-index:-1;"
I am trying to figure out how to expand my text outside of its container. The desired effect is to have a the text expand larger than its container. Ex.//
I'm not sure how to start with this. I'm new to HTML and CSS and could use some help :)
Here's one way of doing it:
<div class="container"><span>EXAMPLE</span></div>
.container {
background: #ddd;
font-size: 30px;
width: 130px;
height: 15px;
overflow: hidden;
}
.container span {
position: relative;
top: -10px;
left: -7px;
}
http://jsfiddle.net/ZnxrT/
Note: The top/left offsets are arbitrary units. You would need to tweak them to suit your requirements.
You should apply a fixed size to the box containing the text: EXAMPLE.
After that you should put the text in the middle and size the letters so the are larger than the space of the box and apply an overflow: hidden
It should be something like that:
.box{
width: 50px;
height: 10px;
overflow: hidden;
margin: auto;
background-color: gray;
}
.text{
color: red;
font-size: 14px;
text-align:center
vertical-align:middle;
}
Here is a working example
http://jsfiddle.net/8CaQx/
<div id="outer"><div id="inner">TEXT</div></div>
#outer {
height: 36px;
width: 140px;
overflow: hidden;
background-color: black;
}
#inner {
position: relative;
top: -18px;
left: -10px;
font-size: 60px;
text-align: center;
vertical-align: middle;
font-family: arial, sans serif;
font-weight: 900;
color: red;
}
You are probably looking for the CSS overflow property.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Please see this fiddle for the code to recreate the above example: http://jsfiddle.net/E5atK/