I have some text with images aligned left or right, wrapped by text. Their alignment is hardcoded in the .html file like this: <img style="float:left" ... />. When the image is aligned left, I want to have some space to the rigth (margin: 0 1rem 0 0). And vice versa, if the image is on the right, I want to have some space to the left (margin: 0 0 0 1rem). See the scheme below. I need to do this by styles in styles.css file, something like:
figure[style="float: left;"] {
margin-right: 2rem;
}
figure[style="float: right;"] {
margin-left: 2rem;
}
Please anyone help me with it!
The problem with the selector you write is that it should be identical to the way it's written in HTML (same letter cases, same white spaces ... etc).
So according to the HTML you wrote, you should modify it to the following
figure[style="float:left"] {
margin-right: 2rem;
}
figure[style="float:right"] {
margin-left: 2rem;
}
Or you can use something like the following
figure[style*="float:left"] {
margin-right: 2rem;
}
figure[style*="float:right"] {
margin-left: 2rem;
}
The asterisk means that the style contain float:left or float:right and apply the required style.
There is something that comes to my mind but I never tested it's working fine, I tested it.
figure[style*="float"][style*="left"] {
margin-right: 2rem;
}
figure[style*="float"][style*="right"] {
margin-left: 2rem;
}
This should test that the selector contain both combination (float, right or left). Didn't test it though.
You can do attribute-based selectors, I never tried doing it with styles, but it's a bad idea. Even if it works, it assumes that no other style is applied on your tag. It is highly unreliable. Tried
<!DOCTYPE html>
<html>
<head>
<style>
a[style="color:red;"] {
background-color: yellow;
}
</style>
</head>
<body>
<p>The link with target="_blank" gets a yellow background:</p>
w3schools.com
disney.com
wikipedia.org
</body>
</html>
and it appears to be working (the yellow background is successfully applied) in FireFox. However, this is a very bad idea, it would be much wiser to create these CSS classes:
.fl {
float: left;
}
.fr {
float: right;
}
Refactor your hard-coded styles to use these classes instead and use class-based selectors afterwards. So, the thing you want to achieve is achievable, but not recommendable.
It's a tiny issue you may didn't notice which is semicolon because in css file you should write the exact css selector as it appears in html attribute, see below for example:
p[style="color: red;"] {
background-color: yellow;
}
p[style="color: red"] {
background-color: green;
}
<p style="color: red;">This will be yellow bg!</p>
<p style="color: red">This will be green bg!</p>
BUT as #Lajos Arpad mention in his answer, it's a bad idea to style your css depending on html attributes.
This is my first answer.
If for some reason padding like this doesn't work:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
else I would add styling to the paragraph itself and not just the image.
You could also use different classes for different images:
figure1[style="float: left;"] {
margin-right: 2rem;
}
figure2[style="float: right;"] {
margin-left: 2rem;
}
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?
I've been trying to solve the following problem.
If you run this code you will notice blue and red elements.
How can I hide the 'red element' when there is no text to display (span is empty). And I would like to do the same thing with 'blue element' when there is no text inside it shouldn't be visible.
The reason why is displayed is padding, but I would like to have padding because it looks nice.
I am sure you guys are best of the best and find solution.
Regards!
.myClassDer {
font-size: 34px;
color:white;
background: blue;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
.myClassDie {
font-size: 34px;
color:black;
background: red;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
<span class="myClassDer">here</span>
<span class="myClassDie"></span>
If you don't require support for IE8, you can use pseudo-state :empty (here for more examples ) to reset padding for all instances of .myClassDie without content, using the following code.
.myClassDie:empty
{
padding:0;
}
Updating your working example, it becomes:
.myClassDer
{
font-size: 34px;
color:white;
background: blue;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
.myClassDie
{
font-size: 34px;
color:black;
background: red;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
.myClassDie:empty
{
padding:0;
}
<span class="myClassDer">here</span>
<span class="myClassDie"></span>
<span class="myClassDie">ClassDie but with content</span>
In which I inserted two <span class="myClassDie"> to show you the behaviour with and without content.
Due to effective invisibility of "empty" case, if you want a more compact solution, you can collapse the two separate rules into only one, simply setting:
.myClassDie:not(:empty)
{
font-size: 34px;
color:black;
background: red;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
In this case, only if .myClassDie is not empty, you'll apply all properties.
This is equivalent for this specific case, but if you want to see this DIV also if empty, limiting only to reset padding (for example because it has fixed size or borders), you must use first solution, not the more compact one.
Little precisation about :empty pseudo-class
Previous examples run correctly only if empty elements are effectively empty, this means that this code <span class="myClassDie"></span> is correctly targeted, but this one (that contains a whitespace) <span class="myClassDie"> </span> isn't.
In general, this could be an issue because often code is dynamically generated or otherwise contains white spaces due to code indentation.
In the past, Mozilla introduced its proprietary pseudo-class :-moz-only-whitespace, but no other browser currently supports this yet.
W3 also tried to solve this kind of problems, initially with analogue :blank pseudo-class (again with no browser support) in "Selectors Level 3", but this did not have expected success.
So, since beginning of 2018, W3 modified its definition to represent empty user input, rather than empty elements and contemporarily modified :empty definition to consider also white-spaces, but currently this last feature is not implemented too in different browsers.
Empty pseudo class only checks for empty text
.myClassDie:empty{
padding:0;
}
But for whitespaces use blank pseudo class
.myClassDie:blank{
padding:0;
}
There is a css pseudoclass empty which you could use here:
.myClassDie:empty {
display: none;
}
Your updated JSFiddle
You can do the trick with the CSS3 pesudo-class :empty
span:empty{
padding:0;
}
Note: using above selector you will not have to worry about which span
has value and which one has not. it will reset padding for those span
which are blank (empty).
I guess you could use above piece of code to hide the empty span's padding.
span:empty {
padding: 0;
}
you can you :empty also read the below like.
https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes
.myClassDie:empty {padding:0;}
I am learning how to code HTML and CSS, and I decided to make my own website in the process.
My question is: how would I align smaller text to a bigger object, for example, links to different pages on my website neatly aligned under my full name with the links flush to the of the beginning and end of my full name?
I know describing it may have been a bit confusing, so here's an image of what I mean:
Any suggestions?
Thanks!
You can approximate the look and design regardless of the header length, but in the end, CSS doesn't offer as precise typographical tools as you'd need and you will have to nudge the percentages one way or another once you know the length of your actual text.
Sample Jsfiddle
HTML:
<div id="container">
<h1>Large Title Here Etc</h1>
<div id="sub">
<span>music</span>
<span>film</span>
<span>web</span>
<span>photo</span>
</div>
</div>
CSS:
body {
text-align: center;
}
#container {
display: inline-block;
}
h1 {
font-size: 2em;
}
#sub {
font-size: 1em;
display: table;
width: 120%;
box-sizing: border-box;
margin: 0 -10%;
}
#sub span {
display: table-cell;
padding: 0 2%;
}
links flush to the beginning and end of my full name
Get out of the habit of thinking this way as you design websites. This will lead to endless headaches and frustrations for you, as it depends on browser rendering (and possibly rendering bugs), the user's font size, the user's font, and loads of other factors you cannot control. Instead of going for 'pixel precision', the idea is simply to make it look as good as you can on most things.
When designing things like this, consider the markup first. What is the structure of what you're actually writing? In your linked image, Full Name looks to me like a header (perhaps h1), while menus like that are normally done as styled unordered lists (ul) these days. Below is an example of how I might make something similar to what is in your image.
Here is the markup:
<div id="container">
<h1>Full Name</h1>
<ul>
<li>music</li>
<li>film</li>
<li>web</li>
<li>photo</li>
</ul>
</div>
and the CSS used, with comments:
#container { border: 1px solid; }
h1 {
margin-bottom: 0;
text-align: center;
}
ul {
margin: 0.5em;
/* remove default padding inserted by browser */
padding-left: 0;
/* no bullets */
list-style-type: none;
/* this works on inline objects, not just text */
text-align: center;
}
li {
/* hybrid of inline and block; obeys text-align */
/* Also note this does not work in IE <9. Workarounds exist. */
display: inline-block;
padding: 3px;
}
And here is the end result: http://jsfiddle.net/3PLgz/1/
I have the text
Coupon*
in font size 30px. However I want to make the * not in 30px but smaller. How can I achieve this?
http://jsfiddle.net/LkLGE/
Thanks
To keep the asterisk aligned on the top, you can put the character in a <sup> tag and reduce its font-size:
<div class="text">Coupon<sup>*</sup></div>
.text {
font-size: 30px;
}
.text sup {
font-size: .5em;
}
JSFiddle example
As an alternative to <span> based answers <sup or <sub> or <small> might be a better starting point from a semantic standpoint.
<sup> is superscript and will raise the *.
<sub> is subscript and will lower the *.
<small> might require adding some css *, but shouldn't already have a position change. See http://www.w3.org/TR/html5/text-level-semantics.html#the-small-element
Fiddle to show it in action: http://jsfiddle.net/6jmKT/
Coupon<span style="font-size:any size that you want">*</span>
I'm not sure about your case, but sometimes you want to do this in many places. Sometimes, you'll have a "new" or "special" item and you'll add a class with javascript to denote this.
Think about if you have to change this somewhere and how many places you might need to edit this span. Of course you could find-and-replace, but try THIS FIDDLE out and see what you think. CSS content() is pretty amazing for stuff like this.
HTML
<div class="thing special">
<!-- where special might be added by javascript -->
Coupon
</div>
CSS
.thing {
font-size: 30px;
color: blue;
}
.special:after {
display: inline-block;
/* so you can use "block" like stuff on it - (margin-top etc) */
/* this way you wouldn't have to change it in the html in a ton of places. just one - here. */
content: "*";
font-size: 15px;
color: red;
/* just for specific positioning */
vertical-align: top;
margin-left: -8px;
margin-top: 5px;
}
OR
sup is totally cool too - I think...
HTML
<p>Coupon<sup class="star">*</sup></p>
CSS
p {
font-size: 30px;
}
p .star {
font-size: 15px;
color: red;
}
When in doubt, put it in a span - FIDDLE
#myspan {
font-size: 10px;
}
This FIDDLE is a bit reductio ad absurdum, but it was fun!
You can use span and you can use <sup> tag:
EXAMPLE
<div class="text">Coupon<span class="star"><sup>*</sup></span></div>
.text {
font-size: 30px;
}
.star {
font-size: 12px;
}
http://jsfiddle.net/LkLGE/4/
The most robust way is to use the small element. If you wish to tune its effect to some specific size reduction, it is best to use a class attribute on it. Example:
<style>
.ast { font-size: 70% }
</style>
...
Coupon<small class=ast>*</small>
However, the asterisk “*” is rather small in many fonts, so size reduction easily makes it too small. If you think you need to reduce its size, you probably need a different font.
I have a header which I constructed like this:
<header class="top">
<a href="">
<span class="right">Stichting Delftsche Opera Compagnie presenteert</span>
<h1 class="right">Carmen</h1>
<h2 class="right">Een opera door Krashna Musika en de TU Delft</h2>
</a>
</header>
This should look like this, as someone made this in Adobe Illustrator
Then I applied some css and got to this (in the original there is a Dutch spelling mistake, this one is corrected, the scale is not completely equal either):
The rules:
.top {
display: block;
width: 800px;
float: right;
}
.top a {
background-image: url('../img/logo.jpg');
background-size: 150px 150px;
background-repeat: no-repeat;
padding-left: 150px;
height: 175px;
display: block;
overflow: hidden;
}
.top .right {
text-align: justify;
width: 650px;
}
.top span, .top h2 {
color: #E02C33;
font-size: 1.8em;
}
.top h1 {
color: #B02025;
font-size: 4.7em;
text-transform: uppercase;
}
I have two issues here:
How can I justify both the <span> and <h2> to their equal lengths (my justify is not working as expected)
How can I constraint "CARMEN" such the width and height are pre defined, the spacing between characters is rendered by the browser
The problem with justify is that the last line is usually no justified, because the letter spacing would be too long.
If you can use CSS3, there are new attributes, which make this possible:
http://www.css3.com/css-text-justify/
If the header always stays the same, you can also adjust the font-size and letter-spacing attributes, until it fits.
One important thing is that while creating graphics initially in adobe photo shop or illustrator etc. is different and when we implement in actual webpage the output may vary little bit in some cases. So we have to write css like that so we can accomplish the desired design. Thanks.
see fiddle for code and demo
Fiddle: http://jsfiddle.net/ybf25/3/
Demo: http://jsfiddle.net/ybf25/3/embedded/result/
Note: As i don't have the Rose image so i was not able to create Demo as your given image in question.
See screen shot for output: Please open the screen shot in new window to see clear image.