An html tip needed

Pedroski · 06-04-2014, 08:30 PM

Hi, I know this is not really a Linux question. Maybe someone knows, I don't know where to ask. I am using Bluefish.

I made a web page with 6 boxes at the top.

Code:

<ul>
<li><a href="index.html">主页<p>Home</p></a></li>
<li><a href="chinese.html">中国家庭<p>Chinese</p></a></li>
<li><a href="english.html">英国互惠生<p>English</p></a></li>
<li><a href="german.html">德国互惠生<p>German</p></a></li>
<li><a href="spanish.html">联系我们<p>Spanish</p></a></li>
<li><a href="references.html">联系我们<p>References</p></a></li>
</ul>

These are governed by mystyle.css

the option 'float' does not have a parameter 'center' only left or right.

I would like the boxes to appear in the centre.

Code:

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
margin:5px
}
a:link,a:visited
{
display:block;
width:150px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:2px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
body 
{
background-image:url('mypicrl.jpg');
background-repeat:no-repeat; 
background-size:100% ;
background-color:#cccccc;
}

I tried putting <div> just under <body>

Code:

<div class="container">

with

Code:

<style type="text/css">
.container (width 900px; margin-left: auto; margin-right: auto;) 
</style>

But my boxes still stay on the left of the page.

I would like the whole page centred, and then the top boxes with it.

Any tips??

lylemwood · 06-04-2014, 08:47 PM

Try using margin:auto for the ul.

If you need more help them Google is your friend for many many examples.

Pedroski · 06-04-2014, 09:37 PM

Thanks, I set
margin: 0 12%

Works! Maybe there is a better way, but it works!

Google is being blitzed by China at the moment. It is almost impossible to reach, even using vpn!

colucix · 06-05-2014, 02:28 AM

Moved: This thread is more suitable in Programming and has been moved accordingly to help your thread/question get the exposure it deserves.

Dafydd · 06-05-2014, 10:49 PM

Untested, but it is what I would try first.

Code:

<div align="center">
<ul>
<li><a href="index.html">主页<p>Home</p></a></li><br>
<li><a href="chinese.html">中国家庭<p>Chinese</p></a></li><br>
<li><a href="english.html">英国互惠生<p>English</p></a></li><br>
<li><a href="german.html">德国互惠生<p>German</p></a></li><br>
<li><a href="spanish.html">联系我们<p>Spanish</p></a></li><br>
<li><a href="references.html">联系我们<p>References</p></a></li>
</ul>
</dir>>

dugan · 06-05-2014, 11:24 PM

Quote:

Originally Posted by Pedroski

Google is being blitzed by China at the moment. It is almost impossible to reach, even using vpn!

June 4th? I have no idea why that would happen on that date.

Anyway, this is currently one of the best CSS guides:

http://adamschwartz.co/magic-of-css/

Pedroski · 06-08-2014, 06:04 AM

I got around the problem by using a 1 cell table

Code:

<table cellpadding="5" cellspacing="0" width="80%"><tr><td>

and in the css

Code:

body 
{

margin-left: 10%;

Probably not the most elegant solution, but it works!

Thanks for the tips. I like the css link. I will read it very carefully!