Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How do I get 2 "floating" elements to overlap?

    Hi all,

    I am a CSS newbie. I'm not sure how to properly state this: How do I get 2 "floating" elements to overlap? Here is the url: http://www.2cleancutguys.com. If I want to change the text "Free Quote" at the top of the page to some longer phrase, it distorts the "Menu" (homepage---contact). How can I have these 2 items overlap?

    Here is the style sheet:


    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background: #F6F6F6 url(images/img01.jpg) repeat-x;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #6B6B6B;
    }
    
    form {
    }
    
    input, textarea {
    	padding: 2px 5px;
    	border: 1px solid #EBEBEB;
    	font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #6B6B6B;
    }
    
    h1, h2, h3, h4 {
    	margin: 0;
    }
    
    h2, h3, h4 {
    	margin-bottom: 20px;
    	padding-bottom: 9px;
    	border-bottom: 1px solid #F2F2F2;
    	letter-spacing: -0.035em;
    	font-weight: normal;
    	color: #37404C;
    }
    
    h2 {
    	font-size: 28px;
    }
    
    h3 {
    	font-size: 16px;
    	font-weight: bold;
    }
    
    h4 {
    	font-size: 14px;
    	font-weight: bold;
    }
    
    p, ul, ol {
    	margin-bottom: 1.5em;
    	line-height: 170%;
    	text-align: justify;
    }
    
    ul, ol {
    	margin-left: 3em;
    }
    
    dl.list1 {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    dl.list1 dt {
    	float: left;
    	width: 70px;
    }
    
    dl.list1 dd {
    	margin-bottom: 10px;
    }
    
    dl.list1 a {
    	color: #666666;
    }
    
    ul.list2 {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	line-height: normal;
    }
    
    ul.list2 li {
    	float: left;
    	margin: 0 18px 18px 0;
    }
    
    ul.list2 li.nopad {
    	margin-right: 0;
    }
    
    blockquote {
    	margin-left: 3em;
    	margin-right: 3em;
    }
    
    a {
    	color: #FF5A00;
    }
    
    a:hover {
    	text-decoration: none;
    }
    
    a img {
    	border: none;
    }
    
    img.left {
    	float: left;
    	margin: 5px 20px 0 0;
    }
    
    img.right {
    	float: right;
    	margin: 5px 0 0 20px;
    }
    
    /* Wrapper */
    
    #wrapper {
    	width: 960px;
    	margin: 0 auto;
    	background: url(images/img02.jpg) repeat-y;
    }
    
    #wrapper2 {
    	background: url(images/img10.jpg) no-repeat left bottom;
    }
    
    /* Header */
    
    #header {
    	height: 140px;
    	background: #087FE7 url(images/img03.jpg) no-repeat;
    }
    
    /* Quote */
    
    #quote {
    	float: right;
    }
    
    #quote h1 {
        margin: 0;
    	padding: 4px 60px 0 0;
    	letter-spacing: 0p;
    	font-size: 14px;
    	color: #FFFFFF;
    }
    
    #quote a {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    #quote a:hover {
    	text-decoration: underline;
    	color: #FFFFFF;
    }
    
    /* Top Link */
    
    #toplink {
    	float: right;
    }
    
    #toplink h1 {
        margin: 0;
    	padding: 4px 60px 0 0;
    	letter-spacing: 0p;
    	font-size: 16px;
    	color: #FFFFFF;
    }
    
    #toplink a {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    #toplink a:hover {
    	text-decoration: underline;
    	color: #FFFFFF;
    }
    
    /* Logo */
    
    #logo {
    	float: left;
    }
    
    #logo h1 {
    	margin: 0;
    	padding: 100px 5px 0 70px;
    	letter-spacing: -2px;
    	font-size: 28px;
    	color: #FFFFFF;
    }
    
    #logo h1 a {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    /* Menu */
    
    #menu {
    	float: right;
    }
    
    #menu ul {
    	margin: 0;
    	padding: 112px 0 0 0;
    	list-style: none;
    	line-height: normal;
    }
    
    #menu li {
    	display: inline;
    }
    
    #menu a {
    	padding-left: 40px;
    	text-decoration: none;
    	font-size: 13px;
    	font-weight: bold;
    	color: #FFFFFF;
    }
    
    #menu a:hover {
    	text-decoration: underline;
    }
    
    /* Page */
    
    #page {
    	background: url(images/img04.jpg) no-repeat;
    }
    
    /* Content */
    
    #content {
    	float: left;
    	width: 555px;
    	padding: 0 0 0 76px;
    }
    
    .post {
    	padding-top: 50px;
    }
    
    .post .title {
    }
    
    .post .title a {
    	text-decoration: none;
    	color: #37404C;
    }
    
    .post .title a:hover {
    	text-decoration: underline;
    }
    
    .post .entry {
    }
    
    a 2 {
       color: #666666;
    }
    
    .post .meta {
    	height: 16px;
    	margin: 0;
    	padding: 10px;
    	background: url(images/img07.jpg) repeat-x left bottom;
    	line-height: normal;
    }
    
    .post .meta .posted {
    	display: block;
    	float: left;
    }
    
    .post .meta .permalink {
    	display: block;
    	float: right;
    	padding-left: 17px;
    	background: url(images/img09.gif) no-repeat left center;
    }
    
    .post .meta .comments {
    	display: block;
    	float: right;
    	padding: 0 30px 0 19px;
    	background: url(images/img08.gif) no-repeat left center;
    }
    
    /* Sidebar */
    
    #sidebar {
    	float: right;
    	width: 186px;
    	padding: 67px 76px 0 0;
    }
    
    #sidebar ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    #sidebar li {
    	margin-bottom: 40px;
    }
    
    #sidebar li ul {
    }
    
    #sidebar li li {
    	margin: 0;
    }
    
    /* Search */
    
    #search {
    }
    
    #search br {
    	display: none;
    }
    
    #search input {
    	padding: 1px 5px;
    	border-top: 1px solid #BAD300;
    	border-left: 1px solid #A9C817;
    	border-right: 1px solid #7DAB00;
    	border-bottom: 1px solid #578900;
    	background: #6E9D00 url(images/img18.gif) repeat-x;
    	font-size: 11px;
    	font-weight: bold;
    	color: #FFFFFF;
    }
    
    #search #s {
    	width: 130px;
    	padding: 2px 5px;
    	background: #FFFFFF;
    	border: 1px solid #EBEBEB;
    	font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #6B6B6B;
    }
    
    /* Widebar */
    
    #widebar {
    	margin: 0 50px;
    	padding: 25px 28px 0 28px;
    	background: #F2F2F2 url(images/img11.gif) repeat-x;
    }
    
    #widebar #colA {
    	float: left;
    	width: 260px;
    }
    
    #widebar #colB {
    	float: left;
    	width: 260px;
    	padding-left: 15px;
    	padding-right: 40px;
    	list-style: none;
    }
    
    #widebar #colC {
    	float: left;
    	width: 186px;
    	padding-left: 45px;
    }
    
    #widebar #colD {
    	float: left;
    	width: 560px;
    	padding-left: 150px;
    	padding-right: 10px;
    	list-style: none;
    }
    
    /* Footer */
    
    #footer {
    	height: 108px;
    	background: url(images/img05.jpg) no-repeat;
    }
    
    #footer p {
    	margin: 0;
    	padding-top: 45px;
    	text-align: center;
    	color: #8E8E8E;
    }
    
    #footer a {
    	color: #666666;
    }
    Last edited by rmedek; 01-16-2008 at 02:07 AM. Reason: title, code tags, etc., etc.

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Please use the code boxes.
    [*code]put code in here[/code]
    get rid of the *
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello myrtle,
    Yes, please use code tags. In the reply/new message window its the # icon.


    Try making these changes to your CSS.
    I floated #quote and adjusted the margins on everything after it.
    Code:
    /* Header */
    
    #header {
    width: 960px;
    height: 140px;
    overflow: auto;
    	background: #087FE7 url(images/img03.jpg) no-repeat;
    }
    /* Quote */
    
    #quote {
    width: 300px; /*make this longer if you need to fit more text*/
    float: right;
    margin: 0 10px 0 0;
    text-align: right;
    }
    #quote h1 {
        margin: 0;
    	padding: 4px 60px 0 0;
    	letter-spacing: 0p;
    	font-size: 14px;
    	color: #FFFFFF;
    }
    
    #quote a {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    #quote a:hover {
    	text-decoration: underline;
    	color: #FFFFFF;
    }
    
    /* Top Link */
    
    #toplink {
    	float: right;
    }
    
    #toplink h1 {
        margin: 0;
    	padding: 4px 60px 0 0;
    	letter-spacing: 0p;
    	font-size: 16px;
    	color: #FFFFFF;
    }
    #toplink a {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    #toplink a:hover {
    	text-decoration: underline;
    	color: #FFFFFF;
    }
    
    /* Logo */
    
    #logo {
    	float: left;
    }
    
    #logo h1 {
    	margin: 0;
    	margin: 60px 5px 0 70px;
    	letter-spacing: -2px;
    	font-size: 28px;
    	color: #FFFFFF;
    }#logo h1 a {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    /* Menu */
    
    #menu {
    	float: right;
    }
    
    #menu ul {
    	margin: 0;
    	margin: 92px 60px 0 0;
    	list-style: none;
    	line-height: normal;
    }
    Have a look at what the validator has to say about your site. Plent of stuff you can fix there.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    myrtle843 (01-16-2008)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •