Jump to content

Issue positioning text

HDFilmMaker2112

By HDFilmMaker2112
in CSS Help

 Share

Recommended Posts

HDFilmMaker2112 Advanced Member

HDFilmMaker2112

Posted
Posted

On this page, http://ghosthuntersportal.com/store.php?product=2, the ADD CART BUTTON text should be next to the Price, GHP#, ect. and centered within the space.

 

style.css

a:link {
color: #FFFFFF;
font-weight: bold;
text-decoration: none; 
}
a:visited {
color: #FFFFFF;
font-weight: bold;
text-decoration: none; 
}
a:active {
color: #FFFFFF;
font-weight: bold;
text-decoration: none; 
}
a:hover {
color: #FF44FF;
font-weight: bold;
text-decoration: none; 
}

.admin_cp a:link {
color: #0000FF;
text-decoration: underline;
font-weight: none;
}
.admin_cp a:visited {
color: #0000FF;
text-decoration: underline;
font-weight: none;
}
.admin_cp a:active {
color: #0000FF;
text-decoration: underline;
font-weight: none;
}
.admin_cp a:hover {
color: #0000FF; 
text-decoration: underline;
font-weight: none;
}


.header{
width: 999px;
height: 75px;
border: 2px;
border-color: #660066;
border-style: none;
border-bottom-style: solid;
}

.logo{
float: left;
margin-top: -12px;
margin-left: -3px;
height: 76px;
width: 460px;
}

.tag{
float: left;
margin-top: 40px;
margin-left: -453px;
height: 35px;
width: 460px;
}

.header_right{
width: 530px;
height: 74px;
float: left;
}

.header_links{
width: 350px;
height: 16px;
text-align: center;
font-size: 12px;
margin-left: 180px;
}

.header_links a:link{
color: #FFFFFF;
text-decoration: none;
}
.header_links a:hover{
color: #FFFFFF;
text-decoration: underline;
font-weight: bold;
}

.ad{
margin-left: 140px;
width: 390px;
height: 55px;
text-align: center;
}

.adposition{
}

.adspacer{
}
.adspacer2{
}

.content_wrapper{
width: 995px;
height: 100%;
min-height: 450px;
border: 2px;
border-color: #660066;
border-style: solid;
border-top-style: none;
overflow: auto;
}

.categories{
margin-top: -10px;
margin-bottom: 3px;
margin-left: -5px;
font-weight: bold;
font-size: 16px;
text-align: center;
}

.links{
font-size: 14px;
margin-top: 15px;
margin-left: 10px;
float: left;
width: 165px;
}

.links a:link{
font-weight: bold;
}

.data_wrapper{
float: right;
width: 815px;
height: 100%;
min-height: 450px;
border: 2px;
border-color: #660066;
border-style: none;
border-left-style: solid;
}

.search_crumbs{
height: 30px;
width: 815px;
margin-top: 7px;
}

.crumbs{
float: left;
width: 400px;
height: 25px;
font-weight: bold;
font-size: 12px;
margin-left: 15px;
margin-top: 5px;
}

.search{
float: right;
width: 325px;
height: 25px;
text-align: right;
font-weight: bold;
font-size: 14px;
margin-right: 15px;
}

.content{
height: 100%;
min-height: 450px;
width: 790px;
margin-left: 15px;
}

.footer{
float: left;
width: 995px;
margin-top: 5px;
text-align: center;
font-size: 11px;
clear: both;
border: 7px;
border-color: #000000;
border-bottom-style: solid;
}

.content_text{
margin-top: 5px;
margin-left: 55px;
font-size: 15px;
width: 671px;
}

.content_header{
font-size: 24px;
text-align: center;
margin-bottom: 5px;
}

.popular_products{
height: 145px;
}

.product{
float: left;
text-align: center;
width: 160px;
margin-top: 10px;
margin-left: 10px;
font-size: 14px;
}

.product a:link{
color: #FF44FF;
font-weight: bold;
text-decoration: underline;
}
.product a:visited {
color: #FF44FF;
font-weight: bold;
text-decoration: underline;
}
.product a:hover{
color: #FFFFFF;
text-decoration: underline;
font-weight: bold;
}

.product_image{
float: left;
margin-top: 5px;
}

.product_details{
float: left;
margin-left: 25px;
}

.product_price{
font-size: 18px;
color: #CC00CC;
}

.product_wrapper{
margin-left: 15px;
width: 700px;
}

.product_links_headers{
float: left;
width: 785px;
margin-top: 10px;
margin-left: 15px;
}

.product_highlights_text{
font-weight: bold;
font-size: 14px;
margin-top: 5px;
}

.product_highlights_item{
font-size: 14px;
margin-top: -13px;
margin-left: -25px;
}

.product_title{
width: 775px;
}

.product_code{
font-size: 12px;
}

.rating_image{
margin-top: 3px;
}

.review_container{
margin-top: 10px;
}

.add_cart_wrapper{
float: left;
width: 250px;
}

.contactus_links{
font-weight: bold;
}
.contactus_links a:link {
color: #FF44FF;
text-decoration: none;
}
.contactus_links a:visited {
color: #FF44FF;
text-decoration: none;
}
.contactus_links a:active {
color: #FF44FF;
text-decoration: none; 
}
.contactus_links a:hover {
color: #FFFFFF;
text-decoration: none; 
}

.product_tab{
width: 200px;
text-align: center;
float: left;
border: 1px;
border-color: #CC00CC;
border-style: solid;
border-collapse: collapse;
}

.product_tab a:link {
color: #FFFFFF;
text-decoration: none;
}
.product_tab a:visited {
color: #FFFFFF;
text-decoration: none;
}
.product_tab a:active {
color: #FFFFFF;
text-decoration: none; 
}
.product_tab a:hover {
color: #FFFFFF;
text-decoration: none; 
}

.product_tab_wrapper{
width: 700px;
clear: both;
margin-top: 320px;
margin-left: 15px;
}

.product_information{
width: 750px;
border: 1px;
border-color: #CC00CC;
border-style: solid;
border-collapse: collapse;
margin-left: 15px;
clear: both;
}

.product_information_text{
padding: 10px;
}

.address{
color: #008800;
margin-left: 40px;
}

.seventypercent{
width: 70%;
}

img{
border: 0px;
}
.center{
text-align: center;
}
.underline{
text-decoration: underline;
}
.bold{
font-weight: bold;
}
.italics{
font-style: italic
}
.eleven{
font-size: 11px;
}
.twelve{
font-size: 12px;
}
.fourteen{
font-size: 14px;
}
.sixteen{
font-size: 16px;
}
.gray{
color: #6F6F6F;
}
.eighteen{
font-size: 18px;
}
.twentyeight{
font-size: 28px;
}
.twentysix{
font-size: 26px;
}
.thirtytwo{
font-size: 32px;
}
.skyblue{
color: #3399FF;
}
.red{
color: #FF0000;
}
.sig{
margin-left: 50px;
margin-top: 325px;
}
.green{
color: #008800;
}
.blue{
color: #000000;
}
.fortyfive{
width: 45%;
}
.sixty{
width: 60%;
}
.twenty{
width: 20%;
}
.clear{
clear: both;
}

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head>
<base href="http://ghosthuntersportal.com/" />
<title>Ghost Hunter's Portal  - Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="verify-v1" content="" />
<meta name="keywords" content="ghost, hunters, hunter, ghosts, spirit, spirits, paranormal, investigation, investigator, investigators, k2, emf, meter, kii" />
<meta name="description" content="Ghost Hunters Potal. Parnormal research equipment store." />
<meta name="author" content="Andrew McCarrick" />
<meta name="robots" content="index, follow" />

<style type="text/css">
body {background-color: #000000; color: #FFFFFF; font-family: Verdana; margin-top: 10px;
margin-right:auto;margin-left:auto;max-width:1000px;}</style>
<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="shortcut icon" href="./favicon.png" />
<script type="text/javascript">
<!--
function load(){
var url = window.location.href;
var parts = url.split("#");
var type = parts[1];
if(type==undefined){
type="overview";
}
sndReq(type);
changeClr('nav'+type);
}


function requestObj() {
    var reqObj;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        reqObj = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        reqObj = new XMLHttpRequest();
    }
    return reqObj;
}

var http = requestObj();

function sndReq(action) {
var product_id ="2";
    http.open('get', 'data.php?get='+action+'&product='+product_id, true); 
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        document.getElementById("ajaxout").innerHTML = response;
    }
}

function changeClr(sel) {
    if(sel == "navoverview"){
        document.getElementById('navoverview').style.backgroundColor = '#AA00AA';
        document.getElementById('navspecifications').style.backgroundColor = '#660066';
        document.getElementById('navreviews').style.backgroundColor = '#660066';
    }
    else if(sel == "navspecifications"){
        document.getElementById('navoverview').style.backgroundColor = '#660066';
        document.getElementById('navspecifications').style.backgroundColor = '#AA00AA';
        document.getElementById('navreviews').style.backgroundColor = '#660066';

    }
    else if(sel == "navreviews"){
        document.getElementById('navoverview').style.backgroundColor = '#660066';
        document.getElementById('navspecifications').style.backgroundColor = '#660066';
        document.getElementById('navreviews').style.backgroundColor = '#AA00AA';
    }
}
//-->
</script></head>
<body onload="load();">
<div class="header">
<a href="./index.php">
<div class="logo"><img src="./logo.png" alt="Ghost Hunter's Portal" /></div>
<div class="tag"><img src="./tag.png" alt="Ghost Hunter's Portal" /></div>
</a>
<div class="header_right">
<div class="ad">

</div>
<div class="header_links">
<a href="./index.php">Home</a> | View Cart | <a href="./index.php?returns">Returns</a> | <a href="./index.php?aboutus">About Us</a> | <a href="./index.php?contactus">Contact Us</a>

</div>
</div>
</div>
<div class="content_wrapper">
<div class="links">
<div class="categories">Categories</div>
<div><a href="store.php?cat=test">Test</a></div>
<div><a href="store.php?cat=test2">Test2</a></div>
<div><a href="store.php?cat=test10">Test10</a></div>
<div><a href="store.php?cat=test20">Test20</a></div>
<div><a href="store.php?cat=test50">Test50</a></div>

<div class="sig"><img src="./sig.png" /></div>
</div>
<div class="data_wrapper">
<div class="search_crumbs">
<div class="crumbs">
<a href="./index.php">Home</a> <span class="eleven">></span> <a href="./store.php?cat=test">Test</a>
<span class="eleven">></span> <a href="./store.php?product=2">Test123</a></div>
<div class="search">
<form action="./index.php?search" method="post">
<label>Search</label> <input type="text" name="search" size="30" />

<input type="submit" value="Go" name="Go" />
</form>
</div>
</div>
<div class="content">

<div class="product_wrapper">
<div class="product_title">Test123</div>
<div class="product_image">
<div><img src="test123.png" alt="Test123" /></div>
</div>
<div class="product_details">
<div class="product_price">Price: $1000</div>
<div class="product_code">GHP#: test</div>

<div class="rating_image"><img src="4.5.png" alt="4.5" /> <span class="twelve">(2 Reviews)</span></div><div><div class="product_highlights_text">Product Highlights</div><div class="product_highlights_item"><ul><li>test</li>
<li>test2</li>
<li>test3</li></ul></div>
</div>
</div>
<div class="add_cart_wrapper">
<div class="add_cart">ADD CART BUTTON</div>
</div>
</div>
<script type="text/javascript"><!--
document.write("\n<div class=\"product_tab_wrapper\">\n<div class=\"product_tab\" id=\"navoverview\" style=\"background-color: #AA00AA;\">\n<a href=\"./store.php?product=2#overview\" onclick=\"sndReq(\'overview\'); changeClr(\'navoverview\');\">Overview</a>\n</div>\n<div class=\"product_tab\" id=\"navspecifications\" style=\"background-color: #660066;\">\n<a href=\"./store.php?product=2#specifications\" onclick=\"sndReq(\'specifications\'); changeClr(\'navspecifications\');\">Specifications</a>\n</div>\n<div class=\"product_tab\" id=\"navreviews\" style=\"background-color: #660066;\">\n<a href=\"./store.php?product=2#reviews\" onclick=\"sndReq(\'reviews\'); changeClr(\'navreviews\');\">Customer Reviews</a>\n</div>\n</div>\n<div class=\"product_information\" id=\"ajaxout\">\ntest\n</div>\n\n");
//--></script>


<noscript>
<div class="product_tab_wrapper">
<div class="product_tab" id="navoverview" style="background-color: #AA00AA;">
<a href="./store.php?product=2">Overview</a>
</div>
<div class="product_tab" id="navspecifications" style="background-color: #660066">
<a href="./store.php?product=2&get=specifications">Specifications</a>
</div>
<div class="product_tab" id="navreviews" style="background-color: #660066;">
<a href="./store.php?product=2&get=reviews">Customer Reviews</a>
</div>
</div>

<div class="product_information"><div class="product_information_text">test</div>
</div>
</noscript>

</div>
<br />
</div>
</div>
<div class="footer">
© 2011  Ghost Hunter's Portal (Designed by: Andrew McCarrick)
</div>
</body>
</html>

Link to comment
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

I am glad you have an online example. The thinng is your .add_cart_wrapper is wider than needed.

You might want to try something like firebug to see what is going on.

right now your .add_cart_wrapper is wider than  possible; .add_cart_wrapper

Link to comment
Share on other sites
HDFilmMaker2112 Advanced Member

HDFilmMaker2112

Posted
  • Author
Posted

When I take that css down to a smaller width, the div doesn't actually butt up against the second div tag that .add_cart_wrapper is contained in (product_wrapper).

 

I just made the width shorter, now take a look. It's about 60-80 pixels short of being centered in the space between "Price: $1000" and the right border.

 

http://ghosthuntersportal.com/store.php?product=2

 

I had .add_cart_wrapper set to a width of 250px... now it's 200px.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.