Html CSS格式化模板以使布局正常工作
大家好,我想知道我是否可以在我的网站上得到一些帮助。这是一个关于电子商务的uni作业,我使用了一个模板。我已经得到了一个Javascript代码来跟踪购物篮中商品的数量和成本,但我无法很好地显示它 它要么与“购物车”位于同一行,要么如果我使用Html CSS格式化模板以使布局正常工作,html,css,formatting,styles,Html,Css,Formatting,Styles,大家好,我想知道我是否可以在我的网站上得到一些帮助。这是一个关于电子商务的uni作业,我使用了一个模板。我已经得到了一个Javascript代码来跟踪购物篮中商品的数量和成本,但我无法很好地显示它 它要么与“购物车”位于同一行,要么如果我使用则位于标题菜单部分下方 让你明白我的意思 header.php的代码 <h1 id="logo"><a href="index.html">Pet Accessories</a></h1>
则位于标题菜单部分下方
让你明白我的意思
header.php的代码
<h1 id="logo"><a href="index.html">Pet Accessories</a></h1>
<!-- Cart -->
<div id="cart">
<a href="managecart.html" class="cart-link" >Your Shopping Cart</a>
<br />
<script language="javascript" >
if ( Cart_is_empty()) {
document.write('Your cart is empty.');
} else {
Print_total_products(true);
document.write(', ');
Print_total(true);
}
</script>
</div>
<!-- End Cart -->
<!-- Navigation -->
<div id="navigation">
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- End Navigation -->
我已经尽力提供尽可能多的信息,任何帮助都将不胜感激。我不知道是否需要修改.css文件或使用另一种类型的
来让文本显示在正确的位置
谢谢
Jamie元素的行高为38px。去掉那个
您可能要做的另一件事是删除
标记,使它们位于同一行中
请注意,160px的宽度不够。您应该使其更高(也更改所有其他元素的宽度)或删除空白:nowrap在#cart
元素中进行编码>。将#cart中的高度更改为最小高度(以及顶部的其余部分),或将其完全移除
如果您必须将其设置在固定高度,请将车内的线条高度更改为足够小,以使其适合。您想要的“正确位置”在哪里@埃德蒙·约瑟夫谢谢!我刚刚调整了线的高度到15px,它似乎工作得很好,谢谢!我刚刚将线条高度调整为15px,看起来效果不错。我不好意思说我的搭档有style.css和/css/style.css,而我修改了错误的一个:/
#header { height:64px; background:url(images/header.gif); position:relative;}
#navigation { float:right; white-space:nowrap; }
#navigation ul{ list-style-type: none; height:64px; font-weight: bold; float:left;}
#navigation ul li{ float:left; display:inline; }
#navigation ul li a{ float:left; height:64px; line-height:64px; text-decoration: none; color:#fff; padding:0 15px;}
#navigation ul li a.active,
#navigation ul li a:hover{ background:#fff; color:#8b0000; }
#cart { float:right; width:160px; top:0; right:0; height:51px; background:#8b0000; color:#fff; padding:13px 10px 0 10px; white-space:nowrap; line-height:38px;}
a.cart-link { color:#fff; background:url(images/cart-link.gif) no-repeat 0 0; padding:0 0 0 32px; text-decoration: none;}
a.cart-link:hover { text-decoration: underline;}
#sidebar { float:left; width:226px;}
#content { float:right; width:724px;}
#main { padding:10px 0 0 0; }