I have been struggling to find answers as to why this does this so I'd figured I'd post it here to see if anyone else knows this happens and if there is an explaination. Or maybe it is just a CSS/HTML bug I am unaware of.
I created the following jsfiddle for an example.
#import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900');
body {
background-color: #20262e;
height: 100%;
margin: 0px;
padding: 0px;
}
.title {
margin-bottom: 0 !important;
padding-right: 100px;
color: #ffffff;
font-size: 50px;
font-family: 'Playfair Display', serif;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
line-height: 1;
position: relative;
display: inline-block;
}
.title::after {
background-color: #f5a800;
width: 80px;
height: 4px;
content: '';
position: absolute;
top: 50%;
right: 0px;
}
<div class="container">
<h1 class="title">
This Is An Awesome Title
</h1>
</div>
Simple effect and works great as long as the H1 is one line. However, once you resize the screen and the H1 breaks to 2 lines, it seems that the behavior of the H1 changes? inline-block->block? If you inspect the H1 in devtools, it goes from having its "space" go from wrapping the text to full width when it breaks and the pseudo element is then pushed way out to the right of the screen instead of the right side of the text like it is when it is on one line.
I am all out of ideas on hacks around this, I've tried floats and flex to no avail.
Open to any suggestions on how to accomplish this, or maybe its a lost cause and I am stuck with changing font sizes and padding using media queries.
Thanks.
EDIT
Here are a few screenshots to further clarify what I am asking:
Text on one line: https://screencast.com/t/W83PxIck
Text when it breaks to two lines: https://screencast.com/t/Lx8xjHkrWx
Nope, that's the expected behavior. It is still inline-block. The right side of the block is the rightmost side of the text, not the right side of the final line.
If you're looking to place it immediately after the final line, you need to use display: inline, not inline-block.
You can view the boxes by using dev tools, which will clearly show you where they begin and end.
Related
I am trying to put a <p> tag inline with an <a> tag, but I can't figure out how. I've tried several display types in css, but they either don't work or do something weird to it.
(Here is a bunch of unnecessary words because the thing is saying there is too much code and not enough words. I think its pretty dumb because what I said is enough unless someone specifically asks for details about something).
Here's some example code:
body {
margin: 0;
padding: 0;
background-color: #efefef;
}
header {
margin: 0;
margin-top: -10px;
background-color: #ffffff;
}
header p {
margin: 0;
font-family: "arial";
font-size: 50px;
color: #3c3c3c;
margin-top: 10px;
margin-left: 10px;
text-align: center;
}
header a {
}
#information {
width: 500px;
height: 250px;
background-color: #ffffff;
box-shadow: 7px 7px 4px grey;
margin-left: 100px;
margin-top: 150px;
}
#information p {
font-family: "arial";
font-size: 20px;
color: #1febff;
}
#delete {
margin-top: 2000px;
}
<!DOCTYPE html>
<html>
<head>
<title>SaHa | Color Scheme</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<p>SaHa</p>
Menu
</header>
<div id="information">
<p>Pretend that there is a bunch of important information here even though there really isn't.
This is normally where a message that actually means something would go, but this is just a
placeholder because I have nothing important to put here right now.
</p>
</div>
<div id="delete"></div>
</body>
</html>
In your HTML, try directly typing or after whatever text you want it to appear.
For example:<div>When i came<a> ut yiur name</a>so what do i do</div>
In your CSS body, try inline-block or just inline parameters with DISPLAY property to get any image or text into the normal flow of a line.
For example:
a {display:inline-block;}
Could you specify which elements in your example code you want inline?
Generally using display: inline and display: inline-block will make elements flow as if they were text. They will sit next to each other and jump to new lines when their container width gets too narrow. Browsers commonly apply display: block to <p> elements by default.
Assuming we are talking about the contents of your <header>, I added the following rule to your existing CSS. Check it out in action.
header p {
display: inline-block;
}
EDIT: Based on further comments, here is a solution to what you are looking for.
First of all I've wrapped your menu items in a nav element and made your main title a h1 element. Search engines like this better. A h1 element is also displayed inline by default and respects text-align properties on its parent container (which in this case is header).
<h1>SaHa</h1>
<nav>
Menu
Thing
Stuff
</nav>
On the CSS side I've made two crucial changes.
First, I've center-aligned your header text. This centers the new h1 element. Additionally I've set position: relative because we will need it in the next step.
header {
text-align: center;
position: relative;
}
Second, to position your menu to the right side of the screen I've lifted it from the regular flow of content with position: absolute. Now, by specifying either a top or bottom and left or right, we can position the menu anywhere in the header. Why the header? Because it is the nearest parent to nav that has a relative position. This is why we set it earlier!
nav {
position: absolute;
right: 10px;
bottom: 10px;
}
Try changing the values for right and bottom in this Codepen example. Try changing right to left and see what happens. What happens if you remove position: relative from .header?
Actually I'm new to web designing and I'm going to make my own social network and I'm using the amazing layout of Angelsmood.com music social network.
Everything is OK with designing except that I can't place the "Sign Up" button on the right place; it has a lot of margin on its right side. The problem is that there's no margin in my CSS code. Here's my code:
<div id="header_register">
Sign Up
<div>
Artists and their true fans are human angels.
Find them, connect with them and become one of them.
</div>
</div>
And Here's the CSS:
#header_register {
position: relative;
font-size: 12px;
}
#header_register a {
display: block;
height: 30px;
line-height: 30px;
background: ##810101;
color: #fff;
font-weight: bold;
font-size: 14px;
float: left;
text-decoration: none;
border: 1px #508F54 solid;
}
Please help me to fix this.
I made a fiddle and tried to fix your problem the best I could based on the information you gave us.
jsfiddle
Things I did... took your line-height out and moved the link after the div so you didn't have to use it... then I margin: 0 auto to center the <a> tag.
Instead of float: left;
I took it out added a width of the <a> tag so it did not span the width of the screen.
If you need this to function in a different way that I have illustrated ask and I will show you on the fiddle I posted.
I've got some words like WORD and REALLYLONGWORD. Both have light font and I want them to become bold on mouse over. Both have float: left; width: auto;. I can't give them fixed width.
The problem is when I hover WORD, the REALLYLONGWORD jumps to the right because WORD gets bolder font (and larger width value). Is there any CSS-only workaround to that?
EDIT (I can't answer my own question, so I'm posting answer below):
I found some CSS-only solution. HTML:
<div class="thtitled-thtitle"><div class="thtitles-title">WORD</div><div class="thtitles-titlebold">WORD</div></div>
<div class="thtitled-thtitle"><div class="thtitles-title">REALLYLONGWORD</div><div class="thtitles-titlebold">REALLYLONGWORD</div></div>
CSS:
.thtitled-thtitle { float: left; }
.thtitles-titlebold { visibility: hidden; color: #F5F5F5; cursor: pointer; float: left; font-family: 'BOLDFONT',Arial,sans-serif; font-size: 72px; line-height: 96px; min-height: 100px; text-transform: uppercase; width: auto; word-wrap: break-word; }
.thtitles-title { color: #F5F5F5; cursor: pointer; font-family: 'LIGHTFONT',Arial,sans-serif; font-size: 72px; line-height: 96px; min-height: 100px; text-transform: uppercase; width: auto; word-wrap: break-word; position: absolute; }
.thtitles-title:hover { font-family: 'BOLDFONT',Arial,sans-serif; }
Basically, I create one more hidden container with BOLD font (its width is main width) and put LIGHT font inside. After hover it still has width of BOLD word so there is no jumping.
You do not want to add any width to fonts at all, I suggest you delete the width property competely. (I also hope you noticed the writing error in your css, with should be width)
The next thing is assign a class to the the ahref this can be easily done with SPAN tags
once done in the css just do:
.firstlinkclass{
font-weight: bold;
}
Use letter spacing. For example {letter-spacing:0.04em}
If you style your WORD with enough letter spacing to make it the same overall width as the same word when it is bold, and remove the letter spacing when it is bold, everything else will stay put.
It works - try this (this just demos the concept - not what I'm recommending for production):
<b>Rotterdam</b><br>
<span style="letter-spacing:0.04em">Rotterdam</span><br/>
<b>and</b><br>
<span style="letter-spacing:0.04em">and</span><br/>
<b>Oslo</b><br>
<span style="letter-spacing:0.04em">Oslo</span><br/>
<b>letter</b><br>
<span style="letter-spacing:0.04em">letter</span><br/>
I know this was asked a long long time ago, but I just came up with a solution to fix the jump that works well so I thought I'd share.
Instead of making the font bold on hover, make it have a text-shadow. No jump, same effect, one line of CSS.
I am designing a website, with a quote on every page. I am applying CSS to this quote to make it look the best it can and stand out. However I am having a couple of issues.
.quote {
font-size: 18pt;
padding-top: 50px;
padding-bottom: 15px;
text-align: center;
line-height: 0.25;
}
.speech_mark_large {
color: #203D69;
font-size: 120px;
vertical-align: top;
}
<div class="quote">
<span class="speech_mark_large">“</span> Leading the way with innovative design of corrugated Point of Sale displays and packaging offering bespoke design to fulfill your brief.
<span class="speech_mark_large">”</span>
</div>
Also on JSFiddle.
I want the two lines of the quote to be closer together, but when I apply a line height, to solve this, it pushes the speech marks up into the previous line. How do I solve this?
You should set the line-height on the complete .quote element. Next you set vertical-align to top for the inner .speech_mark_large element. By changing the line-height of the .quote element you can tune the line spacing to what you think looks the best.
EDIT: I have added top and position to .speech_mark_large so you can change the vertical position of the quotes.
CSS
.quote {
font-size:18pt;
padding-top:15px;
padding-bottom:15px;
text-align: center;
line-height: 30px;
}
.speech_mark_large {
color:#203D69;
font-size:50pt;
vertical-align: top;
top: 5px;
position: relative;
}
See this updated JSFiddle
try this:
.speech_mark_large {
color:#203D69;
font-size:50pt;
line-height: 35px;
vertical-align:text-top;
}
line height will make them take up less space from the inline text height (which in-turn makes them float over your other text).
The vertical-align will fix this by telling the quotes to align themselves to the text's bottom, rather than normally.
I am developing a website and I have trouble with legend field which is overlapping with the table fields. I had posted the code on http://www.daniweb.com/web-development/web-design/html-and-css/threads/351601.
I searched google for this kind of error but could not resolve it.
remove position: absolute; from the following css selector
#registerForm legend {
color: #999999;
float: left;
font-size: 1em;
left: 1em;
line-height: 1.3em;
margin: 0;
padding-top: 1.25em;
position: absolute;
width: 16%;
}
Demo at http://jsbin.com/ivoyi4
After removing the position:absolute It looks better in the Firefox but in the safari the word is wrapped to the next line i.e., "User" in the first line and "information" in the second line above the table. What I wanted is to push the user information to the left side where the table starts but it acts weird in firefox with the position as absolute.