Solved

remove annoying space between divs

Posted on 2014-01-31
26
410 Views
Last Modified: 2014-01-31
What is causing the space between the logo/navigation and the phone number?  This area should be solid white.

http://nsitedesigns.com/nsitedesigns/rammer/3.html
0
Comment
Question by:nsitedesigns
  • 11
  • 6
  • 6
  • +1
26 Comments
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 200 total points
ID: 39824309
You have an image inside a div.  The div always includes a linefeed.

So either add a negative top margin to the content block below it (a bit of a hack!), or just us a styled div to dot the top; you should not need an image for something that simple.

Cd&
0
 

Author Comment

by:nsitedesigns
ID: 39824326
What do you mean use a "styled div to dot the top"?
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 200 total points
ID: 39824361
The image can be done with a CSS styled div.  it is just a white background with a right-aligned phone number.  The rounded corners can be done with border radius.  As a bonus you have a bit of text that is less than 10% the size of the div.

Cd&
0
 

Author Comment

by:nsitedesigns
ID: 39824387
I didn't think that was well supported.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 200 total points
ID: 39824410
Add to your image css

vertical-align: bottom;
0
 

Author Comment

by:nsitedesigns
ID: 39824434
Cathal,

I could not get your solution to work.

http://nsitedesigns.com/nsitedesigns/rammer/3.html

.top_curve_container {
      width: 1069px;
      margin: 0px auto;
      padding-top:20px;
      vertical-align:bottom;
}
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 200 total points
ID: 39824443
Add to the image not the div
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39824450
It is supported by virtually every browser in wide use.  I think the only legitimate browser not support is Opera mini.  For old ie browsers (<IE9) it will render just fine with the corners gracefully degraded to square corners.  It makes zero sense to use an image because a tiny percentage of users are still using browsers that can do modern rendering.

Cd&
0
 
LVL 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 100 total points
ID: 39824462
It's because an image is an inline element so always has a small gap at the bottom. Just set it to display:block:

.top_curve_container img {
display:block
}

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39824477
(Thought Cd& is right about not bothering with an image for the sake of IE8)
0
 

Author Comment

by:nsitedesigns
ID: 39824643
I found this cool site to help me learn about radius creation
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_border-radius.htm

That seemed to work too!

Thanks!
0
 

Author Comment

by:nsitedesigns
ID: 39824693
Yikes!  I added the radius border and span class to phone number but now the space is back.  What did I do wrong?

http://nsitedesigns.com/nsitedesigns/rammer/3.html
0
 
LVL 58

Expert Comment

by:Gary
ID: 39824707
Remove that div and add the border-radius style to the div container
Place your paragraph tag in the container

No need for the unnecessary markup
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39824788
The space you've got now is because of a default bottom margin on your P tags. Instead of just setting the right margin to 60px, set the bottom margin to 0. Your also floating the inner SPAN so your container collapse. Remove the span and text-align the P right:

p.phone { font-size: 1.5em; margin: 0 60px 0 0; text-align: right; }
<p class="phone">(920) 458-9331</p>
0
 

Author Comment

by:nsitedesigns
ID: 39825199
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39825239
Things like this really make you start to panic, don't they :)

All you've done is added an extra curly bracket to your CSS rule, so effectively cancelling all CSS out:

p.phone {
	 { font-size: 1.5em;
	  margin: 0 60px 0 0; 
	  text-align: right; }

Open in new window

You have 2 opening curlies...remove one!
0
 

Author Comment

by:nsitedesigns
ID: 39825279
WHew - it really had me scratching my head since in DW it looked fine and then BAM it went psyco on me!


Yippeee skippee it works!
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39825287
DW - urghhh!

;(
0
 

Author Comment

by:nsitedesigns
ID: 39825313
Yeah, trying to learn bootstrap but it is really hard.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39825347
trying to learn bootstrap but it is really hard
Coupla days solid reading and trying and failing and you'll find it will click in.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39825350
Bootstrap is just a framework, so you won't need any new skills - it's still just html, css and javascript.

You'll learn all of this a lot quicker if you code by hand, rather than using something like DW - DW is OK for starting out, but as a developer, you'll soon benefit from moving away from it completely.

Get yourself one of the advanced text editors (notepad++) or a proper IDE, such as Eclipse or Aptana Studio - bit of a learning curve to start with, but you will produce much cleaner and more robust code - plus you'll have COMPLETE control over everything you do.
0
 

Author Comment

by:nsitedesigns
ID: 39825353
Got 1.5 days under my belt.  Problem is I have a TON of projects backing up and i am feeling the pressure to learn quick to get projects finished.  So, I am ending up going back to DW just to finish projects and keep moving.  I have to stop.  It's like i am a dw junkie!
0
 

Author Comment

by:nsitedesigns
ID: 39825356
I am not familar with javascript so I have to learn that too.
I use text wrangler for my text editor.  Is that considered a 'good one'?
Is there a good bootstrap book you would recommend?
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39825372
I've not used wrangler so can't comment, and I very rarely buy books as they're usually dated by the time they hit the press.

As I say though, bootstrap isn't really anything other than standard HTML, CSS and Javascript (particularly jQuery), so focus on those first and worry about frameworks next - plenty of 'beginner' guides on the 'net and there's always EE if you get stuck ;)

If you have the basics, then you are much more likely to 'get' the various frameworks, and you'll be able to switch between different ones.

I know what you mean about switching back - sometimes you've just got to get the job done, so you revert back to what you know - gradually that will get less and less - just takes time
0
 
LVL 58

Expert Comment

by:Gary
ID: 39825382
A few days learning bootstrap will save you weeks in future site building - it's worth learning at least the basics of the layout i.e. how to set an element to 3 columns etc,  then you can worry about the other bits as you need them.
0
 

Author Comment

by:nsitedesigns
ID: 39825426
Thanks all!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Read about why website design really matters in today's demanding market.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now