Ray.H
December 14, 2017, 5:41am
41
Here’s a revision of your code Ron, using borders on one pseudo::after
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Page</title>
<style>
.wrap {
display:table;
width:500px;
height:500px;
background: #00B45A url(https://i.imgur.com/sC3tdOw.png);
margin:0 auto;
}
.wrap::after {
content:"";
display:block;
height:157px;
margin-top:71px;
border:100px solid #ccc;
border-width:100px 0;
opacity:.8;
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
Now Ron, you know we could do this with just the <body>
element
if we really wanted to cheap out on code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Page</title>
<style>
html {
background:#fff;
}
body {
display:table;
width:500px;
height:500px;
background: #00B45A url(https://i.imgur.com/sC3tdOw.png);
margin:10px auto;
}
body::after {
content:"";
display:block;
height:157px;
margin-top:71px;
border:100px solid #ccc;
border-width:100px 0;
opacity:.8;
}
</style>
</head>
<body>
</body>
</html>
2 Likes
ronpat
December 14, 2017, 5:50am
42
Ray.H:
Here’s a revision of your code Ron, using borders on one pseudo::after
Ron, you know we could do this with just the <body> element
if we really wanted to cheap out on code.
I love it, Rockin’ Ray.!!!.
asasass
December 14, 2017, 5:53am
43
I’m stuck on this.
How would I place this text:
.music {
max-width: 968px;
height: 157px;
line-height: 1.4;
font-weight: 900;
font-style: normal;
font-size: 129px;
font-family: AR CARTER;
text-align: center;
margin: 0 auto;
background-color: transparent;
padding-top: 1px;
}
.hr3 {
color: #96d5de;
}
.hr4 {
color: #bca0da;
}
.hr5 {
color: #96d5de;
}
<p class="music"> <span class="hr3">[</span> <span class="hr4">Text</span> <span class="hr5">]</span> </p>
Inside the 2 blocks:
So that when the blocks are moved, up or down, the text stays with it.
Ray.H
December 14, 2017, 6:51am
44
Give this a whirl asasass
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Page</title>
<style>
.wrap {
display: table;/*block format for .inner margin-top*/
margin: 0 auto;
width: 968px;
height: 605px;
background:#FF7C3A url(https://i.imgur.com/RpOuDNE.png);
background-size: 968px 605px;
}
.inner {
display:table;/*block format for "p" top margin*/
width:100%;
position: relative;
margin-top: 50px; /*shift it all from here*/
/*this margin shifts the entire block*/
height: 357px;
}
.inner::after {
content:"";
position:absolute;
top:0;
width:100%;
height:157px;
border:100px solid #ccc;
border-width:100px 0;
/*opacity:.8; */
}
.inner p {
position: relative;
z-index:1;
min-height:157px;
margin:100px 0 0;
font:900 8em/1.06em AR CARTER;
text-align: center;
color: #bca0da;
/*background-color: transparent;*/
}
.inner p span {
color: #96d5de;
vertical-align:.1em;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<p><span>[</span>Text<span>]</span></p>
</div>
</div>
</body>
</html>
asasass
December 14, 2017, 7:04am
45
Update it with this text, so it’s positioned the same
This one the text is positioned in the middle of the black.
Both are positioned differently
This one the text is positioned in the middle of the black.
This one is position towards the top.
asasass
December 14, 2017, 7:19am
46
The black is 192 when it should be, 157px height.
Ray.H
December 14, 2017, 7:23am
47
Tell you what, Go back and study through the the code I posted above and try to learn something from it.
I had cleaned up all your <p>
tag html & css,
Look closely at the changes I made on the .inner p
and .inner p span
The html only uses 2 spans now and you can adjust to you liking by changing the values in the css.
Time for me to get some sleep now.
1 Like
asasass
December 14, 2017, 7:25am
48
It’s sticking outside the orange here:
Everything fits inside the black here:
How would I fit everything inside the orange space, like everything fits inside the black space?
Also:
My Text
[ TEXTT TTT TEXTT ]
Your Text:
[TEXTT TTT TEXTT]
Do you see the difference?
Ray.H
December 14, 2017, 7:47am
49
You need to realize a couple of things
Not everyone will have that font on their computer, I don’t
Here is what I see after you changed from [TEXT]
This is what people without that font will see. This is why we don’t set fixed heights on containers that hold text.
You can’t park a freight train in your garage and complain about it not fitting
4 Likes
asasass
December 14, 2017, 7:51am
50
Maybe someone who has that font will be able to better help me then.
asasass
December 14, 2017, 7:53am
51
How do I move the left and right bracket over 1 space?
[ TEXTT TTT TEXTT ]
Fixed:
asasass
December 14, 2017, 7:55am
52
What was the point of putting a color here?
#FF7C3A
I’m not entirely sure what purpose that serves at all.
Can you tell me why you put that there?
background:#FF7C3A url(https://i.imgur.com/RpOuDNE.png);
Or maybe you could do as suggested, and take time to study the code, learn how it works and learn to adjust things to your own satisfaction. You can’t expect others to make every little change for you.
To add to what Ray said, it’s unlikely that others will have the font you have chosen. In the real world, you need to provide for that situation with a (common) fallback font, and ensure your code is flexible enough to accommodate it. Alternatively, you need to serve your fancy font as a web font, to make it available to all.
2 Likes
Then try deleting the rule and see what effect it has.
You can do this very simply by using developer tools. Just uncheck the relevant rule to see the effect of deleting it without altering the actual code. Use the checkbox again to reinstate the rule.
1 Like
asasass:
What was the point of putting a color here?
#FF7C3A
I’m not entirely sure what purpose that serves at all.
Can you tell me why you put that there?
background:#FF7C3A url(https://i.imgur.com/RpOuDNE.png);
At this point, I’ve no idea which of the fiddles I’m supposed to be looking at, and I’m not prepared to wade through them all to find out; life is just too short.
asasass
December 14, 2017, 3:29pm
57
FIXED:
I removed
vertical-align:.1em;
asasass:
FIXED:
We seem to have different ideas of what constitutes “fixed”, because this is what I see:
However, it’s your code and if that’s the way you want it to function, then so be it.
1 Like
I’ve got something similar
1 Like