The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help with positioning
Donal23
post Jan 23 2017, 05:58 AM
Post #1





Group: Members
Posts: 3
Joined: 29-June 13
Member No.: 19,359



Hi. I'm revamping the aesthetic of my media managing site. I ran into a problem and I can't figure out what stupid mistake I am making. This is the desired layout:

IPB Image

I started fresh with a blank file. I don't use templates or bootstraps or that kinda thing. I started doing it region by region so I first made the top titlebar and had that right then I moved on to the navbar beneath it. Problem is, I can't get the section with the navigation icons to align itself to the left side of the nav div. Here is my code:

CODE
<div class=titlebar>
  <span>Yuusha ni Narenakatta Ore wa Shibushibu Shuushoku o Ketsui Shimashita</span>
  <div>Monday, January 23 2017<br/>4:43 AM</div>
</div>
<div class=navbar>
  <div class=navleft><img src=images/tempnav.png></div>
</div>


...and this is the CSS:

CODE
BODY {
  margin: 0px;
  padding: 0px;
  background-color: #e5e5ff;
  font-family: Inconsolata,sans-serif;
  font-size: 14pt;
  color: #000;
}
DIV.titlebar {
  width: 100%
  height: 40px;
  min-height: 40px;
  background-color: #aaaaff;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #000;
}
DIV.titlebar SPAN {
  font-family: 'Indie Flower',sans-serif;
  font-size: 24pt;
  float: left;
  margin-left: 10px;
}
DIV.titlebar DIV {
  font-family: Arial,sans-serif;
  font-size: 12pt;
  float: right;
  margin-right: 5px;
  text-align: right;
}
DIV.navbar {
  width: 100%;
  height: 40px;
  background-color: #c0c0ff;
  min-height: 40px;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: #000;
}
DIV.navleft {
  float: left;
}
DIV.navright {
  float: right;
}


...and this is what I get:

IPB Image

What am I doing wrong? Thanks!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 23 2017, 08:00 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,646
Joined: 9-August 06
Member No.: 6



The single icon is very much to the left with the markup and CSS you posted. So probably it's something you didn't post.

I wonder why you have DIV.navleft though and why it's floated left. Seems unnecessary. But maybe it has to do with what isn't there.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Donal23
post Jan 23 2017, 09:02 AM
Post #3





Group: Members
Posts: 3
Joined: 29-June 13
Member No.: 19,359



Hmm I'm not sure what you mean. What single icon? There are five icons, and they are in the center. Be aware that the first image is a Photoshop mockup of what I'm shooting for. The actual code output is the second image.

As for navleft, I have "navbar" to create the overall space and I figured I'd have separate elements inside of that space. The icons floated to the left and some other stuff floated right. All I've added so far is the icons though, I stopped there because of the problem with them being in the center and not floating left.

Here, I added "border: 2px solid #F00" to the navbar class and "border: 2px solid #0F0" to the navleft class. As you can see, navbar correctly spans the width of the page so there is certainly room in there for navleft to float left. Just can't figure out why it isn't. I can use position absolute and make it go over there, but I'd rather avoid that.

IPB Image

This post has been edited by Donal23: Jan 23 2017, 09:06 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 23 2017, 09:52 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,646
Joined: 9-August 06
Member No.: 6



In the HTML you posted there is one. Look at what you posted in a browser and see for yourself it's left aligned.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Donal23
post Jan 23 2017, 01:07 PM
Post #5





Group: Members
Posts: 3
Joined: 29-June 13
Member No.: 19,359



You mean tempnav.png? That's all the icons in a single file. Sorry, I should've made that clear. I wasn't making the functionality yet, I was just trying to make a working version of my mockup to get the aesthetics working so I made one image to represent all the icons. I guess yea, it's left aligned by default within the navleft div, but the navleft div itself I thought would be on the far left if I floated it left rather than sitting in the center.

Sorry if I'm being dense and missing something.

EDIT: Ahhh, I figured it out. I got rid of the block above, the titlebar section, and it suddenly worked. I then realized, d'oh, that the icon strip was lining up just past the title text so it hit me that the two divs were running off each other. I put clear:both; in the navleft CSS and voila, now it looks perfect.

Whew. Thanks!

This post has been edited by Donal23: Jan 23 2017, 01:10 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 23 2017, 01:48 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,646
Joined: 9-August 06
Member No.: 6



Well, whatever it was it was left aligned. wink.gif
Maybe the larger width of your image had something to do with. I used just a small dummy image.

Testing... Nope. Still left aligned. Oh well. You solved it anyway.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd August 2017 - 05:27 PM