Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 440
  • Last Modified:

remove annoying space between divs

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
nsitedesigns
Asked:
nsitedesigns
  • 11
  • 6
  • 6
  • +1
5 Solutions
 
COBOLdinosaurCommented:
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
 
nsitedesignsAuthor Commented:
What do you mean use a "styled div to dot the top"?
0
 
COBOLdinosaurCommented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
nsitedesignsAuthor Commented:
I didn't think that was well supported.
0
 
GaryCommented:
Add to your image css

vertical-align: bottom;
0
 
nsitedesignsAuthor Commented:
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
 
GaryCommented:
Add to the image not the div
0
 
COBOLdinosaurCommented:
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
 
Chris StanyonCommented:
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
 
GaryCommented:
(Thought Cd& is right about not bothering with an image for the sake of IE8)
0
 
nsitedesignsAuthor Commented:
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
 
nsitedesignsAuthor Commented:
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
 
GaryCommented:
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
 
Chris StanyonCommented:
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
 
nsitedesignsAuthor Commented:
0
 
Chris StanyonCommented:
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
 
nsitedesignsAuthor Commented:
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
 
Chris StanyonCommented:
DW - urghhh!

;(
0
 
nsitedesignsAuthor Commented:
Yeah, trying to learn bootstrap but it is really hard.
0
 
GaryCommented:
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
 
Chris StanyonCommented:
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
 
nsitedesignsAuthor Commented:
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
 
nsitedesignsAuthor Commented:
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
 
Chris StanyonCommented:
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
 
GaryCommented:
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
 
nsitedesignsAuthor Commented:
Thanks all!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 11
  • 6
  • 6
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now