Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Website Troubleshooting

laurenashley

laurenashley

macrumors regular
Original poster
Jun 24, 2013
225
65
Bloomington, IN
Hey everyone!

I am currently developing my personal website and I have a very clear vision of what I want it to look like.

I'm having a couple of issues I would like to ask about:

  1. When I have a div width set to 100%, there is still a small margin (like 5px) on the sides. Is the only way to combat this to set width to more than 100%?

  2. I figured out how to set an image in the center of a div (I have a banner background, then banner text, I used display:table and table cell) but I am trying to put text inside my other div's, and cannot get it to be a certain width and still be centered. I want the text to only take up like 50-60% of the page width.

  3. I have just one page, so there different sections have id's so I can link to them within the page. What are my options to provide a smooth scrolling effect when one of the links are clicked?
Here is the inspiration for my design so you can visualize what I am wanting.

I want to knock out all these things tonight because I am using it as a class project that is due tomorrow night.

Thanks!
 
O

olup

Cancelled
Oct 11, 2011
383
40
to your first question: did you set the margin to 0 on the body? If not, then that's where the 5px margin is coming from.

question 2: Without any code, it's difficult to say what you are trying to accomplish. Does the image take up 100% of the container and the text is centered within another div? It would be better, if you could outline what you're doing in code here, so things are a bit easier to understand. ;)

question 3: there are tons of smooth scrolling scripts such as https://css-tricks.com/snippets/jquery/smooth-scrolling/
 
O

olup

Cancelled
Oct 11, 2011
383
40
cool. Just had a brief look at the website, I like the design, but since you have nearly everything wrapped in a div, even links(the arrow navigation), it's hard to say which section you are refering to.
I suppose it's the hero image because that looked a little off(see code below).

With HTML5 you wouldn't need that many divs because it adds semantic meaning and structure to your layout.

Code: 
<!-- your overall layout could be something like this -->
<!DOCTYPE HTML>
<head>
<style>
#header {
  background: url(../bg.jpg) no-repeat top center;
 background-size: cover;
position: relative;
top: 0;
left: 0;
width: 100%;
}
#header > img {
  display: block;
  margin: 100px auto;
}
</style>
<!-- this javascript will be needed in order to have IE8 play along nicely with HTML5 elements-->

<!--[if lt IE9]>
<script src="html5shiv.js"></script>
<![endif]-->
</head>
<body>
<header id="header">
<img src="img/hero.jpg" alt="hero" />
</header>

<!-- main element can only be used once on the page -->
<main id="content">
<section id="about">
<h1>Who am I ?</h1>
</section>
<section id="work">
<h1>Work & School History</h1>
</section>
....
</main>
<footer id="footer">
<h1>Contact</h1>
</footer>
</body>
</header>

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 is a good resource to get you started on using HTML5 elements.
Anyways that was just a pointer.

If you tell me, what particular element is causing you trouble, I'll be happy to help you out.
 
laurenashley

laurenashley

macrumors regular
Original poster
Jun 24, 2013
225
65
Bloomington, IN
The main reason I used the divs were because I wanted each section to have a different background color, and I could add an id tag to each one as well. Are you saying I could just using something like <span> and apply my classes the same way and get the same result? I guess the way I was taught html and css is hindering my understanding of what a normal structure should be.

For example, I would like my about section to have the same amount of space at the top and the bottom. It might have something to do with the default margin values set to a header, <h1>, but even when I tried to make the padding larger nothing moves. Does that make sense?
 
laurenashley

laurenashley

macrumors regular
Original poster
Jun 24, 2013
225
65
Bloomington, IN
Also, when I used the timeline template that is in my history section. The animation worked perfectly fine when it was on its own page. Once I added it to my website and moved all of the scripts to the server, the animation stopped. It might be difficult and I am not too worried about it for tomorrow but I would like to understand why it stopped.
 
O

olup

Cancelled
Oct 11, 2011
383
40
laurenashley said:
The main reason I used the divs were because I wanted each section to have a different background color, and I could add an id tag to each one as well. Are you saying I could just using something like <span> and apply my classes the same way and get the same result? I guess the way I was taught html and css is hindering my understanding of what a normal structure should be.

For example, I would like my about section to have the same amount of space at the top and the bottom. It might have something to do with the default margin values set to a header, <h1>, but even when I tried to make the padding larger nothing moves. Does that make sense?
Click to expand...

You can achieve the same result with each section having a different background in HTML5 by declaring the section elements like this:

Code: 
<section class="section about" id="about">
<h1>foo bar</h1>
.....
</section>

<!-- or using divs like this -->
<div class="section about" id="about">
<h1>foo bar</h1>
</div>

<style>
.section {
padding: 100px 0;
min-height: 300px;
width: 100%;
}
.section.about {
background: tomato;
}
.section.contact {
background: dodgerblue;
}
</style>
The key here is to declare a class on each individual section that all sections have in common, in this case section. The way you were/are taught HTML isn't wrong, it's just the old unsemantic way of doing it, since divs are nothing more than containers.
<h1> tags have a margin by default, you can either choose to override it in your CSS or work with it as it is.
As far as your animation is concerned, the main.js apparently isn't uploaded/the path is incorrect, that's why it's not working.
You also have jquery twice on your page, once in the head and once in the middle of your page.
As best practice I would put all the javascript, except the shim/shiv, if you decide to go the HTML5 route, at the bottom of your page.
 
laurenashley

laurenashley

macrumors regular
Original poster
Jun 24, 2013
225
65
Bloomington, IN
Thanks so much for your help! I can't believe I forgot to upload my js file to the server...embarrassing! And I'm gonna start playing around with the sections in the next couple of weeks. One thing that's been acting weird is the background image not showing up in some browsers, and more importantly once I moved the js file I suddenly got a margin on my divs again! I've been looking at the js but I don't see anything that stands out that I should change.

Lastly, what's good practice to make sure everything fits on the screen consistently because some text looks too big on non retina screens until I zoom out. I had to present the website on a terrible monitor and I had to zoom out to show what I wanted it to look like...
 
O

olup

Cancelled
Oct 11, 2011
383
40
laurenashley said:
Thanks so much for your help! I can't believe I forgot to upload my js file to the server...embarrassing! And I'm gonna start playing around with the sections in the next couple of weeks. One thing that's been acting weird is the background image not showing up in some browsers, and more importantly once I moved the js file I suddenly got a margin on my divs again! I've been looking at the js but I don't see anything that stands out that I should change.

Lastly, what's good practice to make sure everything fits on the screen consistently because some text looks too big on non retina screens until I zoom out. I had to present the website on a terrible monitor and I had to zoom out to show what I wanted it to look like...
Click to expand...
no problem :). The hero image you have on the top loaded fine in the browsers I tried(latest Firefox/Chrome,Safari and Opera). Since your website is responsive, you need to put this into your head of the document:
Code: 
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
More on that in the link below.

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

As for the font sizes, try smaller ones and shrink down your browser window. 20px on the body is a little too big. What I usually do is set it to 100% on the body element and then use ems for each heading. One em equals 16px, which usually is the default font size in a browser. Eventually you will learn about mobile first and media queries, which are very useful when developing responsive websites.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom