I'm having an issue with my main menu bar on my website. Just to be clear i am referring to the menu bar on my website that has links such as "About" and "home". I want this menu bar to be in the centre (which it is on my computer which has a 15" screen). However when i look at my website on other computers some which have a a bigger screen, the menu bar is significantly off centre to the right or left and it looks a bit rubbish. How can i standardise the position of my menu bar so it is in the centre regardless of what internet browser or different screen size is being used?
Thanks
Ben
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="aboutme.css">
<title>It's all about me!</title>
</head>
<body>
<div id="content">
<header>
<div class="grow">
<ul>
<li>Home</li>
<li>About me</li>
<li>What I love</li>
</ul>
</div>
</header>
<h1>About Me</h1>
<img src="ben.jpg" id="ben">
<h2>The Beginning:</h2>
<div id="beginning">
<p>I absolutely love coding ever since I was young. I started finding the fascination with it when I started playing a game called "runescape". When I started playing in 2007, the "botting" community started to grow massively. As a full time gamer, I found this out within that community. During my subscription with the botting client "powerbot", I started to learn JAVA and played around with other people's code. Even though I never became an expert within that language, I managed to design simple scripts which allowed my character to level up on basic skills whilst I was alseep! I loved the problem solving! I absolutely loved the community and how everyone worked as a team. However, I soon grew out of it after Runescape's anti-botting software got too advanced and I decided to play normally!
</div>
<h3>SEO and Web Developing:</h3>
<div id="seo">
<p>After finishing my education, I decided not to study a degree as there wasn't anything that I felt suited me at that time. I preferred to take on more of an entrepreneurial career. I decided to join my friend's business "GR Syndicate". Over that following years, I learnt SEO and Web developing. The Web Developing purely consisted of only coding with HTML and CSS and the websites we created were used to sell cosmetic products off. During that time, I built upon my SEO skills and developed them to rank high in Google's SERPS.
</p>
</div>
<h4>The Present</h4>
<div id="present">
<p>After working in GR Syndicate and in customer service, coding was missing from my life. This is when I decided to practice my code by building a website about one of my other passions, dogs. This gave me the opportunity to really understand CSS3 and HTML5. Even though I find CSS3 hard as there are a lot of interactive elements involved, it is my favorite part of CSS. I absolutely love the animations I see on "CSS Deck" being created the whole time. This gave me the motivation to add a couple of CSS3 elements in this website, and in my other website, such as a hero that consisted of changing pictures. After learning about more code from producing the dog website, I realised how much I loved doing it. This is when I started looking at courses, and found General Assembly. I went to the open day and I was very impressed, and I hope you are too with this website! </p>
</div>
</body>
</html>
------------------------CSS in another file------------------------
body {
background-image: url(puppy.jpg);
}
h1 {
font-family: 'Lobster', cursive;
position: absolute;
left: 200px;
text-decoration: underline;
}
#content
{ font-family:'lobster', cursive;
position: absolute;
width: 500px;
font-size: 23px;
top: 80px;
left: 25px;
}
.grow {
position: absolute;
left: 550px;
top: 700px;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
ul {
padding: 10px;
background: #dcf3ff;
border-width: 6px;
border-style: solid;
border-color: white;
}
li {
display: inline;
padding: 0px 15px 0px 15px;
border-right: 2px solid black;
border-left: 2px solid black;
}
.grow {
display: inline-block;
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
#box {
width: 485px;
height: 500px;
}
First of all remove position absolute from your element it is not nessesary to give always position:absolute to make a div center.
Then change the style as follows
#content {
font-family:'lobster', cursive;
width: 500px;
font-size: 23px;
margin:auto;
}
DEMO
UPDATED
ul{
list-style-type:none;
width:500px;
position:absolute;
bottom:0;
}
ul li{
display:inline-block;
}
ul li a{
display:block;
color:#000;
text-decoration:none;
}
DEMO
You can achieve what you want if you work out the right values for the positioning of your bar on the screen, however, it'd be difficult to mantain that positioning on different screen geometries. If you really want to position an element at the center-bottom of the screen, then this may help you (example fiddle here):
HTML:
<nav id="Navbar">
<ul id="Buttonbar">
<li>Link</li>
<li>Link #2</li>
</ul>
</nav>
CSS:
#Navbar {
display: block;
overflow: hidden;
width: 100%;
height: 64px;
position: absolute;
bottom: 15px;
}
#Buttonbar {
display: block;
overflow: hidden;
padding: 0px;
width: 400px;
height: 100%;
margin: 0px auto 0px auto;
background: grey;
}
#Buttonbar>li{
display: block;
float: left;
overflow: hidden;
list-style: none;
padding: 0px;
margin: 0px;
}
Notice that I've used the nav element as my holder, giving it a 100% width so it adjusts to any screen/window geometry and then I gave my ul an absolute size (and the background too) so it is always in the middle. Then I just set my nav to be at the botton, holding everything there. Hint: if you want the navbar to always be in the bottom, you can also use the fixed positioning attribute.
Here, I've edited your website to how I believe you want it: http://jsfiddle.net/ctwheels/3rqyk9fm/2/
HTML
<body>
<div id="content">
<h1>About Me</h1>
<h2>The Beginning:</h2>
<div id="beginning">
<p>I absolutely love coding ever since I was young. I started finding the fascination with it when I started playing a game called "runescape". When I started playing in 2007, the "botting" community started to grow massively. As a full time gamer, I found this out within that community. During my subscription with the botting client "powerbot", I started to learn JAVA and played around with other people's code. Even though I never became an expert within that language, I managed to design simple scripts which allowed my character to level up on basic skills whilst I was alseep! I loved the problem solving! I absolutely loved the community and how everyone worked as a team. However, I soon grew out of it after Runescape's anti-botting software got too advanced and I decided to play normally!</p>
</div>
<h3>SEO and Web Developing:</h3>
<div id="seo">
<p>After finishing my education, I decided not to study a degree as there wasn't anything that I felt suited me at that time. I preferred to take on more of an entrepreneurial career. I decided to join my friend's business "GR Syndicate". Over that following years, I learnt SEO and Web developing. The Web Developing purely consisted of only coding with HTML and CSS and the websites we created were used to sell cosmetic products off. During that time, I built upon my SEO skills and developed them to rank high in Google's SERPS.</p>
</div>
<h4>The Present</h4>
<div id="present">
<p>After working in GR Syndicate and in customer service, coding was missing from my life. This is when I decided to practice my code by building a website about one of my other passions, dogs. This gave me the opportunity to really understand CSS3 and HTML5. Even though I find CSS3 hard as there are a lot of interactive elements involved, it is my favorite part of CSS. I absolutely love the animations I see on "CSS Deck" being created the whole time. This gave me the motivation to add a couple of CSS3 elements in this website, and in my other website, such as a hero that consisted of changing pictures. After learning about more code from producing the dog website, I realised how much I loved doing it. This is when I started looking at courses, and found General Assembly. I went to the open day and I was very impressed, and I hope you are too with this website!</p>
</div>
</div>
<div id="mainMenu">
<div class="grow">
<ul>
<li>Home
</li>
<li>About me
</li>
<li>What I love
</li>
</ul>
</div>
</div>
</body>
CSS
body {
font-family:'Lobster', cursive;
color:black;
min-width:500px;
}
#content {
width: 500px;
font-size: 23px;
margin:auto;
position:relative;
}
#content>h1 {
text-align:center;
text-decoration: underline;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
#mainMenu ul {
margin:0 auto;
padding: 10px;
background: #dcf3ff;
border-width: 6px;
border-style: solid;
border-color: white;
}
#mainMenu ul>li {
display: inline-block;
padding: 0px 15px 0px 15px;
border-right: 2px solid black;
border-left: 2px solid black;
}
#mainMenu {
left:0;
right:0;
position:absolute;
min-width:500px;
}
#mainMenu>.grow {
position:relative;
width:100%;
text-align:center;
}
.grow {
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
Related
I've built this in many different ways, and each time I've wanted to get the nav bar on the left side of the page. Each time, I try to do it differently, but I know I'm missing something. Please help. I build the body, and then I hope to float the navigation along the left of the body.
What am I not getting?? Thank you.
Code below.
* {
margin: 0px;
padding: 0px;
}
main,
nav {
display: block;
}
#container {
width: 760px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
position: relative;
}
main {
width: 850px;
height: 1200px;
border: 5px solid black;
border-radius: 15px;
background-color: lightgreen
}
h1 {
width: 350px;
height: 30px;
padding: 5px;
margin-left: 5px;
border: 1px solid black;
border-radius: 5px;
position: relative;
}
#paraFirst {
width: 550px;
height: 200px;
padding: 5px;
border: 1px solid black;
border-radius: 5px;
position: relative;
left: 150px;
}
#listSomething {
width: 150px;
height: 150px;
padding: 5px;
border: 1px solid black;
border-radius: 5px;
position: relative;
left: 150px;
}
.orderedList {
padding: 5px;
position: relative;
left: 15px;
}
#rest {
width: 400px;
height: 780px;
padding: 5px;
border: 1px solid black;
border-radius: 5px;
position: relative;
left: 315px;
bottom: 155px;
}
nav {
margin-right: auto;
margin-left: auto;
width: 70px;
height: 250px;
float: left;
border: 5px solid black;
border-radius: 10px;
position: relative;
left: 0px;
}
ul {
list-style-type: none;
}
<div>
<main id="container">
<div>
<h1>Pixel Art</h1>
</div>
<div id="paraFirst">
<p>Pixel art is a form of digital art, created through the use of software, where images are edited on the pixel level. The aesthetic for this kind of graphics comes from 8-bit and 16-bit computers and video game consoles, in addition to other limited
systems such as graphing calculators. In most pixel art, the color palette used is extremely limited in size, with some pixel art using only two colors. Creating or modifying pixel art characters or objects for video games is sometimes called
spriting, a term that arose from the hobbyist community. The term likely came from the term sprite, a term used in computer graphics to describe a two-dimensional bitmap that is used in tandem with other bitmaps to construct a larger scene.</p>
</div>
<div id="listSomething">
<h5>Somethings just gotta be listed . . . .</h5>
<ol>
<li class="orderedList">Cool Pixel Art</li>
<li class="orderedList">Eh Pixel Art</li>
<li class="orderedList">Dodo pixel art</li>
</ol>
</div>
<div id="rest">
<h3>History</h3>
<p>The earliest counterparts of modern pixel art could be found in the electronic advertising displays of New York City during the early 20th century, with simple monochromatic light bulb matrix displays extant circa 1937.[1] Pixel art as it is known
today largely originates from classic video games, particularly classic arcade games such as Space Invaders (1978) and Pac-Man (1980), and 8-bit consoles such as the Nintendo Entertainment System (1983) and Sega Master System (1985). The term
pixel art was first published by Adele Goldberg and Robert Flegal of Xerox Palo Alto Research Center in 1982.[2] The concept, however, goes back about 11 years before that, for example in Richard Shoup's SuperPaint system in 1972, also at Xerox
PARC.[3] Some traditional art forms, such as counted-thread embroidery (including cross-stitch) and some kinds of mosaic and beadwork, are very similar to pixel art. These art forms construct pictures out of small colored units similar to the
pixels of modern digital computing. A similar concept on a much bigger scale can be seen in the North Korean Arirang Festival.</p>
<h4>Definition</h4>
<p>Although the definition of the medium is not concrete, the majority of pixel artists agree that an image can be categorized as pixel art when the artist is manipulating the image with deliberate control over the placement of each individual pixel.[4]
When purposefully editing in this way, changing the position of a few pixels can have a drastic effect on the image. Most pixel artists do not consider images that have had filters applied to them which cause the image to look pixellated to be
the same as pixel art, as the pixels that make up the image were not consciously placed by the artist, and usually do not hold much importance to the bigger picture. A common characteristic in pixel art is the low overall colour count in the image.
Pixel art as a medium mimics a lot of traits found in older video game graphics, rendered by machines which were capable of only outputting a limited number of colours at once. Additionally, many pixel artists are of the opinion that in most cases,
using a large number of colours, especially when very similar to each other in value, is unnecessary, and detracts from the overall cleanliness of the image, making it look messier. Many experienced pixel artists recommend not using more colours
than necessary.</p>
</div>
</main>
<nav>
<ul>
<li>Home</li>
<li>Slidell</li>
<li>ATL</li>
<li>Family</li>
<li>About Me</li>
</ul>
</nav>
HTML
Move the nav section below above your main tag
<nav>
<ul>
<li>Home</li>
<li>Slidell</li>
<li>ATL</li>
<li>Family</li>
<li>About Me</li>
</ul>
</nav>
<main>
.
.
.
CSS
It doesn't make sense to have float left and then margin-left/margin-right auto. Float will place your nav on the left, the margins will place the nav in the centre which means they are going to be overridden by your float style. You also don't need position: relative or left:0px.
nav {
width: 70px;
height: 250px;
border: 5px solid black;
border-radius: 10px;
}
I started doing web development about 3 days ago. I'm trying to learn as much as I can in 3 months, no frameworks or drag and drop tools.
My first website was an attempted remake of csszengarden.com, and yes, it looks much worse, but I've learned a lot.
This is what it looks like at 100% zoom.
http://prntscr.com/jocan3
This is what it looks like at 25% zoom.
http://prntscr.com/jocb3z
The image duplicates, and the text in the corner of the image does not.
How do I fix both of these?
My code is a bit messy (I think), so some tips on that would be appreciated on that too.
body {
margin: 0;
font-family: Verdana, sans-serif;
font-size: 100%;
}
h1 {
margin: 0;
}
p {
word-wrap: break-word;
width: 55%;
line-height: 1.8em;
margin: 0;
}
#endofheader2 {
margin-bottom: 4%;
}
.participation {
position: absolute;
margin-top: 64%;
color: black;
position: absolute;
margin-left: 10%;
}
.headbar {
opacity: 0.7;
color: white;
font-family: Bahnschrift, Verdana, sans-serif;
position: absolute;
width: 100%;
height: 32%;
background-color: black;
background-image: url(../img/garden8.jpg);
object-position: 50% 150%;
object-fit: none;
border-bottom: 1px solid rgba(173, 216, 230, 0.7);
}
.header-3 {
font-size: 28px;
margin-bottom: 0.7%;
}
.header-1 {
font-size: 28px;
margin-bottom: 0.7%;
}
#endofheader-1 {
margin-bottom: 2%;
}
.about {
margin-top: 40%;
color: black;
position: absolute;
margin-left: 10%;
}
.header-2 {
font-size: 28px;
margin-bottom: 0.7%;
}
.theroad {
margin-top: 25%;
color: black;
position: absolute;
margin-left: 10%;
}
.benefits {
margin-top: 84%;
color: black;
position: absolute;
margin-left: 10%;
}
.header-4 {
font-size: 28px;
margin-bottom: 0.7%;
}
#csszengarden {
font-size: 150%;
margin-left: 20%;
margin-top: 4%;
margin-bottom: 0;
}
#headbar h1 {
font-size: 3.2em;
text-transform: uppercase;
}
#beautyofcss {
margin-top: 0;
font-family: "Segoe Script", Verdana, sans-serif;
margin-left: 20%;
}
#nonlineargradient {
position: absolute;
width: 35%;
height: 600%;
background-color: rgba(65, 104, 37, 0.1);
margin-left: 66%;
}
.nonlineargradient-2 {
position: absolute;
width: 100%;
height: 70%;
background-color: rgba(110, 196, 176, 0.4);
margin-top: 60%;
}
.requirements {
margin-top: 98%;
color: black;
position: absolute;
margin-left: 10%;
}
.header-5 {
font-size: 28px;
margin-bottom: 0.7%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="headbar">
<h1 id="csszengarden">CSS ZEN GARDEN</h1>
<h2 id="beautyofcss">The Beauty of CSS Design</h2>
</div>
<div id="nonlineargradient"></div>
<div class="theroad">
<p class="header-1">THE ROAD TO ENLIGHTENMENT</p>
<p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers.</p>
<br>
<p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WASP, and the major browser creators.</p>
<br>
<p id="endofheader-1">The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
</div>
<div class="about">
<p class="header-2">SO WHAT IS THIS ABOUT?</p>
<p>There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The
HTML remains the same, the only thing that has changed is the external CSS file. Yes, really.</p>
<br>
<p id="endofheader-2">CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to
create beauty from structure. Designers and coders alike have contributed to the beauty of the web; we can always push it further.</p>
</div>
<div class="participation">
<p class="header-3">PARTICIPATION</p>
<p>Strong visual design has always been our focus. You are modifying this page, so strong CSS skills are necessary too, but the example files are commented well enough that even CSS novices can use them as starting points. Please see the CSS Resource
Guide for advanced tutorials and tips on working with CSS.</p>
<br>
<p>You may modify the style sheet in any way you wish, but not the HTML. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</p>
<br>
<p>Download the sample HTML and CSS to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your CSS file to a web server under your control. Send us a link to an archive of that file and
all associated assets, and if we choose to use it we will download it and place it on our server.</p>
</div>
<div class="benefits">
<p class="header-4">BENEFITS</p>
<p>Why participate? For recognition, inspiration, and a resource we can all refer to showing people how amazing CSS really can be. This site serves as equal parts inspiration for those working on the web today, learning tool for those who will be tomorrow,
and gallery of future techniques we can all look forward to.</p>
</div>
<div class="nonlineargradient-2"></div>
<div class="requirements">
<p class="header-5">REQUIREMENTS</p>
<p>Where possible, we would like to see mostly CSS 1 & 2 usage. CSS 3 & 4 should be limited to widely-supported elements only, or strong fallbacks should be provided. The CSS Zen Garden is about functional, practical CSS and not the latest bleeding-edge
tricks viewable by 2% of the browsing public. The only real requirement we have is that your CSS validates.</p>
<br>
<p>Luckily, designing this way shows how well various browsers have implemented CSS by now. When sticking to the guidelines you should see fairly consistent results across most modern browsers. Due to the sheer number of user agents on the web these
days — especially when you factor in mobile — pixel-perfect layouts may not be possible across every platform. That’s okay, but do test in as many as you can. Your design should work in at least IE9+ and the latest Chrome, Firefox, iOS and Android
browsers (run by over 90% of the population).</p>
<br>
<p>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum, and try to incorporate unique and interesting visual themes to your work. We’re well past the point of needing another garden-related
design.
</p>
<br>
<p>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see submission guidelines), but we ask you release your CSS under a Creative Commons license identical to the one on this
site so that others may learn from your work.</p>
</div>
</html>
use the background-repeat property on your headbar and set it to no-repeat
.headbar {
background-repeat: no-repeat;
}
I have a few questions:
How can I make the image below not interfere with the navigation bar? I've tried various height adjustments and it doesn't move.
How can I make the text read as a paragraph aligned to the right and the image lower and to the left- in other words the paragraph and image parallel to each other. Would this include JavaScript?
I also need help with the alignment of the H1.
I have only used CSS and HTML so far- I've researched everywhere and can't find my solutions. What makes it hard is I know what I want but don't know the terms used to find the solutions. Any help is appreciated! Here is my CSS code:
body{
background-color: #2F3A3B;
text-align: justify;
width: 800px;
text-decoration: none;
color: white;
font-family:'Oswald', sans-serif;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover{
background-color: #111;
}
h1{
text-align: relative;
}
.circular--portrait {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}
.circular--portrait img {
width: 100%;
}
p{
position:relative;
left: 200px;
top: 40px;
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>About Eddie Munoz</title>
<link rel="stylesheet" type="text/css" href="about.css">
</head>
<div class="circular--portrait">
<img src="images/idpic.jpg">
</div>
<body>
<ul>
<li>About</li>
<li>Gallery</li>
<li>Resume</li>
<li>Contact</li>
</ul>
<div class= "column-one">
<p>Eddie Munoz has been creating art from the age of 13. While he was
completing his Bachelors of Applied Science in Human Relations he was
freelancing on the side. Eddie has created numerous character artists.
ljaldjflakjfldjf;lajf;lkjd;</p>
</div>
<div class="column-two">
<h1>What others are saying</h1>
<p>"Eddie is the best young talent I have had the pleasure to work with. He
has a great eye for detail and really finds the fun in whatever project he
is given no matter the size. Eddie strives to learn every nuance of 3D
gaming tech as well as distributing that knowledge once learned. Eddie is an
amazing talent that is bound for superstar status." - Billy Ashlswede, Art
Lead at Riot Games</p>
<p>"Eddie was a highly valued Character Artist with proficiency in many
different modeling programs. He was a very dedicated artist who frequently
helped others and went out of his way to produce additional assets for our
game. Eddie has not only a very technical, but also a very artistic mindset.
All of these qualities make Eddie a great asset to any team." -Kyle Sarvas,
Game Artist/Game Designer</p>
</div>
</body>
</html>
I've made one change to your HTML:
Move circular--portrait just before column-one
And several to your CSS:
Remove text-align: relative; from h1
Remove position: relative; from .circular--portrait
To .circular--portrait set a width of 25% and make it float to left
To p that is descedent of .column-one make float to right and width of 65% (it has to be bellow 75% to float properly)
To column-two make float to left (also works with floating right)
body{
background-color: #2F3A3B;
text-align: justify;
width: 800px;
color: white;
font-family:'Oswald', sans-serif;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover{
background-color: #111;
}
.circular--portrait {
margin-top: 50px;
width: 200px;
height: 200px;
overflow: hidden;
border-radius: 50%;
}
.circular--portrait img {
width: 100%;
}
.circular--portrait {
width: 25%;
float: left;
}
.column-one p{
width: 65%;
float: right;
margin-top: 150px;
margin-left: 10px;
}
.column-two {
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>About Eddie Munoz</title>
<link rel="stylesheet" type="text/css" href="j.css">
</head>
<body>
<ul>
<li>About</li>
<li>Gallery</li>
<li>Resume</li>
<li>Contact</li>
</ul>
<div class="circular--portrait">
<img src="http://pngimg.com/uploads/face/face_PNG5660.png">
</div>
<div class= "column-one">
<p>Eddie Munoz has been creating art from the age of 13. While he was
completing his Bachelors of Applied Science in Human Relations he was
freelancing on the side. Eddie has created numerous character artists.
ljaldjflakjfldjf;lajf;lkjd;</p>
</div>
<div class="column-two">
<h1>What others are saying</h1>
<p>"Eddie is the best young talent I have had the pleasure to work with. He
has a great eye for detail and really finds the fun in whatever project he
is given no matter the size. Eddie strives to learn every nuance of 3D
gaming tech as well as distributing that knowledge once learned. Eddie is an
amazing talent that is bound for superstar status." - Billy Ashlswede, Art
Lead at Riot Games</p>
<p>"Eddie was a highly valued Character Artist with proficiency in many
different modeling programs. He was a very dedicated artist who frequently
helped others and went out of his way to produce additional assets for our
game. Eddie has not only a very technical, but also a very artistic mindset.
All of these qualities make Eddie a great asset to any team." -Kyle Sarvas,
Game Artist/Game Designer</p>
</div>
</body>
</html>
I'm just learning/practicing, so any help would be SUPER appreciated. Also, if you find other errors or inefficiencies while looking, I'd love to hear about it.
I have four layers.
.body
.main
.main-side
.sidebar
This is essentially what I'm trying to recreate , and everything is working fine other than the third layer, or in the case of the example, the navy blue bar extending vertical on the right side. I can get it to go to the second layer (right above the main background) or cover up everything (including the sidebar), but I can't get it between layer two and four (in the example, the light blue inner box and the smaller, yellow side box.) Thanks in advance!
Here is the HTML and the CSS.
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="./style.css"/>
<title>CSS Zen Garden</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="main-side"></div>
<div class="main">
<h1 class="redbox">CSS Zen Garden</h1>
<h2>The Beauty of CSS Design</h2>
<div class="sub-heading">
<p class="top>">A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page.</p>
<hr>
<p class="bottom">Download the example HTML file and CSS file
</div>
<div class="enlightenment">
<h3>The Road to Enlightenment</h3>
<p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers</p>
<p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP, and the major browser creators.</p>
<p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
</div>
<div class="about">
<h3>So What is This About?</h3>
<p>There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The HTML remains the same, the only thing that has changed is the external CSS file. Yes, really.</p>
<p>CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. Designers and coders alike have contributed to the beauty of the web; we can always push it further.</p>
</div>
<div class="participation">
<h3>Participation</h3>
<p>Strong visual design has always been our focus. You are modifying this page, so strong CSS skills are necessary too, but the example files are commented well enough that even CSS novices can use them as starting points. Please see the CSS Resource Guide for advanced tutorials and tips on working with CSS.</p>
<p>You may modify the style sheet in any way you wish, but not the HTML. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</p>
<p>Download the sample HTML and CSS to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your CSS file to a web server under your control. Send us a link to an archive of that file and all associated assets, and if we choose to use it we will download it and place it on our server.</p>
</div>
<div class="benefits">
<h3>Benefits</h3>
<p>Why participate? For recognition, inspiration, and a resource we can all refer to showing people how amazing CSS really can be. This site serves as equal parts inspiration for those working on the web today, learning tool for those who will be tomorrow, and gallery of future techniques we can all look forward to.</p>
</div>
<div class="sidebar">
<h3>Select a Design:</h3>
<ul>
<li>
Mid Century Modern by Andrew Lohman
</li>
<li>
Garments by Dan Mall
</li>
<li>
Steel by Steffen Knoeller
</li>
<li>
Apothecary by Trent Walton
</li>
<li>
Screen Filler by Elliot Jay Stocks
</li>
<li>
Fountain Kiss by Jeremy Carlson
</li>
<li>
A Robot Named Jimmy by meltmedia
</li>
<li>
Verde Moderna by Dave Shea
</li>
</ul>
<h3>Archives:</h3>
<ul>
<li>
Next Designs <span class="indicator">›</span>
</li>
<li>
View All Designs
</li>
</ul>
<h3>Resources:</h3>
<ul>
<li>
View This Design’s CSS
</li>
<li>
CSS Resources
</li>
<li>
FAQ
</li>
<li>
<a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file.">
Submit a Design</a>
</li>
<li>
Translations
</li>
</ul>
</div>
<div class="requirements">
<h3>Requirements</h3>
<p>Where possible, we would like to see mostly CSS 1 & 2 usage. CSS 3 & 4 should be limited to widely-supported elements only, or strong fallbacks should be provided. The CSS Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your CSS validates.</p>
<p>Luckily, designing this way shows how well various browsers have implemented CSS by now. When sticking to the guidelines you should see fairly consistent results across most modern browsers. Due to the sheer number of user agents on the web these days — especially when you factor in mobile — pixel-perfect layouts may not be possible across every platform. That’s okay, but do test in as many as you can. Your design should work in at least IE9+ and the latest Chrome, Firefox, iOS and Android browsers (run by over 90% of the population).</p>
<p>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum, and try to incorporate unique and interesting visual themes to your work. We’re well past the point of needing another garden-related design.</p>
<p>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see submission guidelines), but we ask you release your CSS under a Creative Commons license identical to the one on this site so that others may learn from your work.</p>
<hr>
<div class="author">
<p>By Dave Shea. Bandwidth graciously donated by mediatemple. Now available: Zen Garden, the book.</p>
</author>
</div>
<footer>
HTML
CSS
CC
A11y
GH
</footer>
</div>
</body>
</html>
body {
font-family: 'Source Sans Pro';
line-height: 120%;
font-size: 16px;
font-weight: 400;
color: #333;
background: #daede2;
z-index: 1;
width: 90%;
vertical-align: center;
}
p {
font-size: 20px;
line-height: 140%;
padding-left: 50px;
}
h1 {
font-weight: 300;
text-transform: uppercase;
font-size: 30px;
color: white;
margin-bottom: -25px;
}
h2 {
font-weight: 900;
font-size: 130px;
line-height: 100%;
color: white;
letter-spacing: -.025em;
line-height: 1em;
width: 65%;
margin-left: 50px;
position: relative;
}
.sub-heading {
text-transform: uppercase;
width: 60%;
margin: 0 0 50px 14px;
position: relative;
color: white;
letter-spacing: .07em;
font-size: 18px;
}
h3 {
font-size: 30px;
font-weight: 400;
padding-left: 50px;
}
.main {
background: #77c4d3;
position: relative;
top: 50px;
left: 50px;
z-index: 2;
height: 5000px;
}
.main-side {
background: #3a4453;
position: absolute;
left: 1020px;
height: 2000px;
top: -200px;
width: 30%;
z-index: 1;
}
.redbox {
background: #df3c56;
position: relative;
top: 50px;
left: 50px;
padding: 25px;
width: 224px;
text-align: center;
}
.enlightenment {
background: #f2f9fb;
padding: 50px 50px 50px 0;
width: 58%;
position: relative;
top: 40px;
margin-bottom: 150px;
}
.about {
color: white;
width: 45%;
margin-bottom: 100px;
margin-top: 250px;
}
.about h3 {
color: white;
}
.benefits {
background: #f2f9fb;
position: relative;
top: 225px;
float: left;
padding: 50px;
width: 25%;
left: 50px;
}
.sidebar {
background: #e9f198;
position: absolute;
top: 70px;
right: 0px;
width: 25%;
font-size: 18px;
line-height: 200%;
letter-spacing: -.01em;
padding-right: 40px;
z-index: 4;
}
.sidebar a, h3 {
color: #333;
}
.sidebar h3 {
font-weight: 400;
padding-left: 40px;
margin-bottom: -20px;
}
.sidebar ul {
list-style-type: none;
}
.participation {
background: #df3c56;
float: right;
width: 45%;
color: white;
position: relative;
top: -618px;
right: 80px;
padding-top: 50px;
}
.participation p {
padding: 0 50px 0 50px;
}
.participation h3 {
color: white;
}
.requirements {
background: #f2f9fb;
position: relative;
float: right;
top: -625px;
width: 57%;
padding: 50px;
}
.requirements a {
color: #333;
text-transform: uppercase;
}
.author {
text-transform: uppercase;
}
footer {
background: #e9f198;
position: relative;
top: 119px;
padding: 25px;
font-size: 22px;
word-spacing: 10px;
color: #333;
left: -440px;
width: 80%;
}
a {
text-decoration: none;
color: white;
border-bottom: solid 1px #999;
padding-bottom: 2px;
}
hr {
border: 0;
height: 0;
border-top: 1px solid #df3c56;
width: 93%;
margin: 50px 0 50px 50px;
}
All you need to do is move .main-side into .main so you can add the right z-index to it to make it overlap like the example you posted and adjust the values:
.main-side {
background: rgba(58,68,83, .8); //convert to rgba so you can fade the background like the example
position: absolute;
right: -150px; //update - change to right instead
height: 2400px; //update
top: -200px;
width: 30%;
z-index: 1;
}
I also converted some of your colors to rgba to give it that transparent look.
FIDDLE
I'm not quite sure what you're asking, but here's a few things that might help. First, to achieve what they are with the yellow menu, you should use something like this:
.sidebar {
background: #e9f198;
position: absolute;
top: 70px;
right: -100px;
width: 25%;
font-size: 18px;
line-height: 200%;
letter-spacing: -.01em;
padding-right: 40px;
z-index: 4;
}
You'll see that the sidebar is now placed more like theirs.
And with these two changes, does it get closer to what you're looking for?
.main {
background: #77c4d3;
position: relative;
top: 50px;
left: 50px;
z-index: 2;
height: 5000px;
}
.main-side {
background: #3a4453;
position: absolute;
left: 900px;
height: 2000px;
top: 70px;
width: 30%;
z-index: 1;
}
I've also made a JSFIDDLE, which you should always do in the future for questions like this!
Link to my website: http://foxweb.marist.edu/users/kf79g/about.php
Picture of problem:
http://tinypic.com/r/11t20k7/5
I am having a lot of difficulty getting my image to be responsive and not shrink on IE 8. The page itself works fine on most other browsers. I want the page to look like it does on most modern browsers.
All of my code is located in external style sheets (after right clicking view source):
<div id ="about_center">
<div id="dp_section">
<img src="images/Business%20Picture.jpg" id="dp" alt="Leonard Pfautsch"/>
</div>
</div>
<div id = "new_line_about">
<div id='about_section'>
<p>
My name is Leonard Pfautsch.
</p>
<br/>
<p>
Currently I am an student at Marist College in Poughkeepsie, NY. My area of study is Information Technology, but I am still
very interested in the Computer Science field as well. At school and at home, I am always studying and learning new things.
</p>
<br/>
<p>
In my studies, I have really gained a fascination for all aspects of technology. This includes:
web development, internetworking, system administration, information security, data management, computer architecture,
cloud computing, gaming, and mobile application development.
</p>
<br/>
<p>
In all aspects of work, I always strive for perfection. Whenever I work, I make sure the job is done correctly and efficiently.
I always do my best with any challenge I am faced with. In terms of client satisfaction, I will go above and beyond to give
people the best experience possible.
</p>
</div>
</div>
</section>
/* ABOUT */
#dp_section {
float:left;
}
#dp {
border:10px solid #161616;
width:200px;
max-width:100%;
border-radius:10px;
box-shadow:0px 0px 15px #272727;
margin-bottom:10px;
background-color:black;
margin-right:10px;
margin-left:-10px;
}
#about_section {
width:100%;
max-width:100%;
margin:0px;
}
section{
width:100%;
}
#about_center{
width:200px;
height:auto;
margin:0 auto;
max-width:100%;
}
I tried everything in my knowledge to fix this but I am stuck. I also tried responsive.min.js which did fix most of my issues, but not this one. If anybody could help me out I would really appreciate it.
Maybe you need to clear your Browser Cache? The picture works fine for me all the way back to IE 7, but your text in IE 7 is rendering below the image. #dp in your CSS should probably have a height, and float:left; like:
#dp{
background-color: black;
border: 10px solid #161616;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 15px #272727;
margin: 0 10px 10px -10px;
width: 200px;
height: 279px;
float: left;
}
Note:
Your Picture is 1509px wide by 2104px high. You should use an image editor to resize your image and store it on your site at the appropriate width and height, otherwize it takes longer to load. You can surround it like:
<a id='dpLink' href='images/Business%20Picture.jpg'>
<img alt='Leonard Pfautsch' id='dp' src='yourResizedImage.jpg' />
</a>
If you do want to make a link to your full size image make sure your CSS looks more like:
#dpLink,#dp{
width: 200px;
height: 279px;
float: left;
}
#dpLink{
display: block;
border: 0;
margin: 0 10px 10px -10px;
}
#dp{
background-color: black;
border: 10px solid #161616;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 15px #272727;
}
Additionally, border-radius and box-shadow are HTML5, so they won't render in Browsers before IE 9.