7 Replies - 902 Views - Last Post: 28 January 2013 - 03:56 AM

#1 Nublet  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 53
  • Joined: 12-October 12

Why does my heading go outside of the div?

Posted 25 January 2013 - 03:03 AM

Okay so, I have a vertical navigation bar, but the thing is when I make my window smaller the div and all the text it contains(a list) shrinks with it except my h5heading. Why is this happening and how can I fix it?

Relevant html and CSS:

<div id = "navbar">
		<h5>Navigation</h5>
		<ul>
			<li><a href = "#">Front Page</a></li>
			<li><a href = "#">Exercises</a></li>
			<li><a href = "#">Muscles</a></li>
			<li><a href = "#">Injury</a></li>
			<li><a href = "#">Filler</a></li>
			<li><a href = "#">Sumthin</a></li>
			<li><a href = "#">Filler</a></li>
			<li><a href = "#">Sumthin</a></li>
			<li><a href = "#">Filler</a></li>
			<li><a href = "#">Sumthin</a></li>
			<li><a href = "#">Filler</a></li>
			<li><a href = "#">Sumthin</a></li>
			<li><a href = "#">Yeboi</a></li>
			<li><a href = "#">Sumthin</a></li>
			<li><a href = "#">Filler</a></li>
			<li><a href = "#">Sumthin</a></li>
			<li><a href = "#">Filler</a></li>
			<li><a href = "#">Sumthin</a></li>
		<ul>
	</div>



#navbar
{
	height: 520px;
	width: 10%;
	font-size: 1.2em;
	margin-top: 2%;
	float: left;
	border-radius: 10px;
	background: url('gluteusnav.png');
	position: fixed;

}

#navbar a
{
	text-decoration: none;
	color: white;
}

#navbar ul
{
	list-style-type: none;
	margin: 1%;
	padding: 0.5%;
	width: 10%;
}

#navbar li
{
	margin: 0;
	padding: 2px 10px
}



What it looks like when I make my window smaller:

Posted Image

Is This A Good Question/Topic? 0
  • +

Replies To: Why does my heading go outside of the div?

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3479
  • View blog
  • Posts: 10,025
  • Joined: 08-June 10

Re: Why does my heading go outside of the div?

Posted 25 January 2013 - 03:08 AM

er, I donít see the text in the list shrink either. all I can see is the first item encountering a word break (because there is a space that allows for that). all other items still fit in the width.
and since you only change the width of the window, I see no reason why the text itself should get smaller.
that the h5-heading overflows is just a CSS default setting.
Was This Post Helpful? 0
  • +
  • -

#3 Nublet  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 53
  • Joined: 12-October 12

Re: Why does my heading go outside of the div?

Posted 25 January 2013 - 03:28 AM

View PostDormilich, on 25 January 2013 - 03:08 AM, said:

er, I donít see the text in the list shrink either. all I can see is the first item encountering a word break (because there is a space that allows for that). all other items still fit in the width.
and since you only change the width of the window, I see no reason why the text itself should get smaller.
that the h5-heading overflows is just a CSS default setting.

Is there something I can do to make the text fit in the container when it shrinks? Tried using % on the font-size, it didn't work haha. Should I make an "if" sentence that changes the font sixe according to the size of the screen?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3479
  • View blog
  • Posts: 10,025
  • Joined: 08-June 10

Re: Why does my heading go outside of the div?

Posted 25 January 2013 - 03:33 AM

if that is an issue directed to mobile devices, you need to test your code directly. just making the browser window smaller is not the same (because mobile devices have different default settings for (e.g.) font-size).

besides that, there are some extended CSS selectors that allow to assign rules depending on the available space. MDN or W3C should have something on that topic.

This post has been edited by Dormilich: 25 January 2013 - 03:34 AM

Was This Post Helpful? 0
  • +
  • -

#5 Nublet  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 53
  • Joined: 12-October 12

Re: Why does my heading go outside of the div?

Posted 25 January 2013 - 06:27 AM

View PostDormilich, on 25 January 2013 - 03:33 AM, said:

if that is an issue directed to mobile devices, you need to test your code directly. just making the browser window smaller is not the same (because mobile devices have different default settings for (e.g.) font-size).

besides that, there are some extended CSS selectors that allow to assign rules depending on the available space. MDN or W3C should have something on that topic.


I was roughly trying to see what it would look like on mobile/tablet or somesuch.
Was This Post Helpful? 0
  • +
  • -

#6 LuckyRoot  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 7
  • Joined: 27-January 13

Re: Why does my heading go outside of the div?

Posted 27 January 2013 - 05:01 PM

The content shrinking when you make your browser window smaller is fine but if your trying to test to see how your website would look in a mobile environment. You can add CSS media-queries to properly test that.

Ex. you would have several style-sheets:
Large resolution 1025x +
medium resolution 700px - 1024px
mobile devices - (0px - varies )
tablet devices - (0px - varies )

One way to keep text inside the container try using "position:fixed".
Was This Post Helpful? -1
  • +
  • -

#7 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3178
  • View blog
  • Posts: 10,640
  • Joined: 12-December 12

Re: Why does my heading go outside of the div?

Posted 27 January 2013 - 06:52 PM

I believe there a number of online mobile emulators that you can test your pages in, which you might Google for.

Quote

One way to keep text inside the container try using "position:fixed".

Erm.. I certainly wouldn't consider this as a first option!! In fact, it would be my last consideration - it changes the structure and behaviour of the whole page.

This post has been edited by andrewsw: 27 January 2013 - 06:52 PM

Was This Post Helpful? 0
  • +
  • -

#8 Nublet  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 53
  • Joined: 12-October 12

Re: Why does my heading go outside of the div?

Posted 28 January 2013 - 03:56 AM

View Postandrewsw, on 27 January 2013 - 06:52 PM, said:

I believe there a number of online mobile emulators that you can test your pages in, which you might Google for.

Quote

One way to keep text inside the container try using "position:fixed".

Erm.. I certainly wouldn't consider this as a first option!! In fact, it would be my last consideration - it changes the structure and behaviour of the whole page.


It was fixed all the time haha :P But yeah, I'm gonna try an emulator to see how it looks.

This post has been edited by Nublet: 28 January 2013 - 03:56 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1