9 Replies - 1168 Views - Last Post: 12 July 2014 - 06:43 PM

#1 Codewow   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 11-July 14

Content overlaps when browser is scaled down.

Posted 11 July 2014 - 06:48 PM

I have been trying to fiddle with the code for many hours and have regularly been searching the web for a general fix to my problem. I'm just starting to learn Web Development and the biggest issue for me so far is trying to keep everything next to each other without overlapping and just scrolling. To give ti a basis to go off of, I'd like it to be similar to Twitter.

I've tried overflow, I have tried just hiding specific content via a media query and it's not working too well.


You can see the page and what I mean here: http://www.syrocraft.com/4/index.html
Try making the window smaller and you see what happens.

Thanks for any and all help provided.. It's been really irritating me.

Here's the markup:
<!DOCTYPE html>
<html>
<head>
    <title>SyroCraft</title>
    <meta name="keywords" content="Minecraft, SyroCraft, Syro Craft, Codewow, Chaoswizard98, PC, Video Games" />
    <meta name="description" content="The official website for the SyroCraft Community Minecraft Server" />
    <meta charset=UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class=wrapper>
        <div class=header>
            <!-- Insert header image here via CSS-->
        </div>
        <!--<div id=navbar>
        <ul>
            <li>Home</li>
            <li>Server Rules</li>
            <li>News</li>
            <li>Forums</li>
            <li> Stats</li>
            <li>MCF Thread</li>
        </ul>
    </div>
    
    Doesn't work!
    -->
        <!--Firefox doesn't like NAV tag!-->
        <nav>
            <ul>
                <li><a href=#>Home</a>

                </li>
                <li><a href=#>Server Rules</a>

                </li>
                <li><a href=#>News</a>

                </li>
                <li><a href=#>Forums</a>

                </li>
                <li><a href=#>PvP Stats</a>

                </li>
                <li><a href=#>MCF Thread</a>

                </li>
                <li><a href=/IRC.php>IRC</a>

                </li>
            </ul>
        </nav>
        <div id=content>
            <div id=footer>
                <div id="sidebar">
                    <ul>
                        <li class="footer-item">&copy; 2010-2014 SyroCraft</li>
                        <li class="footer-item">Jobs</li>
                        <li class="footer-item">About</li>
                        <li class="footer-item">Help</li>
                        <li class="footer-item">Terms</li>
                        <li class="footer-item">Yada</li>
                        <li class="footer-item">Yada</li>
                        <li class="footer-item">Yada</li>
                    </ul>
                </div>
                <p class=twitter><a class="twitter-timeline" height="485px" width="310px" href="https://twitter.com/SyroCraft" data-widget-id="335981577555308544">Tweets by @SyroCraft</a>

            </div>
            <script>
                ! function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0],
                        p = /^http:/.test(d.location) ? 'http' : 'https';
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = p + "://>/>/platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
            </script>
            </p>
        
        <div id=maincontent>
             <h3>SyroCraft Minecraft Server</h3>

            <p>Here at SyroCraft, we strive to create and expand a dedicated and upstanding community of builders, role-players, pvp-ers and socialize-ers. Our main focus is on community involvement. Whether it be an event or content for our website. We work together to create the best place to play and enjoy Minecraft. Click around a bit and check us out! Watch our server trailer below!</p>
            <p id=video>
                <object>
                    <param name="movie" value="//www.youtube.com/v/tNwfnvkDFB0?version=3&amp;hl=en_US"></param>
                    <param name="allowFullScreen" value="true"></param>
                    <param name="allowscriptaccess" value="always"></param>
                    <embed src="//www.youtube.com/v/tNwfnvkDFB0?version=3&amp;hl=en_US" type="application/x-shockwave-flash" height=300 width=500 allowscriptaccess="always" allowfullscreen="true"></embed>
                </object>
            </p>
            <!-- insert trailer here! -->
        </div>
        </div>
    </div>
    <div id=right></div>
</body>


CSS:
.wrapper {
    margin: 0 auto;
    width: 100%;
    height: 100%
}
 html {
    font-family: arial, sans-serif, times;
    font-size: 1.1em;
    background: #666666;
}
.header {
    height: 100px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: -2px;
    background-image:url(images/logo.jpg);
    background-size: 700px;
    background-repeat: no-repeat;
    background-position:center;
    background-color: #00dc00;
}
#IRC {
    height: 95%;
    width: 100%;
    margin: 0 auto;
}
nav {
    margin: 0;
    width: 100%;
    background-color: #00d100;
}
nav ul {
    margin: 0;
    padding: 0;
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
    text-align: center;
}
nav ul li {
    display: inline-block;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width: 105px;
    margin: -2px;
    background-color: #05d100;
    overflow: hidden;
}
nav a:link {
    text-decoration: none;
    color: #555555;
}
nav a:visited {
    color: #99FF99;
}
nav li:hover {
    background-color: #00FF00;
}
@media screen and (max-width: 769px) {
    nav ul li {
        box-sizing: border-box;
        width: 100%;
        padding: 15px;
        text-align: left;
    }
}
@media screen and (max-width: 700px) {
    .header {
        display: block;
        background-image:url(images/mobilehead.png);
        background-size: 380px;
        background-position: top;
    }
}
 #content {
    display: inline-block;
    position: static;
    margin: 0 auto;
    text-align: center;
    width: 93%;
    height: 650px;
    padding: 60px;
    border: dashed;
    z-index: 1;
}
#footer {
    border-radius: 5px;
    float: left;
    text-align: left;
    height: 60px;
    width: 310px;
    background-color: #00dc00;
    /*padding: 5px;*/
    font-size: .8em;
    z-index: 1;
    margin-top: 50px;
    border: thick;
}
#footer ul {
    text-align: center;
    margin: 0 auto;
    margin-left: -35px;
    text-decoration: none;
    list-style-type: none;
    
}
.footer-item {
    margin: 0 auto;
    display: inline-block;
    padding: 5px;
}
.twitter {
    /*position: static;*/
    margin-top: 10px;
    margin-bottom: 30px;
    float: left;
    z-index: 0;
    overflow: auto;
}
#siderbar {
    display:inline;
    padding:20px;
    z-index: 0;
    border: groove;
}
#maincontent {
	padding: 50px;
    float: none;
    margin: 0 auto;
    width: 600px;
    border: solid;
    z-index: 3;
    overflow: auto;
}
/*#ad {
	display: inline-block;
	float: left;
	position: static;
	margin: 0 auto;
	text-align: center;
	width: 15%;
	height: 500px;
	padding: 60px;
	border: dashed;
	overflow: hidden;
	
	
}*/
 p {
    margin-bottom: 50px;
}
#video {
    margin: 0 auto;
    margin-top: 10px;
}


Is This A Good Question/Topic? 0
  • +

Replies To: Content overlaps when browser is scaled down.

#2 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: Content overlaps when browser is scaled down.

Posted 11 July 2014 - 10:20 PM

I would correct this first:
<meta charset=UTF-8">

as the document cannot be validated with this error. There are links to the html and css validators in my signature below.

Remove the blank lines between the li's, these can be problematic.

I wouldn't put a script in the middle of a paragraph. Even though, in principle, this shouldn't be a problem, it doesn't belong there.

I would remove all the overflow properties, they aren't achieving anything currently. Similarly for any z-index settings.

I would move the nav inside the header, where it belongs.

You have an empty (right) div and Google Chrome reads that you have an empty paragraph (p-tag) as well.

Why is a footer towards the top of the page?!

All-in-all, it requires a lot of tidying. Then the problem might disappear, or at least the solution will be easier to find.

Eventually you will also need to describe what you expect to happen when the browser width is reduced.
Was This Post Helpful? 0
  • +
  • -

#3 Codewow   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 11-July 14

Re: Content overlaps when browser is scaled down.

Posted 12 July 2014 - 10:06 AM

View Postandrewsw, on 11 July 2014 - 10:20 PM, said:

I would correct this first:
<meta charset=UTF-8">

as the document cannot be validated with this error. There are links to the html and css validators in my signature below.


I don't see how that is wrong. According to the W3 Syntax page, that is correct.


Remove the blank lines between the li's, these can be problematic.

Noted, I used the Jsfiddle website and that's how it tidied it up.

I wouldn't put a script in the middle of a paragraph. Even though, in principle, this shouldn't be a problem, it doesn't belong there.

Also noted.

I would remove all the overflow properties, they aren't achieving anything currently. Similarly for any z-index settings.

Yeah, that was just me attempting to create a workaround for my problem. It didn't work.

I would move the nav inside the header, where it belongs.

I wasn't aware. W3School and some YouTube videos didn't put them in the header. Noted.

You have an empty (right) div and Google Chrome reads that you have an empty paragraph (p-tag) as well.

That empty right div is meant to be the 'ad' div, but I hadn't gotten around to changing it because of this overflow problem.

Why is a footer towards the top of the page?!

Twitter does something similar, though I have it at the top because I wanted to figure out why the content was overflowing before moving it around and potentially breaking more stuff.

All-in-all, it requires a lot of tidying. Then the problem might disappear, or at least the solution will be easier to find.

I will work on tidying it up.

Eventually you will also need to describe what you expect to happen when the browser width is reduced.

I had gave reference to what I expected it to do before I posted the code. All I want is the content to move with the window as it gets smaller until it can't move anymore. Then it just scrolls.

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: Content overlaps when browser is scaled down.

Posted 12 July 2014 - 10:27 AM

<meta charset=UTF-8"> should be <meta charset="UTF-8">.

Despite what jsFiddle wants I wouldn't put blank lines inside of li-elements.

Quote

All I want is the content to move with the window

This isn't a clear description. However, if you want a scroll-bar to appear at a certain width then set a min-width on the ul or its container (or some other container).




If you want different behaviour in different media then you should investigate responsive web design in more detail.




Quote

I would move the nav inside the header, where it belongs.

I wasn't aware. W3School and some YouTube videos didn't put them in the header. Noted.

A nav-bar doesn't have to been within a header. In your case, though, it is, visually, part of the header, so I would put them together. It's your baby though.

[I hope that you don't trust everything you read or see at W3Schools or YouTube..?]

This post has been edited by andrewsw: 12 July 2014 - 10:31 AM

Was This Post Helpful? 0
  • +
  • -

#5 Codewow   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 11-July 14

Re: Content overlaps when browser is scaled down.

Posted 12 July 2014 - 05:58 PM

View Postandrewsw, on 12 July 2014 - 10:27 AM, said:

<meta charset=UTF-8"> should be <meta charset="UTF-8">.

That still produces an error. In my final version there is no typo, yet it doesn't correct the issue.

Despite what jsFiddle wants I wouldn't put blank lines inside of li-elements.

Gotcha.

Quote

All I want is the content to move with the window

This isn't a clear description. However, if you want a scroll-bar to appear at a certain width then set a min-width on the ul or its container (or some other container).

That seemed to make the problem more prevalent. I'll continue tweaking.




If you want different behaviour in different media then you should investigate responsive web design in more detail.

I'll take a look.



Quote

I would move the nav inside the header, where it belongs.

I wasn't aware. W3School and some YouTube videos didn't put them in the header. Noted.

A nav-bar doesn't have to been within a header. In your case, though, it is, visually, part of the header, so I would put them together. It's your baby though.

The nav bar is working as it should and it's in a position where I'd rather not break it mistakenly. Do you mean just to reduce code by combining the two separate blocks? That's all I could see as the benefit of what you are saying.

[I hope that you don't trust everything you read or see at W3Schools or YouTube..?]


Not everything, but when multiple people use similar methods of coding and the results work and are all the same, you'd think it could be a bit trustworthy.
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: Content overlaps when browser is scaled down.

Posted 12 July 2014 - 06:11 PM

Quote

The nav bar is working as it should..

I thought this was the main problem.. ah well.

Quote

..if you want a scroll-bar to appear at a certain width then set a min-width on the ul or its container (or some other container).

That seemed to make the problem more prevalent. I'll continue tweaking.

I wasn't suggesting that this alone would fix the page. As I mentioned, I think the page needs work. I'll be honest and suggest that you need to study css layouts, and css in general, alongside responsive design, if this is what you are aiming for.

This post has been edited by andrewsw: 12 July 2014 - 06:14 PM

Was This Post Helpful? 0
  • +
  • -

#7 Codewow   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 11-July 14

Re: Content overlaps when browser is scaled down.

Posted 12 July 2014 - 06:18 PM

View Postandrewsw, on 12 July 2014 - 06:11 PM, said:

I wasn't suggesting that this alone would fix the page. As I mentioned, I think the page needs work. I'll be honest and suggest that you need to study css layouts, and css in general, alongside responsive design, if this is what you are aiming for.


I would agree. I've got a little less than 4 hours of knowledge on CSS. Everything is working except for the paragraph of text overlapping the twitter widget when the the browser is minimized to a certain size. Previewing the page and minimizing it to anything lower than 1144px shows what I am talking about.
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6905
  • View blog
  • Posts: 28,565
  • Joined: 12-December 12

Re: Content overlaps when browser is scaled down.

Posted 12 July 2014 - 06:26 PM

Quote

I've got a little less than 4 hours of knowledge on CSS.

Four hours is not enough.
Was This Post Helpful? 0
  • +
  • -

#9 Codewow   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 11-July 14

Re: Content overlaps when browser is scaled down.

Posted 12 July 2014 - 06:34 PM

View Postandrewsw, on 12 July 2014 - 06:26 PM, said:

Quote

I've got a little less than 4 hours of knowledge on CSS.

Four hours is not enough.


Obviously. Guess i'll go skim the twitter source code again and see if I can catch where I am going wrong.
Was This Post Helpful? 0
  • +
  • -

#10 Codewow   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 11-July 14

Re: Content overlaps when browser is scaled down.

Posted 12 July 2014 - 06:43 PM

Is there any reason why it treats the twitter widget as non-existent? That's what seems to be the problem. If it wasn't ignoring the widget, it wouldn't be overflowing.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1