WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > HTML & XHTML > [SOLVED] Formatting Issues

Reply
  Thread Tools Display Modes
Old 2nd February 14, 07:02 AM   #1
mjc41918
WLC Member
 
Join Date: Feb 2014
Posts: 9
Default 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
mjc41918 is offline   Reply With Quote
Old 2nd February 14, 02:11 PM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,709
Default Re: Formatting Issues

Try adding a clear:both to the logo.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 3rd February 14, 01:08 AM   #3
mjc41918
WLC Member
 
Join Date: Feb 2014
Posts: 9
Default Re: Formatting Issues

It didn't work I still cant get the new DIV do be where I want it
mjc41918 is offline   Reply With Quote
Old 3rd February 14, 02:38 AM   #4
ronaldroe
WLC Lover
 
ronaldroe's Avatar
 
Join Date: Feb 2013
Posts: 197
Default 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.
ronaldroe is offline   Reply With Quote
Old 4th February 14, 03:56 AM   #5
mjc41918
WLC Member
 
Join Date: Feb 2014
Posts: 9
Default 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.
mjc41918 is offline   Reply With Quote
Old 4th February 14, 03:57 AM   #6
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,709
Default 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?
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 4th February 14, 04:29 AM   #7
mjc41918
WLC Member
 
Join Date: Feb 2014
Posts: 9
Default 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

Last edited by mjc41918; 4th February 14 at 05:12 AM.
mjc41918 is offline   Reply With Quote
Old 4th February 14, 04:33 AM   #8
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,709
Default Re: Formatting Issues

Assuming you're referring to the social media buttons, adding a clear:right works for me.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 4th February 14, 04:44 AM   #9
mjc41918
WLC Member
 
Join Date: Feb 2014
Posts: 9
Default 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 is offline   Reply With Quote
Old 4th February 14, 04:45 AM   #10
mjc41918
WLC Member
 
Join Date: Feb 2014
Posts: 9
Default Re: Formatting Issues

and should I insert images like I did of use css to do it?
mjc41918 is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:25 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.