Hello all,
I’m having issues with a box shadow! I was working on this today and it was rendering correctly, then all of a sudden it is not.
It’s extending outside the bottom right of my navigation buttons (very obvious like!).
Thank you all.
1 Like
I’d like you to try something, elCheapo.
The box shadow is applied to the <nav> box #about. Add a background-color of … say… pink… to #about. Does that give you a clue why the box shadow is running off the page to the right?
Soooo… I just added a width value and that will fix it…
Thank you. feel a bit silly now 
Instead of assigning a fixed width to the nav box, you might consider assigning display:inline-block. That will allow it to shrink to fit the anchors. Other shrink-to-fit mechanisms include floats and display:table;
May I ask which browser you use?
So far, Firefox and Chrome (mainly Chrome)…
OK. While you are developing your page, try setting the zoom feature in Firefox to “text-only”. Then zoom the size of the text a couple of clicks larger and smaller. Notice now your layout goes a bit bananas? Zooming the text a little like that simulates the probability that users may have altered their default font a size or two larger or smaller. This helps you plan your page for those people, too.
Wow. That looks pretty horrible. Is it my usage of em’s?
Just for fun, I gave this a bit of a workout. I deleted the HTML and CSS parts that were not being used to simplify this demo code and rewrote the remains. See if this is approximately what you wanted.
It will withstand a click or two of zooming before the layout starts looking funny, but the fonts that you are using are sufficiently large that zooming is unlikely to be used by most.
It is responsive and will shrink to smartphone width.
I do not know how to change/limit the height of the svg to fit the height of the viewport. Perhaps someone else can help with that.
Modern browsers only.
This is a “working page”. Copy it to a file and open it in your browser.
@SamA74 might be able to suggest some improvements if you have more questions.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Styles for Layout</title>
<!--
https://www.sitepoint.com/community/t/solved-box-shadow-escaping/212152/
elCheapo
basis: http://codepen.io/elCheapo/pen/EPvVKJ
-->
<style type="text/css">
html {
background-color:darkgrey;
width:100%;
height:100%;
}
body {
max-width:640px;
min-height:100%;
background-color:beige;
background-image:url(beigetexture.png);
margin:0 auto;
}
#bgart {
position:relative;
overflow:hidden;
margin:0 auto;
}
svg {
width:75%;
display:block;
margin:3% auto;
}
main {
position:absolute;
top:80px;
left:0;
right:0;
margin-top:3%; /* same as svg */
}
h1 {
color:white;
font:12em/.8 "Kinesis Pro 3", Kinesis, serif;
text-shadow:4px 4px 15px #000;
text-align:center;
margin:0 auto;
}
h2 {
color: #FFEEDB;
font:bold 26px "Calibri", Times, serif;
text-align: center;
letter-spacing: .04em;
margin:8% auto 0;
}
h2::after {
content:"";
display:inline-block;
width:.5em; /* centers the spade by adding length to sentence */
}
/* main navigation */
nav {
width:66%;
line-height: 60px;
box-shadow: 3px 3px 2px -1px black;
margin:2.25em auto 0;
}
nav a {
display:block;
background-color:#37383B;
color:white;
font:700 2.5em/2.7 "Calibri", Calibri, sans-serif;
text-shadow:3px 3px 7px #000;
text-decoration:none;
text-align:center;
}
nav a:hover {
background-color:#2a2a2e;
}
nav a::before {
content:url(svg/navarrow.png);
position:absolute;
left:2.5em;
}
@media screen and (max-width:640px) {
h1 {font-size:30vw;}
h2 {font-size:4vw;}
main {top:12vw;}
nav a {font-size:6vw;}
}
</style>
</head>
<body>
<div id="bgart">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 454.92 1235.8">
<defs>
<linearGradient id="a" x1="223.33" y1="776.06" x2="223.33" y2="2322.46" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#aa3925" />
<stop offset="1" stop-color="#aa3925" />
</linearGradient>
</defs>
<title>bg2</title>
<polygon points="436.5 395.55 18.42 395.55 0 36.35 454.92 36.35 436.5 395.55" style="fill:#4d4848" />
<polygon points="223.33 483.07 60.7 320.44 57.61 1235.8 389.05 1235.8 389.05 317.36 223.33 483.07" style="fill:url(#a)" />
<polygon points="389.05 317.36 389.05 0 64.23 0 60.7 320.44 223.33 483.07 389.05 317.36" style="fill:#ef533a" />
</svg>
<main>
<h1>ERIC<br>WEST</h1>
<h2>COMMUNICATION DESIGN<br>Print ♠ Web</h2>
<nav id="about">
<a href="about.html">About</a>
<a href="work.html">Work</a>
<a href="contact.html">Contact</a>
</nav>
</main>
</div>
</body>
</html>
1 Like
I will check this out tonight. Thanks for the time investment.
ronpat:
Thank you. It’s obvious to me that I can hack something together but have a lot to learn. I had a decent amount of superfluous css. Could you direct me to any resources that I can learn what properties can be applied to what display/position types?
How do you determine when to use em’s vs percentages? I notice you left some em’s and replaced some with percentages. I do know ems are based on the text size in the parent container(???).
Haven’t forgotten about you; just running a little behind today.
Here are a few links to resources that you might find of use. I find that it helps to read more than one style of composition.
http://reference.sitepoint.com/css (and HTML)
http://www.sitepoint.com/web-foundations/layout/
https://www.w3.org/TR/css3-selectors/#selectors
Cascading Style Sheets, level 2 CSS2 Specification
https://www.w3.org/TR/REC-CSS2/
9. Visual formatting model
https://www.w3.org/TR/REC-CSS2/visuren.html
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
https://developer.mozilla.org/en-US/docs/Web/CSS/display
https://developer.mozilla.org/en-US/docs/Web/CSS/position
http://www.w3schools.com/tags/
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/cssref/default.asp
I can’t recommend a particular training course for HTML/CSS first hand. There are a number of current courses to choose from. You can probably find several recommendations if you search these topics.
My most valuable learning experiences happen here. People post issues and I try to solve them. In this way, I am challenged by many problems that I would not otherwise be exposed to. If no one else has posted by the time I’m satisfied with my solution, I contribute it to the topic.
EDITING… (adding a little more)
The choice of ems or percents depends on the layout. On your page, I chose percent padding/margins top for several boxes so their heights would be reduced as the width of the page is reduced. It looked better to me.
In other words, choose ems if the padding/margins should be font-size dependent, or percents if the widths should be page width dependent. Also, consider horizontal values separately from vertical values. If the font-size does not change at narrower widths, you may choose ems or px for vertical margin/padding and percents for horizontal.
It all depends…
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.