WeLoveCSS

WeLoveCSS (http://welovecss.com/index.php)
-   HTML & XHTML (http://welovecss.com/forumdisplay.php?f=14)
-   -   [SOLVED] Formatting Issues (http://welovecss.com/showthread.php?t=9110)

mjc41918 2nd February 14 08:02 AM

Formatting Issues
 
I have a space between to items on this template that I want to place a DIV tag to display below the first part of the code is below and above the second half.


Code:

  <div id="mainWrapper">
        <div id="main">
            <div id="topPortion">
                <h1><a href="index.html"><img alt="" src="images/logo.png/></a></h1>
                <em class="ttip">PC Help</em>
                <p><span>John Allen<b>&nbsp;1-838-213-5548</b></span></p>

Space is here

Code:

<ul class="menu">
                    <li class="active">
                        <a class="active" href="index.html">Home </a>
                    </li>
                    <li class="space">|</li>
                    <li><a href="Gallery.html">Gallery</a></li>
                    <li class="space">|</li>
                    <li><a href="Contributor.html">Contributor</a></li>
                    <li class="space">|</li>
                    <li><a href="Sponsors.html">Sponsors</a></li>
                    <li class="space">|</li>
                    <li><a href="faq.html">Help</a></li>
                    <li class="space">|</li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>

I want to place a facebook image where you see "Space Here" but every I try the it shows up next to the left side of the name and phone number rather then under it


Here is the corresponding CSS that controls the current code

Code:

#topPortion{
        float:left;
        width:977px;
        position:relative;
}
#topPortion h1{
        float:left;
        display:block;
        margin:25px 0 25px 30px;
}

em.ttip {
        background: url(images/bubble.png) no-repeat;
        width: 112px;
        height: 56px;
        position: absolute;
        top: -120px;
        left: 50px;
        text-align: center;
        text-indent:-0px;
        z-index: 2;
        font-size:14px;
        font-weight:bold;
        display: none;
        line-height:70px;
        color:#4e4e4e;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#topPortion p{
        float:right;
        width:170px;
        text-align:right;
        display:block;
        margin:20px 0px 0 0px;
        text-align:right;
}
#topPortion p span{
        float:left;
        width:auto;
        display:block;
        color:#597da6;
        font-size:12px;
        height: 39px;
        margin-top: 22px;
}
ul.menu{
        float:right;
        padding:10px 0 0 25px;
        width:595px;
        height:65px;
        margin:40px 0 0 0;
        background:url(images/menu_bg.png) no-repeat bottom left;
       
}
ul.menu li{
        float:left;
        padding:0px 0 0px 0;
}
ul.menu li.space{width:14px; height:10px; float:left; text-indent:-9999px;}
ul.menu li.space:hover{ background:none}
ul.menu li:hover,ul.menu li.active {background:url(images/down_arrow.png) no-repeat top center; position:relative; top:-4px; padding:6px 0 0 0;}
ul.menu li a{
        float:left;
        padding:10px 12px 0px 12px;
        display:block;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        text-transform:uppercase;
        line-height:24px;
        color:#b5b3b3;
        font-size:14px;
        font-weight:bold;
}
ul.menu li a:hover, ul.menu li a.active{
        float:left;
        color:#e68322;
        padding:10px 10px 0px 10px;
        display:block;
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        line-height:24px;
}

I haven included the code I was trying to use because it wasn't working would anyone be able to tell me what I can should do to accomplish what I am attempting to do

meesa 2nd February 14 03:11 PM

Re: Formatting Issues
 
Try adding a clear:both to the logo.

mjc41918 3rd February 14 02:08 AM

Re: Formatting Issues
 
It didn't work I still cant get the new DIV do be where I want it

ronaldroe 3rd February 14 03:38 AM

Re: Formatting Issues
 
Do you have a server where you can upload your code? It'd make it a good bit easier to help you.

mjc41918 4th February 14 04:56 AM

Re: Formatting Issues
 
Yes sir the website is patsysrun . com.

I want to put some images between the phone number and the menu bar.

Each time I try to put anything there it either wont load or will load to the right of the the phone number but I cant get it to load below the number.

meesa 4th February 14 04:57 AM

Re: Formatting Issues
 
Can you create a test page that has the elements you want on it, and then we can figure out where you're going wrong?

mjc41918 4th February 14 05:29 AM

Re: Formatting Issues
 
Done. The test page is patsysrun(DOT)com/index2.html

I have three images that I want to show up right below the number but as you can see its next to it

meesa 4th February 14 05:33 AM

Re: Formatting Issues
 
Assuming you're referring to the social media buttons, adding a clear:right works for me.

mjc41918 4th February 14 05:44 AM

Re: Formatting Issues
 
Yes it was the social media buttons & clear: right seems to have fixed that.

Does the structure of the topPortion look right to you it seem off and one change at times seem to cause the whole thing to blow up

mjc41918 4th February 14 05:45 AM

Re: Formatting Issues
 
and should I insert images like I did of use css to do it?


All times are GMT. The time now is 08:09 AM.

Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.